/* ─────────────────────────────────────────────────────────────────────────
   Identidade do app — configuração "Malva · o batom dela", exportada pela
   Margot no laboratório em 27/08/2026 e aplicada aqui valor por valor.

   ⚠️ UMA COISA NÃO VEIO COMO ELA EXPORTOU, e é de propósito.
   A configuração pede #FFFFFF como texto sobre a cor de ação. Sobre o malva
   #C892AF isso dá contraste 2,57 — a norma pede 4,5 para texto normal, e a
   usuária deste app tem 40+ e vai ler no celular, muitas vezes no sol. Com o
   texto escuro (#2A2E34) o mesmo botão vai a 5,32 e passa com folga.

   O malva dela ficou intacto: é a MESMA cor no botão, só a letra dentro mudou.
   Se ela preferir a letra branca, o caminho honesto é escurecer o malva para
   ~#8C667B (contraste 4,88) — aí sim o branco funciona, mas é outra cor.

   Também medido: o malva NÃO serve como cor de texto sobre o fundo (2,25).
   Por isso a variavel --rosa-escuro existe — para ícone e texto pequeno em rosa.

   Trocar o tom depois é mudar --rosa aqui. Nada mais.
   ───────────────────────────────────────────────────────────────────────── */
:root {
  --bg: #F2F0EC;            /* "Papel" — fundo da tela, como ela escolheu */
  --surface: #FBFAF8;       /* cartões */
  --surface-2: #F4EBEE;     /* selo e fundo suave, o rosa lavado dela */
  --linha: #DEDDDA;         /* divisórias */
  --linha-forte: #C9C4BD;

  --ink: #2A2E34;           /* texto principal — 12:1 sobre o fundo */
  --ink-2: #6A6C6F;         /* texto de apoio — 4,63, passa raspando e por isso
                               não deve encolher abaixo de 14px */
  --ink-3: #8A8C8F;

  --rosa: #C892AF;          /* ⭐ o malva dela: botões, selos, estados ativos */
  --rosa-escuro: #96547A;   /* texto e ícone rosa pequenos, sobre o fundo claro */
  --rosa-suave: #F4EBEE;    /* fundo de selo */
  --sobre-rosa: #2A2E34;    /* ⚠️ texto DENTRO do botão: escuro. Ver o topo. */

  --r: 8px;                 /* cantos, como ela escolheu */
  --r-g: 12px;
  --sombra: 0 1px 3px rgba(42,46,52,.06), 0 6px 18px -8px rgba(42,46,52,.10);
  --fonte-titulo: 'Playfair Display', Georgia, serif;
  --fonte: 'Inter', -apple-system, system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--fonte);
  font-size: 16px;               /* nunca menor: abaixo disso o iPhone dá zoom sozinho */
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* área segura do iPhone: sem isso o conteúdo some atrás da barra e do notch */
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  overscroll-behavior-y: contain;
}

#app { max-width: 520px; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column;
  overflow-wrap: anywhere; }         /* e-mail ou palavra comprida nunca empurra a tela para o lado */
img, video, canvas { max-width: 100%; height: auto; }

/* ── tipografia ── */
/* Playfair Display (14/09, pedido do Vini): mesma família visual da Bodoni Moda,
   mas desenhada para tela — as hastes finas são mais grossas e uniformes, e o
   público 40+ lê no celular sem esforço. Peso 600 mantém a presença dos títulos. */
.titulo { font-family: var(--fonte-titulo); font-weight: 600; font-size: clamp(28px, 7.5vw, 36px); line-height: 1.14; letter-spacing: -.005em; }
.subtitulo { font-size: 16.5px; color: var(--ink-2); margin-top: 10px; }
.rotulo { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }

/* ── botões: alvo generoso, uma ação principal por tela ── */
.botao {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; min-height: 58px;              /* dedo de adulto, não cursor */
  border: 0; border-radius: var(--r);
  background: var(--rosa); color: var(--sobre-rosa);
  font-family: var(--fonte); font-size: 17px; font-weight: 600; letter-spacing: -.01em;
  cursor: pointer; padding: 16px 20px;
  /* a borda separa o botão do fundo: só a cor não basta quando os tons são próximos */
  box-shadow: inset 0 0 0 1px rgba(42,46,52,.10), 0 2px 10px -4px rgba(150,84,90,.5);
  transition: transform .12s ease, filter .12s ease;
}
.botao:active { transform: scale(.985); filter: brightness(.97); }
.botao:disabled { opacity: .45; cursor: default; }
.botao.secundario { background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--linha-forte); font-weight: 500; }
.botao.texto { background: none; box-shadow: none; color: var(--rosa-escuro); min-height: 48px; font-weight: 600; }

/* ── cartões e listas ── */
.cartao { background: var(--surface); border: 1px solid var(--linha); border-radius: var(--r-g); box-shadow: var(--sombra); }
.selo { display: inline-block; background: var(--rosa-suave); color: var(--rosa-escuro); font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: 999px; }

/* ── escolhas do cadastro: cartões grandes, não radio miúdo ── */
.escolhas { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.escolha {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  background: var(--surface); border: 1.5px solid var(--linha); border-radius: var(--r);
  padding: 17px 18px; font: inherit; color: var(--ink); cursor: pointer; min-height: 62px;
  transition: border-color .14s, background .14s;
}
.escolha:active { background: var(--surface-2); }
.escolha[aria-pressed="true"] { border-color: var(--rosa); background: var(--rosa-suave); }
.escolha .marca {
  width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%;
  border: 2px solid var(--linha-forte); display: flex; align-items: center; justify-content: center;
}
.escolha[aria-pressed="true"] .marca { border-color: var(--rosa); background: var(--rosa); }
.escolha[aria-pressed="true"] .marca::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--sobre-rosa); }
.escolha b { font-weight: 600; font-size: 16.5px; display: block; }
.escolha span { font-size: 13.5px; color: var(--ink-2); display: block; margin-top: 2px; }

/* ── campos ── */
.campo { margin-top: 18px; }
.campo label { display: block; font-size: 14px; font-weight: 600; color: var(--ink-2); margin-bottom: 8px; }
.campo input, .campo textarea {
  width: 100%; min-height: 56px; padding: 15px 16px;
  font-family: var(--fonte); font-size: 16px;      /* 16px trava o zoom do iOS */
  color: var(--ink); background: var(--surface);
  border: 1.5px solid var(--linha); border-radius: var(--r);
}
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--rosa); }

/* página de instalar no Android: o botão de um toque vem primeiro */
.um-toque { padding: 18px 18px 20px; margin-top: 22px; text-align: left; border-left: 3px solid var(--rosa); }
.um-toque p { font-size: 15.5px; line-height: 1.5; color: var(--ink-2); margin: 8px 0 14px; }
.um-toque p b { color: var(--ink); }

/* página de instalar: o vídeo do passo a passo e os desenhos dos botões */
.video-instalar { display: flex; gap: 14px; align-items: center; margin-top: 22px; padding: 12px; background: var(--surface); border: 1px solid var(--linha); border-radius: var(--r-g); text-align: left; }
.video-instalar b { font-size: 16px; } .video-instalar p { font-size: 14px; line-height: 1.4; color: var(--ink-2); margin-top: 3px; }
.video-capa { position: relative; flex: none; width: 84px; aspect-ratio: 9 / 16; border: 0; padding: 0; border-radius: 12px; overflow: hidden; background: var(--bg); cursor: pointer; box-shadow: var(--sombra); }
.video-capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-capa .tocar { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(42,46,52,.18); }
.video-capa .tocar svg { width: 38px; height: 38px; padding: 9px 7px 9px 11px; border-radius: 50%; background: var(--rosa); fill: var(--ink); }
.ic-passo { width: 19px; height: 19px; vertical-align: -4px; fill: none; stroke: var(--rosa-escuro); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.modal-video { position: fixed; inset: 0; z-index: 60; background: rgba(28,29,33,.92); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: calc(14px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom)); }
.modal-video video { height: min(calc(100% - 60px), calc((100vw - 28px) * 16 / 9)); width: auto; max-width: 100%; aspect-ratio: 9 / 16; border-radius: 16px; background: #F2F0EC; object-fit: contain; }
.modal-video .fechar { align-self: flex-end; min-height: 44px; padding: 0 16px; border: 0; border-radius: 22px; background: rgba(255,255,255,.16); color: #fff; font: 600 15px var(--fonte); cursor: pointer; }

/* chegando da compra / do link de acesso: aviso enquanto o servidor confere */
.chegando { position: fixed; inset: 0; z-index: 50; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  padding: 24px; text-align: center; font-size: 17px; color: var(--ink-2); }
.chegando .digitando { align-self: center; }

/* hidden sempre esconde (botão tem display próprio e ganharia do atributo) */
[hidden] { display: none !important; }

/* senha: o botão Mostrar/Esconder fica dentro do campo */
.senha-caixa { position: relative; }
.senha-caixa input { padding-right: 104px; }
.ver-senha { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); min-height: 44px; padding: 0 14px;
  background: none; border: 0; color: var(--rosa-escuro); font: 600 14.5px var(--fonte); cursor: pointer; }
.so-leitor { position: absolute !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; overflow: hidden; }
.botao.texto.pequeno { min-height: 40px; font-size: 14.5px; padding: 0; margin-top: 4px; }
.aviso-info { background: var(--surface); border: 1px solid var(--linha); border-radius: var(--r); padding: 14px 16px;
  font-size: 14.5px; line-height: 1.5; color: var(--ink-2); margin-top: 16px; }
.aviso-info b { color: var(--ink); }

/* ── estrutura das telas ── */
.tela { display: none; flex: 1; flex-direction: column; padding: 26px 22px 34px; animation: entra .3s ease; }
.tela.ativa { display: flex; }
@keyframes entra { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.topo { padding-top: 8px; }
.rodape { margin-top: auto; padding-top: 26px; }
.passos { display: flex; gap: 6px; margin-bottom: 26px; }
.passos i { flex: 1; height: 4px; border-radius: 999px; background: var(--linha); }
.passos i.feito { background: var(--rosa); }

/* ── marca ── */
.marca-topo { display: flex; align-items: center; gap: 10px; padding: 6px 0 22px; }
.marca-topo svg { height: 26px; width: auto; color: var(--rosa-escuro); }
.marca-topo span { font-family: var(--fonte-titulo); font-weight: 500; font-size: 16px; letter-spacing: .17em; }

/* ── foto ── */
.moldura {
  border: 2px dashed var(--linha-forte); border-radius: var(--r-g);
  padding: 36px 22px; text-align: center; background: var(--surface);
}
.moldura .lente {
  width: 82px; height: 82px; margin: 0 auto 18px; border-radius: 50%;
  background: var(--rosa-suave); color: var(--rosa-escuro);
  display: flex; align-items: center; justify-content: center;
}
.moldura .lente svg { width: 34px; height: 34px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.previa { width: 100%; border-radius: var(--r-g); border: 1px solid var(--linha); display: block; }

.aviso-legal { font-size: 13px; line-height: 1.5; color: var(--ink-3); margin-top: 16px; }

/* produto dentro do passo (Use: Blend…) e a semana à noite */
.passo-ritual .produto { display: block; margin-top: 8px; font-size: 13.5px; color: var(--rosa-escuro); line-height: 1.45; }
.passo-ritual .produto.tem { color: var(--ink-2); }
.passo-ritual .produto .comprar { display: block; margin-top: 3px; color: var(--ink-2); }
.passo-ritual .produto a { color: var(--rosa-escuro); font-weight: 600; text-decoration: none; }
.passo-ritual .produto u { cursor: pointer; text-decoration-color: var(--linha-forte); }
.passo-ritual.feito .produto { color: var(--ink-3); }
.regioes-hoje { font-size: 14px; color: var(--ink-2); margin: 10px 2px 0; }
.regioes-hoje b { color: var(--rosa-escuro); font-weight: 600; }
.semana-lista { padding: 14px 16px; margin-top: 14px; }
.semana-lista .dia { display: flex; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--linha); font-size: 14px; }
.semana-lista .dia:last-of-type { border-bottom: 0; }
.semana-lista .dia span:first-child { width: 36px; flex-shrink: 0; font-weight: 600; color: var(--ink-3); }
.semana-lista .dia.hoje span { color: var(--rosa-escuro); font-weight: 600; }
.semana-lista .dica-semana { font-size: 12.5px; color: var(--ink-3); margin-top: 8px; }

/* as três fotos: o quadrinho de cada uma, com a miniatura do que já foi enviado */
.vistas-feitas { display: flex; gap: 10px; margin-top: 16px; }
.vistas-feitas:empty { display: none; }
.vistas-feitas .vista { flex: 1; aspect-ratio: 3 / 4; border-radius: 10px; border: 1.5px dashed var(--linha-forte); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 13px; color: var(--ink-3); overflow: hidden; position: relative; background: var(--surface); }
.vistas-feitas .vista.atual { border-style: solid; border-color: var(--rosa); }
.vistas-feitas .vista.feita { border: 0; cursor: pointer; }
.vistas-feitas .vista img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vistas-feitas .vista small { position: relative; z-index: 1; background: rgba(251,250,248,.88); padding: 2px 7px; border-radius: 6px; font-size: 11px; color: var(--ink-2); }
.vistas-feitas .vista.feita small::before { content: "✓ "; color: var(--rosa-escuro); }

/* Conta › Lembretes: caixa de opção com texto ao lado */
.linha-opcao { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.linha-opcao input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--rosa-escuro); flex-shrink: 0; }
.linha-opcao small { color: var(--ink-2); font-size: 13.5px; line-height: 1.4; }

/* ── excluir a conta: o único vermelho do app, e só com o nome digitado ── */
:root { --perigo: #B3261E; --perigo-suave: #FBEDEB; --perigo-linha: #E9B8B4; }
.cartao.perigo { border-color: var(--perigo-linha); }
.cartao.perigo b { color: var(--perigo); }
.caixa-perigo { padding: 16px; margin-top: 10px; border-color: var(--perigo-linha); background: var(--perigo-suave); }
.caixa-perigo .campo input { background: var(--surface); }
.botao.perigo { background: var(--perigo); color: #FFFFFF; margin-top: 14px; }
.botao.perigo:disabled { opacity: .35; }
.erro-perigo { color: var(--perigo); font-size: 14px; font-weight: 600; margin-top: 10px; }

/* ── preparando ── */
.pulsar { position: relative; width: 74px; height: 74px; margin: 0 auto 24px; border-radius: 50%; background: var(--rosa-suave);
  display: flex; align-items: center; justify-content: center; animation: bate 1.9s ease-in-out infinite; }
.pulsar svg { width: 34px; height: auto; color: var(--rosa-escuro); }
/* o anel girando deixa claro que ESTÁ TRABALHANDO — o pulso sozinho era sutil demais */
.pulsar::after { content: ""; position: absolute; inset: -9px; border-radius: 50%;
  border: 2.5px solid var(--rosa-suave); border-top-color: var(--rosa); animation: gira 1.1s linear infinite; }
@keyframes bate { 0%,100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes gira { to { transform: rotate(360deg); } }
/* os três pontinhos que escrevem e apagam, ao lado do texto de espera */
.pontinhos::after { content: ""; animation: pontos 1.6s steps(4, end) infinite; }
@keyframes pontos { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }

/* ── instalação ── */
/* "Você está no: Safari · Chrome · …" — o detectado vem marcado, ela pode corrigir */
.seletor-nav { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 12px 0 8px; border-bottom: 1px solid var(--linha); }
.seletor-nav span { font-size: 13px; color: var(--ink-3); font-weight: 600; margin-right: 2px; }
.seletor-nav .chip { font: inherit; font-size: 13.5px; font-weight: 600; padding: 7px 11px; border-radius: 999px; border: 1.5px solid var(--linha-forte); background: var(--surface); color: var(--ink-2); cursor: pointer; }
.seletor-nav .chip.ativo { border-color: var(--rosa); background: var(--rosa-suave); color: var(--rosa-escuro); }
.passo-instalar { display: flex; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--linha); align-items: flex-start; }
.passo-instalar:last-child { border-bottom: 0; }
.passo-instalar .n { font-family: var(--fonte-titulo); font-size: 17px; color: var(--rosa-escuro); font-weight: 600; min-width: 18px; }
.passo-instalar p { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.passo-instalar p b { color: var(--ink); font-weight: 600; }

.erro { background: #FBEAEA; color: #8C2F2F; border-radius: var(--r); padding: 14px 16px; font-size: 14.5px; margin-top: 16px; }

/* ── a barra de baixo (Hoje · Academia · Análise · Clube · Espelho) ── */
.tela.com-nav { padding-bottom: 96px; }
/* teclado aberto (classe posta pelo app.js): a barra some para não cobrir o campo */
html.teclado #nav-app { display: none; }
html.teclado .tela.com-nav { padding-bottom: 34px; }
/* faixa da barra de status do iPhone: o conteúdo rola por baixo do relógio sem
   se misturar com ele (antes o texto encostava no horário ao rolar) */
body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  height: env(safe-area-inset-top); background: var(--bg); pointer-events: none; }
#nav-app {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;
  display: flex; justify-content: space-around; align-items: stretch;
  max-width: 520px; margin: 0 auto;
  background: #FBFAF8EE; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--linha);
  padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
}
#nav-app[hidden] { display: none; }
#nav-app button {
  flex: 1; background: none; border: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: var(--ink-3); font-family: var(--fonte); font-size: 11px; font-weight: 600; padding: 4px 0;
}
#nav-app button svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#nav-app button.ativa { color: var(--rosa-escuro); }

/* ── régua da semana (S T Q Q S S D) ── */
.semana { display: flex; gap: 8px; margin-top: 18px; }
.semana i {
  flex: 1; max-width: 44px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-style: normal;
  font-size: 13px; font-weight: 700; background: var(--surface); border: 1px solid var(--linha); color: var(--ink-3);
}
.semana i.feito { background: var(--rosa); border-color: var(--rosa); color: var(--sobre-rosa); }
.semana i.hoje { border-color: var(--rosa-escuro); color: var(--ink); }

/* ── banner da próxima live ── */
.live {
  background: var(--rosa); border-radius: var(--r-g); padding: 14px 16px; margin-top: 20px;
  display: flex; align-items: center; gap: 12px; color: var(--sobre-rosa);
}
.live b { font-size: 15.5px; display: block; line-height: 1.3; }
.live p { font-size: 13.5px; opacity: .8; margin-top: 2px; line-height: 1.35; }
.live button {
  margin-left: auto; flex-shrink: 0; background: var(--surface); color: var(--ink); border: 0;
  border-radius: 999px; padding: 9px 15px; font-weight: 600; font-size: 13.5px; font-family: var(--fonte); cursor: pointer;
}

/* ── abas Manhã / Noite ── */
.abas-periodo { display: flex; background: var(--surface-2); border-radius: 999px; padding: 4px; margin-top: 22px; }
.abas-periodo button {
  flex: 1; border: 0; background: none; padding: 10px 8px; border-radius: 999px;
  font-family: var(--fonte); font-size: 14px; font-weight: 600; color: var(--ink-2); cursor: pointer;
}
.abas-periodo button.ativa { background: var(--surface); color: var(--ink); box-shadow: var(--sombra); }

/* ── as duas metades do dia, na mesma tela (manhã e noite, nada escondido) ── */
.secao-periodo { margin-top: 24px; }
.secao-periodo.agora .cabeca-periodo b { color: var(--rosa-escuro); }
.cabeca-periodo { display: flex; align-items: baseline; justify-content: space-between; padding: 0 2px 4px; border-bottom: 1px solid var(--linha); }
.cabeca-periodo b { font-family: var(--fonte-titulo); font-weight: 600; font-size: 21px; letter-spacing: -.005em; }
.cabeca-periodo span { font-size: 13px; font-weight: 600; color: var(--ink-3); }

/* ── passo do ritual (check → número serifado → título + explicação) ── */
.passo-ritual { display: flex; gap: 12px; align-items: flex-start; padding: 17px 16px; margin-top: 10px; cursor: pointer; }
.passo-ritual .check {
  width: 27px; height: 27px; flex-shrink: 0; border-radius: 50%;
  border: 1.5px solid var(--linha-forte); display: flex; align-items: center; justify-content: center; transition: all .15s;
}
.passo-ritual.feito .check { border-color: var(--rosa); background: var(--rosa); }
.passo-ritual.feito .check::after { content: "✓"; color: #fff; font-size: 13px; font-weight: 700; }
.passo-ritual .n {
  font-family: var(--fonte-titulo); font-style: italic; font-weight: 500;
  font-size: 14px; color: var(--ink-3); padding-top: 4px; min-width: 20px; text-align: center;
}
.passo-ritual b { font-size: 16px; font-weight: 650; line-height: 1.35; letter-spacing: -.01em; }
.passo-ritual .como { display: block; font-size: 14px; color: var(--ink-2); margin-top: 4px; line-height: 1.5; }
.passo-ritual.feito b { text-decoration: line-through; color: var(--ink-3); font-weight: 600; }
.passo-ritual.feito .como { color: var(--ink-3); }
.repor {
  background: var(--rosa-suave); color: var(--rosa-escuro); border-radius: var(--r);
  padding: 8px 11px; font-size: 13px; font-weight: 600; margin-top: 9px; display: inline-block;
}

/* ── medidor (hidratação/firmeza/uniformidade) ── */
.medidor { margin-top: 14px; }
.medidor .linha-topo { display: flex; justify-content: space-between; font-size: 14px; font-weight: 600; }
.medidor .trilho { height: 8px; border-radius: 999px; background: var(--surface-2); margin-top: 7px; overflow: hidden; }
.medidor .trilho i { display: block; height: 100%; border-radius: 999px; background: var(--rosa); }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }


/* ── CHAT com a assistente virtual (02/10/2026) ── */
.btn-chat { margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface); border: 1px solid var(--linha); border-radius: 999px;
  padding: 7px 13px 7px 10px; font-family: var(--fonte); font-size: 13.5px; font-weight: 600;
  color: var(--rosa-escuro); cursor: pointer; box-shadow: var(--sombra); }
.btn-chat svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.btn-chat:active { transform: scale(.97); }

/* o chat ocupa a tela inteira, fixo, com as áreas seguras do iPhone (notch em cima,
   barra de gestos embaixo) por conta própria — antes o campo de escrever caía
   embaixo da barra de gestos e os cantos arredondados cortavam o botão */
.tela[data-tela="chat"] { position: fixed; top: 0; left: 0; right: 0; height: 100dvh; max-width: 520px; margin: 0 auto;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left); background: var(--bg); z-index: 40; }
.tela[data-tela="chat"].ativa { display: flex; flex-direction: column; }
.chat-topo { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--surface);
  border-bottom: 1px solid var(--linha); flex: none; }
.chat-voltar { background: none; border: 0; width: 38px; height: 38px; display: grid; place-items: center; cursor: pointer; color: var(--ink); border-radius: 50%; }
.chat-voltar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chat-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--rosa-suave); display: grid; place-items: center; flex: none; }
.chat-avatar svg { width: 26px; height: auto; color: var(--rosa-escuro); }
.chat-quem { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.chat-quem b { font-family: var(--fonte-titulo); font-weight: 600; font-size: 17px; }
.chat-quem small { font-size: 13px; color: var(--ink-2); }

.chat-lista { flex: 1; overflow-y: auto; padding: 16px 14px 8px; display: flex; flex-direction: column; gap: 10px;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.balao { max-width: 86%; padding: 11px 14px; border-radius: 16px; font-size: 15.5px; line-height: 1.5; white-space: normal; }
.balao.dela { align-self: flex-end; background: var(--rosa); color: var(--sobre-rosa); border-bottom-right-radius: 5px; }
.balao.ia { align-self: flex-start; background: var(--surface); border: 1px solid var(--linha); border-bottom-left-radius: 5px; }
.balao.erro-chat { align-self: center; background: #FBEAEA; color: #8C2F2F; font-size: 14px; text-align: center; }
.balao .hora { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 4px; text-align: right; }
.balao.dela .hora { color: rgba(42,46,52,.6); }
.digitando { align-self: flex-start; display: inline-flex; gap: 5px; padding: 14px 16px; background: var(--surface);
  border: 1px solid var(--linha); border-radius: 16px; border-bottom-left-radius: 5px; }
.digitando i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); animation: pisca 1.2s infinite ease-in-out; }
.digitando i:nth-child(2) { animation-delay: .2s; } .digitando i:nth-child(3) { animation-delay: .4s; }
@keyframes pisca { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

.cartao-produto { align-self: flex-start; max-width: 86%; background: var(--surface); border: 1px solid var(--linha);
  border-left: 3px solid var(--rosa); border-radius: 12px; padding: 12px 14px; }
.cartao-produto b { display: block; font-size: 15px; }
.cartao-produto p { font-size: 14px; color: var(--ink-2); margin-top: 3px; line-height: 1.45; }
.cartao-produto .preco { margin-top: 8px; font-size: 15px; }
.cartao-produto .preco s { color: var(--ink-3); font-size: 13.5px; margin-right: 6px; }
.cartao-produto a { display: inline-block; margin-top: 9px; background: var(--rosa); color: var(--sobre-rosa); text-decoration: none;
  font-weight: 600; font-size: 14px; padding: 8px 14px; border-radius: 999px; }
.cartao-produto .ja-tem { display: inline-block; margin-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--rosa-escuro); }

.chat-sugestoes { display: flex; gap: 8px; overflow-x: auto; padding: 4px 14px 8px; flex: none; scrollbar-width: none; }
.chat-sugestoes::-webkit-scrollbar { display: none; }
.chat-sugestoes button { flex: none; background: var(--surface); border: 1px solid var(--linha-forte); color: var(--ink);
  border-radius: 999px; padding: 8px 13px; font-family: var(--fonte); font-size: 14px; cursor: pointer; white-space: nowrap; }
.chat-envio { display: flex; align-items: flex-end; gap: 8px; padding: 10px 14px calc(14px + env(safe-area-inset-bottom)); background: var(--surface);
  border-top: 1px solid var(--linha); flex: none; }
.chat-envio textarea { flex: 1; resize: none; border: 1px solid var(--linha-forte); border-radius: 20px; padding: 10px 14px;
  font-family: var(--fonte); font-size: 16px; line-height: 1.4; max-height: 120px; background: var(--bg); color: var(--ink); }
.chat-envio textarea:focus { outline: none; border-color: var(--rosa); }
.chat-envio button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--rosa); color: var(--sobre-rosa);
  display: grid; place-items: center; cursor: pointer; flex: none; }
.chat-envio button:disabled { opacity: .45; }
.chat-envio button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* o rótulo do botão não herda o estilo espaçado do logotipo MARGOT */
.marca-topo .btn-chat span { font-family: var(--fonte); font-size: 13.5px; font-weight: 600; letter-spacing: 0; }

/* plano Básico (sem chat): botão com cadeado e, no lugar da conversa, o cartão dos planos */
.btn-chat.sem-plano { color: var(--ink-2); }
.btn-chat svg.cadeado { width: 14px; height: 14px; stroke-width: 2; margin-left: -2px; }
.chat-envio[hidden], .chat-sugestoes[hidden] { display: none; }
.chat-sem-plano { padding: 20px 18px; margin: auto 0; }

/* teclado aberto: o campo encosta no teclado (a barra de gestos fica atrás dele) */
html.teclado .chat-envio { padding-bottom: 10px; }