/* ============================================================================
   Guru — the landing-page research chatbot.
   A small iridescent launcher pinned bottom-right of the hero that opens into
   a glass chat dock. Speaks the landing's own language: Inter/Poppins, the one
   --iris signature, Apple-restrained glass. Inherits every token from
   landing.css, so light/dark follow the site toggle automatically.
   ========================================================================== */

/* The site-wide theme toggle (theme.js) already owns the bottom-right corner at
   bottom:20px/right:20px/46px/z-index:9000. Guru stacks directly above it, with
   the two orbs centred on the same vertical line, and the dock hides the toggle
   while it's open so nothing floats over the composer. */
:root{ --guru-r:17px; --guru-b:78px; }
body.guru-open #theme-toggle{ opacity:0; pointer-events:none; transition:opacity .2s; }

/* ░ launcher — small orb that grows into a pill on hover ░ */
.guru-fab{ position:fixed; right:var(--guru-r); bottom:var(--guru-b);
  z-index:70; display:flex; align-items:center; gap:.55rem; height:52px; padding:0 6px;
  border:1px solid var(--line); border-radius:999px; cursor:pointer;
  background:rgba(255,255,255,.82); backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  box-shadow:var(--shadow-m); font-family:var(--font); color:var(--ink);
  transform:translateY(0) scale(1); opacity:1;
  transition:transform .4s var(--ease), opacity .3s var(--ease), box-shadow .3s var(--ease), padding .3s var(--ease); }
.guru-fab:hover{ transform:translateY(-2px); box-shadow:var(--shadow-l); padding-right:1.05rem; }
.guru-fab.hide{ transform:translateY(140%) scale(.9); opacity:0; pointer-events:none; }
[data-theme="dark"] .guru-fab{ background:rgba(20,20,26,.78); }

/* the mark: an iridescent disc with a slow-turning sheen */
.guru-fab .gm{ position:relative; width:40px; height:40px; flex:none; border-radius:50%;
  background:var(--iris); display:grid; place-items:center; overflow:hidden;
  color:#fff; font-size:1.05rem; line-height:1; }
.guru-fab .gm::after{ content:""; position:absolute; inset:-40%;
  background:conic-gradient(from 0deg,transparent 0 55%,rgba(255,255,255,.55) 72%,transparent 88%);
  animation:guru-turn 4.5s linear infinite; }
.guru-fab .gm i{ position:relative; z-index:1; font-style:normal;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
@keyframes guru-turn{ to{ transform:rotate(360deg); } }

/* the label reveals on hover only — the resting state stays a small orb */
.guru-fab .gl{ max-width:0; overflow:hidden; white-space:nowrap; font-size:.86rem;
  font-weight:500; letter-spacing:-.01em; opacity:0;
  transition:max-width .34s var(--ease), opacity .24s var(--ease); }
.guru-fab:hover .gl,.guru-fab:focus-visible .gl{ max-width:150px; opacity:1; }

/* a soft breathing halo so the eye finds it without it shouting */
.guru-fab .gh{ position:absolute; inset:-6px; border-radius:999px; z-index:-1;
  background:var(--iris); filter:blur(14px); opacity:.28; animation:guru-breathe 5s ease-in-out infinite; }
@keyframes guru-breathe{ 50%{ opacity:.5; transform:scale(1.06); } }

/* first-visit teaser — one line, dismissible, never nags twice */
.guru-teaser{ position:fixed; right:calc(var(--guru-r) + 4px); bottom:calc(var(--guru-b) + 62px);
  z-index:70; max-width:min(262px,calc(100vw - 2.4rem)); padding:.7rem .85rem;
  border:1px solid var(--line); border-radius:14px 14px 4px 14px;
  background:rgba(255,255,255,.9); backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px); box-shadow:var(--shadow-m);
  font-family:var(--font); font-size:.8rem; line-height:1.45; color:var(--soft);
  cursor:pointer; transform:translateY(8px) scale(.96); opacity:0; pointer-events:none;
  transition:transform .45s var(--ease), opacity .35s var(--ease); }
.guru-teaser.show{ transform:none; opacity:1; pointer-events:auto; }
.guru-teaser b{ display:block; color:var(--ink); font-weight:600; margin-bottom:.1rem; }
.guru-teaser .gt-x{ position:absolute; top:4px; right:6px; border:none; background:none;
  color:var(--muted); font-size:.95rem; line-height:1; cursor:pointer; padding:2px; }
.guru-teaser .gt-x:hover{ color:var(--ink); }
[data-theme="dark"] .guru-teaser{ background:rgba(20,20,26,.86); }

/* ░ dock ░ */
.guru-dock{ position:fixed; right:var(--guru-r); bottom:var(--guru-b);
  z-index:9100; display:flex; flex-direction:column; overflow:hidden;
  /* the 9rem reserve keeps the dock's top edge clear of the sticky nav even on
     a short laptop viewport (nav ≈56px; 144px − 78px bottom offset = 66px gap) */
  width:min(392px,calc(100vw - 2rem)); height:min(600px,calc(100vh - 9rem));
  border:1px solid var(--line); border-radius:22px;
  background:var(--glass); backdrop-filter:saturate(180%) blur(28px);
  -webkit-backdrop-filter:saturate(180%) blur(28px); box-shadow:var(--shadow-l);
  font-family:var(--font); color:var(--ink);
  transform-origin:100% 100%; transform:translateY(14px) scale(.94); opacity:0;
  pointer-events:none; visibility:hidden;
  transition:transform .42s var(--ease), opacity .3s var(--ease), visibility 0s linear .42s; }
.guru-dock.open{ transform:none; opacity:1; pointer-events:auto; visibility:visible;
  transition:transform .42s var(--ease), opacity .3s var(--ease), visibility 0s; }
[data-theme="dark"] .guru-dock{ background:rgba(14,14,19,.82); }

/* header */
.guru-head{ display:flex; align-items:center; gap:.6rem; flex:none;
  padding:.7rem .8rem; border-bottom:1px solid var(--line); }
.guru-head .gm{ position:relative; width:32px; height:32px; flex:none; border-radius:50%;
  background:var(--iris); display:grid; place-items:center; color:#fff; font-size:.9rem; }
.guru-id{ flex:1; min-width:0; }
.guru-id b{ display:block; font-family:var(--disp); font-weight:600; font-size:.92rem;
  letter-spacing:-.01em; line-height:1.2; }
.guru-id span{ display:flex; align-items:center; gap:.32rem; font-size:.68rem; color:var(--muted); }
.guru-id span i{ width:5px; height:5px; border-radius:50%; background:var(--good);
  box-shadow:0 0 0 0 rgba(31,157,87,.5); animation:guru-pulse 2.4s ease-out infinite; }
@keyframes guru-pulse{ 70%{ box-shadow:0 0 0 6px rgba(31,157,87,0); } 100%{ box-shadow:0 0 0 0 rgba(31,157,87,0); } }

.guru-ico{ flex:none; width:30px; height:30px; display:grid; place-items:center;
  border:none; background:none; border-radius:9px; cursor:pointer;
  color:var(--muted); font-size:1rem; line-height:1; transition:.2s var(--ease); }
.guru-ico:hover{ background:rgba(127,127,140,.12); color:var(--ink); }

/* mode menu — the copilot's five personas, kept out of the way until asked for */
.guru-mode{ position:relative; flex:none; }
.guru-mode-btn{ display:inline-flex; align-items:center; gap:.3rem; padding:.28rem .5rem;
  border:1px solid var(--line); border-radius:999px; background:none; cursor:pointer;
  font-family:var(--font); font-size:.7rem; font-weight:500; color:var(--soft);
  transition:.2s var(--ease); white-space:nowrap; }
.guru-mode-btn:hover{ color:var(--ink); border-color:var(--line-2); }
.guru-mode-btn .ch{ font-size:.55rem; opacity:.7; }
.guru-mode-list{ position:absolute; top:calc(100% + 6px); right:0; z-index:3;
  width:190px; padding:.3rem; border:1px solid var(--line); border-radius:14px;
  background:var(--card); box-shadow:var(--shadow-m); display:none; }
.guru-mode-list.open{ display:block; }
.guru-mode-list button{ display:block; width:100%; text-align:left; border:none; background:none;
  padding:.44rem .55rem; border-radius:9px; cursor:pointer; font-family:var(--font);
  font-size:.76rem; color:var(--ink); transition:background .15s; }
.guru-mode-list button:hover{ background:rgba(127,127,140,.12); }
.guru-mode-list button small{ display:block; color:var(--muted); font-size:.66rem; margin-top:.05rem; }
.guru-mode-list button.on{ background:var(--iris-soft); }
[data-theme="dark"] .guru-mode-list button.on{ background:rgba(123,79,196,.28); }

/* ░ transcript ░ */
.guru-body{ flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  padding:.9rem .8rem 1rem; scroll-behavior:smooth; }
.guru-body::-webkit-scrollbar{ width:8px; }
.guru-body::-webkit-scrollbar-thumb{ background:rgba(127,127,140,.28); border-radius:8px;
  border:2px solid transparent; background-clip:padding-box; }

/* welcome */
.guru-welcome{ padding:.4rem .2rem 0; }
.guru-welcome h4{ font-family:var(--disp); font-weight:600; font-size:1.06rem;
  letter-spacing:-.02em; margin-bottom:.3rem; }
.guru-welcome p{ font-size:.82rem; color:var(--soft); line-height:1.55; margin-bottom:.8rem; }
.guru-seed{ display:flex; flex-direction:column; gap:.4rem; }
.guru-seed button{ text-align:left; padding:.55rem .7rem; border:1px solid var(--line);
  border-radius:12px; background:none; cursor:pointer; font-family:var(--font);
  font-size:.79rem; color:var(--ink); line-height:1.4; transition:.2s var(--ease); }
.guru-seed button:hover{ border-color:var(--line-2); transform:translateX(2px); }
.guru-seed button span{ color:var(--muted); margin-right:.4rem; }

/* bubbles */
.guru-msg{ display:flex; margin-bottom:.7rem; animation:guru-in .45s var(--ease) both; }
@keyframes guru-in{ from{ opacity:0; transform:translateY(8px); } }
.guru-msg.me{ justify-content:flex-end; }
.guru-bub{ max-width:88%; padding:.6rem .8rem; border-radius:16px; font-size:.83rem; line-height:1.6; }
.guru-msg.me .guru-bub{ background:var(--ink); color:var(--bg); border-bottom-right-radius:5px; }
.guru-msg.bot .guru-bub{ background:var(--card); border:1px solid var(--line);
  border-bottom-left-radius:5px; box-shadow:var(--shadow-s); }
[data-theme="dark"] .guru-msg.bot .guru-bub{ background:rgba(255,255,255,.05); }
.guru-bub p{ margin:0 0 .5rem; } .guru-bub p:last-child{ margin-bottom:0; }
.guru-bub ul{ margin:.2rem 0 .5rem 1rem; } .guru-bub li{ margin-bottom:.22rem; }
.guru-bub h1,.guru-bub h2,.guru-bub h3{ font-family:var(--disp); font-size:.88rem;
  font-weight:600; margin:.5rem 0 .3rem; letter-spacing:-.01em; }
.guru-bub code{ font-family:var(--mono); font-size:.76rem; padding:.08em .34em;
  border-radius:5px; background:rgba(127,127,140,.14); }
.guru-bub a{ color:var(--navy); text-decoration:underline; text-underline-offset:2px; }

/* thinking dots */
.guru-dots{ display:flex; gap:4px; padding:.2rem 0; }
.guru-dots i{ width:6px; height:6px; border-radius:50%; background:var(--muted);
  animation:guru-bounce 1.2s ease-in-out infinite; }
.guru-dots i:nth-child(2){ animation-delay:.15s; } .guru-dots i:nth-child(3){ animation-delay:.3s; }
@keyframes guru-bounce{ 0%,60%,100%{ transform:translateY(0); opacity:.4; } 30%{ transform:translateY(-4px); opacity:1; } }

/* real retrieved literature */
.guru-src{ margin-top:.6rem; padding-top:.55rem; border-top:1px solid var(--line); }
.guru-src-h{ font-size:.64rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); margin-bottom:.35rem; }
.guru-src a,.guru-src div.s{ display:block; font-size:.73rem; line-height:1.45; color:var(--soft);
  padding:.16rem 0; }
.guru-src a:hover{ color:var(--ink); }
.guru-src b{ color:var(--ink); font-weight:500; }

/* ░ the hand-off — the point of the whole bot, so it reads as the payoff of
   the answer rather than a footnote under it ░ */
.guru-next{ margin-top:.65rem; }
.guru-next .gn-k{ display:block; font-size:.62rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); margin-bottom:.3rem; }
/* text-decoration:none wins back the inherited underline from `.guru-bub a`,
   which would otherwise underline the whole card */
.guru-next .gn-go{ position:relative; display:grid; grid-template-columns:1fr auto;
  align-items:center; gap:.1rem .6rem; padding:.6rem .75rem; border-radius:14px;
  border:1px solid transparent; background:var(--iris-soft); overflow:hidden;
  text-decoration:none; transition:transform .22s var(--ease), box-shadow .22s var(--ease); }
.guru-next .gn-go:hover{ transform:translateY(-2px); box-shadow:var(--shadow-m); }
.guru-next .gn-go b{ grid-column:1; font-family:var(--disp); font-weight:600;
  font-size:.83rem; letter-spacing:-.01em; color:#2c1f4a; }
.guru-next .gn-go span{ grid-column:1; font-size:.72rem; line-height:1.45; color:#4a3a6b; }
.guru-next .gn-go i{ grid-column:2; grid-row:1/3; font-style:normal; font-size:.95rem;
  color:#2c1f4a; transition:transform .22s var(--ease); }
.guru-next .gn-go:hover i{ transform:translateX(3px); }
[data-theme="dark"] .guru-next .gn-go{ background:rgba(123,79,196,.26); border-color:rgba(255,255,255,.1); }
[data-theme="dark"] .guru-next .gn-go b,[data-theme="dark"] .guru-next .gn-go i{ color:#f0ecff; }
[data-theme="dark"] .guru-next .gn-go span{ color:#c5bce6; }

/* follow-ups */
.guru-chips{ display:flex; flex-wrap:wrap; gap:.32rem; margin-top:.55rem; }
.guru-chips button{ display:inline-flex; align-items:center; gap:.3rem;
  padding:.3rem .6rem; border:1px solid var(--line); border-radius:999px; background:none;
  cursor:pointer; font-family:var(--font); font-size:.71rem; color:var(--soft);
  line-height:1.3; transition:.2s var(--ease); }
.guru-chips button:hover{ color:var(--ink); border-color:var(--line-2); }

/* an honest note when the answer is ungrounded or the engine is offline */
.guru-note{ font-size:.71rem; color:var(--muted); line-height:1.5; padding:.45rem .6rem;
  border-left:2px solid var(--line-2); margin-top:.5rem; }

/* ░ composer ░ */
.guru-foot{ flex:none; padding:.6rem .7rem .7rem; border-top:1px solid var(--line); }
.guru-composer{ display:flex; align-items:flex-end; gap:.45rem; padding:.35rem .35rem .35rem .75rem;
  border:1px solid var(--line); border-radius:18px; background:var(--card);
  transition:border-color .2s var(--ease); }
.guru-composer:focus-within{ border-color:var(--line-2); }
[data-theme="dark"] .guru-composer{ background:rgba(255,255,255,.05); }
.guru-composer textarea{ flex:1; min-width:0; border:none; background:none; outline:none;
  resize:none; max-height:104px; padding:.42rem 0; font-family:var(--font); font-size:.83rem;
  line-height:1.5; color:var(--ink); }
.guru-composer textarea::placeholder{ color:var(--muted); }
.guru-send{ flex:none; width:32px; height:32px; border:none; border-radius:50%; cursor:pointer;
  background:var(--iris); color:#fff; display:grid; place-items:center; font-size:.86rem;
  transition:.2s var(--ease); }
.guru-send:hover:not(:disabled){ transform:translateY(-1px) scale(1.05); }
.guru-send:disabled{ opacity:.4; cursor:default; }
.guru-legal{ margin-top:.45rem; font-size:.63rem; color:var(--muted); text-align:center; line-height:1.4; }

/* ░ small screens — the dock takes the sheet, the launcher clears the sticky CTA ░ */
/* On phones the sticky CTA bar goes nearly full-width, so the launcher has to
   clear it as well as the theme toggle: 96px sits ~17px above the bar's top
   edge and ~30px above the toggle's. */
@media(max-width:720px){ :root{ --guru-b:96px; } }
@media(max-width:560px){
  .guru-dock{ right:0; bottom:0; width:100vw; height:min(86vh,100dvh - 3rem);
    border-radius:22px 22px 0 0; border-bottom:none; }
}
@media(prefers-reduced-motion:reduce){
  .guru-fab .gm::after,.guru-fab .gh,.guru-id span i{ animation:none; }
  .guru-msg{ animation:none; }
}