/* ─────────────────────────────────────────────────────────────
   Shark Coin
   Paleta e tipografia herdadas do CRM (chatflows-crm-sharktech).
   O âmbar aparece num lugar só: a moeda. Cinzel também — é a
   letra gravada em moeda de verdade, e não é usada em mais nada.
   ───────────────────────────────────────────────────────────── */
:root{
  --void:#0f0f1f;
  --base:#16162b;
  --surface:#232340;
  --line:#323254;
  --ink:#e1eaf9;
  --muted:#7681a8;
  --spark:#9043ff;
  --spark-lite:#a163ff;
  --spark-deep:#6420c4;
  --indigo:#342066;

  --coin:#f59e0b;
  --coin-lite:#fcd34d;
  --coin-deep:#b45309;
  --coin-shadow:#7c3f03;

  --danger:#e11d48;
  --ok:#10b981;

  --bubble-radius:18px;
  --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box;margin:0;padding:0;}

html{ -webkit-text-size-adjust:100%; }

body{
  min-height:100dvh;
  background:var(--base);
  color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Atmosfera: dois halos de índigo/roxo à deriva. Fica atrás de tudo. */
.aurora{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}
.aurora::before,
.aurora::after{
  content:'';
  position:absolute;
  border-radius:50%;
  filter:blur(90px);
  opacity:.5;
}
.aurora::before{
  width:60vmax;height:60vmax;
  top:-25vmax;right:-20vmax;
  background:radial-gradient(circle, var(--spark) 0%, transparent 65%);
  opacity:.22;
  animation:drift-a 26s ease-in-out infinite alternate;
}
.aurora::after{
  width:52vmax;height:52vmax;
  bottom:-22vmax;left:-18vmax;
  background:radial-gradient(circle, var(--indigo) 0%, transparent 65%);
  opacity:.5;
  animation:drift-b 32s ease-in-out infinite alternate;
}
@keyframes drift-a{ to{ transform:translate(-6vmax,5vmax) scale(1.12); } }
@keyframes drift-b{ to{ transform:translate(5vmax,-4vmax) scale(1.08); } }

/* ─── Cabeçalho ─────────────────────────────────────────────── */
.topbar{
  position:sticky;
  top:0;
  z-index:10;
  display:flex;
  align-items:center;
  gap:11px;
  padding:14px 20px;
  padding-top:max(14px, env(safe-area-inset-top));
  border-bottom:1px solid color-mix(in srgb, var(--line) 60%, transparent);
}
/* O desfoque mora aqui, e não no .topbar: backdrop-filter num elemento vira o
   referencial dos filhos position:fixed, e a barra de abas do celular (que é
   filha do header) grudaria nele em vez de grudar no fim da tela. */
.topbar::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  background:color-mix(in srgb, var(--base) 82%, transparent);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.topbar .fin{ width:22px;height:22px;flex:none; }
/* `fill` no <svg>, não no <path>: o desenho vem por <use>, e o CSS não alcança
   o que está dentro dele — só herança passa. */
.topbar .fin{ fill:var(--spark); }
.topbar-text{ display:flex;flex-direction:column;line-height:1.25; }
.topbar-title{ font-size:14px;font-weight:600;letter-spacing:-.01em; }
.topbar-sub{ font-size:11px;color:var(--muted); }
.topbar-live{
  margin-left:auto;
  display:flex;align-items:center;gap:6px;
  font-size:11px;color:var(--muted);
}
.topbar-live .pulse{
  width:6px;height:6px;border-radius:50%;
  background:var(--ok);
  box-shadow:0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent);
  animation:pulse 2.4s ease-out infinite;
}
/* Sem a conexão do ao vivo, o ponto apaga e para de pulsar. */
body[data-live="off"] .topbar-live .pulse{ background:var(--muted); animation:none; box-shadow:none; }
/* Modo teste precisa ser impossível de confundir com o app de verdade. */
.test-flag{
  margin-left:auto;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--coin);
  background:color-mix(in srgb, var(--coin) 13%, transparent);
  border:1px solid color-mix(in srgb, var(--coin) 40%, transparent);
  padding:3px 9px;
  border-radius:20px;
}
.test-flag + .topbar-live{ margin-left:14px; }
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent); }
  70%{ box-shadow:0 0 0 7px transparent; }
  100%{ box-shadow:0 0 0 0 transparent; }
}

/* ─── Conversa ──────────────────────────────────────────────── */
.chat{
  position:relative;
  z-index:1;
  max-width:660px;
  margin:0 auto;
  padding:28px 20px calc(140px + env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
  gap:9px;
}

.row{
  display:flex;
  align-items:flex-end;
  gap:9px;
  animation:rise .42s var(--ease) both;
}
@keyframes rise{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:none; }
}

.row.me{ justify-content:flex-end; }

.avatar{
  width:28px;height:28px;flex:none;
  border-radius:50%;
  background:var(--surface);
  border:1px solid var(--line);
  display:grid;place-items:center;
  /* Só a última fala de um bloco mostra o avatar — no meio do bloco ele
     vira ruído repetido, exatamente como num app de mensagem. */
  visibility:hidden;
}
.row.bot:not(:has(+ .row.bot)) .avatar{ visibility:visible; }
.avatar svg{ width:14px;height:14px; }
.avatar svg{ fill:var(--spark); }

.bubble{
  max-width:min(78%, 460px);
  padding:11px 15px;
  border-radius:var(--bubble-radius);
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
.row.bot .bubble{
  background:var(--surface);
  border:1px solid var(--line);
  border-bottom-left-radius:6px;
}
.row.me .bubble{
  background:linear-gradient(135deg, var(--spark) 0%, var(--spark-deep) 100%);
  color:#fff;
  font-weight:500;
  border-bottom-right-radius:6px;
  box-shadow:0 8px 24px -12px color-mix(in srgb, var(--spark) 70%, transparent);
}
.bubble strong{ font-weight:600; }
.bubble .rules{ margin-top:7px; display:flex; flex-direction:column; gap:3px; }
.bubble .rule{ display:flex; gap:9px; }
.bubble .rule i{
  font-style:normal;
  color:var(--spark-lite);
  font-weight:600;
  font-variant-numeric:tabular-nums;
}
/* O aviso entre parênteses é apoio, não a pergunta — então recua um tom. */
.bubble .aside{
  display:block;
  margin-top:6px;
  font-size:13px;
  color:var(--muted);
  line-height:1.5;
}

/* Digitando */
.typing .bubble{ display:flex;gap:4px;padding:15px; }
.typing .dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--muted);
  animation:blink 1.3s ease-in-out infinite;
}
.typing .dot:nth-child(2){ animation-delay:.18s; }
.typing .dot:nth-child(3){ animation-delay:.36s; }
@keyframes blink{
  0%,60%,100%{ opacity:.25; transform:translateY(0); }
  30%{ opacity:1; transform:translateY(-3px); }
}

/* ─── Chips de escolha ──────────────────────────────────────── */
.chips{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
  margin:5px 0 3px;
  padding-left:37px;
}
.chip{
  font:inherit;
  font-weight:500;
  color:var(--ink);
  background:color-mix(in srgb, var(--surface) 70%, transparent);
  border:1px solid var(--line);
  border-radius:999px;
  padding:9px 16px;
  cursor:pointer;
  transition:transform .18s var(--ease), background .18s, border-color .18s, box-shadow .18s;
  animation:chip-in .34s var(--ease) both;
  animation-delay:calc(var(--i) * 55ms);
}
@keyframes chip-in{
  from{ opacity:0; transform:translateY(7px) scale(.96); }
  to{ opacity:1; transform:none; }
}
.chip:hover{
  background:color-mix(in srgb, var(--spark) 16%, var(--surface));
  border-color:var(--spark);
  transform:translateY(-2px);
  box-shadow:0 10px 24px -14px var(--spark);
}
.chip:active{ transform:translateY(0) scale(.97); }
.chip:focus-visible{ outline:2px solid var(--spark-lite); outline-offset:2px; }
.chip.leaving{ opacity:0; transform:scale(.94); transition:opacity .16s, transform .16s; }

/* ─── A moeda ───────────────────────────────────────────────── */
/* O único âmbar da interface, e a única vez que Cinzel aparece.
   O logo da Shark é o relevo da moeda. */
.coin-stage{
  display:flex;
  justify-content:center;
  padding:22px 0 10px;
  perspective:1000px;
  animation:rise .42s var(--ease) both;
}
.coin{
  width:126px;height:126px;
  position:relative;
  transform-style:preserve-3d;
  animation:spin 1.5s linear infinite;
}
.coin.landed{ animation:land 1.15s var(--ease) forwards; }
@keyframes spin{ to{ transform:rotateY(360deg); } }
@keyframes land{
  0%{ transform:rotateY(0) scale(1); }
  70%{ transform:rotateY(720deg) scale(1.12); }
  100%{ transform:rotateY(720deg) scale(1); }
}

.coin-face{
  position:absolute;
  inset:0;
  border-radius:50%;
  backface-visibility:hidden;
  /* Serrilha da borda — as ranhuras de uma moeda cunhada de verdade. */
  background:repeating-conic-gradient(
    from 0deg,
    var(--coin-deep) 0deg 2.2deg,
    var(--coin-lite) 2.2deg 4.4deg
  );
  box-shadow:0 18px 44px -14px color-mix(in srgb, var(--coin) 55%, transparent);
}
.coin-back{ transform:rotateY(180deg); }

.coin-inner{
  position:absolute;
  inset:7px;
  border-radius:50%;
  background:
    radial-gradient(circle at 34% 28%, var(--coin-lite) 0%, var(--coin) 46%, var(--coin-deep) 100%);
  box-shadow:
    inset 0 2px 4px color-mix(in srgb, #fff 45%, transparent),
    inset 0 -3px 7px color-mix(in srgb, var(--coin-shadow) 60%, transparent);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
}
.coin-inner svg{ width:44px;height:44px; }
.coin-inner svg{
  fill:var(--coin-shadow);
  /* luz vindo de cima-esquerda: o relevo é a sombra + o brilho embaixo */
  filter:drop-shadow(0 1px 0 color-mix(in srgb, #fff 55%, transparent));
}
.coin-legend{
  font-family:'Cinzel',serif;
  font-weight:700;
  font-size:8.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--coin-shadow);
  text-shadow:0 1px 0 color-mix(in srgb, #fff 45%, transparent);
}
.coin-value{
  font-family:'Cinzel',serif;
  font-weight:700;
  font-size:46px;
  line-height:1;
  color:var(--coin-shadow);
  text-shadow:0 1px 0 color-mix(in srgb, #fff 50%, transparent);
}

/* Recibo da coin */
.receipt{
  align-self:center;
  font-size:11px;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
  letter-spacing:.04em;
  padding:2px 0 6px;
  animation:rise .42s var(--ease) both;
}

/* ─── Composer ──────────────────────────────────────────────── */
.composer{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:9;
  padding:14px 20px;
  padding-bottom:max(14px, env(safe-area-inset-bottom));
  background:linear-gradient(to top, var(--base) 55%, transparent);
  transform:translateY(120%);
  transition:transform .4s var(--ease);
}
.composer.on{ transform:none; }
.composer-inner{
  max-width:660px;
  margin:0 auto;
  display:flex;
  align-items:flex-end;
  gap:9px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:22px;
  padding:6px 6px 6px 16px;
  transition:border-color .2s;
}
.composer-inner:focus-within{
  border-color:var(--spark);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--spark) 16%, transparent);
}
#reason{
  flex:1;
  background:none;
  border:none;
  outline:none;
  color:var(--ink);
  font:inherit;
  font-size:16px; /* abaixo de 16px o iOS dá zoom ao focar */
  resize:none;
  max-height:120px;
  padding:8px 0;
  line-height:1.5;
}
#reason::placeholder{ color:var(--muted); }
.send{
  flex:none;
  width:38px;height:38px;
  border:none;
  border-radius:50%;
  background:linear-gradient(135deg, var(--spark) 0%, var(--spark-deep) 100%);
  color:#fff;
  cursor:pointer;
  display:grid;place-items:center;
  transition:transform .18s var(--ease), opacity .18s;
}
.send:hover:not(:disabled){ transform:scale(1.07); }
.send:active:not(:disabled){ transform:scale(.94); }
.send:disabled{ opacity:.35; cursor:not-allowed; }
.send:focus-visible{ outline:2px solid var(--spark-lite); outline-offset:2px; }
.send svg{ width:17px;height:17px; }
.counter{
  max-width:660px;
  margin:6px auto 0;
  text-align:right;
  font-size:11px;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
  opacity:0;
  transition:opacity .2s, color .2s;
}
.counter.show{ opacity:1; }
.counter.over{ color:var(--danger); }

/* ─── Estados ───────────────────────────────────────────────── */
.note{
  align-self:flex-start;
  margin-left:37px;
  max-width:min(78%, 460px);
  font-size:12.5px;
  padding:9px 13px;
  border-radius:12px;
  animation:rise .42s var(--ease) both;
}
.note.warn{
  background:color-mix(in srgb, var(--coin) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--coin) 35%, transparent);
  color:var(--coin-lite);
}
.note.err{
  background:color-mix(in srgb, var(--danger) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--danger) 35%, transparent);
  color:#fda4af;
}

@media (max-width:520px){
  .bubble{ max-width:82%; }
  .chips{ padding-left:0; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .coin{ animation:none; transform:none; }
  .composer{ transition:none; }
}

/* ─── App: telas, abas, entrada, Início ─────────────────────── */
[hidden]{ display:none !important; }

/* O composer só existe na aba Dar coin. */
body:not([data-tab="dar"]) .composer{ display:none; }

.tabs{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:12;
  display:flex;
  justify-content:center;
  gap:8px;
  padding:6px 12px;
  padding-bottom:max(6px, env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--base) 90%, transparent);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-top:1px solid color-mix(in srgb, var(--line) 60%, transparent);
  transition:transform .3s var(--ease);
}
/* No celular a barra some enquanto o campo do motivo está aberto, pra não
   brigar com o teclado e com o composer. */
body.composing[data-tab="dar"] .tabs{ transform:translateY(110%); }
.tab{
  position:relative;
  flex:1;
  max-width:170px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  padding:7px 0;
  border-radius:12px;
  color:var(--muted);
  text-decoration:none;
  font-size:11px;
  font-weight:500;
  transition:color .18s, background .18s;
}
.tab svg{ width:22px;height:22px; }
.tab[aria-current="page"]{ color:var(--ink); }
.tab[aria-current="page"] svg{ color:var(--spark-lite); }
.tab:focus-visible{ outline:2px solid var(--spark-lite); outline-offset:2px; }
.badge{
  position:absolute;
  top:3px;
  left:calc(50% + 6px);
  min-width:17px;height:17px;
  padding:0 5px;
  border-radius:9px;
  background:var(--spark);
  color:#fff;
  font-size:10.5px;
  font-weight:700;
  line-height:17px;
  text-align:center;
}

@media (min-width:640px){
  .tabs{
    position:static;
    margin-left:auto;
    padding:0;
    background:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    border:0;
    gap:4px;
  }
  .test-flag + .tabs{ margin-left:14px; }
  body.composing .tabs{ transform:none; }
  .tab{ flex:none;max-width:none;flex-direction:row;gap:7px;padding:8px 14px;font-size:13.5px; }
  .tab svg{ width:18px;height:18px; }
  .tab[aria-current="page"]{ background:var(--surface); }
  .badge{ position:static; }
  body.authed .topbar-live{ display:none; }
}

/* ─── Botões e campos ───────────────────────────────────────── */
.btn{
  width:100%;
  padding:12px;
  border:none;
  border-radius:12px;
  background:linear-gradient(135deg, var(--spark), var(--spark-deep));
  color:#fff;
  font:inherit;
  font-weight:600;
  cursor:pointer;
  transition:opacity .15s, transform .15s var(--ease);
}
.btn:hover:not(:disabled){ opacity:.92; }
.btn:active:not(:disabled){ transform:scale(.98); }
.btn:disabled{ opacity:.45;cursor:not-allowed; }
.btn:focus-visible{ outline:2px solid var(--spark-lite); outline-offset:2px; }
.btn.ghost{ background:none;border:1px solid var(--line);color:var(--ink); }
.link{
  background:none;border:0;padding:4px 0;
  color:var(--spark-lite);font:inherit;font-size:13.5px;cursor:pointer;text-align:left;
}
.field{
  width:100%;
  background:var(--void);
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px 14px;
  color:var(--ink);
  font:inherit;
  font-size:16px;
  outline:none;
  transition:border-color .15s;
}
.field:focus{ border-color:var(--spark); box-shadow:0 0 0 3px color-mix(in srgb, var(--spark) 16%, transparent); }
.msg{ font-size:13px;color:#fda4af;min-height:18px; }
.hint{ font-size:12.5px;color:var(--muted); }

/* ─── Entrada ───────────────────────────────────────────────── */
.entry{
  position:relative;
  z-index:1;
  min-height:calc(100dvh - 72px);
  display:grid;
  place-items:center;
  padding:32px 20px 48px;
}
.entry-card{ width:100%;max-width:380px;display:flex;flex-direction:column;gap:20px;animation:rise .42s var(--ease) both; }
.entry h1{ font-size:28px;font-weight:700;letter-spacing:-.02em;line-height:1.15; }
.entry .lead{ color:var(--muted);margin-top:-12px; }
.install{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:16px;
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.install-title{ font-weight:600; }
.steps{ padding-left:20px;display:flex;flex-direction:column;gap:9px;color:#c9cee0; }
.steps svg{ width:17px;height:17px;vertical-align:-3px;color:var(--spark-lite); }
.login{ display:flex;flex-direction:column;gap:10px; }
.login label{ font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted); }
.field.code{
  font-size:22px;
  font-weight:600;
  letter-spacing:.2em;
  text-align:center;
  text-transform:uppercase;
  font-variant-numeric:tabular-nums;
  padding:14px;
}

/* ─── Início ────────────────────────────────────────────────── */
.home{
  position:relative;
  z-index:1;
  max-width:1060px;
  margin:0 auto;
  padding:28px 20px calc(100px + env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
  gap:18px;
}
.hello h1{ font-size:26px;font-weight:700;letter-spacing:-.02em; }
.hello-sub{ color:var(--muted);font-size:14px; }
.home-body{ display:flex;flex-direction:column;gap:18px; }
.home h2{
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--muted);
  margin-bottom:10px;
}
.card{ background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px; }
.push-card{
  display:flex;flex-direction:column;gap:12px;
  border-color:color-mix(in srgb, var(--spark) 45%, var(--line));
}
.push-card .btn{ width:auto;align-self:flex-start;padding:10px 18px; }
.push-card .msg:empty{ display:none; }
.month-block{ display:flex;flex-direction:column;gap:10px; }
.month-head{ display:flex;align-items:center;justify-content:space-between;gap:12px; }
.month-head h2{ margin-bottom:0; }
/* Os dois blocos do Início ("Este mês" e "Histórico") têm título de seção; os
   rótulos miúdos ficam pras listas de dentro. */
.month-head h2,.history-head h2{
  font-size:16px;font-weight:700;text-transform:none;letter-spacing:-.01em;color:var(--ink);
}
.month-pick{
  appearance:none;-webkit-appearance:none;
  background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237681a8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  border:1px solid var(--line);
  border-radius:10px;
  padding:9px 32px 9px 12px;
  color:var(--ink);
  font:inherit;font-size:14px;
  cursor:pointer;
}
.month-pick:focus-visible{ outline:2px solid var(--spark-lite); outline-offset:2px; }
.month-pick:disabled{ opacity:.6; }
.tally{ display:grid;grid-template-columns:1fr 1fr;gap:12px; }
.history{ display:flex;flex-direction:column;gap:12px;padding-top:6px; }
.history-head h2{ margin-bottom:2px; }
.history-head p{ color:var(--muted);font-size:13px; }
.tally > div{
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:16px 18px;display:flex;flex-direction:column;gap:2px;
}
.tally .n{ font-size:34px;font-weight:700;letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums; }
.tally .k{ font-size:12.5px;color:var(--muted); }
.lists{ display:grid;grid-template-columns:1fr;gap:24px; }
.list{ display:flex;flex-direction:column;gap:10px;scroll-margin-top:90px; }
.list-total{
  font-size:12px;font-weight:600;color:var(--muted);
  margin-left:6px;font-variant-numeric:tabular-nums;
}
.pager{
  display:flex;align-items:center;justify-content:center;gap:14px;
  padding-top:4px;
  font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;
}
.pager button{
  width:40px;height:40px;
  border-radius:12px;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--ink);
  font:inherit;font-size:20px;line-height:1;
  cursor:pointer;
}
.pager button:hover:not(:disabled){ border-color:var(--spark); }
.pager button:disabled{ opacity:.35;cursor:default; }
.pager button:focus-visible{ outline:2px solid var(--spark-lite); outline-offset:2px; }
.coin-item{
  background:color-mix(in srgb, var(--surface) 75%, transparent);
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px 16px;
  display:flex;flex-direction:column;gap:6px;
  animation:rise .42s var(--ease) both;
}
.coin-item.is-new{ border-color:var(--spark);box-shadow:0 10px 30px -18px var(--spark); }
.coin-item header{ display:flex;align-items:center;gap:8px;flex-wrap:wrap; }
.coin-item .who{ font-weight:600;font-size:14px; }
.new-tag,.test-tag{
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  padding:2px 8px;border-radius:20px;
}
.new-tag{ background:var(--spark);color:#fff; }
.test-tag{ background:color-mix(in srgb, var(--muted) 20%, transparent);color:var(--muted); }
.why{ color:#c9cee0;font-size:14.5px;white-space:pre-wrap;overflow-wrap:anywhere; }
.coin-item time{ font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums; }
.empty{ color:var(--muted);font-size:13.5px;padding:4px 0; }
.empty a{ color:var(--spark-lite); }
.loading{ color:var(--muted); }
.home-foot{ display:flex;justify-content:center;padding-top:6px; }

@media (min-width:640px){
  .home{ padding-bottom:64px; }
  .chat{ padding-bottom:140px; }
}
@media (min-width:960px){
  .lists{ grid-template-columns:1fr 1fr;align-items:start; }
}

/* ─── Aviso do ao vivo ──────────────────────────────────────── */
/* Coin que chega com o app aberto, em qualquer aba. Desce do topo e some
   sozinho; tocar leva pro Início. */
.toast{
  position:fixed;
  top:calc(max(14px, env(safe-area-inset-top)) + 54px);
  left:50%;
  z-index:30;
  max-width:min(92vw, 420px);
  padding:11px 16px;
  border-radius:14px;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--ink);
  font:inherit;
  font-size:14px;
  text-align:left;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  cursor:pointer;
  opacity:0;
  transform:translate(-50%, -8px);
  transition:opacity .2s var(--ease), transform .2s var(--ease);
}
.toast.on{ opacity:1; transform:translate(-50%, 0); }
.toast:focus-visible{ outline:2px solid var(--spark-lite); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){ .toast{ transition:none; } }

/* ─── Canal ─────────────────────────────────────────────────── */
.canal{
  position:relative;
  z-index:1;
  max-width:660px;
  margin:0 auto;
  padding:20px 20px calc(110px + env(safe-area-inset-bottom));
}
.canal-top{ display:flex;justify-content:center;min-height:8px;margin-bottom:8px; }
.canal-list{ display:flex;flex-direction:column;gap:18px; }
.post{ display:flex;gap:9px;align-items:flex-start;animation:rise .42s var(--ease) both; }
.post .avatar{ visibility:visible;margin-top:2px; }
.post-main{ flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;align-items:flex-start; }
.post-bubble{
  max-width:100%;
  white-space:normal;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--bubble-radius);
  border-top-left-radius:6px;
  display:flex;flex-direction:column;gap:8px;
}
.post-head{ display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px; }
.post-head time{ margin-left:auto;color:var(--muted);font-size:11.5px;font-variant-numeric:tabular-nums; }
.aviso-tag{
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  padding:2px 8px;border-radius:20px;background:var(--spark);color:#fff;
}
.post-text{ font-size:14.5px;color:#d6dcef;line-height:1.6;overflow-wrap:anywhere; }
.post-text strong{ color:var(--ink); }
.post-media{ display:block;width:100%;border-radius:12px;overflow:hidden; }
button.post-media{ padding:0;border:0;background:none;cursor:zoom-in; }
.post-media img,video.post-media{ display:block;width:100%;max-height:420px;object-fit:contain;background:var(--void);border-radius:12px; }
audio.post-media{ height:42px; }

.lightbox{
  position:fixed;inset:0;z-index:50;
  display:flex;align-items:center;justify-content:center;
  padding:calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--void) 94%, transparent);
  cursor:zoom-out;
}
.lightbox[hidden]{ display:none; }
.lightbox img{ max-width:100%;max-height:100%;object-fit:contain;border-radius:8px; }

.reacts{ display:flex;flex-wrap:wrap;gap:6px; }
.react{
  font:inherit;font-size:15px;line-height:1;
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 10px;border-radius:999px;
  background:color-mix(in srgb, var(--surface) 70%, transparent);
  border:1px solid var(--line);color:var(--ink);cursor:pointer;
  transition:border-color .15s, background .15s, transform .15s var(--ease);
}
.react span{ font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--muted); }
.react.mine{ border-color:var(--spark);background:color-mix(in srgb, var(--spark) 16%, var(--surface)); }
.react.mine span{ color:var(--ink); }
.react:active{ transform:scale(.94); }
.react:focus-visible{ outline:2px solid var(--spark-lite);outline-offset:2px; }
.link.small{ font-size:12.5px;padding:2px 0; }
.who-list{ font-size:12.5px;color:var(--muted);display:flex;flex-direction:column;gap:3px; }
.who-list span{ margin-right:4px; }

.thread{
  width:100%;
  border-left:2px solid var(--line);
  padding:4px 0 4px 12px;
  display:flex;flex-direction:column;gap:10px;
}
.thread[hidden]{ display:none; }
.reply-head{ display:flex;align-items:center;gap:8px;font-size:13px; }
.reply-head time{ color:var(--muted);font-size:11.5px;font-variant-numeric:tabular-nums; }
.reply p{ font-size:14px;color:#c9cee0;white-space:pre-wrap;overflow-wrap:anywhere; }
.reply-form{
  display:flex;align-items:flex-end;gap:8px;
  background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:5px 5px 5px 12px;
}
.reply-form:focus-within{ border-color:var(--spark); }
.reply-form .field{ background:none;border:0;padding:7px 0;resize:none;max-height:120px;box-shadow:none; }
.reply-form .send{ width:34px;height:34px;flex:none; }
.thread .msg:empty{ display:none; }

@media (min-width:640px){
  .canal{ padding-bottom:64px; }
}