/* Russell chat widget. Spec §5: launcher 52px bottom-right, panel 380 × min(640px, 100dvh - 100px),
   full-screen under 640px, z-index 62 (notif menu 60 < widget 62 < mobile nav 70 < MFA 300).
   Launcher and panel rules are written `.rw .rw-…` so they outrank `.soft .glass-pop`
   (two classes, from soft.css) on border and radius.
   --rw-lift is the corner dodge: russell-widget.js probes the launcher's resting spot
   for page controls (a pager's Next button, a footer action) and sets the lift so the
   launcher and the open panel sit just above them. 0 when the corner is clear. */
.rw { --rw-lift: 0px; position: fixed; right: 20px; bottom: calc(20px + var(--rw-lift)); z-index: 62; font-size: 14px; transition: bottom 0.2s ease; }
.rw.hidden, .rw .hidden { display: none !important; }
/* The launcher wears the accent at rest (not on hover only) with a faint accent ring,
   so it reads as Russell from across the page without any pulse or badge. */
.rw .rw-launcher { width: 52px; height: 52px; border-radius: 50%; padding: 0; display: grid; place-items: center; cursor: pointer; color: var(--accent);
  box-shadow: var(--glass-inset), var(--soft-shadow), 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
  transition: transform .18s ease, box-shadow .18s ease; }
.rw-launcher .orbit { width: 32px; height: 32px; }
.rw .rw-launcher:hover, .rw .rw-launcher:focus-visible { transform: translateY(-1px) scale(1.04);
  box-shadow: var(--glass-inset), var(--soft-shadow), 0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent), 0 8px 22px color-mix(in srgb, var(--accent) 22%, transparent); }
@media (prefers-reduced-motion: reduce) { .rw .rw-launcher { transition: none; } .rw .rw-launcher:hover { transform: none; } }
body.rw-open .rw-launcher { display: none; }
.rw.rw-nav-open .rw-launcher { display: none; }
.rw .rw-panel { position: fixed; right: 20px; bottom: calc(20px + var(--rw-lift)); width: 380px; height: min(640px, 100dvh - 100px - var(--rw-lift));
  display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; transition: bottom 0.2s ease; }
/* The header and the composer share this surface: a wash tint and the stronger
   hairline so the transcript visibly sits between them. */
.rw-head { display: flex; align-items: center; gap: 8px; padding: 10px 10px 8px 14px; background: var(--wash); border-bottom: 1px solid var(--hair2); }
.rw-titles { flex: 1; min-width: 0; }
.rw-name { font-size: 14px; font-weight: 600; color: var(--label); }
.rw-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; border: 0; background: none; color: var(--label2, var(--label)); cursor: pointer; }
.rw-icon:hover { background: var(--wash); color: var(--accent); }
.rw-icon svg { width: 16px; height: 16px; }
/* position: relative so a message's offsetTop is measured from the transcript (scrollToStart). */
.rw-transcript { position: relative; flex: 1; min-height: 0; overflow-y: auto; padding: 14px 14px 6px; display: flex; flex-direction: column; gap: 14px; }
.rw-transcript .msg { max-width: 100%; font-size: 13.5px; }
.rw-transcript .msg.user { max-width: 86%; }
.rw-transcript .msg.assistant { padding-left: 34px; }
.rw-transcript .msg.assistant > .orbit { width: 24px; height: 24px; }
.rw-transcript .chart { height: 200px; } .rw-transcript .chart.round { height: 230px; }
/* The Ask Russell page styles these inline; the widget carries its own copies. */
.rw .error-chip { align-self: flex-start; font-size: 12.5px; color: var(--danger-fg); background: var(--danger-bg); border: 1px solid var(--danger-border); border-radius: 10px; padding: 8px 12px; }
.rw .working { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--label2, var(--label)); }
.rw .pips { display: inline-flex; gap: 3px; }
.rw .pips i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); display: block; animation: rw-pip 1.2s infinite; }
.rw .pips i:nth-child(2) { animation-delay: 0.2s; } .rw .pips i:nth-child(3) { animation-delay: 0.4s; }
@keyframes rw-pip { 0%,80%,100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }
.rw .status-text { transition: opacity 0.18s; }
.rw .status-text.swap { opacity: 0; }
.rw .status-time { font-size: 11px; color: var(--label3, var(--label2, var(--label))); font-variant-numeric: tabular-nums; }
.rw .status-time:empty { display: none; }
.rw-composer { display: flex; align-items: flex-end; gap: 8px; padding: 8px 10px 10px 14px; background: var(--wash); border-top: 1px solid var(--hair2); }
.rw-composer textarea { flex: 1; resize: none; max-height: 96px; min-height: 24px; border: 0; background: none; color: var(--label); font: inherit; line-height: 1.5; outline: none; }
.rw-composer .send-btn { width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--accent-fill); color: #fff; display: grid; place-items: center; cursor: pointer; }
.rw-composer .send-btn:disabled { opacity: 0.5; cursor: default; }
.rw-composer .send-btn svg { width: 16px; height: 16px; }
/* The shared diagram/chart overlay is appended inside .rw (its nearest .soft), and .rw
   (fixed, z 62) is its own stacking context: the overlay's 90 only orders it above the
   panel (z auto). Lifting .rw itself to 90 while an overlay is open is what clears the
   sticky #app-header (z 65 at <=1023px) and the mobile nav (70), still under the auth
   overlay (100). */
.rw .diagram-overlay { z-index: 90; }
.rw:has(.diagram-overlay) { z-index: 90; }
/* Expand: one larger size for easier reading, remembered per browser (russell-widget-size). */
.rw .rw-panel.rw-wide { width: min(640px, 100vw - 40px); height: min(900px, 100dvh - 60px - var(--rw-lift)); }
.rw-panel.rw-wide .rw-transcript .msg { font-size: 14.5px; }
.rw-panel.rw-wide .rw-transcript .chart { height: 280px; } .rw-panel.rw-wide .rw-transcript .chart.round { height: 300px; }
.rw-icon .rw-ico-in { display: none; }
.rw-panel.rw-wide .rw-icon .rw-ico-in { display: block; }
.rw-panel.rw-wide .rw-icon .rw-ico-out { display: none; }
@media (max-width: 639px) {
  .rw { right: 16px; bottom: calc(16px + var(--rw-lift)); }
  /* The sticky app header (52px, z 65) stays on top; the panel fills the rest.
     The .rw-wide selector is listed so full-screen beats the wide rule's specificity. */
  .rw .rw-panel, .rw .rw-panel.rw-wide { inset: 52px 0 0 0; width: auto; height: auto; border-radius: 0; border: 0; }
  /* The panel is already full-screen here, so Expand means nothing. */
  .rw #rw-expand { display: none; }
}