/* =========================================================================
   Internal Agents — kit styles
   Ported from the design handoff (project/kit.css). Built on the
   Admissions+ design tokens in internal_agents_tokens.css. All classes are
   prefixed `ia-` so they coexist with the existing Tailwind utility classes
   on the legacy dashboards.

   Scope note: the design's `body { background: ... }` reset is intentionally
   skipped here — app/assets/tailwind/application.css already locks
   html/body to `height: 100%; overflow: hidden`, which Internal Agents
   needs (the workspace iframe + chrome sit in a fixed viewport box). The
   light page colour is applied per-shell via `.ia-app` and `.ia-auth`.
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }

/* ============================================================
   Layout shell
   ============================================================ */
.ia-app {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 56px 1fr;
  height: 100%;
  min-height: 100%;
  background: var(--surface-page);
  color: var(--fg-1);
  font: var(--text-body-s);
}
.ia-app.collapsed { grid-template-columns: 72px 1fr; }
.ia-sidebar { grid-row: 1 / span 2; }
.ia-topbar { grid-column: 2; }
.ia-main {
  grid-column: 2; grid-row: 2;
  overflow: hidden;
  display: flex; min-height: 0;
}

/* ============================================================
   Sidebar (navy)
   ============================================================ */
.ia-sidebar {
  background: var(--color-primary-500);
  color: #fff;
  padding: 14px 12px 12px;
  display: flex; flex-direction: column;
  gap: 4px;
  position: relative;
}
.ia-brand {
  display: flex; gap: 10px; align-items: center;
  padding: 4px 8px 18px;
  font: 700 16px/1 var(--font-heading);
}
.ia-brand-mark {
  width: 32px; height: 32px; flex: none;
  background: #fff; color: var(--color-primary-500);
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font: 900 16px/1 var(--font-heading);
  position: relative;
}
.ia-brand-mark::after {
  content: '+';
  position: absolute; right: -4px; top: -4px;
  width: 14px; height: 14px;
  background: var(--color-secondary-500); color: #fff;
  font: 900 11px/14px var(--font-heading);
  text-align: center;
  border-radius: 9999px;
  border: 2px solid var(--color-primary-500);
}
.ia-brand-word { white-space: nowrap; }
.ia-brand-word b { font-weight: 800; }
.ia-brand-word .by { color: rgba(255,255,255,.55); font: 400 11px/1 var(--font-sans); display: block; margin-top: 2px; letter-spacing: .04em; }

.ia-sb-group { display: flex; flex-direction: column; gap: 2px; }
.ia-sb-grouplbl {
  font: 700 10px/1 var(--font-sans);
  text-transform: uppercase; letter-spacing: .08em;
  color: rgba(255,255,255,.5);
  padding: 14px 12px 4px;
}
.ia-sb-item {
  display: flex; gap: 10px; align-items: center;
  padding: 8px 10px; border-radius: 6px;
  cursor: pointer; border: 0; background: transparent;
  color: #D6DEF0; text-align: left;
  font: 14px/1.15 var(--font-sans);
  width: 100%; position: relative;
  text-decoration: none;
}
.ia-sb-item i { width: 16px; text-align: center; font-size: 13px; }
.ia-sb-item:hover { background: rgba(255,255,255,.08); color: #fff; text-decoration: none; }
.ia-sb-item.on { background: rgba(255,255,255,.14); color: #fff; font-weight: 700; }
.ia-sb-item.disabled { color: rgba(255,255,255,.35); cursor: not-allowed; }
.ia-sb-item.disabled:hover { background: transparent; color: rgba(255,255,255,.35); }
.ia-sb-itemlbl { flex: 1; }
.ia-sb-soon {
  font: 700 9px/1 var(--font-sans);
  background: rgba(255,255,255,.12); color: rgba(255,255,255,.7);
  padding: 3px 6px; border-radius: 9999px;
  text-transform: uppercase; letter-spacing: .06em;
}
.ia-sb-badge {
  background: var(--color-secondary-500); color: #fff;
  font: 700 10px/1 var(--font-sans);
  padding: 2px 7px; border-radius: 9999px;
}

.ia-sb-foot { margin-top: auto; padding-top: 12px; }
.ia-sb-user {
  display: flex; gap: 10px; align-items: center;
  padding: 8px 10px; border-radius: 8px;
  background: rgba(255,255,255,.06);
  cursor: pointer; border: 0;
  color: #fff; width: 100%; text-align: left;
  text-decoration: none;
}
.ia-sb-user:hover { background: rgba(255,255,255,.12); text-decoration: none; }
.ia-sb-user-name { font: 700 13px/1.2 var(--font-sans); color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ia-sb-user-meta { font: 11px/1.2 var(--font-sans); color: #D6DEF0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ia-app.collapsed .ia-brand-word,
.ia-app.collapsed .ia-sb-grouplbl,
.ia-app.collapsed .ia-sb-itemlbl,
.ia-app.collapsed .ia-sb-badge,
.ia-app.collapsed .ia-sb-soon,
.ia-app.collapsed .ia-sb-user > div:last-child { display: none; }
.ia-app.collapsed .ia-sb-item { justify-content: center; padding: 10px; }
.ia-app.collapsed .ia-sb-user { justify-content: center; padding: 8px; }

/* ============================================================
   Topbar
   ============================================================ */
.ia-topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 0 20px;
  background: var(--color-primary-500);
  color: #fff;
  height: 56px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.ia-topbar-icbtn {
  position: relative; background: transparent; border: 0;
  color: rgba(255,255,255,.85);
  width: 32px; height: 32px; border-radius: 6px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.ia-topbar-icbtn:hover { background: rgba(255,255,255,.12); color: #fff; }
.ia-topbar-dot {
  position: absolute; top: 6px; right: 6px;
  width: 7px; height: 7px; border-radius: 9999px;
  background: var(--color-secondary-500);
  box-shadow: 0 0 0 2px var(--color-primary-500);
}
.ia-topbar-crumbs {
  display: flex; gap: 6px; align-items: center; min-width: 0;
  font: 14px/1.4 var(--font-sans); color: #D6DEF0;
}
.ia-topbar-crumb-cur { color: #fff; font-weight: 700; }
.ia-topbar-crumb-sep { color: rgba(255,255,255,.45); }
.ia-topbar-search {
  flex: 1; max-width: 460px; margin: 0 12px;
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.12);
  border-radius: 9999px; padding: 6px 12px;
  font: 13px/1 var(--font-sans);
}
.ia-topbar-search input {
  flex: 1; background: transparent; border: 0; outline: none;
  color: #fff; font: 14px/1.4 var(--font-sans);
}
.ia-topbar-search input::placeholder { color: rgba(255,255,255,.65); }
.ia-topbar-search kbd {
  font: 11px/1 var(--font-mono); color: rgba(255,255,255,.7);
  background: rgba(255,255,255,.1);
  border-radius: 3px; padding: 2px 5px;
}
.ia-topbar-user {
  display: flex; gap: 8px; align-items: center;
  background: transparent; border: 0; color: #fff;
  padding: 4px 10px; border-radius: 9999px; cursor: pointer;
}
.ia-topbar-user:hover { background: rgba(255,255,255,.12); }

/* ============================================================
   Buttons
   ============================================================ */
.ia-btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  padding: 8px 14px; border-radius: var(--radius-md);
  border: 1px solid transparent;
  font: 14px/1.15 var(--font-sans);
  font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
  text-decoration: none;
}
.ia-btn:hover { text-decoration: none; }
.ia-btn:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
.ia-btn:disabled { opacity: .55; cursor: not-allowed; }
.ia-btn-sm { padding: 5px 10px; border-radius: var(--radius-sm); font-size: 13px; }
.ia-btn-lg { padding: 11px 18px; font-size: 15px; border-radius: var(--radius-lg); }
.ia-btn-icon { width: 32px; height: 32px; padding: 0; }
.ia-btn-sm.ia-btn-icon { width: 28px; height: 28px; }
.ia-btn-lg.ia-btn-icon { width: 40px; height: 40px; }

.ia-btn-primary { background: var(--color-primary-500); color: #fff; }
.ia-btn-primary:hover { background: var(--color-primary-600); color: #fff; }
.ia-btn-primary:active { background: var(--color-primary-700); }

.ia-btn-secondary { background: var(--color-neutral-translucent-200); color: var(--color-primary-500); }
.ia-btn-secondary:hover { background: var(--color-neutral-translucent-300); color: var(--color-primary-500); }

.ia-btn-tertiary { background: transparent; color: var(--color-primary-500); }
.ia-btn-tertiary:hover { background: var(--color-neutral-translucent-100); color: var(--color-primary-500); }

.ia-btn-outline { background: #fff; color: var(--color-primary-500); border-color: var(--color-neutral-200); }
.ia-btn-outline:hover { border-color: var(--color-primary-500); color: var(--color-primary-500); }

.ia-btn-ghost-onnavy { background: transparent; color: #fff; border-color: rgba(255,255,255,.2); }
.ia-btn-ghost-onnavy:hover { background: rgba(255,255,255,.12); color: #fff; }

.ia-btn-danger { background: var(--color-red-500); color: #fff; }
.ia-btn-danger:hover { filter: brightness(.95); color: #fff; }

.ia-link-btn {
  background: transparent; border: 0;
  color: var(--color-primary-500);
  font: 700 14px/1.15 var(--font-sans); cursor: pointer; padding: 0;
}
.ia-link-btn:hover { text-decoration: underline; }

.ia-w-full { width: 100%; }

/* ============================================================
   Cards / panels
   ============================================================ */
.ia-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.ia-card-pad { padding: 20px; }

/* ============================================================
   Form fields
   ============================================================ */
.ia-field { display: flex; flex-direction: column; gap: 4px; }
.ia-field-label {
  font: 700 14px/1.15 var(--font-sans); color: var(--fg-2);
}
.ia-field-label.req::after { content: ' *'; color: var(--color-red-500); }
.ia-field-help { font: 12px/1.33 var(--font-sans); color: var(--fg-3); }
.ia-field-err {
  font: 12px/1.33 var(--font-sans); color: #B01219;
  display: inline-flex; gap: 6px; align-items: center;
}
.ia-input {
  width: 100%; height: 40px; padding: 8px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-neutral-200);
  background: #fff;
  font: 14px/1.4 var(--font-sans);
  color: var(--fg-1); outline: 0;
  transition: border-color .15s, box-shadow .15s;
}
.ia-input:hover { border-color: var(--color-neutral-300); }
.ia-input:focus { border-color: var(--color-primary-500); box-shadow: var(--focus-ring); }
.ia-input.is-invalid { border-color: var(--color-red-500); }
.ia-input.is-invalid:focus { box-shadow: 0 0 0 4px rgba(239,68,68,.18); }

.ia-check { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; }
.ia-check input { width: 16px; height: 16px; accent-color: var(--color-primary-500); }

/* ============================================================
   Badges (status pills)
   ============================================================ */
.ia-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 9999px;
  font: 700 12px/1.16 var(--font-sans);
  white-space: nowrap;
}
.ia-badge i { font-size: 10px; }
.ia-badge-dot { width: 6px; height: 6px; border-radius: 9999px; background: currentColor; }

.ia-badge-success { background: #E7F7EB; color: #1F8F3B; }
.ia-badge-warning { background: #FEF1DB; color: #A06204; }
.ia-badge-info    { background: #EAF1FE; color: #1E4FB5; }
.ia-badge-neutral { background: #EEF2FB; color: var(--color-primary-700); }
.ia-badge-danger  { background: #FCE7E8; color: #B01219; }
.ia-badge-coral   { background: #FDECE8; color: #B84327; }

.ia-badge-live { position: relative; }
.ia-badge-live .ia-badge-dot { position: relative; }
.ia-badge-live .ia-badge-dot::before {
  content: ''; position: absolute; inset: -2px; border-radius: 9999px;
  border: 1.5px solid currentColor; opacity: .55;
  animation: ia-pulse 1.6s infinite;
}
@keyframes ia-pulse {
  0%   { transform: scale(1);   opacity: .55; }
  70%  { transform: scale(2);   opacity: 0;   }
  100% { transform: scale(2.2); opacity: 0;   }
}

/* ============================================================
   Avatars
   ============================================================ */
.ia-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9999px; color: #fff;
  font: 700 12px/1 var(--font-sans);
  flex: none;
}
.ia-avatar-sm { width: 24px; height: 24px; font-size: 11px; }
.ia-avatar-md { width: 32px; height: 32px; font-size: 12px; }
.ia-avatar-lg { width: 40px; height: 40px; font-size: 14px; }
.ia-avatar-xl { width: 56px; height: 56px; font-size: 18px; }
.ia-avatar-navy  { background: var(--color-primary-500); }
.ia-avatar-blue  { background: var(--color-blue-500); }
.ia-avatar-green { background: var(--color-green-500); }
.ia-avatar-coral { background: var(--color-secondary-500); }
.ia-avatar-magenta { background: var(--color-magenta-500); }

/* ============================================================
   Page chrome
   ============================================================ */
.ia-page {
  flex: 1; min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.ia-page-scroll { flex: 1; overflow: auto; padding: 24px; }
.ia-page-hdr {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 16px 24px;
  background: #fff; border-bottom: 1px solid var(--border-subtle);
  flex: none;
}
.ia-page-title-stack { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ia-page-title { font: 700 18px/1.2 var(--font-heading); margin: 0; color: var(--fg-1); }
.ia-page-sub { font: 12px/1.33 var(--font-sans); color: var(--fg-3); margin: 0; }
.ia-page-actions { display: flex; gap: 8px; align-items: center; }

/* ============================================================
   Empty states
   ============================================================ */
.ia-empty {
  text-align: center; padding: 64px 24px; color: var(--fg-3);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.ia-empty-illus {
  width: 88px; height: 88px;
  border-radius: 9999px;
  background: var(--color-primary-100);
  color: var(--color-primary-500);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 32px;
  position: relative;
}
.ia-empty-illus::after {
  content: '+';
  position: absolute; right: 6px; top: 6px;
  width: 22px; height: 22px;
  background: var(--color-secondary-500); color: #fff;
  font: 900 14px/22px var(--font-heading); text-align: center;
  border-radius: 9999px;
  border: 3px solid #fff;
}
.ia-empty h3 { margin: 0; font: 700 18px/1.2 var(--font-heading); color: var(--fg-1); }
.ia-empty p { margin: 0; max-width: 380px; text-wrap: pretty; font: 14px/1.5 var(--font-sans); }
.ia-empty-shortcut {
  display: inline-flex; align-items: center; gap: 6px;
  font: 12px/1.33 var(--font-sans); color: var(--fg-3);
}
.ia-empty-shortcut kbd {
  font: 700 11px/1 var(--font-sans);
  background: #fff; border: 1px solid var(--border-strong);
  border-bottom-width: 2px; border-radius: 4px;
  padding: 2px 6px; color: var(--fg-2);
}

/* ============================================================
   Workspace list (sidebar inner panel)
   ============================================================ */
.ia-wlist-pane {
  width: 320px; flex: none;
  background: #fff;
  border-right: 1px solid var(--border-subtle);
  display: flex; flex-direction: column;
  min-height: 0;
}
.ia-wlist-hdr {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 14px 16px;
  border-bottom: 1px solid var(--border-subtle);
  flex: none;
}
.ia-wlist-hdr h2 {
  font: 700 14px/1.15 var(--font-sans);
  margin: 0; color: var(--fg-1);
  display: inline-flex; gap: 8px; align-items: center;
}
.ia-wlist-hdr .ia-count {
  font: 700 11px/1 var(--font-sans);
  background: var(--color-primary-100); color: var(--color-primary-700);
  padding: 2px 7px; border-radius: 9999px;
}
.ia-wlist-create {
  padding: 12px 12px 10px; border-bottom: 1px solid var(--border-subtle);
  background: var(--color-primary-100);
}

.ia-wlist {
  flex: 1; overflow: auto; padding: 6px 8px 12px;
}
.ia-wlist-grouplbl {
  font: 700 10px/1 var(--font-sans);
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--fg-3);
  padding: 14px 10px 6px;
}
.ia-w-row {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 10px; align-items: center;
  padding: 10px 10px;
  border-radius: 8px;
  cursor: pointer; position: relative;
  border: 1px solid transparent;
  text-decoration: none;
}
.ia-w-row:hover { background: var(--color-neutral-100); text-decoration: none; }
.ia-w-row.on { background: var(--color-primary-100); border-color: var(--color-primary-200); }
.ia-w-row.on::before {
  content: ''; position: absolute; left: -8px; top: 6px; bottom: 6px; width: 3px;
  background: var(--color-primary-500); border-radius: 9999px;
}
.ia-w-icon {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--color-primary-100); color: var(--color-primary-500);
  display: inline-flex; align-items: center; justify-content: center;
  font: 900 12px/1 var(--font-heading);
  flex: none;
  position: relative;
}
.ia-w-icon.tone-coral { background: #FDECE8; color: var(--color-secondary-500); }
.ia-w-icon.tone-green { background: #E7F7EB; color: #1F8F3B; }
.ia-w-icon.tone-blue  { background: var(--color-blue-100); color: var(--color-blue-500); }
.ia-w-icon.tone-navy  { background: var(--color-primary-100); color: var(--color-primary-500); }
.ia-w-body { min-width: 0; }
.ia-w-name {
  font: 700 14px/1.2 var(--font-sans); color: var(--fg-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ia-w-meta {
  font: 12px/1.33 var(--font-sans); color: var(--fg-3);
  display: inline-flex; gap: 6px; align-items: center;
  margin-top: 2px;
}
.ia-w-meta .dot { width: 3px; height: 3px; border-radius: 9999px; background: currentColor; opacity: .5; }
.ia-w-status {
  display: inline-flex; align-items: center; gap: 6px;
}

/* ============================================================
   Loading stepper (used by the provisioning-failed retry pane —
   structure preserved in case a future async-provisioning flow wants
   to surface live progress instead of a blocking spinner).
   ============================================================ */
.ia-loading {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 48px 24px; gap: 32px;
  background: var(--surface-page);
  position: relative;
  min-height: 100%;
}
.ia-loading-card {
  background: #fff; border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 32px 36px;
  width: 100%; max-width: 480px;
  display: flex; flex-direction: column; gap: 20px;
}
.ia-loading-hero {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  text-align: center;
}
.ia-loading-orb {
  width: 72px; height: 72px;
  border-radius: 9999px;
  background: radial-gradient(circle at 35% 30%, #fff, var(--color-primary-100) 60%, var(--color-primary-200));
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-primary-500);
  box-shadow: 0 8px 24px rgba(38,60,145,.15);
}
.ia-loading-orb::before, .ia-loading-orb::after {
  content: ''; position: absolute; inset: 0; border-radius: 9999px;
  border: 2px solid var(--color-secondary-500);
  opacity: .35; pointer-events: none;
  animation: ia-pulse 2.4s infinite;
}
.ia-loading-orb::after { animation-delay: 1.2s; }
.ia-loading-orb i { font-size: 28px; position: relative; z-index: 1; }
.ia-loading h2 { font: 700 22px/1.1 var(--font-heading); margin: 0; color: var(--fg-1); }
.ia-loading p  { font: 14px/1.5 var(--font-sans); color: var(--fg-3); margin: 0; max-width: 320px; }

.ia-loading-steps { display: flex; flex-direction: column; gap: 4px; }
.ia-step {
  display: grid; grid-template-columns: 28px 1fr auto; gap: 12px;
  align-items: center; padding: 10px 4px;
  border-radius: 6px;
}
.ia-step + .ia-step { border-top: 1px solid var(--color-neutral-100); }
.ia-step-dot {
  width: 24px; height: 24px; border-radius: 9999px;
  background: var(--color-neutral-100); color: var(--color-neutral-500);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  position: relative;
}
.ia-step.done .ia-step-dot { background: #1F8F3B; color: #fff; }
.ia-step.now .ia-step-dot {
  background: #fff; color: var(--color-primary-500);
  box-shadow: 0 0 0 2px var(--color-primary-500), 0 0 0 6px rgba(38,60,145,.18);
}
.ia-step.now .ia-step-dot::after {
  content: ''; position: absolute; inset: -2px; border-radius: 9999px;
  border: 1.5px solid var(--color-primary-500); border-right-color: transparent;
  animation: ia-spin 1s linear infinite;
}
@keyframes ia-spin { to { transform: rotate(360deg); } }
.ia-step-lbl { font: 14px/1.4 var(--font-sans); color: var(--fg-3); }
.ia-step.done .ia-step-lbl { color: var(--fg-2); }
.ia-step.now  .ia-step-lbl { color: var(--fg-1); font-weight: 700; }
.ia-step-meta { font: 12px/1.33 var(--font-sans); color: var(--fg-3); }

/* ============================================================
   Terminal-card wrapper for the AgentSession xterm pane
   ============================================================ */
.ia-term-wrap {
  flex: 1; min-height: 0;
  background: var(--surface-page);
  padding: 20px;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.ia-term-frame {
  flex: 1; min-height: 0;
  /* Catppuccin Latte Base (#eff1f5) — matches the xterm theme set in
     agent_session_terminal_controller.js so the pane reads as one
     continuous writing surface, not a dark "monitor bezel" wrapped
     around a light screen. */
  background: #eff1f5;
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(76,79,105,.08);
  overflow: hidden;
  display: flex; flex-direction: column;
  border: 1px solid #ccd0da; /* Surface0 */
  padding: 8px;
}

/* ============================================================
   Auth screen
   ============================================================ */
.ia-auth {
  min-height: 100%; height: 100%;
  display: grid;
  grid-template-columns: 5fr 6fr;
  background: #fff;
}
@media (max-width: 768px) {
  .ia-auth { grid-template-columns: 1fr; }
  .ia-auth-hero { display: none; }
}
.ia-auth-hero {
  background: linear-gradient(180deg, var(--color-primary-500), var(--color-primary-700));
  color: #fff;
  padding: 40px;
  display: flex; flex-direction: column; gap: 24px;
  position: relative; overflow: hidden;
}
.ia-auth-hero::after {
  content: '';
  position: absolute; right: -120px; bottom: -120px;
  width: 360px; height: 360px;
  border-radius: 9999px;
  background: radial-gradient(circle at 30% 30%, rgba(236,99,75,.6), transparent 60%);
  filter: blur(20px);
  pointer-events: none;
}
.ia-auth-hero .ia-brand { padding: 0; color: #fff; }
.ia-auth-hero .ia-brand-mark { background: #fff; color: var(--color-primary-500); }
.ia-auth-hero .ia-brand-word { color: #fff; }
.ia-auth-hero .ia-brand-word .by { color: rgba(255,255,255,.65); }

.ia-auth-quote { margin-top: auto; max-width: 440px; position: relative; z-index: 1; }
.ia-auth-quote p { font: 600 22px/1.4 var(--font-heading); margin: 0; text-wrap: pretty; }
.ia-auth-quote footer { margin-top: 18px; color: rgba(255,255,255,.78); font: 13px/1.4 var(--font-sans); }
.ia-auth-quote footer strong { color: #fff; font-weight: 700; }

.ia-auth-main {
  display: flex; align-items: center; justify-content: center;
  padding: 40px 24px;
  background: var(--surface-page);
  overflow: auto;
}
.ia-auth-form {
  width: 100%; max-width: 380px;
  display: flex; flex-direction: column; gap: 14px;
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  box-shadow: var(--shadow-sm);
}
.ia-auth-title { font: 700 22px/1.1 var(--font-heading); margin: 0; color: var(--fg-1); }
.ia-auth-sub { font: 14px/1.4 var(--font-sans); color: var(--fg-3); margin: 0 0 8px; }
.ia-auth-foot { color: var(--fg-3); font: 12px/1.33 var(--font-sans); margin: 6px 0 0; text-align: center; }
.ia-auth-banner {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px; border-radius: var(--radius-md);
  background: #FCE7E8; border: 1px solid #F4C7C7;
  color: #B01219;
  font: 13px/1.4 var(--font-sans);
}
.ia-auth-banner.is-info {
  background: #FEF1DB; border-color: #F2D7A2; color: #7A4905;
}
.ia-auth-banner i { margin-top: 2px; }

/* ============================================================
   Header strip — session detail
   ============================================================ */
.ia-w-headerstrip {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px;
  background: #fff;
  border-bottom: 1px solid var(--border-subtle);
  flex: none;
}
.ia-w-headerstrip h2 {
  font: 700 16px/1.2 var(--font-heading); margin: 0; color: var(--fg-1);
  display: inline-flex; gap: 8px; align-items: center;
}
.ia-w-headerstrip .ia-meta {
  font: 12px/1.33 var(--font-sans); color: var(--fg-3);
  display: inline-flex; gap: 6px; align-items: center;
}
.ia-w-headerstrip .ia-spacer { flex: 1; }

/* ============================================================
   Misc utility
   ============================================================ */
.ia-divider { height: 1px; background: var(--border-subtle); }
.ia-kbd {
  font: 700 11px/1 var(--font-sans);
  background: #fff; border: 1px solid var(--border-strong);
  border-bottom-width: 2px; border-radius: 4px;
  padding: 2px 6px; color: var(--fg-2);
}
.ia-pill-row { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.ia-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: var(--color-neutral-100);
  border-radius: 9999px;
  font: 700 12px/1.16 var(--font-sans); color: var(--fg-2);
}
.ia-pill i { font-size: 11px; opacity: .7; }

.ia-page-scroll::-webkit-scrollbar, .ia-wlist::-webkit-scrollbar {
  width: 10px; height: 10px;
}
.ia-page-scroll::-webkit-scrollbar-thumb, .ia-wlist::-webkit-scrollbar-thumb {
  background: var(--color-neutral-300); border-radius: 9999px;
  border: 2px solid var(--surface-card);
}

/* Tailwind-managed body has overflow:hidden; the auth shell needs scroll
   on tall viewports. Override locally. */
body.ia-body { overflow: auto; background: var(--surface-page); color: var(--fg-1); font-family: var(--font-sans); }
body.ia-body.ia-body-fixed { overflow: hidden; }