/* The AI assistant page. Loaded in the order web/index.html lists them; the order is the cascade. */
/* AI assistant — minimal, ChatGPT-clean */
#aiPanel { border:none; box-shadow:none; background:transparent; padding:0; }
#aiPanel:hover { box-shadow:none; }
/* full-page single column; body centers hero+input until a chat starts, then top-aligns and the chat fills */
.ai-main { min-width:0; display:flex; flex-direction:column; min-height:calc(var(--vh) - 120px); }
/* chat view: bound the height so #aiChat is the ONLY scroller and the composer stays pinned at the bottom (stable, never drifts) */
.ai-main.has-chat { height:calc(var(--vh) - 120px); }
.ai-body { display:flex; flex-direction:column; flex:1; min-height:0; }
.ai-main:not(.has-chat) .ai-body { justify-content:center; }
.ai-inputbar { flex:none; }
/* hero + starters collapse out (animated) once a conversation begins — full page goes to the chat */
#aiHero, .ai-starters { transition:opacity .3s var(--ease,ease), transform .32s var(--ease,ease), max-height .38s var(--ease,ease), margin .3s var(--ease,ease); max-height:520px; }
.ai-main.has-chat #aiHero, .ai-main.has-chat .ai-starters { opacity:0; transform:translateY(-10px); max-height:0; margin-top:0; margin-bottom:0; overflow:hidden; pointer-events:none; }
/* compact usage tracker — quiet, scannable numbers, never distracting */
.ai-usage { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:14px 16px; margin-bottom:22px; border:1px solid var(--line); border-radius:var(--r-lg); background:#fff; box-shadow:var(--e-1); }
.ai-usage-main { flex:1; min-width:0; }
.ai-meters { display:flex; gap:28px; flex-wrap:wrap; }
.ai-meter { min-width:140px; }
.ai-meter-top { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:6px; }
.ai-meter-label { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--faint); }
.ai-meter-label svg { width:13px; height:13px; }
.ai-meter-val { display:inline-flex; align-items:baseline; gap:4px; }
.ai-num { display:inline-block; font-size:18px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; line-height:1; }
.ai-meter-cap { font-size:12px; color:var(--faint); font-variant-numeric:tabular-nums; }
.ai-bar { height:5px; border-radius:var(--r-pill); background:var(--line); overflow:hidden; }
.ai-bar i { display:block; height:100%; width:0; border-radius:inherit; background:linear-gradient(90deg,var(--accent),var(--accent2));
  transition:width .55s cubic-bezier(.2,.8,.2,1); }
.ai-bar i.full { width:100%; opacity:.35; }
.ai-meter-note { display:inline-block; margin-top:5px; font-size:11px; font-weight:600; color:var(--accent); }
.ai-clear { flex:none; border:1px solid var(--line); background:#fff; color:var(--muted); font:inherit; font-size:13px; font-weight:600;
  padding:7px 14px; border-radius:var(--r-pill); cursor:pointer; transition:background var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.ai-clear:hover:not(:disabled) { background:var(--bad-soft); color:var(--bad); border-color:var(--bad-line); }
.ai-clear:disabled { opacity:.5; cursor:default; }
#aiHero { padding:0 8px; text-align:center; }
.ai-mark { width:48px; height:48px; margin:0 auto 18px; border-radius:14px; display:grid; place-items:center; color:#fff; background:var(--accent); box-shadow:var(--e-2); }
.ai-mark svg { width:26px; height:26px; }
.ai-hero-title { text-align:center; font-size:34px; font-weight:700; letter-spacing:-.035em; margin:0 0 8px; color:var(--ink); background:none; -webkit-text-fill-color:currentColor; }
#aiHero .ai-hero-sub { text-align:center; max-width:460px; margin:0 auto 24px; color:var(--muted); line-height:1.6; }
/* full-page conversation: chat area grows and fills the width once a chat starts */
#aiChat { display:flex; flex-direction:column; gap:20px; width:100%; max-width:768px; margin:0 auto; padding:4px 2px 8px; overflow:auto; }
/* ChatGPT-style messages: assistant = borderless plain prose full-width; user = light-grey right-aligned pill */
.ai-message { line-height:1.65; white-space:pre-wrap; word-break:break-word; animation:bubbleIn .3s cubic-bezier(.2,.8,.2,1) both; position:relative; }
.ai-message--assistant { align-self:stretch; width:100%; background:transparent; color:var(--ink); padding:2px 0; }
.ai-message--user { align-self:flex-end; max-width:72%; background:var(--ai-user-bg); color:var(--ink); border-radius:22px; padding:10px 18px; }
.ai-author { font-size:11px; opacity:.7; margin-bottom:3px; }
.ai-copy { position:absolute; left:0; bottom:-26px; display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px;
  border:none; background:transparent; color:var(--faint); border-radius:8px; cursor:pointer; opacity:0; transition:opacity var(--t-fast), background var(--t-fast), color var(--t-fast); }
.ai-copy svg { width:15px; height:15px; }
.ai-message--assistant:hover .ai-copy, .ai-copy:focus-visible { opacity:1; }
.ai-copy:hover { background:var(--line-soft); color:var(--ink); }
.ai-main.has-chat #aiChat { flex:1; min-height:0; padding-top:8px; animation:chatIn .34s var(--ease,ease) both; }
@keyframes chatIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
.ai-inputbar { display:flex; align-items:center; gap:8px; width:100%; max-width:768px; margin:0 auto; min-height:56px;
  background:#fff; border:1px solid var(--line-strong); border-radius:24px; padding:8px 8px 8px 20px;
  box-shadow:var(--e-2); transition:border-color var(--t-fast), box-shadow var(--t-fast); }
.ai-inputbar:focus-within { border-color:var(--accent); box-shadow:var(--e-2), var(--e-focus); }
.ai-inputbar input { flex:1; border:none; outline:none; background:transparent; font:inherit; font-size:15px; color:var(--ink); padding:9px 2px; }
.ai-sendbtn { flex:none; width:38px; height:38px; border-radius:50%; border:none; cursor:pointer; color:#fff;
  background:var(--accent); display:grid; place-items:center; transition:background var(--t-fast), transform .05s; }
.ai-sendbtn:hover:not(:disabled) { background:var(--accent2); } .ai-sendbtn:active { transform:translateY(1px); }
.ai-sendbtn:disabled { background:var(--line-strong); cursor:default; } .ai-sendbtn svg { width:18px; height:18px; }
.ai-eg { display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--line); border-radius:12px;
  padding:12px 14px; font:inherit; font-size:13px; line-height:1.4; text-align:left; color:var(--ink); cursor:pointer; box-shadow:none; }
.ai-eg:hover { border-color:var(--accent); background:var(--accent-soft); }
.ai-eg .ic { flex:none; width:28px; height:28px; border-radius:8px; display:grid; place-items:center; color:var(--accent); background:var(--accent-soft); }
.ai-eg .ic svg { width:16px; height:16px; }
/* full-width single column — rail removed; starters are chips under the input (empty state only) */
.ai-layout { display:block; }
.ai-starters { margin-top:20px; }
.ai-starters .ai-suggestions { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; max-width:768px; margin:0 auto; }
.ai-starters .ai-eg { flex:0 1 auto; max-width:100%; border-radius:var(--r-pill); padding:9px 15px; font-size:12.5px; }
@media (max-width:900px){ .ai-main{ min-height:calc(var(--vh) - 96px); } .ai-main:not(.has-chat) .ai-body{ padding-top:3vh; } }
@media (max-width:560px){ .ai-hero-title{ font-size:26px; } .ai-usage{ padding:12px 14px; } .ai-message--user{ max-width:88%; } }
/* ---------- assistant animations ---------- */
@keyframes bubbleIn { from { opacity:0; transform:translateY(10px) scale(.98); } to { opacity:1; transform:none; } }
.ai-caret { display:inline-block; width:8px; height:1.05em; margin-left:3px; vertical-align:-2px; border-radius:2px; background:var(--accent); animation:caretBlink 1.05s steps(1) infinite; }
@keyframes caretBlink { 0%,50% { opacity:1; } 50.01%,100% { opacity:0; } }
.ai-mark { animation:bubbleIn .5s cubic-bezier(.2,.8,.2,1) both; }
.ai-hero-sub { animation:bubbleIn .5s cubic-bezier(.2,.8,.2,1) both; animation-delay:.22s; }
.ai-sendbtn svg { transition:transform var(--t-fast); }
.ai-sendbtn:hover:not(:disabled) svg { transform:translateY(-2px); }
.ai-eg { transition:border-color var(--t-fast), background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast); }
.ai-starters .ai-eg:hover { transform:translateY(-1px); border-color:var(--accent); box-shadow:var(--e-1); }
/* fancy greeting: "Hello," lifts in, the analyst name sweeps in with a gradient shimmer */
.ai-greet-hi { display:inline-block; animation:greetHi .55s cubic-bezier(.2,.8,.2,1) both; }
.ai-greet-name { display:inline-block; font-weight:800; background:linear-gradient(90deg,var(--accent),var(--accent2) 45%,var(--accent) 90%);
  background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
  animation:greetName .6s cubic-bezier(.2,.8,.2,1) .16s both, greetShimmer 2.6s ease-in-out .8s 1; }
@keyframes greetHi { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@keyframes greetName { from { opacity:0; transform:translateY(12px) scale(.96); } to { opacity:1; transform:none; } }
@keyframes greetShimmer { 0% { background-position:100% 0; } 100% { background-position:-120% 0; } }
/* staggered rise-in for starter chips */
@keyframes railIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.ai-starters .ai-eg { animation:railIn .4s cubic-bezier(.2,.8,.2,1) both; }
.ai-starters .ai-eg:nth-child(1){animation-delay:.28s} .ai-starters .ai-eg:nth-child(2){animation-delay:.33s}
.ai-starters .ai-eg:nth-child(3){animation-delay:.38s} .ai-starters .ai-eg:nth-child(4){animation-delay:.43s}
.ai-starters .ai-eg:nth-child(5){animation-delay:.48s} .ai-starters .ai-eg:nth-child(6){animation-delay:.53s}
/* data blocks (verified BINs / cards / analytics) rise in */
.ai-data { animation:bubbleIn .34s cubic-bezier(.2,.8,.2,1) both; }
/* clearing the chat: brief fade before re-render */
#aiChat.clearing { animation:chatClear .26s ease forwards; }
@keyframes chatClear { to { opacity:0; transform:translateY(6px); } }
/* usage count changed: subtle one-shot highlight (reduced-motion reset neutralizes it) */
.ai-num.bump { animation:numBump .5s var(--ease, ease); }
@keyframes numBump { 0% { transform:scale(1); } 32% { transform:scale(1.16); color:var(--accent); } 100% { transform:scale(1); } }
.tool-chip.run .spin { animation:spin .7s linear infinite; }
/* toggle switch */
.switch { display:inline-flex; align-items:center; cursor:pointer; vertical-align:middle; }
.switch input { position:absolute; opacity:0; width:0; height:0; }
.switch-track { width:36px; height:20px; border-radius:999px; background:var(--line-strong); position:relative; transition:background var(--t-fast); }
.switch-thumb { position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:var(--e-1); transition:transform var(--t-fast); }
.switch input:checked + .switch-track { background:var(--accent); }
.switch input:checked + .switch-track .switch-thumb { transform:translateX(16px); }
.switch input:disabled + .switch-track { opacity:.45; cursor:not-allowed; }
.switch input:focus-visible + .switch-track { box-shadow:var(--e-focus); }
.lim-input { width:78px; padding:6px 8px; font-size:12.5px; border-radius:var(--r-sm); text-align:right; font-variant-numeric:tabular-nums; }