/* ─────────────────────────────────────────────────────────────
   Layout de chat: cada bloco tem position:fixed explícito.
   Não depende de flex no body nem de height:100dvh.
   ────────────────────────────────────────────────────────────── */

/* Alturas das zonas fixas — ajustadas aqui se necessário */
:root {
    --nav-h:     70px;  /* .nav em assets/style.css */
    --footer-h:  28px;  /* .chat-footer */
    --input-h:   70px;  /* .input-area (padding + input 46px) */
}
@media (max-width: 640px) {
    :root { --nav-h: 62px; } /* nav mais baixa no mobile */
}

/* ── Área de mensagens — preenche tudo entre nav e footer ── */
#messages {
    position: fixed;
    top:    var(--nav-h);
    left:   0;
    right:  0;
    bottom: calc(var(--footer-h) + var(--input-h));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--fundo, #f9fbfa);
}

/* ── Footer ── */
.chat-footer {
    position: fixed;
    left:   0;
    right:  0;
    bottom: var(--input-h);
    height: var(--footer-h);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    color: var(--texto-3, #6b8a76);
    background: var(--fundo, #f9fbfa);
    border-top: 1px solid var(--borda, #e2ede7);
    letter-spacing: 0.03em;
}

/* ── Área de input — cola ao fundo do ecrã ── */
.input-area {
    position: fixed;
    left:   0;
    right:  0;
    bottom: 0;
    display: flex;
    gap: 8px;
    padding: 12px 14px;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 12px));
    border-top: 1px solid var(--borda, #e2ede7);
    background: var(--branco, #ffffff);
    z-index: 10;
}


.input-area input {
    flex: 1;
    padding: 12px 14px;
    border: 1px solid var(--borda, #e2ede7);
    border-radius: 8px;
    background: var(--fundo, #f9fbfa);
    color: var(--texto, #0d1f12);
    font-size: 16px;
    font-family: var(--font, 'Inter', system-ui, sans-serif);
    outline: none;
    transition: border-color 0.18s;
    -webkit-appearance: none;
    appearance: none;
}
.input-area input:focus       { border-color: var(--verde, #1a6b35); background: #fff; }
.input-area input::placeholder { color: var(--texto-3, #6b8a76); }
.input-area input:disabled    { opacity: 0.5; cursor: not-allowed; }

.input-area button {
    padding: 12px 18px;
    border: none;
    border-radius: 8px;
    background: var(--verde, #1a6b35);
    color: #ffffff;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    font-family: var(--font, 'Inter', system-ui, sans-serif);
    transition: background 0.18s;
    min-height: 46px;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    box-shadow: none;
    transform: none;
}
@media (hover: hover) {
    .input-area button:hover:not(:disabled) { background: var(--verde-hover, #22883f); }
}
.input-area button:active:not(:disabled) { background: var(--verde-hover, #22883f); }
.input-area button:disabled              { opacity: 0.6; cursor: not-allowed; }

/* ── Bolhas de mensagem ── */
.message {
    padding: 12px 15px;
    border-radius: 14px;
    max-width: 86%;
    line-height: 1.7;
    word-break: break-word;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.user {
    background: var(--verde, #1a6b35);
    color: #ffffff;
    margin-left: auto;
    border-bottom-right-radius: 4px;
}

.assistant {
    background: var(--branco, #ffffff);
    color: var(--texto, #0d1f12);
    border: 1px solid var(--borda, #e2ede7);
    border-bottom-left-radius: 4px;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

/* Texto formatado pelo agente: **palavra** → negrito verde */
.assistant strong {
    color: var(--verde, #1a6b35);
    font-weight: 700;
}

/* ── Estados especiais ── */
.a-pensar {
    color: var(--texto-3, #6b8a76);
    font-style: italic;
    background: var(--verde-muted, #f0f9f3);
    border-color: var(--verde-border, #c3e0cd);
}

.erro {
    color: #b91c1c;
    background: #fef2f2;
    border-color: #fecaca;
}

/* ── Mobile fino ── */
@media (max-width: 480px) {
    .message           { max-width: 95%; font-size: 0.92rem; }
    .input-area button { padding: 12px 12px; font-size: 14px; }
}