/* ═══════════════════════════════════════════════════════════
   PAINÉIS — carrinho, filtros (celular), configurações, "Sobre",
   e a Nayra (bolinha, balão e conversa)
   ═══════════════════════════════════════════════════════════ */

/* ── Carrinho (gaveta da direita) ── */
.cart-overlay { position:fixed; inset:0; z-index:400; background:var(--scrim); display:none; }
.cart-overlay.open { display:block; animation:fadeIn 0.2s ease; }
.cart-drawer {
  position:fixed; top:0; right:0; bottom:0; width:100%; max-width:400px; z-index:401;
  background:var(--surface); display:flex; flex-direction:column; box-shadow:var(--shadow-2);
  transform:translateX(100%); transition:transform 0.35s var(--ease-out);
}
.cart-overlay.open .cart-drawer { transform:none; }
.cart-header { display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--line); }
.cart-title { font-size:18px; font-weight:700; }
.cart-close, .settings-close, .about-close, .fs-close, .chat-close {
  width:36px; height:36px; border:none; border-radius:50%; background:var(--surface-2); color:var(--text);
  font-size:22px; line-height:1; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.cart-close:hover, .settings-close:hover, .about-close:hover, .fs-close:hover, .chat-close:hover { background:var(--line); }
.cart-items { flex:1; overflow-y:auto; padding:6px 20px; }
.cart-empty { height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:var(--text-2); font-size:14px; }
.cart-item { display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); }
.cart-item-img { width:72px; height:72px; flex-shrink:0; border-radius:10px; background:#fff; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:30px; overflow:hidden; }
.cart-item-img .ph-img { width:100%; height:100%; object-fit:contain; }
.cart-item-info { flex:1; min-width:0; }
.cart-item-name { font-size:14px; line-height:1.35; margin-bottom:4px; }
.cart-item-variant { font-size:12.5px; color:var(--text-2); margin-bottom:4px; }
.cart-item-price { font-size:15px; font-weight:600; }
.cart-qty { display:inline-flex; align-items:center; gap:2px; margin-top:8px; border:1px solid var(--line); border-radius:999px; padding:2px; }
.cart-qty button { width:28px; height:28px; border:none; border-radius:50%; background:none; color:var(--text); font-size:16px; line-height:1; }
.cart-qty button:hover { background:var(--surface-2); }
.cart-qty span { min-width:20px; text-align:center; font-size:14px; font-weight:600; }
.cart-item-remove { align-self:flex-start; border:none; background:none; color:var(--text-2); font-size:20px; padding:2px 4px; }
.cart-item-remove:hover { color:var(--danger); }
.cart-footer { padding:16px 20px calc(18px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); }
.cart-total { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; font-size:15px; font-weight:500; }
.cart-total-value { font-size:22px; font-weight:700; letter-spacing:-0.4px; }
.cart-footer .btn-primary { width:100%; padding:14px; font-size:15px; }
.btn-buy.esgotado, .pp-buy.esgotado { background:var(--surface-2); color:var(--text-2); cursor:not-allowed; box-shadow:none; }

/* ── Carrinho: aviso e etapa de endereço ── */
.cart-aviso { margin:10px 20px 0; padding:10px 14px; border-radius:10px; font-size:13.5px; line-height:1.45;
  background:rgba(226,160,40,0.12); border:1px solid rgba(226,160,40,0.45); color:var(--text); }
.cart-entrega { flex:1; overflow-y:auto; padding:10px 20px 16px; display:flex; flex-direction:column; gap:10px; }
.cart-entrega[hidden], .cart-items[hidden], .cart-aviso[hidden] { display:none; }
.ce-voltar { align-self:flex-start; background:none; border:none; color:var(--text-2); font-size:13.5px; padding:4px 0; cursor:pointer; }
.ce-titulo { font-size:17px; font-weight:700; margin-bottom:2px; }
.ce-linha { display:flex; gap:10px; align-items:flex-end; }
.ce-linha > .ce-campo { flex:1; min-width:0; }
.ce-campo { display:flex; flex-direction:column; gap:5px; font-size:12.5px; color:var(--text-2); }
.ce-campo em { font-style:normal; opacity:0.8; }
.ce-campo input, .ce-campo select { height:44px; border-radius:10px; border:1px solid var(--line); background:var(--surface-2);
  color:var(--text); font-size:15px; padding:0 12px; font-family:inherit; width:100%; }
.ce-campo input:focus, .ce-campo select:focus { outline:none; border-color:var(--brand); }
.ce-campo.erro input, .ce-campo.erro select { border-color:#d9534f; background:rgba(217,83,79,0.06); }
.ce-linha > .ce-cep { flex:0 0 140px; }
.ce-linha > .ce-num { flex:0 0 96px; }
.ce-linha > .ce-uf { flex:0 0 82px; }
.ce-cep-msg { flex:1; font-size:12.5px; color:var(--text-2); padding-bottom:12px; }
.ce-nota { font-size:12px; color:var(--text-2); margin-top:2px; }
.ce-nota a { color:var(--brand-ink); }

/* ── Filtros no celular (gaveta de baixo) ── */
.filters-sheet-overlay { position:fixed; inset:0; z-index:440; background:var(--scrim); display:none; align-items:flex-end; }
.filters-sheet-overlay.open { display:flex; animation:fadeIn 0.2s ease; }
.filters-sheet { width:100%; max-height:85vh; background:var(--surface); border-radius:18px 18px 0 0; display:flex; flex-direction:column; animation:slideUp 0.3s var(--ease-out); }
.fs-header { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; border-bottom:1px solid var(--line); }
.fs-title { font-size:17px; font-weight:700; }
.fs-body { overflow-y:auto; padding:0 20px 12px; }
.fs-foot { padding:12px 20px calc(16px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); }
.fs-foot .btn-primary { width:100%; padding:14px; }

/* ── Configurações e "Sobre" (janela central) ── */
.settings-overlay, .about-overlay {
  position:fixed; inset:0; z-index:470; background:var(--scrim); display:none;
  align-items:center; justify-content:center; padding:16px;
}
.settings-overlay.open, .about-overlay.open { display:flex; animation:fadeIn 0.2s ease; }
.settings-panel, .about-panel {
  width:100%; background:var(--surface); border-radius:18px; overflow:hidden; box-shadow:var(--shadow-2);
  animation:popIn 0.25s var(--ease-out);
}
.settings-panel { max-width:440px; }
.about-panel { max-width:600px; max-height:88vh; display:flex; flex-direction:column; }
.settings-header, .about-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--line); flex-shrink:0; }
.settings-title, .about-title { font-size:18px; font-weight:700; }
/* ── Configurações: grupos em cartões, como os ajustes do celular ── */
.settings-panel { display:flex; flex-direction:column; max-height:min(88vh, 760px); background:var(--bg); }
.settings-panel .settings-header { background:var(--surface); align-items:flex-start; }
.cfg-subtitulo { font-size:12.5px; color:var(--text-2); margin-top:3px; }
.settings-body { padding:6px 16px 20px; overflow-y:auto; overscroll-behavior:contain; }
.cfg-grupo { margin-top:16px; }
.cfg-rotulo { font-size:12px; font-weight:700; color:var(--text-2); text-transform:uppercase; letter-spacing:1px; margin:0 4px 8px; }
.cfg-cartao { background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.cfg-linha { display:flex; align-items:center; gap:12px; padding:13px 14px; width:100%; text-align:left; color:inherit; font:inherit; background:none; border:none; }
.cfg-linha + .cfg-linha { border-top:1px solid var(--line); }
.cfg-coluna { flex-direction:column; align-items:stretch; gap:12px; }
.cfg-topo { display:flex; align-items:center; gap:12px; }
.cfg-icone { flex:0 0 34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:var(--brand-ink); background:rgba(212,175,79,0.14); }
.cfg-icone svg { width:18px; height:18px; }
.cfg-info { flex:1; min-width:0; }
.cfg-nome { font-size:14.5px; font-weight:600; }
.cfg-desc { font-size:12.5px; color:var(--text-2); margin-top:2px; line-height:1.45; }
.cfg-link { cursor:pointer; }
.cfg-link:hover { background:var(--surface-2); }
.cfg-seta { width:18px; height:18px; color:var(--text-2); flex-shrink:0; }
.cfg-botao { flex-shrink:0; border:1px solid var(--line); background:var(--surface-2); color:var(--text); border-radius:999px; padding:8px 14px; font-size:13px; font-weight:600; white-space:nowrap; cursor:pointer; }
.cfg-botao:hover { border-color:var(--text-2); }

/* tema: três cartões com uma amostra da tela */
.cfg-temas { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
.cfg-tema { display:flex; flex-direction:column; align-items:center; gap:7px; padding:8px 6px 9px; border-radius:12px; border:1.5px solid var(--line); background:none; color:var(--text-2); font-size:12.5px; font-weight:600; cursor:pointer; transition:border-color 0.2s, color 0.2s; }
.cfg-tema.active { border-color:var(--cta); color:var(--text); background:rgba(232,184,74,0.08); }
.ct-amostra { width:100%; aspect-ratio:16/10; border-radius:8px; position:relative; overflow:hidden; border:1px solid rgba(128,128,128,0.25); display:flex; flex-direction:column; justify-content:flex-end; gap:4px; padding:6px; }
.ct-amostra i { display:block; height:5px; border-radius:3px; }
.ct-amostra i:first-child { width:70%; } .ct-amostra i:last-child { width:45%; }
.ct-amostra.claro { background:#f1f1ef; } .ct-amostra.claro i { background:#cfcfca; }
.ct-amostra.escuro { background:#18181b; } .ct-amostra.escuro i { background:#3a3a40; }
.ct-amostra.auto { background:linear-gradient(135deg, #f1f1ef 50%, #18181b 50%); }
.ct-amostra.auto i { background:#8a8a90; }
.ct-amostra::before { content:''; position:absolute; top:6px; left:6px; width:12px; height:12px; border-radius:50%; background:var(--cta); }

/* tamanho da esfera: bolinhas do tamanho de verdade */
.cfg-tamanhos { display:flex; gap:4px; background:var(--surface-2); border-radius:999px; padding:3px; flex-shrink:0; }
.cfg-tam { display:flex; align-items:center; gap:5px; border:none; background:none; color:var(--text-2); font-size:12.5px; font-weight:600; padding:6px 10px; border-radius:999px; cursor:pointer; }
.cfg-tam i { width:var(--d); height:var(--d); border-radius:50%; background:radial-gradient(circle at 35% 30%, #f4dc9a, #b8892f 70%); }
.cfg-tam.active { background:var(--surface); color:var(--text); box-shadow:var(--shadow-1); }

.toggle { position:relative; width:50px; height:30px; flex-shrink:0; border:none; border-radius:15px; background:var(--line); padding:0; transition:background 0.2s; cursor:pointer; }
.toggle.on { background:var(--cta); }
.toggle-knob { position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,0.25); transition:transform 0.2s var(--ease); }
.toggle.on .toggle-knob { transform:translateX(20px); }

.about-body { padding:22px 24px 28px; overflow-y:auto; }
.about-body h3 { font-size:17px; font-weight:700; margin:24px 0 8px; }
.about-body p, .about-body li { font-size:14.5px; line-height:1.7; }
.about-body p { margin-bottom:12px; }
.about-body .about-sub { font-size:15px; color:var(--text-2); margin-bottom:16px; }
.about-body ul { margin:4px 0 14px; padding-left:20px; }
.about-body li { margin-bottom:4px; }
.about-hero { text-align:center; padding:4px 0 18px; border-bottom:1px solid var(--line); margin-bottom:6px; }
.about-logo { width:76px; height:76px; object-fit:contain; display:block; margin:0 auto 12px; padding:6px; border-radius:50%; background:#111114; box-shadow:0 0 0 1.5px rgba(232,196,106,0.6), 0 8px 20px rgba(0,0,0,0.18); }   /* o logo foi feito para fundo escuro */
.about-body .about-hero .about-sub { margin:0; font-size:17px; font-weight:600; color:var(--text); letter-spacing:-0.2px; }
.about-sec { padding:4px 0 6px; }
.about-sigla { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:6px 0 14px; }
.about-sigla div { background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:12px 8px; text-align:center; }
.about-sigla b { display:block; font-size:26px; line-height:1; color:var(--brand-ink); font-weight:800; }
.about-sigla span { display:block; margin-top:6px; font-size:12.5px; color:var(--text-2); font-weight:500; }
.about-body ul.about-chips { list-style:none; padding:0; margin:6px 0 10px; display:flex; flex-wrap:wrap; gap:8px; }
.about-body .about-chips li { margin:0; font-size:12.5px; line-height:1.2; padding:7px 12px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--text); }
.about-nayra { background:var(--surface-2); border:1px solid var(--line); border-radius:16px; padding:16px 18px 6px; margin:22px 0 4px; }
.about-nayra-topo { display:flex; align-items:center; gap:14px; margin-bottom:10px; }
.about-nayra-topo h3 { margin:0 0 2px; }
.about-nayra-sigla { font-size:12.5px; color:var(--text-2); }
.about-nayra-av { width:48px; height:48px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#f6dc92;
  background:radial-gradient(circle at 35% 30%, #3a3a42 0%, #17171c 50%, #050507 100%); box-shadow:0 0 0 1.5px rgba(232,196,106,0.85), 0 6px 16px rgba(0,0,0,0.25); }
.about-nayra-av svg { width:52%; height:52%; filter:drop-shadow(0 0 4px rgba(246,220,146,0.7)); }
.priv-resumo { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; margin:14px 0 8px; }
.priv-resumo div { background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:12px 14px; }
.priv-resumo b { display:block; font-size:14px; color:var(--text); }
.priv-resumo span { display:block; font-size:12.5px; color:var(--text-2); line-height:1.45; margin-top:3px; }
.priv-lista { margin:6px 0 0; }
.priv-lista dt { font-size:14.5px; font-weight:700; color:var(--brand-ink); margin:16px 0 4px; }
.priv-lista dt:first-child { margin-top:4px; }
.priv-lista dd { margin:0; font-size:14.5px; line-height:1.7; }
.priv-lista em { display:block; font-style:normal; font-size:12.5px; color:var(--text-2); margin-top:4px; }
.about-body ol.trocas-passos { margin:6px 0 14px; padding:0; list-style:none; counter-reset:passo; }
.trocas-passos li { position:relative; padding:0 0 10px 38px; counter-increment:passo; }
.trocas-passos li::before { content:counter(passo); position:absolute; left:0; top:1px; width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; background:var(--surface-2); border:1px solid var(--line); color:var(--brand-ink); }
.trocas-passos b { color:var(--text); }
.priv-breve { background:var(--surface-2); border:1px dashed var(--line); border-radius:10px; padding:10px 14px; color:var(--text-2); }
.about-body .about-destaque { font-weight:600; border-left:3px solid var(--brand); padding:2px 0 2px 12px; }
.about-body .about-close-line { text-align:center; color:var(--text-2); margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }

/* ── Nayra: bolinha flutuante ── */
.nayra-btn {
  position:fixed; right:16px; bottom:calc(76px + env(safe-area-inset-bottom)); z-index:330;
  width:52px; height:52px; border-radius:50%; border:none; touch-action:none;
  background:linear-gradient(140deg, #e8c46a, #b8902e); color:#16161a;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(184,144,46,0.45); transition:transform 0.2s var(--ease), box-shadow 0.2s;
}
/* só em aparelho com mouse: no celular o :hover fica preso depois do toque */
@media (hover:hover) { .nayra-btn:hover { transform:scale(1.06); } }
.nayra-btn svg { width:24px; height:24px; }
.nayra-btn.tam-p { width:42px; height:42px; } .nayra-btn.tam-p svg { width:19px; height:19px; }
.nayra-btn.tam-m { width:52px; height:52px; } .nayra-btn.tam-m svg { width:24px; height:24px; }
.nayra-btn.tam-g { width:62px; height:62px; } .nayra-btn.tam-g svg { width:28px; height:28px; }
.nayra-btn.arrastando { transition:none; transform:scale(1.08); box-shadow:0 12px 34px rgba(184,144,46,0.6); }
.nayra-btn.arrastando .nayra-pulse { opacity:0; }
.nayra-btn.encaixando { transition:left 0.24s var(--ease), top 0.24s var(--ease); }
.nayra-pulse { position:absolute; top:0; right:0; width:13px; height:13px; border-radius:50%; background:#2fbf71; border:2px solid var(--surface); }
@media (min-width:900px) { .nayra-btn { right:28px; bottom:28px; } }

/* Balão que a Nayra mostra sozinha */
.nayra-teaser {
  position:fixed; right:16px; bottom:calc(140px + env(safe-area-inset-bottom)); z-index:331; max-width:270px;
  background:var(--surface); border-radius:16px; padding:14px 16px; box-shadow:var(--shadow-2);
  display:none; cursor:pointer; animation:popIn 0.3s var(--ease-out);
}
.nayra-teaser.show { display:block; }
.nayra-teaser-head { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.nayra-teaser-avatar { width:26px; height:26px; border-radius:50%; background:linear-gradient(140deg, #e8c46a, #b8902e); display:flex; align-items:center; justify-content:center; font-size:13px; }
.nayra-teaser-name { font-size:13.5px; font-weight:700; }
.nayra-teaser-text { font-size:13.5px; line-height:1.45; }
.nayra-teaser-close { position:absolute; top:8px; right:10px; border:none; background:none; color:var(--text-2); font-size:17px; line-height:1; }
@media (min-width:900px) { .nayra-teaser { right:28px; bottom:96px; } }

/* ── Nayra: conversa ── */
.nayra-overlay { position:fixed; inset:0; z-index:350; background:var(--scrim); display:none; align-items:flex-end; justify-content:center; }
.nayra-overlay.open { display:flex; animation:fadeIn 0.2s ease; }
.nayra-chat {
  width:100%; max-width:480px; height:88vh; height:88dvh; background:var(--bg);
  border-radius:20px 20px 0 0; display:flex; flex-direction:column; overflow:hidden;
  box-shadow:var(--shadow-2); animation:slideUp 0.35s var(--ease-out);
}
@media (min-width:900px) {
  .nayra-overlay { align-items:flex-end; justify-content:flex-end; padding:24px; background:rgba(10,10,12,0.25); }
  .nayra-chat { max-width:440px; height:min(720px, 86vh); border-radius:20px; animation:popIn 0.3s var(--ease-out); }
  .msg-bubble { font-size:15px; }
}
.chat-header { display:flex; align-items:center; gap:12px; padding:14px 16px; background:var(--hdr); color:#fff; }
.chat-avatar { width:40px; height:40px; border-radius:50%; flex-shrink:0; background:linear-gradient(140deg, #e8c46a, #b8902e); display:flex; align-items:center; justify-content:center; font-size:18px; }
.chat-info { flex:1; min-width:0; }
.chat-name { font-size:15px; font-weight:700; }
.chat-status { display:flex; align-items:center; gap:6px; font-size:12px; color:#b9b9c2; }
.chat-status::before { content:''; width:7px; height:7px; border-radius:50%; background:#2fbf71; }
.chat-header .chat-close { background:rgba(255,255,255,0.1); color:#fff; }
.chat-expand {
  width:36px; height:36px; flex-shrink:0; border:none; border-radius:50%;
  background:rgba(255,255,255,0.1); color:#fff; display:flex; align-items:center; justify-content:center;
}
.chat-expand:hover, .chat-header .chat-close:hover { background:rgba(255,255,255,0.2); }
.chat-expand svg { width:17px; height:17px; }
.chat-expand .ico-reduzir { display:none; }
.nayra-overlay.ampliado .chat-expand .ico-ampliar { display:none; }
.nayra-overlay.ampliado .chat-expand .ico-reduzir { display:block; }

/* Conversa ampliada: ocupa a tela, letra maior, mensagens numa coluna
   confortável de ler no meio (não esticadas de ponta a ponta) */
.nayra-overlay.ampliado { align-items:stretch; justify-content:center; padding:0; background:var(--scrim); }
.nayra-overlay.ampliado .nayra-chat { max-width:none; width:100%; height:100%; border-radius:0; animation:fadeIn 0.2s ease; }
.nayra-overlay.ampliado .chat-messages,
.nayra-overlay.ampliado .chat-suggestions,
.nayra-overlay.ampliado .chat-input-area { padding-left:max(16px, calc((100% - 860px) / 2)); padding-right:max(16px, calc((100% - 860px) / 2)); }
.nayra-overlay.ampliado .msg-bubble { font-size:16.5px; line-height:1.6; padding:13px 18px; }
.nayra-overlay.ampliado .msg-time { font-size:12px; }
.nayra-overlay.ampliado .chat-name { font-size:17px; }
.nayra-overlay.ampliado .suggestion-btn { font-size:14.5px; padding:9px 16px; }
.nayra-overlay.ampliado .chat-input { height:50px; font-size:16.5px; }
.nayra-overlay.ampliado .chat-send { width:50px; height:50px; }
@media (min-width:900px) {
  .nayra-overlay.ampliado { padding:28px; }
  .nayra-overlay.ampliado .nayra-chat { max-width:1100px; border-radius:20px; animation:popIn 0.25s var(--ease-out); }
}
.chat-messages { flex:1; overflow-y:auto; padding:18px 14px; display:flex; flex-direction:column; gap:14px; }
.msg { display:flex; align-items:flex-end; gap:8px; }
.msg.user { flex-direction:row-reverse; }
.msg-avatar { width:28px; height:28px; border-radius:50%; flex-shrink:0; background:linear-gradient(140deg, #e8c46a, #b8902e); display:flex; align-items:center; justify-content:center; font-size:12px; }
.msg.user .msg-avatar { background:var(--line); }
.msg > div:last-child { max-width:84%; min-width:0; }
.msg-bubble { padding:10px 14px; border-radius:18px; font-size:14.5px; line-height:1.5; overflow-wrap:anywhere; }
.msg.nayra .msg-bubble { background:var(--surface); border-bottom-left-radius:6px; box-shadow:var(--shadow-1); }
.msg.user .msg-bubble { background:#16161a; color:#fff; border-bottom-right-radius:6px; }
html:not(.theme-light) .msg.user .msg-bubble { background:var(--cta); color:var(--cta-ink); }
.msg-time { font-size:11px; color:var(--text-2); margin-top:4px; padding:0 4px; }
.msg.user .msg-time { text-align:right; }
.typing-indicator { display:flex; gap:4px; padding:3px 0; }
/* cursor da Nayra enquanto o texto é digitado (js/nayra-servidor.js) */
.cursor-vivo { display:inline-block; margin-left:1px; color:var(--gold, #c9a84c); animation:cursorVivo .9s steps(1) infinite; }
@keyframes cursorVivo { 50% { opacity:0; } }
@media (prefers-reduced-motion: reduce) { .cursor-vivo { animation:none; } }
.typing-indicator span { width:7px; height:7px; border-radius:50%; background:var(--text-2); animation:typing 1.2s infinite; }
.typing-indicator span:nth-child(2) { animation-delay:0.2s; }
.typing-indicator span:nth-child(3) { animation-delay:0.4s; }
@keyframes typing { 0%,60%,100% { transform:translateY(0); opacity:0.4; } 30% { transform:translateY(-5px); opacity:1; } }

/* Produto sugerido dentro da conversa */
.product-card-mini {
  display:flex; align-items:center; gap:10px; margin-top:8px; padding:8px 10px;
  background:var(--surface-2); border-radius:12px; cursor:pointer; transition:background 0.15s;
}
.product-card-mini:hover { background:var(--line); }
.product-card-mini-emoji { width:44px; height:44px; flex-shrink:0; border-radius:8px; background:#fff; display:flex; align-items:center; justify-content:center; font-size:24px; overflow:hidden; }
.product-card-mini-emoji .ph-img { width:100%; height:100%; object-fit:contain; }
.product-card-mini-info { flex:1; min-width:0; }
.product-card-mini-name { font-size:13px; font-weight:500; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.product-card-mini-price { font-size:13.5px; font-weight:700; margin-top:2px; }
.add-mini-btn { width:30px; height:30px; flex-shrink:0; border:none; border-radius:50%; background:var(--cta); color:var(--cta-ink); font-size:18px; font-weight:600; line-height:1; }
.nayra-cta-wrap { margin-top:10px; }
.nayra-cta { border:none; border-radius:999px; background:var(--cta); color:var(--cta-ink); padding:10px 16px; font-size:13.5px; font-weight:600; }
.nayra-cta:hover { background:var(--cta-hover); }

.chat-suggestions { display:flex; gap:8px; overflow-x:auto; padding:8px 14px; scrollbar-width:none; }
.chat-suggestions::-webkit-scrollbar { display:none; }
.suggestion-btn { flex-shrink:0; border:1px solid var(--line); background:var(--surface); color:var(--text); border-radius:999px; padding:7px 13px; font-size:13px; white-space:nowrap; }
.suggestion-btn:hover { border-color:var(--text); }
.chat-input-area { display:flex; align-items:center; gap:10px; padding:10px 14px calc(12px + env(safe-area-inset-bottom)); background:var(--surface); border-top:1px solid var(--line); }
.chat-input { flex:1; min-width:0; height:44px; border:1px solid var(--line); border-radius:999px; background:var(--bg); padding:0 18px; font-size:16px; color:var(--text); outline:none; }
.chat-input:focus { border-color:var(--text-2); }
.chat-input::placeholder { color:var(--text-2); }
.chat-send { width:44px; height:44px; flex-shrink:0; border:none; border-radius:50%; background:var(--cta); color:var(--cta-ink); display:flex; align-items:center; justify-content:center; }
.chat-send:hover { background:var(--cta-hover); }
.chat-send svg { width:18px; height:18px; }

/* Telas grandes: a conversa (normal e ampliada) cresce junto com a loja */
@media (min-width:1600px) {
  .nayra-chat { max-width:520px; height:min(820px, 86vh); }
  .msg-bubble { font-size:16.5px; }
  .chat-input { height:50px; font-size:16.5px; }
  .suggestion-btn { font-size:14.5px; }
  .nayra-overlay.ampliado .nayra-chat { max-width:1300px; }
  .nayra-overlay.ampliado .msg-bubble { font-size:19px; padding:15px 21px; }
  .nayra-overlay.ampliado .chat-messages,
  .nayra-overlay.ampliado .chat-suggestions,
  .nayra-overlay.ampliado .chat-input-area { padding-left:max(16px, calc((100% - 1000px) / 2)); padding-right:max(16px, calc((100% - 1000px) / 2)); }
  .nayra-overlay.ampliado .chat-input { height:58px; font-size:18px; }
  .nayra-overlay.ampliado .chat-send { width:58px; height:58px; }
  .nayra-overlay.ampliado .suggestion-btn { font-size:16px; padding:10px 18px; }
}
@media (min-width:2000px) {
  .nayra-chat { max-width:600px; height:min(960px, 86vh); }
  .msg-bubble { font-size:18px; }
  .chat-name { font-size:18px; }
  .chat-status { font-size:14px; }
  .chat-avatar { width:48px; height:48px; font-size:22px; }
  .nayra-overlay.ampliado .nayra-chat { max-width:1600px; }
  .nayra-overlay.ampliado .msg-bubble { font-size:22px; padding:17px 24px; }
  .nayra-overlay.ampliado .msg-time { font-size:14px; }
  .nayra-overlay.ampliado .msg-avatar { width:36px; height:36px; font-size:15px; }
  .nayra-overlay.ampliado .chat-messages,
  .nayra-overlay.ampliado .chat-suggestions,
  .nayra-overlay.ampliado .chat-input-area { padding-left:max(16px, calc((100% - 1200px) / 2)); padding-right:max(16px, calc((100% - 1200px) / 2)); }
  .nayra-overlay.ampliado .chat-input { height:64px; font-size:20px; padding:0 24px; }
  .nayra-overlay.ampliado .chat-send { width:64px; height:64px; }
  .nayra-overlay.ampliado .suggestion-btn { font-size:18px; padding:12px 20px; }
  .nayra-btn.tam-m { width:64px; height:64px; } .nayra-btn.tam-m svg { width:29px; height:29px; }
}

/* A bolinha e o balão ficam por cima da página de produto (é lá que a
   Nayra oferece ajuda), mas somem enquanto o menu ☰ está aberto. */
body.menu-aberto .nayra-btn, body.menu-aberto .nayra-teaser { visibility:hidden; }

/* ── Esfera na página de produto ──
   Lá já existe o botão "Perguntar à Nayra", então a esfera sai de cena.
   Ela volta com um "pop" e um brilho dourado só na hora do convite
   (js/nayra-observa.js) e sai de novo quando o convite termina. */
.nayra-btn { transition:transform 0.5s cubic-bezier(0.34,1.56,0.64,1), opacity 0.3s ease, box-shadow 0.2s; }
body.produto-aberto .nayra-btn:not(.convidando) {
  transform:scale(0) rotate(-35deg); opacity:0; pointer-events:none;
  transition:transform 0.35s var(--ease), opacity 0.3s ease;
}
.nayra-btn.convidando::after {
  content:''; position:absolute; inset:-6px; border-radius:50%; pointer-events:none;
  border:2px solid rgba(232,196,106,0.85); animation:nayraBrilho 1.4s ease-out 0.2s 2 both;
}
@keyframes nayraBrilho { from { transform:scale(0.85); opacity:1; } to { transform:scale(1.7); opacity:0; } }

/* ═══════════════════════════════════════════════════════════
   ESFERA DA NAYRA · "Ônix e ouro"
   Esfera preta polida, aurora dourada girando por dentro, aro de ouro e a
   estrela da IA no centro. De vez em quando ela brinca (js/nayra-esfera.js):
   a estrela passeia, dá um giro ou cai uma chuvinha de estrelas lá dentro.
   ═══════════════════════════════════════════════════════════ */
.nayra-btn {
  background:radial-gradient(circle at 35% 30%, #3a3a42 0%, #17171c 45%, #050507 100%);
  color:#f6dc92;
  box-shadow:0 10px 26px rgba(0,0,0,0.38), 0 0 0 1.5px rgba(232,196,106,0.85), 0 0 22px rgba(232,196,106,0.3);
}
.nayra-btn:hover { box-shadow:0 12px 30px rgba(0,0,0,0.42), 0 0 0 1.5px rgba(246,220,146,1), 0 0 30px rgba(232,196,106,0.5); }
.nayra-btn.arrastando { box-shadow:0 14px 34px rgba(0,0,0,0.45), 0 0 0 1.5px rgba(246,220,146,1), 0 0 34px rgba(232,196,106,0.55); }
.nb-clip { position:absolute; inset:0; border-radius:50%; overflow:hidden; pointer-events:none; }
.nb-clip::after { content:''; position:absolute; left:15%; top:8%; width:44%; height:26%; border-radius:50%;
  background:radial-gradient(ellipse, rgba(255,255,255,0.5), rgba(255,255,255,0) 70%); }
.nb-aurora { position:absolute; inset:-25%; border-radius:50%; filter:blur(6px); opacity:0.85; mix-blend-mode:screen;
  background:conic-gradient(from 0deg, rgba(232,196,106,0) 0deg, rgba(255,214,120,0.95) 55deg, rgba(255,214,140,0) 125deg, rgba(232,170,70,0.85) 215deg, rgba(232,196,106,0) 300deg);
  animation:nbGira 6s linear infinite; }
.nb-aurora2 { position:absolute; inset:-10%; border-radius:50%; filter:blur(6px); opacity:0.5; mix-blend-mode:screen;
  background:radial-gradient(circle at 70% 70%, rgba(255,200,120,0.7), transparent 45%); animation:nbGira 9s linear infinite reverse; }
.nb-chuva { position:absolute; inset:0; }
.nayra-btn svg.nb-estrela { position:relative; z-index:2; width:44% !important; height:44% !important;
  filter:drop-shadow(0 0 5px rgba(246,220,146,0.85)); animation:nbBrilha 3.2s ease-in-out infinite; }
.nayra-pulse { z-index:3; }

/* brincadeira 1: a estrela passeia pela esfera e volta ao centro */
.nayra-btn.nb-passeia svg.nb-estrela { animation:nbPasseia 2.6s cubic-bezier(0.45,0,0.25,1); }
@keyframes nbPasseia {
  0%   { transform:translate(0,0) rotate(0) scale(1); }
  22%  { transform:translate(-34%,-28%) rotate(-25deg) scale(0.72); }
  45%  { transform:translate(30%,-20%) rotate(20deg) scale(0.78); }
  68%  { transform:translate(22%,30%) rotate(-10deg) scale(0.72); }
  86%  { transform:translate(-26%,18%) rotate(12deg) scale(0.8); }
  100% { transform:translate(0,0) rotate(0) scale(1); }
}
/* brincadeira 2: pirueta */
.nayra-btn.nb-gira svg.nb-estrela { animation:nbPirueta 1.5s cubic-bezier(0.34,1.4,0.64,1); }
@keyframes nbPirueta { 0% { transform:rotate(0) scale(1); } 45% { transform:rotate(200deg) scale(1.35); } 100% { transform:rotate(360deg) scale(1); } }
/* brincadeira 3: chuva de estrelinhas dentro da esfera */
.nayra-btn.nb-chovendo svg.nb-estrela { animation:none; transform:scale(0.82); opacity:0.75; transition:transform 0.4s, opacity 0.4s; }
.nb-gota { position:absolute; top:-18%; width:16%; height:16%; color:#fbe7ad; filter:drop-shadow(0 0 3px rgba(255,226,150,0.95));
  animation:nbCai var(--d, 1.4s) cubic-bezier(0.4,0,0.7,1) var(--a, 0s) both; }
.nb-gota svg { width:100%; height:100%; display:block; }
@keyframes nbCai {
  0%   { transform:translate(0,0) rotate(0) scale(0.6); opacity:0; }
  15%  { opacity:1; }
  80%  { opacity:1; }
  100% { transform:translate(var(--x, 8%), 720%) rotate(160deg) scale(1); opacity:0; }
}
@keyframes nbGira { to { transform:rotate(360deg); } }
@keyframes nbBrilha { 0%,100% { transform:scale(0.94); opacity:0.88; } 50% { transform:scale(1.05); opacity:1; } }

/* avatares da Nayra no chat e no convite: mini-esfera de ônix com a estrela */
.chat-avatar, .nayra-teaser-avatar, .msg-avatar.av-nayra {
  background:radial-gradient(circle at 35% 30%, #3a3a42 0%, #17171c 50%, #050507 100%);
  box-shadow:0 0 0 1.5px rgba(232,196,106,0.85); color:#f6dc92;
}
.chat-avatar svg { width:52%; height:52%; filter:drop-shadow(0 0 4px rgba(246,220,146,0.7)); }
.nayra-teaser-avatar svg, .msg-avatar.av-nayra svg { width:56%; height:56%; filter:drop-shadow(0 0 3px rgba(246,220,146,0.6)); }

@media (prefers-reduced-motion: reduce) {
  .nb-aurora, .nb-aurora2, .nayra-btn svg.nb-estrela { animation:none !important; }
}

/* ── Carrinho: frete ── */
.cart-frete { margin-bottom:10px; font-size:14px; }
.cart-frete:empty { display:none; }
.cf-linha { display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.cf-valor { font-weight:600; text-align:right; }
.cf-valor.gratis { color:var(--ok); }
.cf-valor.muted { color:var(--text-2); font-weight:400; }
.cf-sub { margin-top:3px; font-size:12.5px; color:var(--text-2); line-height:1.45; }
.cf-sub b { color:var(--text); font-weight:600; }
.cf-trocar { background:none; border:none; padding:0; color:var(--brand-ink); font-size:12.5px; text-decoration:underline; cursor:pointer; }
.cf-form { display:flex; align-items:center; gap:8px; }
.cf-form span { flex:1; }
.cf-form input { width:118px; padding:8px 10px; border-radius:8px; border:1px solid var(--line); background:var(--surface-2); color:var(--text); font-size:14px; }
.cf-form button { padding:8px 12px; border-radius:8px; border:1px solid var(--line); background:var(--surface); color:var(--text); font-size:13.5px; font-weight:600; cursor:pointer; }

/* ── App instalável: convite (uma vez) e passo a passo do iPhone ── */
.app-convite {
  position:fixed; left:12px; right:12px; bottom:calc(72px + env(safe-area-inset-bottom)); z-index:340;
  display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:16px;
  background:#16161a; color:#f2f2f4; border:1px solid rgba(232,184,74,0.35); box-shadow:0 18px 40px rgba(0,0,0,0.35);
  opacity:0; transform:translateY(16px); transition:opacity 0.25s, transform 0.3s var(--ease-out);
}
.app-convite.show { opacity:1; transform:none; }
.app-convite[hidden] { display:none; }
.app-convite img { border-radius:12px; flex-shrink:0; }
.ac-texto { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.ac-texto b { font-size:14px; }
.ac-texto span { font-size:12.5px; color:#b9b9c2; line-height:1.35; }
.ac-acoes { display:flex; flex-direction:column; gap:6px; flex-shrink:0; }
.ac-sim { border:none; border-radius:999px; padding:8px 16px; background:var(--cta); color:var(--cta-ink); font-weight:700; font-size:13px; cursor:pointer; }
.ac-nao { border:none; background:none; color:#b9b9c2; font-size:12px; cursor:pointer; padding:2px; }
@media (min-width:900px) { .app-convite { left:auto; right:24px; bottom:24px; width:420px; } }

.app-iphone { position:fixed; inset:0; z-index:480; background:var(--scrim); display:none; align-items:flex-end; justify-content:center; }
.app-iphone.open { display:flex; animation:fadeIn 0.2s ease; }
.ai-painel { width:100%; max-width:440px; background:var(--surface); color:var(--text); border-radius:20px 20px 0 0; padding:24px 22px calc(22px + env(safe-area-inset-bottom)); text-align:center; animation:popIn 0.25s var(--ease-out); }
.ai-painel img { border-radius:14px; }
.ai-painel h3 { margin:12px 0 14px; font-size:18px; }
.ai-painel ol { text-align:left; margin:0 0 18px; padding-left:22px; display:flex; flex-direction:column; gap:10px; font-size:14.5px; line-height:1.45; color:var(--text-2); }
.ai-painel ol b { color:var(--text); }
.ai-painel ol svg { width:18px; height:18px; vertical-align:-3px; color:#0a84ff; }
.ai-painel button { width:100%; border:none; border-radius:999px; padding:13px; background:var(--cta); color:var(--cta-ink); font-weight:700; font-size:15px; cursor:pointer; }
[data-instalar][hidden] { display:none !important; }

/* ── Nayra por voz (js/nayra-voz.js) ── */
.chat-ouvir .ico-som { display:none; }
.chat-ouvir.on { background:rgba(232,196,106,0.28); color:#f3d98d; }
.chat-ouvir.on .ico-som { display:block; }
.chat-ouvir.on .ico-mudo { display:none; }
.chat-mic { width:44px; height:44px; flex-shrink:0; border:1px solid var(--line); border-radius:50%; background:var(--surface); color:var(--text); display:flex; align-items:center; justify-content:center; }
.chat-mic:hover { border-color:var(--text); }
.chat-mic svg { width:19px; height:19px; }
.chat-mic.on { background:#d63b3b; border-color:#d63b3b; color:#fff; animation:micPulso 1.6s ease-out infinite; }
@keyframes micPulso { 0% { box-shadow:0 0 0 0 rgba(214,59,59,0.45); } 70% { box-shadow:0 0 0 10px rgba(214,59,59,0); } 100% { box-shadow:0 0 0 0 rgba(214,59,59,0); } }
.chat-voz-status { display:flex; align-items:center; gap:10px; padding:8px 14px; font-size:13px; color:var(--text); background:var(--bg); border-top:1px solid var(--line); }
.chat-voz-status .cvs-texto { flex:1; min-width:0; }
.chat-voz-status small { color:var(--text-2); font-size:12px; }
.chat-voz-status .cvs-ponto { width:9px; height:9px; border-radius:50%; background:#d63b3b; flex-shrink:0; animation:micPisca 1.2s ease-in-out infinite; }
.chat-voz-status.pensando .cvs-ponto, .chat-voz-status.falando .cvs-ponto { background:#e8c46a; }
@keyframes micPisca { 50% { opacity:0.3; } }
.chat-voz-status .cvs-parar { border:1px solid var(--line); background:var(--surface); color:var(--text); border-radius:999px; padding:5px 12px; font-size:12.5px; }
.chat-voz-consent { margin:0 14px 10px; padding:14px 16px; border:1px solid var(--line); border-radius:16px; background:var(--surface); color:var(--text); font-size:13.5px; line-height:1.5; }
.chat-voz-consent b { display:block; font-size:14.5px; margin-bottom:6px; }
.chat-voz-consent p { margin:0 0 8px; color:var(--text-2); }
.chat-voz-consent p strong { color:var(--text); }
.cvc-botoes { display:flex; justify-content:flex-end; gap:8px; margin-top:4px; }
.cvc-botoes button { border-radius:999px; padding:8px 14px; font-size:13.5px; font-weight:600; border:1px solid var(--line); background:var(--surface); color:var(--text); }
.cvc-botoes .cvc-sim { background:var(--cta); color:var(--cta-ink); border-color:var(--cta); }
.nayra-overlay.ampliado .chat-mic { width:50px; height:50px; }
@media (prefers-reduced-motion: reduce) { .chat-mic.on, .chat-voz-status .cvs-ponto { animation:none; } }
.cfg-voz { display:flex; gap:8px; margin-top:10px; }
.cfg-voz select { flex:1; min-width:0; height:38px; border:1px solid var(--line); border-radius:10px; background:var(--bg); color:var(--text); padding:0 10px; font-size:14px; }
.cfg-ritmos { margin-top:10px; }
.cfg-ritmos .cfg-ritmo { justify-content:center; }

/* Voz com o chat fechado: barrinha flutuante (a Nayra segue ouvindo) */
.nayra-voz-flutua { position:fixed; left:50%; transform:translateX(-50%); bottom:calc(78px + env(safe-area-inset-bottom)); z-index:1200;
  display:flex; align-items:center; gap:10px; width:min(560px, calc(100% - 24px)); padding:10px 12px 10px 14px; border-radius:16px;
  background:var(--hdr); color:#fff; box-shadow:0 10px 30px rgba(0,0,0,0.35); font-size:13px; }
.nayra-voz-flutua[hidden] { display:none; }
.nayra-voz-flutua .nvf-texto { flex:1; min-width:0; line-height:1.35; }
.nayra-voz-flutua .nvf-texto small { display:block; color:#b9b9c2; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nayra-voz-flutua button { border:1px solid rgba(255,255,255,0.22); background:rgba(255,255,255,0.08); color:#fff; border-radius:999px; padding:6px 12px; font-size:12.5px; flex-shrink:0; }
.nayra-voz-flutua .cvs-ponto { width:9px; height:9px; border-radius:50%; background:#d63b3b; flex-shrink:0; animation:micPisca 1.2s ease-in-out infinite; }
.nayra-voz-flutua.pensando .cvs-ponto, .nayra-voz-flutua.falando .cvs-ponto { background:#e8c46a; }
.nayra-voz-flutua.aviso .cvs-ponto { display:none; }
@media (min-width:900px) { .nayra-voz-flutua { bottom:24px; } }
@media (prefers-reduced-motion: reduce) { .nayra-voz-flutua .cvs-ponto { animation:none; } }

/* Comparação lado a lado (js/nayra-navega.js) */
.compare-overlay { position:fixed; inset:0; z-index:1100; display:none; align-items:flex-end; justify-content:center; background:var(--scrim, rgba(0,0,0,0.55)); }
.compare-overlay.open { display:flex; }
.cmp-painel { width:100%; max-width:980px; max-height:92vh; display:flex; flex-direction:column; background:var(--surface); color:var(--text); border-radius:20px 20px 0 0; overflow:hidden; }
@media (min-width:900px) { .compare-overlay { align-items:center; padding:28px; } .cmp-painel { border-radius:20px; } }
.cmp-topo { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--line); }
.cmp-topo h2 { margin:0; font-size:17px; }
.cmp-fechar { width:36px; height:36px; border:none; border-radius:50%; background:var(--bg); color:var(--text); font-size:22px; line-height:1; }
.cmp-rolar { overflow:auto; -webkit-overflow-scrolling:touch; }
.cmp-tabela { border-collapse:collapse; width:100%; font-size:13.5px; }
.cmp-tabela th, .cmp-tabela td { padding:10px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.cmp-tabela thead th { vertical-align:bottom; }
.cmp-tabela tbody th { color:var(--text-2); font-weight:600; width:92px; position:sticky; left:0; background:var(--surface); }
.cmp-tabela thead th:first-child { width:92px; }
.cmp-foto { width:100%; aspect-ratio:1; max-width:140px; border-radius:12px; overflow:hidden; background:var(--bg); display:flex; align-items:center; justify-content:center; font-size:42px; }
.cmp-foto img { width:100%; height:100%; object-fit:cover; }
.cmp-nome { margin-top:8px; font-weight:700; font-size:14px; line-height:1.3; }
.cmp-tabela s { color:var(--text-2); font-size:12px; }
.cmp-vazio { color:var(--text-2); }
.cmp-btn { border:none; border-radius:999px; padding:8px 14px; font-size:13px; font-weight:600; background:var(--cta); color:var(--cta-ink); }
/* com a barrinha de voz na tela, o fim das páginas ganha espaço para nada ficar escondido atrás dela */
body.voz-flutuando #productOverlay, body.voz-flutuando .cmp-rolar, body.voz-flutuando .cart-items { padding-bottom:96px; }
body.voz-flutuando { padding-bottom:calc(150px + env(safe-area-inset-bottom)); }
@media (min-width:900px) { body.voz-flutuando { padding-bottom:96px; } }