/* ============================================================
   Val · página conversacional
   Identidade: IDENTIDADE/IDENTIDADE.md (cores em HEX, Fraunces + Geist + Geist Mono)
   Formas: bolhas e painéis 16px · campo 14px · botões e chips em pílula
   ============================================================ */

:root {
  --fundo: #FCFBF8;
  --fundo-halo: #F6F2EA;
  --superficie: #EEE9DD;
  --campo: #FFFFFF;
  --texto: #1A2226;
  --texto-2: #3F4B53;
  --linha: #E7E1D5;
  --navy: #1A3A6B;
  --creme: #F5EFE2;
  --ouro: #C5A572;
  --filete: #B08A2E;          /* ouro de dado: filete em fundo claro (3,2:1) */
  --lead-fundo: #1A3A6B;
  --lead-texto: #F5EFE2;
  --botao: #1A3A6B;
  --botao-texto: #F5EFE2;
  --chip-borda: #1A3A6B;
  --chip-texto: #1A3A6B;
  --chip-hover: #EEE9DD;
  --foco: rgba(26, 58, 107, .22);
  --sombra: 0 1px 0 rgba(26, 34, 38, .04), 0 12px 32px -20px rgba(26, 58, 107, .35);
  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;
  --r-bolha: 16px;
  --r-campo: 14px;
  --r-pill: 999px;
  --largura: 720px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #1A3A6B;
    --fundo-halo: #1B3866;
    --superficie: rgba(245, 239, 226, .10);
    --campo: rgba(245, 239, 226, .08);
    --texto: #F5EFE2;
    --texto-2: rgba(245, 239, 226, .74);
    --linha: rgba(245, 239, 226, .20);
    --filete: #C5A572;
    --lead-fundo: #2C5DAF;
    --lead-texto: #FFFFFF;
    --botao: #F5EFE2;
    --botao-texto: #1A3A6B;
    --chip-borda: rgba(245, 239, 226, .6);
    --chip-texto: #F5EFE2;
    --chip-hover: rgba(245, 239, 226, .12);
    --foco: rgba(245, 239, 226, .28);
    --sombra: none;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: radial-gradient(1100px 480px at 18% -12%, var(--fundo-halo) 0%, transparent 62%), var(--fundo);
  color: var(--texto);
  font: 400 17px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
@media (prefers-color-scheme: dark) { :focus-visible { outline-color: var(--creme); } }

/* ── Topo ───────────────────────────────────────────────────────────────── */
.topo {
  position: sticky; top: 0; z-index: 10;
  background: var(--navy);
  color: var(--creme);
  border-top: 4px solid var(--ouro);           /* assinatura da marca */
}
@media (prefers-color-scheme: dark) { .topo { border-bottom: 1px solid var(--linha); } }
.topo__inner {
  max-width: var(--largura); margin: 0 auto; padding: 0 16px;
  height: 60px; display: flex; align-items: center; gap: 20px;
}
.topo__logo { display: inline-flex; line-height: 0; }
.topo__logo img { height: 26px; width: auto; }
.progresso { display: flex; gap: 6px; flex: 1; max-width: 340px; margin-left: auto; }
.progresso__seg { height: 3px; flex: 1; border-radius: 2px; background: rgba(245, 239, 226, .22); transition: background .4s var(--ease); }
.progresso__seg.on { background: var(--ouro); }
.topo__contador { font: 500 13px/1 var(--mono); letter-spacing: .02em; color: var(--creme); white-space: nowrap; }
.topo__contador strong { font-size: 18px; font-weight: 500; }
.topo__contador span { opacity: .6; }
@media (max-width: 480px) {
  .topo__inner { height: 54px; gap: 14px; }
  .topo__logo img { height: 22px; }
  .progresso { max-width: none; }
}

/* ── Fio da conversa ────────────────────────────────────────────────────── */
.palco { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 28px 16px 12px; padding-bottom: var(--respiro-dock, 12px); }
.fio { display: flex; flex-direction: column; gap: 10px; }
.msg { display: flex; gap: 10px; align-items: flex-end; max-width: 88%; animation: entrar .32s var(--ease) both; }
.msg--bot { align-self: flex-start; }
.msg--lead { align-self: flex-end; }
.msg + .msg--bot { margin-top: 2px; }
.msg--lead + .msg--bot, .msg--bot + .msg--lead { margin-top: 10px; }
.avatar {
  flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%;
  background: var(--navy); color: var(--creme);
  display: inline-flex; align-items: center; justify-content: center;
  font: italic 600 17px/1 var(--serif);
}
@media (prefers-color-scheme: dark) { .avatar { background: var(--creme); color: var(--navy); } }
.msg--bot:has(+ .msg--bot) .avatar { visibility: hidden; }     /* avatar só no último balão do bloco */
.bolha {
  padding: 12px 16px; border-radius: var(--r-bolha);
  background: var(--superficie); color: var(--texto);
  white-space: pre-line; overflow-wrap: anywhere;
}
.bolha p { margin: 0; }
.bolha p + p { margin-top: 10px; }
.msg--bot .bolha { border-bottom-left-radius: 6px; }
.msg--lead .bolha { background: var(--lead-fundo); color: var(--lead-texto); border-bottom-right-radius: 6px; font-weight: 500; }
.bolha--destaque {
  background: var(--campo); border: 1px solid var(--linha); border-left: 3px solid var(--filete);
  box-shadow: var(--sombra);
  font-family: var(--serif); font-size: 1.2rem; line-height: 1.45; font-weight: 400;
  padding: 18px 20px;
}
@media (max-width: 480px) { .msg { max-width: 94%; } .bolha--destaque { font-size: 1.1rem; } }

.typing { display: flex; gap: 10px; align-items: flex-end; margin-top: 10px; animation: entrar .2s var(--ease) both; }
.typing__bolha { display: inline-flex; gap: 5px; padding: 14px 16px; border-radius: var(--r-bolha); border-bottom-left-radius: 6px; background: var(--superficie); }
.typing__bolha i { width: 6px; height: 6px; border-radius: 50%; background: var(--texto-2); opacity: .55; animation: pulsar 1.1s ease-in-out infinite; }
.typing__bolha i:nth-child(2) { animation-delay: .15s; }
.typing__bolha i:nth-child(3) { animation-delay: .3s; }

/* ── Dock (entrada) ─────────────────────────────────────────────────────── */
.dock {
  position: sticky; bottom: 0; z-index: 5;
  background: linear-gradient(to top, var(--fundo) 78%, transparent);
  padding: 10px 0 max(10px, env(safe-area-inset-bottom));
}
.dock__inner { max-width: var(--largura); margin: 0 auto; padding: 0 16px; display: grid; gap: 10px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; animation: entrar .28s var(--ease) both; }
.chip {
  border: 1px solid var(--chip-borda); color: var(--chip-texto); background: transparent;
  border-radius: var(--r-pill); padding: 10px 16px; font-weight: 500; font-size: 15px; line-height: 1.2;
  transition: background .15s, transform .1s;
}
@media (hover: hover) { .chip:hover { background: var(--chip-hover); } }
.chip:active { transform: scale(.98); }
.chip:disabled { opacity: .45; cursor: default; }

.campo { display: grid; gap: 6px; animation: entrar .28s var(--ease) both; }
.campo__rotulo { font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2); padding-left: 4px; }
.campo__rotulo[hidden] { display: none; }
.campo__linha {
  display: flex; align-items: center; gap: 8px;
  background: var(--campo); border: 1px solid var(--linha); border-radius: var(--r-campo);
  padding: 5px 5px 5px 16px; box-shadow: var(--sombra);
  transition: border-color .15s, box-shadow .15s;
}
.campo__linha:focus-within { border-color: var(--navy); box-shadow: 0 0 0 3px var(--foco); }
@media (prefers-color-scheme: dark) { .campo__linha:focus-within { border-color: var(--creme); } }
.campo__input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  color: var(--texto); font: 400 17px/1.4 var(--sans); padding: 8px 0;
}
.campo__input::placeholder { color: var(--texto-2); opacity: 1; }
.campo__input:disabled { opacity: .5; }
.campo__oculto { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.campo__enviar {
  flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%; border: 0;
  background: var(--botao); color: var(--botao-texto);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .1s, opacity .15s;
}
.campo__enviar:hover { opacity: .92; }
.campo__enviar:active { transform: scale(.96); }
.campo__enviar:disabled { opacity: .35; cursor: default; }

/* ── Agenda inline ──────────────────────────────────────────────────────── */
.agenda {
  background: var(--campo); border: 1px solid var(--linha); border-radius: var(--r-bolha);
  padding: 14px; box-shadow: var(--sombra); display: grid; gap: 12px; animation: entrar .28s var(--ease) both;
}
.agenda__titulo { font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2); }
.agenda__dias { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.dia {
  flex: 0 0 auto; min-width: 64px; display: grid; justify-items: center; gap: 2px;
  padding: 8px 10px; border-radius: var(--r-bolha); border: 1px solid var(--linha); background: transparent; color: var(--texto);
  transition: background .15s, border-color .15s;
}
.dia__sem { font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--texto-2); }
.dia__num { font: 500 22px/1.1 var(--serif); }
.dia__mes { font: 400 11px/1 var(--mono); color: var(--texto-2); }
@media (hover: hover) { .dia:hover { background: var(--chip-hover); } }
.dia.on { background: var(--navy); border-color: var(--navy); color: var(--creme); }
.dia.on .dia__sem, .dia.on .dia__mes { color: var(--creme); opacity: .8; }
@media (prefers-color-scheme: dark) { .dia.on { background: var(--creme); border-color: var(--creme); color: var(--navy); } .dia.on .dia__sem, .dia.on .dia__mes { color: var(--navy); } }
.agenda__horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 8px; }
.hora {
  padding: 10px 6px; border-radius: var(--r-pill); border: 1px solid var(--chip-borda); background: transparent; color: var(--chip-texto);
  font: 500 15px/1 var(--mono); transition: background .15s, transform .1s;
}
@media (hover: hover) { .hora:hover { background: var(--chip-hover); } }
.hora:active { transform: scale(.98); }
.hora.on { background: var(--botao); color: var(--botao-texto); border-color: var(--botao); }
.hora:disabled, .dia:disabled { opacity: .45; cursor: default; }
.agenda__confirmar, .acao {
  display: block; width: 100%; text-align: center; text-decoration: none;
  padding: 14px 18px; border-radius: var(--r-pill); border: 0;
  background: var(--botao); color: var(--botao-texto); font-weight: 600; font-size: 16px;
  transition: transform .1s, opacity .15s;
}
.agenda__confirmar:hover, .acao:hover { opacity: .92; }
.agenda__confirmar:active, .acao:active { transform: scale(.985); }
.agenda__confirmar[hidden] { display: none; }
.agenda__skel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.agenda__skel span { height: 40px; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--superficie) 25%, var(--campo) 50%, var(--superficie) 75%); background-size: 200% 100%; animation: brilho 1.2s linear infinite; }

.acoes { display: grid; gap: 8px; animation: entrar .28s var(--ease) both; }
.consentimento { margin: 0; font-size: 12px; line-height: 1.4; color: var(--texto-2); text-align: center; }
.consentimento a { color: inherit; text-underline-offset: 2px; }

/* ── Movimento ──────────────────────────────────────────────────────────── */
@keyframes entrar { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pulsar { 0%, 100% { transform: translateY(0); opacity: .35; } 50% { transform: translateY(-3px); opacity: .9; } }
@keyframes brilho { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}