/* CC v2.0 components — Mercury aesthetic. Reads from mercury-tokens.css. */

/* Floating Walton "ask me" button (bottom-right) */
.walton-bubble {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  width: 56px;
  height: 56px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--color-brand-lavender), var(--color-brand-indigo));
  display: grid;
  place-items: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(164, 165, 248, 0.35);
  transition: transform var(--motion-duration-base) var(--motion-easing-spring), box-shadow var(--motion-duration-fast);
  z-index: 40;
}
.walton-bubble:hover {
  transform: scale(1.08);
  box-shadow: 0 12px 32px rgba(164, 165, 248, 0.5);
}

/* Keyboard shortcuts overlay */
.shortcuts-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 20, 25, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  z-index: 100;
  animation: bubbleIn var(--motion-duration-base) var(--motion-easing-spring);
}
.shortcuts-card {
  background: var(--color-background-surface);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  max-width: 420px;
  width: calc(100% - var(--space-8));
  box-shadow: var(--shadow-modal);
}
.shortcuts-card h2 { margin-bottom: var(--space-4); }
.shortcuts-card ul { list-style: none; padding: 0; }
.shortcuts-card li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 6px 0;
  font-size: var(--type-size-sm);
}
.allowlist-pool {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: var(--space-4) 0;
}
.toggle-allow {
  background: var(--color-background-surface-alt);
  color: var(--text-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-pill);
  padding: 6px 12px;
  font: inherit;
  font-size: var(--type-size-sm);
  cursor: pointer;
  transition: all var(--motion-duration-fast);
}
.toggle-allow:hover { border-color: var(--color-brand-lavender); }
.toggle-allow.active {
  background: var(--color-brand-lavender);
  color: var(--color-background-app-dark);
  border-color: var(--color-brand-lavender);
}

.shortcuts-card kbd {
  background: var(--color-background-surface-alt);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  font-family: var(--type-family-mono);
  font-size: var(--type-size-xs);
  min-width: 24px;
  text-align: center;
}

/* Status banner — surfaces missing env vars */
.cc-banner {
  background: rgba(245, 165, 36, 0.12);
  color: var(--color-feedback-warning-amber);
  padding: 10px var(--space-page-padding-desktop);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--type-size-sm);
  border-bottom: 1px solid rgba(245, 165, 36, 0.25);
}
.cc-banner-dot {
  width: 8px; height: 8px;
  background: var(--color-feedback-warning-amber);
  border-radius: var(--radius-pill);
  animation: pulse 2s infinite;
}
.cc-banner strong { color: var(--text-primary); font-weight: var(--type-weight-semibold); }
.cc-banner a { color: var(--color-brand-lavender); text-decoration: underline; margin-left: auto; }
@media (max-width: 600px) {
  .cc-banner { padding: 8px var(--space-page-padding-mobile); font-size: var(--type-size-xs); flex-wrap: wrap; }
  .cc-banner a { margin-left: 0; }
}

/* Top navigation bar */
.cc-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(15, 20, 25, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border-subtle);
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: 14px var(--space-page-padding-desktop);
}
.cc-nav-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--text-primary);
  font-weight: var(--type-weight-bold);
}
.cc-nav-mark {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: white;
  font-size: 13px;
  font-weight: 700;
}
.cc-nav-name {
  font-size: var(--type-size-base);
  letter-spacing: var(--type-letter-spacing-tight);
  color: #E6EBF2; /* compact single-line mark at nav scale: static silver, no shimmer, no "Ct OS" line (Hugh-reviewable) */
}
.cc-nav-name .cc-nav-ai { color: #8DA0B8; }
.cc-nav-links {
  display: flex;
  gap: var(--space-2);
  margin-left: auto;
}
.cc-nav-links a {
  color: var(--text-secondary);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-size: var(--type-size-sm);
  font-weight: var(--type-weight-medium);
  transition: background var(--motion-duration-fast), color var(--motion-duration-fast);
}
.cc-nav-links a:hover { color: var(--text-primary); background: var(--color-background-surface); }
.cc-nav-links a.active {
  color: var(--color-brand-cream, #FDE68A);
  background: var(--color-background-surface);
}
.cc-nav-user {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: var(--space-3);
}
.user-initials {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--color-brand-lavender), var(--color-brand-indigo));
  color: white;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.logout-btn {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-pill);
  width: 32px;
  height: 32px;
  cursor: pointer;
  font-size: 14px;
  transition: color var(--motion-duration-fast), border-color var(--motion-duration-fast);
}
.logout-btn:hover {
  color: var(--color-feedback-error-red);
  border-color: var(--color-feedback-error-red);
}
.theme-toggle {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-pill);
  width: 32px;
  height: 32px;
  cursor: pointer;
  font-size: 14px;
  margin-left: var(--space-2);
  transition: color var(--motion-duration-fast), border-color var(--motion-duration-fast);
}
.theme-toggle:hover { color: var(--color-brand-lavender); border-color: var(--color-brand-lavender); }
@media (max-width: 768px) {
  .cc-nav-user { margin-left: 0; }
}
@media (max-width: 768px) {
  .cc-nav {
    /* Push the bar down just past the safe area (notch / dynamic island), then a thin 6px
       breath below the nav content. Keep vertical chrome height as small as possible. */
    padding: calc(env(safe-area-inset-top, 0px) + 6px) var(--space-page-padding-mobile) 6px;
    gap: var(--space-2);
    min-height: 0;
  }
  .cc-nav-links { display: none; }
  .cc-nav-name { display: none; }
  /* Compact the status pill on mobile — show colored dot only, no label */
  .cc-status-pill .cc-status-label { display: none; }
  .cc-status-pill {
    padding: 6px 8px;
    min-width: 0;
  }
  .cc-build-pill { display: none; }
  body { padding-bottom: 64px; }
}

/* Mobile bottom tab bar (Mercury Section XVII) */
.mobile-tabs { display: none; }
@media (max-width: 768px) {
  .mobile-tabs {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(15, 20, 25, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--color-border-subtle);
    z-index: 50;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mobile-tabs a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 0;
    text-decoration: none;
    color: var(--color-text-muted);
    font-size: 10px;
    transition: color var(--motion-duration-fast);
  }
  .mobile-tabs a .tab-icon { font-size: 20px; }
  .mobile-tabs a.active { color: var(--color-brand-cream, #FDE68A); }

  /* Featured center tab (Agents): elevated circular badge with WGMD mark */
  .mobile-tabs a.tab-featured {
    position: relative;
    color: var(--color-text-primary);
    font-weight: var(--type-weight-medium);
  }
  .mobile-tabs a.tab-featured .tab-icon-featured {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-brand-indigo), var(--color-brand-lavender-strong));
    box-shadow:
      0 4px 14px rgba(79, 70, 229, 0.35),
      0 0 0 4px rgba(15, 20, 25, 0.92);
    margin-top: -22px;
    margin-bottom: 2px;
    transition: transform var(--motion-duration-fast), box-shadow var(--motion-duration-fast);
  }
  .mobile-tabs a.tab-featured:active .tab-icon-featured,
  .mobile-tabs a.tab-featured.active .tab-icon-featured {
    transform: scale(0.96);
    box-shadow:
      0 6px 18px rgba(79, 70, 229, 0.55),
      0 0 0 4px rgba(15, 20, 25, 0.92);
  }
  .mobile-tabs a.tab-featured.active { color: var(--color-brand-cream, #FDE68A); }

  /* Hide floating Walton bubble on mobile when tab bar visible (avoid overlap) */
  .walton-bubble { bottom: calc(56px + var(--space-3) + env(safe-area-inset-bottom)); }
}

/* Layout shell */
.shell {
  min-height: 100vh;
  padding: var(--space-page-padding-desktop);
  max-width: var(--space-container);
  margin: 0 auto;
}

/* Welcome hero */
.welcome-hero {
  padding: var(--space-12) 0 var(--space-10);
  border-bottom: 1px solid var(--color-border-subtle);
  margin-bottom: var(--space-10);
}
.welcome-text {
  color: var(--text-secondary);
  font-size: var(--type-size-sm);
  letter-spacing: var(--type-letter-spacing-wide);
  margin-bottom: var(--space-2);
}
.hero-kpi {
  font-size: var(--type-size-hero);
  font-weight: var(--type-weight-bold);
  letter-spacing: var(--type-letter-spacing-tight);
  line-height: var(--type-line-height-tight);
}
.hero-subtitle {
  margin-top: var(--space-3);
  color: var(--text-secondary);
  font-size: var(--type-size-base);
}

/* Hero trend strip — 7 mini bars (last 7 days of events) */
.trend-strip {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 60px;
  margin-top: var(--space-6);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-subtle);
}
.trend-bar {
  flex: 1;
  background: linear-gradient(180deg, var(--color-brand-lavender), var(--color-brand-lavender-strong));
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
  min-height: 4px;
  transition: opacity var(--motion-duration-fast);
}
.trend-bar:hover { opacity: 0.85; }

/* Mercury Insights grid */
.insights-section { margin: var(--space-10) 0; }
.insights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
}
.insight-tile {
  background: var(--color-background-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.insight-value {
  font-size: var(--type-size-3xl);
  font-weight: var(--type-weight-bold);
  letter-spacing: var(--type-letter-spacing-tight);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.insight-label {
  font-size: var(--type-size-sm);
  color: var(--text-secondary);
  font-weight: var(--type-weight-medium);
}
.insight-sub {
  font-size: var(--type-size-xs);
  color: var(--color-text-muted);
}

/* Cost daily chart */
.cost-chart-section { margin: var(--space-10) 0; }
.cost-chart {
  background: var(--color-background-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.chart-meta {
  color: var(--text-secondary);
  font-size: var(--type-size-sm);
  margin-bottom: var(--space-3);
}
.chart-meta strong { color: var(--color-brand-lavender); font-size: var(--type-size-base); }
.chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 100px;
}
.chart-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.chart-bar {
  width: 100%;
  background: linear-gradient(180deg, var(--color-brand-lavender), var(--color-brand-indigo));
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
  min-height: 2px;
  transition: transform var(--motion-duration-fast);
}
.chart-bar-today {
  background: linear-gradient(180deg, var(--color-feedback-success-green), #15a05e);
}
.chart-bar:hover { transform: scaleY(1.05); transform-origin: bottom; }
.chart-bar-label {
  font-size: 9px;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  transform: rotate(-45deg);
  transform-origin: top right;
  white-space: nowrap;
  position: relative;
  top: 4px;
  height: 18px;
}

/* Fleet liveness dots */
.fleet-section { margin: var(--space-12) 0; }
.fleet-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: var(--space-4) 0;
}
.fleet-dot {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-pill);
  cursor: help;
  transition: transform var(--motion-duration-fast);
}
.fleet-dot:hover { transform: scale(1.4); }
@media (max-width: 768px) {
  .hero-kpi { font-size: var(--type-size-hero-mobile); }
}

/* Sections */
section { margin: var(--space-8) 0; }
h2 {
  font-size: var(--type-size-xl);
  font-weight: var(--type-weight-semibold);
  margin-bottom: var(--space-4);
}

/* Chips */
.chip {
  display: inline-flex;
  align-items: center;
  background: var(--color-background-tint-lavender);
  color: var(--color-text-primary-light);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-weight: var(--type-weight-medium);
  font-size: var(--type-size-xs);
  margin-right: 6px;
}
html[data-theme="dark"] .chip {
  background: var(--color-background-surface-alt);
  color: var(--text-primary);
}

/* Buttons (full pills) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-weight: var(--type-weight-medium);
  font-size: var(--type-size-base);
  border-radius: var(--radius-pill);
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  transition: background var(--motion-duration-fast) var(--motion-easing-standard),
              transform var(--motion-duration-instant) var(--motion-easing-standard);
}
.btn:active { transform: scale(0.98); }
.btn-primary {
  background: var(--color-brand-lavender);
  color: var(--color-background-app-dark);
}
.btn-primary:hover { background: var(--color-brand-lavender-strong); }
.btn-outline {
  background: transparent;
  border: 1px solid var(--color-brand-lavender);
  color: var(--color-brand-lavender);
}
.btn-tertiary {
  background: var(--color-background-tint-lavender-strong);
  color: var(--color-brand-lavender-strong);
}

/* Feed filters */
.feed-filters {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
  align-items: center;
}
.filter-select {
  background: var(--color-background-surface);
  color: var(--text-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-pill);
  padding: 8px 14px;
  font-size: var(--type-size-sm);
}
.filter-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--type-size-sm);
  color: var(--text-secondary);
}

/* Live feed */
.feed-ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.feed-item {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border-subtle);
  animation: slideIn var(--motion-duration-base) var(--motion-easing-spring);
}
@keyframes slideIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.feed-avatar {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.feed-body { flex: 1; min-width: 0; }
.feed-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}
.feed-agent {
  font-weight: var(--type-weight-semibold);
  color: var(--text-primary);
}
.feed-type {
  font-size: var(--type-size-xs);
  color: var(--text-secondary);
  background: var(--color-background-surface-alt);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-weight: var(--type-weight-medium);
  letter-spacing: var(--type-letter-spacing-label);
}
/* Color-code feed-types so the stream is scannable */
.feed-item .feed-type[data-type="Decision"]          { background: rgba(164, 165, 248, 0.16); color: var(--color-brand-lavender); }
.feed-item .feed-type[data-type="Self-Directed Work"]{ background: rgba(33, 201, 122, 0.14);  color: var(--color-feedback-success-green); }
.feed-item .feed-type[data-type="Task Completion"]   { background: rgba(33, 201, 122, 0.22);  color: var(--color-feedback-success-green); }
.feed-item .feed-type[data-type="Escalation"]        { background: rgba(239, 68, 68, 0.16);   color: var(--color-feedback-error-red); }
.feed-item .feed-type[data-type="Watchdog Dispatch"] { background: rgba(245, 165, 36, 0.18);  color: var(--color-feedback-warning-amber); }
.feed-item .feed-type[data-type="Heartbeat"]         { background: rgba(148, 163, 184, 0.14); color: var(--color-text-muted); }
.feed-time {
  font-size: var(--type-size-xs);
  color: var(--color-text-muted);
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}
.feed-title {
  font-size: var(--type-size-base);
  font-weight: var(--type-weight-medium);
  margin-bottom: 4px;
}
.feed-summary {
  font-size: var(--type-size-sm);
  color: var(--text-secondary);
  line-height: var(--type-line-height-normal);
}
.feed-empty {
  padding: var(--space-12);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--type-size-sm);
}

/* Agent page */
.agent-header h1 {
  font-size: var(--type-size-4xl);
  font-weight: var(--type-weight-bold);
  margin-bottom: var(--space-3);
}
.agent-meta {
  margin-bottom: var(--space-8);
}
.agent-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-8);
  align-items: start;
}
@media (max-width: 900px) {
  .agent-grid { grid-template-columns: 1fr; }
}
/* Grid items default to min-width:auto — a long unbroken token in the chat
   transcript would force the track past the viewport (mobile lateral scroll). */
.agent-grid > * { min-width: 0; }
.agent-chat-section,
.agent-status-section {
  border-right: 1px solid var(--color-border-subtle);
  padding-right: var(--space-6);
}
@media (max-width: 900px) {
  .agent-chat-section,
  .agent-status-section { border-right: none; padding-right: 0; }
}
/* Read-only CTA shown on every non-Walton agent surface. One place to chat. */
.agent-talk-via-walton {
  padding: var(--space-6);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-surface-2, rgba(255,255,255,0.02));
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: flex-start;
}
.agent-talk-via-walton p {
  margin: 0;
  font-size: var(--type-size-base);
  line-height: 1.5;
}
.agent-talk-via-walton strong { color: var(--text-primary); }
.agent-side {
  position: sticky;
  top: var(--space-6);
}
.agent-side h2 {
  font-size: var(--type-size-lg);
}
.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}
.chat-header h2 { margin-bottom: 0; }
.chat-header .chip {
  background: var(--color-background-surface-alt);
  cursor: pointer;
  border: none;
  font: inherit;
  color: var(--text-secondary);
}
.chat-header .chip:hover { color: var(--color-feedback-error-red); }

.chat-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.chat-suggestions .suggest {
  background: var(--color-background-tint-lavender-strong);
  color: var(--color-brand-lavender-strong);
  border: none;
  border-radius: var(--radius-pill);
  padding: 8px 14px;
  font: inherit;
  font-size: var(--type-size-sm);
  cursor: pointer;
  transition: background var(--motion-duration-fast);
}
html[data-theme="dark"] .chat-suggestions .suggest {
  background: rgba(164, 165, 248, 0.12);
  color: var(--color-brand-lavender);
}
.chat-suggestions .suggest:hover {
  background: var(--color-brand-lavender);
  color: var(--color-background-app-dark);
}

.chat-transcript {
  min-height: 320px;
  max-height: 60vh;
  overflow-y: auto;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-background-surface-alt);
  margin-bottom: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.chat-bubble {
  padding: 12px 16px;
  border-radius: var(--radius-lg);
  max-width: 85%;
  line-height: var(--type-line-height-normal);
  white-space: pre-wrap;
  /* anywhere (not break-word): only this value counts toward min-content sizing,
     so UUIDs/URLs can't widen the bubble past its container */
  overflow-wrap: anywhere;
  animation: bubbleIn var(--motion-duration-base) var(--motion-easing-spring);
  position: relative;
}
/* Copy-message button — top-right corner, fades in on hover/touch */
.bubble-copy {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  border: none;
  background: rgba(0,0,0,0.08);
  color: inherit;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease, transform 0.15s ease;
  padding: 0;
}
.chat-bubble:hover .bubble-copy,
.chat-bubble:focus-within .bubble-copy { opacity: 0.7; }
.bubble-copy:hover { opacity: 1 !important; background: rgba(0,0,0,0.15); transform: scale(1.06); }
.bubble-copy.copied { opacity: 1 !important; background: var(--color-brand-lavender); color: var(--color-background-app-dark); }
/* On mobile/touch, always show (no hover) */
@media (hover: none) { .bubble-copy { opacity: 0.5; } }

/* Bubble content wrappers — keep text away from the copy button */
.bubble-text, .bubble-content { padding-right: 28px; }
.bubble-content p:first-child { margin-top: 0; }
/* Code blocks in markdown replies scroll inside the bubble, never widen it */
.bubble-content pre { max-width: 100%; overflow-x: auto; }

/* User-bubble attachment previews (images + file chips) */
.bubble-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.bubble-attach-img {
  max-width: 240px;
  max-height: 180px;
  border-radius: var(--radius-sm);
  display: block;
}
.bubble-attach-file {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(0,0,0,0.08);
  border-radius: var(--radius-sm);
  font-size: var(--type-size-sm);
  font-family: var(--type-family-mono);
}

/* Inline tool-use badge inside agent bubble */
.tool-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 0.82em;
  font-family: var(--type-family-mono);
  margin: 4px 0;
  border: 1px solid var(--color-border-subtle);
  background: var(--color-background-app-dark);
  color: var(--text-secondary);
}
.tool-badge .tool-name { color: var(--color-brand-lavender); font-weight: 600; }
.tool-badge .tool-status { opacity: 0.7; }
.tool-badge-pending { border-color: var(--color-brand-lavender); }
.tool-badge-pending .tool-status::after {
  content: '';
  display: inline-block;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--color-brand-lavender);
  margin-left: 4px;
  animation: thinkBounce 1.2s infinite;
}
.tool-badge-ok { border-color: rgba(125, 211, 252, 0.4); }
.tool-badge-ok .tool-status { color: rgb(125, 211, 252); }
.tool-badge-err { border-color: rgba(248, 113, 113, 0.5); background: rgba(248, 113, 113, 0.08); }
.tool-badge-err .tool-status { color: rgb(248, 113, 113); }
@keyframes bubbleIn {
  from { opacity: 0; transform: scale(0.95) translateY(4px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.chat-bubble-user {
  align-self: flex-end;
  background: var(--color-brand-lavender);
  color: var(--color-background-app-dark);
}
.chat-bubble-agent {
  align-self: flex-start;
  background: var(--color-background-surface);
  color: var(--text-primary);
  border: 1px solid var(--color-border-subtle);
}
.chat-bubble.markdown p { margin: 0 0 8px 0; }
.chat-bubble.markdown p:last-child { margin-bottom: 0; }
.chat-bubble.markdown ul { margin: 6px 0 10px 0; padding-left: 22px; }
.chat-bubble.markdown li { margin: 3px 0; }
.chat-bubble.markdown h3, .chat-bubble.markdown h3.roman {
  font-size: var(--type-size-base);
  font-weight: var(--type-weight-semibold);
  margin: 12px 0 6px 0;
  color: var(--color-brand-lavender);
}
.chat-bubble.markdown code {
  background: var(--color-background-app-dark);
  padding: 1px 5px;
  border-radius: var(--radius-xs);
  font-family: var(--type-family-mono);
  font-size: 0.92em;
}
.chat-bubble.markdown strong { font-weight: var(--type-weight-semibold); }
.chat-bubble.markdown br + br { display: none; }
.streaming-cursor {
  animation: blink 1s infinite;
  color: var(--color-brand-lavender);
}
@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}
.thinking-dots {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding: 4px 0;
}
.thinking-dots span {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-brand-lavender);
  animation: thinkBounce 1.2s infinite ease-in-out both;
}
.thinking-dots span:nth-child(1) { animation-delay: -0.32s; }
.thinking-dots span:nth-child(2) { animation-delay: -0.16s; }
@keyframes thinkBounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}
.chat-form {
  display: flex;
  gap: var(--space-3);
  align-items: flex-end;
}
.chat-form textarea {
  flex: 1;
  background: var(--color-background-surface-alt);
  color: var(--text-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font: inherit;
  resize: vertical;
}
.chat-form textarea:focus {
  outline: none;
  border-color: var(--color-brand-lavender);
  box-shadow: var(--shadow-focus);
}
.mic-btn {
  background: var(--color-background-surface-alt);
  color: var(--text-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-pill);
  width: 44px;
  height: 44px;
  font-size: 18px;
  cursor: pointer;
  transition: background var(--motion-duration-fast);
}
.mic-btn:hover { background: var(--color-background-tint-lavender-strong); }
.mic-btn.recording {
  background: var(--color-feedback-error-red);
  color: white;
  animation: pulse 1.5s infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.5); }
  50%      { box-shadow: 0 0 0 10px rgba(239,68,68,0); }
}
.mic-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Attach (paperclip) button — same shape as mic, slightly different color */
.attach-btn {
  background: var(--color-background-surface-alt);
  color: var(--text-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-pill);
  width: 44px;
  height: 44px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--motion-duration-fast);
}
.attach-btn:hover { background: var(--color-background-tint-lavender-strong); }

/* Attachment-chip strip above the input */
.chat-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 0;
  margin-bottom: 4px;
}
.attach-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--color-background-surface-alt);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-pill);
  font-size: var(--type-size-sm);
}
.attach-name { font-family: var(--type-family-mono); }
.attach-size { color: var(--text-secondary); font-size: 0.85em; }
.attach-remove {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-sm);
}
.attach-remove:hover { background: rgba(0,0,0,0.1); color: var(--text-primary); }

/* Drag-drop overlay on the chat section */
.agent-chat-section.drag-over {
  outline: 2px dashed var(--color-brand-lavender);
  outline-offset: -8px;
  background: var(--color-background-tint-lavender-strong);
}
.agent-chat-section.drag-over::after {
  content: 'Drop to attach';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--color-brand-lavender);
  color: var(--color-background-app-dark);
  padding: 12px 24px;
  border-radius: var(--radius-md);
  font-weight: 600;
  pointer-events: none;
  z-index: 10;
  font-size: var(--type-size-lg);
}

/* Scroll-to-bottom floating button */
.chat-transcript { position: relative; }
.scroll-to-bottom {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  background: var(--color-brand-lavender);
  color: var(--color-background-app-dark);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  transition: transform 0.15s ease;
  z-index: 5;
}
.scroll-to-bottom:hover { transform: scale(1.08); }
.agent-chat-section { position: relative; }

/* Fenced code blocks — institutional look, copy button in header */
.chat-bubble .code-block {
  background: var(--color-background-app-dark);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  margin: 10px 0;
  overflow: hidden;
  font-family: var(--type-family-mono);
  font-size: 0.86em;
}
.code-block-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid var(--color-border-subtle);
}
.code-lang {
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: var(--type-family-mono);
}
.code-copy {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.75rem;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  font-family: var(--type-family-mono);
}
.code-copy:hover { background: rgba(255,255,255,0.06); color: var(--text-primary); }
.code-copy.copied { color: var(--color-brand-lavender); }
.code-block-content {
  display: block;
  padding: 10px 12px;
  overflow-x: auto;
  line-height: 1.55;
  color: var(--text-primary);
  white-space: pre;
}
/* Syntax-highlight tokens — subtle, institutional */
.tok-kw  { color: #c084fc; font-weight: 500; }     /* lavender — keyword */
.tok-str { color: #86efac; }                        /* green — string */
.tok-cmt { color: var(--text-secondary); font-style: italic; }
.tok-num { color: #fbbf24; }                        /* amber — number */

/* Bubble timestamp — only shows on hover (desktop) */
.bubble-time {
  position: absolute;
  bottom: -16px;
  font-size: 10px;
  color: var(--text-secondary);
  opacity: 0;
  transition: opacity 0.15s ease;
  font-family: var(--type-family-mono);
  letter-spacing: 0.02em;
  pointer-events: none;
}
.chat-bubble-user .bubble-time { right: 4px; }
.chat-bubble-agent .bubble-time { left: 4px; }
.chat-bubble:hover .bubble-time { opacity: 0.7; }
@media (hover: none) { .bubble-time { opacity: 0.5; bottom: -14px; font-size: 9px; } }

/* Auto-resize textarea — restrict max height, smooth growth */
.chat-form textarea {
  min-height: 44px;
  max-height: 200px;
  overflow-y: auto;
  transition: height 0.1s ease;
}

/* Smooth scroll for the transcript */
.chat-transcript { scroll-behavior: smooth; }

/* ── Cost dashboard (/cost) ─────────────────────────────────────────── */
.cost-window-tabs { display: flex; gap: 8px; margin-bottom: var(--space-4); }
.cost-tab { cursor: pointer; }
.cost-tab.active {
  background: var(--color-brand-lavender);
  color: var(--color-background-app-dark);
  border-color: var(--color-brand-lavender);
}
.cost-summary { margin-bottom: var(--space-5); }
.cost-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3);
}
.cost-kpi {
  padding: var(--space-3) var(--space-4);
  background: var(--color-background-surface-alt);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
}
.cost-kpi-label {
  font-size: var(--type-size-xs);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.cost-kpi-value {
  font-size: var(--type-size-lg);
  font-weight: var(--type-weight-semibold);
  font-family: var(--type-family-mono);
}
.cost-chart { display: flex; flex-direction: column; gap: 10px; }
.cost-bar-row {
  display: grid;
  grid-template-columns: 110px 1fr 80px 90px;
  align-items: center;
  gap: 12px;
}
.cost-bar-agent { font-size: var(--type-size-sm); font-weight: var(--type-weight-semibold); }
.cost-bar-track {
  background: var(--color-background-surface-alt);
  border-radius: var(--radius-pill);
  height: 18px;
  overflow: hidden;
  border: 1px solid var(--color-border-subtle);
}
.cost-bar-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  transition: width 0.4s var(--motion-easing-spring);
}
.cost-bar-amount { font-family: var(--type-family-mono); font-size: var(--type-size-sm); text-align: right; }
.cost-bar-calls { font-family: var(--type-family-mono); font-size: 0.78rem; text-align: right; }
@media (max-width: 600px) {
  .cost-bar-row { grid-template-columns: 80px 1fr 70px; }
  .cost-bar-calls { display: none; }
}

/* ── Escalation bar (top of home — "needs your attention") ───────────── */
.escalation-bar {
  margin-top: var(--space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-background-surface-alt);
  overflow: hidden;
}
.escalation-bar[data-urgency="critical"] { border-color: rgba(248,113,113,0.5); background: rgba(248,113,113,0.06); }
.escalation-bar[data-urgency="high"]     { border-color: rgba(251,191,36,0.5);  background: rgba(251,191,36,0.06); }
.escalation-bar-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px var(--space-4);
  cursor: pointer;
  user-select: none;
}
.escalation-bar-pulse {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgb(251,191,36);
  box-shadow: 0 0 0 0 rgba(251,191,36,0.6);
  animation: escPulse 2s infinite;
}
.escalation-bar-pulse[data-urgency="critical"] { background: rgb(248,113,113); box-shadow: 0 0 0 0 rgba(248,113,113,0.6); }
.escalation-bar-pulse[data-urgency="low"] { background: rgb(125,211,252); animation: none; }
@keyframes escPulse {
  0%   { box-shadow: 0 0 0 0 rgba(251,191,36,0.6); }
  70%  { box-shadow: 0 0 0 10px rgba(251,191,36,0); }
  100% { box-shadow: 0 0 0 0 rgba(251,191,36,0); }
}
.escalation-bar-title { flex: 1; font-size: var(--type-size-base); }
.escalation-bar-title strong { font-weight: 700; }
.escalation-bar-expand {
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text-secondary);
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}
.escalation-bar-list {
  margin: 0;
  padding: 0 var(--space-4) var(--space-3);
  list-style: none;
  border-top: 1px solid var(--color-border-subtle);
}
.escalation-bar-item {
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border-subtle);
  display: grid;
  grid-template-columns: 70px 1fr auto;
  gap: 10px;
  align-items: center;
  font-size: var(--type-size-sm);
}
.escalation-bar-item:last-child { border-bottom: none; }
.escalation-urgency {
  font-family: var(--type-family-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  background: rgba(148,163,184,0.2);
  text-align: center;
  color: var(--text-secondary);
}
.escalation-bar-item[data-urgency="critical"] .escalation-urgency { background: rgba(248,113,113,0.2); color: rgb(248,113,113); }
.escalation-bar-item[data-urgency="high"]     .escalation-urgency { background: rgba(251,191,36,0.2); color: rgb(251,191,36); }
.escalation-title { font-weight: var(--type-weight-semibold); }
.escalation-time { color: var(--text-secondary); font-family: var(--type-family-mono); font-size: 0.75rem; }
.escalation-detail {
  grid-column: 1 / -1;
  margin-top: 6px;
  font-size: 0.85rem;
}
.escalation-detail summary {
  cursor: pointer;
  color: var(--color-brand-lavender);
  font-family: var(--type-family-mono);
  font-size: 0.78rem;
}
.escalation-summary {
  padding: 10px 12px;
  margin-top: 6px;
  background: var(--color-background-app-dark);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  line-height: 1.6;
  font-size: 0.85rem;
}
.escalation-resolve {
  grid-column: 1 / -1;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 0.78rem;
  font-family: var(--type-family-mono);
  background: var(--color-brand-lavender);
  color: var(--color-background-app-dark);
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  margin-top: 6px;
  transition: opacity var(--motion-duration-fast);
}
.escalation-resolve:hover { opacity: 0.85; }
.escalation-resolve:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Agent badge (mark + 2-letter code overlay) ───────────────────────── */
.agent-badge {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  /* Fallback visible circle in the agent's pastel — guarantees the badge reads
     even if the mask image fails to load. Tinted fill + ring of --mark-color. */
  background: color-mix(in srgb, var(--mark-color, #C4B5FD) 18%, transparent);
  border: 1.5px solid var(--mark-color, #C4B5FD);
}
.agent-badge-mark {
  position: absolute; inset: 8px;
  background-color: var(--mark-color, var(--color-brand-lavender));
  /* Square mark asset (aortic valve, 1:1) — NOT the wide horizontal lockup. */
  -webkit-mask: url('/brand/mark-white.png') center/contain no-repeat;
          mask: url('/brand/mark-white.png') center/contain no-repeat;
  opacity: 0.5;
}
.agent-badge-code {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--type-family-sans);
  font-weight: 700;
  font-size: 19px;
  color: var(--mark-color, #C4B5FD);
  letter-spacing: -0.02em;
  pointer-events: none;
  line-height: 1;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
.agent-badge-l0 { transform: scale(1.18); }
.agent-badge-l0 .agent-badge-code { color: #FFFFFF; }
.agent-badge-l0 { border-color: #FFFFFF; background: color-mix(in srgb, #FFFFFF 14%, transparent); }
.agent-badge-l2 { opacity: 0.8; }

/* Working state — slow breathing pulse on the mark + faint outer ring */
@keyframes agentBreath {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
@keyframes agentRing {
  0%   { box-shadow: 0 0 0 0 var(--mark-color, var(--color-brand-lavender)); opacity: 0.55; }
  100% { box-shadow: 0 0 0 14px var(--mark-color, var(--color-brand-lavender)); opacity: 0; }
}
.agent-badge-working { animation: agentBreath 2.4s ease-in-out infinite; }
.agent-badge-working::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: agentRing 2.4s ease-out infinite;
  pointer-events: none;
}

/* Held state — slight desat + paused */
.agent-badge-held .agent-badge-mark { filter: grayscale(0.6); opacity: 0.5; }
.agent-badge-held .agent-badge-code { color: var(--text-secondary); text-shadow: none; }

/* ── Home fleet flow chart ─────────────────────────────────────────────── */
.fleet-flow {
  margin-top: var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
.fleet-flow-l0 {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding-bottom: var(--space-2);
}
.fleet-flow-connector {
  height: 28px;
  position: relative;
  margin: 0 16px;
}
.fleet-flow-connector .connector-svg {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}
.fleet-flow-l1 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-4);
  padding-top: var(--space-2);
}
@media (max-width: 600px) {
  /* Founder P0 (d624287e): 2 clean columns on mobile. minmax(0,1fr) (not 1fr) lets tracks shrink
     below content so a wide node can never force the 3rd-column-style horizontal clip. */
  .fleet-flow-l1 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: var(--space-3); }
  .fleet-flow-node { min-width: 0; max-width: 100%; overflow: hidden; }
  .fleet-flow-name, .fleet-flow-task, .fleet-flow-node .nw-text {
    min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fleet-flow-connector { display: none; }
}
.fleet-flow-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: var(--text-primary);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  transition: background var(--motion-duration-fast), transform var(--motion-duration-fast);
  position: relative;
  text-align: center;
}
.fleet-flow-node:hover {
  background: var(--color-background-tint-lavender-strong);
  transform: translateY(-2px);
}
.fleet-flow-name {
  font-weight: var(--type-weight-semibold);
  font-size: var(--type-size-sm);
}
.fleet-flow-task {
  font-size: 10px;
  color: var(--text-secondary);
  font-family: var(--type-family-mono);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fleet-flow-status-pill {
  font-size: 9px;
  font-family: var(--type-family-mono);
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.05em;
}
.fleet-flow-status-pill.held {
  background: rgba(148, 163, 184, 0.25);
  color: var(--text-secondary);
}
.fleet-flow-footer {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.fleet-flow-counters {
  display: flex;
  gap: 10px;
  color: var(--text-secondary);
  font-size: var(--type-size-sm);
}
.fleet-flow-counters strong { color: var(--text-primary); font-weight: var(--type-weight-semibold); }
.fleet-flow-counters .num-working { color: rgb(125, 211, 252); }
.fleet-flow-counters .num-held { color: var(--text-secondary); }
.dot-sep { opacity: 0.4; }
.home-hero-stats-link {
  color: var(--color-brand-lavender);
  font-size: var(--type-size-sm);
  text-decoration: none;
}
.home-hero-stats-link:hover { text-decoration: underline; }

/* Slim the home hero now that the flow chart is the focal point */
.home-hero { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.home-hero-wordmark { margin-top: var(--space-2); }
.home-hero-wordmark .wm-line1 { font-size: 1.5rem; }
.home-hero-fleet-label { color: var(--text-secondary); font-size: var(--type-size-sm); margin-top: var(--space-2); }
.home-hero-link-group { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* Today's wins panel */
.todays-wins {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border-subtle);
}
.todays-wins-title {
  font-size: var(--type-size-lg);
  font-weight: var(--type-weight-semibold);
  margin-bottom: var(--space-3);
}
.todays-wins-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.todays-win-item {
  display: grid;
  grid-template-columns: 60px 110px 100px 1fr;
  gap: 12px;
  padding: 8px 12px;
  background: var(--color-background-surface-alt);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  font-size: var(--type-size-sm);
  align-items: center;
}
.todays-win-time { font-family: var(--type-family-mono); color: var(--text-secondary); font-size: 0.78rem; }
.todays-win-agent { font-weight: var(--type-weight-semibold); }
.todays-win-type {
  font-family: var(--type-family-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  text-align: center;
  background: rgba(125,211,252,0.15);
  color: rgb(125,211,252);
}
.todays-win-item[data-type="self-directed"] .todays-win-type { background: rgba(192,132,252,0.15); color: rgb(192,132,252); }
.todays-win-item[data-type="decision"]      .todays-win-type { background: rgba(251,191,36,0.15); color: rgb(251,191,36); }
.todays-win-item[data-type="daily"]         .todays-win-type { background: rgba(134,239,172,0.15); color: rgb(134,239,172); }
.todays-win-title { color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 600px) {
  .todays-win-item { grid-template-columns: 50px 80px 1fr; }
  .todays-win-type { display: none; }
}

/* Mobile chat-form polish */
@media (max-width: 600px) {
  .chat-bubble { max-width: 92%; padding: 10px 14px; }
  .chat-form { gap: 6px; }
  .attach-btn, .mic-btn { width: 38px; height: 38px; }
  .attach-btn svg, .mic-btn svg { width: 14px; height: 14px; }
  .chat-form .btn-primary { padding: 8px 14px; min-width: 60px; }
  .bubble-time { display: none; }  /* save vertical space on mobile */
}
.chat-cost-summary {
  background: var(--color-background-surface-alt);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-bottom: var(--space-4);
}
.cost-label {
  font-size: var(--type-size-xs);
  color: var(--text-secondary);
  margin-bottom: 2px;
}
.cost-value {
  font-size: var(--type-size-xl);
  font-weight: var(--type-weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--color-brand-lavender);
}
.cost-sub {
  font-size: var(--type-size-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}

.agent-events-list, .agent-hb-list {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 0 0;
}
.agent-hb-list .hb {
  padding: 6px 0;
  font-size: var(--type-size-sm);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.empty {
  color: var(--color-text-muted);
  font-size: var(--type-size-sm);
  font-style: italic;
}
.event {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border-subtle);
  list-style: none;
}
.event-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 4px;
}
.event-type {
  font-size: var(--type-size-xs);
  color: var(--color-brand-lavender);
  background: var(--color-background-tint-lavender-strong);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}
html[data-theme="dark"] .event-type {
  background: rgba(164,165,248,0.15);
  color: var(--color-brand-lavender);
}
.event-time {
  font-size: var(--type-size-xs);
  color: var(--color-text-muted);
  margin-left: auto;
}
.event-title {
  font-size: var(--type-size-base);
  font-weight: var(--type-weight-medium);
}
.event-summary {
  font-size: var(--type-size-sm);
  color: var(--text-secondary);
  margin-top: 4px;
}

/* Dispatch form */
.dispatch-subtitle {
  color: var(--text-secondary);
  font-size: var(--type-size-sm);
  margin-bottom: var(--space-6);
}
.dispatch-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 640px;
}
.dispatch-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dispatch-form label > span {
  font-size: var(--type-size-sm);
  font-weight: var(--type-weight-medium);
  color: var(--text-primary);
}
.dispatch-form input,
.dispatch-form select,
.dispatch-form textarea {
  background: var(--color-background-surface-alt);
  color: var(--text-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font: inherit;
  font-size: var(--type-size-base);
}
.dispatch-form input:focus,
.dispatch-form select:focus,
.dispatch-form textarea:focus {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-color: var(--color-brand-lavender);
}
.form-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-4);
}
.dispatch-success {
  background: rgba(33,201,122,0.1);
  color: var(--color-feedback-success-green);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  margin-top: var(--space-3);
}
.dispatch-warn {
  background: rgba(245,165,36,0.1);
  color: var(--color-feedback-warning-amber);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  margin-top: var(--space-3);
}
.loading {
  padding: var(--space-3);
  color: var(--text-secondary);
}

/* Agents listing page */
.page-title {
  font-size: var(--type-size-4xl);
  font-weight: var(--type-weight-bold);
  margin-bottom: var(--space-2);
}
.page-subtitle {
  color: var(--text-secondary);
  margin-bottom: var(--space-8);
}
/* Agents view: clinical grid + operating fleet as reorderable blocks.
   Desktop keeps the clinical pastel grid on top (per 5/20). On phones the
   operating fleet moves up so it sits directly under the page title — no
   giant clinical block eating the first screen. `gap` gives even spacing in
   either order (each block zeroes its own outer margin). */
.agents-view { display: flex; flex-direction: column; gap: var(--space-6); }
.agents-view > .operating-fleet { order: 0; margin: 0; }         /* Founder-UI (e7e947a0): Wing A first */
.agents-view > .clinical-agents-section { order: 1; margin: 0; } /* clinical roster BELOW Wing A */
@media (max-width: 768px) {
  /* The clinical-engine grid is 14 faint, low-contrast cards (bg rgba(255,255,255,.025))
     that read as blank black and eat the top of the phone screen. Hide it ENTIRELY on
     mobile so the operating fleet is GUARANTEED to be the first content directly under the
     header — no empty top gap is possible. Desktop keeps the clinical grid (order:0 above). */
  .agents-view > .clinical-agents-section { order: 1; }  /* Founder-UI (e7e947a0): show clinical roster BELOW Wing A on mobile too */
  .agents-view > .operating-fleet { order: 0; }
}
.agent-group { margin-bottom: var(--space-10); }
.agent-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-3);
}
/* Founder-UI (task e7e947a0 item 4): EXACTLY 3 columns on mobile. minmax(0,1fr) lets the columns
   shrink so the 3rd never clips off-screen (the prior bug); cards go vertical + drop the verbose
   lines so the mark + name stay legible on a compact phone tile. */
@media (max-width: 600px) {
  .agent-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
  .agent-card { position: relative; flex-direction: column; align-items: center; text-align: center; padding: var(--space-2); gap: 6px; }
  .agent-card-emoji { transform: scale(0.82); }
  .agent-card-body { width: 100%; min-width: 0; }
  .agent-card-name { font-size: var(--type-size-xs); justify-content: center; flex-wrap: wrap; }
  .agent-card-role, .agent-card-human, .agent-card-subagents, .agent-card-now-working { display: none; }
  .agent-card-body svg { display: none; }
  .agent-card-status { position: absolute; top: 6px; right: 6px; }
}
.agent-card {
  background: var(--color-background-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--text-primary);
  transition: border-color var(--motion-duration-fast), transform var(--motion-duration-fast);
  position: relative;
}
.agent-card:hover {
  border-color: var(--color-brand-lavender);
  transform: translateY(-1px);
}
.agent-card-emoji {
  font-size: 28px;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-background-surface-alt);
  display: grid;
  place-items: center;
}
.agent-card-body { flex: 1; min-width: 0; }
.agent-card-name {
  font-weight: var(--type-weight-semibold);
  font-size: var(--type-size-base);
}
/* 6986392c: L2 roster cards — per-family pastel left-accent (family_color via --family-accent) +
   smaller label. Label shrink is DESKTOP-ONLY (min-width:601px) so the max-width:600px mobile
   rule (.agent-card-name -> xs) still wins on phones — a plain L2 rule would out-specify it and
   re-enlarge mobile labels (David III cascade catch). Border falls back to transparent if unset. */
.agent-card-l2 {
  border-left: 3px solid var(--family-accent, transparent);
}
@media (min-width: 601px) {
  .agent-card-l2 .agent-card-name { font-size: var(--type-size-sm); }
}
.agent-card-role {
  font-size: var(--type-size-xs);
  color: var(--text-secondary);
}
.agent-card-human {
  font-size: var(--type-size-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}
.agent-card-subagents {
  font-size: var(--type-size-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}
.subagent-name {
  color: var(--color-text-secondary);
  font-weight: var(--type-weight-medium);
}
.subagent-dots {
  display: inline-flex;
  gap: 3px;
  flex-shrink: 0;
}
.subagent-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  opacity: 0.7;
}

/* Group header — section title + one-line caption */
.agent-group-head {
  margin-bottom: var(--space-3);
}
.agent-group-caption {
  font-size: var(--type-size-sm);
  color: var(--color-text-muted);
  margin: 4px 0 0 0;
  letter-spacing: -0.005em;
}

/* L0 tagline under name */
.agent-tagline {
  font-size: var(--type-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
  font-weight: var(--type-weight-medium);
}

/* Per-agent /agent/<name> hero */
.agent-hero {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border-subtle);
}
.agent-hero-mark {
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
}
.agent-hero-meta {
  flex: 1;
  min-width: 0;
}
.agent-hero h1 {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--type-size-2xl);
}
@media (max-width: 600px) {
  .agent-hero { gap: var(--space-3); }
  .agent-hero-mark { width: 64px; height: 64px; }
  .agent-hero h1 { font-size: var(--type-size-xl); }
}

/* L0 / Chief of Staff section — Walton sits above */
.agent-group-l0 {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border-subtle);
}
.agent-card.agent-card-l0 {
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--color-brand-cream, #FDE68A) 8%, var(--color-background-surface)),
    var(--color-background-surface));
  border: 1px solid color-mix(in oklab, var(--color-brand-cream, #FDE68A) 22%, transparent);
}
.agent-card.agent-card-l0 .agent-card-emoji {
  /* L0 mark is 56px (vs 36px L1) — size container to match so mark renders centered */
  width: 64px;
  height: 64px;
  filter: drop-shadow(0 0 16px rgba(255, 255, 255, 0.18));
}
.l0-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  background: var(--color-brand-cream, #FDE68A);
  color: var(--color-background-app-dark);
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: var(--type-weight-bold);
  letter-spacing: 0.05em;
  vertical-align: middle;
}
/* Human names rendered in pastel cream/yellow — same as active-tab color, used wherever a person's name appears */
.human-name {
  color: var(--color-brand-cream, #FDE68A);
  font-weight: var(--type-weight-medium);
}
.agent-card-status {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  position: absolute;
  top: 12px;
  right: 12px;
}
.status-active     { background: var(--color-feedback-success-green); }
.status-dormant    { background: var(--color-text-muted); }
.status-quarantined{ background: var(--color-feedback-error-red); }
.status-retired    { background: var(--color-text-muted); opacity: 0.4; }

/* Agent-side recent tasks list */
.agent-tasks-list { list-style: none; padding: 0; margin: 0; }
.task-row {
  display: grid;
  grid-template-columns: 30px 1fr auto auto;
  gap: var(--space-2);
  padding: 6px 0;
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: var(--type-size-sm);
  align-items: center;
}
.task-prio {
  font-size: 10px;
  font-weight: var(--type-weight-bold);
  text-align: center;
  padding: 1px 4px;
  border-radius: 4px;
}
.task-prio-p0 { background: var(--color-feedback-error-red); color: white; }
.task-prio-p1 { background: var(--color-feedback-warning-amber); color: white; }
.task-prio-p2 { background: var(--color-brand-lavender); color: var(--color-background-app-dark); }
.task-prio-p3 { background: var(--color-text-muted); color: white; }
.task-title { color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-status { font-size: 10px; text-transform: uppercase; letter-spacing: var(--type-letter-spacing-label); }
.task-closed { color: var(--color-feedback-success-green); }
.task-ip { color: var(--color-feedback-warning-amber); }
.task-open { color: var(--color-text-secondary); }
.task-time { font-size: 10px; }

/* Render deploys list (admin) */
.deploys-list { list-style: none; padding: 0; margin: 0; }
.deploy-row {
  display: grid;
  grid-template-columns: 90px 70px 1fr auto;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border-subtle);
  align-items: center;
  font-size: var(--type-size-sm);
}
.deploy-status {
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: var(--type-size-xs);
  font-weight: var(--type-weight-medium);
  text-align: center;
}
.deploy-live { background: rgba(33, 201, 122, 0.15); color: var(--color-feedback-success-green); }
.deploy-progress { background: rgba(245, 165, 36, 0.15); color: var(--color-feedback-warning-amber); }
.deploy-failed { background: rgba(239, 68, 68, 0.15); color: var(--color-feedback-error-red); }
.deploy-sha { font-family: ui-monospace, monospace; color: var(--color-text-secondary); }
.deploy-msg { color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Navbar status pill — quick at-a-glance health */
.cc-status-pill {
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: var(--type-size-xs);
  font-weight: var(--type-weight-medium);
  letter-spacing: var(--type-letter-spacing-label);
  margin-right: var(--space-3);
  cursor: default;
  user-select: none;
}
.cc-status-green { background: rgba(33, 201, 122, 0.15); color: var(--color-feedback-success-green); }
.cc-status-amber { background: rgba(245, 165, 36, 0.15); color: var(--color-feedback-warning-amber); }
.cc-status-red   { background: rgba(239, 68, 68, 0.15); color: var(--color-feedback-error-red); }
.cc-status-loading { background: var(--color-background-surface); color: var(--color-text-muted); }
@media (max-width: 600px) {
  .cc-status-pill {
    padding: 4px 8px;
    font-size: 10px;
  }
  .cc-status-pill svg { width: 9px; height: 9px; }
}

.cc-build-pill {
  display: none;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: var(--type-size-xs);
  color: var(--color-text-muted);
  background: var(--color-background-surface);
  margin-right: var(--space-2);
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: default;
}
@media (min-width: 1024px) {
  .cc-build-pill { display: inline-block; }
}
.role-badge {
  font-size: var(--type-size-sm);
  margin-right: 6px;
  cursor: default;
}
.role-superadmin { color: gold; }
.role-admin { color: var(--color-brand-lavender-strong); }
.role-suite {
  font-size: 9px;
  padding: 1px 6px;
  background: var(--color-background-surface);
  color: var(--color-brand-lavender-strong);
  border: 1px solid var(--color-brand-lavender);
  border-radius: var(--radius-pill);
  font-weight: var(--type-weight-bold);
  letter-spacing: 0.05em;
}

/* WoW delta styling on insight tiles */
.delta-up { color: var(--color-feedback-success-green); font-weight: var(--type-weight-medium); }
.delta-down { color: var(--color-feedback-error-red); font-weight: var(--type-weight-medium); }

/* Live Feed slide-in animation for newly-arrived events (post-backfill only) */
.feed-item-enter {
  opacity: 0;
  transform: translateY(-14px) scale(0.98);
  background: color-mix(in oklab, var(--color-brand-cream, #FDE68A) 12%, transparent);
}
.feed-item-enter-active {
  opacity: 1;
  transform: translateY(0) scale(1);
  background: transparent;
  transition:
    opacity 0.55s cubic-bezier(.4, 0, .2, 1),
    transform 0.55s cubic-bezier(.4, 0, .2, 1),
    background 1.2s ease-out;
}

/* Live Feed SSE status indicator */
.feed-sse-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--type-size-xs);
  font-weight: var(--type-weight-medium);
  margin-bottom: var(--space-3);
}
.sse-live { background: rgba(33, 201, 122, 0.15); color: var(--color-feedback-success-green); }
.sse-connecting { background: rgba(245, 165, 36, 0.15); color: var(--color-feedback-warning-amber); }
.sse-reconnect { background: rgba(239, 68, 68, 0.15); color: var(--color-feedback-error-red); }

/* Backlog count badge */
.backlog-badge {
  display: inline-block;
  margin-left: 6px;
  background: var(--color-feedback-warning-amber);
  color: var(--color-background-app-dark);
  border-radius: 10px;
  padding: 1px 8px;
  font-size: var(--type-size-xs);
  font-weight: var(--type-weight-bold);
  vertical-align: middle;
}

/* Agent card "now working" inline */
.agent-card-now-working {
  margin-top: 6px;
  min-height: 2.7em; /* reserve exactly 2 lines so every card row aligns, task or not */
  font-size: var(--type-size-xs);
  color: var(--color-feedback-warning-amber);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
  word-break: break-word;
}
/* Idle agents: keep the reserved 2-line space, but render nothing. */
.agent-card-now-working.nw-empty { -webkit-line-clamp: 1; }
/* Priority / HELD chips — kept `display:inline` so they flow inside the
   -webkit-line-clamp box (inline-block would stack as flex items). */
.nw-chip {
  display: inline;
  padding: 0.5px 5px;
  margin-right: 4px;
  border-radius: 10px;
  font-size: 9.5px;
  font-weight: var(--type-weight-bold);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  background: rgba(148, 163, 184, 0.18);
  color: var(--text-secondary);
}
.nw-chip.nw-held { background: rgba(148, 163, 184, 0.24); color: #CBD5E1; }
.nw-chip.nw-p0   { background: rgba(239, 68, 68, 0.20);   color: #FCA5A5; }
.nw-chip.nw-p1   { background: rgba(245, 158, 11, 0.20);  color: #FCD34D; }
.nw-chip.nw-p2   { background: rgba(96, 165, 250, 0.18);  color: #93C5FD; }
.nw-chip.nw-p3   { background: rgba(148, 163, 184, 0.18); color: #CBD5E1; }

/* Per-agent activity sparkline (24h) */
.sparkline {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sparkline svg {
  flex-shrink: 0;
}
.sparkline-count {
  font-size: var(--type-size-xs);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

/* Wing B agent letter-box — matches whiteglovemd.com OUR AGENTS grid style */
.agent-letterbox {
  display: inline-grid;
  place-items: center;
  background: color-mix(in oklab, var(--lb-color) 22%, transparent);
  color: var(--lb-color);
  border: 1px solid color-mix(in oklab, var(--lb-color) 45%, transparent);
  border-radius: 14px;
  font-family: var(--type-family-sans);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
  vertical-align: middle;
  flex-shrink: 0;
  text-transform: none;
}
/* Slightly darker text on light theme so pastels stay legible */
[data-theme="light"] .agent-letterbox {
  color: color-mix(in oklab, var(--lb-color) 70%, #1B365D);
}

/* Brand mark — WhiteGloveMD aortic valve logo, tinted per agent via CSS mask */
.brand-mark {
  display: inline-block;
  background-color: var(--mark-color, #FFFFFF);
  -webkit-mask-image: url('/brand/mark-white-256.png');
  mask-image: url('/brand/mark-white-256.png');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  vertical-align: middle;
  flex-shrink: 0;
  transform-origin: center;
}
/* Working state — breathes at the preloader's pdB cadence (3s ease-in-out, 1 -> 1.015 -> 1) */
.brand-mark-working {
  animation: brand-mark-breathe 3s ease-in-out infinite;
  filter: drop-shadow(0 0 8px color-mix(in oklab, var(--mark-color) 50%, transparent));
}
/* L2 variants — slight shade off parent L1 (same family color, ~15% darker for distinction) */
.brand-mark-l2 {
  background-color: color-mix(in oklab, var(--mark-color) 80%, #1B365D);
}
@keyframes brand-mark-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

/* Inline SVG icons inherit currentColor from text; vertically aligned to mid-baseline. */
svg[aria-hidden] {
  display: inline-block;
  vertical-align: -2px;
  flex-shrink: 0;
}

/* Clintelligence™ AI product mark (variant 10F Halo Ring Pulse C) — auto-themed.
   Default dark theme = ice-blue stroke + slate halo. Light theme overrides to navy + gray.
   TRIAL 5/17/26: ice blue #7DD3FC (Tailwind sky-300). REVERT: change color back to #FFFFFF. */
.pulse-c-mark {
  color: #7DD3FC;
  vertical-align: middle;
  flex-shrink: 0;
  --halo-color: #475569;
}
html[data-theme="light"] .pulse-c-mark {
  color: #1B365D;
  --halo-color: #94A3B8;
}
.pulse-c-mark.is-working {
  animation: pulse-c-breathe 3s ease-in-out infinite;
  transform-origin: center;
}
@keyframes pulse-c-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}
.pulse-c-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* ============================================================
   /wings landing — wing picker shown right after login.
   Full-bleed, two big tiles. No nav chrome (hideChrome=true).
   Wing A (Bus/Ops) live + entered with one tap. Wing B dormant.
   ============================================================ */
.chrome-hidden .cc-nav,
.chrome-hidden .mobile-tabs,
.chrome-hidden #floating-walton-btn,
.chrome-hidden #status-banner { display: none !important; }
.chrome-hidden { padding-bottom: 0 !important; }
.wings-shell {
  min-height: 100vh;
  background: radial-gradient(ellipse at top, #131A24 0%, #0F1419 65%);
  color: #FFFFFF;
  padding: max(48px, env(safe-area-inset-top)) 24px 32px;
  display: flex; flex-direction: column;
  align-items: center; gap: 40px;
}
.wings-header { text-align: center; }
.wings-brand {
  display: inline-flex; align-items: center; gap: 14px;
  margin-bottom: 8px;
}
/* Two-line wordmark: line1 Clintelligence™ (ice-blue shimmer) + AI (2nd tone); line2 CtOS v3.0. */
.wings-wordmark {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.08;
}
.wings-wordmark .wm-line1 { font-size: clamp(22px, 5vw, 30px); font-weight: 700; letter-spacing: -0.015em; }
/* LOCKED wordmark silver (tone A); "AI" tone-B slate; line2 "Ct OS". No ice-blue, no version tag. */
.wings-wordmark .wm-shimmer {
  background: linear-gradient(110deg, #FFFFFF 0%, #E6EBF2 25%, #C7D2E0 50%, #9FB0C4 75%, #FFFFFF 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: brand-shimmer 20s linear infinite;
}
.wings-wordmark .wm-ai { color: #8DA0B8; font-weight: 700; }
.wings-wordmark .wm-line2 {
  font-size: clamp(14px, 2.6vw, 18px); font-weight: 600;
  letter-spacing: 0.02em;
  color: #F4F7FB; margin-top: 3px;
}
@media (prefers-reduced-motion: reduce) { .wings-wordmark .wm-shimmer { animation: none; background-position: 50% 0; } }
.wings-subtitle {
  color: rgba(255,255,255,0.55);
  font-size: 15px;
  letter-spacing: 0.01em;
  margin: 0;
}
.wings-grid {
  display: grid;
  gap: 20px;
  width: 100%;
  max-width: 920px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .wings-grid { grid-template-columns: 1fr 1fr; }
}
.wing-card {
  position: relative;
  display: flex; flex-direction: column; gap: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.015) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 22px;
  padding: 28px 24px 22px;
  text-decoration: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition: border-color 220ms ease, transform 220ms ease, background 220ms ease;
  min-height: 280px;
}
.wing-card--live:hover {
  border-color: rgba(164,165,248,0.45);
  background: linear-gradient(180deg, rgba(164,165,248,0.08) 0%, rgba(164,165,248,0.02) 100%);
  transform: translateY(-2px);
}
.wing-card--dormant {
  opacity: 0.55;
  cursor: not-allowed;
}
.wing-card-mark {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  flex-shrink: 0;
}
.wing-card-mark--letterbox {
  display: flex; align-items: center; justify-content: center; gap: 4px;
}
.wing-letter {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 5px;
  font-size: 10px; font-weight: 700;
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
}
.wing-letter:nth-child(1) { background: rgba(134,239,172,0.18); border-color: rgba(134,239,172,0.4); color: #86EFAC; }
.wing-letter:nth-child(2) { background: rgba(253,186,116,0.18); border-color: rgba(253,186,116,0.4); color: #FDBA74; }
.wing-letter:nth-child(3) { background: rgba(196,181,253,0.18); border-color: rgba(196,181,253,0.4); color: #C4B5FD; }
.wing-letter:nth-child(4) { background: rgba(147,197,253,0.18); border-color: rgba(147,197,253,0.4); color: #93C5FD; }
.wing-card-body { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.wing-card-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}
.wing-card-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0;
}
.wing-card-desc {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,255,255,0.65);
  margin: 4px 0 0;
}
.wing-card-meta {
  display: flex; align-items: center; gap: 12px;
  margin-top: 10px;
  font-size: 12px;
}
.wing-card-status {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.wing-card-status--live {
  background: rgba(134,239,172,0.15);
  color: #86EFAC;
  border: 1px solid rgba(134,239,172,0.3);
}
.wing-card-status--dormant {
  background: rgba(148,163,184,0.15);
  color: #94A3B8;
  border: 1px solid rgba(148,163,184,0.25);
}
.wing-card-count {
  color: rgba(255,255,255,0.45);
}
.wing-card-cta {
  align-self: stretch;
  margin-top: auto;
  padding: 12px 16px;
  background: rgba(164,165,248,0.18);
  border: 1px solid rgba(164,165,248,0.35);
  border-radius: 12px;
  font-weight: 600;
  font-size: 15px;
  text-align: center;
  color: #C7D2FE;
}
.wing-card-cta--disabled {
  background: rgba(148,163,184,0.08);
  border-color: rgba(148,163,184,0.18);
  color: rgba(148,163,184,0.55);
}
.wings-footer {
  margin-top: auto;
  padding-top: 24px;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}
.wings-signout {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.55);
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  font: inherit;
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease;
}
.wings-signout:hover { color: #FFF; border-color: rgba(255,255,255,0.3); }

/* /stats Morning brief widget */
.morning-brief-body {
  background: linear-gradient(180deg, rgba(125,211,252,0.04), rgba(15,20,25,0.6));
  border: 1px solid rgba(125,211,252,0.15);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 18px;
}
.morning-brief-md {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255,255,255,0.85);
}
.morning-brief-md h3 { font-size: 16px; margin: 4px 0 8px; color: #7DD3FC; font-weight: 700; }
.morning-brief-md h4 { font-size: 13px; margin: 14px 0 6px; color: rgba(255,255,255,0.95); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.morning-brief-md ul { margin: 6px 0 12px 18px; padding: 0; }
.morning-brief-md li { margin: 3px 0; }
.morning-brief-md p { margin: 8px 0; }
.morning-brief-md strong { color: #FCD34D; }
.morning-brief-md code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: rgba(125,211,252,0.9); background: rgba(125,211,252,0.08); padding: 1px 5px; border-radius: 3px; }

/* /fleet — single-screen agent activity */
.fleet-rows { display: flex; flex-direction: column; gap: 6px; }
.fleet-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  text-decoration: none;
  color: var(--text-primary);
  font-size: 13px;
  transition: background 180ms ease, border-color 180ms ease;
}
.fleet-row:hover { background: rgba(125,211,252,0.06); border-color: rgba(125,211,252,0.18); }
.fleet-row-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.fleet-row-name { font-weight: 600; min-width: 90px; flex-shrink: 0; }
.fleet-row-tool {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; padding: 2px 7px;
  background: rgba(125,211,252,0.14);
  color: #7DD3FC;
  border: 1px solid rgba(125,211,252,0.25);
  border-radius: 4px; flex-shrink: 0;
}
.fleet-row-headline { flex: 1; color: rgba(255,255,255,0.75); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fleet-row-age { color: rgba(255,255,255,0.4); font-size: 11px; flex-shrink: 0; }
.fleet-row-quiet { flex: 1; color: rgba(255,255,255,0.3); font-style: italic; }
.fleet-row-queue {
  font-size: 11px; padding: 2px 7px;
  background: rgba(252,211,77,0.12); color: #FCD34D;
  border: 1px solid rgba(252,211,77,0.25);
  border-radius: 4px; flex-shrink: 0; font-weight: 600;
}
@media (max-width: 560px) {
  .fleet-row-headline { display: none; }
  /* Tool badge is the variable-width item — let it truncate so the fixed
     badges (dot/name/age/queue) never push past the viewport. */
  .fleet-row-tool { font-size: 10px; flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Live feed — Self-Directed Work (autonomous tool runs) gets distinct styling */
.feed-item-tool { border-left: 2px solid rgba(125,211,252,0.4); padding-left: 8px; }
.feed-tool {
  background: rgba(125,211,252,0.14);
  color: #7DD3FC;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid rgba(125,211,252,0.25);
  letter-spacing: 0.02em;
}
.feed-flag {
  background: rgba(252,211,77,0.18);
  color: #FCD34D;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid rgba(252,211,77,0.3);
  font-weight: 600;
}
.feed-next-action {
  margin-top: 4px;
  font-size: 12px;
  color: rgba(252,211,77,0.85);
  font-style: italic;
}
.feed-summary-more {
  color: rgba(255,255,255,0.35);
  font-size: 11px;
}

/* ============================================================
   Home hero — Pulse C lockup + fleet liveness, nothing else.
   ============================================================ */
.home-hero {
  min-height: calc(100vh - 200px);  /* roughly viewport minus nav + bottom-tab + ambient */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 8px 16px 32px;
  text-align: center;
}
.home-hero-mark {
  display: grid;
  place-items: center;
  filter: drop-shadow(0 0 40px rgba(164,165,248,0.15));
  animation: home-mark-breathe 5s ease-in-out infinite;
}
@keyframes home-mark-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.03); }
}
/* LOCKED wordmark: container + two-line lockup. Line1 silver shimmer (tone A) + AI (tone B slate); line2 "Ct OS". No ice-blue, no version tag. */
.home-hero-wordmark { margin: 0; line-height: 1.1; }
.home-hero-wordmark .wm-line1 { font-size: clamp(24px, 6vw, 34px); font-weight: 700; letter-spacing: -0.02em; }
.home-hero-wordmark .wm-shimmer {
  background: linear-gradient(110deg, #FFFFFF 0%, #E6EBF2 25%, #C7D2E0 50%, #9FB0C4 75%, #FFFFFF 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: brand-shimmer 20s linear infinite;
}
.home-hero-wordmark .wm-ai { color: #8DA0B8; font-weight: 700; }
.home-hero-wordmark .wm-line2 { margin-top: 4px; font-size: clamp(15px,3.7vw,21px); font-weight: 600; letter-spacing: .02em; color: #F4F7FB; }
@media (prefers-reduced-motion: reduce) { .home-hero-wordmark .wm-shimmer { animation: none; background-position: 50% 0; } }
.home-hero-fleet {
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  margin-top: 16px;
}
.home-hero-fleet-label {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.01em;
}
.home-hero-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  max-width: 100%;
}
.home-hero-dots .fleet-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  transition: transform 180ms ease;
}
.home-hero-stats-link {
  margin-top: 20px;
  color: rgba(255,255,255,0.45);
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 0.01em;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08);
  transition: color 180ms ease, border-color 180ms ease;
}
.home-hero-stats-link:hover { color: #fff; border-color: rgba(255,255,255,0.2); }

/* Per-agent tools catalog */
.agent-tools-list { display: flex; flex-direction: column; gap: 8px; }
.agent-tool-row {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
}
.agent-tool-name {
  font-size: 13px; font-weight: 600;
  color: rgba(255,255,255,0.95);
  margin-bottom: 2px;
}
.agent-tool-desc {
  font-size: 12px; color: rgba(255,255,255,0.55); line-height: 1.4;
}
.agent-tool-cmd {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  background: rgba(15,20,25,0.6);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.05);
}
.agent-tool-cmd code {
  flex: 1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; color: rgba(125,211,252,0.85);
  overflow-x: auto; white-space: nowrap;
}

/* /admin Boot-fleet readiness card */
.admin-boot-card {
  background: linear-gradient(135deg, rgba(164,165,248,0.06), rgba(15,20,25,0.6));
  border: 1px solid rgba(164,165,248,0.18);
}
.boot-fleet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.boot-fleet-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
  background: rgba(148,163,184,0.15); color: #94A3B8;
  border: 1px solid rgba(148,163,184,0.25);
}
.boot-fleet-badge[data-state="ready"]   { background: rgba(134,239,172,0.16); color: #86EFAC; border-color: rgba(134,239,172,0.35); }
.boot-fleet-badge[data-state="blocked"] { background: rgba(252,211,77,0.16); color: #FCD34D; border-color: rgba(252,211,77,0.35); }
.boot-fleet-badge[data-state="error"]   { background: rgba(252,165,165,0.16); color: #FCA5A5; border-color: rgba(252,165,165,0.35); }
.boot-fleet-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
@media (max-width: 560px) { .boot-fleet-stats { grid-template-columns: repeat(2, 1fr); } }
.boot-stat {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
}
.boot-stat-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255,255,255,0.45); }
.boot-stat-val { font-size: 20px; font-weight: 700; color: rgba(255,255,255,0.92); line-height: 1; }
.boot-stat-val.is-green { color: #86EFAC; }
.boot-stat-val.is-amber { color: #FCD34D; }
.boot-fleet-cmd {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: rgba(15,20,25,0.6);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  margin-bottom: 10px;
}
.boot-fleet-cmd code { flex: 1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: rgba(255,255,255,0.85); overflow-x: auto; white-space: nowrap; }
.boot-fleet-hint { font-size: 12px; color: rgba(255,255,255,0.55); margin: 0; line-height: 1.5; }
/* LOCKED two-line wordmark on the wall. Line1 silver shimmer (tone A) + AI (tone B slate); line2 "Ct OS". No version tag on the lockup (detached ops-chrome allowed separately per Hugh 7/11). */
.pulse-c-lockup .pulse-c-wordmark { font-family: var(--type-family-sans); line-height: 1.08; margin: 0; display: flex; flex-direction: column; }
.pulse-c-lockup .wm-line1 { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; }
.pulse-c-lockup .wm-shimmer {
  background: linear-gradient(110deg, #FFFFFF 0%, #E6EBF2 25%, #C7D2E0 50%, #9FB0C4 75%, #FFFFFF 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: brand-shimmer 20s linear infinite;
}
.pulse-c-lockup .wm-ai { color: #8DA0B8; font-weight: 700; }
.pulse-c-lockup .wm-line2 { margin-top: 2px; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: #F4F7FB; }
@media (prefers-reduced-motion: reduce) { .pulse-c-lockup .wm-shimmer { animation: none; background-position: 50% 0; } }

/* iOS "Add to Home Screen" install hint */
.ios-install-banner {
  position: fixed;
  left: var(--space-3);
  right: var(--space-3);
  bottom: calc(72px + env(safe-area-inset-bottom));
  background: var(--color-background-surface-card);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-3) var(--space-4);
  display: flex;
  gap: var(--space-3);
  align-items: center;
  z-index: 9000;
  animation: ios-banner-in 400ms ease-out;
}
.ios-install-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ios-install-text strong { font-size: var(--type-size-sm); color: var(--color-text-primary); }
.ios-install-text span { font-size: var(--type-size-xs); color: var(--color-text-secondary); }
.ios-install-close {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: grid; place-items: center;
}
.ios-install-close:hover { color: var(--color-text-primary); }
@keyframes ios-banner-in {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Toast notifications */
.cc-toast-container {
  position: fixed;
  top: 72px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 99999;
  pointer-events: none;
}
.cc-toast {
  padding: 10px 16px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  font-size: var(--type-size-sm);
  font-weight: var(--type-weight-medium);
  background: var(--color-background-surface-card);
  color: var(--color-text-primary);
  border-left: 3px solid var(--color-brand-lavender);
  transition: opacity var(--motion-duration-fast) ease-out;
  max-width: 360px;
  pointer-events: auto;
  animation: toast-in 200ms ease-out;
}
.cc-toast-success { border-left-color: var(--color-feedback-success-green); }
.cc-toast-error   { border-left-color: var(--color-feedback-error-red); }
.cc-toast-info    { border-left-color: var(--color-brand-lavender); }
@keyframes toast-in {
  from { transform: translateX(20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* /architecture page — system layer map */
.arch-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-5);
}
.arch-layer {
  background: var(--color-background-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.arch-layer-title {
  font-size: var(--type-size-xs);
  text-transform: uppercase;
  letter-spacing: var(--type-letter-spacing-label);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}
.arch-cells {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3);
}
.arch-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-3);
  background: var(--color-background-app-dark);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
}
.arch-cell strong { font-size: var(--type-size-base); color: var(--color-text-primary); }
.arch-cell span  { font-size: var(--type-size-xs); color: var(--color-text-secondary); }
.arch-cell-standby { opacity: 0.62; }
.arch-flow {
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--type-size-lg);
  margin: -8px 0;
}
.arch-layer-edge   { border-color: color-mix(in oklab, var(--color-brand-lavender) 35%, transparent); }
.arch-layer-data   { border-color: color-mix(in oklab, var(--color-feedback-success-green) 35%, transparent); }
.arch-layer-intel  { border-color: color-mix(in oklab, var(--color-brand-cream, #FDE68A) 45%, transparent); }
.arch-stats {
  margin-top: var(--space-5);
  padding: var(--space-3);
  background: var(--color-background-surface);
  border-radius: var(--radius-md);
  font-size: var(--type-size-sm);
  color: var(--color-text-secondary);
}

/* /wall — investor demo / TV display */
.wall-shell {
  min-height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-4);
}
.wall-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
}
.wall-brand { display: flex; align-items: center; gap: var(--space-3); }
.wall-brand h1 { margin: 0; font-size: var(--type-size-xl); }
.wall-clock { color: var(--color-text-muted); font-size: var(--type-size-sm); font-variant-numeric: tabular-nums; }
/* Detached version/edition chip — NOT part of the wordmark lockup (Hugh 7/11 spec: Inter 500, 10-11px, slate, no TM, no shimmer, clear of the lockup). */
.wall-version { font-family: var(--type-family-sans); font-size: 10px; font-weight: 500; letter-spacing: .04em; color: #8DA0B8; white-space: nowrap; }
html[data-theme="light"] .wall-version { color: #64748B; }
.wall-kpis { display: flex; gap: var(--space-6); flex-wrap: wrap; }
.wall-kpi { display: flex; flex-direction: column; gap: 4px; }
.wall-kpi-value { font-size: var(--type-size-3xl, 48px); font-weight: var(--type-weight-bold); line-height: 1; color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
.wall-kpi-label { font-size: var(--type-size-xs); text-transform: uppercase; letter-spacing: var(--type-letter-spacing-label); color: var(--color-text-muted); }
.wall-main { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-5); flex: 1; min-height: 0; }
.wall-section-title { margin: 0 0 var(--space-3) 0; font-size: var(--type-size-sm); text-transform: uppercase; letter-spacing: var(--type-letter-spacing-label); color: var(--color-text-muted); }
.wall-agents { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: var(--space-3); }
.wall-agent {
  background: var(--color-background-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-decoration: none;
  color: var(--color-text-primary);
  transition: border-color var(--motion-duration-fast), transform var(--motion-duration-fast);
}
.wall-agent:hover { border-color: var(--color-brand-lavender); transform: translateY(-1px); }
.wall-agent-l0 {
  background: linear-gradient(135deg, color-mix(in oklab, var(--color-brand-cream, #FDE68A) 8%, var(--color-background-surface)), var(--color-background-surface));
  border-color: color-mix(in oklab, var(--color-brand-cream, #FDE68A) 22%, transparent);
}
.wall-agent-name { font-size: var(--type-size-sm); font-weight: var(--type-weight-medium); }
.wall-feed { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.wall-feed-row {
  display: grid;
  grid-template-columns: 110px 80px 1fr auto;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-background-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  font-size: var(--type-size-xs);
  align-items: center;
}
.wall-feed-type { padding: 2px 6px; border-radius: var(--radius-pill); font-size: 10px; font-weight: var(--type-weight-medium); text-align: center; background: var(--color-background-surface-alt); color: var(--color-text-secondary); }
.wall-feed-type[data-type="Decision"]            { background: rgba(164,165,248,0.16); color: var(--color-brand-lavender); }
.wall-feed-type[data-type="Self-Directed Work"]  { background: rgba(33,201,122,0.14);  color: var(--color-feedback-success-green); }
.wall-feed-type[data-type="Task Completion"]     { background: rgba(33,201,122,0.22);  color: var(--color-feedback-success-green); }
.wall-feed-type[data-type="Escalation"]          { background: rgba(239,68,68,0.16);   color: var(--color-feedback-error-red); }
.wall-feed-type[data-type="Watchdog Dispatch"]   { background: rgba(245,165,36,0.18);  color: var(--color-feedback-warning-amber); }
.wall-feed-type[data-type="Heartbeat"]           { background: rgba(148,163,184,0.14); color: var(--color-text-muted); }
.wall-feed-agent { font-weight: var(--type-weight-medium); color: var(--color-text-primary); }
.wall-feed-title { color: var(--color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wall-feed-time { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
@media (max-width: 768px) {
  .wall-main { grid-template-columns: 1fr; }
  .wall-kpi-value { font-size: var(--type-size-2xl); }
  .wall-feed-row { grid-template-columns: 80px 1fr auto; }
  .wall-feed-row .wall-feed-type { display: none; }
}

/* Status page */
.status-hero {
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  margin-bottom: var(--space-5);
  text-align: center;
}
.status-hero-green {
  background: rgba(33, 201, 122, 0.08);
  border: 1px solid var(--color-feedback-success-green);
}
.status-hero-amber {
  background: rgba(245, 165, 36, 0.08);
  border: 1px solid var(--color-feedback-warning-amber);
}
.status-headline {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  font-size: var(--type-size-xl);
  font-weight: var(--type-weight-bold);
}
.status-hero-green .status-headline-dot { color: var(--color-feedback-success-green); }
.status-hero-amber .status-headline-dot { color: var(--color-feedback-warning-amber); }
.status-list { display: flex; flex-direction: column; gap: 8px; }
.status-row {
  display: grid;
  grid-template-columns: 30px 1fr auto auto;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-background-surface);
  border-radius: var(--radius-md);
  align-items: center;
}
.status-row-ok .status-dot { color: var(--color-feedback-success-green); }
.status-row-warn .status-dot { color: var(--color-feedback-warning-amber); }
.status-status { font-weight: var(--type-weight-medium); }
.status-row-ok .status-status { color: var(--color-feedback-success-green); }
.status-row-warn .status-status { color: var(--color-feedback-warning-amber); }
.status-sub { font-size: var(--type-size-xs); }

/* Docs list */
.docs-list { list-style: none; padding: 0; margin: 0; }
.doc-row {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-subtle);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.doc-row a {
  color: var(--color-text-primary);
  text-decoration: none;
  font-weight: var(--type-weight-medium);
  font-size: var(--type-size-base);
}
.doc-row a:hover { color: var(--color-brand-lavender-strong); }
.markdown-content h1 { margin-top: var(--space-6); }
.markdown-content h2 { margin-top: var(--space-5); color: var(--color-brand-lavender); }
.markdown-content h3 { margin-top: var(--space-4); }
.markdown-content code { background: var(--color-background-surface); padding: 2px 6px; border-radius: 4px; font-family: ui-monospace, monospace; font-size: 0.92em; }
.markdown-content table { border-collapse: collapse; margin: var(--space-3) 0; }
.markdown-content table td, .markdown-content table th { padding: 6px 12px; border: 1px solid var(--color-border-subtle); }

/* Cost chart stats row */
.chart-meta {
  display: flex;
  gap: var(--space-5);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.chart-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.chart-stat-label {
  font-size: var(--type-size-xs);
  color: var(--color-text-muted);
  letter-spacing: var(--type-letter-spacing-label);
  text-transform: uppercase;
}
.chart-stat strong {
  font-size: var(--type-size-lg);
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
}

/* CP-box paste rendering */
.cp-box {
  background: linear-gradient(135deg, rgba(164, 165, 248, 0.08), rgba(79, 70, 229, 0.04));
  border: 1px solid var(--color-brand-lavender);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin: var(--space-3) 0;
}
.cp-box-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: var(--type-size-sm);
  flex-wrap: wrap;
}
.cp-box-badge {
  background: var(--color-brand-lavender);
  color: var(--color-background-app-dark);
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-weight: var(--type-weight-medium);
  font-size: var(--type-size-xs);
  letter-spacing: var(--type-letter-spacing-label);
  text-transform: uppercase;
}
.cp-box-from, .cp-box-to {
  font-weight: var(--type-weight-medium);
  color: var(--color-text-primary);
}
.cp-box-arrow {
  color: var(--color-brand-lavender-strong);
  font-weight: bold;
}
.cp-box-body {
  font-family: ui-monospace, 'SF Mono', monospace;
  font-size: var(--type-size-sm);
  line-height: var(--type-line-height-relaxed);
  white-space: pre-wrap;
  word-wrap: break-word;
  color: var(--text-secondary);
  margin: 0;
}

/* Audit log */
.audit-controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.audit-controls .search-input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--color-background-surface);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  font: inherit;
  font-size: var(--type-size-base);
  outline: none;
  transition: border-color var(--motion-duration-fast);
}
.audit-controls .search-input:focus { border-color: var(--color-brand-lavender); }
.audit-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
mark { background: rgba(245, 165, 36, 0.4); color: var(--color-text-primary); border-radius: 2px; padding: 0 2px; }
.audit-tab {
  cursor: pointer;
  font: inherit;
}
.audit-tab.active {
  background: var(--color-brand-lavender);
  color: var(--color-background-app-dark);
  border-color: var(--color-brand-lavender);
}
.audit-list { list-style: none; padding: 0; }
.audit-row {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  background: var(--color-background-surface);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
}
.audit-row-head {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  margin-bottom: 4px;
}
.audit-type {
  font-size: var(--type-size-xs);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-weight: var(--type-weight-medium);
}
.audit-type-decision { background: rgba(164, 165, 248, 0.2); color: var(--color-brand-lavender); }
.audit-type-escalation { background: rgba(239, 68, 68, 0.15); color: var(--color-feedback-error-red); }
.audit-type-watchdog-dispatch { background: rgba(245, 165, 36, 0.15); color: var(--color-feedback-warning-amber); }
.audit-type-self-directed-work { background: rgba(33, 201, 122, 0.15); color: var(--color-feedback-success-green); }
.audit-time { color: var(--color-text-muted); font-size: var(--type-size-xs); margin-left: auto; }
.audit-agent-link { color: var(--color-text-secondary); text-decoration: none; font-weight: var(--type-weight-medium); }
.audit-agent-link:hover { color: var(--color-brand-lavender-strong); }
.audit-links {
  margin-top: 6px;
  display: flex;
  gap: 12px;
  font-size: var(--type-size-xs);
}
.audit-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  color: var(--color-text-muted);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-subtle);
  transition: color var(--motion-duration-fast), border-color var(--motion-duration-fast);
}
.audit-link:hover {
  color: var(--color-brand-cream, #FDE68A);
  border-color: color-mix(in oklab, var(--color-brand-cream, #FDE68A) 40%, transparent);
}
.audit-json-btn {
  background: transparent;
  border: 1px solid var(--color-border-default);
  color: var(--color-text-secondary);
  font-family: ui-monospace, monospace;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 8px;
}
.audit-json-btn:hover { color: var(--color-brand-lavender-strong); border-color: var(--color-brand-lavender); }
.audit-json {
  margin-top: var(--space-2);
  background: var(--color-background-app-dark);
  color: var(--color-text-secondary);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  font-family: ui-monospace, monospace;
  font-size: var(--type-size-xs);
  overflow: auto;
  max-height: 400px;
}
.audit-title { font-weight: var(--type-weight-medium); }
.audit-summary { color: var(--text-secondary); font-size: var(--type-size-sm); margin-top: 4px; }

/* Search UI */
.search-form {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  align-items: stretch;
}
.search-form input[type="text"] {
  flex: 1;
  background: var(--color-background-surface);
  border: 1px solid var(--color-border-default);
  color: var(--text-primary);
  border-radius: var(--radius-pill);
  padding: 12px 20px;
  font: inherit;
  font-size: var(--type-size-base);
}
.search-form input[type="text"]:focus {
  outline: none; border-color: var(--color-brand-lavender);
  box-shadow: var(--shadow-focus);
}
.search-form select {
  background: var(--color-background-surface);
  color: var(--text-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-pill);
  padding: 10px 16px;
  font: inherit;
}
.search-list { list-style: none; padding: 0; }
.search-item {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border-subtle);
}
.search-head {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  margin-bottom: 4px;
}
.search-sim {
  background: var(--color-background-tint-lavender-strong);
  color: var(--color-brand-lavender);
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--type-size-xs);
  font-weight: var(--type-weight-bold);
  font-variant-numeric: tabular-nums;
}
.search-meta { color: var(--text-secondary); font-size: var(--type-size-sm); }
.search-date { color: var(--color-text-muted); font-size: var(--type-size-xs); margin-left: auto; }
.search-title { font-weight: var(--type-weight-medium); margin-bottom: 4px; }
.search-body { color: var(--text-secondary); font-size: var(--type-size-sm); }

/* Trace timeline */
.trace-summary {
  background: var(--color-background-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-6);
}
.trace-summary-title {
  font-size: var(--type-size-lg);
  margin-bottom: var(--space-3);
}
.trace-chain {
  margin-top: var(--space-4);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.chain-agent {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--color-background-tint-lavender-strong);
  color: var(--color-brand-lavender-strong);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: var(--type-size-sm);
  font-weight: var(--type-weight-medium);
  animation: chainPop var(--motion-duration-base) var(--motion-easing-spring);
}
html[data-theme="dark"] .chain-agent {
  background: rgba(164, 165, 248, 0.12);
  color: var(--color-brand-lavender);
}
.chain-arrow {
  color: var(--color-text-muted);
  font-size: var(--type-size-base);
}
.chain-label { font-weight: var(--type-weight-semibold); }
@keyframes chainPop {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1); }
}
.trace-meta { color: var(--text-secondary); font-size: var(--type-size-sm); margin-top: 6px; }
.trace-timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}
.trace-timeline::before {
  content: '';
  position: absolute;
  left: 90px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--color-border-default);
}
.trace-item {
  display: flex;
  gap: var(--space-5);
  padding: var(--space-3) 0;
  position: relative;
}
.trace-time {
  width: 80px;
  flex-shrink: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
  font-size: var(--type-size-xs);
  padding-top: 4px;
}
.trace-item::before {
  content: '';
  position: absolute;
  left: 86px;
  top: 12px;
  width: 9px;
  height: 9px;
  border-radius: var(--radius-pill);
  background: var(--color-brand-lavender);
}
.trace-task::before { background: var(--color-feedback-warning-amber); }
.trace-body { flex: 1; padding-left: var(--space-4); }
.trace-head { display: flex; gap: var(--space-2); align-items: center; margin-bottom: 4px; }
.trace-kind {
  font-size: var(--type-size-xs);
  background: var(--color-background-surface-alt);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
}
.trace-agent { font-weight: var(--type-weight-semibold); }
.trace-title { font-size: var(--type-size-base); }
.trace-summary-text { color: var(--text-secondary); font-size: var(--type-size-sm); margin-top: 4px; }

/* Settings */
.settings-section {
  background: var(--color-background-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-5);
}
.settings-section h2 { margin-bottom: var(--space-3); }
.muted { color: var(--text-secondary); margin-bottom: var(--space-4); }
.me-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.me-chips { margin-top: var(--space-3); display: flex; flex-wrap: wrap; }

/* Admin */
.admin-pre {
  background: var(--color-background-app-dark);
  color: var(--text-primary);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  font-family: var(--type-family-mono);
  font-size: var(--type-size-xs);
  overflow-x: auto;
  max-height: 400px;
  white-space: pre-wrap;
  word-break: break-all;
}
.rule-item {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-subtle);
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.rule-item:last-child { border-bottom: none; }

.user-row {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-subtle);
  list-style: none;
}
.user-row:last-child { border-bottom: none; }
.user-row-head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 4px;
}
.user-row-meta {
  font-size: var(--type-size-sm);
  margin-bottom: 6px;
}
.user-row-allowlist {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

#backlog-agent, #backlog-textarea {
  width: 100%;
  margin-top: var(--space-3);
  background: var(--color-background-surface-alt);
  color: var(--text-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font: inherit;
}
#backlog-textarea { resize: vertical; min-height: 200px; font-family: var(--type-family-mono); font-size: var(--type-size-sm); }
#save-backlog { margin-top: var(--space-3); }

/* Errors + empty */
.error {
  background: rgba(239,68,68,0.1);
  color: var(--color-feedback-error-red);
  padding: var(--space-4);
  border-radius: var(--radius-md);
}
.not-found {
  padding: var(--space-12);
  text-align: center;
  color: var(--color-text-muted);
}

/* Mercury 404 */
.not-found-shell {
  min-height: 60vh;
  display: grid;
  place-items: center;
  text-align: center;
}
.not-found-mark {
  width: 96px; height: 96px;
  border-radius: var(--radius-2xl);
  background: linear-gradient(135deg, var(--color-brand-lavender), var(--color-brand-indigo));
  margin: 0 auto var(--space-6);
  display: grid; place-items: center;
  color: white; font-size: 40px; font-weight: 700;
}
.not-found-title { font-size: var(--type-size-3xl); font-weight: var(--type-weight-bold); margin-bottom: var(--space-3); }
.not-found-msg { color: var(--text-secondary); margin-bottom: var(--space-6); }

/* Loading skeleton */
.skeleton {
  display: inline-block;
  background: linear-gradient(90deg,
    var(--color-background-surface-alt) 0%,
    var(--color-background-surface) 50%,
    var(--color-background-surface-alt) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
  min-height: 1em;
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton.kpi { width: 200px; height: 1.2em; }
.skeleton.sub { width: 280px; height: 0.9em; margin-top: 8px; }

/* ── Founder-iPhone (≤480px) fixes — cc-v2 home/fleet (Walton 7/2, task a0e3e5cd) ── */
@media (max-width: 480px) {
  /* (1) Kill the ~300px top gap: the hero has min-height:calc(100vh-200px) + justify-content:center
     (a splash lockup) which fills the phone viewport and shoves the grid below the fold. Collapse it. */
  .home-hero { min-height: 0 !important; justify-content: flex-start !important; gap: 4px !important;
    padding: var(--space-2, 8px) 0 var(--space-1, 4px) !important; }
  .home-hero-mark svg { width: 40px; height: 40px; }
  .home-hero-wordmark { margin: 2px 0 0; line-height: 1.1; }
  .home-hero-wordmark .wm-line1 { font-size: 1.05rem; }
  .home-hero-wordmark .wm-line2 { font-size: 0.72rem; }
  .home-hero-fleet-label { font-size: var(--type-size-xs, 11px); }
  .fleet-flow { margin-top: var(--space-2, 8px); }
  .fleet-flow-connector { display: none; } /* decorative wide-layout connector — noise on a 2-col phone grid */
  /* (3) Bottom clearance so the fixed "Install CtOS" banner (bottom:72px) never covers the fleet stats */
  #app.shell { padding-bottom: calc(150px + env(safe-area-inset-bottom)) !important; }

  /* (2) Clean 2-column fleet grid that fits the viewport — kills the cut-off 3rd column */
  .fleet-flow-l1 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: var(--space-2, 8px); }
  .fleet-flow-node { min-width: 0; max-width: 100%; overflow: hidden; }
  .fleet-flow-name,
  .fleet-flow-task { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Detailed /agents cards: let children shrink + status text ellipsis (belt-and-suspenders) */
  .agent-card, .agent-card-body { min-width: 0; }
  .agent-card-role, .nw-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

  /* (3) Never allow horizontal scroll on the internal dashboard */
  html, body { overflow-x: hidden; }
}

/* Touch targets — Apple HIG 44px minimum on touch devices (abfa83e1 polish 7/2).
   Hit areas expand invisibly (padding-negative-margin or ::after overlays);
   visual sizes are unchanged. Scoped to coarse pointers so desktop is untouched. */
@media (pointer: coarse) {
  /* Nav brand link measured 28x28 */
  .cc-nav-brand { padding: 10px; margin: -10px; }
  /* Chat chips ("Clear", "Copy") measured ~27px tall; copy-message icon 24x24 */
  .chat-header .chip, .chip.copy-tool, .bubble-copy { position: relative; }
  .chat-header .chip::after, .chip.copy-tool::after, .bubble-copy::after {
    content: '';
    position: absolute;
    inset: -10px;
  }
  /* Feed "Include heartbeats" row measured 16px tall with a 13px checkbox */
  .filter-check { padding: 12px 0; }
  .filter-check input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--color-brand-lavender); }
}

/* ── Needs Review cards — CTAI card system (task 065df696, Tirone 7/8) ───────── */
.nr-empty { padding: 34px 18px; text-align: center; color: var(--color-text-muted, #888B9E); font-size: 14px; border: 1px dashed var(--color-border-subtle, rgba(148,163,184,0.2)); border-radius: 16px; }
.nr-card {
  background: var(--color-background-surface-card, #14161F);
  border: 1px solid var(--color-border-subtle, rgba(148,163,184,0.16));
  border-radius: 16px; padding: 15px 16px 14px; margin-bottom: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.18);
  transition: border-color .15s ease;
}
.nr-card:hover { border-color: var(--color-border-default, rgba(148,163,184,0.32)); }
.nr-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; flex-wrap: wrap; }
.nr-chip {
  font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; color: #C8CEDA;
  background: rgba(148,163,184,0.12); border: 1px solid var(--color-border-subtle, rgba(148,163,184,0.18));
}
.nr-chip-infrastructure-change { color: #F0C4A8; background: rgba(240,196,168,.12); border-color: rgba(240,196,168,.30); }
.nr-chip-spend-over-threshold { color: #F0DCA8; background: rgba(240,220,168,.12); border-color: rgba(240,220,168,.30); }
.nr-chip-mass-delete, .nr-chip-regulatory-comm, .nr-chip-mass-public-post, .nr-chip-other-catastrophic { color: #E8AFB4; background: rgba(232,175,180,.12); border-color: rgba(232,175,180,.30); }
.nr-prio { font-size: 10px; font-weight: 800; letter-spacing: .05em; padding: 2px 7px; border-radius: 6px; }
.nr-prio-p0 { color: #FCA5A5; background: rgba(252,165,165,.14); }
.nr-prio-p1 { color: #A5B4FC; background: rgba(165,180,252,.14); }
.nr-who { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--color-brand-lavender, #A5B4FC); }
.nr-title { font-weight: 640; font-size: 15px; color: var(--text-primary, #E6E4F0); line-height: 1.38; }
.nr-meaning { color: var(--color-text-muted, #9AA0AD); font-size: 13px; margin-top: 6px; line-height: 1.5; }
.nr-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.nr-btn { flex: 1; min-width: 96px; border: none; border-radius: 10px; padding: 11px 10px; font-weight: 650; font-size: 13.5px; cursor: pointer; transition: filter .15s ease, background .15s ease; }
.nr-btn:disabled { opacity: .7; cursor: default; }
.nr-accept { background: #2F7D55; color: #fff; }
.nr-accept:hover:not(:disabled) { filter: brightness(1.09); }
.nr-decline { background: #C4553B; color: #fff; }
.nr-decline:hover:not(:disabled) { filter: brightness(1.09); }
.nr-walton { flex: 1.35; background: transparent; color: var(--text-primary, #E6E4F0); border: 1px solid var(--color-border-default, rgba(148,163,184,0.32)); }
.nr-walton:hover:not(:disabled) { background: rgba(148,163,184,0.08); }
/* Section labels + read-only escalation-awareness tier (P0 56a5fb75) */
.nr-section-label { font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--color-text-muted, #888B9E); margin: 0 0 10px 2px; }
.nr-esc-card {
  background: var(--color-background-surface-card, #14161F);
  border: 1px solid var(--color-border-subtle, rgba(148,163,184,0.16));
  border-left: 3px solid var(--color-feedback-warning-amber, #F5A524);
  border-radius: 14px; padding: 12px 14px; margin-bottom: 10px;
}
.nr-esc-flagged { border-left-color: var(--color-feedback-error-red, #EF4444); background: rgba(239,68,68,0.05); }
.nr-esc-head { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; flex-wrap: wrap; }
.nr-esc-tag { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; color: var(--color-feedback-warning-amber, #F5A524); background: rgba(245,165,36,.12); border: 1px solid rgba(245,165,36,.28); }
.nr-esc-tag-you { color: var(--color-feedback-error-red, #EF4444); background: rgba(239,68,68,.14); border-color: rgba(239,68,68,.34); }
.nr-esc-urg { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-muted, #9AA0AD); }
.nr-esc-urg[data-urgency="high"] { color: #FCA5A5; }
.nr-esc-urg[data-urgency="critical"] { color: #FCA5A5; }
.nr-esc-who { font-size: 12px; font-weight: 600; color: var(--color-brand-lavender, #A5B4FC); }
.nr-esc-time { margin-left: auto; font-size: 11px; color: var(--color-text-muted, #888B9E); }
.nr-esc-title { font-weight: 620; font-size: 14px; color: var(--text-primary, #E6E4F0); line-height: 1.4; }
.nr-esc-detail { margin-top: 6px; }
.nr-esc-detail > summary { cursor: pointer; font-size: 12px; color: var(--color-brand-lavender, #A5B4FC); }
.nr-esc-summary { margin-top: 6px; font-size: 12.5px; color: var(--color-text-muted, #9AA0AD); line-height: 1.5; }
.nr-esc-resolve { flex: 0 0 auto; min-width: 120px; background: transparent; color: var(--text-primary, #E6E4F0); border: 1px solid var(--color-border-default, rgba(148,163,184,0.32)); }
.nr-esc-resolve:hover:not(:disabled) { background: rgba(148,163,184,0.08); }
/* Confirmation toast (Talk-to-Walton copy) */
.nr-toast {
  position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%) translateY(12px);
  background: #1B1E2A; color: #E6E4F0; border: 1px solid var(--color-border-default, #373A4D);
  border-radius: 12px; padding: 12px 18px; font-size: 13.5px; font-weight: 600;
  box-shadow: 0 8px 30px rgba(0,0,0,0.45); opacity: 0; pointer-events: none; z-index: 9999;
  transition: opacity .2s ease, transform .2s ease;
}
.nr-toast-show { opacity: 1; transform: translateX(-50%) translateY(0); }