:root {
    --sabao: #eef6f2;
    --folha: #1f6f54;
    --folha-escura: #16523e;
    --creme: #fbf8f2;
    --carvao: #22302c;
    --cinza: #6f8079;
    --linha: #dce8e1;
    --bolha-cliente: #ffffff;
    --bolha-empresa: #1f6f54;
    --alerta: #b8562f;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--sabao);
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
    color: var(--carvao);
}

a { color: inherit; text-decoration: none; }

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
}

/* ---------- Topo ---------- */

.topo {
    background: var(--folha);
    color: #fff;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    position: sticky;
    top: 0;
    z-index: 10;
}

.topo .voltar {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}
.topo .voltar svg { width: 100%; height: 100%; }

.topo .titulo {
    font-size: 16px;
    font-weight: 700;
}

.topo .subtitulo {
    font-size: 12px;
    color: rgba(255,255,255,0.75);
}

/* ---------- Lista de conversas ---------- */

.lista {
    max-width: 640px;
    margin: 0 auto;
    padding: 12px;
}

.busca {
    width: 100%;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid var(--linha);
    margin-bottom: 12px;
    font-size: 14px;
}

.card-conversa {
    background: #fff;
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 10px;
    display: flex;
    gap: 12px;
    align-items: center;
    box-shadow: 0 1px 3px rgba(20,40,32,0.08);
}

.card-conversa .avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--sabao);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--folha);
    flex-shrink: 0;
}

.card-conversa .info { flex: 1; min-width: 0; }

.card-conversa .nome {
    font-weight: 700;
    font-size: 14.5px;
}

.card-conversa .detalhe {
    font-size: 12.5px;
    color: var(--cinza);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.selo-status {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    flex-shrink: 0;
}
.selo-status.active { background: rgba(31,111,84,0.12); color: var(--folha-escura); }
.selo-status.closed { background: rgba(111,128,121,0.15); color: var(--cinza); }

.estado-vazio, .estado-erro {
    text-align: center;
    color: var(--cinza);
    padding: 40px 20px;
    font-size: 14px;
}
.estado-erro { color: var(--alerta); }

/* ---------- Conversa ---------- */

.resumo {
    background: #fff;
    margin: 12px;
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 1px 3px rgba(20,40,32,0.08);
    font-size: 13.5px;
    line-height: 1.5;
}
.resumo .rotulo {
    font-size: 11px;
    font-weight: 700;
    color: var(--folha-escura);
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

.conversa {
    max-width: 640px;
    margin: 0 auto;
    padding: 6px 12px 140px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.linha-msg { display: flex; flex-direction: column; max-width: 82%; }
.linha-msg.cliente { align-self: flex-start; }
.linha-msg.empresa { align-self: flex-end; align-items: flex-end; }

.bolha {
    padding: 10px 14px;
    font-size: 14.5px;
    line-height: 1.45;
}
.bolha.cliente {
    background: var(--bolha-cliente);
    color: var(--carvao);
    border-radius: 4px 16px 16px 16px;
    box-shadow: 0 1px 3px rgba(20,40,32,0.08);
}
.bolha.empresa {
    background: var(--bolha-empresa);
    color: #fff;
    border-radius: 16px 4px 16px 16px;
}

.bolha .traducao {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--cinza);
    font-style: italic;
}
.bolha.empresa .traducao { color: rgba(255,255,255,0.75); }

.horario {
    font-size: 10.5px;
    color: var(--cinza);
    margin-top: 4px;
    padding: 0 4px;
}

/* ---------- Área inferior fixa (rascunho / colar mensagem) ---------- */

.rodape {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: var(--creme);
    border-top: 1px solid var(--linha);
    padding: 10px 14px 16px;
    max-width: 640px;
    margin: 0 auto;
}

.rotulo-rodape {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--folha-escura);
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}

.campo-rodape {
    width: 100%;
    min-height: 60px;
    border-radius: 14px;
    border: 1px solid var(--linha);
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    background: #fff;
}

.linha-botoes {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.botao {
    padding: 10px 16px;
    border-radius: 20px;
    font-size: 13.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
}
.botao svg { width: 16px; height: 16px; }

.botao.principal { background: var(--folha); color: #fff; flex: 1; justify-content: center; }
.botao.secundario { background: #fff; color: var(--folha-escura); border: 1px solid var(--linha); }
.botao.gerar { background: var(--folha-escura); color: #fff; }
.botao:disabled { opacity: 0.55; cursor: not-allowed; }

.chips-instrucao {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin: 8px 0;
}
.chip {
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--linha);
    color: var(--folha-escura);
    cursor: pointer;
}
.chip.selecionado { background: var(--folha); color: #fff; border-color: var(--folha); }

.carregando, .erro-topo {
    text-align: center;
    padding: 30px;
    color: var(--cinza);
    font-size: 14px;
}
.erro-topo { color: var(--alerta); }