/* Starman's avatar spots (<starman-avatar>, defined by /avatar/boot.js): sized before the
   definition arrives (the markup writes width/height inline), so nothing moves when it does. */
starman-avatar { display: block; flex: none; border-radius: 50%; overflow: hidden; }

/* ── The chat's colours, Day and Night ──
   Every colour the Starman view draws (home, questions, answers, sources, run cards) is one of these,
   in this file and in the markup views/starman.js and views/workflowRunCard.js write, so Night follows
   from this one place. Day is the slate/blue palette the chat always had; Night matches the agent
   panel (--ap-*). The page is Night unless <html data-theme="light"> (js/theme.js), as in styles.css.
   Two things keep their own colours in both themes: the dark "Live Browser View" and the iMac a run's
   preview sits on (they are pictures of things), and white text on a filled blue button. */
:root {
  --chat-surface: #ffffff;        /* cards, the input bar, chips */
  --chat-surface-2: #f8fafc;      /* a quiet panel inside a card */
  --chat-fill: #f1f5f9;           /* icon wells, badges, hover */
  --chat-fill-2: #e2e8f0;         /* pressed, or a stronger well */
  --chat-line: #e2e8f0;
  --chat-line-soft: #f1f5f9;
  --chat-line-strong: #cbd5e1;
  --chat-ink: #0f172a;
  --chat-ink-2: #1e293b;
  --chat-ink-3: #334155;
  --chat-ink-4: #475569;
  --chat-muted: #64748b;
  --chat-faint: #94a3b8;
  --chat-sep: #cbd5e1;            /* the dots between meta, a shimmer's highlight */
  --chat-ring: #ffffff;           /* the ring round an avatar */
  --chat-accent: #2563eb;         /* filled buttons (their text stays white) */
  --chat-accent-hover: #1d4ed8;
  --chat-accent-ink: #2563eb;     /* blue text and icons */
  --chat-accent-ink-2: #1d4ed8;
  --chat-accent-deep: #1e40af;
  --chat-accent-soft: #eff6ff;
  --chat-accent-tint: #dbeafe;
  --chat-accent-line: #bfdbfe;
  --chat-ok: #16a34a;
  --chat-ok-ink: #15803d;
  --chat-ok-deep: #166534;
  --chat-ok-soft: #f0fdf4;
  --chat-ok-tint: #dcfce7;
  --chat-ok-line: #bbf7d0;
  --chat-warn: #d97706;
  --chat-warn-ink: #b45309;
  --chat-warn-deep: #92400e;
  --chat-warn-deeper: #78350f;
  --chat-warn-soft: #fffbeb;
  --chat-warn-tint: #fef3c7;
  --chat-warn-line: #fde68a;
  --chat-amber: #f59e0b;
  --chat-bad: #dc2626;
  --chat-bad-ink: #b91c1c;
  --chat-bad-deep: #991b1b;
  --chat-bad-soft: #fef2f2;
  --chat-bad-tint: #fee2e2;
  --chat-bad-line: #fecaca;
  --chat-user-bg: #bbf7d0;        /* the student's bubble (and its tail) */
  --chat-user-ink: #14532d;
  --chat-cite-bg: #e0e7ff;
  --chat-cite-hover: #c7d2fe;
  --chat-cite-ink: #3730a3;
  --chat-stop-bg: #0f172a;        /* the round button while it means "stop" */
  --chat-stop-ink: #ffffff;
  --chat-glass: rgba(255, 255, 255, 0.92);
  --chat-card-shadow: 0 8px 30px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02);
  --chat-pill-shadow: 0 6px 25px -4px rgba(0, 0, 0, 0.05), 0 2px 6px -1px rgba(0, 0, 0, 0.02);
}
:root:not([data-theme="light"]) {
  --chat-surface: #141821;
  --chat-surface-2: #1a1e29;
  --chat-fill: #1f2430;
  --chat-fill-2: #2a3040;
  --chat-line: rgba(255, 255, 255, 0.09);
  --chat-line-soft: rgba(255, 255, 255, 0.06);
  --chat-line-strong: rgba(255, 255, 255, 0.16);
  --chat-ink: #f1f5f9;
  --chat-ink-2: #e2e8f0;
  --chat-ink-3: #cbd5e1;
  --chat-ink-4: #b6c0cf;
  --chat-muted: #94a3b8;
  --chat-faint: #6e7a8d;
  --chat-sep: #475569;
  --chat-ring: #232937;
  --chat-accent: #2563eb;
  --chat-accent-hover: #1d4ed8;
  --chat-accent-ink: #7aa2ff;
  --chat-accent-ink-2: #93b4ff;
  --chat-accent-deep: #a9c2ff;
  --chat-accent-soft: rgba(59, 130, 246, 0.12);
  --chat-accent-tint: rgba(59, 130, 246, 0.2);
  --chat-accent-line: rgba(122, 162, 255, 0.35);
  --chat-ok: #4ade80;
  --chat-ok-ink: #4ade80;
  --chat-ok-deep: #86efac;
  --chat-ok-soft: rgba(34, 197, 94, 0.1);
  --chat-ok-tint: rgba(34, 197, 94, 0.18);
  --chat-ok-line: rgba(74, 222, 128, 0.28);
  --chat-warn: #fbbf24;
  --chat-warn-ink: #fbbf24;
  --chat-warn-deep: #fcd34d;
  --chat-warn-deeper: #fde68a;
  --chat-warn-soft: rgba(245, 158, 11, 0.1);
  --chat-warn-tint: rgba(245, 158, 11, 0.18);
  --chat-warn-line: rgba(251, 191, 36, 0.28);
  --chat-amber: #fbbf24;
  --chat-bad: #f87171;
  --chat-bad-ink: #fca5a5;
  --chat-bad-deep: #fecaca;
  --chat-bad-soft: rgba(239, 68, 68, 0.1);
  --chat-bad-tint: rgba(239, 68, 68, 0.18);
  --chat-bad-line: rgba(248, 113, 113, 0.3);
  --chat-user-bg: #1c3b2b;
  --chat-user-ink: #d1fae5;
  --chat-cite-bg: rgba(99, 102, 241, 0.22);
  --chat-cite-hover: rgba(99, 102, 241, 0.34);
  --chat-cite-ink: #c7d2fe;
  --chat-stop-bg: #e2e8f0;
  --chat-stop-ink: #0f172a;
  --chat-glass: rgba(20, 24, 33, 0.92);
  --chat-card-shadow: 0 8px 30px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.3);
  --chat-pill-shadow: 0 8px 28px -6px rgba(0, 0, 0, 0.5);
}

/* ── The Starman view: its frame in the content area ── */

.content.starman-active {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.starman-viewport-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  min-height: calc(100vh - 120px);
  padding: 0.5rem;
  box-sizing: border-box;
}

/* ── Main Content Area ── */
.starman-main-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  position: relative;
  overflow: hidden;
  min-width: 0;
}

/* ── Hero View Content ── */
.starman-hero-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 140px 1.5rem 1.5rem;
  overflow-y: auto;
  position: relative;
  scrollbar-width: thin;
}

.starman-hero-img-wrapper {
  position: relative;
  width: 100%;
  max-width: 580px;
  height: 260px;
  flex-shrink: 0; /* the hero scrolls when it runs out of room; Starman never gets squeezed to nothing */
  margin-top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.starman-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
  pointer-events: none;
  user-select: none;
  border-radius: 0; /* the hero is a <starman-avatar> on a wide stage, not a circle */
  mask-image: radial-gradient(ellipse 48% 48% at center, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 98%);
  -webkit-mask-image: radial-gradient(ellipse 48% 48% at center, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 98%);
}

.starman-headline {
  margin-top: 24px;
  font-size: 2.3rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: #0f172a;
  text-align: center;
  line-height: 1.2;
}

.starman-brand-highlight {
  color: #2563eb;
}

/* Night: the greeting in the page's own text colour (the dark ink above vanishes on a dark page),
   and Starman's name a lighter blue that still reads */
[data-theme="dark"] .starman-headline,
:root:not([data-theme="light"]) .starman-headline {
  color: var(--text-main);
}
[data-theme="dark"] .starman-brand-highlight,
:root:not([data-theme="light"]) .starman-brand-highlight {
  color: #60a5fa;
}

.starman-subtitle {
  font-size: 1.05rem;
  color: var(--chat-muted);
  font-weight: 500;
  margin-top: 6px;
  text-align: center;
  letter-spacing: -0.01em;
}

/* Input Bar (Central Pill) */
.starman-input-box {
  margin-top: 1.35rem;
  width: 100%;
  max-width: 600px;
  position: relative;
}

.starman-input-pill {
  display: flex;
  align-items: center;
  background: var(--chat-surface);
  border: 1.5px solid var(--chat-line);
  border-radius: 9999px;
  padding: 6px 8px 6px 14px;
  box-shadow: var(--chat-pill-shadow);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.starman-input-pill:focus-within {
  border-color: var(--chat-accent);
  box-shadow: 0 8px 30px -4px rgba(37, 99, 235, 0.15), 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.starman-pill-input {
  flex: 1;
  min-width: 0; /* else the placeholder's width pushes the round button out of the pill on a phone */
  border: none;
  background: transparent;
  outline: none;
  padding: 8px 12px;
  font-size: 1rem;
  color: var(--chat-ink);
  font-family: inherit;
}

.starman-pill-input::placeholder {
  color: var(--chat-faint);
  font-weight: 400;
}

.starman-pill-mic-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--chat-accent);
  color: #ffffff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
  transition: background-color 150ms ease, box-shadow 200ms ease, transform 160ms var(--ease-out);
  flex-shrink: 0;
}

@media (hover: hover) and (pointer: fine) {
  .starman-pill-mic-btn:hover {
    background: var(--chat-accent-hover);
    transform: scale(1.04);
  }
}

.starman-pill-mic-btn:active {
  transform: scale(0.97);
}

.starman-pill-mic-btn svg {
  width: 20px;
  height: 20px;
}


/* The four quick asks (views/quickAsks.js): two by two, or one row once the column has room for skill
   names of three or four words on two lines (~230px a card). The column, not the window:
   #starman-content-container is the size container, so a docked panel or an open sidebar counts. */
.starman-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  max-width: 600px;
  margin-top: 1.4rem;
}
@container starman (min-width: 1040px) {
  .starman-cards-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 960px; }
}

.starman-quick-card {
  min-width: 0;
  background: var(--chat-surface);
  border: 1px solid var(--chat-line);
  border-radius: 16px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font: inherit;
  transition: transform 160ms var(--ease-out), border-color 150ms ease, box-shadow 200ms ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
  text-align: left;
  outline: none;
}

@media (hover: hover) and (pointer: fine) {
  .starman-quick-card:hover {
    border-color: var(--chat-line-strong);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
  }
}

.starman-quick-card:active {
  transform: scale(0.97);
}

.starman-quick-card:focus-visible {
  outline: 2px solid var(--chat-accent);
  outline-offset: 2px;
}

/* Everything else Starman can do: a quiet link under the cards, to the Ideas page */
.starman-ideas-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--chat-muted);
  text-decoration: none;
  transition: color 150ms ease;
}
.starman-ideas-link svg { width: 14px; height: 14px; transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .starman-ideas-link:hover { color: var(--chat-accent-ink); }
  .starman-ideas-link:hover svg { transform: translateX(2px); }
}
.starman-ideas-link:focus-visible { outline: 2px solid var(--chat-accent); outline-offset: 2px; }

/* A card's 3D icon (the Ideas page's, assets/ideas) and its ask, on at most two lines */
.starman-card-icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; }
.starman-card-label {
  flex: 1; min-width: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 0.82rem; font-weight: 600; line-height: 1.3; color: var(--chat-ink-2);
}
/* Held places while the asks load: the same size, so nothing moves when they come */
.starman-quick-card.is-placeholder { cursor: default; min-height: 62px; box-shadow: none; }
.starman-quick-card.is-placeholder .starman-card-icon { background: var(--chat-fill); }
.starman-quick-card.is-placeholder .starman-card-label { height: 12px; max-width: 70%; border-radius: 6px; background: var(--chat-fill); }
.starman-cards-grid:empty { display: none; }



/* ── Chat History & Conversation View ── */
/* The Starman view's column (views/starman.js) is the size container its home and chat lay out by: on a
   phone, and on a laptop with the sidebar open and the panel docked, it is narrow though the window
   isn't. Overlays (the lightbox, the image viewer) go on <body>, so containment never boxes them in. */
#starman-content-container { container: starman / inline-size; }

.starman-chat-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  overflow: visible;
}

/* The avatar beside an answer (views/starman.js rowAvatarHtml): a 48 px column. The newest answer's is
   all of Starman (84 x 120, live 3D where the device allows), standing out of the column so the cards
   keep their place, and drawn over the card's edge when a hand reaches it. */
.starman-row-avatar {
  position: relative;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  z-index: 2;
}
.starman-row-live {
  position: absolute;
  top: -12px;
  left: 50%;
  width: 84px;
  height: 120px;
  margin-left: -42px;
  pointer-events: none;
}

/* Messages scrolled up under the chat's header fade out instead of showing through the horizon */
.starman-messages-container {
  --chat-fade-top: 125px;
  flex: 1;
  overflow-y: auto;
  -webkit-mask-image: linear-gradient(to bottom, transparent calc(var(--chat-fade-top) - 60px), #000 var(--chat-fade-top));
  mask-image: linear-gradient(to bottom, transparent calc(var(--chat-fade-top) - 60px), #000 var(--chat-fade-top));
  padding: 135px 12% 100px 12%;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  scroll-behavior: smooth;
  scrollbar-width: thin;
}

/* The student's question (views/starman.js renderChatHistory): the bubble with its sweeping tail, their
   picture beside it, then copy/retry and the time under it */
.starman-user-row-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 100%;
  margin-bottom: 24px;
}

.starman-user-row {
  display: inline-flex;
  align-items: flex-end;
  position: relative;
  max-width: 85%;
}

.starman-user-bubble {
  position: relative;
  background: var(--chat-user-bg);
  border: none;
  color: var(--chat-user-ink);
  padding: 16px 28px;
  border-radius: 32px 28px 0px 32px;
  line-height: 1.45;
  font-size: 1.08rem;
  font-weight: 500;
  box-shadow: 0 4px 15px rgba(22, 163, 74, 0.08);
  word-break: break-word;
}
.starman-user-tail path { fill: var(--chat-user-bg); }

.starman-user-face-slot { position: relative; z-index: 2; flex-shrink: 0; margin: 0 0 10px 20px; }
.starman-chat-face {
  display: block; width: 48px; height: 48px; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--chat-ring); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}
.starman-chat-face.is-initials {
  display: grid; place-items: center; background: var(--chat-fill-2); color: var(--chat-ink-4);
  font-size: 0.95rem; font-weight: 600;
}
.starman-chat-face.is-initials svg { width: 20px; height: 20px; }

.starman-user-meta {
  display: flex; align-items: center; gap: 3px; margin-right: 54px;
  font-size: 0.75rem; font-weight: 500; color: var(--chat-faint);
}

/* Starman's answer: his avatar, then the card the answer, its sources and follow-ups sit on */
.starman-bot-row {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  margin-bottom: 32px;
}

/* The card, then copy under it (and while an answer is worked out, its tool lines in place of the card) */
.starman-bot-wrapper {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 100%;
}
.starman-bot-row > .starman-bot-wrapper { flex: 1; min-width: 0; max-width: 85%; }

.starman-bot-body {
  flex: 1;
  padding: 24px;
  border-radius: 24px;
  background: var(--chat-surface);
  border: 1px solid var(--chat-line);
  box-shadow: var(--chat-card-shadow);
  line-height: 1.7;
  color: var(--chat-ink-2);
  font-size: 1.02rem;
  min-width: 0;
  word-break: break-word;
}

/* "Want to know more?" under an answer */
.starman-follow-ups {
  display: flex; align-items: flex-start; gap: 12px;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--chat-line-soft);
}
.starman-follow-ups-icon { flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; color: var(--chat-amber); }
.starman-follow-ups-main { flex: 1; min-width: 0; }
.starman-follow-ups-title { margin-bottom: 10px; font-size: 0.85rem; font-weight: 600; color: var(--chat-ink); }
.starman-follow-ups-list { display: flex; flex-wrap: wrap; gap: 8px; }

/* Under an answer's card: copy (views/starman.js), shown while the answer is hovered (always, on touch) */
.starman-answer-actions {
  display: flex; gap: 2px; padding-left: 10px;
  opacity: 0; transition: opacity 150ms ease-out;
}
.starman-answer-actions:focus-within { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .starman-bot-row:hover .starman-answer-actions { opacity: 1; }
}
@media (hover: none) { .starman-answer-actions { opacity: 1; } }

.starman-bot-body strong {
  font-weight: 600;
  color: var(--chat-ink);
}

.starman-bot-body a {
  color: var(--chat-accent-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Starman's answer (views/answerMarkdown.js): blocks are spaced by their margins, never by runs of <br> */
.sa-p { margin: 0 0 12px; }
.sa-h {
  margin: 20px 0 8px;
  color: var(--chat-ink);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.sa-h:first-child { margin-top: 0; }
.sa-h1 { font-size: 1.3rem; }
.sa-h2 { font-size: 1.16rem; }
.sa-h3 { font-size: 1.08rem; }
.sa-list { margin: 0 0 12px; padding-left: 1.4em; }
.sa-list li { margin: 4px 0; padding-left: 2px; }
.sa-list li::marker { color: var(--chat-faint); }
ol.sa-list li::marker { color: var(--chat-muted); font-variant-numeric: tabular-nums; }
.sa-list .sa-list { margin: 4px 0 0; }
.sa-quote {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-left: 3px solid var(--chat-accent-line);
  border-radius: 0 10px 10px 0;
  background: var(--chat-surface-2);
  color: var(--chat-ink-3);
}
.sa-quote > :last-child { margin-bottom: 0; }
.sa-rule { margin: 16px 0; border: 0; border-top: 1px solid var(--chat-line); }
.sa-code {
  margin: 0 0 12px;
  padding: 12px 14px;
  overflow-x: auto;
  border-radius: 10px;
  background: #0f172a;
  color: #e2e8f0;
  font-size: 0.86rem;
}
:is(.sa-p, .sa-list, .sa-quote, .sa-table) code {
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--chat-fill);
  font-size: 0.9em;
}
.sa-figure { margin: 0 0 12px; }
.sa-img { display: block; max-width: min(100%, 360px); max-height: 320px; object-fit: contain; border-radius: 12px; }
.sa-table-wrap { margin: 0 0 12px; overflow-x: auto; border: 1px solid var(--chat-line); border-radius: 10px; }
.sa-table { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
.sa-table th,
.sa-table td { padding: 8px 12px; border-bottom: 1px solid var(--chat-line-soft); text-align: left; vertical-align: top; }
.sa-table th { background: var(--chat-surface-2); color: var(--chat-ink); font-weight: 600; }
.sa-table tr:last-child td { border-bottom: 0; }

/* A citation marker: a small number that takes you to its source under the answer */
.sa-cite {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin: 0 1px 0 3px;
  padding: 0 5px;
  border: 0;
  border-radius: 9px;
  background: var(--chat-cite-bg);
  color: var(--chat-cite-ink);
  font: 600 0.7rem/1 'Inter', sans-serif;
  font-variant-numeric: tabular-nums;
  vertical-align: 0.15em;
  cursor: pointer;
  transition: background-color 150ms ease, transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
}
.sa-cite:active { transform: scale(0.92); }
.sa-cite:focus-visible { outline: 2px solid #6366f1; outline-offset: 1px; }
.sa-cite--pending { background: var(--chat-fill); color: var(--chat-muted); cursor: default; }
@media (hover: hover) {
  button.sa-cite:hover { background: var(--chat-cite-hover); }
}

/* The sources under an answer (views/sourceCards.js) */
.sa-sources { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--chat-line-soft); }
.sa-sources-label {
  margin-bottom: 10px;
  color: var(--chat-muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.sa-sources-list { display: flex; flex-direction: column; gap: 10px; }
.sa-src {
  border: 1px solid var(--chat-line);
  border-radius: 14px;
  background: var(--chat-surface);
  transition: border-color 150ms ease, box-shadow 250ms ease, background-color 150ms ease;
}
.sa-src.is-flash { border-color: #a5b4fc; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.16); }
.sa-src--card { padding: 12px 14px; }
.sa-src--line { display: flex; align-items: center; gap: 10px; padding: 10px 12px; color: inherit; }
.starman-bot-body a.sa-src--line { color: inherit; text-decoration: none; }
.sa-src-head { display: flex; align-items: center; gap: 10px; }
.sa-src-avatar { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--chat-fill); object-fit: cover; }
.sa-src-avatar--icon { display: grid; place-items: center; color: var(--chat-muted); }
.sa-src-avatar--icon svg { width: 16px; height: 16px; }
/* A linked channel's mark in its platform's colour: alone, or as a badge on the account's picture */
.sa-src-avatar--brand { display: grid; place-items: center; color: #fff; }
.sa-src-avatar--brand svg { width: 18px; height: 18px; }
.sa-src-avatar-wrap { position: relative; flex-shrink: 0; width: 32px; height: 32px; }
.sa-src-badge {
  display: grid;
  position: absolute;
  right: -3px;
  bottom: -3px;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--chat-surface);
  color: #fff;
}
.sa-src-badge svg { width: 10px; height: 10px; }
.sa-src-brand--instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.sa-src-brand--linkedin { background: #0a66c2; }
.sa-src-brand--whatsapp { background: #25d366; }
.sa-src-brand--telegram { background: #229ed9; }
.sa-src-brand--discord { background: #5865f2; }
.sa-src-meta { display: flex; flex: 1; flex-direction: column; min-width: 0; line-height: 1.3; }
.sa-src-name,
.sa-src-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-src-name { color: var(--chat-ink); font-size: 0.9rem; font-weight: 600; }
.sa-src-sub { color: var(--chat-muted); font-size: 0.78rem; }
.sa-src-n {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--chat-fill);
  color: var(--chat-ink-4);
  font-size: 0.72rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.starman-bot-body a.sa-src-open { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: var(--chat-faint); }
.sa-src-open svg { width: 15px; height: 15px; }
.sa-src-title { margin-top: 10px; color: var(--chat-ink); font-size: 0.92rem; font-weight: 600; }
.sa-src-text {
  display: -webkit-box;
  margin: 8px 0 0;
  overflow: hidden;
  color: var(--chat-ink-4);
  font-size: 0.88rem;
  line-height: 1.55;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.sa-media { margin-top: 12px; }
.sa-media--row { display: flex; gap: 8px; padding-bottom: 4px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.sa-media-item {
  display: block;
  flex-shrink: 0;
  position: relative;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 10px;
  background: var(--chat-fill);
  cursor: zoom-in;
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.sa-media-item:active { transform: scale(0.98); }
.sa-media-item:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
.sa-media-item img,
.sa-media-item video { display: block; width: 100%; height: 100%; object-fit: cover; }
.sa-media--one .sa-media-item { width: min(100%, 340px); max-height: 420px; aspect-ratio: 1; }
.sa-media--row .sa-media-item { width: 132px; height: 132px; aspect-ratio: auto !important; scroll-snap-align: start; }
.sa-media-item--video { background: #000000; cursor: default; }
@media (hover: hover) {
  .starman-bot-body a.sa-src--line:hover { border-color: var(--chat-line-strong); background: var(--chat-surface-2); }
  .starman-bot-body a.sa-src-open:hover { background: var(--chat-accent-soft); color: var(--chat-accent-ink); }
}

/* "Want to know more?": the answer's follow-up questions */
.starman-follow-up {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid var(--chat-line);
  border-radius: 20px;
  background: var(--chat-surface);
  color: var(--chat-ink-4);
  font-size: 0.85rem;
  text-align: left; /* a question that wraps reads from the left, not centred (a button's default) */
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
}
.starman-follow-up:active { transform: scale(0.97); }
@media (hover: hover) {
  .starman-follow-up:hover { border-color: var(--chat-line-strong); background: var(--chat-surface-2); }
}

/* Sticky Input at bottom of chat */
.starman-bottom-input-container {
  padding: 1rem 12% 1.5rem;
  background: transparent;
  position: sticky;
  bottom: 0;
  z-index: 10;
}

/* ── Starman Header Celestial Banner & Video Avatar ── */
.starman-header-banner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 125px;
  background-image: url('assets/earth_horizon_header.png');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover; /* its own proportions at every width (100% 100% stretched it) */
  /* The picture fades out at its bottom, but cover crops that off a wide banner: the banner itself
     fades into the chat, so there is never a line where it ends */
  -webkit-mask-image: linear-gradient(to bottom, #000 35%, transparent);
  mask-image: linear-gradient(to bottom, #000 35%, transparent);
  pointer-events: none;
  z-index: 1;
  display: none;
  transition: opacity 0.3s ease;
}

.starman-header-avatar {
  position: absolute;
  left: 50%;
  top: 18px;
  transform: translateX(-50%);
  z-index: 10;
  display: none;
  pointer-events: auto;
  transition: opacity 200ms ease;
}

.starman-avatar-pill-wrapper {
  position: relative;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  border: 3.5px solid var(--chat-ring);
  box-shadow: 0 8px 24px rgba(59, 130, 246, 0.25), 0 2px 10px rgba(0, 0, 0, 0.08);
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (hover: hover) and (pointer: fine) {
  .starman-avatar-pill-wrapper:hover {
    transform: scale(1.05);
  }
}

.starman-avatar-video-crop {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  background: #ffffff;
}

.starman-avatar-video-crop starman-avatar { border-radius: 50%; background: #ffffff; }

.starman-avatar-video-crop video {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 25%;
  transform: scale(1.35);
  display: block;
  background: #ffffff;
}

.starman-avatar-status-badge {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 14px;
  height: 14px;
  background-color: #2563eb;
  border: 2.5px solid var(--chat-ring);
  border-radius: 50%;
  z-index: 15;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* ── Custom Sweeping Tail for User Chat Bubble ── */
.starman-user-tail {
  position: absolute;
  right: -46px;
  bottom: 0;
  width: 48px;
  height: 44px;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════════
   STARMAN LIBRARY MODAL — Exact match to reference UI
   ══════════════════════════════════════════════════════════════════ */
.sl-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.sl-modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.sl-modal-container {
  width: 1050px;
  max-width: 95vw;
  height: 680px;
  max-height: 90vh;
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.96);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #0f172a;
}

.sl-modal-overlay.open .sl-modal-container {
  transform: scale(1);
}

/* Header */
.sl-header {
  padding: 1.25rem 1.75rem;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  background: #ffffff;
}

.sl-header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.sl-header-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1e293b;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  flex-shrink: 0;
}

.sl-header-title-box {
  display: flex;
  flex-direction: column;
}

.sl-header-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.sl-header-subtitle {
  margin: 3px 0 0 0;
  font-size: 0.85rem;
  color: #64748b;
  font-weight: 400;
}

.sl-header-close-btn {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #64748b;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 150ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .sl-header-close-btn:hover {
    background: #f1f5f9;
    color: #0f172a;
  }
}

/* Modal Body */
.sl-body {
  display: flex;
  flex: 1;
  overflow: hidden;
  background: #ffffff;
}

/* Left Sidebar */
.sl-sidebar {
  width: 275px;
  flex-shrink: 0;
  border-right: 1px solid #f1f5f9;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 1rem 0.75rem;
  gap: 0.35rem;
}

.sl-platform-item {
  display: flex;
  align-items: center;
  padding: 0.75rem 0.85rem;
  border-radius: 12px;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 150ms var(--ease-out);
  position: relative;
  gap: 0.85rem;
  user-select: none;
}

@media (hover: hover) and (pointer: fine) {
  .sl-platform-item:hover {
    background: #f8fafc;
  }
}

.sl-platform-item.active {
  background: #ffffff;
}

.sl-platform-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: #22c55e;
}

.sl-platform-item[data-platform="instagram"].active::before { background: #E1306C; }
.sl-platform-item[data-platform="linkedin"].active::before { background: #0A66C2; }
.sl-platform-item[data-platform="web"].active::before { background: #FBBC05; }
.sl-platform-item[data-platform="whatsapp"].active::before { background: #25D366; }
.sl-platform-item[data-platform="telegram"].active::before { background: #2AABEE; }
.sl-platform-item[data-platform="discord"].active::before { background: #7289DA; }
.sl-platform-item[data-platform="youtube"].active::before { background: #FF0000; }
.sl-platform-item[data-platform="pdf"].active::before { background: #EF4444; }
.sl-platform-item[data-platform="others"].active::before { background: #64748B; }

.sl-platform-icon-wrap {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sl-platform-text-wrap {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.sl-platform-name {
  font-size: 0.92rem;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.25;
}

.sl-platform-desc {
  font-size: 0.75rem;
  color: #64748b;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sl-platform-badge {
  font-size: 0.78rem;
  font-weight: 600;
  color: #475569;
  background: #f1f5f9;
  padding: 2px 8px;
  border-radius: 9999px;
  margin-left: auto;
  flex-shrink: 0;
}

/* Right Content Area */
.sl-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 1.75rem 2rem 1.5rem 2rem;
  background: #ffffff;
}

/* Content Header */
.sl-content-top {
  display: flex;
  align-items: flex-start;
  gap: 1.15rem;
  margin-bottom: 1.5rem;
  flex-shrink: 0;
}

.sl-content-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sl-content-title-cluster {
  display: flex;
  flex-direction: column;
}

.sl-content-title-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.sl-content-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.015em;
  margin: 0;
  line-height: 1.2;
}

.sl-content-badge {
  background: #eff6ff;
  color: #2563eb;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 9999px;
  border: 1px solid #dbeafe;
}

.sl-content-desc {
  font-size: 0.85rem;
  color: #64748b;
  line-height: 1.45;
  margin: 4px 0 0 0;
}

/* Search & Filter Row */
.sl-filter-row {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 1.25rem;
  flex-shrink: 0;
}

.sl-search-container {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}

.sl-search-icon {
  position: absolute;
  left: 14px;
  width: 17px;
  height: 17px;
  color: #94a3b8;
  pointer-events: none;
}

.sl-search-input {
  width: 100%;
  height: 42px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  padding: 0 14px 0 40px;
  font-size: 0.88rem;
  color: #0f172a;
  outline: none;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 150ms var(--ease-out);
  font-family: inherit;
}

.sl-search-input:focus {
  border-color: #2563eb;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.sl-filter-dropdown-wrap {
  position: relative;
}

.sl-filter-btn {
  height: 42px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #334155;
  font-size: 0.85rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 150ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .sl-filter-btn:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
  }
}

.sl-filter-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.04);
  padding: 6px;
  min-width: 160px;
  z-index: 100;
  display: none;
}

.sl-filter-dropdown-menu.open {
  display: flex;
  flex-direction: column;
}

.sl-filter-option {
  padding: 8px 12px;
  font-size: 0.84rem;
  color: #334155;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 150ms var(--ease-out);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@media (hover: hover) and (pointer: fine) {
  .sl-filter-option:hover {
    background: #f1f5f9;
    color: #0f172a;
  }
}

.sl-filter-option.active {
  background: #eff6ff;
  color: #2563eb;
  font-weight: 600;
}

/* Sources List */
.sl-sources-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding-right: 0.4rem;
}

/* Custom Scrollbar for Sources List */
.sl-sources-list::-webkit-scrollbar,
.sl-sidebar::-webkit-scrollbar {
  width: 6px;
}
.sl-sources-list::-webkit-scrollbar-track,
.sl-sidebar::-webkit-scrollbar-track {
  background: transparent;
}
.sl-sources-list::-webkit-scrollbar-thumb,
.sl-sidebar::-webkit-scrollbar-thumb {
  background: #e2e8f0;
  border-radius: 9999px;
}

/* Source Card Item */
.sl-card {
  display: flex;
  align-items: center;
  padding: 0.85rem 1.15rem;
  border-radius: 12px;
  border: 1px solid #f1f5f9;
  background: #ffffff;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 150ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .sl-card:hover {
    background: #f8fafc;
    border-color: #e2e8f0;
  }
}

.sl-card-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 1.1rem;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.sl-card-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.sl-card-meta-line {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.sl-card-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #0f172a;
  letter-spacing: -0.01em;
}

.sl-card-tag {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  line-height: 1.3;
}

.sl-card-tag.channel {
  background: #dbeafe;
  color: #1d4ed8;
}

.sl-card-tag.group {
  background: #dcfce7;
  color: #15803d;
}

.sl-card-tag.web {
  background: #e0e7ff;
  color: #4338ca;
}

.sl-card-tag.profile {
  background: #fce7f3;
  color: #be185d;
}

.sl-card-members {
  font-size: 0.75rem;
  color: #64748b;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.sl-card-desc {
  font-size: 0.8rem;
  color: #64748b;
  margin: 3px 0 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sl-card-controls {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-left: 1.25rem;
  flex-shrink: 0;
}

.sl-card-updated {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  min-width: 85px;
}

.sl-updated-label {
  font-size: 0.7rem;
  color: #94a3b8;
  font-weight: 500;
}

.sl-updated-val {
  font-size: 0.78rem;
  color: #0f172a;
  font-weight: 600;
  margin-top: 1px;
}

/* iOS Style Toggle Switch */
.sl-toggle {
  width: 44px;
  height: 24px;
  border-radius: 12px;
  background: #cbd5e1;
  cursor: pointer;
  position: relative;
  transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

.sl-toggle.active {
  background: #2563eb;
}

.sl-toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: left 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.sl-toggle.active .sl-toggle-knob {
  left: 22px;
}

.sl-card-more-btn {
  background: transparent;
  border: none;
  padding: 6px;
  border-radius: 6px;
  cursor: pointer;
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 150ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .sl-card-more-btn:hover {
    background: #f1f5f9;
    color: #0f172a;
  }
}

/* Dark Theme Adaptations */
[data-theme="dark"] .sl-modal-container,
:root:not([data-theme="light"]) .sl-modal-container {
  background: #11141d;
  color: #f8fafc;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .sl-header,
:root:not([data-theme="light"]) .sl-header {
  background: #11141d;
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .sl-header-icon-box,
:root:not([data-theme="light"]) .sl-header-icon-box {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  color: #f8fafc;
}

[data-theme="dark"] .sl-header-title,
:root:not([data-theme="light"]) .sl-header-title {
  color: #f8fafc;
}

[data-theme="dark"] .sl-body,
:root:not([data-theme="light"]) .sl-body {
  background: #11141d;
}

[data-theme="dark"] .sl-sidebar,
:root:not([data-theme="light"]) .sl-sidebar {
  background: #11141d;
  border-right-color: rgba(255, 255, 255, 0.08);
}

@media (hover: hover) and (pointer: fine) {
  [data-theme="dark"] .sl-platform-item:hover,
  :root:not([data-theme="light"]) .sl-platform-item:hover {
    background: rgba(255, 255, 255, 0.04);
  }
}

[data-theme="dark"] .sl-platform-item.active,
:root:not([data-theme="light"]) .sl-platform-item.active {
  background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .sl-platform-name,
:root:not([data-theme="light"]) .sl-platform-name {
  color: #f8fafc;
}

[data-theme="dark"] .sl-platform-badge,
:root:not([data-theme="light"]) .sl-platform-badge {
  background: rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
}

[data-theme="dark"] .sl-content,
:root:not([data-theme="light"]) .sl-content {
  background: #11141d;
}

[data-theme="dark"] .sl-content-title,
:root:not([data-theme="light"]) .sl-content-title {
  color: #f8fafc;
}

[data-theme="dark"] .sl-search-input,
:root:not([data-theme="light"]) .sl-search-input {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  color: #f8fafc;
}

[data-theme="dark"] .sl-filter-btn,
:root:not([data-theme="light"]) .sl-filter-btn {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  color: #e2e8f0;
}

[data-theme="dark"] .sl-filter-dropdown-menu,
:root:not([data-theme="light"]) .sl-filter-dropdown-menu {
  background: #181c28;
  border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .sl-filter-option,
:root:not([data-theme="light"]) .sl-filter-option {
  color: #cbd5e1;
}

@media (hover: hover) and (pointer: fine) {
  [data-theme="dark"] .sl-filter-option:hover,
  :root:not([data-theme="light"]) .sl-filter-option:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
  }
}

[data-theme="dark"] .sl-card,
:root:not([data-theme="light"]) .sl-card {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.06);
}

@media (hover: hover) and (pointer: fine) {
  [data-theme="dark"] .sl-card:hover,
  :root:not([data-theme="light"]) .sl-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
  }
}

[data-theme="dark"] .sl-card-title,
:root:not([data-theme="light"]) .sl-card-title {
  color: #f8fafc;
}

[data-theme="dark"] .sl-updated-val,
:root:not([data-theme="light"]) .sl-updated-val {
  color: #f8fafc;
}

/* ── Run card: live preview of the run's tab, on a small iMac (workflowRunCard.js) ── */
.wf-run { container-type: inline-size; }
.wfp-body { display: grid; grid-template-columns: minmax(240px, 340px) minmax(0, 1fr); gap: 32px; align-items: start; }
.wfp-steps { min-width: 0; }
@container (max-width: 720px) {
  .wfp-body { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .wfp { order: -1; }
}
.wfp-folded {
  width: 100%; display: flex; align-items: center; gap: 10px; margin: 0 0 2px; padding: 8px 10px;
  background: var(--chat-surface-2); border: none; border-radius: 10px; cursor: pointer; text-align: left;
  font: inherit; font-size: 0.88rem; color: var(--chat-muted); line-height: 1.4; font-variant-numeric: tabular-nums;
  transition: background-color 120ms ease;
}
.wfp-folded span { flex: 1; }
@media (hover: hover) and (pointer: fine) {
  .wfp-folded:hover { background: var(--chat-fill); }
}
.wfp-folded:active { background: var(--chat-fill-2); }

.wfp { min-width: 0; padding-top: 4px; }
.wfp-mac {
  width: 100%; max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; align-items: center;
  cursor: pointer; outline: none; border-radius: 16px; transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.wfp-mac:active { transform: scale(0.99); }
.wfp-mac:focus-visible .wfp-panel { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #2563eb; }
/* Clicking anywhere on the iMac opens the run's tab; the chip says so on hover */
.wfp-open {
  position: absolute; top: 46px; right: 22px; z-index: 2; display: inline-flex; align-items: center; gap: 4px;
  height: 26px; padding: 0 10px; border-radius: 999px; background: rgba(15, 23, 42, 0.82); color: #fff;
  font-size: 0.75rem; font-weight: 600; line-height: 1; pointer-events: none;
  opacity: 0; transform: translateY(-2px); transition: opacity 150ms ease-out, transform 150ms ease-out;
}
.wfp-mac:focus-visible .wfp-open { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .wfp-mac:hover .wfp-open { opacity: 1; transform: none; }
}
@media (hover: none) { .wfp-open { display: none; } }
.wfp-panel {
  width: 100%; border-radius: 14px; overflow: hidden; background: linear-gradient(#e5e7eb, #d8dbe0);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 0 0 1px rgba(15, 23, 42, 0.06), 0 16px 30px -18px rgba(15, 23, 42, 0.32);
}
.wfp-glass { position: relative; background: #f9f9fa; padding: 12px 12px 10px; border-bottom: 1px solid #d3d7dc; }
.wfp-cam { position: absolute; top: 4px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: #30343a; }
.wfp-screen { border-radius: 3px; overflow: hidden; background: #2f2f2f; box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.12); }
.wfp-chin { height: 38px; }
.wfp-neck { width: 26%; height: 46px; background: linear-gradient(#c7cbd1 0, #dcdfe4 10px, #d5d9de 100%); clip-path: polygon(3% 0, 97% 0, 100% 100%, 0 100%); }
.wfp-foot { width: 30%; height: 5px; border-radius: 0 0 4px 4px; background: linear-gradient(#d2d6db, #bcc1c7); }
.wfp-bar { height: 24px; background: #eef0f3; border-bottom: 1px solid #dfe3e8; display: flex; align-items: center; gap: 8px; padding: 0 8px; }
.wfp-lights { display: flex; gap: 4px; flex-shrink: 0; }
.wfp-lights i { width: 7px; height: 7px; border-radius: 50%; display: block; background: #ff5f57; }
.wfp-lights i:nth-child(2) { background: #febc2e; }
.wfp-lights i:nth-child(3) { background: #28c840; }
.wfp-addr {
  flex: 1; min-width: 0; height: 17px; border-radius: 5px; background: #fff; border: 1px solid #e2e8f0;
  display: flex; align-items: center; gap: 4px; padding: 0 6px; overflow: hidden; white-space: nowrap;
  font-size: 10.5px; line-height: 1; color: #64748b;
}
.wfp-addr span { overflow: hidden; text-overflow: ellipsis; }
.wfp-addr b { color: #0f172a; font-weight: 500; }
.wfp-tab { position: relative; width: 100%; background: #f8fafc; overflow: hidden; }
.wfp-tab img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.wfp-ring {
  border-radius: 3px; pointer-events: none;
  box-shadow: 0 0 0 1.5px #2563eb, 0 0 0 4px rgba(37, 99, 235, 0.28);
  transition: left 200ms cubic-bezier(0.23, 1, 0.32, 1), top 200ms cubic-bezier(0.23, 1, 0.32, 1), width 200ms cubic-bezier(0.23, 1, 0.32, 1), height 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
.wfp-state {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 16px; text-align: center; background: #f8fafc;
}
/* A message instead of a frame: at least 16:9, taller when a narrow card needs room for it */
.wfp-tab.is-state { aspect-ratio: auto !important; }
.wfp-tab.is-state .wfp-state { position: relative; inset: auto; aspect-ratio: 16 / 9; }
.wfp-state-icon { width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 1px solid #e2e8f0; display: grid; place-items: center; margin-bottom: 6px; }
.wfp-state-title { font-size: 0.88rem; font-weight: 600; color: #0f172a; line-height: 1.35; }
.wfp-state-text { font-size: 0.8rem; color: #64748b; line-height: 1.4; }
.wfp-btn {
  margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
  background: #2563eb; color: #fff; border: none; border-radius: 8px; cursor: pointer;
  font: inherit; font-size: 0.82rem; font-weight: 600; transition: transform 120ms ease-out, background-color 120ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .wfp-btn:hover { background: #1d4ed8; }
}
.wfp-btn:active { transform: scale(0.97); }
.wfp-under {
  max-width: 560px; margin: 14px auto 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 0.82rem; line-height: 1.4; color: #64748b;
}
.wfp-live { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wfp-live b { color: var(--chat-ok-ink); font-weight: 600; }
.wfp-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--chat-ok); box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.14); }
.wfp-dot.is-off { background: var(--chat-faint); box-shadow: none; }
.wfp-sep { width: 1px; height: 14px; background: var(--chat-fill-2); }
.wfp-now { font-weight: 600; color: var(--chat-ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }
.wfp-val { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wfp-count { margin-left: auto; font-size: 0.78rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .wfp-ring, .wfp-mac, .wfp-open { transition: none; } }

/* ── Run card: the road (workflowRunCard.js roadHtml) ──
   With the preview stacked on top (the card under 720px: a phone, most chats), the steps go by under it
   like stops on a road: the one under way a little right of the middle, done ones passing off to the left, the road ahead
   dashed, a flag where the run ended. The preview keeps the room; the road is one row. A wider card keeps
   the list beside its preview, so the road only shows in the stacked layout. */
.wfj { display: none; }
@container (max-width: 720px) {
  .wfp-body > .wfp-steps { display: none; }
  .wfj { display: block; margin-top: -4px; }
  /* the road says which step is going on; the line under the preview keeps Live and the step's number */
  .wfp-under .wfp-sep, .wfp-under .wfp-now, .wfp-under .wfp-val { display: none; }
}
.wfj-track {
  --wfj-stop: 132px;
  /* the step under way sits at 60% across (more of the road behind than ahead, which is unknown) */
  position: relative; display: flex; margin: 0; padding: 6px calc(40% - var(--wfj-stop) / 2) 4px calc(60% - var(--wfj-stop) / 2); list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  /* stops fade in and out at the road's ends */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
}
.wfj-track::-webkit-scrollbar { display: none; }
.wfj-stop { position: relative; flex: none; width: var(--wfj-stop); }
/* The road through each stop: in from the left, on to the next one (dashed ahead of the step under way) */
.wfj-stop::before, .wfj-stop::after {
  content: ""; position: absolute; top: 14px; width: 50%; height: 2px; background: var(--chat-ok-line);
}
.wfj-stop::before { left: 0; }
.wfj-stop::after { right: 0; }
.wfj-stop:first-child::before { display: none; }
.wfj-track.is-going .wfj-stop.is-last::after {
  background: repeating-linear-gradient(to right, var(--chat-line-strong) 0 6px, transparent 6px 11px);
}
.wfj-pick {
  display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; padding: 0 8px 4px;
  background: none; border: 0; border-radius: 12px; font: inherit; color: inherit; text-align: center; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.wfj-pick:focus-visible { outline: 2px solid var(--chat-accent); outline-offset: 2px; }
.wfj-node {
  position: relative; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--chat-surface); box-shadow: 0 0 0 2px var(--chat-line);
  transition: transform 160ms var(--ease-out), box-shadow 200ms ease;
}
.wfj-pick:active .wfj-node { transform: scale(0.94); }
.wfj-stop.is-ok .wfj-node { box-shadow: 0 0 0 2px var(--chat-ok-line); }
.wfj-stop.is-failed .wfj-node { box-shadow: 0 0 0 2px var(--chat-bad-line); }
.wfj-stop.is-running .wfj-node { box-shadow: 0 0 0 2px var(--chat-accent), 0 0 0 6px var(--chat-accent-soft); }
.wfj-label {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 0.8rem; line-height: 1.3; color: var(--chat-muted); transition: color 150ms ease;
}
.wfj-stop.is-picked .wfj-label { color: var(--chat-ink); font-weight: 600; }
.wfj-stop.is-failed .wfj-label { color: var(--chat-bad-ink); }
.wfj-time { font-size: 0.72rem; line-height: 1; color: var(--chat-faint); font-variant-numeric: tabular-nums; min-height: 0.72rem; }
@media (hover: hover) and (pointer: fine) {
  .wfj-pick:hover .wfj-label { color: var(--chat-ink-2); }
}
/* A step that just started comes in from the right as the road glides it to the middle */
.wfj-stop.is-new { animation: wfj-in 320ms var(--ease-out) both; }
@keyframes wfj-in { from { opacity: 0; transform: translateX(28px); } }
/* Past the last stop: the road ahead fading out while the run goes on, else the flag it ended at */
.wfj-end { position: relative; flex: none; width: 72px; }
.wfj-end::before { content: ""; position: absolute; top: 14px; left: 0; right: 0; height: 2px; }
.wfj-end.is-ahead::before {
  background: repeating-linear-gradient(to right, var(--chat-line-strong) 0 6px, transparent 6px 11px);
  -webkit-mask-image: linear-gradient(to right, #000, transparent); mask-image: linear-gradient(to right, #000, transparent);
}
.wfj-end:not(.is-ahead)::before { right: 50%; background: var(--chat-ok-line); }
.wfj-end.is-failed::before { background: var(--chat-bad-line); }
.wfj-end.is-stopped::before, .wfj-end.is-yours::before { background: var(--chat-line-strong); }
.wfj-flag {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%); display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%; background: var(--chat-ok-soft); color: var(--chat-ok);
}
.wfj-end.is-failed .wfj-flag { background: var(--chat-bad-soft); color: var(--chat-bad); }
.wfj-end.is-yours .wfj-flag { background: var(--chat-warn-soft); color: var(--chat-warn); }
.wfj-end.is-stopped .wfj-flag { background: var(--chat-fill); color: var(--chat-muted); }
/* What the chosen stop has to say: its detail, an error, or that it waits for the student */
.wfj-note {
  display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 4px 0 0; padding: 0 12px;
  font-size: 0.8rem; line-height: 1.4; color: var(--chat-muted); text-align: center; overflow-wrap: anywhere;
}
.wfj-note .is-error { color: var(--chat-bad-ink); }
.wfj-note .is-wait { color: var(--chat-warn-ink); font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
  .wfj-stop.is-new { animation: none; }
  .wfj-node, .wfj-label { transition: none; }
}

/* ── Input bar: the round button as "stop" (an answer streaming, a workflow running) ── */
.starman-pill-mic-btn.is-stop { background: var(--chat-stop-bg); color: var(--chat-stop-ink); box-shadow: 0 4px 14px rgba(15, 23, 42, 0.22); }
@media (hover: hover) and (pointer: fine) {
  .starman-pill-mic-btn.is-stop:hover { background: var(--chat-ink-3); }
}
.starman-pill-mic-btn.is-stop svg { width: 18px; height: 18px; }
.starman-stopped-note {
  display: flex; width: fit-content; align-items: center; gap: 6px; margin-top: 10px;
  font-size: 0.82rem; line-height: 1.4; color: var(--chat-muted);
}
.starman-stopped-note svg { width: 12px; height: 12px; color: var(--chat-faint); flex-shrink: 0; }
.starman-stopped-row { margin: -16px 0 28px 64px; }

/* ── Input bar: speaking into the box (views/starman.js, js/voice/) ──
   While the mic is open the bar takes the accent ring and an amber dot (the mic is on), the round
   button is ✓ (done: the words stay in the box) and a quiet × beside it throws them away. The mic card
   sits over the bar, grown from the round button: the primer before Chrome's own question about the
   microphone, the blocked mic, or a one-line note that goes by itself. */
.starman-input-pill.is-dictating {
  border-color: var(--chat-accent);
  box-shadow: 0 8px 30px -4px rgba(37, 99, 235, 0.15), 0 0 0 3px var(--chat-accent-tint);
}
.starman-input-pill.is-dictating::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-left: 2px;
  border-radius: 50%;
  background: var(--chat-amber);
  animation: starman-mic-dot 1.1s ease-in-out infinite alternate;
}
@keyframes starman-mic-dot { to { opacity: 0.35; } }
.starman-pill-mic-btn.is-listening { box-shadow: 0 0 0 4px var(--chat-accent-tint), 0 4px 14px rgba(37, 99, 235, 0.35); }
.starman-pill-discard-btn {
  width: 36px;
  height: 36px;
  margin-right: 6px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--chat-fill);
  color: var(--chat-ink-4);
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, transform 160ms var(--ease-out);
}
.starman-pill-discard-btn svg { width: 16px; height: 16px; }
.starman-pill-discard-btn:active { transform: scale(0.97); }

.starman-mic-card {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  z-index: 5;
  width: min(360px, 100%);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 40px 14px 14px;
  border: 1px solid var(--chat-line);
  border-radius: 18px;
  background: var(--chat-surface);
  box-shadow: var(--chat-card-shadow), 0 16px 40px -12px rgba(15, 23, 42, 0.22);
  color: var(--chat-ink);
  text-align: left;
  transform-origin: bottom right;
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}
@starting-style {
  .starman-mic-card { opacity: 0; transform: translateY(6px) scale(0.97); }
}
.starman-mic-card.is-primer { padding-right: 14px; }
.starman-mic-card-icon {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--chat-accent-soft);
  color: var(--chat-accent-ink);
}
.starman-mic-card-icon svg { width: 18px; height: 18px; }
.starman-mic-card.is-warn .starman-mic-card-icon { background: var(--chat-warn-soft); color: var(--chat-warn-ink); }
.starman-mic-card-body { flex: 1; min-width: 0; }
.starman-mic-card-title { margin: 0; font-size: 0.95rem; font-weight: 600; line-height: 1.35; color: var(--chat-ink); }
.starman-mic-card-text { margin: 4px 0 0; font-size: 0.85rem; line-height: 1.5; color: var(--chat-ink-3); }
.starman-mic-card-hint { margin: 8px 0 0; font-size: 0.8rem; line-height: 1.5; color: var(--chat-muted); }
.starman-mic-card kbd {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid var(--chat-line-strong);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--chat-surface-2);
  color: var(--chat-ink-3);
  font: 600 0.72rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.starman-mic-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.starman-mic-card-btn {
  padding: 8px 14px;
  border: 1px solid var(--chat-line-strong);
  border-radius: 10px;
  background: var(--chat-surface);
  color: var(--chat-ink);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, transform 160ms var(--ease-out);
}
.starman-mic-card-btn.is-primary { background: var(--chat-accent); border-color: var(--chat-accent); color: #ffffff; }
.starman-mic-card-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--chat-muted);
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, transform 160ms var(--ease-out);
}
.starman-mic-card-close svg { width: 15px; height: 15px; }
.starman-mic-card-btn:active, .starman-mic-card-close:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .starman-pill-discard-btn:hover { background: var(--chat-fill-2); color: var(--chat-ink-2); }
  .starman-mic-card-btn:hover { background: var(--chat-fill); }
  .starman-mic-card-btn.is-primary:hover { background: var(--chat-accent-hover); border-color: var(--chat-accent-hover); }
  .starman-mic-card-close:hover { background: var(--chat-fill); color: var(--chat-ink-2); }
}
/* A note: one line beside its icon */
.starman-mic-card.is-note { align-items: center; padding: 10px 40px 10px 10px; border-radius: 14px; }
.starman-mic-card.is-note .starman-mic-card-icon { width: 28px; height: 28px; border-radius: 9px; }
.starman-mic-card.is-note .starman-mic-card-icon svg { width: 15px; height: 15px; }
.starman-mic-card.is-note .starman-mic-card-text { flex: 1; min-width: 0; margin: 0; }
.starman-mic-card.is-note .starman-mic-card-close { top: 50%; margin-top: -14px; }
@media (prefers-reduced-motion: reduce) {
  .starman-input-pill.is-dictating::before { animation: none; }
  .starman-mic-card { transition: opacity 150ms ease; }
}

/* ── Talk mode (js/voice/talk.js, bar.js): the voice bar in the chat box's place ──
   One job per state, at most three controls. The accent ring means the mic is open, the amber dot
   too; green while Starman speaks; amber edge when the mic is paused or closed with nothing heard.
   The chat box's Talk toggle (audio-lines) shows only when starman-voice offers Talk mode. */
.starman-input-box.is-talk .starman-input-pill { display: none; }
.starman-pill-talk-btn {
  width: 36px;
  height: 36px;
  margin-right: 6px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--chat-fill);
  color: var(--chat-ink-4);
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, transform 160ms var(--ease-out);
}
.starman-pill-talk-btn svg { width: 17px; height: 17px; }
.starman-pill-talk-btn.is-on { background: var(--chat-accent-soft); color: var(--chat-accent-ink); }
.starman-pill-talk-btn:active { transform: scale(0.97); }

.vbar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 7px 8px;
  border: 1.5px solid var(--chat-line);
  border-radius: 9999px;
  background: var(--chat-surface);
  box-shadow: var(--chat-pill-shadow);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.vbar.is-live { border-color: var(--chat-accent); box-shadow: 0 8px 30px -4px rgba(37, 99, 235, 0.15), 0 0 0 3px var(--chat-accent-tint); }
.vbar.is-ok { border-color: var(--chat-ok-line); }
.vbar.is-hold { border-color: var(--chat-warn-line); }
.vbar-mark {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--chat-accent-soft);
  color: var(--chat-accent-ink);
}
.vbar-mark svg { width: 20px; height: 20px; }
.vbar.is-hold .vbar-mark { background: var(--chat-warn-soft); color: var(--chat-warn-ink); }
.vbar.is-ok .vbar-mark { background: var(--chat-ok-soft); color: var(--chat-ok-ink); }
.vbar-what { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.vbar-state {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--chat-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vbar.is-live .vbar-state { color: var(--chat-accent-ink); }
.vbar.is-ok .vbar-state { color: var(--chat-ok-ink); }
.vbar.is-hold .vbar-state { color: var(--chat-warn-ink); }
.vbar-state svg { width: 13px; height: 13px; flex: none; }
.vbar-cap { min-width: 0; font-size: 0.92rem; line-height: 1.4; color: var(--chat-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vbar-hint { color: var(--chat-muted); }
.vbar-said { color: var(--chat-ink-3); }
.vbar-bars { display: inline-flex; align-items: center; gap: 2.5px; height: 14px; flex: none; }
.vbar-bars i { display: block; width: 3px; height: 100%; border-radius: 3px; background: var(--chat-accent); transform: scaleY(0.3); transition: transform 90ms linear; }
.vbar.is-ok .vbar-bars i { background: var(--chat-ok); }
.vbar-shimmer {
  background: linear-gradient(90deg, var(--chat-muted) 0%, var(--chat-ink) 45%, var(--chat-muted) 90%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: vbar-shimmer 1.4s linear infinite;
}
@keyframes vbar-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.vbar-spin { animation: vbar-spin 1s linear infinite; }
@keyframes vbar-spin { to { transform: rotate(360deg); } }
.vbar-ctrls { flex: none; display: flex; align-items: center; gap: 6px; }
.vbar-btn {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--chat-accent);
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
  transition: background-color 150ms ease, transform 160ms var(--ease-out);
}
.vbar-btn svg { width: 20px; height: 20px; }
.vbar-btn.is-ghost { width: 38px; height: 38px; background: var(--chat-fill); color: var(--chat-ink-3); box-shadow: none; }
.vbar-btn.is-ghost svg { width: 17px; height: 17px; }
.vbar-btn.is-ring { box-shadow: 0 0 0 4px var(--chat-accent-tint), 0 4px 14px rgba(37, 99, 235, 0.35); }
.vbar-btn.is-stop { background: var(--chat-stop-bg); color: var(--chat-stop-ink); box-shadow: none; }
.vbar-btn.is-stop svg { width: 18px; height: 18px; }
.vbar-text-btn {
  padding: 10px 16px;
  border: 1px solid var(--chat-line-strong);
  border-radius: 9999px;
  background: var(--chat-surface);
  color: var(--chat-ink);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 150ms ease, transform 160ms var(--ease-out);
}
.vbar-text-btn.is-primary { background: var(--chat-accent); border-color: var(--chat-accent); color: #ffffff; }
.vbar-btn:active, .vbar-text-btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .starman-pill-talk-btn:hover { background: var(--chat-fill-2); color: var(--chat-ink-2); }
  .vbar-btn:hover { background: var(--chat-accent-hover); }
  .vbar-btn.is-ghost:hover { background: var(--chat-fill-2); }
  .vbar-btn.is-stop:hover { background: var(--chat-ink-3); }
  .vbar-text-btn.is-primary:hover { background: var(--chat-accent-hover); }
}
/* The primer and the blocked mic need their words: the bar grows into a rounded card */
.vbar[data-phase="ready"]:has(.vbar-text-btn), .vbar.is-hold:has(.vbar-hint) { border-radius: 22px; }
.vbar[data-phase="ready"]:has(.vbar-text-btn) .vbar-cap, .vbar.is-hold .vbar-cap { white-space: normal; }
/* Talk mode numbers a question's options as Starman says them ("One, Night Leave") */
:root[data-voice-talk="on"] .wfq-turn.is-now > .wfq-chips { counter-reset: talk-option; }
:root[data-voice-talk="on"] .wfq-turn.is-now > .wfq-chips > .wfq-chip:not(.is-quiet)::before {
  counter-increment: talk-option;
  content: counter(talk-option);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  background: var(--chat-fill);
  color: var(--chat-ink-3);
  font-size: 0.7rem;
  font-weight: 700;
}
.settings-voice-head { display: flex; align-items: center; gap: 6px; }
.settings-voice-head svg { width: 14px; height: 14px; }
/* Touch screens (phones, tablets): no Space bar to hold, so its hints and its setting hide; the bar's
   small buttons grow to a full 44px target */
@media (hover: none) and (pointer: coarse) {
  .voice-keys, .settings-row.voice-keys, .settings-section.voice-keys, .starman-mic-card-hint.voice-keys { display: none; }
  .vbar-btn.is-ghost { width: 44px; height: 44px; }
}
@media (max-width: 640px) {
  .vbar { gap: 8px; min-height: 56px; padding: 6px; }
  .vbar-mark { width: 34px; height: 34px; }
  .vbar-mark svg { width: 17px; height: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .vbar-bars i { transform: scaleY(0.6) !important; transition: none; }
  .vbar-shimmer { animation: none; color: var(--chat-muted); background: none; }
  .vbar-spin { animation: none; }
}

/* ── Agent panel: the right column of the Starman view (js/components/agentPanel.js) ── */
.agent-panel {
  --ap-ink: #0f172a; --ap-muted: #64748b; --ap-faint: #94a3b8; --ap-line: #e8ebf0;
  --ap-fill: #f1f5f9; --ap-bg: #ffffff; --ap-accent: #2563eb; --ap-soft: #334155;
  --ap-user-bg: #dbeafe; --ap-user-ink: #1e40af; --ap-user-empty: #f1f5f9; /* solid: these sit over Starman's avatar */
  position: relative; flex: none; width: 400px; max-width: 100vw; height: 100vh; display: flex; flex-direction: column;
  background: var(--ap-bg); border-left: 1px solid var(--ap-line); color: var(--ap-ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; z-index: 101;
}
.agent-panel[hidden] { display: none; }
[data-theme="dark"] .agent-panel {
  --ap-ink: #f1f5f9; --ap-muted: #94a3b8; --ap-faint: #64748b; --ap-line: rgba(255, 255, 255, 0.08);
  --ap-fill: rgba(255, 255, 255, 0.06); --ap-bg: #11141d; --ap-accent: #7aa2ff; --ap-soft: #cbd5e1;
  --ap-user-bg: #242e46; --ap-user-ink: #c7d7ff; --ap-user-empty: #1f2430;
}
/* Narrow windows: it floats over the chat instead of taking room from it */
@media (max-width: 1099px) {
  .agent-panel { position: fixed; top: 0; right: 0; bottom: 0; height: auto; z-index: 1001; box-shadow: -16px 0 40px -12px rgba(15, 23, 42, 0.22); }
}
.agent-panel-close {
  position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; padding: 0;
  display: grid; place-items: center; background: none; border: none; border-radius: 8px;
  color: var(--ap-muted); cursor: pointer; transition: background-color 120ms ease, color 120ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .agent-panel-close:hover { background: var(--ap-fill); color: var(--ap-ink); }
}
.agent-panel-close:active { transform: scale(0.96); }
.agent-panel-close:focus-visible { outline: 2px solid var(--ap-accent); outline-offset: -2px; }
.agent-panel-close svg { width: 18px; height: 18px; }
/* Brings the panel back once it's closed (or wasn't shown, on a narrow window): where its × was */
.agent-panel-reopen {
  position: fixed; top: 16px; right: 16px; z-index: 1000; width: 36px; height: 36px; padding: 0;
  display: grid; place-items: center; border: 1px solid #e8ebf0; border-radius: 10px;
  background: rgba(255, 255, 255, 0.92); color: #64748b; cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.08);
  transition: color 150ms ease-out, background-color 150ms ease-out, transform 150ms ease-out;
}
.agent-panel-reopen[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) {
  .agent-panel-reopen:hover { color: #0f172a; background: #ffffff; }
}
.agent-panel-reopen:active { transform: scale(0.96); }
.agent-panel-reopen:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.agent-panel-reopen svg { width: 18px; height: 18px; }
[data-theme="dark"] .agent-panel-reopen { background: rgba(17, 20, 29, 0.92); border-color: rgba(255, 255, 255, 0.08); color: #94a3b8; }
@media (hover: hover) and (pointer: fine) {
  [data-theme="dark"] .agent-panel-reopen:hover { background: #11141d; color: #f1f5f9; }
}
.agent-panel-head { display: flex; flex-direction: column; align-items: center; padding: 56px 24px 24px; }
.agent-panel-avatars { position: relative; }
.agent-panel-avatar {
  width: 88px; height: 88px; border-radius: 50%; overflow: hidden; background: #fff;
  box-shadow: 0 0 0 3px var(--ap-bg), 0 0 0 4px var(--ap-line), 0 8px 24px -8px rgba(15, 23, 42, 0.25);
}
.agent-panel-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The user, on Starman's lower right: the panel-coloured ring cuts it out of the avatar behind */
.agent-panel-user {
  position: absolute; right: -6px; bottom: -4px; width: 36px; height: 36px;
  display: grid; place-items: center; overflow: hidden; border-radius: 50%;
  background: var(--ap-user-bg); color: var(--ap-user-ink); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em;
  box-shadow: 0 0 0 3px var(--ap-bg), 0 2px 8px -2px rgba(15, 23, 42, 0.3);
}
.agent-panel-user img { width: 100%; height: 100%; object-fit: cover; display: block; }
.agent-panel-user.is-empty { background: var(--ap-user-empty); color: var(--ap-muted); }
.agent-panel-user.is-empty svg { width: 16px; height: 16px; }
.agent-panel-name { margin-top: 18px; font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
/* In place of a status line: the user's name · the university, each cut short if it must be */
.agent-panel-who {
  margin-top: 4px; max-width: 100%; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 0.8125rem; line-height: 1.4; color: var(--ap-muted);
}
.agent-panel-username { flex: 0 1 auto; min-width: 3em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--ap-soft); }
.agent-panel-login {
  flex: none; padding: 0; background: none; border: none; border-radius: 4px;
  font: inherit; font-weight: 500; color: var(--ap-accent); cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .agent-panel-login:hover { text-decoration: underline; text-underline-offset: 2px; }
}
.agent-panel-login:focus-visible { outline: 2px solid var(--ap-accent); outline-offset: 2px; }
.agent-panel-sep { flex: none; width: 3px; height: 3px; border-radius: 50%; background: var(--ap-faint); }
.agent-panel-universe { flex: 0 1 auto; min-width: 5em; display: inline-flex; align-items: center; gap: 6px; }
.agent-panel-logo {
  flex: none; width: 16px; height: 16px; border-radius: 50%;
  background: var(--ap-fill) center / cover no-repeat; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06);
}
.agent-panel-universe-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.agent-panel-tabs {
  position: relative; margin: 0 20px; padding: 4px; height: 44px; flex: none;
  display: grid; grid-template-columns: repeat(4, 1fr); background: var(--ap-fill); border-radius: 12px;
}
.agent-panel-indicator {
  position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 4);
  border-radius: 9px; background: var(--ap-bg);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(15, 23, 42, 0.04);
  transition: transform 220ms cubic-bezier(0.23, 1, 0.32, 1);
}
.agent-panel-tab {
  position: relative; z-index: 1; display: grid; place-items: center; padding: 0;
  background: none; border: none; border-radius: 9px; color: var(--ap-muted); cursor: pointer;
  transition: color 150ms ease;
}
.agent-panel-tab svg { width: 17px; height: 17px; }
.agent-panel-tab[aria-selected="true"] { color: var(--ap-ink); }
@media (hover: hover) and (pointer: fine) {
  .agent-panel-tab:hover { color: var(--ap-ink); }
}
.agent-panel-tab:focus-visible { outline: 2px solid var(--ap-accent); outline-offset: -2px; }

.agent-panel-body { flex: 1; min-height: 0; overflow-y: auto; padding: 24px 20px; }
.agent-panel-section { font-size: 0.8125rem; font-weight: 600; color: var(--ap-ink); margin-bottom: 12px; }
.agent-panel-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 16px; }
.agent-panel-empty-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--ap-fill); color: var(--ap-muted); display: grid; place-items: center; margin-bottom: 12px; }
.agent-panel-empty-icon svg { width: 18px; height: 18px; }
.agent-panel-empty-title { font-size: 0.875rem; font-weight: 600; color: var(--ap-ink); }
.agent-panel-empty-hint { margin-top: 4px; max-width: 240px; font-size: 0.8125rem; line-height: 1.45; color: var(--ap-muted); text-wrap: pretty; }

@media (prefers-reduced-motion: reduce) { .agent-panel-indicator { transition: none; } }

/* ── Run card: what a read skill read (workflowRunCard.js readsPanel) ── */
.wfr { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--chat-line-soft); }
.wfr-status { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--chat-muted); }
.wfr-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.wfr-title { font-weight: 600; font-size: 0.95rem; color: var(--chat-ink); }
.wfr-count {
  font-size: 0.75rem; font-weight: 600; color: var(--chat-ink-4); background: var(--chat-fill); border-radius: 999px;
  padding: 1px 8px; font-variant-numeric: tabular-nums;
}
/* Each record its own card: a lifted surface with a hairline edge; its mark (the title's first letter) and
   title on top, its short values as facts (a small label over the value, side by side), long text under a
   hairline, three lines until clicked */
.wfr-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.wfr-item {
  min-width: 0; padding: 14px 16px; border: 1px solid var(--chat-line-soft); border-radius: 16px; background: var(--chat-surface);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 16px -10px rgba(15, 23, 42, 0.14);
}
.wfr-top { display: flex; align-items: flex-start; gap: 12px; }
.wfr-mark {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  background: var(--chat-accent-tint); color: var(--chat-accent-ink); font-size: 0.9rem; font-weight: 700; line-height: 1;
}
.wfr-primary { min-width: 0; align-self: center; font-size: 0.95rem; font-weight: 600; color: var(--chat-ink); line-height: 1.35; letter-spacing: -0.005em; overflow-wrap: anywhere; }
.wfr-meta { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px 16px; margin: 12px 0 0; }
.wfr-fact { min-width: 0; }
.wfr-fact.is-wide { grid-column: 1 / -1; }
.wfr-fact dd { margin: 2px 0 0; font-size: 0.86rem; font-weight: 500; color: var(--chat-ink-2); line-height: 1.4; overflow-wrap: anywhere; }
.wfr-label { display: block; font-size: 0.72rem; font-weight: 500; color: var(--chat-muted); letter-spacing: 0.01em; line-height: 1.3; }
/* A list's one-line summary (questions: right / wrong, or obtained of max) */
.wfr-sum { margin: -2px 0 6px; font-size: 0.82rem; color: var(--chat-ink-4); font-variant-numeric: tabular-nums; }
/* A picture read off the portal (the OMR sheet): framed, larger on a click */
.wfr-figure { margin: 10px 0 0; }
.wfr-figure figcaption { margin-top: 6px; font-size: 0.75rem; color: var(--chat-muted); }
.wfr-picture {
  display: block; padding: 0; border: 1px solid var(--chat-line); border-radius: 10px; background: var(--chat-surface); overflow: hidden;
  cursor: zoom-in; max-width: 100%; transition: border-color 150ms ease, transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
}
.wfr-picture img { display: block; max-width: 100%; max-height: 360px; object-fit: contain; }
.wfr-picture.is-thumb { display: inline-block; margin-top: 6px; }
.wfr-picture.is-thumb img { max-height: 72px; }
@media (hover: hover) and (pointer: fine) { .wfr-picture:hover { border-color: var(--chat-line-strong); } }
.wfr-picture:active { transform: scale(0.99); }
.wfr-picture:focus-visible { outline: 2px solid var(--chat-accent); outline-offset: 2px; }
.wfr-lightbox {
  position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 32px;
  background: rgba(15, 23, 42, 0.72); cursor: zoom-out; animation: wfr-lightbox-in 180ms ease-out;
}
.wfr-lightbox img {
  max-width: min(100%, 1100px); max-height: calc(100vh - 64px); object-fit: contain; border-radius: 10px; background: #fff;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); animation: wfr-lightbox-img 220ms cubic-bezier(0.23, 1, 0.32, 1);
}
.wfr-lightbox-close {
  position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border: none; border-radius: 50%;
  background: rgba(255, 255, 255, 0.9); color: #0f172a; font-size: 20px; line-height: 1; cursor: pointer;
}
.wfr-lightbox-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@keyframes wfr-lightbox-in { from { opacity: 0; } }
@keyframes wfr-lightbox-img { from { opacity: 0; transform: scale(0.97); } }
@media (prefers-reduced-motion: reduce) { .wfr-lightbox, .wfr-lightbox img { animation: wfr-lightbox-in 120ms ease-out; } }
/* The records asked about first; the others as chips that show one of them instead */
.wfr-others { margin-top: 10px; }
.wfr-others-title { font-size: 0.78rem; color: var(--chat-faint); margin-bottom: 6px; }
.wfr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wfr-chip {
  background: var(--chat-surface); border: 1px solid var(--chat-line); border-radius: 20px; padding: 4px 12px; font: inherit; font-size: 0.82rem;
  color: var(--chat-ink-4); cursor: pointer; font-variant-numeric: tabular-nums;
  transition: background-color 150ms ease, border-color 150ms ease, transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
}
@media (hover: hover) and (pointer: fine) { .wfr-chip:hover { background: var(--chat-surface-2); border-color: var(--chat-line-strong); } }
.wfr-chip:active { transform: scale(0.97); }
.wfr-chip:focus-visible { outline: 2px solid var(--chat-accent); outline-offset: 2px; }
/* Single values (a CGPA): label over value, side by side */
.wfr-values { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin: 2px 0 0; }
.wfr-value { padding: 8px 12px; background: var(--chat-surface-2); border-radius: 10px; min-width: 0; }
.wfr-value.is-wide { grid-column: 1 / -1; }
.wfr-value dt { font-size: 0.75rem; color: var(--chat-muted); line-height: 1.3; }
.wfr-value dd { margin: 2px 0 0; font-size: 1.05rem; font-weight: 600; color: var(--chat-ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.wfr-text {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  width: 100%; margin: 12px 0 0; padding: 12px 0 0; border: 0; border-top: 1px solid var(--chat-line-soft); background: none;
  font: inherit; font-size: 0.85rem; color: var(--chat-ink-4); line-height: 1.55; text-align: left; white-space: pre-line; overflow-wrap: anywhere;
}
/* Text with more than shows: the clamp's "…" opens it, a second click closes it */
.wfr-text.is-more { cursor: pointer; transition: color 150ms ease; }
.wfr-text.is-more[aria-expanded="true"] { -webkit-line-clamp: unset; display: block; }
.wfr-text.is-more:focus-visible { outline: 2px solid var(--chat-accent); outline-offset: 2px; border-radius: 4px; }
@media (hover: hover) and (pointer: fine) { .wfr-text.is-more:hover { color: var(--chat-ink-2); } }
.wfr-link {
  display: inline-flex; align-items: center; gap: 2px; margin-top: 4px; font-size: 0.78rem; font-weight: 600;
  color: var(--chat-accent-ink); text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .wfr-link:hover { text-decoration: underline; }
}
.wfr-empty { font-size: 0.85rem; color: var(--chat-muted); padding: 4px 0; }
.wfr-note { margin-top: 6px; font-size: 0.78rem; color: var(--chat-faint); }
.wfr-more {
  background: none; border: none; padding: 6px 0 0; font: inherit; font-size: 0.82rem; font-weight: 600;
  color: var(--chat-accent-ink); cursor: pointer; transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
}
.wfr-status .wfr-more { padding: 0; margin-left: 4px; }
.wfr-more:active { transform: scale(0.97); }
.wfr-more:focus-visible, .wfr-link:focus-visible { outline: 2px solid var(--chat-accent); outline-offset: 2px; border-radius: 4px; }
/* An answer from a kept read: Refresh reads it again live, in place of the timer */
.wfc-refresh {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; height: 30px; padding: 0 12px;
  border: 1px solid var(--chat-line); border-radius: 999px; background: var(--chat-surface); color: var(--chat-ink-3);
  font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer;
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), background-color 160ms ease, border-color 160ms ease;
}
.wfc-refresh:active:not(:disabled) { transform: scale(0.97); }
.wfc-refresh:disabled { cursor: default; color: var(--chat-muted); }
.wfc-refresh:focus-visible { outline: 2px solid var(--chat-accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .wfc-refresh:hover:not(:disabled) { background: var(--chat-surface-2); border-color: var(--chat-line-strong); } }
/* The records ease in once, when they arrive */
.wfr.is-new .wfr-item, .wfr.is-new .wfr-value { animation: wfr-in 220ms cubic-bezier(0.23, 1, 0.32, 1) both; animation-delay: calc(var(--i, 0) * 35ms); }
@keyframes wfr-in { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) {
  .wfr.is-new .wfr-item, .wfr.is-new .wfr-value { animation-name: wfr-fade; animation-delay: 0ms; }
  @keyframes wfr-fade { from { opacity: 0; } }
}

/* ── Run card: files the run downloaded (workflowRunCard.js filesPanel, runFiles.js) ── */
.wff-list { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--chat-line-soft); }
.wff-item { width: min(100%, 300px); }
.wff {
  display: flex; flex-direction: column; width: 100%; padding: 0; border: 1px solid var(--chat-line); border-radius: 12px;
  background: var(--chat-surface); overflow: hidden; text-align: left; font: inherit; color: inherit; cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
}
@media (hover: hover) and (pointer: fine) {
  .wff:hover { border-color: var(--chat-line-strong); box-shadow: 0 6px 18px rgba(15, 23, 42, 0.07); }
  .wff:hover .wff-action { background: var(--chat-surface); color: var(--chat-accent-ink-2); }
}
.wff:active { transform: scale(0.98); }
.wff:focus-visible { outline: 2px solid var(--chat-accent); outline-offset: 2px; }
/* The top of the first page, fading out at the bottom */
.wff-preview { position: relative; display: block; height: 168px; background: var(--chat-surface-2); border-bottom: 1px solid var(--chat-line-soft); overflow: hidden; }
.wff-preview img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.wff-preview img.is-new { animation: wff-in 260ms cubic-bezier(0.23, 1, 0.32, 1); }
.wff-preview::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 36px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.92));
}
.wff-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 100%; }
.wff-placeholder.is-loading {
  background: linear-gradient(90deg, var(--chat-fill) 25%, var(--chat-surface-2) 50%, var(--chat-fill) 75%); background-size: 200% 100%;
  animation: wff-shimmer 1.2s linear infinite;
}
.wff-kind { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; color: var(--chat-muted); }
.wff-action {
  position: absolute; right: 10px; bottom: 10px; z-index: 1; display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border: 1px solid rgba(226, 232, 240, 0.9); border-radius: 999px; background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08); font-size: 0.75rem; font-weight: 600; color: var(--chat-accent-ink);
  transition: color 150ms ease, background-color 150ms ease;
}
.wff-action.is-done { color: var(--chat-ok); }
.wff-bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.wff-icon { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--chat-accent-soft); }
.wff-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.wff-name { font-size: 0.88rem; font-weight: 600; color: var(--chat-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wff-meta { font-size: 0.75rem; color: var(--chat-muted); font-variant-numeric: tabular-nums; }
.wff-note { margin-top: 6px; font-size: 0.78rem; line-height: 1.4; color: var(--chat-warn-ink); }
@keyframes wff-in { from { opacity: 0; } }
@keyframes wff-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .wff-placeholder.is-loading { animation: none; }
  .wff:active { transform: none; }
}

/* ── Run card: what next (workflowRunCard.js nextStepsPanel), like the chips under an answer ── */
/* A read run answered in words: where it was read and the rest of what it read, under the answer */
.wfa { margin-top: 12px; }
/* A read that went to the portal, answered in words: its card, this line, then the answer (renderReadAnswer) */
.wfa-divider { height: 0; margin: 18px 0 16px; border: 0; border-top: 1px solid var(--chat-line); }
.wfa-answer > :first-child { margin-top: 0; }
.wfa-answer > :last-child { margin-bottom: 0; }
.wfa-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 0.82rem; line-height: 1.5; color: var(--chat-muted); }
.wfa-src { display: inline-flex; align-items: center; gap: 6px; }
.wfa-src svg { flex-shrink: 0; }
.wfa-warn { color: var(--chat-warn-deep); }
.wfa-dot { color: var(--chat-sep); }
.wfa-link {
  display: inline-flex; align-items: center; gap: 3px; padding: 2px 0; border: 0; background: none;
  font: inherit; font-size: 0.82rem; font-weight: 600; color: var(--chat-accent-ink); cursor: pointer;
  transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
}
.wfa-link:active { transform: scale(0.97); }
.wfa-link:focus-visible { outline: 2px solid var(--chat-accent); outline-offset: 2px; border-radius: 4px; }
@media (hover: hover) and (pointer: fine) { .wfa-link:hover { text-decoration: underline; text-underline-offset: 2px; } }
.wfa-more { padding: 6px 4px; }
.wfa-full { margin-top: 10px; }
/* A just-arrived answer: its words one after another, then its footer (workflowRunCard typeInAnswer) */
.wfa-word { animation: wfa-word-in 200ms cubic-bezier(0.23, 1, 0.32, 1) both; }
@keyframes wfa-word-in { from { opacity: 0; filter: blur(2px); } to { opacity: 1; filter: none; } }
.wfa-after { animation: wfa-after-in 220ms cubic-bezier(0.23, 1, 0.32, 1) both; }
@keyframes wfa-after-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wfa-word, .wfa-after { animation: none; } }
.wfa-pending { margin-top: 0; display: flex; align-items: center; gap: 10px; font-size: 0.88rem; color: var(--chat-muted); }
/* The answer on its way: dots rising one after another, a light sweep across the words. Phases follow
   the clock (--wfa-phase), so a redrawn card carries on mid-motion */
.wfa-dots { display: inline-flex; align-items: center; gap: 4px; height: 14px; }
.wfa-dots i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--chat-faint);
  animation: wfa-dot 1.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  animation-delay: var(--wfa-phase, 0ms);
}
.wfa-dots i:nth-child(2) { animation-delay: calc(var(--wfa-phase, 0ms) + 150ms); }
.wfa-dots i:nth-child(3) { animation-delay: calc(var(--wfa-phase, 0ms) + 300ms); }
@keyframes wfa-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-3px); opacity: 1; }
}
.wfa-shimmer {
  background: linear-gradient(90deg, #64748b 0%, #64748b 35%, #cbd5e1 50%, #64748b 65%, #64748b 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: wfa-shimmer 1.8s linear infinite; animation-delay: var(--wfa-phase, 0ms);
}
@keyframes wfa-shimmer { from { background-position: 100% 0; } to { background-position: 0% 0; } }
@media (prefers-reduced-motion: reduce) {
  .wfa-dots i { animation: none; opacity: 0.7; }
  .wfa-shimmer { animation: none; background: none; color: var(--chat-muted); }
}
/* Every run-card spinner turns, also outside a card (its own <style> only comes with a whole card) */
@keyframes wf-spin { to { transform: rotate(360deg); } }
.wf-spin { animation: wf-spin 0.9s linear infinite; }
.wfa-next { margin-top: 14px; }
.wfn { display: flex; align-items: flex-start; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--chat-line-soft); }
.wfn-icon { flex-shrink: 0; margin-top: 2px; display: inline-flex; }
.wfn-main { flex: 1; min-width: 0; }
.wfn-title { font-size: 0.85rem; font-weight: 600; color: var(--chat-ink); margin-bottom: 10px; }
.wfn-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wfn-chip {
  display: inline-flex; align-items: center; gap: 6px; background: var(--chat-surface); border: 1px solid var(--chat-line); border-radius: 20px;
  padding: 6px 14px; font: inherit; font-size: 0.85rem; color: var(--chat-ink-4); cursor: pointer; text-align: left;
  transition: background-color 150ms ease, border-color 150ms ease, transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
}
@media (hover: hover) and (pointer: fine) { .wfn-chip:hover { background: var(--chat-surface-2); border-color: var(--chat-line-strong); } }
.wfn-chip:active { transform: scale(0.97); }
.wfn-chip:focus-visible { outline: 2px solid var(--chat-accent); outline-offset: 2px; }

/* ── Starman's reaction on the student's bubble (js/reactions.js): one emoji, like a friend's tap-back,
   hanging off the bubble's bottom edge near its right end (the tail joins at the corner itself) ── */
.starman-reaction {
  position: absolute; bottom: -16px; right: 16px; z-index: 3;
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--chat-surface); box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.05), 0 4px 12px rgba(15, 23, 42, 0.12);
  cursor: default; user-select: none;
}
.starman-reaction img { display: block; width: 24px; height: 24px; }
/* It pops in once, out of the bubble's edge, when it arrives; the chat drawn again shows it still */
.starman-reaction.is-new {
  transform-origin: 50% 0%;
  transition: transform 280ms cubic-bezier(0.34, 1.45, 0.64, 1), opacity 140ms ease-out;
}
@starting-style {
  .starman-reaction.is-new { opacity: 0; transform: scale(0.6) rotate(-10deg); }
}
/* "Just now" under the bubble makes room for it (eased when it arrives, still when the chat is drawn again) */
.starman-user-meta { margin-top: 6px; transition: margin-top 200ms cubic-bezier(0.23, 1, 0.32, 1); }
.starman-user-row-wrapper:has(.starman-reaction) .starman-user-meta { margin-top: 24px; }
/* Copy and retry, left of "Just now": shown while the question is hovered (always, on touch) */
.starman-query-actions {
  display: inline-flex; align-items: center; gap: 2px; margin-right: 6px;
  opacity: 0; transition: opacity 150ms ease-out;
}
.starman-query-actions:focus-within { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .starman-user-row-wrapper:hover .starman-query-actions { opacity: 1; }
}
@media (hover: none) { .starman-query-actions { opacity: 1; } }
.starman-query-action {
  display: grid; place-items: center; width: 26px; height: 26px; padding: 0;
  border: none; border-radius: 8px; background: transparent; color: var(--chat-faint); cursor: pointer;
  transition: color 150ms ease-out, background-color 150ms ease-out, transform 150ms ease-out;
}
.starman-query-action svg { width: 14px; height: 14px; }
@media (hover: hover) and (pointer: fine) {
  .starman-query-action:hover { color: var(--chat-ink-3); background: var(--chat-fill); }
}
.starman-query-action:active { transform: scale(0.97); }
.starman-query-action:focus-visible { outline: 2px solid var(--chat-accent); outline-offset: 1px; }
.starman-query-action.is-copied { color: var(--chat-ok); }
.is-answering .starman-query-retry { opacity: 0.35; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .starman-reaction.is-new { transition: opacity 150ms ease-out; }
  @starting-style { .starman-reaction.is-new { transform: none; } }
  .starman-user-meta { transition: none; }
}

/* ── A run asking in the chat (workflowRunCard.js askDeck): one row of cards right under the road, so the
   preview stays in view however many questions come. One card at a time, the full width: the one waiting
   at the row's end (Starman's question, the page's options as chips, or the run's own ask in its box);
   answered ones (the question, the student's answer as their bubble) off to the left, a swipe away ── */
.wfq { margin-top: 12px; }
.wfq-track {
  display: flex; align-items: flex-start; gap: 12px; padding: 1px;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-snap-type: x mandatory;
}
.wfq-track::-webkit-scrollbar { display: none; }
.wfq-track.is-gliding { scroll-snap-type: none; }
.wfq-card {
  flex: none; width: 100%; scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 12px; padding: 12px 14px;
  border: 1px solid var(--chat-line-soft); border-radius: 16px; background: var(--chat-surface-2);
}
.wfq-card:not(.is-now) .wfq-ask { font-size: 0.88rem; }
.wfq-card.is-now { border-color: var(--chat-line); background: var(--chat-surface); }
/* The run's own asks (its go-ahead, your tab, sign in, hand back) are boxes already: no card around them,
   and none of the room they had above them under the steps */
.wfq-card.is-box { padding: 0; border: 0; background: none; }
.wfq-card > div[style] { margin-top: 0 !important; }
.wfq-turn { display: flex; flex-direction: column; gap: 8px; }
.wfq-ask { align-self: flex-start; max-width: 92%; font-size: 0.95rem; line-height: 1.5; color: var(--chat-ink-3); }
.wfq-turn.is-now .wfq-ask { color: var(--chat-ink); font-weight: 600; }
.wfq-reply {
  align-self: flex-end; max-width: 80%; padding: 7px 14px; border-radius: 18px 18px 4px 18px;
  background: var(--chat-user-bg); color: var(--chat-user-ink); font-size: 0.92rem; font-weight: 500; line-height: 1.45; word-break: break-word;
}
.wfq-reply.is-pending { opacity: 0.6; }
.wfq-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wfq-chip {
  display: inline-flex; align-items: center; gap: 6px; background: var(--chat-surface); border: 1px solid var(--chat-line); border-radius: 20px;
  padding: 7px 14px; font: inherit; font-size: 0.88rem; color: var(--chat-ink-2); cursor: pointer; text-align: left;
  transition: background-color 150ms ease, border-color 150ms ease, transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
}
@media (hover: hover) and (pointer: fine) { .wfq-chip:hover { background: var(--chat-surface-2); border-color: var(--chat-line-strong); } }
.wfq-chip:active { transform: scale(0.97); }
.wfq-chip:focus-visible, .wfq-pick:focus-visible { outline: 2px solid var(--chat-accent); outline-offset: 2px; }
.wfq-chip.is-quiet { color: var(--chat-muted); }
.wfq-chip.is-usual { color: var(--chat-ok-ink); border-color: var(--chat-ok-line); background: var(--chat-ok-soft); }
.wfq-chip.is-fix { color: var(--chat-accent-ink-2); border-color: var(--chat-accent-line); background: var(--chat-accent-soft); }
/* What the student's request points to ("From what you said"): the answer they most likely mean, never picked for them */
.wfq-chip.is-said { color: var(--chat-ink); border-color: var(--chat-faint); font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .wfq-chip.is-said:hover { border-color: var(--chat-muted); } }
.wfq-chip.is-primary { color: #fff; border-color: var(--chat-accent); background: var(--chat-accent); font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .wfq-chip.is-primary:hover { background: var(--chat-accent-hover); border-color: var(--chat-accent-hover); } }
.wfq-pick {
  border: 1px solid var(--chat-line); border-radius: 20px; padding: 6px 12px; font: inherit; font-size: 0.88rem;
  color: var(--chat-ink-2); background: var(--chat-surface);
}
.wfq-masked { display: flex; gap: 8px; width: 100%; }
.wfq-masked input {
  flex: 1; min-width: 0; border: 1px solid var(--chat-line-strong); border-radius: 20px; padding: 7px 14px; font: inherit; font-size: 0.9rem;
}
.wfq-hint { font-size: 0.8rem; color: var(--chat-muted); }
.wfq-note { font-size: 0.84rem; color: var(--chat-muted); }
.wfq-note.is-error { color: var(--chat-bad-ink); }
/* A new question comes in once (the card redraws on every event: only a new one fades in) */
.wfq-turn.is-new { animation: wfq-in 180ms cubic-bezier(0.23, 1, 0.32, 1); }
@keyframes wfq-in { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .wfq-turn.is-new { animation: wfq-fade 120ms ease-out; } }
@keyframes wfq-fade { from { opacity: 0; } }
/* What a run took from the student's words instead of asking */
.wfq-understood { color: var(--chat-ink-4); font-size: 0.88rem; }
.wfq-understood span { color: var(--chat-ink); font-weight: 500; }
/* A question several options may answer: the picked ones, plainly picked */
.wfq-chip.is-on { color: #fff; border-color: var(--chat-accent); background: var(--chat-accent); font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .wfq-chip.is-on:hover { background: var(--chat-accent-hover); border-color: var(--chat-accent-hover); } }
.wfq-chip:disabled { opacity: 0.5; cursor: default; transform: none; }

/* The question's recommendation and its buttons, each on a line of its own under the options */
.wfq-turn.is-now { gap: 10px; }
.wfq-turn.is-now .wfq-ask { font-size: 1rem; }
.wfq-section { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--chat-line-soft); }
.wfq-section-label { font-size: 0.8rem; color: var(--chat-muted); }
.wfq-actions { flex-direction: row; align-items: center; gap: 10px; }
.wfq-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 20px;
  border: 1px solid var(--chat-line); border-radius: 12px; background: var(--chat-surface); color: var(--chat-ink);
  font: inherit; font-size: 0.92rem; font-weight: 600; cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
}
.wfq-btn.is-primary { min-width: 128px; border-color: var(--chat-accent); background: var(--chat-accent); color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .wfq-btn:hover { background: var(--chat-surface-2); border-color: var(--chat-line-strong); }
  .wfq-btn.is-primary:hover { background: var(--chat-accent-hover); border-color: var(--chat-accent-hover); }
}
.wfq-btn:active { transform: scale(0.97); }
.wfq-btn:focus-visible { outline: 2px solid var(--chat-accent); outline-offset: 2px; }
.wfq-btn:disabled { opacity: 0.45; cursor: default; transform: none; }
@media (prefers-reduced-motion: reduce) { .wfq-btn, .wfq-chip { transition: background-color 150ms ease, border-color 150ms ease; } }

/* ── The home and the chat in a narrow column, and on a phone ──
   Narrow is the column, not the window (#starman-content-container is the size container): a phone,
   or a laptop with the sidebar open and the panel docked. The rows then take the whole width, with
   smaller avatars, a bubble and a card that pad less, and the input bar close to the screen's edges. */
@container starman (max-width: 600px) {
  .starman-messages-container { padding: 120px 12px 24px; gap: 1rem; --chat-fade-top: 116px; }
  .starman-bottom-input-container { padding: 8px 12px max(14px, env(safe-area-inset-bottom)); }

  .starman-user-row { max-width: 92%; }
  .starman-user-bubble { padding: 12px 18px; border-radius: 22px 20px 0 22px; font-size: 1rem; }
  .starman-user-tail { right: -31px; width: 32px; height: 29px; }
  .starman-user-face-slot { margin: 0 0 6px 14px; }
  .starman-chat-face { width: 32px; height: 32px; border-width: 2px; }
  .starman-chat-face.is-initials { font-size: 0.72rem; }
  .starman-chat-face.is-initials svg { width: 16px; height: 16px; }
  .starman-user-meta { margin-right: 46px; }

  .starman-bot-row { gap: 10px; margin-bottom: 24px; }
  .starman-bot-row > .starman-bot-wrapper { max-width: none; }
  /* A still's size is written inline (js/avatar/markup.js), hence !important */
  .starman-row-avatar { width: 32px; height: 32px; }
  .starman-row-avatar > starman-avatar:not(.starman-row-live) { width: 32px !important; height: 32px !important; border-width: 2px !important; }
  .starman-row-live { top: -8px; width: 56px; height: 80px; margin-left: -28px; }
  .starman-bot-body { padding: 16px; border-radius: 20px; font-size: 0.98rem; line-height: 1.65; }
  .starman-stopped-row { margin-left: 42px; }

  /* Home: the quick asks two by two, a little tighter */
  .starman-quick-card { padding: 12px; }
}
/* A phone's column: one ask a row, so a skill's whole name fits (two by two cut most of them short) */
@container starman (max-width: 440px) {
  .starman-cards-grid { grid-template-columns: 1fr; gap: 8px; }
  .starman-quick-card { padding: 8px 12px; }
  .starman-quick-card .starman-card-icon { width: 32px; height: 32px; }
  .starman-quick-card.is-placeholder { min-height: 50px; }
}

/* Phones: the home's greeting and the chat's header (Starman over the horizon) take less height,
   and stay clear of the menu and panel buttons in the top corners */
@media (max-width: 640px) {
  .starman-hero-view { padding: 72px 1rem 1.25rem; }
  .starman-hero-img-wrapper { height: 200px; }
  .starman-headline { margin-top: 12px; font-size: 1.85rem; }
  .starman-subtitle { font-size: 0.95rem; }
  .starman-header-banner { height: 100px; }
  .starman-header-avatar { top: 12px; }
  .starman-avatar-pill-wrapper { width: 64px; height: 64px; border-width: 3px; }
  .starman-messages-container { padding-top: 96px; --chat-fade-top: 92px; }
}

/* Night: the horizon behind the chat's header is a faint glow, not a bright band */
:root:not([data-theme="light"]) .starman-header-banner { opacity: 0.4; }

@media (prefers-reduced-motion: reduce) {
  .starman-quick-card, .starman-ideas-link svg { transition: none; }
}

/* The Live Browser View's buttons and the portal consent choices (views/starman.js): their hover is
   here, for a mouse only, not in onmouseover handlers. The buttons' colours are inline, hence !important */
@media (hover: hover) and (pointer: fine) {
  .starman-mock-btn.is-primary:hover { background: #1d4ed8 !important; }
  .starman-mock-btn:not(.is-primary):hover { background: #f1f5f9 !important; }
  .portal-consent-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); }
}

/* ── A page's inline browser preview under an answer (views/starman.js renderBrowserMockupHtml): a small
   browser window (it keeps its own light look, like the live view inside it), the page live, and what can be
   done with it. It lays out by its own width: in a narrow chat (a phone) the bar keeps only its lights and the
   address, and the actions share one row under the status, the secondary ones as icons ── */
.smb {
  container-type: inline-size;
  margin: 18px 0; border: 1px solid rgba(226, 232, 240, 0.9); border-radius: 16px; overflow: hidden; background: #fff;
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.03);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.smb-bar {
  display: flex; align-items: center; gap: 14px; padding: 10px 18px;
  background: #f8fafc; border-bottom: 1px solid #e2e8f0; user-select: none;
}
.smb-lights { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.smb-lights span { width: 12px; height: 12px; border-radius: 50%; }
.smb-lights .is-close { background: #ff5f56; border: 1px solid #e0443e; }
.smb-lights .is-min { background: #ffbd2e; border: 1px solid #dea123; }
.smb-lights .is-max { background: #27c93f; border: 1px solid #1aab29; }
.smb-nav { display: flex; align-items: center; gap: 14px; margin-left: 6px; color: #64748b; flex-shrink: 0; }
.smb-nav svg { width: 16px; height: 16px; cursor: pointer; }
.smb-nav .is-off { opacity: 0.35; cursor: not-allowed; }
.smb-nav .is-reload { width: 15px; height: 15px; }
.smb-address {
  flex: 1; min-width: 0; max-width: 580px; height: 34px; margin: 0 auto; padding: 6px 14px;
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid #cbd5e1; border-radius: 20px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); color: #64748b;
}
.smb-address svg { width: 13px; height: 13px; flex-shrink: 0; }
.smb-address .smb-star { width: 14px; height: 14px; color: #94a3b8; }
.smb-url {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13px; color: #334155; letter-spacing: -0.01em;
}
.smb-tools { display: flex; align-items: center; gap: 14px; color: #64748b; flex-shrink: 0; }
.smb-tools svg { width: 16px; height: 16px; opacity: 0.85; }
.smb-view { position: relative; width: 100%; background: #0f172a; line-height: 0; overflow: hidden; }
.smb-foot {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  padding: 12px 18px; border-top: 1px solid #f1f5f9; font-size: 13px;
}
.smb-status { display: flex; align-items: center; min-width: 0; }
.smb-dot { width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: #10b981; flex-shrink: 0; }
.smb-status-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #475569; }
.smb-sep { margin: 0 12px; color: #cbd5e1; font-weight: 300; }
.smb-host { color: #1e293b; font-weight: 600; white-space: nowrap; }
.smb-actions { display: flex; align-items: center; gap: 8px; }
.smb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 14px;
  border: 1px solid #e2e8f0; border-radius: 8px; background: #f8fafc; color: #334155;
  font: inherit; font-size: 12px; font-weight: 500; white-space: nowrap; cursor: pointer;
  transition: background-color 150ms ease, transform 120ms var(--ease-out);
}
.smb-btn svg { width: 13px; height: 13px; color: #64748b; flex-shrink: 0; }
.smb-btn:active { transform: scale(0.97); }
.smb-btn:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.smb-btn.is-primary { border-color: #2563eb; background: #2563eb; color: #fff; box-shadow: 0 2px 4px rgba(37, 99, 235, 0.25); }
.smb-btn.is-primary svg { color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .smb-btn:hover { background: #f1f5f9; }
  .smb-btn.is-primary:hover { background: #1d4ed8; border-color: #1d4ed8; }
}
@media (prefers-reduced-motion: reduce) { .smb-btn { transition: background-color 150ms ease; } }
@container (max-width: 520px) {
  .smb-bar { gap: 10px; padding: 8px 12px; }
  .smb-lights { gap: 6px; }
  .smb-lights span { width: 10px; height: 10px; }
  .smb-nav, .smb-tools { display: none; }
  .smb-address { height: 30px; padding: 4px 12px; }
  .smb-foot { gap: 10px; padding: 10px 12px; }
  .smb-status, .smb-actions { flex: 1 1 100%; }
  .smb-btn { height: 36px; }
  .smb-btn:not(.is-primary) { width: 36px; padding: 0; flex: none; }
  .smb-btn:not(.is-primary) .smb-label { display: none; }
  .smb-btn.is-primary { flex: 1; min-width: 0; }
}

/* ── Starman Library on a phone (js/components/starmanLibraryModal.js) ──
   The whole screen, one pane at a time: the platforms, then the one picked (.is-showing-platform)
   with "All sources" to go back. A source's controls go under its name instead of beside it. */
.sl-back-btn { display: none; }
@media (max-width: 640px) {
  .sl-modal-overlay { padding: 0; }
  .sl-modal-container {
    width: 100vw; max-width: none; height: 100dvh; max-height: none; border-radius: 0;
  }
  .sl-header { padding: 12px 12px 12px 16px; }
  .sl-header-icon-box, .sl-header-subtitle { display: none; }
  .sl-header-title { font-size: 1.15rem; }

  .sl-sidebar { width: 100%; border-right: 0; padding: 8px 8px max(16px, env(safe-area-inset-bottom)); }
  .sl-content { display: none; padding: 8px 16px 16px; }
  .is-showing-platform .sl-sidebar { display: none; }
  .is-showing-platform .sl-content { display: flex; }

  .sl-back-btn {
    display: inline-flex; align-items: center; gap: 2px; align-self: flex-start; margin: 0 0 12px -6px;
    padding: 6px 8px 6px 4px; border: 0; border-radius: 8px; background: transparent;
    color: #2563eb; font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer;
    transition: transform 150ms var(--ease-out);
  }
  .sl-back-btn svg { width: 18px; height: 18px; }
  .sl-back-btn:active { transform: scale(0.97); }
  .sl-back-btn:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
  :root:not([data-theme="light"]) .sl-back-btn { color: #7aa2ff; }

  .sl-content-top { gap: 12px; margin-bottom: 1rem; }
  .sl-content-icon { width: 40px; height: 40px; }
  .sl-content-title { font-size: 1.15rem; }
  .sl-filter-row { margin-bottom: 0.85rem; }
  .sl-sources-list { padding-right: 0; }

  .sl-card { flex-wrap: wrap; padding: 12px; }
  .sl-card-controls { flex-basis: 100%; gap: 12px; margin: 10px 0 0; padding-left: 54px; }
  .sl-card-updated { align-items: flex-start; text-align: left; min-width: 0; margin-right: auto; }
}

/* Phones: no Starman beside each answer, so answers get the whole width. The header's Starman (a live
   spot too, priority 10) then shows everything he does: the avatar runtime (/avatar/boot.js) gives the
   moving model and the current still only to live spots that are on screen, and a display:none one isn't */
@media (max-width: 640px) {
  .starman-bot-row > .starman-row-avatar { display: none; }
  .starman-bot-row { gap: 0; }
  .starman-stopped-row { margin-left: 0; }
}

/* ── The work on an answer (views/starman.js activityShellHtml / showToolActivity): one card while Starman
   works. A ringed orb and what it is doing ("Thinking", "Working on it") with "2 of 3 done"; each tool call
   a step under it, its tool's icon in a tinted square (blue while it runs, green done, red if it didn't
   work), the steps joined by a hairline. Once the answer starts it folds into one line above the answer
   (.is-done: "Looked into it · 3 steps · 4.2s"), which opens on a click (.is-open) ── */
.sta {
  width: 100%; max-width: 560px; border: 1px solid var(--chat-line); border-radius: 16px; background: var(--chat-surface);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 24px -18px rgba(15, 23, 42, 0.22); overflow: hidden;
}
.sta-head {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 14px; border: 0; background: none;
  font: inherit; text-align: left; color: var(--chat-ink); cursor: default;
}
.sta-orb {
  position: relative; flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--chat-accent-tint); color: var(--chat-accent-ink);
}
.sta-orb svg { width: 14px; height: 14px; }
/* The ring turns while Starman works */
.sta-orb::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 2px solid transparent; border-top-color: var(--chat-accent); border-right-color: var(--chat-accent);
  animation: sta-spin 900ms linear infinite;
}
@keyframes sta-spin { to { transform: rotate(360deg); } }
/* The title never breaks; the counts give way first (cut short) when the line runs out */
.sta-title { font-size: 0.9rem; font-weight: 600; letter-spacing: -0.005em; white-space: nowrap; }
.sta-meta {
  margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  font-size: 0.78rem; color: var(--chat-muted); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.sta-chev { display: none; color: var(--chat-faint); transition: transform 200ms var(--ease-out); }
.sta-chev svg { width: 16px; height: 16px; display: block; }
.sta-steps {
  list-style: none; margin: 0; padding: 4px 14px 10px; border-top: 1px solid var(--chat-line-soft);
  display: flex; flex-direction: column;
}
.sta-steps:empty { display: none; }
.sta-step { position: relative; display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 0.85rem; line-height: 1.4; color: var(--chat-ink-3); }
.sta-step.is-new { animation: sta-in 200ms var(--ease-out); }
@keyframes sta-in { from { opacity: 0; transform: translateY(3px); } }
/* The hairline from one step's square to the next */
.sta-step + .sta-step::before {
  content: ""; position: absolute; left: 11px; top: -7px; width: 2px; height: 14px; border-radius: 1px; background: var(--chat-line-soft);
}
.sta-node {
  width: 24px; height: 24px; border-radius: 8px; align-items: center; justify-content: center;
  background: var(--chat-fill); color: var(--chat-ink-4); transition: background-color 200ms ease, color 200ms ease;
}
.sta-step[data-status="searching"] .sta-node { background: var(--chat-accent-tint); color: var(--chat-accent-ink); }
.sta-step[data-status="done"] .sta-node { background: var(--chat-ok-soft); color: var(--chat-ok-ink); }
.sta-step[data-status="error"] .sta-node { background: var(--chat-bad-soft); color: var(--chat-bad-ink); }
.sta-step[data-status="error"] [data-part="text"] { color: var(--chat-muted); }
.sta-step [data-part="text"] { flex: 1; }
/* Folded above the answer: one line that opens */
.sta.is-done { margin-bottom: 4px; box-shadow: none; background: var(--chat-surface-2); border-color: var(--chat-line-soft); }
.sta.is-done .sta-head { cursor: pointer; padding: 8px 12px; }
.sta.is-done .sta-orb { width: 24px; height: 24px; background: var(--chat-ok-soft); color: var(--chat-ok-ink); }
.sta.is-done .sta-orb::after { display: none; }
.sta.is-done .sta-title { font-size: 0.84rem; color: var(--chat-ink-3); }
.sta.is-done .sta-chev { display: block; }
.sta.is-done:not(.is-open) .sta-steps { display: none; }
.sta.is-open .sta-chev { transform: rotate(180deg); }
.sta.is-open .sta-steps { animation: sta-open 180ms var(--ease-out); }
@keyframes sta-open { from { opacity: 0; } }
.sta-head:focus-visible { outline: 2px solid var(--chat-accent); outline-offset: -2px; border-radius: 16px; }
@media (hover: hover) and (pointer: fine) { .sta.is-done .sta-head:hover .sta-title { color: var(--chat-ink); } }
@media (prefers-reduced-motion: reduce) {
  .sta-orb::after { animation: none; }
  .sta-step.is-new { animation: sta-open 150ms ease-out; }
}
/* A narrow chat: a little less room around the card's contents */
@container starman (max-width: 440px) {
  .sta-head { gap: 8px; padding: 10px 12px; }
  .sta-steps { padding: 4px 12px 10px; }
}
/* Folded, in a narrow chat (a phone, or beside the agent panel): "Looked into it" with its counts under it,
   the orb and the chevron beside both, so neither the title breaks nor the counts get cut */
@container starman (max-width: 600px) {
  .sta.is-done .sta-head {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 10px; row-gap: 1px; padding: 8px 12px;
  }
  .sta.is-done .sta-orb { grid-column: 1; grid-row: 1 / span 2; }
  .sta.is-done .sta-title { grid-column: 2; grid-row: 1; line-height: 1.3; }
  .sta.is-done .sta-meta { grid-column: 2; grid-row: 2; margin-left: 0; font-size: 0.75rem; line-height: 1.3; }
  .sta.is-done .sta-meta:empty { display: none; }
  .sta.is-done .sta-chev { grid-column: 3; grid-row: 1 / span 2; }
}

/* ── The clubs, communities and events an answer names (views/entityCards.js): a card each, under the answer.
   The cover (else the logo, blurred) with what it is on a glass tag; the logo over the cover's edge; the name,
   the motto (two lines), members and rating (an event: when, where, its club), a few tags, and "Open in
   Macbease". Side by side as room allows; one a row in a narrow chat ── */
.sme { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 12px; margin: 16px 0 4px; }
.sme.is-single { grid-template-columns: minmax(0, 360px); }
.sme-card {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  border: 1px solid var(--chat-line-soft); border-radius: 18px; background: var(--chat-surface);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 28px -20px rgba(15, 23, 42, 0.28);
}
.sme-cover {
  position: relative; aspect-ratio: 16 / 7; overflow: hidden;
  background: linear-gradient(135deg, var(--chat-accent-tint), var(--chat-surface-2));
}
.sme-cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sme-cover-img.is-blur { filter: blur(22px) saturate(1.3); transform: scale(1.35); opacity: 0.85; }
/* A soft fade at the cover's foot, so the logo sits on it */
.sme-cover::after { content: ""; position: absolute; inset: auto 0 0; height: 45%; background: linear-gradient(to top, rgba(15, 23, 42, 0.28), transparent); pointer-events: none; }
.sme-kind {
  position: absolute; top: 10px; left: 10px; z-index: 1; padding: 3px 9px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.82); color: #0f172a; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.sme-body { position: relative; display: flex; flex-direction: column; flex: 1; gap: 8px; padding: 0 14px 14px; }
.sme-logo {
  position: relative; display: grid; place-items: center; width: 52px; height: 52px; margin-top: -26px; overflow: hidden;
  border-radius: 14px; border: 3px solid var(--chat-surface); background: var(--chat-accent-tint); color: var(--chat-accent-ink);
  font-weight: 700; font-size: 1.1rem; box-shadow: 0 4px 12px -4px rgba(15, 23, 42, 0.3);
}
.sme-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sme-name { margin: 2px 0 0; font-size: 0.98rem; font-weight: 650; line-height: 1.3; letter-spacing: -0.01em; color: var(--chat-ink); overflow-wrap: anywhere; }
.sme-tagline {
  margin: 0; font-size: 0.84rem; line-height: 1.45; color: var(--chat-ink-4);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sme-facts { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.8rem; color: var(--chat-ink-3); font-variant-numeric: tabular-nums; }
.sme-fact { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.sme-fact svg { width: 14px; height: 14px; flex: none; color: var(--chat-muted); }
.sme-card .sme-fact[title="Rating"] svg { color: var(--chat-amber, #f59e0b); fill: currentColor; }
.sme-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.sme-tags span { padding: 2px 9px; border-radius: 999px; background: var(--chat-fill); color: var(--chat-ink-4); font-size: 0.74rem; }
/* (.sme .sme-open: over the answer's own link colour) */
.sme .sme-open {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; margin-top: auto;
  border-radius: 10px; background: var(--chat-accent); color: #fff; font-size: 0.84rem; font-weight: 600; text-decoration: none;
  transition: background-color 150ms ease, transform 120ms var(--ease-out);
}
/* (margin-top: auto: the buttons of a row of cards line up at their feet) */
.sme-open svg { width: 15px; height: 15px; }
.sme-open:active { transform: scale(0.97); }
.sme-open:focus-visible { outline: 2px solid var(--chat-accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .sme .sme-open:hover { background: var(--chat-accent-hover); color: #fff; } }
@media (prefers-reduced-motion: reduce) { .sme-open { transition: background-color 150ms ease; } }

/* ── A run's question answered in words (workflowRunCard.js typedAnswerHtml): "Say it" opens the chat box's mic
   (the words wait there to be sent), "or type it below" beside it. While the mic is open (<html data-dictating>)
   it fills in and reads "Listening… tap when done", a dot breathing ── */
.wfq-say { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
.wfq-speak {
  display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 15px 0 12px;
  border: 1px solid var(--chat-accent-line); border-radius: 999px; background: var(--chat-accent-soft); color: var(--chat-accent-ink);
  font: inherit; font-size: 0.86rem; font-weight: 600; cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 120ms var(--ease-out);
}
.wfq-speak svg { width: 16px; height: 16px; flex: none; }
.wfq-speak:active { transform: scale(0.97); }
.wfq-speak:focus-visible { outline: 2px solid var(--chat-accent); outline-offset: 2px; }
.wfq-speak .is-on, .wfq-speak-dot { display: none; }
:root[data-dictating] .wfq-speak { border-color: var(--chat-accent); background: var(--chat-accent); color: #fff; }
:root[data-dictating] .wfq-speak .is-off, :root[data-dictating] .wfq-speak svg { display: none; }
:root[data-dictating] .wfq-speak .is-on { display: inline; }
:root[data-dictating] .wfq-speak-dot {
  display: block; width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: wfq-breathe 1.2s ease-in-out infinite;
}
@keyframes wfq-breathe { 50% { opacity: 0.35; transform: scale(0.8); } }
@media (hover: hover) and (pointer: fine) {
  .wfq-speak:hover { background: var(--chat-accent-tint); }
  :root[data-dictating] .wfq-speak:hover { background: var(--chat-accent-hover); }
}
@media (prefers-reduced-motion: reduce) {
  .wfq-speak { transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease; }
  :root[data-dictating] .wfq-speak-dot { animation: none; }
}