/* Conversa do pedido (cliente e loja): app de mensagens com balões, dia e campo que cresce. */
.rd-conversa {
    --rd-conversa-minha: var(--cor-principal, #0062cc);
    --rd-conversa-sobre-minha: var(--cor-sobre-principal, #fff);
    display: flex;
    flex-direction: column;
    min-height: 0;
    border: 1px solid var(--rd-border, #e3e7ed);
    border-radius: 14px;
    background: var(--rd-surface, #fff);
    overflow: hidden;
}

.rd-conversa-topo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--rd-border, #e3e7ed);
    background: var(--rd-surface, #fff);
}

.rd-conversa-avatar {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--rd-conversa-minha) 12%, #fff);
    color: var(--rd-conversa-minha);
    font-size: 1.05rem;
}

.rd-conversa-titulos { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.rd-conversa-titulos strong { font-size: .95rem; font-weight: 650; color: var(--rd-text, #18212f); }

.rd-conversa-estado { font-size: .78rem; color: var(--rd-text-muted, #667085); }
.rd-conversa-estado.aberta::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 5px;
    border-radius: 50%;
    background: #16845b;
    vertical-align: 1px;
}

.rd-conversa-mensagens {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-height: 180px;
    max-height: var(--rd-conversa-altura, 340px);
    padding: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--rd-surface-subtle, #f4f6f8);
}

.rd-conversa-vazio {
    margin: auto;
    padding: 24px 12px;
    color: var(--rd-text-muted, #667085);
    font-size: .875rem;
    text-align: center;
}

.rd-conversa-dia {
    align-self: center;
    margin: 10px 0 6px;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--rd-surface, #fff);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
    color: var(--rd-text-muted, #667085);
    font-size: .72rem;
    font-weight: 600;
}

.rd-conversa-linha { display: flex; }
.rd-conversa-linha.inicio { margin-top: 8px; }
.rd-conversa-linha.minha { justify-content: flex-end; }

.rd-conversa-balao {
    position: relative;
    max-width: min(80%, 34rem);
    padding: 6px 10px 5px;
    border-radius: 16px;
    background: var(--rd-surface, #fff);
    box-shadow: 0 1px 1px rgba(16, 24, 40, .08);
    color: var(--rd-text, #18212f);
    font-size: .9rem;
    line-height: 1.4;
}

.rd-conversa-linha.inicio:not(.minha) .rd-conversa-balao { border-top-left-radius: 4px; }
.rd-conversa-linha.inicio.minha .rd-conversa-balao { border-top-right-radius: 4px; }

.rd-conversa-linha.minha .rd-conversa-balao {
    background: var(--rd-conversa-minha);
    color: var(--rd-conversa-sobre-minha);
}

.rd-conversa-nome {
    display: block;
    margin-bottom: 1px;
    color: var(--rd-conversa-minha);
    font-size: .75rem;
    font-weight: 650;
}

.rd-conversa-texto { white-space: pre-wrap; overflow-wrap: anywhere; }

.rd-conversa-hora {
    float: right;
    margin: 6px 0 -2px 10px;
    font-size: .68rem;
    line-height: 1;
    opacity: .7;
}

.rd-conversa-linha.pendente .rd-conversa-balao { opacity: .65; }
.rd-conversa-linha.erro .rd-conversa-balao { outline: 2px solid #c63838; outline-offset: 1px; }
.rd-conversa-linha.erro .rd-conversa-hora { color: inherit; font-weight: 700; opacity: 1; }

.rd-conversa-rodape {
    padding: 8px 10px 10px;
    border-top: 1px solid var(--rd-border, #e3e7ed);
    background: var(--rd-surface, #fff);
}

.rd-conversa-aviso { margin: 0 2px 6px; color: var(--rd-text-muted, #667085); font-size: .72rem; }

.rd-conversa-envio { display: flex; gap: 8px; align-items: flex-end; }

.rd-conversa-campo {
    flex: 1;
    min-width: 0;
    min-height: 40px;
    max-height: 120px;
    padding: 9px 14px;
    border: 1px solid var(--rd-border-strong, #cfd6df);
    border-radius: 20px;
    background: var(--rd-surface, #fff);
    color: var(--rd-text, #18212f);
    font: inherit;
    font-size: .9rem;
    line-height: 1.35;
    resize: none;
}

.rd-conversa-campo:focus {
    border-color: var(--rd-conversa-minha);
    outline: 0;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rd-conversa-minha) 20%, transparent);
}

.rd-conversa-contador { align-self: center; color: var(--rd-text-muted, #667085); font-size: .72rem; }
.rd-conversa-contador:empty { display: none; }

.rd-conversa-enviar {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--rd-conversa-minha);
    color: var(--rd-conversa-sobre-minha);
    font-size: 1rem;
    transition: transform .12s ease, opacity .12s ease;
}

.rd-conversa-enviar:not(:disabled):hover { transform: scale(1.05); }
.rd-conversa-enviar:disabled { opacity: .4; cursor: default; }
.rd-conversa-enviar:focus-visible { outline: 3px solid color-mix(in srgb, var(--rd-conversa-minha) 35%, transparent); outline-offset: 2px; }

.rd-conversa-encerrada {
    margin: 0;
    padding: 10px 12px;
    border-top: 1px solid var(--rd-border, #e3e7ed);
    background: var(--rd-surface, #fff);
    color: var(--rd-text-muted, #667085);
    font-size: .8rem;
    text-align: center;
}

/* Dentro da bolha de atendimento: a conversa ocupa o painel inteiro, sem moldura dupla. */
.rd-painel .rd-conversa { flex: 1; border: 0; border-radius: 0; }
.rd-painel .rd-conversa-mensagens { max-height: none; }

@media (prefers-reduced-motion: reduce) {
    .rd-conversa-enviar { transition: none; }
}

.rd-conversa-raiz { display: flex; flex: 1; flex-direction: column; min-height: 0; }

/* Ações da loja sobre o pedido, acima da conversa na bolha de atendimento. */
.rd-conversa-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--rd-border, #e3e7ed);
}
.rd-conversa-acoes [data-cancelar] { flex-basis: 100%; margin-bottom: 0 !important; }