/* Theme tokens for the floating research desk.
   Declared light-first in `:root` with `.dark` overriding, so a page that
   somehow renders without the `dark` class degrades to a readable light widget
   instead of black-on-black. The `.dark` column is the original hardcoded
   palette, value for value, so dark mode renders exactly as before.
   Deliberately self-contained and `--agf-` prefixed: this sheet is loaded on
   its own, so it must not depend on tokens declared in `base.html` — nor
   collide with them. */
:root {
  /* Surfaces and structure */
  --agf-surface: #ffffff;
  --agf-bar: #f8fafc;
  --agf-bar-wash: rgba(99, 102, 241, .10);
  --agf-divider: #e2e8f0;
  --agf-panel-border: rgba(79, 70, 229, .22);
  /* Geometry is identical in both themes; only the ink softens. A 90px black
     bloom and a near-opaque slate ring read as grime on a light page. */
  --agf-panel-shadow: 0 30px 90px rgba(15, 23, 42, .16), 0 0 0 1px rgba(15, 23, 42, .06);

  /* Launcher chip. Its fill is a surface (slate-800 → slate-950 in dark), so it
     inverts; the gradient *border* is brand and does not. */
  --agf-launcher-from: rgba(255, 255, 255, .98);
  --agf-launcher-to: rgba(248, 250, 252, .98);
  --agf-launcher-ink: #312e81;
  --agf-launcher-shadow: 0 18px 48px rgba(15, 23, 42, .14), 0 0 0 1px rgba(99, 102, 241, .10);
  --agf-launcher-shadow-hover: 0 22px 56px rgba(15, 23, 42, .18), 0 0 28px rgba(99, 102, 241, .16);

  /* Text */
  --agf-ink: #0f172a;
  --agf-ink-muted: #64748b;   /* slate-500 — 4.76:1 on white, the legible floor.
                                 Unchanged in dark, where it is the original
                                 value; anything lighter fails on white. */

  /* Accent. Pale indigo is legible on a dark panel and invisible on a light
     one, so every pale-indigo *glyph* becomes indigo-600 here; the pale indigo
     *fills* stay pale. */
  --agf-accent: #4f46e5;
  --agf-mark-ink: #4f46e5;
  --agf-mark-bg: rgba(99, 102, 241, .10);
  --agf-mark-border: rgba(79, 70, 229, .24);

  /* Title-bar icon buttons */
  --agf-btn-ink: #64748b;
  --agf-btn-bg-hover: #f1f5f9;
  --agf-btn-border-hover: #cbd5e1;

  /* Status green. The dot and its pulse are a saturated fill, so they are
     identical in both themes and have no `.dark` override. Only the tint chip
     behind the dot and its bloom are re-weighted for a light bar. */
  --agf-live: #34d399;
  --agf-live-ring: rgba(52, 211, 153, .46);
  --agf-signal-bg: rgba(52, 211, 153, .12);
  --agf-signal-border: rgba(16, 185, 129, .28);
  --agf-signal-glow: rgba(52, 211, 153, .45);

  /* Brand gradient on the launcher's border — identical in both themes, hence
     no `.dark` override. */
  --agf-brand-from: #6366f1;
  --agf-brand-to: #38bdf8;
}

.dark {
  --agf-surface: #020617;
  --agf-bar: #0b1120;
  --agf-bar-wash: rgba(99, 102, 241, .13);
  --agf-divider: #1e293b;
  --agf-panel-border: rgba(129, 140, 248, .34);
  --agf-panel-shadow: 0 30px 90px rgba(0, 0, 0, .72), 0 0 0 1px rgba(15, 23, 42, .9);

  --agf-launcher-from: rgba(30, 41, 59, .97);
  --agf-launcher-to: rgba(15, 23, 42, .98);
  --agf-launcher-ink: #e0e7ff;
  --agf-launcher-shadow: 0 18px 48px rgba(0, 0, 0, .46), 0 0 0 1px rgba(99, 102, 241, .08);
  --agf-launcher-shadow-hover: 0 22px 56px rgba(0, 0, 0, .54), 0 0 28px rgba(99, 102, 241, .18);

  --agf-ink: #e2e8f0;

  --agf-accent: #818cf8;
  --agf-mark-ink: #a5b4fc;
  --agf-mark-bg: rgba(99, 102, 241, .13);
  --agf-mark-border: rgba(129, 140, 248, .3);

  --agf-btn-ink: #94a3b8;
  --agf-btn-bg-hover: #172033;
  --agf-btn-border-hover: #28364e;

  --agf-signal-bg: rgba(52, 211, 153, .08);
  --agf-signal-border: rgba(52, 211, 153, .18);
  --agf-signal-glow: rgba(52, 211, 153, .75);
}

.agents-floating-root {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
}

.agents-floating-root [hidden] { display: none !important; }

.agents-floating-launcher {
  position: absolute;
  right: 20px;
  bottom: 20px;
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 196px;
  padding: 10px 13px 10px 10px;
  color: var(--agf-launcher-ink);
  background:
    linear-gradient(120deg, var(--agf-launcher-from), var(--agf-launcher-to)) padding-box,
    linear-gradient(120deg, var(--agf-brand-from), var(--agf-brand-to)) border-box;
  border: 1px solid transparent;
  border-radius: 16px;
  box-shadow: var(--agf-launcher-shadow);
  cursor: pointer;
  pointer-events: auto;
  transition: transform .18s ease, box-shadow .18s ease;
}

.agents-floating-launcher:hover {
  transform: translateY(-2px);
  box-shadow: var(--agf-launcher-shadow-hover);
}

.agents-floating-launcher:focus-visible,
.agents-floating-actions button:focus-visible {
  outline: 2px solid var(--agf-accent);
  outline-offset: 3px;
}

.agents-floating-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: var(--agf-mark-ink);
  background: var(--agf-mark-bg);
  border: 1px solid var(--agf-mark-border);
  border-radius: 12px;
  flex: 0 0 auto;
}

.agents-floating-mark svg { width: 27px; height: 27px; }
.agents-floating-launcher-copy { display: flex; flex: 1; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.agents-floating-launcher-copy span,
.agents-floating-heading span {
  color: var(--agf-ink-muted);
  font: 600 9px/1.2 'JetBrains Mono', monospace;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.agents-floating-launcher-copy strong { margin-top: 4px; font-size: 13px; font-weight: 650; }

.agents-floating-live {
  width: 7px;
  height: 7px;
  background: var(--agf-live);
  border-radius: 50%;
  box-shadow: 0 0 0 0 var(--agf-live-ring);
  animation: agentsLive 2.2s ease-out infinite;
}

.agents-floating-panel {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: min(560px, calc(100vw - 40px));
  height: min(760px, calc(100vh - 40px));
  min-width: 390px;
  min-height: 360px;
  overflow: hidden;
  color: var(--agf-ink);
  background: var(--agf-surface);
  border: 1px solid var(--agf-panel-border);
  border-radius: 18px;
  box-shadow: var(--agf-panel-shadow);
  pointer-events: auto;
  isolation: isolate;
  animation: agentsPanelIn .22s cubic-bezier(.2, .8, .2, 1) both;
}


.agents-floating-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 54px;
  padding: 0 10px 0 13px;
  background:
    linear-gradient(90deg, var(--agf-bar-wash), transparent 38%),
    var(--agf-bar);
  border-bottom: 1px solid var(--agf-divider);
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.agents-floating-bar:active { cursor: grabbing; }

.agents-floating-grip {
  display: grid;
  grid-template-columns: repeat(2, 2px);
  gap: 3px;
  opacity: .55;
}
.agents-floating-grip i { width: 2px; height: 2px; background: var(--agf-ink-muted); border-radius: 50%; }

.agents-floating-signal {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  background: var(--agf-signal-bg);
  border: 1px solid var(--agf-signal-border);
  border-radius: 7px;
}
.agents-floating-signal i { width: 6px; height: 6px; background: var(--agf-live); border-radius: 50%; box-shadow: 0 0 10px var(--agf-signal-glow); }

.agents-floating-heading { display: flex; min-width: 0; flex: 1; flex-direction: column; line-height: 1.12; }
.agents-floating-heading strong { margin-top: 3px; overflow: hidden; font-size: 13px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }

.agents-floating-actions { display: flex; gap: 4px; }
.agents-floating-actions button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--agf-btn-ink);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9px;
  cursor: pointer;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.agents-floating-actions button:hover { color: var(--agf-ink); background: var(--agf-btn-bg-hover); border-color: var(--agf-btn-border-hover); }
.agents-floating-actions svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.7; }

.agents-floating-body { position: absolute; inset: 54px 0 0; background: var(--agf-surface); }
.agents-floating-body iframe { display: block; width: 100%; height: 100%; border: 0; background: var(--agf-surface); }

.agents-floating-loading {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  color: var(--agf-ink-muted);
  background: var(--agf-surface);
  font-size: 12px;
}
.agents-floating-loading[hidden] { display: none; }
.agents-floating-loading span {
  width: 28px;
  height: 28px;
  border: 2px solid var(--agf-divider);
  border-top-color: var(--agf-accent);
  border-radius: 50%;
  animation: agentsSpin .8s linear infinite;
}

.agents-floating-resizer {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 4;
  width: 20px;
  height: 20px;
  cursor: nwse-resize;
  touch-action: none;
}
.agents-floating-resizer::after {
  content: '';
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 8px;
  height: 8px;
  border-right: 1px solid var(--agf-ink-muted);
  border-bottom: 1px solid var(--agf-ink-muted);
}

body.agents-float-interacting { user-select: none; }
body.agents-float-interacting iframe { pointer-events: none; }

@keyframes agentsPanelIn {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes agentsLive {
  /* Fully transparent, so theme-independent — the ring fades out from
     --agf-live-ring to nothing in both themes. */
  70%, 100% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); }
}
@keyframes agentsSpin { to { transform: rotate(360deg); } }

@media (max-width: 700px) {
  .agents-floating-launcher { right: 12px; bottom: 12px; min-width: 0; border-radius: 15px; }
  .agents-floating-launcher-copy span { display: none; }
  .agents-floating-panel {
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-width: 0;
    min-height: 0;
    border: 0;
    border-radius: 0;
  }
  .agents-floating-bar { height: 56px; padding-top: env(safe-area-inset-top); }
  .agents-floating-body { top: calc(56px + env(safe-area-inset-top)); }
  .agents-floating-grip,
  .agents-floating-resizer { display: none; }
  /* The expand button stays. It used to grow the frame to a full-screen overlay,
     which on a phone the panel already is, so it was hidden as a no-op. It now
     navigates to /agents, which is the one thing a phone reader most wants from a
     framed sheet: a real address bar, the browser's own back button, and no
     nested scroll container. */
}

@media (prefers-reduced-motion: reduce) {
  .agents-floating-launcher,
  .agents-floating-actions button { transition: none; }
  .agents-floating-panel { animation: none; }
  .agents-floating-live,
  .agents-floating-loading span { animation: none; }
}