/*
 * Starlight interface refinement
 * Layered after each page's existing styles so brand, state classes, and behavior
 * remain owned by the original templates. No framework or runtime dependency.
 */

/* 01. Shared foundations */
:root {
  --ui-focus: #b7d1f4;
  --ui-line: #2c3a51;
  --ui-surface: var(--ex-panel);
  --ui-surface-raised: #1a2943;
  --ui-muted: #a3b2ca;
  --ui-radius-sm: 8px;
  --ui-radius: 12px;
  --ui-radius-lg: 16px;
  --ui-ease: cubic-bezier(.22, 1, .36, 1);
  --radius: var(--ui-radius);
  --line: var(--ui-line);
  --text-dim: var(--ui-muted);
}
html { text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: rgba(157, 184, 232, .34); color: #fff; }
:where(a, button, input, textarea, select, [role="button"], [role="tab"], [tabindex]):focus-visible {
  outline: 2px solid var(--ui-focus) !important;
  outline-offset: 3px !important;
}
:where(button, a, select, summary, [role="button"]) { touch-action: manipulation; }
:where(button, input, textarea, select) { font-family: var(--font-body, Inter, sans-serif); }
:where(button, input, textarea, select):disabled { cursor: not-allowed; opacity: .56; }
:where(input, textarea, select)::placeholder { color: #94a6c0; opacity: 1; }
:where(a) { text-underline-offset: .19em; }
:where(img, svg, video, canvas) { max-width: 100%; }
:where(pre, code) { overflow-wrap: anywhere; }
:where(.table-wrap, .usage-table-wrap, .sandbox-browser__preview-content) { overscroll-behavior: contain; }
:where(.modal, .modal__body, .ws-modal__panel, .mcp-modal__panel, .doc-viewer__article) {
  scrollbar-gutter: stable;
}
:where([hidden]) { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* 02. Marketing and informational reading surfaces */
body[data-ui-page="index"] .hero {
  max-width: 1060px;
  padding-block: clamp(4.5rem, 10vw, 8rem) 4rem;
}
body[data-ui-page="index"] .hero__eyebrow {
  letter-spacing: .17em;
  font-weight: 600;
}
body[data-ui-page="index"] .hero__sub {
  max-width: 61ch;
  line-height: 1.75;
  color: var(--ex-secondary);
}
body[data-ui-page="index"] .star--hero { animation: none; filter: drop-shadow(0 4px 10px rgba(157,184,232,.28)); }
body[data-ui-page="index"] .hero__terminal { max-width: 100%; }
body[data-ui-page="index"] .card {
  background: var(--ui-surface);
  border-color: var(--ui-line);
  border-radius: var(--ui-radius);
  box-shadow: none;
  transition: border-color .18s ease, background-color .18s ease;
}
@media (hover: hover) and (pointer: fine) {
  body[data-ui-page="index"] .card:hover {
    transform: none;
    border-color: #4b607e;
    box-shadow: none;
    background: var(--ui-surface-raised);
  }
}
body[data-ui-page="index"] .card__icon { box-shadow: none; }
body[data-ui-page="index"] .section__title { letter-spacing: -.025em; text-wrap: balance; }
body[data-ui-page="index"] .section__sub { max-width: 65ch; line-height: 1.7; }
body[data-ui-page="index"] .terminal { border-radius: var(--ui-radius-lg); }
body[data-ui-page="index"] .orbit__ring { opacity: .62; }
body[data-ui-page="index"] .star--final { filter: none; }
body[data-ui-page="starwork"] .terminal,
body[data-ui-page="starwork"] .card,
body[data-ui-page="documentary"] .doc-card,
body[data-ui-page="mcp"] .mcp-card,
body[data-ui-page="workspace"] .ws-card {
  border-radius: var(--ui-radius);
  border-color: var(--ui-line);
  box-shadow: none;
}
body[data-ui-page="documentary"] .doc-card { background: var(--ui-surface); }
body[data-ui-page="documentary"] .doc-card:hover { transform: none; box-shadow: none; border-color: var(--ex-stroke); }
body[data-ui-page="documentary"] .doc-viewer__article { max-height: calc(100dvh - 3rem); }
body[data-ui-page="privacy"] .legal,
body[data-ui-page="terms"] .legal,
body[data-ui-page="content-policy"] .legal,
body[data-ui-page="support"] .legal {
  max-width: 880px;
  padding-top: clamp(3rem, 7vw, 6rem);
}
body[data-ui-page="privacy"] .legal__inner,
body[data-ui-page="terms"] .legal__inner,
body[data-ui-page="content-policy"] .legal__inner { max-width: 72ch; }
body[data-ui-page="privacy"] .legal__title,
body[data-ui-page="terms"] .legal__title,
body[data-ui-page="content-policy"] .legal__title,
body[data-ui-page="support"] .legal__title { letter-spacing: -.03em; text-wrap: balance; }
body[data-ui-page="support"] .support-ticket-list,
body[data-ui-page="support"] .support-thread { min-width: 0; }
body[data-ui-page="support"] .support-form,
body[data-ui-page="support"] .support-reply { max-width: 100%; }

/* 03. Authentication, purchase and conversion states */
body[data-ui-page="auth"] .auth-brand { background: #101b30; }
body[data-ui-page="auth"] .auth-pane__inner { max-width: 430px; }
body[data-ui-page="auth"] .auth-pane h1 {
  letter-spacing: -.03em;
  line-height: 1.2;
  text-wrap: balance;
}
body[data-ui-page="auth"] .auth-brand__star { filter: none; }
body[data-ui-page="auth"] .auth-pane,
body[data-ui-page="auth"] .auth-brand { min-width: 0; }
body[data-ui-page="plans"] .plans-body { max-width: 1180px; }
body[data-ui-page="plans"] .plans-header h1 { letter-spacing: -.035em; text-wrap: balance; }
body[data-ui-page="plans"] .plan-tile {
  background: var(--ui-surface);
  border-color: var(--ui-line);
  border-radius: var(--ui-radius);
  box-shadow: none;
}
body[data-ui-page="plans"] .plan-tile--featured { border-color: #7799c7; background: #1a2a44; }
body[data-ui-page="plans"] .plan-tile--flare { border-color: #6a7790; }
body[data-ui-page="plans"] .plan-tile:hover { transform: none; }
body[data-ui-page="plans"] .plans-current__dot { box-shadow: none; }
body[data-ui-page="checkout"] .spinner,
body[data-ui-page="payment-status"] .orbit-loader { flex-shrink: 0; }
body[data-ui-page="payment-status"] .card {
  background: var(--ui-surface);
  border-radius: var(--ui-radius-lg);
  box-shadow: 0 16px 48px rgba(0,0,0,.16);
}
body[data-ui-page="payment-status"] .star-mark svg,
body[data-ui-page="payment-status"] .success-glow svg {
  animation: none;
  filter: none;
}

/* 04. Daily-use chat: quieter chrome, stable geometry */
body[data-ui-page="chat"] { background: #0a1020; }
body[data-ui-page="chat"] #starfield { opacity: .16; }
body[data-ui-page="chat"] .chat-sidebar {
  background: var(--ex-chrome);
  border-color: var(--ui-line);
  border-radius: 0 16px 16px 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body[data-ui-page="chat"] .chat-sidebar.collapsed { border-radius: 0 12px 12px 0; }
body[data-ui-page="chat"] .chat-header {
  background: var(--ex-chrome);
  border-bottom-color: var(--ui-line);
}
body[data-ui-page="chat"] .chat-new {
  background: #304c73;
  border-color: #46618a;
  border-radius: var(--ui-radius-sm);
  box-shadow: none;
}
body[data-ui-page="chat"] .chat-new:hover { box-shadow: none; background: #39577d; }
body[data-ui-page="chat"] .chat-actions button { border-radius: var(--ui-radius-sm); }
body[data-ui-page="chat"] .chat-actions button:focus-visible,
body[data-ui-page="chat"] .chat-list button:focus-visible { position: relative; z-index: 1; }
body[data-ui-page="chat"] .chat-main,
body[data-ui-page="chat"] .chat-messages,
body[data-ui-page="chat"] .chat-messages__inner,
body[data-ui-page="chat"] .chat-composer { min-width: 0; }
body[data-ui-page="chat"] .chat-messages__inner { max-width: 960px; }
body[data-ui-page="chat"] .chat-messages { overscroll-behavior-y: contain; }
body[data-ui-page="chat"] .chat-composer__inner {
  background: var(--ex-panel);
  border-color: #354762;
  border-radius: var(--ui-radius);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
}
body[data-ui-page="chat"] .chat-composer__inner:focus-within {
  border-color: #83a6d4;
  box-shadow: 0 0 0 2px rgba(131,166,212,.16);
}
body[data-ui-page="chat"] #composer-input {
  max-width: 100%;
  min-width: 0;
  resize: none;
}
body[data-ui-page="chat"] .chat-hint { color: var(--ui-muted); }
body[data-ui-page="chat"] .modal,
body[data-ui-page="chat"] .chat-notif-dropdown {
  background: #162238;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 18px 52px rgba(0,0,0,.26);
}
body[data-ui-page="chat"] .modal-overlay { background: rgba(3,9,18,.74); }
body[data-ui-page="chat"] .modal,
body[data-ui-page="chat"] .settings-panels { min-width: 0; }
body[data-ui-page="chat"] .settings-layout { min-width: 0; }
body[data-ui-page="chat"] .settings-panels > * { max-width: 100%; }
body[data-ui-page="chat"] .modal--lg { max-width: min(1000px, calc(100vw - 2rem)); }
body[data-ui-page="chat"] .chat-notif-dropdown { max-width: calc(100vw - 1.5rem); }
body[data-ui-page="chat"] .chat-notif-dropdown,
body[data-ui-page="chat"] .modal,
body[data-ui-page="chat"] .settings-layout { overscroll-behavior: contain; }

/* 05. Agent creation, workspaces, integration and documentation */
body[data-ui-page="agents"] { background: var(--ex-canvas); }
body[data-ui-page="agents"] .agents-header {
  background: var(--ex-chrome);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-color: var(--ui-line);
}
body[data-ui-page="agents"] .agents-main { padding-top: clamp(2.5rem, 6vw, 4.5rem); }
body[data-ui-page="agents"] .agents-main > h1 { letter-spacing: -.035em; }
body[data-ui-page="agents"] .agents-intro { line-height: 1.7; margin-bottom: 2.25rem; }
body[data-ui-page="agents"] .agents-panel {
  background: var(--ui-surface);
  border-color: var(--ui-line);
  border-radius: var(--ui-radius-lg);
  box-shadow: none;
}
body[data-ui-page="agents"] .agents-card {
  background: #121e32;
  border-color: var(--ui-line);
  border-radius: var(--ui-radius);
}
body[data-ui-page="agents"] .agents-avatar { border-radius: var(--ui-radius-sm); }
body[data-ui-page="agents"] .agents-primary { border-radius: var(--ui-radius-sm); }
body[data-ui-page="agents"] .agents-secondary { border-radius: var(--ui-radius-sm); }
body[data-ui-page="agents"] .agents-layout > *,
body[data-ui-page="agents"] .agents-panel,
body[data-ui-page="agents"] .agents-fields > * { min-width: 0; }
body[data-ui-page="agents"] .agents-card-actions { gap: .7rem 1rem; }
body[data-ui-page="mcp"] .mcp-card { background: var(--ui-surface); }
body[data-ui-page="mcp"] .mcp-card:hover { border-color: var(--ex-stroke); }
body[data-ui-page="mcp"] .mcp-modal__panel,
body[data-ui-page="workspace"] .ws-modal__panel {
  background: var(--ex-panel);
  border-color: var(--ui-line);
  border-radius: var(--ui-radius-lg);
  width: min(100%, 680px);
}
body[data-ui-page="mcp"] .mcp-page,
body[data-ui-page="workspace"] .ws-page { min-width: 0; }
body[data-ui-page="workspace"] .ws-card { background: var(--ui-surface); }
body[data-ui-page="workspace"] .ws-card:hover { transform: none; border-color: var(--ex-stroke); }
body[data-ui-page="workspace-join"] .ws-join-page { width: 100%; }
body[data-ui-page="workspace-join"] .ws-join-card {
  width: min(100%, 480px);
  max-width: calc(100vw - 2rem);
  border-radius: var(--ui-radius-lg);
}

/* 06. Power-user tools: admin and Studio */
body[data-ui-page="admin"],
body[data-ui-page="studio"] { background: var(--ex-canvas); }
body[data-ui-page="admin"] .sidebar,
body[data-ui-page="studio"] .topbar {
  background: var(--ex-chrome);
  border-color: var(--ui-line);
}
body[data-ui-page="admin"] .main { min-width: 0; }
body[data-ui-page="admin"] .card,
body[data-ui-page="admin"] .stat-card,
body[data-ui-page="studio"] .card,
body[data-ui-page="studio"] .auth-card {
  background: var(--ui-surface);
  border-color: var(--ui-line);
  border-radius: var(--ui-radius);
  box-shadow: none;
}
body[data-ui-page="admin"] .stat-card__value { letter-spacing: -.035em; }
body[data-ui-page="admin"] .sidebar .nav-item { border-radius: var(--ui-radius-sm); }
body[data-ui-page="admin"] .sidebar .nav-item.active {
  background: #263b58;
  color: #e5efff;
}
body[data-ui-page="admin"] .table-wrap,
body[data-ui-page="studio"] .table-wrap { min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
body[data-ui-page="admin"] .modal,
body[data-ui-page="admin"] #auth-gate .gate-card {
  background: var(--ui-surface);
  border-radius: var(--ui-radius-lg);
  border-color: var(--ui-line);
  box-shadow: 0 18px 52px rgba(0,0,0,.2);
}
body[data-ui-page="admin"] .modal-overlay.active { padding: 1rem; }
body[data-ui-page="admin"] .main__header { gap: 1rem; }
body[data-ui-page="admin"] .main__header h1 { letter-spacing: -.03em; }
body[data-ui-page="admin"] :where(.search-bar, .inline-form) { min-width: 0; }
body[data-ui-page="studio"] .container { min-width: 0; }
body[data-ui-page="studio"] .topbar__user { min-width: 0; }
body[data-ui-page="studio"] .email { overflow-wrap: anywhere; }
body[data-ui-page="studio"] .credit-pkg { border-radius: var(--ui-radius-sm); }

/* 07. Fluid adaptations: viewport size, safe areas and input modality */
@media (min-width: 1500px) {
  body[data-ui-page="index"] .section,
  body[data-ui-page="starwork"] .section { margin-inline: auto; }
  body[data-ui-page="admin"] .main { max-width: 1600px; margin-inline: auto; width: 100%; }
}
@media (max-width: 1024px) {
  body[data-ui-page="agents"] .agents-layout { gap: 1rem; }
  body[data-ui-page="agents"] .agents-panel { padding: 1.3rem; }
  body[data-ui-page="admin"] .main { padding: 1.5rem; }
}
@media (max-width: 900px) {
  /* Use the same functional mobile navigation as the homepage. */
  body:is([data-ui-page="support"], [data-ui-page="documentary"], [data-ui-page="privacy"],
          [data-ui-page="terms"], [data-ui-page="content-policy"]) .nav {
    padding-inline: max(1rem, env(safe-area-inset-left, 0px));
  }
  body:is([data-ui-page="support"], [data-ui-page="documentary"], [data-ui-page="privacy"],
          [data-ui-page="terms"], [data-ui-page="content-policy"]) .nav__links { display: none !important; }
  body:is([data-ui-page="support"], [data-ui-page="documentary"], [data-ui-page="privacy"],
          [data-ui-page="terms"], [data-ui-page="content-policy"]) .nav__toggle { display: flex; }
  body:is([data-ui-page="support"], [data-ui-page="documentary"], [data-ui-page="privacy"],
          [data-ui-page="terms"], [data-ui-page="content-policy"]) .nav__mobile {
    padding-inline: max(1rem, env(safe-area-inset-left, 0px));
    max-height: calc(100dvh - 72px);
    overflow-y: auto;
  }
}
@media (max-width: 640px) {
  body:is([data-ui-page="support"], [data-ui-page="documentary"], [data-ui-page="privacy"],
          [data-ui-page="terms"], [data-ui-page="content-policy"]) .nav__actions > .btn--ghost { display: none; }
  body:is([data-ui-page="support"], [data-ui-page="documentary"], [data-ui-page="privacy"],
          [data-ui-page="terms"], [data-ui-page="content-policy"]) .nav__actions > .btn--primary { padding: .54rem .68rem; font-size: .78rem; }
  body:is([data-ui-page="support"], [data-ui-page="documentary"], [data-ui-page="privacy"],
          [data-ui-page="terms"], [data-ui-page="content-policy"]) .nav { padding-inline: .85rem; gap: .4rem; }
}
@media (max-width: 767px) {
  body[data-ui-page="index"] .hero { padding: 4rem 1.25rem 2rem; }
  body[data-ui-page="index"] .hero__sub { font-size: 1rem; }
  body[data-ui-page="index"] .grid--3,
  body[data-ui-page="index"] .grid--4 { grid-template-columns: minmax(0, 1fr); }
  body[data-ui-page="plans"] .plans-body { padding-inline: 1rem; }
  body[data-ui-page="agents"] .agents-layout { grid-template-columns: minmax(0, 1fr); }
  body[data-ui-page="agents"] .agents-main { padding-inline: 1rem; }
  body[data-ui-page="admin"] .main { padding: 1.2rem max(1rem, env(safe-area-inset-right, 0px)); }
  body[data-ui-page="admin"] .main__header { align-items: flex-start; flex-wrap: wrap; }
  body[data-ui-page="admin"] .search-bar { flex-wrap: wrap; }
  body[data-ui-page="admin"] .search-bar input { min-width: min(100%, 210px); }
  body[data-ui-page="admin"] .modal { width: min(100%, 600px); max-height: calc(100dvh - 2rem); padding: 1.25rem; }
  body[data-ui-page="studio"] .topbar { gap: .6rem; flex-wrap: wrap; }
  body[data-ui-page="studio"] .topbar__user { flex-wrap: wrap; justify-content: flex-end; }
  body[data-ui-page="studio"] .container { padding-inline: 1rem; }
  body[data-ui-page="documentary"] .doc-viewer { padding: .75rem; }
  body[data-ui-page="documentary"] .doc-viewer__article { max-height: calc(100dvh - 1.5rem); }
  body[data-ui-page="chat"] .chat-composer { padding-inline: max(.65rem, env(safe-area-inset-right, 0px)); }
  body[data-ui-page="chat"] .chat-messages { padding-inline: 1rem; }
  body[data-ui-page="chat"] .modal-overlay { padding: .5rem; }
  body[data-ui-page="chat"] .modal--lg { max-width: 100%; }
  body[data-ui-page="chat"] #composer-input { font-size: 16px; }
  body[data-ui-page="chat"] .chat-composer__inner { box-shadow: none; }
  body[data-ui-page="mcp"] .mcp-modal__panel,
  body[data-ui-page="workspace"] .ws-modal__panel { max-height: calc(100dvh - 1.5rem); padding: 1.2rem; }
}
@media (max-width: 420px) {
  body[data-ui-page="agents"] .agents-fields { grid-template-columns: minmax(0, 1fr); }
  body[data-ui-page="agents"] .agents-card-top { flex-wrap: wrap; }
  body[data-ui-page="agents"] .agents-status { margin-left: 0; }
  body[data-ui-page="plans"] .plan-tile { padding: 1.25rem; }
  body[data-ui-page="chat"] .chat-composer__row { gap: .35rem; }
  body[data-ui-page="chat"] .chat-composer__tools { gap: .1rem; }
  body[data-ui-page="admin"] .stat-grid { grid-template-columns: minmax(0, 1fr); }
  body[data-ui-page="admin"] .main__header h1 { font-size: 1.35rem; }
  body[data-ui-page="studio"] .auth-card { padding: 1.2rem; }
}
@media (pointer: coarse) {
  body[data-ui-page="chat"] .chat-composer__tools button,
  body[data-ui-page="chat"] .chat-header__actions button { min-width: 40px; min-height: 40px; }
  body[data-ui-page="agents"] .agents-card-actions a,
  body[data-ui-page="agents"] .agents-card-actions button { min-height: 40px; display: inline-flex; align-items: center; }
  body[data-ui-page="admin"] .nav-item { min-height: 44px; }
  body[data-ui-page="mcp"] .mcp-card__actions button { min-height: 40px; }
}

/* 08. SEO-rendered editorial articles share the reading system. */
body[data-ui-page="post"] {
  max-width: 800px;
  padding: clamp(1.5rem, 5vw, 3.5rem) clamp(1rem, 5vw, 2.5rem);
  background: var(--ex-canvas);
  color: #e8edf5;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.76;
  overflow-wrap: break-word;
}
body[data-ui-page="post"] article { min-width: 0; }
body[data-ui-page="post"] .post-hero h1 {
  margin-block: .5rem 1rem;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 600;
  line-height: 1.17;
  letter-spacing: -.035em;
  text-wrap: balance;
}
body[data-ui-page="post"] :is(.post-section, .post-benchmarks, .post-features, .post-cta) h2 {
  margin-top: 2rem;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.25rem, 3vw, 1.65rem);
  line-height: 1.25;
  letter-spacing: -.02em;
}
body[data-ui-page="post"] :is(.feature, .post-cta) {
  background: var(--ui-surface);
  border-color: var(--ui-line);
  border-radius: var(--ui-radius);
  box-shadow: none;
}
body[data-ui-page="post"] .post-quote {
  border-left: 1px solid #667e9d;
  padding-left: 1.5rem;
}
body[data-ui-page="post"] table { display: block; max-width: 100%; overflow-x: auto; }
body[data-ui-page="post"] .btn { min-height: 44px; }
@media (max-width: 480px) {
  body[data-ui-page="post"] .post-stats { gap: 1rem; }
  body[data-ui-page="post"] .stat { text-align: left; }
  body[data-ui-page="post"] .post-cta { padding: 1.25rem; }
}


/* 09. Product art direction — intentional composition, not uniform cards.
   Primary visual language: ink navy, chalk, blue-steel controls, editorial type. */
:root {
  --ui-canvas: #0b1320;
  --ui-layer: #111d2d;
  --ui-layer-2: var(--ex-panel);
  --ui-divider: #2d3c50;
  --ui-headline: #f3f6fb;
  --ui-body: #c3cfe0;
  --ui-muted: #a9bad0;
  --ui-action: #c2d8f2;
  --ui-action-ink: var(--ex-panel);
  --ui-space-1: .5rem;
  --ui-space-2: 1rem;
  --ui-space-3: 1.5rem;
  --ui-space-4: 2.5rem;
  --ui-space-5: 4rem;
}
body { background: var(--ui-canvas); }
:where(h1, h2, h3) { text-wrap: balance; }
:where(input, textarea, select) { accent-color: #9bbce5; }
:where(.stat-card__value, .amount, .usage-total) { font-variant-numeric: tabular-nums; }

/* Public navigation is a calm, legible tool, not another floating card. */
body:is([data-ui-page="index"],[data-ui-page="starwork"],[data-ui-page="mcp"],
[data-ui-page="workspace"],[data-ui-page="support"],[data-ui-page="documentary"],
[data-ui-page="privacy"],[data-ui-page="terms"],[data-ui-page="content-policy"]) .nav {
  padding-block: .9rem;
  background: #0d1725;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid #29384b;
}
.nav__links { gap: clamp(.75rem,1.5vw,1.65rem); }
.nav__links a { font-size: .83rem; letter-spacing: .005em; }
.nav__actions .btn { white-space: nowrap; }
.nav__actions .btn--primary { background: var(--ex-secondary); color: var(--ex-panel); border-color: var(--ex-secondary); }
.nav__actions .btn--primary:hover { background: #fff; color: var(--ex-panel); border-color: #fff; }
.nav__actions .btn--ghost { background: transparent; border-color: #415168; }

/* Homepage: asymmetric editorial lead with a genuine product-workflow preview. */
@media (min-width: 960px) {
  body[data-ui-page="index"] .hero {
    max-width: 1370px;
    display: grid;
    grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr);
    grid-template-rows: auto auto auto auto auto;
    column-gap: clamp(2.5rem,5vw,6rem);
    align-items: start;
    text-align: left;
    padding: clamp(6rem,9vh,9rem) clamp(2rem,5vw,5rem) 6.5rem;
  }
  body[data-ui-page="index"] .hero__eyebrow { grid-column: 1; grid-row: 1; align-self: end; }
  body[data-ui-page="index"] .wordmark--hero { grid-column: 1; grid-row: 2; }
  body[data-ui-page="index"] .hero__tagline { grid-column: 1; grid-row: 3; }
  body[data-ui-page="index"] .hero__sub { grid-column: 1; grid-row: 4; }
  body[data-ui-page="index"] .hero__cta { grid-column: 1; grid-row: 5; justify-content: flex-start; }
  body[data-ui-page="index"] .hero__terminal {
    grid-column: 2; grid-row: 1 / 6;
    align-self: center;
    margin: 0;
    min-width: 0;
  }
}
body[data-ui-page="index"] .hero {
  background: none;
}
body[data-ui-page="index"] main {
  background:
    radial-gradient(ellipse 45% 24% at 88% 1%,rgba(52,90,132,.16),transparent 80%);
}
body[data-ui-page="index"] .wordmark--hero {
  font-size: clamp(3.2rem, 5vw, 5.5rem);
  line-height: 1.05;
  letter-spacing: -.035em;
}
body[data-ui-page="index"] .hero__tagline {
  color: var(--ui-headline);
  font-size: clamp(1.65rem,2.35vw,2.3rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.032em;
  margin-top: 1.7rem;
}
body[data-ui-page="index"] .hero__sub {
  max-width: 52ch;
  margin: 1.35rem 0 0;
  color: var(--ui-body);
  font-size: clamp(.96rem,1.12vw,1.08rem);
  line-height: 1.74;
}
body[data-ui-page="index"] .hero__cta { margin-top: 2rem; gap: .75rem; }
body[data-ui-page="index"] .hero__cta .btn--primary {
  background: var(--ui-action);
  color: var(--ui-action-ink);
  border-color: var(--ui-action);
}
body[data-ui-page="index"] .hero__cta .btn--primary:hover { background: var(--ex-ink); border-color: var(--ex-ink); }
body[data-ui-page="index"] .hero__cta .btn--ghost { background: transparent; border-color: #415267; }
body[data-ui-page="index"] .hero__terminal .terminal {
  max-width: 100%;
  margin: 0;
  background: #101c2d;
  border: 1px solid #3b506a;
  border-radius: 13px;
  box-shadow: 0 22px 55px rgba(0,0,0,.23);
}
body[data-ui-page="index"] .terminal__bar { background: #1a2a40; padding-block: .85rem; }
body[data-ui-page="index"] .terminal__body {
  color: #c9d8ed; font-size: clamp(.74rem,1vw,.87rem);
  line-height: 2; padding: 1.6rem;
}
body[data-ui-page="index"] .section { max-width: 1280px; padding-block: clamp(4rem,7vw,6.5rem); }
body[data-ui-page="index"] .section__title {
  max-width: 21ch;
  font-size: clamp(2.2rem,4.2vw,3.7rem);
  letter-spacing: -.038em;
  line-height: 1.14;
  font-weight: 600;
}
body[data-ui-page="index"] .section__sub { color: var(--ui-body); max-width: 64ch; }
body[data-ui-page="index"] .grid { margin-top: 2.5rem; gap: .85rem; }
@media (min-width: 900px) {
  body[data-ui-page="index"] .grid--3 {
    grid-template-columns: repeat(12,minmax(0,1fr));
  }
  body[data-ui-page="index"] .grid--3 > .card { grid-column: span 5; }
  body[data-ui-page="index"] .grid--3 > .card:nth-child(4n+1),
  body[data-ui-page="index"] .grid--3 > .card:nth-child(4n+4) { grid-column: span 7; }
}
body[data-ui-page="index"] .grid > .card {
  background: var(--ex-panel);
  border-color: #2d3d54;
  padding: clamp(1.6rem,2.5vw,2.2rem);
  min-width: 0;
  border-radius: 11px;
}
body[data-ui-page="index"] .card__icon {
  width: 36px; height: 36px;
  background: none; border: none; border-radius: 0;
  margin-bottom: 1.5rem; justify-content: flex-start;
}
body[data-ui-page="index"] .card__icon svg { width: 26px; height: 26px; stroke-width: 1.5; }
body[data-ui-page="index"] .card h3 {
  font-size: clamp(1.08rem,1.4vw,1.3rem);
  font-weight: 600;
  letter-spacing: -.018em;
  margin-bottom: .65rem;
}
body[data-ui-page="index"] .card p { max-width: 52ch; color: var(--ui-body); line-height: 1.75; }
body[data-ui-page="index"] .grid--4 { grid-template-columns: repeat(2,minmax(0,1fr)); }
body[data-ui-page="index"] .section--final { border-top: 1px solid #314056; }
body[data-ui-page="index"] .star--hero,
body[data-ui-page="auth"] .auth-brand__star {
  animation: none; filter: none;
}
/* Render the hero readable even when scripting or reveal observation is delayed. */
body[data-ui-page="index"] :is(.hero__tagline,.hero__sub,.hero__cta,.hero__terminal) {
  opacity: 1;
  animation: none;
}

/* Auth: genuine two-panel product entry, with strong form hierarchy. */
body[data-ui-page="auth"] .auth-split { grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr); }
body[data-ui-page="auth"] .auth-brand {
  background: #132237;
  padding: clamp(1.25rem,3vw,3rem);
}
body[data-ui-page="auth"] .auth-brand__center { text-align: left; max-width: 470px; margin-inline: auto; }
body[data-ui-page="auth"] .auth-brand__center h2 {
  font-size: clamp(2rem,3.5vw,3.5rem);
  line-height: 1.16;
  letter-spacing: -.035em;
  font-weight: 600;
}
body[data-ui-page="auth"] .auth-brand__star {
  width: 42px; height: 42px;
  margin-bottom: .7rem;
}
body[data-ui-page="auth"] .auth-pane { background: var(--ex-canvas); padding: 3.5rem clamp(1.5rem,6vw,5rem); }
body[data-ui-page="auth"] .auth-pane__inner { max-width: 420px; }
body[data-ui-page="auth"] .auth-pane h1 {
  color: var(--ui-headline);
  font-size: clamp(2rem,3vw,2.7rem);
  font-weight: 600;
}
body[data-ui-page="auth"] .auth-pane__sub { color: var(--ui-body); margin-bottom: 2.1rem; }
body[data-ui-page="auth"] .field input { background: #142136; border-color: var(--ex-stroke); border-radius: 9px; }
body[data-ui-page="auth"] .auth-social button { border-radius: 9px; }
body[data-ui-page="auth"] .auth-fine { color: var(--ui-muted); }
body[data-ui-page="auth"] .auth-mobile-brand { display: none; }

/* Product shell: remove decorative noise and make writing, navigation and work primary. */
body[data-ui-page="chat"] .chat-main {
  background: var(--ex-canvas);
}
body[data-ui-page="chat"] .chat-sidebar { width: 250px; background: #101c2c; padding-inline: .8rem; }
body[data-ui-page="chat"] .chat-sidebar__logo { margin-bottom: 1.25rem; }
body[data-ui-page="chat"] .chat-actions { gap: .1rem; }
body[data-ui-page="chat"] .chat-actions button {
  padding: .66rem .7rem;
  font-size: .84rem;
  color: var(--ui-body);
  transition: background .14s ease, color .14s ease;
}
body[data-ui-page="chat"] .chat-actions button:hover { background: #22334b; color: #fff; }
body[data-ui-page="chat"] .chat-new {
  background: var(--ex-accent);
  border: 1px solid var(--ex-accent);
  color: #112238;
  font-weight: 600;
  padding-block: .68rem;
  box-shadow: none;
}
body[data-ui-page="chat"] .chat-new:hover { background: var(--ex-ink); border-color: var(--ex-ink); }
body[data-ui-page="chat"] .chat-header {
  background: #0d1726; min-height: 60px; padding-inline: 1.45rem;
}
body[data-ui-page="chat"] .chat-header h1 {
  font-size: .93rem;
  font-weight: 600;
  color: #edf3fa;
}
body[data-ui-page="chat"] .chat-messages__inner { max-width: 850px; gap: 1.65rem; }
body[data-ui-page="chat"] .chat-messages { padding: 2.1rem clamp(1.25rem,3vw,3rem); }
body[data-ui-page="chat"] .msg__body { max-width: 100%; overflow-wrap: anywhere; }
body[data-ui-page="chat"] .msg--ai .msg__avatar {
  background: transparent;
  border-color: #2e3b50;
}
body[data-ui-page="chat"] .msg--ai .msg__avatar svg { filter: none; }
body[data-ui-page="chat"] .chat-composer { padding-top: .5rem; }
body[data-ui-page="chat"] .chat-composer__inner {
  max-width: 850px;
  background: var(--ex-panel);
  border: 1px solid #4b6079;
  border-radius: 14px;
  padding: .85rem 1rem .7rem;
  box-shadow: 0 12px 34px rgba(0,0,0,.16);
}
body[data-ui-page="chat"] .chat-send:not(.chat-send--stop) {
  background: var(--ex-accent); color: #132239;
  border: 1px solid var(--ex-accent);
  box-shadow: none; border-radius: 9px;
}
body[data-ui-page="chat"] .chat-send:hover { transform: none; box-shadow: none; }
body[data-ui-page="chat"] .effort-picker__btn {
  background: #16253a;
  border-color: #344963;
  border-radius: 8px;
}
body[data-ui-page="chat"] .effort-picker__menu {
  background: var(--ex-panel); border-color: #354965; border-radius: 11px;
}
body[data-ui-page="chat"] .modal--lg {
  background: var(--ex-panel);
  border-color: #334861;
}
body[data-ui-page="chat"] .settings-nav { background: #111d30; }
body[data-ui-page="chat"] .settings-panels { background: var(--ex-panel); }
body[data-ui-page="chat"] .settings-nav button.active,
body[data-ui-page="chat"] .settings-nav a.active { color: var(--ex-ink); }
body[data-ui-page="chat"] .model-card {
  background: var(--ex-panel);
  border-color: var(--ex-stroke);
  border-radius: 11px;
}

/* Purposeful Libraries.dev-inspired microfeedback; no React peer dep or canvas. 
   Uses the existing real thinking state, not a continuously animating hero. */
body[data-ui-page="chat"] .thinking-indicator {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}
body[data-ui-page="chat"] .thinking-indicator::before {
  content: "";
  display: inline-block;
  width: 15px; height: 15px; flex: 0 0 15px;
  border: 2px dotted var(--ex-secondary);
  border-top-color: transparent;
  border-radius: 50%;
  animation: starlightThink 2.2s linear infinite;
}
body[data-ui-page="chat"] .thinking-indicator::after { display: none; }
@keyframes starlightThink { to { transform: rotate(360deg); } }
body[data-ui-page="mcp"] .mcp-test-result--pending::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: .6rem;
  border-radius: 50%;
  background: var(--ex-secondary);
  animation: starlightBreath 1.7s ease-in-out infinite;
}
@keyframes starlightBreath {
  0%,100% { opacity:.4; transform:scale(.8); }
  50% { opacity:1; transform:scale(1); }
}

/* Agents: workflow/editor + separate management rather than matched marketing tiles. */
body[data-ui-page="agents"] .agents-main { max-width: 1240px; }
body[data-ui-page="agents"] .agents-main > h1 {
  font-size: clamp(2.1rem,3.3vw,3.5rem);
  font-weight: 600; line-height: 1.15;
  margin-bottom: .8rem;
}
body[data-ui-page="agents"] .agents-eyebrow {
  color: #9fbbd9; letter-spacing: .1em; font-weight: 600; margin-bottom: .8rem;
}
body[data-ui-page="agents"] .agents-intro { max-width: 69ch; margin-bottom: 2.7rem; color: #b7c7db; }
body[data-ui-page="agents"] .agents-layout {
  grid-template-columns: minmax(0,1.23fr) minmax(310px,.77fr);
  gap: clamp(1.25rem,3vw,2.75rem);
}
body[data-ui-page="agents"] .agents-panel {
  border: 1px solid #304258; border-radius: 13px;
  background: var(--ex-panel); padding: clamp(1.25rem,2.7vw,2.5rem);
}
body[data-ui-page="agents"] .agents-index { display: none; }
body[data-ui-page="agents"] .agents-panel-head {
  border-bottom: 1px solid #2b3c52;
  padding-bottom: 1.35rem;
  margin-bottom: 1.6rem;
}
body[data-ui-page="agents"] .agents-panel h2 { font-size: 1.35rem; letter-spacing: -.02em; }
body[data-ui-page="agents"] .agents-panel-head p { font-size: .83rem; line-height: 1.6; }
body[data-ui-page="agents"] #agents-form label:not(.agents-switch) { font-size: .8rem; margin-bottom: .6rem; }
body[data-ui-page="agents"] #agents-form :is(input:not([type="checkbox"]),textarea,select) {
  border-radius: 9px; background: #0d1929; border-color: #364d68;
  padding-block: 12px; font-size: .94rem;
}
body[data-ui-page="agents"] .agents-avatar-select {
  border-radius: 10px; background: #101d2f; border: 1px solid #2d415b;
}
body[data-ui-page="agents"] .agents-card {
  background: transparent; border: none; border-bottom: 1px solid #2f425a;
  border-radius: 0; padding-inline: 0;
}
body[data-ui-page="agents"] .agents-card:last-child { border-bottom: 0; }
body[data-ui-page="agents"] .agents-primary {
  background: #d1e1f4; color: var(--ex-panel);
  padding-block: 14px; font-size: .94rem;
}
body[data-ui-page="agents"] .agents-primary:hover { background: #f1f7ff; }
body[data-ui-page="agents"] .agents-status { border-color: #49627d; }

/* Pricing: establish one clear recommended plan without a halo or 4 identical cards. */
body[data-ui-page="plans"] .plans-header { text-align: left; max-width: 740px; margin: 0 0 2.1rem; }
body[data-ui-page="plans"] .plans-header h1 {
  font-size: clamp(2rem,3.7vw,3.25rem);
  font-weight: 600; letter-spacing: -.035em;
}
body[data-ui-page="plans"] .plans-header p { color: var(--ex-secondary); }
body[data-ui-page="plans"] .plans-current { margin-left: 0; margin-right: 0; }
body[data-ui-page="plans"] .plans-grid { gap: 1rem; }
body[data-ui-page="plans"] .plan-tile {
  background: #142034;
  border: 1px solid #2f4158;
  border-radius: 12px;
  padding: clamp(1.3rem,2.5vw,1.8rem);
  box-shadow: none;
}
body[data-ui-page="plans"] .plan-tile--featured {
  background: #203551;
  border-color: #7e9ec8;
}
body[data-ui-page="plans"] .plan-tile--flare { box-shadow: none; border-color: #4c607c; }
body[data-ui-page="plans"] .plan-tile__btn { border-radius: 8px; }

/* Power-user data interfaces: content-first tables, selective emphasis. */
body[data-ui-page="admin"] .sidebar { background: #111e2e; width: 255px; }
body[data-ui-page="admin"] .main { padding: clamp(1.5rem,3vw,3rem); }
body[data-ui-page="admin"] .main__header { margin-bottom: 2rem; }
body[data-ui-page="admin"] .main__header h1 { font-weight: 600; letter-spacing: -.03em; }
body[data-ui-page="admin"] .stat-grid { gap: .85rem; }
body[data-ui-page="admin"] .stat-card {
  background: #172539;
  padding: clamp(1.1rem,2vw,1.6rem);
  border-color: var(--ex-stroke);
}
body[data-ui-page="admin"] .stat-card__value { color: #e6f0ff; }
body[data-ui-page="admin"] .card { background: #121e2e; }
body[data-ui-page="admin"] .card__title { font-weight: 600; letter-spacing: -.015em; }
body[data-ui-page="admin"] thead { background: #1b2a40; }
body[data-ui-page="admin"] td,
body[data-ui-page="admin"] th { padding-block: .8rem; }
body[data-ui-page="admin"] tbody tr:hover { background: #20324a; }
body[data-ui-page="studio"] .container { max-width: 1240px; }
body[data-ui-page="studio"] .topbar { background: #101e30; }
body[data-ui-page="studio"] .card { background: #142236; }

/* Article, tools and collaboration: stronger content separation than empty cards. */
body[data-ui-page="documentary"] .doc-feed__list { gap: 0; }
body[data-ui-page="documentary"] .doc-card {
  padding: clamp(1.25rem,2vw,2rem) .35rem;
  border: none;
  border-bottom: 1px solid var(--ex-stroke);
  border-radius: 0;
  background: transparent;
}
body[data-ui-page="documentary"] .doc-card:hover { background: #132137; border-color: var(--ex-stroke); }
body[data-ui-page="documentary"] .doc-card__title { letter-spacing: -.025em; }
body[data-ui-page="mcp"] .mcp-page { max-width: 890px; }
body[data-ui-page="mcp"] .mcp-page__head { padding-bottom: 1.1rem; border-bottom: 1px solid #33455d; }
body[data-ui-page="mcp"] .mcp-page__head .section__title { font-weight: 600; letter-spacing: -.02em; }
body[data-ui-page="mcp"] .mcp-card {
  background: var(--ex-panel); border-color: #34465d; padding: 1.4rem;
}
body[data-ui-page="mcp"] .mcp-notice {
  background: #1a2c42; border-color: #344d6c; color: #c6d5e8;
}
body[data-ui-page="workspace"] .ws-page { max-width: 1100px; }
body[data-ui-page="workspace"] .ws-card {
  background: var(--ex-panel); border: 1px solid #354861;
  padding: 1.4rem 1.6rem; border-radius: 10px;
}
body[data-ui-page="workspace"] .ws-empty { max-width: 500px; text-align: left; }
body[data-ui-page="support"] .support-thread,
body[data-ui-page="support"] .support-form { max-width: 740px; }
body[data-ui-page="support"] .support-ticket-list { max-width: 840px; }
body[data-ui-page="privacy"] .legal__section,
body[data-ui-page="terms"] .legal__section,
body[data-ui-page="content-policy"] .legal__section { opacity: 1; transform: none; }

/* Precise breakpoint repairs based on Chromium right-edge offenders. */
@media (max-width: 640px) {
  body:is([data-ui-page="index"],[data-ui-page="starwork"],[data-ui-page="mcp"],
  [data-ui-page="workspace"]) .nav__logo { flex: 0 1 auto; min-width: 0; }
  body:is([data-ui-page="index"],[data-ui-page="starwork"],[data-ui-page="mcp"],
  [data-ui-page="workspace"]) .nav__actions { flex: 0 0 auto; gap: .4rem; min-width: 0; }
  body:is([data-ui-page="index"],[data-ui-page="starwork"],[data-ui-page="mcp"],
  [data-ui-page="workspace"]) .nav__actions > .btn--ghost { display: none; }
  body:is([data-ui-page="index"],[data-ui-page="starwork"],[data-ui-page="mcp"],
  [data-ui-page="workspace"]) .nav__actions .btn--primary { padding: .53rem .65rem; font-size: .78rem; }
  body:is([data-ui-page="index"],[data-ui-page="starwork"],[data-ui-page="mcp"],
  [data-ui-page="workspace"]) .nav { padding-inline: .85rem; }
  body[data-ui-page="index"] .hero { text-align: left; padding: 4.5rem 1.25rem 3.2rem; }
  body[data-ui-page="index"] .hero__cta { justify-content: flex-start; }
  body[data-ui-page="index"] .hero__terminal { margin-top: 2.5rem; }
  body[data-ui-page="index"] .wordmark--hero { font-size: clamp(2.8rem,12vw,4.4rem); }
  body[data-ui-page="index"] .hero__tagline { font-size: 1.55rem; }
  body[data-ui-page="index"] .grid--4 { grid-template-columns: minmax(0,1fr); }
  body[data-ui-page="index"] .split__visual { overflow: clip; }
  body[data-ui-page="index"] .orbit { max-width: 100%; transform: scale(.86); transform-origin: center; }
  body[data-ui-page="auth"] .auth-split { grid-template-columns: minmax(0,1fr); }
  body[data-ui-page="auth"] .auth-pane { min-height: 100dvh; padding: 2rem max(1.2rem,env(safe-area-inset-right,0px)); }
  body[data-ui-page="auth"] .auth-mobile-brand { display: inline-flex; text-decoration: none; margin-bottom: 3rem; }
  body[data-ui-page="auth"] .auth-pane__inner { max-width: 430px; }
  body[data-ui-page="agents"] .agents-main > h1 { font-size: 2.1rem; }
  body[data-ui-page="agents"] .agents-panel { padding: 1.25rem; }
  body[data-ui-page="plans"] .plans-header { text-align: left; }
  body[data-ui-page="chat"] .chat-header { padding-inline: .8rem; }
  body[data-ui-page="chat"] .chat-messages { padding-inline: .85rem; }
  body[data-ui-page="chat"] .chat-composer__inner { padding: .7rem .75rem .6rem; }
}
@media (min-width: 641px) and (max-width: 1050px) {
  body[data-ui-page="index"] .grid--3 { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body[data-ui-page="agents"] .agents-layout { grid-template-columns: minmax(0,1fr) minmax(250px,.82fr); }
}
@media (max-width: 900px) {
  body[data-ui-page="agents"] .agents-layout { grid-template-columns: minmax(0,1fr); }
}
/* The chat sidebar stays visible at 768px, so the full composer controls
   need to wrap before the main column becomes smaller than the controls. */
@media (min-width: 761px) and (max-width: 1120px) {
  body[data-ui-page="chat"] .chat-composer__row { flex-wrap: wrap; gap: .55rem; }
  body[data-ui-page="chat"] .chat-composer__tools { margin-right: auto; flex-shrink: 0; }
  body[data-ui-page="chat"] .chat-composer__right {
    display: flex; flex-wrap: wrap; justify-content: flex-end;
    flex: 1 1 230px; min-width: 0; max-width: 100%;
  }
}
@media (max-width: 760px) {
  body[data-ui-page="chat"] .chat-sidebar { width: min(280px,88vw); }
  body[data-ui-page="chat"] .chat-composer__row { flex-wrap: wrap; gap: .35rem; }
  body[data-ui-page="chat"] .chat-composer__right {
    display: flex; flex: 1 1 auto; min-width: 0; max-width: 100%;
    flex-wrap: wrap; justify-content: flex-end;
  }
  body[data-ui-page="chat"] .chat-composer__tools { flex-shrink: 0; }
  body[data-ui-page="chat"] .chat-send { width: 38px; height: 38px; }
}
@media (max-width: 420px) {
  body[data-ui-page="index"] .hero__cta > .btn { width: 100%; justify-content: center; }
  body[data-ui-page="index"] .hero__terminal .terminal__body { font-size: .68rem; padding: 1rem; }
  body[data-ui-page="chat"] .effort-picker__btn { padding-inline: .35rem; }
  body[data-ui-page="agents"] .agents-card-actions { flex-wrap: wrap; }
}
/* Static indicator and all-purpose reduced motion. */
@media (prefers-reduced-motion: reduce) {
  body[data-ui-page="chat"] .thinking-indicator::before,
  body[data-ui-page="mcp"] .mcp-test-result--pending::before { animation: none !important; }
}

/* 10. Real screenshot review: don't make the brand and sample workflow invisible
   during delayed intro animations, disabled motion, or slow script execution. */
body[data-ui-page="index"] .hero .wordmark--hero,
body[data-ui-page="index"] .terminal__body p {
  opacity: 1;
  animation: none;
  transform: none;
}
body[data-ui-page="index"] .hero .wordmark--hero {
  color: var(--ex-ink);
}
body[data-ui-page="index"] .hero__terminal .terminal__body {
  min-height: 0;
}

/* Auth is a functional entry screen, not a staggered reveal. Sign-in fields
   must never disappear behind animation delays or reduced-motion settings. */
body[data-ui-page="auth"] .auth-pane__inner > *:not(.auth-error) {
  opacity: 1;
  animation: none;
  transform: none;
}

/* 11. Deep application surfaces: these are dynamically revealed inside Chat.
   Treat them as a single product shell, never isolated aesthetic experiments. */
body[data-ui-page="chat"] :is(
  .skills-view, .projects-view, .memory-view, .plan-view,
  .sandbox-view, .scheduled-view, .sandbox-browser
) {
  background: var(--ex-canvas);
  color: var(--ui-headline);
}
body[data-ui-page="chat"] :is(
  .skills-view__head, .projects-view__head, .memory-view__head,
  .plan-view__head, .sandbox-view__head, .scheduled-view__head
) {
  background: var(--ex-chrome);
  border-bottom: 1px solid #304158;
}
body[data-ui-page="chat"] :is(
  .skills-view__title, .projects-view__title, .memory-view__title,
  .plan-view__title, .sandbox-view__title, .scheduled-view__title
) {
  font-weight: 600;
  letter-spacing: -.02em;
}
body[data-ui-page="chat"] :is(
  .skills-view__body, .projects-view__body, .memory-view__body,
  .plan-view__body, .sandbox-view__body
) {
  min-width: 0;
  overscroll-behavior-y: contain;
}
body[data-ui-page="chat"] :is(
  .model-card, .referral-card, .quota-card, .status-card,
  .ask-card, .skill-card, .scheduled-card, .projects-card
) {
  border-color: #34465e;
  background: #152338;
  border-radius: 11px;
  box-shadow: none;
}
body[data-ui-page="chat"] .referral-card {
  margin-block: 1.25rem;
  padding: clamp(1rem,2vw,1.5rem);
}
body[data-ui-page="chat"] .referral-card__reward {
  background: #243952; color: #d3e3f7;
  font-weight: 600; border-radius: 5px;
}
body[data-ui-page="chat"] .status-card {
  background: var(--ex-chrome);
  border-color: #283f59;
  font-size: .82rem;
  line-height: 1.6;
}
body[data-ui-page="chat"] .quota-card {
  background: #1a2a41;
  border-color: #536a88;
}
body[data-ui-page="chat"] .quota-card__icon {
  background: #263b56;
  border-color: #48617f;
  animation: none;
}
body[data-ui-page="chat"] .ask-card__option {
  background: #233750;
  border-color: #49617e;
  border-radius: 8px;
  min-height: 40px;
}
body[data-ui-page="chat"] .onboard-modal {
  background: #152337;
  border-color: #435670;
  border-radius: 14px;
  box-shadow: 0 20px 65px rgba(0,0,0,.24);
}
body[data-ui-page="chat"] .onboard-modal__title {
  font-weight: 600;
  letter-spacing: -.03em;
}
body[data-ui-page="chat"] .onboard-section { border-color: var(--ex-stroke); }
body[data-ui-page="chat"] .settings-row {
  padding-block: 1rem;
  border-bottom-color: #2e4056;
  gap: 1rem;
}
body[data-ui-page="chat"] .settings-row__title { font-weight: 600; }
body[data-ui-page="chat"] .settings-row__desc { line-height: 1.6; color: var(--ui-muted); }
body[data-ui-page="chat"] .settings-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
body[data-ui-page="chat"] .settings-grid input {
  background: #0f1b2e;
  border-color: var(--ex-stroke);
  border-radius: 8px;
  min-width: 0;
  font-size: .92rem;
  padding: .75rem;
}
body[data-ui-page="chat"] .chat-list__item {
  border-radius: 7px;
}
body[data-ui-page="chat"] .chat-list__item.active {
  background: #283c57;
}
body[data-ui-page="chat"] .chat-list__item:hover {
  background: #1b2d43;
}
body[data-ui-page="chat"] .toast {
  background: var(--ex-panel);
  border-color: #435a76;
  border-radius: 10px;
  box-shadow: 0 12px 36px rgba(0,0,0,.21);
}
body[data-ui-page="chat"] :is(.model-card, .ask-card, .referral-card) a {
  text-underline-offset: .2em;
}
@media (max-width: 767px) {
  body[data-ui-page="chat"] .settings-grid {
    grid-template-columns: minmax(0,1fr);
  }
  body[data-ui-page="chat"] .settings-row {
    align-items: flex-start; flex-wrap: wrap; gap: .65rem;
  }
  body[data-ui-page="chat"] .referral-card__header { flex-wrap: wrap; gap: .65rem; }
  body[data-ui-page="chat"] .onboard-modal { max-height: calc(100dvh - 1.5rem); }
}

/* Preserve the existing collapsed-rail contract. The wider default sidebar
   must not override its collapsed width on desktop or drawer width on phones. */
@media (min-width: 761px) {
  body[data-ui-page="chat"] .chat-sidebar.collapsed { width: 56px; }
}
@media (max-width: 760px) {
  body[data-ui-page="chat"] .chat-sidebar.collapsed { width: min(280px,88vw); }
}

/* Preserve the app's real "Midnight" theme option; the normal Starlight
   palette must not silently override user-selected appearance settings. */
body[data-ui-page="chat"].theme-midnight { background: #050911; }
body[data-ui-page="chat"].theme-midnight :is(.chat-main, .chat-messages) {
  background: var(--ex-canvas);
}
body[data-ui-page="chat"].theme-midnight :is(
  .chat-sidebar, .chat-header, .settings-nav,
  .skills-view, .projects-view, .memory-view,
  .plan-view, .sandbox-view, .scheduled-view, .sandbox-browser
) {
  background: var(--ex-chrome);
  border-color: #1d2a3d;
}
body[data-ui-page="chat"].theme-midnight :is(
  .chat-composer__inner, .modal, .settings-panels,
  .model-card, .onboard-modal, .referral-card
) {
  background: var(--ex-chrome);
  border-color: #2a3a50;
}

/* 12. Experience redesign — quiet, content-led surfaces (2026-10-24).
   The hierarchy deliberately distinguishes navigation, work area and tools.
   Motion appears only for actual state changes; no idle page decoration. */
:root {
  --ex-canvas: #0a111d;
  --ex-chrome: #101b2a;
  --ex-panel: #152234;
  --ex-panel-hover: #1d2c40;
  --ex-stroke: #3a4b62;
  --ex-stroke-soft: #253449;
  --ex-ink: #f4f8ff;
  --ex-secondary: #b9c7d8;
  --ex-tertiary: #9eb0c6;
  --ex-accent: #d5e4f5;
  --ex-negative: #efaaad;
  --ex-radius: 11px;
}
body {
  accent-color: #aec8e8;
}
:where(button,input,textarea,select) { font-variant-numeric: tabular-nums; }
:where(input,textarea,select) { caret-color: #c6daf2; }
:where(input,textarea,select):focus-visible {
  outline-offset: 2px;
}
:where(.nav,.chat-header,.agents-header) {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body[data-ui-page="index"] .section--split {
  gap: clamp(2.5rem, 5vw, 5.5rem);
}
body[data-ui-page="index"] .section--split .split__text > p,
body[data-ui-page="starwork"] .split__text > p {
  line-height: 1.75;
  color: var(--ex-secondary);
}
body[data-ui-page="index"] .checklist li { line-height: 1.55; }
body[data-ui-page="index"] #workspaces {
  align-items: center;
}
body[data-ui-page="index"] #workspaces .split__visual {
  min-width: 0;
  width: 100%;
}
body[data-ui-page="index"] .workspace-preview {
  width: min(100%, 570px);
  margin-inline: auto;
  overflow: hidden;
  background: var(--ex-chrome);
  color: var(--ex-ink);
  border: 1px solid #34445b;
  border-radius: 13px;
  box-shadow: 0 22px 65px rgba(2, 8, 16, .21);
  font-family: Inter, var(--font-body, sans-serif);
  text-align: left;
}
.workspace-preview__head {
  display: flex;
  align-items: center;
  gap: .8rem;
  min-width: 0;
  padding: 1.1rem 1.3rem;
  background: var(--ex-panel);
  border-bottom: 1px solid var(--ex-stroke-soft);
}
.workspace-preview__symbol {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border: 1px solid #465a76;
  border-radius: 9px;
  background: #22344d;
  color: #d7e5f6;
  display: flex;
  align-items: center;
  justify-content: center;
}
.workspace-preview__headcopy {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
}
.workspace-preview__headcopy strong {
  font-size: .86rem;
  font-weight: 600;
  letter-spacing: -.01em;
}
.workspace-preview__headcopy span {
  font-size: .68rem;
  color: var(--ex-tertiary);
}
.workspace-preview__role {
  border: 1px solid var(--ex-stroke);
  border-radius: 5px;
  padding: .3rem .5rem;
  font-size: .66rem;
  color: #bbd0e7;
  white-space: nowrap;
}
.workspace-preview__body { padding: 1.25rem 1.4rem 1.45rem; }
.workspace-preview__breadcrumbs {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .72rem;
  color: var(--ex-tertiary);
  margin-bottom: 1.35rem;
}
.workspace-preview__breadcrumbs strong { font-weight: 500; color: #d6e3f3; }
.workspace-preview__slash { opacity: .55; }
.workspace-preview__project {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.55rem;
  border-bottom: 1px solid var(--ex-stroke-soft);
}
.workspace-preview__eyeline {
  display: block;
  font-size: .63rem;
  color: #9fb8d6;
  letter-spacing: .10em;
  margin-bottom: .55rem;
  font-weight: 600;
}
.workspace-preview__project h3 {
  font-family: "Space Grotesk", Inter, sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: -.025em;
  line-height: 1.3;
  margin: 0 0 .35rem;
}
.workspace-preview__project p {
  font-size: .76rem;
  line-height: 1.5;
  color: var(--ex-tertiary);
  margin: 0;
}
.workspace-preview__project-state {
  display: inline-flex;
  gap: .4rem;
  align-items: center;
  color: #9dc6ec;
  font-size: .69rem;
  white-space: nowrap;
  margin-top: .2rem;
}
.workspace-preview__project-state > span {
  width: 6px;
  height: 6px;
  background: #7fb3e3;
  border-radius: 50%;
}
.workspace-preview__sectionhead {
  margin: 1.35rem 0 .5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: var(--ex-ink);
  font-weight: 600;
  font-size: .79rem;
}
.workspace-preview__sectionhead > span:last-child {
  color: var(--ex-tertiary);
  font-weight: 400;
  font-size: .69rem;
}
.workspace-preview__activity {
  display: flex;
  gap: .8rem;
  align-items: center;
  padding: .9rem 0;
}
.workspace-preview__activity + .workspace-preview__activity {
  border-top: 1px solid rgba(62, 79, 102, .42);
}
.workspace-preview__activity-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: 1px solid #344b64;
  background: #1a2b41;
  color: #bed0e6;
  border-radius: 7px;
  display: grid;
  place-items: center;
}
.workspace-preview__activity > div:nth-child(2) {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: .18rem;
  min-width: 0;
}
.workspace-preview__activity strong {
  color: var(--ex-ink);
  font-size: .78rem;
  font-weight: 550;
}
.workspace-preview__activity > div:nth-child(2) span {
  color: var(--ex-tertiary);
  font-size: .69rem;
  line-height: 1.35;
}
.workspace-preview__activity-time {
  align-self: flex-start;
  margin-top: .3rem;
  color: #98a9bd;
  font-size: .66rem;
  white-space: nowrap;
}
.workspace-preview__foot {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: #122034;
  border-top: 1px solid var(--ex-stroke-soft);
  padding: .85rem 1.3rem;
  font-size: .71rem;
  color: #b9cbdf;
}
.workspace-preview__member-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7fb3e3;
}
.workspace-preview__foot svg { margin-left: auto; }

/* Chat should feel like a workspace with one calm reading canvas.
   Clear sidebar sections, legible conversation names, no nested glass cards. */
body[data-ui-page="chat"] { background: var(--ex-canvas); }
body[data-ui-page="chat"] #starfield { opacity: .045; pointer-events: none; }
body[data-ui-page="chat"] .chat-main,
body[data-ui-page="chat"] .chat-messages { background: var(--ex-canvas); }
body[data-ui-page="chat"] .chat-sidebar {
  width: 258px;
  padding-inline: .8rem;
  background: var(--ex-chrome);
  border: 0;
  border-right: 1px solid var(--ex-stroke-soft);
  border-radius: 0;
}
body[data-ui-page="chat"] .chat-sidebar__logo {
  margin-bottom: 1.1rem;
}
body[data-ui-page="chat"] .chat-sidebar__label {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .055em;
  text-transform: none;
  color: #a8bad1;
  padding-top: 1.15rem;
}
body[data-ui-page="chat"] .chat-new {
  background: var(--ex-accent);
  border-color: var(--ex-accent);
  color: var(--ex-panel);
  border-radius: 9px;
  font-weight: 650;
  box-shadow: none;
  padding: .7rem .75rem;
}
body[data-ui-page="chat"] .chat-new:hover {
  background: var(--ex-ink);
  border-color: var(--ex-ink);
}
body[data-ui-page="chat"] .chat-actions button {
  min-height: 39px;
  border-radius: 7px;
  color: #b8c7d8;
  font-weight: 500;
}
body[data-ui-page="chat"] .chat-actions button:hover {
  background: var(--ex-panel);
  color: #f0f5fb;
}
body[data-ui-page="chat"] .chat-list {
  gap: 2px;
  padding-right: .15rem;
}
body[data-ui-page="chat"] .chat-list__item {
  position: relative;
  gap: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  min-height: 39px;
}
body[data-ui-page="chat"] .chat-list__item.active {
  background: #253850;
  border-color: #314861;
}
body[data-ui-page="chat"] .chat-list__item:hover:not(.active) {
  background: #1b2b40;
}
body[data-ui-page="chat"] .chat-list__item > a {
  min-width: 0;
  display: flex;
  align-items: center;
  font-size: .81rem;
  padding: .55rem .5rem .55rem .7rem;
  border-radius: 7px;
  color: var(--ex-secondary);
  outline-offset: -2px;
}
body[data-ui-page="chat"] .chat-list__item.active > a { color: var(--ex-ink); }
body[data-ui-page="chat"] .chat-list__more {
  width: 29px;
  height: 29px;
  flex: 0 0 29px;
  margin-right: .3rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ex-ink);
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  opacity: 0;
  transition: background .14s ease, opacity .14s ease;
}
body[data-ui-page="chat"] .chat-list__more svg { width: 16px; height: 16px; }
body[data-ui-page="chat"] .chat-list__item:hover .chat-list__more,
body[data-ui-page="chat"] .chat-list__item:focus-within .chat-list__more,
body[data-ui-page="chat"] .chat-list__more[aria-expanded="true"] {
  opacity: 1;
}
body[data-ui-page="chat"] .chat-list__more:hover,
body[data-ui-page="chat"] .chat-list__more[aria-expanded="true"] {
  background: #344a64;
  color: #f1f6ff;
}
.chat-session-menu {
  position: fixed;
  z-index: 140;
  display: flex;
  min-width: 185px;
  padding: .3rem;
  background: #1a293c;
  border: 1px solid #445772;
  border-radius: 9px;
  box-shadow: 0 12px 32px rgba(0,0,0,.3);
}
.chat-session-menu button {
  border: 0;
  background: transparent;
  width: 100%;
  border-radius: 6px;
  padding: .7rem .75rem;
  font: 500 .8rem Inter, sans-serif;
  cursor: pointer;
  color: #e9b0b3;
  text-align: left;
}
.chat-session-menu button:hover,
.chat-session-menu button:focus-visible { background: #42303b; }
.chat-delete-dialog {
  width: min(430px,calc(100vw - 28px));
  max-width: 430px;
  max-height: calc(100dvh - 28px);
  margin: auto;
  padding: 0;
  color: var(--ex-ink);
  background: #152235;
  border: 1px solid #475871;
  border-radius: 14px;
  box-shadow: 0 26px 70px rgba(0,0,0,.42);
}
.chat-delete-dialog::backdrop { background: rgba(2,7,14,.78); }
.chat-delete-dialog__panel { padding: 1.65rem; }
.chat-delete-dialog__icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  background: #342b36;
  color: #edb1b5;
  border-radius: 9px;
}
.chat-delete-dialog__icon svg { width: 19px; height: 19px; }
.chat-delete-dialog h2 { font-size: 1.13rem; font-weight: 600; letter-spacing: -.015em; margin: 1.2rem 0 .55rem; }
.chat-delete-dialog p { font-size: .84rem; color: #b8c9da; line-height: 1.65; margin: 0; }
.chat-delete-dialog .chat-delete-dialog__subject {
  background: #101a2b;
  border: 1px solid #2a3b50;
  border-radius: 7px;
  padding: .7rem .85rem;
  margin-top: 1.1rem;
  color: #e3edf9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-delete-dialog__actions { display: flex; justify-content: flex-end; gap: .65rem; margin-top: 1.55rem; flex-wrap: wrap; }
.chat-delete-dialog__actions button {
  min-height: 40px;
  padding: .6rem .9rem;
  border-radius: 8px;
  border: 1px solid #4b5d73;
  font-size: .79rem;
  font-weight: 600;
  cursor: pointer;
}
.chat-delete-dialog__cancel { background: #213147; color: #d8e5f4; border-color: #4b5d73; }
.chat-delete-dialog__cancel:hover { background: #2e415a; }
/* No !important here: each button owns its border colour so the light theme can
   restyle it from theme.css, which loads after this file. */
.chat-delete-dialog__confirm { background: #a94b54; border-color: #a94b54; color: #fff; }
.chat-delete-dialog__confirm:hover:not(:disabled) { background: #bd5962; }
body[data-ui-page="chat"] .chat-user { border-top-color: var(--ex-stroke-soft); }
body[data-ui-page="chat"] .chat-user__avatar {
  border-radius: 9px;
  border-color: #3c526d;
  background: #243751;
}

/* Conversation content: comfortable reading measure and settled surface. */
body[data-ui-page="chat"] .chat-header {
  min-height: 60px;
  background: var(--ex-canvas);
  border-bottom: 1px solid #243346;
  padding-inline: 1.45rem;
}
body[data-ui-page="chat"] .chat-header h1 {
  color: #eef4fc;
  font-size: .9rem;
  font-weight: 600;
}
body[data-ui-page="chat"] .chat-header__actions > button,
body[data-ui-page="chat"] .chat-help {
  border-radius: 8px;
}
body[data-ui-page="chat"] .chat-messages__inner {
  width: 100%;
  max-width: 800px;
  gap: 1.5rem;
}
body[data-ui-page="chat"] .chat-messages {
  padding: clamp(1.2rem,3vw,2.75rem) clamp(.8rem,3vw,2.5rem);
}
body[data-ui-page="chat"] .msg { gap: .7rem; }
body[data-ui-page="chat"] .msg__body { min-width: 0; line-height: 1.65; }
body[data-ui-page="chat"] .msg__name {
  font-family: Inter, sans-serif;
  font-size: .76rem;
  font-weight: 600;
  color: #b8cce5;
}
body[data-ui-page="chat"] .msg--ai .msg__avatar {
  border: 1px solid #3d516d;
  border-radius: 9px;
  background: #18283c;
  width: 32px;
  height: 32px;
}
body[data-ui-page="chat"] .msg--user .msg__text {
  border-color: #35445a;
  background: #1d2b3f;
  box-shadow: none;
  border-radius: 13px 13px 4px 13px;
  line-height: 1.6;
}
body[data-ui-page="chat"] .msg__text :is(p,ul,ol) { line-height: 1.7; }

/* Composer: settings are discoverable in a light toolbar; compose a message
   in the center; a single calm action row makes Send the clear primary. */
body[data-ui-page="chat"] .chat-composer {
  padding: .55rem clamp(.8rem,3vw,1.5rem) .55rem;
  background: var(--ex-canvas);
}
body[data-ui-page="chat"] .chat-composer__inner {
  position: relative;
  width: 100%;
  max-width: 800px;
  padding: 0;
  background: #141f2f;
  border: 1px solid var(--ex-stroke);
  border-radius: 13px;
  box-shadow: 0 12px 28px rgba(0,0,0,.16);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
body[data-ui-page="chat"] .chat-composer__inner:focus-within {
  border-color: #84a6cd;
  box-shadow: 0 0 0 2px rgba(154,190,228,.09), 0 12px 28px rgba(0,0,0,.16);
}
body[data-ui-page="chat"] .chat-composer__config {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: .25rem;
  padding: .65rem .75rem .1rem;
  min-width: 0;
}
body[data-ui-page="chat"] .chat-composer__config > .effort-picker {
  position: relative;
  min-width: 0;
}
body[data-ui-page="chat"] .chat-composer__config .effort-picker__btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 31px;
  padding: .28rem .48rem;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 6px;
  color: #bacce2;
  font-size: .75rem;
  font-weight: 550;
  white-space: nowrap;
}
body[data-ui-page="chat"] .chat-composer__config .effort-picker__btn:hover,
body[data-ui-page="chat"] .chat-composer__config .effort-picker__btn[aria-expanded="true"] {
  border-color: var(--ex-stroke);
  background: var(--ex-panel);
  color: #f0f6ff;
}
body[data-ui-page="chat"] .chat-composer__config .effort-picker__btn svg:first-child {
  width: 13px;
  height: 13px;
  opacity: .72;
}
body[data-ui-page="chat"] .chat-composer__config .effort-picker__btn svg:last-child {
  width: 11px;
  height: 11px;
  opacity: .6;
}
body[data-ui-page="chat"] .chat-composer__config .effort-picker__menu {
  z-index: 65;
  border-color: var(--ex-stroke);
  background: #1b2a3d;
  box-shadow: 0 18px 38px rgba(0,0,0,.28);
}
body[data-ui-page="chat"] .chat-composer__images {
  padding: .2rem .9rem .4rem;
  margin-bottom: 0;
}
body[data-ui-page="chat"] #composer-input {
  display: block;
  width: 100%;
  min-height: 69px;
  max-height: 220px;
  padding: .75rem 1rem .65rem;
  font: 400 .97rem/1.6 Inter, var(--font-body, sans-serif);
  color: var(--ex-ink);
  letter-spacing: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  outline: none;
}
body[data-ui-page="chat"] #composer-input::placeholder { color: #9db0c8; }
body[data-ui-page="chat"] .chat-composer__row {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 51px;
  padding: .4rem .7rem .6rem;
  margin-top: 0;
  border-top: 1px solid #26384b;
  flex-wrap: nowrap;
}
body[data-ui-page="chat"] .chat-composer__tools {
  display: inline-flex;
  align-items: center;
  gap: .15rem;
  flex: 0 1 auto;
  min-width: 0;
}
body[data-ui-page="chat"] .chat-composer__tools button {
  width: 34px;
  height: 34px;
  padding: 0;
  flex: 0 0 34px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: #abbcd1;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body[data-ui-page="chat"] .chat-composer__tools button:hover {
  border-color: var(--ex-stroke);
  background: #25374d;
  color: var(--ex-ink);
}
body[data-ui-page="chat"] .chat-composer__tools button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body[data-ui-page="chat"] .chat-composer__right {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  margin-left: auto;
  justify-content: flex-end;
  flex-wrap: nowrap;
}
body[data-ui-page="chat"] .bridge-connect-btn {
  display: inline-flex;
  align-items: center;
  border: 1px solid #35475d;
  border-radius: 7px;
  background: transparent;
  color: #aebfd3;
  box-shadow: none;
  font-size: .72rem;
  font-weight: 550;
  padding: .4rem .6rem;
  min-height: 34px;
  max-width: 100%;
}
body[data-ui-page="chat"] .bridge-connect-btn:hover {
  border-color: #577391;
  background: var(--ex-panel);
  color: var(--ex-ink);
}
body[data-ui-page="chat"] .bridge-badge {
  border-radius: 7px;
  background: #1d3042;
  border-color: #3b586d;
  min-height: 34px;
}
body[data-ui-page="chat"] .chat-send {
  width: 37px;
  height: 37px;
  flex: 0 0 37px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #122136;
  background: var(--ex-secondary);
  border: 1px solid var(--ex-secondary);
  box-shadow: none;
  transition: background .15s ease, transform .15s ease;
}
body[data-ui-page="chat"] .chat-send:not(.chat-send--stop):hover {
  background: #f2f7ff;
  transform: none;
}
body[data-ui-page="chat"] .chat-send svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body[data-ui-page="chat"] .chat-send--stop {
  background: #ac555e;
  border-color: #ac555e;
  color: #fff;
  animation: none;
}
body[data-ui-page="chat"] .chat-hint {
  margin-top: .6rem;
  font-size: .69rem;
  line-height: 1.4;
  color: #95a6bb;
}
body[data-ui-page="chat"] #voice-btn.voice-btn--recording {
  background: #42323e;
  border-color: #a36976;
  color: #f6b9c1;
  animation: none;
  position: relative;
}
body[data-ui-page="chat"] #voice-btn.voice-btn--recording::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 1px solid rgba(246,185,193,.58);
  border-radius: 9px;
  animation: exListen 1.6s ease-in-out infinite;
}
@keyframes exListen {
  0%,100% { opacity: .35; transform: scale(.96); }
  50% { opacity: 1; transform: scale(1); }
}
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* A shared restrained component vocabulary for all app screens. */
body:is([data-ui-page="auth"],[data-ui-page="agents"],[data-ui-page="plans"],[data-ui-page="admin"],[data-ui-page="studio"],[data-ui-page="mcp"],[data-ui-page="workspace"],[data-ui-page="support"]) :is(input:not([type="checkbox"]),textarea,select) {
  transition: border-color .15s ease, background-color .15s ease;
}
body:is([data-ui-page="auth"],[data-ui-page="agents"],[data-ui-page="plans"],[data-ui-page="admin"],[data-ui-page="studio"],[data-ui-page="mcp"],[data-ui-page="workspace"],[data-ui-page="support"]) :is(input:not([type="checkbox"]),textarea,select):focus {
  border-color: #83a4ca;
}
body[data-ui-page="agents"] .agents-layout { gap: 1.25rem; }
body[data-ui-page="agents"] .agents-panel {
  background: #121e30;
  border-color: var(--ex-stroke);
  border-radius: 12px;
  box-shadow: none;
}
body[data-ui-page="agents"] .agents-card {
  border-bottom-color: var(--ex-stroke);
}
body[data-ui-page="agents"] .agents-header,
body[data-ui-page="mcp"] .mcp-page__head,
body[data-ui-page="studio"] .topbar {
  background: #101b2b;
}
body[data-ui-page="mcp"] .mcp-card,
body[data-ui-page="workspace"] .ws-card {
  border-radius: 9px;
  background: var(--ex-panel);
  border-color: var(--ex-stroke);
  box-shadow: none;
}
body[data-ui-page="plans"] .plan-tile {
  background: var(--ex-panel);
  border-color: var(--ex-stroke);
  box-shadow: none;
}
body[data-ui-page="plans"] .plan-tile--featured {
  border-color: #7393b8;
  background: #1c304a;
}
body[data-ui-page="plans"] .plan-tile__btn {
  min-height: 42px;
}
body[data-ui-page="admin"] .stat-card,
body[data-ui-page="studio"] .card {
  border-radius: 10px;
  box-shadow: none;
}
body[data-ui-page="admin"] .stat-card {
  border: 1px solid var(--ex-stroke);
  background: #152438;
}
body[data-ui-page="admin"] .sidebar { background: var(--ex-chrome); }
body[data-ui-page="admin"] .card { border-color: var(--ex-stroke); }
body[data-ui-page="documentary"] .doc-card { border-radius: 0; }
body[data-ui-page="auth"] .auth-pane__inner { max-width: 420px; }

/* Actual space constraints, not just fluid text. */
@media (max-width: 1120px) and (min-width: 761px) {
  body[data-ui-page="chat"] .chat-composer__row { flex-wrap: nowrap; }
  body[data-ui-page="chat"] .chat-composer__right { flex: 0 1 auto; flex-wrap: nowrap; }
}
@media (max-width: 760px) {
  body[data-ui-page="index"] .workspace-preview { width: 100%; }
  body[data-ui-page="index"] .workspace-preview__project h3 { font-size: 1.2rem; }
  body[data-ui-page="index"] .workspace-preview__body { padding: 1rem 1.1rem; }
  body[data-ui-page="index"] .workspace-preview__head { padding: 1rem; }
  body[data-ui-page="index"] .workspace-preview__project { flex-wrap: wrap; gap: .7rem; }
  body[data-ui-page="index"] .workspace-preview__activity-time { display: none; }
  body[data-ui-page="chat"] .chat-sidebar {
    width: min(284px,88vw);
    border-radius: 0 12px 12px 0;
    padding-top: max(1rem, env(safe-area-inset-top));
  }
  body[data-ui-page="chat"] .chat-sidebar.collapsed {
    width: min(284px,88vw);
    border-radius: 0 12px 12px 0;
  }
  body[data-ui-page="chat"] .chat-list__more { opacity: .82; }
  body[data-ui-page="chat"] .chat-header { padding-inline: .8rem; }
  body[data-ui-page="chat"] .chat-messages { padding-inline: 1rem; }
  body[data-ui-page="chat"] .chat-composer {
    padding: .4rem max(.65rem,env(safe-area-inset-right,0px)) calc(.35rem + env(safe-area-inset-bottom,0px));
  }
  body[data-ui-page="chat"] .chat-composer__config {
    padding: .55rem .58rem .1rem;
    gap: .1rem;
  }
  body[data-ui-page="chat"] .chat-composer__config .effort-picker__btn {
    padding: .26rem .34rem;
    font-size: .69rem;
    min-height: 29px;
  }
  body[data-ui-page="chat"] .chat-composer__config .effort-picker__btn span {
    display: inline;
  }
  body[data-ui-page="chat"] .chat-composer__config .effort-picker__btn svg:first-child { display: none; }
  body[data-ui-page="chat"] .chat-composer__config .effort-picker__btn svg:last-child {
    display: inline;
    width: 10px;
    height: 10px;
  }
  body[data-ui-page="chat"] #composer-input {
    font-size: 16px;
    min-height: 63px;
    padding: .65rem .8rem .55rem;
  }
  body[data-ui-page="chat"] .chat-composer__row {
    padding: .34rem .48rem .5rem;
    min-height: 47px;
    gap: .15rem;
    flex-wrap: nowrap;
  }
  body[data-ui-page="chat"] .chat-composer__tools { gap: .05rem; }
  body[data-ui-page="chat"] .chat-composer__tools button {
    width: 31px;
    height: 36px;
    flex-basis: 31px;
  }
  body[data-ui-page="chat"] .chat-composer__right {
    display: flex;
    gap: .26rem;
    flex: 0 1 auto;
    flex-wrap: nowrap;
  }
  body[data-ui-page="chat"] .bridge-connect-btn {
    width: 34px;
    height: 36px;
    min-width: 34px;
    min-height: 36px;
    padding: .2rem;
    justify-content: center;
  }
  body[data-ui-page="chat"] .bridge-connect-btn span { display: none; }
  body[data-ui-page="chat"] .bridge-connect-btn svg { width: 16px; height: 16px; }
  body[data-ui-page="chat"] .bridge-badge {
    max-width: 82px;
    padding: .32rem .4rem;
    font-size: .65rem;
  }
  body[data-ui-page="chat"] .chat-send {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }
  body[data-ui-page="chat"] .chat-hint { font-size: .62rem; }
  body[data-ui-page="chat"] .chat-delete-dialog__panel { padding: 1.2rem; }
}
@media (max-width: 360px) {
  body[data-ui-page="chat"] .chat-composer__tools button {
    width: 29px;
    flex-basis: 29px;
  }
  body[data-ui-page="chat"] .chat-composer__row { gap: .1rem; }
  body[data-ui-page="chat"] .bridge-connect-btn { min-width: 30px; width: 30px; }
  body[data-ui-page="chat"] .chat-composer__config .effort-picker__btn { font-size: .66rem; }
}
@media (hover:none), (pointer:coarse) {
  body[data-ui-page="chat"] .chat-list__more { opacity: 1; min-height: 35px; min-width: 35px; }
}
@media (prefers-reduced-motion:reduce) {
  body[data-ui-page="chat"] #voice-btn.voice-btn--recording::after { animation: none; }
}
body[data-ui-page="chat"].theme-midnight .chat-main,
body[data-ui-page="chat"].theme-midnight .chat-messages { background: var(--ex-canvas); }
body[data-ui-page="chat"].theme-midnight .chat-sidebar,
body[data-ui-page="chat"].theme-midnight .chat-header { background: var(--ex-chrome); }
body[data-ui-page="chat"].theme-midnight .chat-composer__inner {
  background: var(--ex-chrome);
  border-color: #33445d;
}

/* 13. First-use experience — real actions, not a glowing avatar vignette. */
body[data-ui-page="chat"] .chat-empty--start {
  width: min(100%,540px);
  margin: min(8vh,70px) auto 0;
  padding: 1rem;
  align-items: flex-start;
  text-align: left;
}
body[data-ui-page="chat"] .chat-empty--start .chat-empty__brand {
  width: 37px;
  height: 37px;
  display: grid;
  place-items: center;
  background: #1c2c42;
  border: 1px solid #354a61;
  border-radius: 9px;
  margin-bottom: 1.45rem;
}
body[data-ui-page="chat"] .chat-empty--start .chat-empty__brand svg {
  width: 17px;
  height: 17px;
  fill: #d7e6f6;
  filter: none;
  animation: none;
  margin: 0;
}
body[data-ui-page="chat"] .chat-empty--start h2 {
  margin: 0 0 .6rem;
  font-family: "Space Grotesk",Inter,sans-serif;
  font-size: clamp(1.3rem,2vw,1.8rem);
  font-weight: 600;
  letter-spacing: -.025em;
  color: var(--ex-ink);
  text-align: left;
}
body[data-ui-page="chat"] .chat-empty--start > p {
  color: #a9bed4;
  font-size: .9rem;
  line-height: 1.65;
  text-align: left;
  margin: 0;
}
body[data-ui-page="chat"] .chat-empty__suggestions {
  margin-top: 1.6rem;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  width: 100%;
  gap: .65rem;
}
body[data-ui-page="chat"] .chat-empty__suggestions button {
  display: flex;
  min-width: 0;
  min-height: 48px;
  align-items: center;
  justify-content: flex-start;
  padding: .7rem .85rem;
  border-radius: 8px;
  background: #17263a;
  border: 1px solid #30445d;
  color: #d0e0f2;
  font-size: .77rem;
  line-height: 1.4;
  font-weight: 550;
  text-align: left;
  cursor: pointer;
  transition: background .15s ease,border-color .15s ease;
}
body[data-ui-page="chat"] .chat-empty__suggestions button:hover {
  background: #223650;
  border-color: #6887a8;
  color: var(--ex-ink);
}
/* A short non-modal acknowledgement in the upper chrome, never a full-width
   overlay blocking the message composer or the primary action. */
.cookie-banner {
  top: 70px;
  bottom: auto;
  left: auto;
  right: clamp(12px,2vw,26px);
  width: min(380px,calc(100vw - 24px));
  max-width: 380px;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: .95rem 1rem;
  background: #1a2b40;
  border: 1px solid #445873;
  border-radius: 11px;
  color: #c5d4e6;
  font-size: .73rem;
  line-height: 1.55;
  box-shadow: 0 15px 40px rgba(0,0,0,.3);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  opacity: 0;
  transform: translateY(-9px);
  transition: transform .17s ease-out,opacity .17s ease-out;
}
.cookie-banner.visible { opacity: 1; transform: translateY(0); }
.cookie-banner.dismissing { transform: translateY(-9px); opacity:0; transition:transform .17s ease,opacity .17s ease; }
.cookie-banner__text { min-width: 0; flex: 1; line-height: 1.6; }
.cookie-banner__text a { color: #d4e6fb; text-decoration: underline; text-underline-offset: 2px; }
.cookie-banner__btn {
  flex: 0 0 auto;
  padding: .4rem .5rem;
  background: #2b415b;
  border: 1px solid #4c6581;
  color: #eff6ff;
  border-radius: 6px;
  font-size: .73rem;
  white-space: nowrap;
}
.cookie-banner__btn:hover { background: #3b5572; }
@media (max-width: 760px) {
  body[data-ui-page="chat"] .chat-empty--start { margin-top: min(7vh,55px); padding: 1rem .7rem; }
  body[data-ui-page="chat"] .chat-empty--start h2 { font-size: 1.3rem; }
  body[data-ui-page="chat"] .chat-empty__suggestions { gap: .45rem; }
  body[data-ui-page="chat"] .chat-empty__suggestions button { padding:.65rem; font-size:.71rem; }
  .cookie-banner { top: calc(65px + env(safe-area-inset-top,0px)); right: 10px; max-width: calc(100vw - 20px); width: min(370px,calc(100vw - 20px)); flex-direction: row; }
}
@media (max-width: 380px) {
  body[data-ui-page="chat"] .chat-empty__suggestions { grid-template-columns: minmax(0,1fr); }
  body[data-ui-page="chat"] .chat-empty__suggestions button { min-height: 38px; }
}
@media (prefers-reduced-motion:reduce) {
  .cookie-banner { transition: none; }
  .cookie-banner.dismissing { display: none; }
}

/* An expanded navigation panel always owns the interaction plane. Cookie
   acknowledgement can resume after the visitor closes the menu. */
@media (max-width: 900px) {
  body > .nav__mobile.open ~ .cookie-banner {
    opacity: 0;
    pointer-events: none;
  }
}

/* Textarea focus is represented by the full composer focus-within border.
   Prevent the global :focus-visible ring from bisecting its inner layout. */
body[data-ui-page="chat"] #composer-input:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
}

/* On narrow screens the shared stylesheet intentionally makes dropdowns as
   wide as their composer container. Anchor to that container, not the 60px
   individual picker button, or mode/model/effort menus become unusably thin. */
@media (max-width:760px) {
  body[data-ui-page="chat"] .chat-composer__config {
    position: relative;
  }
  body[data-ui-page="chat"] .chat-composer__config > .effort-picker {
    position: static;
  }
  body[data-ui-page="chat"] .chat-composer__config .effort-picker__menu {
    left: 0;
    right: 0;
    width: 100%;
    min-width: 0;
    max-width: none;
    max-height: min(52dvh,390px);
    overflow-y: auto;
  }
}


/* Mobile chat refinement: neutral Personal Chats switcher, matching sidebar.
   Prior rules inherited the old --bg-card and centered its label. */
body[data-ui-page="chat"] .ws-switcher .lang-picker__trigger {
  display: flex; align-items: center; justify-content: flex-start; gap: .65rem;
  min-height: 42px; padding: .5rem .72rem;
  background: #152334; border: 1px solid #293a4d;
  border-radius: 8px; color: #bed0e4; box-shadow: none; text-align: left;
}
body[data-ui-page="chat"] .ws-switcher .lang-picker__trigger:hover,
body[data-ui-page="chat"] .ws-switcher .lang-picker--open .lang-picker__trigger {
  background: #1b2c40; border-color: #435a75; color: #f0f6fd;
}
body[data-ui-page="chat"] #ws-picker-label {
  flex: 1 1 auto; min-width: 0; text-align: left; font-weight: 500;
}
body[data-ui-page="chat"] #ws-picker-trigger .lang-picker__trigger-icon {
  opacity: .85; flex: 0 0 17px; width: 17px; height: 17px;
}
body[data-ui-page="chat"] .ws-switcher .lang-picker__menu {
  background: #162639; border-color: #354a62; border-radius: 9px;
}
body[data-ui-page="chat"] .ws-switcher .lang-picker__option--active {
  background: #24384f; color: #e4efff;
}
body[data-ui-page="chat"].theme-midnight .ws-switcher .lang-picker__trigger {
  background: #111c2b; border-color: #25374a;
}

/* One measured content edge for message, settings and tools.
   Reduce empty height without compromising multiline input auto-growth. */
body[data-ui-page="chat"] .chat-composer__inner {
  --composer-edge: .75rem; border-color: #35465b; border-radius: 12px;
}
body[data-ui-page="chat"] #composer-input {
  box-sizing: border-box; min-height: 43px; padding: .52rem var(--composer-edge) .12rem;
  line-height: 1.45;
}
body[data-ui-page="chat"] .chat-composer__config {
  min-height: 32px; padding: .08rem var(--composer-edge) .06rem; gap: .15rem;
}
body[data-ui-page="chat"] .chat-composer__config .effort-picker__btn {
  min-height: 29px; padding: .26rem .35rem; font-size: .73rem;
}
body[data-ui-page="chat"] .chat-composer__row {
  min-height: 43px; padding: .18rem var(--composer-edge) .28rem;
  gap: .3rem; align-items: center; border-top-color: #27384d;
}
body[data-ui-page="chat"] .chat-composer__tools button {
  width: 32px; height: 34px; flex-basis: 32px;
}
body[data-ui-page="chat"] .chat-composer__right { align-items: center; margin-left: auto; }
body[data-ui-page="chat"] .chat-send {
  width: 37px; height: 37px; flex-basis: 37px;
}
@media (max-width: 760px) {
  body[data-ui-page="chat"] .chat-composer__inner { --composer-edge: .68rem; }
  body[data-ui-page="chat"] #composer-input {
    min-height: 43px; padding-block: .49rem .1rem; font-size: 16px;
  }
  body[data-ui-page="chat"] .chat-composer__config {
    min-height: 31px; padding-block: .06rem .06rem; gap: .12rem;
  }
  body[data-ui-page="chat"] .chat-composer__config .effort-picker__btn {
    min-height: 28px; padding: .23rem .3rem; font-size: .7rem;
  }
  body[data-ui-page="chat"] .chat-composer__row {
    min-height: 42px; padding-block: .12rem .22rem; gap: .15rem;
  }
  body[data-ui-page="chat"] .chat-composer__tools button {
    width: 31px; height: 34px; flex-basis: 31px;
  }
}
@media (max-width: 360px) {
  body[data-ui-page="chat"] .chat-composer__tools button {
    width: 29px; flex-basis: 29px;
  }
}

/* 14. Composed thinking surface.
   The connect word, elapsed timer, live reasoning and the final answer share
   one bubble and one block. The block is a quiet container: a single hairline,
   no fill until reasoning arrives, and the answer keeps the reading rhythm. */
body[data-ui-page="chat"] .msg--thinking .msg__body { min-width: 0; }
body[data-ui-page="chat"] .msg--thinking .msg__name { margin-bottom: .1rem; }
.msg__thinking {
  margin: .3rem 0 .6rem;
  border-radius: 12px;
  border-color: var(--line);
  background: transparent;
  transition: background-color .2s ease, border-color .2s ease;
  max-width: min(100%, 660px);
}
.msg__thinking.is-live,
.msg__thinking.has-reasoning { background: rgba(109, 140, 192, .055); }
.msg__thinking-btn {
  gap: .5rem;
  padding: .52rem .68rem;
  font-size: .8rem;
  line-height: 1.35;
  min-height: 36px;
}
.msg__thinking-icon { width: 13px; height: 13px; opacity: .85; }
.msg__thinking.is-live .msg__thinking-icon { color: var(--accent-bright); }
.msg__thinking-label {
  font-weight: 500;
  letter-spacing: -.005em;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msg__thinking.is-live .msg__thinking-label { color: var(--accent-bright); }
.msg__thinking.is-sealed .msg__thinking-label { color: var(--text-dim); }
.msg__thinking-time {
  margin-right: 0;
  font-size: .74rem;
  letter-spacing: .01em;
  color: var(--text-dim);
  opacity: .9;
}
.msg__thinking-time::before {
  content: "·";
  margin-right: .38rem;
  opacity: .65;
}
.msg__thinking-time:empty { display: none; }
.msg__thinking.is-live .msg__thinking-time { color: var(--text-dim); opacity: .9; }
.msg__thinking-chev { opacity: .55; }
.msg__thinking.is-live .msg__thinking-chev { display: none; }
.msg__thinking.is-live .msg__thinking-btn { cursor: default; }
.msg__thinking.is-live .msg__thinking-btn:hover { background: transparent; color: var(--text-dim); }
.msg__thinking.think-swap .msg__thinking-label { animation: thinkSwap .3s var(--ui-ease, ease); }
@media (prefers-reduced-motion: reduce) {
  .msg__thinking.think-swap .msg__thinking-label { animation: none; }
}

/* Live reasoning preview: the newest lines stay legible, older lines recede
   under a soft mask so the block reads as one continuous thought. */
.msg__thinking-preview {
  margin: -.1rem .68rem .6rem;
  padding-right: .2rem;
  font-size: .79rem;
  line-height: 1.6;
  color: var(--text-dim);
  max-height: 5em;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.25) 0, #000 34%, #000 100%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,.25) 0, #000 34%, #000 100%);
}
.msg__thinking-preview::-webkit-scrollbar { display: none; }
.msg__thinking-preview[hidden] { display: none; }
.msg__thinking.is-sealed .msg__thinking-preview { display: none; }

/* The fact retires once the model starts thinking for real. */
.msg__thinking.has-reasoning + .thinking-fact {
  opacity: 0;
  max-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.thinking-fact {
  font-size: .76rem;
  margin-top: 0;
  max-width: 56ch;
  line-height: 1.5;
  color: var(--text-dim);
  transition: opacity .35s ease, max-height .35s ease, padding .35s ease;
}
.thinking-fact::before { content: none; }
.thinking-fact { padding-left: 1.05rem; position: relative; }
.thinking-fact::after {
  content: "";
  position: absolute;
  left: 0;
  top: .48em;
  width: 7px;
  height: 7px;
  background: currentColor;
  opacity: .5;
  clip-path: polygon(50% 0%, 61.8% 35.4%, 100% 38.2%, 70.2% 61.8%, 80.9% 100%, 50% 78.6%, 19.1% 100%, 29.8% 61.8%, 0% 38.2%, 38.2% 35.4%);
}

/* Checklist markers: a drawn star instead of a glyph that depends on the
   reader's installed fonts. */
.checklist li::before {
  content: none;
}
.checklist li { padding-left: 1.5rem; }
.checklist li::after {
  content: "";
  position: absolute;
  left: 0;
  top: .52em;
  width: 9px;
  height: 9px;
  background: var(--accent-bright);
  opacity: .8;
  clip-path: polygon(50% 0%, 61.8% 35.4%, 100% 38.2%, 70.2% 61.8%, 80.9% 100%, 50% 78.6%, 19.1% 100%, 29.8% 61.8%, 0% 38.2%, 38.2% 35.4%);
}

/* 15. Shared page grammar: one action vocabulary, one header rhythm.
   Every surface now describes its primary action the same way: a solid chalk
   (dark) or navy (light) fill defined by --btn-primary-*, a hairline ghost,
   and no gradient, lift or halo on hover. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 40px;
  padding: .56rem 1.15rem;
  border-radius: 9px;
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: .92rem;
  font-weight: 550;
  letter-spacing: -.006em;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.btn--lg { min-height: 46px; padding: .72rem 1.5rem; font-size: .98rem; }
.btn--sm { min-height: 34px; padding: .38rem .8rem; font-size: .84rem; }
.btn--primary,
.nav__actions .btn--primary,
body[data-ui-page="index"] .hero__cta .btn--primary {
  background: var(--btn-primary-bg);
  border-color: var(--btn-primary-bg);
  color: var(--btn-primary-ink);
  box-shadow: none;
  transform: none;
}
.btn--primary:hover,
.nav__actions .btn--primary:hover,
body[data-ui-page="index"] .hero__cta .btn--primary:hover {
  background: var(--btn-primary-hover);
  border-color: var(--btn-primary-hover);
  color: var(--btn-primary-ink);
  box-shadow: none;
  transform: none;
}
.btn--ghost,
.nav__actions .btn--ghost,
body[data-ui-page="index"] .hero__cta .btn--ghost {
  background: transparent;
  border-color: var(--btn-ghost-border);
  color: var(--btn-ghost-ink);
}
.btn--ghost:hover,
.nav__actions .btn--ghost:hover,
body[data-ui-page="index"] .hero__cta .btn--ghost:hover {
  background: var(--btn-ghost-hover);
  border-color: var(--btn-ghost-ink);
  color: var(--btn-ghost-ink);
}
.btn:active { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) { .btn:active { transform: none; } }

html[data-theme="light"] .agents-primary,
html[data-theme="light"] .agents-primary:hover {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-ink);
}

/* Secondary product pages read like the homepage: one editorial column on the
   left, the measure never wider than a comfortable line. */
body:is([data-ui-page="mcp"], [data-ui-page="workspace"], [data-ui-page="starwork"]) .hero {
  text-align: left;
  max-width: 1180px;
  padding: clamp(3rem, 6.4vw, 5.25rem) clamp(1.15rem, 4vw, 2.5rem) clamp(1.75rem, 3.5vw, 2.75rem);
}
body:is([data-ui-page="mcp"], [data-ui-page="workspace"], [data-ui-page="starwork"]) .hero__title {
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  line-height: 1.12;
  letter-spacing: -.035em;
  max-width: 22ch;
}
body:is([data-ui-page="mcp"], [data-ui-page="workspace"], [data-ui-page="starwork"]) .hero__sub {
  margin: 1.1rem 0 0;
  max-width: 63ch;
  font-size: 1.01rem;
  line-height: 1.72;
  color: var(--text-dim);
}
body:is([data-ui-page="mcp"], [data-ui-page="workspace"], [data-ui-page="starwork"]) .hero__cta {
  margin-top: 1.65rem;
  justify-content: flex-start;
  gap: .6rem;
}
body:is([data-ui-page="mcp"], [data-ui-page="workspace"], [data-ui-page="starwork"]) .section {
  padding-block: 0 clamp(4rem, 7vw, 6rem);
}
body[data-ui-page="workspace"] .ws-hero + .section,
body:is([data-ui-page="mcp"], [data-ui-page="workspace"], [data-ui-page="starwork"]) .hero + .section {
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
}

/* Page titles in the app shells share one scale. */
body[data-ui-page="plans"] .plans-header h1 {
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  letter-spacing: -.035em;
  line-height: 1.14;
}
body[data-ui-page="plans"] .plans-header p { color: var(--text-dim); max-width: 58ch; }
body[data-ui-page="plans"] .plans-body { padding-top: clamp(2.25rem, 5vw, 3.5rem); }

/* Pricing cards: the badge sits on the card edge instead of colliding with it. */
body[data-ui-page="index"] .price,
body[data-ui-page="plans"] .plan-tile { position: relative; overflow: visible; }
body[data-ui-page="index"] .price--featured { transform: none; box-shadow: none; }
body[data-ui-page="index"] .price__badge,
body[data-ui-page="plans"] .plan-tile__badge {
  top: 0;
  transform: translate(-50%, -50%);
  padding: .2rem .7rem;
  font-family: var(--font-body);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: none;
  border-radius: 999px;
  box-shadow: none;
}
body[data-ui-page="index"] .pricing { padding-top: 1.4rem; }

/* The terminal keeps its tree lines intact; on narrow screens it scrolls
   inside its own frame instead of wrapping into ragged fragments. */
body[data-ui-page="index"] .terminal__body { overflow-x: auto; overscroll-behavior-x: contain; }
body[data-ui-page="index"] .terminal__body p { white-space: pre; }
@media (max-width: 700px) {
  body[data-ui-page="index"] .terminal__body { font-size: .72rem; line-height: 1.95; padding: 1.05rem 1.15rem; }
  body[data-ui-page="index"] .terminal__bar { padding-inline: 1rem; }
}

/* Shared single-state shell (checkout hand-off, payment status). */
body[data-ui-page="checkout"] {
  display: block;
  min-height: 100dvh;
  color: var(--text);
}
.state-shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.35rem;
  padding: clamp(1.5rem, 5vw, 3rem);
  text-align: center;
}
.state-shell__brand { text-decoration: none; }
.state-card {
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  padding: clamp(1.6rem, 4vw, 2.4rem);
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(4, 9, 18, .18);
}
.state-card h1 {
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.3;
}
.state-card__note { font-size: .86rem; line-height: 1.6; color: var(--text-dim); max-width: 34ch; }
#checkout-status .spinner,
.state-card .spinner {
  width: 26px;
  height: 26px;
  margin: 0 auto .35rem;
  border: 2px solid var(--line);
  border-top-color: var(--accent-bright);
  border-radius: 50%;
  animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  #checkout-status .spinner, .state-card .spinner { animation-duration: 2.4s; }
}
#checkout-error {
  display: none;
  margin-top: .5rem;
  font-size: .9rem;
  line-height: 1.6;
  color: #efaaad;
  max-width: 36ch;
}
html[data-theme="light"] #checkout-error { color: #99251d; }
#checkout-error a {
  display: inline-block;
  margin-top: .9rem;
  color: var(--accent-bright);
  text-decoration: underline;
  text-underline-offset: .2em;
}

/* Empty states and small chrome use one quiet voice. */
.mcp-empty,
.ws-empty,
.support-empty,
.chat-list__empty {
  color: var(--text-dim);
  font-size: .9rem;
  line-height: 1.7;
}

/* Secondary page containers share the hero's measure and left edge, so a
   section heading never floats at a different margin than the page title. */
body[data-ui-page="mcp"] .mcp-page,
body[data-ui-page="workspace"] .ws-page {
  max-width: none;
  margin: 0;
  padding: 0;
}
body[data-ui-page="mcp"] .mcp-page__head,
body[data-ui-page="workspace"] .ws-page__head {
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.35rem;
}
body[data-ui-page="mcp"] .mcp-page__head .section__title,
body[data-ui-page="workspace"] .ws-page__head .section__title {
  font-size: clamp(1.35rem, 2vw, 1.6rem);
  letter-spacing: -.025em;
}
body[data-ui-page="workspace"] .ws-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .35rem;
  padding: 2rem 0 0;
  text-align: left;
}
body[data-ui-page="workspace"] .ws-empty svg { width: 30px; height: 30px; opacity: .55; margin-bottom: .35rem; }
body[data-ui-page="workspace"] .ws-empty h2 { font-size: 1.05rem; font-weight: 600; color: var(--text); margin: 0; }
body[data-ui-page="workspace"] .ws-empty p { margin: 0; max-width: 46ch; }
body[data-ui-page="workspace"] .ws-empty svg { width: 28px; height: 28px; }
body[data-ui-page="mcp"] .mcp-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .3rem;
  padding: 2rem 0 0;
  text-align: left;
  border: 0;
}

/* Plan tiles: one badge treatment, cut cleanly out of the card edge. */
body[data-ui-page="plans"] .plans-grid { padding-top: 16px; }
body[data-ui-page="plans"] .plan-tile__badge,
body[data-ui-page="plans"] .plan-tile__badge--flare {
  top: 0;
  transform: translate(-50%, -50%);
  background: var(--btn-primary-bg);
  color: var(--btn-primary-ink);
  border: 0;
  font-family: var(--font-body);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: none;
  padding: .22rem .72rem;
}
body[data-ui-page="plans"] .plan-tile__badge--current {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  color: var(--text-dim);
}
body[data-ui-page="index"] .price__badge {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-ink);
}
body[data-ui-page="plans"] .plan-tile__quota u,
body[data-ui-page="plans"] .plan-tile__quota a { text-decoration: none; color: inherit; }
body[data-ui-page="plans"] .plan-tile__price-original { opacity: .85; font-size: .95rem; }

/* Studio analytics: an empty dataset shows a sentence, not a bare axis. */
.chart-card,
.analytics-chart-wrap { position: relative; }
.chart-card__empty,
.analytics-chart-wrap .chart-card__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 168px;
  padding: 1rem;
  font-size: .85rem;
  color: var(--text-dim);
  text-align: center;
}
.chart-card__empty[hidden] { display: none; }
/* ============ iOS Safari 26+ chat viewport fix (2026-10-30) ============
 * Safari 26 replaced the bottom toolbar with a floating tab bar that hovers
 * over the page. 100dvh does not reliably exclude it and
 * env(safe-area-inset-bottom) does not reliably include it, so the fixed
 * chat shell (height: 100dvh; overflow: hidden) ended up taller than the
 * visible area, clipping the top and bottom with no way to scroll into view.
 * chat.html sets --app-height from window.visualViewport.height (which tracks
 * the actually visible area, keyboard state included); the shell uses it when
 * present and falls back to 100dvh otherwise. Scoped to the chat page and the
 * phone breakpoint so desktop and Android behavior is unchanged. */
@media (max-width: 760px) {
  body[data-ui-page="chat"] .chat-body { height: var(--app-height, 100dvh); }
  body[data-ui-page="chat"] .chat-sidebar { height: var(--app-height, 100dvh); }
}
/* iOS Safari 26/27 tints the status-bar area from the background-color of
 * position:fixed elements near the viewport edges, even hidden ones. The
 * mobile sidebar backdrop (.chat-overlay) is fixed+inset:0 with a dim
 * background, which painted the status area gray. Keep the dim on an absolute
 * child so the fixed element itself is transparent. */
@media (max-width: 760px) {
  .chat-overlay { background-color: transparent; }
  .chat-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
  }
}

/* iOS Safari 26/27: a sticky header with an explicit background makes Safari
 * extend that color under the status bar instead of its neutral gray. */
@media (max-width: 760px) {
  body[data-ui-page="chat"] .chat-header {
    position: sticky;
    top: 0;
    background-color: #ffffff;
  }
  html[data-theme="dark"] body[data-ui-page="chat"] .chat-header { background-color: #0a1020; }
  html[data-theme="midnight"] body[data-ui-page="chat"] .chat-header { background-color: #05080f; }
}

/* Bottom: sticky composer with theme background so iOS Safari extends the
 * theme color under the home indicator instead of neutral gray. Mirrors the
 * sticky header fix above. */
@media (max-width: 760px) {
  body[data-ui-page="chat"] .chat-composer {
    position: sticky;
    bottom: 0;
    background-color: #ffffff;
  }
  html[data-theme="dark"] body[data-ui-page="chat"] .chat-composer { background-color: #0a1020; }
  html[data-theme="midnight"] body[data-ui-page="chat"] .chat-composer { background-color: #05080f; }
}