/* Acuity app — chat, read-only. Sistem visual sama dengan LP. */
:root{
  --ink:#07070c; --ink-2:#0b0b12; --ink-3:#10101a;
  --indigo:#4f46e5; --indigo-2:#6d66f0; --indigo-3:#9d98f8; --white:#fff;
  --tx:rgba(255,255,255,.72); --tx-2:rgba(255,255,255,.48); --tx-3:rgba(255,255,255,.32);
  --hair:rgba(255,255,255,.08); --hair-2:rgba(255,255,255,.15);
  --pos:#58d6a4; --warn:#e6b45c; --bad:#ef6b6b;
  --sans:"Schibsted Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --pad:clamp(16px,4vw,28px); --maxw:820px;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ height:100%; }
body{ height:100%; }

/* Di dalam Telegram, tinggi viewport diatur SDK (papan ketik memotongnya),
   jadi 100% tidak cukup — pakai nilai dari --app-h kalau ada. */
html.in-tg, html.in-tg body{ height:var(--app-h, 100%); }
html.in-tg .top{ padding-top:10px; }
body{
  margin:0; background:var(--ink); color:var(--tx);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; overflow-x:hidden;
}
a{ color:inherit; }
::selection{ background:var(--indigo); color:#fff; }
:focus-visible{ outline:2px solid var(--indigo-2); outline-offset:2px; border-radius:6px; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* ── header ── */
.top{
  flex:none; display:flex; align-items:center; gap:12px;
  padding:14px var(--pad); border-bottom:1px solid var(--hair);
  background:rgba(7,7,12,.86); backdrop-filter:blur(12px);
  position:sticky; top:0; z-index:10;
}
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; margin-right:auto; }
.mark{ width:22px; height:22px; border-radius:6px; flex:none; }
.brand__word{ font-size:14px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--white); }
.badge{
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--indigo-3); border:1px solid rgba(109,102,240,.35);
  border-radius:999px; padding:4px 10px; white-space:nowrap;
}
.badge[data-mode="sample"]{ color:var(--warn); border-color:rgba(230,180,92,.4); }

/* ── chat area ── */
.chat{
  flex:1 1 auto; overflow-y:auto;
  width:100%; max-width:var(--maxw); margin-inline:auto;
  padding:clamp(20px,5vw,40px) var(--pad) 8px;
  display:flex; flex-direction:column; gap:18px;
}
.intro{ margin:auto 0; padding-block:clamp(12px,5vh,48px); }
.intro__h{
  font-size:clamp(30px,6vw,46px); font-weight:600; letter-spacing:-.03em;
  color:var(--white); margin:0 0 14px; line-height:1.05;
}
.intro__p{ margin:0 0 10px; font-size:clamp(15px,2vw,17px); max-width:52ch; }
.intro__p strong{ color:var(--white); font-weight:600; }
.intro__note{ margin:0; font-size:13.5px; color:var(--tx-3); }

.chips{ display:flex; flex-wrap:wrap; gap:9px; margin-top:26px; }
.chip{
  font:inherit; font-size:13.5px; color:var(--tx); cursor:pointer;
  background:rgba(79,70,229,.07); border:1px solid var(--hair-2);
  border-radius:999px; padding:9px 15px;
  transition:border-color .2s ease, background .2s ease, color .2s ease;
}
.chip:hover{ border-color:var(--indigo-2); color:var(--white); background:rgba(79,70,229,.14); }

/* ── messages ── */
.msg{ display:flex; flex-direction:column; gap:8px; max-width:100%; }
.msg--me{ align-items:flex-end; }
.bubble{
  padding:12px 16px; border-radius:14px; max-width:min(100%,54ch);
  font-size:15.5px; line-height:1.58; overflow-wrap:anywhere;
}
.msg--me .bubble{ background:var(--indigo); color:#fff; border-bottom-right-radius:5px; }
.msg--ai .bubble{
  background:var(--ink-2); border:1px solid var(--hair); color:var(--tx);
  border-bottom-left-radius:5px;
}
.msg--err .bubble{ border-color:rgba(239,107,107,.4); color:#f3b6b6; }

.meta{
  font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--tx-3);
}

/* ── kartu hasil ── */
.card{
  border:1px solid var(--hair-2); border-radius:14px; overflow:hidden;
  background:linear-gradient(180deg,var(--ink-3),var(--ink-2));
  max-width:min(100%,58ch);
}
.card__head{
  display:flex; align-items:center; gap:10px;
  padding:11px 15px; border-bottom:1px solid var(--hair);
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--tx-3);
}
.card__tag{
  margin-left:auto; font-size:9.5px; letter-spacing:.14em; padding:3px 8px;
  border-radius:999px; border:1px solid rgba(230,180,92,.4); color:var(--warn);
}
.card__rows{ margin:0; padding:6px 15px 12px; }
.card__rows > div{
  display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  padding:8px 0; border-bottom:1px dashed rgba(255,255,255,.055);
}
.card__rows > div:last-child{ border-bottom:0; }
.card__rows dt{ font-family:var(--mono); font-size:12px; color:var(--tx-3); }
.card__rows dd{ margin:0; font-family:var(--mono); font-size:12.5px; color:var(--white); text-align:right; overflow-wrap:anywhere; }

/* skor risiko */
.score{ display:flex; align-items:center; gap:14px; padding:15px; }
.score__n{ font-size:34px; font-weight:700; letter-spacing:-.03em; line-height:1; }
.score__n[data-band="low"]{ color:var(--pos); }
.score__n[data-band="medium"]{ color:var(--warn); }
.score__n[data-band="high"]{ color:var(--bad); }
.score__l{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--tx-3); }
.reasons{ list-style:none; margin:0; padding:0 15px 14px; display:grid; gap:9px; }
.reasons li{ position:relative; padding-left:20px; font-size:13.5px; color:var(--tx-2); line-height:1.5; }
.reasons li::before{ content:""; position:absolute; left:0; top:9px; width:9px; height:1px; background:var(--pos); }
.reasons li[data-bad="true"]::before{ background:var(--bad); }

/* ── composer ── */
.composer{
  flex:none; position:sticky; bottom:0; z-index:10;
  width:100%; max-width:var(--maxw); margin-inline:auto;
  display:flex; gap:10px; align-items:center;
  padding:12px var(--pad);
  background:linear-gradient(180deg,rgba(7,7,12,0),var(--ink) 28%);
}
.composer__in{
  flex:1; min-width:0; font:inherit; font-size:15.5px; color:var(--white);
  background:var(--ink-2); border:1px solid var(--hair-2);
  border-radius:14px; padding:14px 16px;
  transition:border-color .2s ease;
}
.composer__in::placeholder{ color:var(--tx-3); }
.composer__in:focus{ outline:none; border-color:var(--indigo-2); }
.composer__go{
  flex:none; width:46px; height:46px; display:grid; place-items:center;
  border:0; border-radius:13px; background:var(--indigo); color:#fff; cursor:pointer;
  transition:background .2s ease, opacity .2s ease;
}
.composer__go:hover:not(:disabled){ background:var(--indigo-2); }
.composer__go:disabled{ opacity:.45; cursor:not-allowed; }

.legal{
  flex:none; margin:0; padding:0 var(--pad) 16px;
  width:100%; max-width:var(--maxw); margin-inline:auto;
  font-size:11.5px; line-height:1.55; color:var(--tx-3);
}

/* ── indikator mengetik ── */
.dots{ display:inline-flex; gap:4px; align-items:center; height:1.2em; }
.dots i{
  width:5px; height:5px; border-radius:50%; background:var(--tx-3);
  animation:blink 1.3s infinite ease-in-out;
}
.dots i:nth-child(2){ animation-delay:.18s; }
.dots i:nth-child(3){ animation-delay:.36s; }
@keyframes blink{ 0%,80%,100%{ opacity:.25 } 40%{ opacity:1 } }

@media (prefers-reduced-motion: reduce){
  .dots i{ animation:none; opacity:.6; }
  *{ transition:none !important; }
}