/* ============================================================
   BIKE SHOP SUL — assistente flutuante
   CSS puro, sem passo de build, como css/bss-features.css: usa as
   variáveis que src/main.css já declara em :root (--bss-gold, --bss-panel…).
   Este arquivo só ACRESCENTA — não redeclara cor, fonte nem raio da marca.

   O empilhamento aqui não é chute: foi medido no site vivo.
     400 #schedule-modal · 320 #bss-gaveta/#bss-comparador · 300 #store-sheet
     200 #mobile-menu · 150 .bss-busca.fixa · 100 #nav · 95 .bss-dock
      90 .mobile-bar · 60 .bss-busca
   O lançador fica em 96: acima do dock, ABAIXO do cabeçalho — o mascote
   nunca cobre a navegação. O painel fica em 310: acima do menu e do
   store-sheet, ABAIXO da gaveta de seleção. Quando a pessoa abre a seleção
   a partir do assistente, a gaveta fica por cima: o funil que fecha venda
   ganha do assistente, sempre.
   ============================================================ */

:root {
  --bssa-toque: 2.75rem;          /* 44px — o piso já praticado em .bss-busca-add */
  --bssa-mascote: 56px;
  --bssa-z-lancador: 96;
  --bssa-z-painel: 310;
  --bssa-recuo-base: 0.85rem;     /* o mesmo padding lateral do .bss-dock */
  --bssa-recuo-rodape: 0px;       /* JS reescreve: 0, altura da mobile-bar ou do dock */
  --bssa-tinta-ouro: #16110A;     /* a tinta sobre o ouro, igual à do .bss-busca-add */
}

/* ─────────────────────────── Lançador ───────────────────────── */

.bssa-lancador {
  position: fixed;
  right: var(--bssa-recuo-base);
  bottom: calc(var(--bssa-recuo-base) + var(--bssa-recuo-rodape) + env(safe-area-inset-bottom));
  z-index: var(--bssa-z-lancador);
  width: var(--bssa-mascote); height: var(--bssa-mascote);
  padding: 0; flex: none;
  border: 1px solid var(--bss-gold-line);
  border-radius: 50%;
  background: rgba(22, 22, 27, 0.94);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  display: grid; place-items: center;
  transition: border-color 0.2s ease, bottom 0.2s ease;
}
.bssa-lancador:hover { border-color: var(--bss-gold-line-strong); }
.bssa-lancador svg { width: 76%; height: 76%; display: block; }
@media (max-width: 640px) { .bssa-lancador { width: 52px; height: 52px; } }

/* O visor É o paralelogramo do wordmark, inclinado a -18°. */
.bssa-casco { fill: var(--bss-panel); stroke: var(--bss-gold-line); stroke-width: 1.4; }
.bssa-visor { fill: var(--bss-gold); }
.bssa-olho  { fill: var(--bss-ink); transform-origin: center; transform-box: fill-box; }
.bssa-boca  { stroke: var(--bss-faint); stroke-width: 2; stroke-linecap: round; fill: none; }

@keyframes bssa-piscar { 0%,92%,100% { transform: scaleY(1); } 94%,98% { transform: scaleY(.12); } 96% { transform: scaleY(1); } }
.bssa-lancador[data-estado="repouso"] .bssa-olho { animation: bssa-piscar 5s infinite ease; }

/* Pensando: o visor acende e apaga como farol. */
@keyframes bssa-farol { 0%,100% { fill: var(--bss-gold-deep); } 50% { fill: var(--bss-gold-hot); } }
.bssa-lancador[data-estado="pensando"] .bssa-visor { animation: bssa-farol .9s infinite ease; }
.bssa-lancador[data-estado="pensando"] { border-color: var(--bss-gold-line-strong); }

@keyframes bssa-halo { 0% { box-shadow: 0 0 0 0 rgba(247,181,0,.28); } 100% { box-shadow: 0 0 0 14px rgba(247,181,0,0); } }
.bssa-lancador[data-estado="escutando"] { animation: bssa-halo 1.3s infinite ease; border-color: var(--bss-gold-line-strong); }

/* ─────────────────────────── Balão ──────────────────────────── */

.bssa-balao {
  position: fixed;
  right: calc(var(--bssa-recuo-base) + var(--bssa-mascote) * 0.15);
  bottom: calc(var(--bssa-recuo-base) + var(--bssa-recuo-rodape) + var(--bssa-mascote) + 0.6rem + env(safe-area-inset-bottom));
  z-index: var(--bssa-z-lancador);
  max-width: 15rem;
  display: flex; align-items: flex-start; gap: .5rem;
  padding: .7rem .85rem;
  background: var(--bss-panel);
  border: 1px solid var(--bss-line);
  border-radius: var(--bss-radius-lg);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
  color: var(--bss-text);
  font-family: "Barlow", system-ui, sans-serif;
  font-size: .9rem; line-height: 1.45;
}
.bssa-balao::after {
  content: ''; position: absolute; right: 1.2rem; bottom: -7px;
  width: 12px; height: 12px; background: var(--bss-panel);
  border-right: 1px solid var(--bss-line); border-bottom: 1px solid var(--bss-line);
  transform: rotate(45deg);
}
.bssa-balao-x {
  flex: none; width: 1.5rem; height: 1.5rem; margin: -.15rem -.25rem 0 0;
  border: 0; background: transparent; color: var(--bss-faint);
  font-size: 1.1rem; line-height: 1; cursor: pointer; border-radius: 3px;
}
.bssa-balao-x:hover { color: var(--bss-white); }

/* ─────────────────────────── Painel ─────────────────────────── */

.bssa-painel {
  position: fixed;
  right: var(--bssa-recuo-base);
  bottom: calc(var(--bssa-recuo-base) + var(--bssa-recuo-rodape) + env(safe-area-inset-bottom));
  z-index: var(--bssa-z-painel);
  width: min(380px, calc(100vw - 1.5rem));
  max-width: 100%;
  max-height: min(72vh, 620px);
  display: flex; flex-direction: column;
  background: var(--bss-carbon);
  border: 1px solid var(--bss-line);
  border-radius: var(--bss-radius-lg);
  box-shadow: var(--bss-shadow);
  overflow: hidden;
}
.bssa-painel[hidden] { display: none; }

.bssa-topo {
  flex: none; display: flex; align-items: center; gap: .75rem;
  padding: .7rem .85rem; border-bottom: 1px solid var(--bss-line);
}
.bssa-titulo {
  flex: 1; min-width: 0; margin: 0;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800; font-style: italic; text-transform: uppercase;
  letter-spacing: .04em; font-size: 1.25rem; color: var(--bss-white);
}
.bssa-fechar {
  flex: none; width: var(--bssa-toque); height: var(--bssa-toque);
  border: 0; background: transparent; color: var(--bss-muted);
  font-size: 1.5rem; line-height: 1; cursor: pointer; border-radius: var(--bss-radius);
}
.bssa-fechar:hover { color: var(--bss-white); background: rgba(255, 255, 255, .06); }

.bssa-corpo {
  flex: 1; overflow-y: auto; padding: .85rem;
  display: flex; flex-direction: column; gap: .75rem;
  overscroll-behavior: contain;
}

.bssa-fala { max-width: 88%; margin: 0; font-size: 1rem; line-height: 1.55; }
.bssa-fala.ia { align-self: flex-start; color: var(--bss-text); }
.bssa-fala.eu {
  align-self: flex-end; background: var(--bss-steel);
  border-radius: var(--bss-radius-lg); padding: .5rem .8rem; color: var(--bss-white);
}

/* Pensando: os pontos são enfeite; o RÓTULO é o que informa. prefers-reduced-motion
   mata a animação com !important (regra global de src/main.css) — sem texto,
   quem tem movimento reduzido ficaria sem retorno nenhum. */
.bssa-pensando { display: flex; align-items: center; gap: .5rem; color: var(--bss-muted); font-size: .9rem; }
.bssa-pensando i { width: .4rem; height: .4rem; border-radius: 50%; background: var(--bss-gold); display: block; }
@keyframes bssa-sobe { 0%,80%,100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.bssa-pensando i { animation: bssa-sobe 1.1s infinite ease; }
.bssa-pensando i:nth-child(2) { animation-delay: .15s; }
.bssa-pensando i:nth-child(3) { animation-delay: .3s; }

/* Ressalva: a MESMA forma do .bss-busca-ressalva que a busca já usa. */
.bssa-ressalva {
  margin: .15rem 0 .35rem; padding: .6rem .7rem;
  color: var(--bss-white); background: var(--bss-gold-faint);
  border-left: 3px solid var(--bss-gold); border-radius: 3px;
  font-size: .9rem; line-height: 1.55;
}
.bssa-vazio { margin: 0; color: var(--bss-muted); font-size: .9rem; line-height: 1.55; }

.bssa-acao {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--bssa-toque); padding: 0 1.1rem;
  border: 1px solid var(--bss-gold-line); border-radius: var(--bss-radius);
  background: var(--bss-gold-faint); color: var(--bss-gold);
  font-family: "Barlow Condensed", sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; font-size: .9rem;
  cursor: pointer; text-decoration: none; align-self: flex-start;
}
.bssa-acao:hover { background: var(--bss-gold); color: var(--bssa-tinta-ouro); }

/* O escape mora FORA da área de rolagem, senão some quando a lista cresce —
   e "sempre visível" é justamente o requisito dele. */
.bssa-escape {
  flex: none; display: block; width: 100%; text-align: left;
  padding: .75rem .85rem; background: transparent; border: 0;
  border-top: 1px solid var(--bss-line);
  color: var(--bss-muted); font-family: inherit; font-size: .9rem; cursor: pointer;
}
.bssa-escape:hover { color: var(--bss-gold); }
.bssa-escape u { color: var(--bss-gold); text-underline-offset: 3px; }

/* ─────────────────────────── Entrada ────────────────────────── */

.bssa-privacidade {
  flex: none; margin: 0; padding: .5rem .85rem 0;
  color: var(--bss-faint); font-size: .72rem; line-height: 1.5;
}
.bssa-entrada {
  flex: none; display: flex; align-items: center; gap: .5rem;
  padding: .55rem .6rem calc(.55rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--bss-line);
}
.bssa-campo {
  flex: 1; min-width: 0; display: flex; align-items: center;
  background: rgba(16, 16, 20, .94);
  border: 1px solid var(--bss-line); border-radius: 999px;
  padding: 0 .25rem 0 .9rem;
}
.bssa-campo:focus-within { border-color: var(--bss-gold-line-strong); }
.bssa-campo input {
  flex: 1; min-width: 0; background: transparent; border: 0; outline: none;
  color: var(--bss-white); font-family: "Barlow", sans-serif;
  font-size: 1.05rem; min-height: var(--bssa-toque);
}
.bssa-campo input::placeholder { color: var(--bss-faint); }
.bssa-mic, .bssa-enviar {
  flex: none; width: var(--bssa-toque); height: var(--bssa-toque);
  border-radius: 50%; border: 1px solid var(--bss-gold-line);
  background: var(--bss-gold-faint); color: var(--bss-gold);
  cursor: pointer; display: grid; place-items: center;
}
.bssa-mic:hover, .bssa-enviar:hover { background: var(--bss-gold); color: var(--bssa-tinta-ouro); }
.bssa-mic[data-estado="gravando"] {
  background: var(--bss-gold); color: var(--bssa-tinta-ouro);
  animation: bssa-halo 1.3s infinite ease;
}
.bssa-mic[hidden] { display: none; }
.bssa-mic:disabled, .bssa-enviar:disabled { opacity: .4; cursor: not-allowed; }
.bssa-mic svg, .bssa-enviar svg { width: 20px; height: 20px; }

.bssa-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Em 360px o painel ocupa a largura toda, menos a folga lateral. */
@media (max-width: 420px) {
  .bssa-painel { left: var(--bssa-recuo-base); right: var(--bssa-recuo-base); width: auto; }
}