/* The guide assistant (feature-guides skill). This one file is linked twice: in the page (for the
   two rules that move the page aside when the panel docks) and inside the assistant's shadow root
   (for everything else — the page's CSS can never reach in). Colours and fonts are the project's
   tokens (theme.css, from guides.config.json → theme), which custom properties carry into the
   shadow root; this file names none. One curve (--ga-ease), three durations
   (120 / 180 / 240 ms), opacity and transform only; reduced motion makes every change instant.
   Targets are 44 px. */

/* ---- in the page ---- */
html.ga-docked{padding-right:480px}
body:has(#guides-assistant){padding-bottom:84px}   /* the launcher never covers the page's last line */
@media (prefers-reduced-motion:no-preference){html{transition:padding-right 240ms cubic-bezier(.2,0,0,1)}}

/* ---- in the shadow root ---- */
:host{all:initial; --ga-ease:cubic-bezier(.2,0,0,1); --ga-good:var(--good); --ga-plan:var(--plan)}
*{box-sizing:border-box}
.ga-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
button{font:inherit; color:inherit; cursor:pointer}
button:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
textarea:focus-visible{outline:none}   /* the composer's own border lights up instead (.ga-compose:focus-within) */

.ga-launch{
  position:fixed; right:18px; bottom:calc(18px + env(safe-area-inset-bottom,0px)); z-index:2147483000;
  display:inline-flex; align-items:center; gap:8px; min-height:48px; padding:0 18px 0 14px;
  border:0; border-radius:999px; background:var(--accent); color:var(--on-accent);
  font-family:var(--body); font-size:15px; font-weight:650;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
}
.ga-launch svg{width:20px; height:20px}
/* two soft rings leave the launcher while the panel is closed — it says «ask me» without a word;
   still on hover and focus, and never under reduced motion */
.ga-launch::before,.ga-launch::after{content:''; position:absolute; inset:0; border-radius:inherit; border:2px solid var(--accent); opacity:0; pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  .ga-launch[aria-expanded="false"]::before{animation:ga-wave 3.2s var(--ga-ease) infinite}
  .ga-launch[aria-expanded="false"]::after{animation:ga-wave 3.2s var(--ga-ease) 1.1s infinite}
  .ga-launch:hover::before,.ga-launch:hover::after,.ga-launch:focus-visible::before,.ga-launch:focus-visible::after{animation:none}
}
@keyframes ga-wave{0%{opacity:.55; transform:scale(1)}70%,100%{opacity:0; transform:scale(1.35,1.6)}}
.ga-launch[hidden]{display:none}
@media (prefers-reduced-motion:no-preference){.ga-launch{transition:transform 120ms cubic-bezier(.2,0,0,1)} .ga-launch:active{transform:scale(.97)}}

.ga-panel{
  position:fixed; top:0; right:0; bottom:0; z-index:2147483001; width:480px; max-width:100vw;
  display:flex; flex-direction:column; background:var(--surface); color:var(--ink);
  border-left:1px solid var(--line); box-shadow:-18px 0 48px rgba(0,0,0,.35);
  font-family:var(--body); font-size:15.5px; line-height:1.55;
  transform:translateX(100%);
}
.ga-panel[hidden]{display:none}
.ga-panel.ga-in{transform:none}
@media (prefers-reduced-motion:no-preference){.ga-panel:not(.ga-instant){transition:transform 240ms cubic-bezier(.2,0,0,1)}}
@media (max-width:1023px){.ga-panel{width:100vw; border-left:0; padding-bottom:env(safe-area-inset-bottom,0px)}}

.ga-head{display:flex; align-items:center; gap:4px; padding:10px 10px 10px 18px; border-bottom:1px solid var(--line)}
.ga-head-t{flex:1; min-width:0}
.ga-head h2{margin:0; font-family:var(--display); font-size:16.5px; font-weight:750; letter-spacing:-.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ga-head-t p{margin:1px 0 0; font-size:12.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ga-ghost{flex:none; min-height:44px; padding:0 8px; border:0; background:none; color:var(--muted); font-size:13px; border-radius:10px; white-space:nowrap}
.ga-icon{width:44px; height:44px; display:grid; place-items:center; border:0; background:none; border-radius:12px; color:var(--ink)}
.ga-icon svg{width:20px; height:20px}
@media (hover:hover){.ga-ghost:hover,.ga-icon:hover{background:var(--surface-2)}}

.ga-log{position:relative; flex:1; overflow:auto; overscroll-behavior:contain; padding:16px 18px; display:flex; flex-direction:column; gap:16px}
.ga-empty{margin:auto 0; color:var(--muted); text-align:center; padding:0 12px}
.ga-msg p{margin:0 0 10px}
.ga-msg p:last-child{margin-bottom:0}
.ga-you{align-self:flex-end; max-width:85%; background:var(--surface-2); padding:10px 14px; border-radius:16px 16px 4px 16px; white-space:pre-wrap}
.ga-bot{align-self:stretch}
.ga-err{align-self:stretch; color:var(--warn)}
.ga-cite{
  display:inline-flex; align-items:center; min-height:28px; max-width:100%; margin:2px 2px; padding:0 10px;
  border:1px solid var(--line); border-radius:999px; background:var(--bg); color:var(--accent);
  font-size:13px; line-height:1.3; text-align:left; vertical-align:baseline; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  position:relative;
}
.ga-cite::after{content:''; position:absolute; inset:-8px 0}   /* a 44 px target around a 28 px chip */
.ga-src{display:flex; flex-wrap:wrap; align-items:center; gap:4px; margin-top:10px}
.ga-src-l{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-right:4px}

/* the three follow-ups: one row that scrolls sideways (the next chip peeks past the edge), so on a
   phone they cost one line of the answer, not three */
.ga-next{display:flex; gap:8px; padding:8px 18px 4px; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none;
  scroll-snap-type:x proximity; scroll-padding-inline:18px}
.ga-next::-webkit-scrollbar{display:none}
.ga-next[hidden]{display:none}
.ga-chip{
  min-height:44px; padding:6px 14px; border:1px solid var(--line); border-radius:14px;
  background:transparent; color:var(--ink); font-size:14px; line-height:1.35; text-align:left;
  flex:none; max-width:78%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; scroll-snap-align:start;
}
@media (hover:hover){.ga-chip:hover{border-color:var(--accent)}}

.ga-compose{margin:8px 14px 6px; padding:6px; border:1px solid var(--line); border-radius:18px; background:var(--bg)}
.ga-compose-in{display:flex; flex-direction:column; gap:6px}
.ga-compose-row{display:flex; align-items:flex-end; gap:6px}
.ga-compose-row .ga-input{padding-left:4px}
.ga-attach{flex:none; width:40px; height:40px; display:grid; place-items:center; border:0; border-radius:12px; background:none; color:var(--muted); position:relative}
.ga-attach::after{content:''; position:absolute; inset:-2px}
.ga-attach svg{width:20px; height:20px}
@media (hover:hover){.ga-attach:hover{background:var(--surface-2); color:var(--ink)}}
.ga-tray[hidden]{display:none}
.ga-tray-item{position:relative; width:72px; height:72px; margin:2px 0 0 2px}
.ga-tray-item img{width:100%; height:100%; object-fit:cover; border-radius:10px; border:1px solid var(--line)}
.ga-tray-x{position:absolute; top:-8px; right:-8px; width:26px; height:26px; display:grid; place-items:center; border:1px solid var(--line);
  border-radius:50%; background:var(--surface); color:var(--ink)}
.ga-tray-x::after{content:''; position:absolute; inset:-9px}
.ga-tray-x svg{width:14px; height:14px}
.ga-pic-err{margin:4px 18px 0; font-size:13px; color:var(--warn)}
.ga-pic-err[hidden]{display:none}
.ga-thumb{display:block; max-width:180px; max-height:140px; border-radius:10px; margin:0 0 8px auto; border:1px solid var(--line)}
/* a file dragged over the panel: a framed invitation to let go */
.ga-drop{position:absolute; inset:10px; z-index:2; display:none; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  border:2px dashed var(--accent); border-radius:16px; background:color-mix(in srgb,var(--surface) 88%,transparent); color:var(--ink); pointer-events:none}
.ga-drop svg{width:32px; height:32px; color:var(--accent)}
.ga-drop p{margin:0; font-size:14px}
.ga-panel.ga-dropping .ga-drop{display:flex}
.ga-compose:focus-within{border-color:var(--accent)}
.ga-input{flex:1; min-height:38px; max-height:160px; resize:none; border:0; outline:0; background:transparent; color:var(--ink);
  font:inherit; font-size:16px; padding:8px 0}                       /* ≥ 16 px, or iOS zooms on focus */
.ga-input::placeholder{color:var(--muted)}
.ga-send{flex:none; width:40px; height:40px; display:grid; place-items:center; border:0; border-radius:12px;
  background:var(--accent); color:var(--on-accent); position:relative}
.ga-send::after{content:''; position:absolute; inset:-2px}
.ga-send svg{width:20px; height:20px}
.ga-send:disabled{opacity:.5; cursor:default}
.ga-note{margin:0 18px 12px; font-size:12px; color:var(--muted)}

/* ---- one answer ---- */
.ga-state{display:flex; align-items:center; gap:8px; margin:0 0 8px}
.ga-pill{display:inline-flex; align-items:center; min-height:24px; padding:0 10px; border-radius:999px; font-size:12.5px; font-weight:650;
  border:1px solid var(--line); color:var(--muted); white-space:nowrap}
.ga-pill.ga-good{color:var(--ga-good); border-color:color-mix(in srgb,var(--ga-good) 40%,transparent); background:color-mix(in srgb,var(--ga-good) 12%,transparent)}
.ga-pill.ga-unk{color:var(--ink); border-style:dashed}
.ga-pill.ga-plan{color:var(--ga-plan); border-color:color-mix(in srgb,var(--ga-plan) 40%,transparent); background:color-mix(in srgb,var(--ga-plan) 12%,transparent)}
.ga-phase{font-size:12.5px; color:var(--muted)}
.ga-cite-plan{color:var(--ink); cursor:default}

/* word by word: the text is laid out whole, each word starts transparent (no reflow) */
.ga-typing .ga-w{opacity:0; transition:opacity 180ms var(--ga-ease)}
.ga-typing .ga-w.on{opacity:1}
.ga-late{transition:opacity 240ms var(--ga-ease)}
.ga-typing .ga-late,.ga-typing .ga-actions{opacity:0}

.ga-actions{display:flex; flex-wrap:wrap; align-items:center; gap:2px; margin:8px 0 0 -10px; transition:opacity 240ms var(--ga-ease)}
.ga-act{width:40px; height:40px; display:grid; place-items:center; border:0; border-radius:10px; background:none; color:var(--muted); position:relative}
.ga-act::after{content:''; position:absolute; inset:-2px}
.ga-act svg{width:18px; height:18px}
.ga-act[aria-pressed="true"]{color:var(--accent)}
.ga-act.is-done{color:var(--ga-good)}
@media (hover:hover){.ga-act:hover{background:var(--surface-2); color:var(--ink)}}
.ga-srcbtn{display:inline-flex; align-items:center; gap:8px; min-height:40px; margin-left:6px; padding:0 8px; border:0; border-radius:10px;
  background:none; color:var(--muted); font-size:13px}
.ga-srcbtn svg{width:14px; height:14px; transition:transform 180ms var(--ga-ease)}
.ga-srcbtn[aria-expanded="true"] svg{transform:rotate(180deg)}
@media (hover:hover){.ga-srcbtn:hover{background:var(--surface-2); color:var(--ink)}}
.ga-badge{display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 5px; border-radius:6px;
  background:color-mix(in srgb,var(--accent) 18%,transparent); color:var(--accent); font-size:11.5px; font-weight:700}
.ga-glyph{flex:none; width:22px; height:22px; border-radius:50%; display:inline-grid; place-items:center; overflow:hidden;
  background:var(--surface-2); color:var(--muted); border:1px solid var(--line)}
.ga-glyph img{width:100%; height:100%; object-fit:cover}
.ga-glyph svg{width:13px; height:13px}
.ga-glyphs{display:inline-flex}
.ga-glyphs .ga-glyph + .ga-glyph{margin-left:-7px; box-shadow:0 0 0 2px var(--surface)}
.ga-srclist{list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; gap:2px}
.ga-srclist[hidden]{display:none}
.ga-srcitem{display:flex; align-items:center; gap:10px; width:100%; min-height:40px; padding:4px 8px; border:0; border-radius:10px;
  background:none; color:var(--ink); font-size:13.5px; text-align:left}
@media (hover:hover){.ga-srcitem:hover{background:var(--surface-2)}}

/* the blocks under the text: table, cards, trace */
.ga-block{margin-top:14px; padding:12px; border:1px solid var(--line); border-radius:14px; background:var(--bg)}
.ga-block-t{margin:0 0 8px; font-size:12.5px; font-weight:650; color:var(--muted)}
.ga-filters{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 10px}
.ga-filter{display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:0 12px; border:1px solid var(--line); border-radius:999px;
  background:none; color:var(--muted); font-size:13px; position:relative}
.ga-filter::after{content:''; position:absolute; inset:-4px 0}
.ga-filter[aria-pressed="true"]{background:var(--surface-2); color:var(--ink); border-color:transparent}
.ga-f-good::before,.ga-f-plan::before,.ga-f-none::before{content:''; width:7px; height:7px; border-radius:50%; background:var(--muted)}
.ga-f-good::before{background:var(--ga-good)}
.ga-f-plan::before{background:var(--ga-plan)}
.ga-n{font-size:12px; opacity:.8}
.ga-tscroll{overflow-x:auto; overscroll-behavior-x:contain}
.ga-table{width:100%; border-collapse:collapse; font-size:13.5px}
.ga-table th{text-align:left; font-weight:600; font-size:12px; color:var(--muted); padding:6px 8px; border-bottom:1px solid var(--line)}
.ga-table td{padding:8px; border-bottom:1px solid var(--line); vertical-align:middle}
.ga-table tr:last-child td{border-bottom:0}
.ga-table td:last-child{width:1%; white-space:nowrap}
.ga-table tr[hidden]{display:none}
.ga-fn-phase{display:block; font-size:12px; color:var(--muted)}
.ga-link{padding:0; border:0; background:none; color:var(--ink); font-size:inherit; text-align:left;
  text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:3px; position:relative}
.ga-link::after{content:''; position:absolute; inset:-10px -4px}
@media (hover:hover){.ga-link:hover{text-decoration-color:var(--accent)}}


.ga-chart{margin:0}
.ga-chart figcaption{font-weight:700; margin-bottom:10px}
.ga-bars{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.ga-bars li{display:grid; grid-template-columns:minmax(0,7rem) 1fr auto; align-items:center; gap:10px; font-size:13px}
.ga-bar-l{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ga-bar-t{height:8px; border-radius:4px; background:var(--surface-2); overflow:hidden}
.ga-bar-t span{display:block; height:100%; border-radius:4px; background:var(--accent)}
.ga-share{display:flex; height:12px; gap:2px; border-radius:6px; overflow:hidden; margin-bottom:10px}
.ga-share span,.ga-legend li::before{background:color-mix(in srgb,var(--accent) calc(100% - var(--i) * 22%),var(--surface-2))}
.ga-legend{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; font-size:13px}
.ga-legend li{display:flex; align-items:center; gap:8px}
.ga-legend li::before{content:''; width:10px; height:10px; border-radius:3px; flex:none}
.ga-legend span{flex:1}

.ga-trace{margin-top:12px}
.ga-trace-h{display:inline-flex; align-items:center; gap:8px; min-height:40px; margin-left:-8px; padding:0 8px; border:0; border-radius:10px;
  background:none; color:var(--muted); font-size:13px}
.ga-trace-h svg{width:15px; height:15px}
.ga-trace-h svg:last-child{width:14px; height:14px; transition:transform 180ms var(--ga-ease)}
.ga-trace-h[aria-expanded="true"] svg:last-child{transform:rotate(180deg)}
@media (hover:hover){.ga-trace-h:hover{background:var(--surface-2); color:var(--ink)}}
.ga-trace-b{padding:4px 0 0 2px}
.ga-trace-b[hidden]{display:none}
.ga-trace-rows{list-style:none; margin:0 0 10px; padding:0 0 0 12px; border-left:1px solid var(--line); display:flex; flex-direction:column; gap:8px; font-size:13.5px}
.ga-ctx{display:flex; flex-direction:column; gap:8px}
.ga-ctx-c{padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:var(--bg)}
.ga-ctx-t{margin:0; font-size:13.5px; font-weight:650}
.ga-ctx-m{display:block; font-size:12px; color:var(--muted)}
.ga-ctx-x{margin:6px 0 0; font-size:13px; color:var(--muted)}
.ga-ctx-o{min-height:36px; margin-top:4px; padding:0; border:0; background:none; color:var(--accent); font-size:13px; font-weight:600; position:relative}
.ga-ctx-o::after{content:''; position:absolute; inset:-4px}

/* working: one soft pulse, never a spinner that spins while nothing happens */
.ga-think{display:flex; align-items:center; gap:10px; margin:0; color:var(--muted); font-size:14px}
.ga-dot{width:8px; height:8px; border-radius:50%; background:var(--accent); flex:none}
@media (prefers-reduced-motion:no-preference){.ga-dot{animation:ga-pulse 1.2s ease-in-out infinite}}
@keyframes ga-pulse{50%{opacity:.35; transform:scale(.8)}}
@media (prefers-reduced-motion:reduce){.ga-typing .ga-w,.ga-late,.ga-actions{transition:none}}