/* =====================================================================
   BADRI.AI — chat widget (see assets/badri-ai.js)
   Uses the site's :root tokens from index.html, including --rail, which
   index.html defines and which reserves the column this panel docks into
   at 1360px and up. The site's global prefers-reduced-motion rule also
   covers these animations.
   ===================================================================== */

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

/* --- launcher --- */
.bai-launcher{
  position:fixed; right:20px; bottom:calc(20px + env(safe-area-inset-bottom, 0px)); z-index:55;
  width:58px; height:58px; border-radius:50%; border:0; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,var(--gold-light),var(--gold)); color:#1a1205;
  box-shadow:0 14px 34px -12px var(--glow-gold),0 0 0 1px rgba(255,210,122,0.35);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease);
}
.bai-launcher:hover{ transform:translateY(-3px); box-shadow:0 20px 44px -12px var(--glow-gold),0 0 0 1px var(--gold-light); }
.bai-launcher svg{ width:24px; height:24px; }
.bai-launcher[aria-expanded="true"]{ transform:rotate(90deg); }
/* Only where the mobile menu itself exists (its burger is hidden above 920px in
   index.html). Unscoped, a menu-open class left behind by a resize kept the launcher
   hidden on a viewport that has no way to clear it. */
@media (max-width:920px){ body.menu-open .bai-launcher{ display:none; } }

/* --- panel --- */
.bai-panel{
  position:fixed; right:20px; bottom:calc(92px + env(safe-area-inset-bottom, 0px)); z-index:56;
  width:380px; height:560px; max-height:calc(100vh - 120px);
  display:flex; flex-direction:column; overflow:hidden;
  border:1px solid var(--line); border-radius:20px;
  background:linear-gradient(180deg,rgba(21,28,40,0.94),rgba(12,16,24,0.96));
  backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%);
  box-shadow:0 30px 70px -20px rgba(0,0,0,0.7),0 0 0 1px rgba(242,176,67,0.06);
  font-family:var(--font-body); color:var(--text);
  animation:bai-in .32s var(--ease);
}
.bai-panel[hidden]{ display:none; }
.bai-panel:focus{ outline:none; }
@keyframes bai-in{ from{ opacity:0; transform:translateY(14px) scale(0.98); } to{ opacity:1; transform:none; } }

.bai-head{ display:flex; align-items:flex-start; gap:12px; padding:18px 18px 14px; border-bottom:1px solid var(--line-2); }
.bai-head__dot{ width:9px; height:9px; margin-top:9px; border-radius:50%; flex:none; background:var(--mint); box-shadow:0 0 8px var(--glow-mint); }
.bai-head__text{ flex:1; min-width:0; }
.bai-head h2{ margin:0; font-family:var(--font-display); font-weight:600; font-size:1.2rem; letter-spacing:-0.01em; line-height:1.3; }
.bai-head p{ margin:3px 0 0; font-family:var(--font-mono); font-size:0.66rem; line-height:1.5; color:var(--text-3); }
.bai-close{ flex:none; width:32px; height:32px; border-radius:9px; border:1px solid var(--line); background:transparent; color:var(--text-2);
  display:flex; align-items:center; justify-content:center; transition:all .2s var(--ease); }
.bai-close:hover{ border-color:var(--gold-deep); color:var(--gold-light); }
.bai-close svg{ width:15px; height:15px; }

/* --- messages --- */
.bai-log{ flex:1; overflow-y:auto; padding:16px 16px 6px; display:flex; flex-direction:column; gap:10px; overscroll-behavior:contain; }
.bai-msg{ max-width:88%; padding:10px 13px; border-radius:14px; font-size:0.9rem; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; }
.bai-msg--assistant{ align-self:flex-start; background:var(--surface-2); border:1px solid var(--line-2); border-bottom-left-radius:5px; color:var(--text); }
.bai-msg--user{ align-self:flex-end; background:rgba(242,176,67,0.12); border:1px solid rgba(242,176,67,0.28); border-bottom-right-radius:5px; color:var(--text); }
.bai-msg--error{ align-self:flex-start; background:rgba(255,140,107,0.08); border:1px solid rgba(255,140,107,0.4); color:var(--text-2); }
.bai-msg strong{ color:var(--gold-light); font-weight:600; }
.bai-msg a{ color:var(--mint-light); text-decoration:underline; text-decoration-color:rgba(166,242,225,0.4); text-underline-offset:2px; }
.bai-msg a:hover{ text-decoration-color:var(--mint-light); }
.bai-msg__note{ color:var(--text-3); font-style:italic; }
.bai-msg[aria-busy="true"]:empty::after{ content:'•••'; letter-spacing:3px; color:var(--text-3); animation:bai-pulse 1.2s ease-in-out infinite; }
@keyframes bai-pulse{ 50%{ opacity:0.35; } }

/* --- suggestion chips --- */
.bai-chips{ display:flex; flex-wrap:wrap; gap:7px; padding:6px 16px 10px; }
.bai-chips[hidden]{ display:none; }
.bai-chip{ font-family:var(--font-mono); font-size:0.7rem; color:var(--text-2); background:rgba(255,255,255,0.015);
  border:1px solid var(--line); border-radius:999px; padding:6px 11px; transition:all .2s var(--ease); }
.bai-chip:hover{ border-color:var(--gold-deep); color:var(--gold-light); }

/* --- composer --- */
.bai-form{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:6px 8px; padding:12px 14px calc(14px + env(safe-area-inset-bottom, 0px)); border-top:1px solid var(--line-2); }
.bai-input{ flex:1; min-width:0; resize:none; min-height:42px; max-height:calc(1.5em * 5 + 22px); padding:10px 13px; border-radius:12px;
  border:1px solid var(--line); background:var(--ink-2); color:var(--text); font:inherit; font-size:0.9rem; line-height:1.5; }
.bai-input::placeholder{ color:var(--text-4); }
.bai-input:focus{ outline:none; border-color:var(--gold-deep); box-shadow:0 0 0 3px rgba(242,176,67,0.12); }
.bai-input:disabled{ opacity:.55; cursor:not-allowed; }
.bai-send{ flex:none; width:42px; height:42px; border-radius:12px; border:0; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,var(--gold),var(--gold-deep)); color:#1a1205; transition:transform .2s var(--ease),opacity .2s; }
.bai-send:hover{ transform:translateY(-1px); }
.bai-send svg{ width:17px; height:17px; }
.bai-send .bai-icon-stop{ display:none; }
.bai-send.is-busy{ background:var(--surface-3); color:var(--coral); border:1px solid rgba(255,140,107,0.45); }
.bai-send.is-busy .bai-icon-send{ display:none; }
.bai-send.is-busy .bai-icon-stop{ display:block; }
/* wraps to its own line under the textarea; aria-hidden in the JS, so this is purely visual */
.bai-count{ flex:0 0 100%; text-align:right; font-family:var(--font-mono); font-size:0.66rem; line-height:1; color:var(--text-3); transition:color .2s var(--ease); }
.bai-count.is-near{ color:var(--gold); }

/* keep a text caret in the input while the site's star cursor hides the native one */
body.cursor-custom .bai-panel textarea:not(:disabled){ cursor:text !important; }

/* --- mobile: full-screen sheet --- */
@media (max-width:560px){
  .bai-panel{ inset:0; width:100%; height:var(--bai-vh,100dvh); max-height:none; border-radius:0; border:0; }
  .bai-input{ font-size:16px; } /* prevents iOS zoom on focus */
  html.bai-locked, html.bai-locked body{ overflow:hidden; }
}

/* --- desktop: docked as a full-height sidebar ---
   Matches the --rail breakpoint in index.html. Keep the two in step. */
@media (min-width:1360px){
  html.bai-rail-open .bai-panel{
    top:0; right:0; bottom:0; left:auto;
    width:var(--rail); height:auto; max-height:none;
    border:0; border-left:1px solid var(--line); border-radius:0;
    box-shadow:none;          /* an edge panel would bleed a halo onto the content */
    animation:none;           /* the rail doesn't fly in; the layout snaps */
  }
  /* the floating panel contains its scroll; a permanent full-height rail
     must not, or the wheel goes dead over a fifth of the screen */
  html.bai-rail-open .bai-log{ overscroll-behavior:auto; }
  html.bai-rail-open .bai-launcher{ display:none; }
}

@media print{
  .bai-panel,.bai-launcher{ display:none !important; }
  html{ --rail:0px; }
}