/* Vibe Closing AI - Premium Design System & Styles */

:root {
  /* Theme Colors */
  --bg-deep: #070a0e;
  --bg-main: #0d1117;
  --bg-card: rgba(13, 17, 23, 0.65);
  --bg-card-hover: rgba(23, 30, 40, 0.85);
  --border-glass: rgba(255, 255, 255, 0.075);
  --border-glass-active: rgba(255, 255, 255, 0.14);
  
  /* Brand Highlights */
  --whatsapp: #25D366;
  --telegram: #0088cc;
  --facebook: #1877F2;
  --xhs: #FF2442;
  
  /* Functional Colors */
  --primary: #d8ff72;
  --primary-glow: rgba(216, 255, 114, 0.3);
  --text-main: #edf2f7;
  --text-muted: #7f8a99;
  --text-dark: #070a0e;
  --success: #34d399;
  --warning: #fbbf24;
  --danger: #f87171;
  
  /* Font Families */
  --font-sans: 'Segoe UI Variable', 'Aptos', 'Segoe UI', sans-serif;
  --font-display: 'Segoe UI Variable Display', 'Aptos', 'Segoe UI', sans-serif;
  --font-mono: 'Cascadia Mono', 'Consolas', 'Courier New', monospace;

  --ease-rise: cubic-bezier(0.16, 1, 0.3, 1);
  --transition: all 0.3s var(--ease-rise);

  /* ---------------------------------------------------------------
     ONEAI DESIGN SYSTEM v1 � Tokens
     --------------------------------------------------------------- */

  /* -- Color Roles ------------------------------------------------ */
  --ds-bg: var(--bg-deep);
  --ds-bg-elevated: var(--bg-main);
  --ds-surface: var(--bg-card);
  --ds-surface-secondary: rgba(13, 26, 48, 0.45);
  --ds-surface-hover: var(--bg-card-hover);
  --ds-border: var(--border-glass);
  --ds-border-active: var(--border-glass-active);
  --ds-primary: var(--primary);
  --ds-primary-rgb: 216, 255, 114;
  --ds-primary-glow: var(--primary-glow);
  --ds-success: var(--success);
  --ds-success-rgb: 52, 211, 153;
  --ds-warning: var(--warning);
  --ds-warning-rgb: 251, 191, 36;
  --ds-danger: var(--danger);
  --ds-danger-rgb: 248, 113, 113;
  --ds-muted: var(--text-muted);
  --ds-text: var(--text-main);
  --ds-text-dark: var(--text-dark);

  /* -- Purple Accent (Nova / AI) ---------------------------------- */
  --ds-purple: #7c3aed;
  --ds-purple-rgb: 124, 58, 237;
  --ds-purple-light: #a78bfa;
  --ds-purple-glow: rgba(124, 58, 237, 0.3);

  /* -- Info ------------------------------------------------------- */
  --ds-info: #3b82f6;
  --ds-info-rgb: 59, 130, 246;

  /* -- Typography Scale ------------------------------------------- */
  --ds-font-display: var(--font-display);
  --ds-font-body: var(--font-sans);
  --ds-font-mono: var(--font-mono);
  --ds-text-xs: 10px;
  --ds-text-sm: 11px;
  --ds-text-base: 13px;
  --ds-text-md: 14px;
  --ds-text-lg: 16px;
  --ds-text-xl: 18px;
  --ds-text-2xl: 22px;
  --ds-text-3xl: 28px;
  --ds-weight-normal: 400;
  --ds-weight-medium: 500;
  --ds-weight-semibold: 600;
  --ds-weight-bold: 700;
  --ds-weight-extrabold: 800;
  --ds-leading-tight: 1.2;
  --ds-leading-normal: 1.5;
  --ds-leading-relaxed: 1.6;

  /* -- Spacing Scale ---------------------------------------------- */
  --ds-space-2xs: 2px;
  --ds-space-xs: 4px;
  --ds-space-sm: 8px;
  --ds-space-md: 12px;
  --ds-space-lg: 16px;
  --ds-space-xl: 20px;
  --ds-space-2xl: 24px;
  --ds-space-3xl: 32px;
  --ds-space-4xl: 40px;

  /* -- Border Radius ---------------------------------------------- */
  --ds-radius-sm: 4px;
  --ds-radius-md: 6px;
  --ds-radius-lg: 8px;
  --ds-radius-xl: 12px;
  --ds-radius-2xl: 16px;
  --ds-radius-panel: 20px;
  --ds-radius-pill: 999px;

  /* -- Shadows ---------------------------------------------------- */
  --ds-shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.2);
  --ds-shadow-card: 0 4px 12px rgba(0, 0, 0, 0.25);
  --ds-shadow-floating: 0 8px 30px rgba(0, 0, 0, 0.4);
  --ds-shadow-glow-primary: 0 4px 16px rgba(216, 201, 158, 0.2);
  --ds-shadow-glow-purple: 0 4px 16px rgba(124, 58, 237, 0.25);
  --ds-shadow-glow-success: 0 0 10px rgba(52, 211, 153, 0.4);
  --ds-shadow-glow-danger: 0 0 10px rgba(248, 113, 113, 0.4);

  /* -- Transitions ------------------------------------------------ */
  --ds-transition-fast: 0.15s ease;
  --ds-transition-base: 0.2s ease;
  --ds-transition-slow: 0.3s var(--ease-rise);
  --ds-transition-expand: 0.25s var(--ease-rise);

  /* -- Z-Index Scale ---------------------------------------------- */
  --ds-z-base: 0;
  --ds-z-dropdown: 100;
  --ds-z-sticky: 200;
  --ds-z-overlay: 500;
  --ds-z-modal: 1000;
  --ds-z-toast: 1500;

  /* -------------------------------------------------------------------
     ONEAI DESIGN SYSTEM 2.0 � Extended Tokens
     Extracted from Mission Control visual language.
     All pages must consume these tokens � not raw values.
     ------------------------------------------------------------------- */

  /* -- Typography Extensions ---------------------------------------- */
  --ds-text-sm-plus: 12px;
  --ds-text-4xl: 36px;
  --ds-leading-none: 1;

  /* -- Spacing Extensions ------------------------------------------- */
  --ds-space-5xl: 48px;
  --ds-space-6xl: 72px;

  /* -- Border Radius Extensions ------------------------------------- */
  --ds-radius-md-lg: 10px;
  --ds-radius-3xl: 32px;

  /* -- Shadow Extensions -------------------------------------------- */
  --ds-shadow-focus: 0 0 0 3px rgba(216, 201, 158, 0.08);
  --ds-shadow-glow-warning: 0 0 10px rgba(251, 191, 36, 0.7);
  --ds-shadow-hover-lift: 0 2px 8px rgba(0, 0, 0, 0.08);
  --ds-shadow-hover-strong: 0 4px 16px rgba(0, 0, 0, 0.12);

  /* -- Surface Extensions ------------------------------------------- */
  --ds-surface-raised: rgba(13, 17, 23, 0.75);
  --ds-surface-overlay: rgba(7, 10, 14, 0.85);
  --ds-white: #fff;

  /* -- Overlay Composites ------------------------------------------- */
  --ds-overlay-dark: rgba(0, 0, 0, 0.5);
  --ds-overlay-heavy: rgba(0, 0, 0, 0.7);
  --ds-overlay-light: rgba(255, 255, 255, 0.05);
  --ds-overlay-subtle: rgba(255, 255, 255, 0.03);

  /* -- Tinted Background Composites (12�15% opacity) ---------------- */
  --ds-tint-primary: rgba(216, 201, 158, 0.12);
  --ds-tint-purple: rgba(124, 58, 237, 0.12);
  --ds-tint-info: rgba(59, 130, 246, 0.12);
  --ds-tint-success: rgba(52, 211, 153, 0.12);
  --ds-tint-warning: rgba(251, 191, 36, 0.12);
  --ds-tint-danger: rgba(248, 113, 113, 0.12);

  /* -- Tinted Text Composites --------------------------------------- */
  --ds-tint-primary-text: rgba(216, 201, 158, 0.8);
  --ds-tint-purple-text: rgba(167, 139, 250, 0.8);
  --ds-tint-info-text: rgba(59, 130, 246, 0.8);
  --ds-tint-success-text: rgba(52, 211, 153, 0.8);
  --ds-tint-warning-text: rgba(251, 191, 36, 0.8);
  --ds-tint-danger-text: rgba(248, 113, 113, 0.8);

  /* -- Hairline Border Composites ----------------------------------- */
  --ds-border-subtle: 1px solid rgba(255, 255, 255, 0.04);
  --ds-border-divider: 1px solid rgba(255, 255, 255, 0.06);

  /* -- Interaction Surfaces ----------------------------------------- */
  --ds-surface-interactive: rgba(255, 255, 255, 0.04);
  --ds-surface-interactive-hover: rgba(255, 255, 255, 0.06);
  --ds-surface-interactive-active: rgba(255, 255, 255, 0.08);

  /* -- Easing Extensions -------------------------------------------- */
  --ds-ease-standard: ease;
  --ds-ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
}

/* -------------------------------------------------------------------
   ONEAI DESIGN SYSTEM v1 � Components
   -------------------------------------------------------------------
   Reusable UI foundations. Do not modify existing classes.
   New pages should use these classes exclusively.
   ------------------------------------------------------------------- */

/* -- 1. Typography ------------------------------------------------ */
.ds-display {
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-3xl);
  font-weight: var(--ds-weight-extrabold);
  line-height: var(--ds-leading-tight);
  color: var(--ds-text);
  letter-spacing: -0.02em;
}
.ds-h1 {
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-2xl);
  font-weight: var(--ds-weight-bold);
  line-height: var(--ds-leading-tight);
  color: var(--ds-text);
}
.ds-h2 {
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-xl);
  font-weight: var(--ds-weight-bold);
  line-height: var(--ds-leading-tight);
  color: var(--ds-text);
}
.ds-h3 {
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-lg);
  font-weight: var(--ds-weight-semibold);
  line-height: var(--ds-leading-normal);
  color: var(--ds-text);
}
.ds-title {
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-md);
  font-weight: var(--ds-weight-semibold);
  line-height: var(--ds-leading-normal);
  color: var(--ds-text);
}
.ds-body {
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-base);
  font-weight: var(--ds-weight-normal);
  line-height: var(--ds-leading-relaxed);
  color: var(--ds-text);
}
.ds-body-sm {
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-normal);
  line-height: var(--ds-leading-relaxed);
  color: var(--ds-text);
}
.ds-caption {
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-medium);
  line-height: var(--ds-leading-normal);
  color: var(--ds-muted);
  letter-spacing: 0.02em;
}
.ds-label {
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-semibold);
  line-height: var(--ds-leading-normal);
  color: var(--ds-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ds-mono {
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-sm);
  line-height: var(--ds-leading-normal);
  color: var(--ds-text);
}
.ds-truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* -- 2. Spacing Utilities ----------------------------------------- */
.ds-mt-2xs { margin-top: var(--ds-space-2xs); }
.ds-mt-xs { margin-top: var(--ds-space-xs); }
.ds-mt-sm { margin-top: var(--ds-space-sm); }
.ds-mt-md { margin-top: var(--ds-space-md); }
.ds-mt-lg { margin-top: var(--ds-space-lg); }
.ds-mt-xl { margin-top: var(--ds-space-xl); }
.ds-mt-2xl { margin-top: var(--ds-space-2xl); }
.ds-mt-3xl { margin-top: var(--ds-space-3xl); }

.ds-mb-2xs { margin-bottom: var(--ds-space-2xs); }
.ds-mb-xs { margin-bottom: var(--ds-space-xs); }
.ds-mb-sm { margin-bottom: var(--ds-space-sm); }
.ds-mb-md { margin-bottom: var(--ds-space-md); }
.ds-mb-lg { margin-bottom: var(--ds-space-lg); }
.ds-mb-xl { margin-bottom: var(--ds-space-xl); }
.ds-mb-2xl { margin-bottom: var(--ds-space-2xl); }

.ds-p-sm { padding: var(--ds-space-sm); }
.ds-p-md { padding: var(--ds-space-md); }
.ds-p-lg { padding: var(--ds-space-lg); }
.ds-p-xl { padding: var(--ds-space-xl); }
.ds-p-2xl { padding: var(--ds-space-2xl); }
.ds-p-3xl { padding: var(--ds-space-3xl); }

.ds-px-sm { padding-left: var(--ds-space-sm); padding-right: var(--ds-space-sm); }
.ds-px-md { padding-left: var(--ds-space-md); padding-right: var(--ds-space-md); }
.ds-px-lg { padding-left: var(--ds-space-lg); padding-right: var(--ds-space-lg); }
.ds-px-xl { padding-left: var(--ds-space-xl); padding-right: var(--ds-space-xl); }
.ds-px-2xl { padding-left: var(--ds-space-2xl); padding-right: var(--ds-space-2xl); }

.ds-py-sm { padding-top: var(--ds-space-sm); padding-bottom: var(--ds-space-sm); }
.ds-py-md { padding-top: var(--ds-space-md); padding-bottom: var(--ds-space-md); }
.ds-py-lg { padding-top: var(--ds-space-lg); padding-bottom: var(--ds-space-lg); }
.ds-py-xl { padding-top: var(--ds-space-xl); padding-bottom: var(--ds-space-xl); }

.ds-gap-xs { gap: var(--ds-space-xs); }
.ds-gap-sm { gap: var(--ds-space-sm); }
.ds-gap-md { gap: var(--ds-space-md); }
.ds-gap-lg { gap: var(--ds-space-lg); }
.ds-gap-xl { gap: var(--ds-space-xl); }
.ds-gap-2xl { gap: var(--ds-space-2xl); }

/* -- 3. Flex / Grid Utilities ------------------------------------- */
.ds-flex { display: flex; }
.ds-flex-col { display: flex; flex-direction: column; }
.ds-flex-row { display: flex; flex-direction: row; }
.ds-flex-wrap { flex-wrap: wrap; }
.ds-flex-1 { flex: 1; }
.ds-flex-none { flex: none; }
.ds-items-center { align-items: center; }
.ds-items-start { align-items: flex-start; }
.ds-items-end { align-items: flex-end; }
.ds-justify-between { justify-content: space-between; }
.ds-justify-center { justify-content: center; }
.ds-justify-end { justify-content: flex-end; }
.ds-self-center { align-self: center; }
.ds-grid { display: grid; }
.ds-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); }
.ds-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); }
.ds-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); }
.ds-w-full { width: 100%; }
.ds-h-full { height: 100%; }
.ds-hidden { display: none; }
.ds-block { display: block; }
.ds-relative { position: relative; }
.ds-absolute { position: absolute; }
.ds-overflow-hidden { overflow: hidden; }
.ds-overflow-auto { overflow: auto; }
.ds-overflow-y-auto { overflow-y: auto; }
.ds-cursor-pointer { cursor: pointer; }
.ds-select-none { user-select: none; }
.ds-text-center { text-align: center; }
.ds-text-right { text-align: right; }

/* -- 4. Buttons --------------------------------------------------- */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-sm);
  padding: var(--ds-space-sm) var(--ds-space-lg);
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-base);
  font-weight: var(--ds-weight-semibold);
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--ds-radius-lg);
  cursor: pointer;
  transition: all var(--ds-transition-base);
  white-space: nowrap;
  user-select: none;
}
.ds-btn:active { transform: scale(0.97); }
.ds-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.ds-btn-primary {
  background: var(--ds-primary);
  color: var(--ds-text-dark);
  border-color: var(--ds-primary);
}
.ds-btn-primary:hover {
  box-shadow: var(--ds-shadow-glow-primary);
  filter: brightness(1.08);
}

.ds-btn-secondary {
  background: var(--ds-surface);
  color: var(--ds-text);
  border-color: var(--ds-border);
}
.ds-btn-secondary:hover {
  background: var(--ds-surface-hover);
  border-color: var(--ds-border-active);
}

.ds-btn-ghost {
  background: transparent;
  color: var(--ds-muted);
  border-color: transparent;
}
.ds-btn-ghost:hover {
  background: var(--ds-overlay-light);
  color: var(--ds-text);
}

.ds-btn-danger {
  background: rgba(248, 113, 113, 0.12);
  color: var(--ds-danger);
  border-color: rgba(248, 113, 113, 0.25);
}
.ds-btn-danger:hover {
  background: rgba(248, 113, 113, 0.2);
  box-shadow: var(--ds-shadow-glow-danger);
}

.ds-btn-purple {
  background: var(--ds-purple);
  color: #fff;
  border-color: var(--ds-purple);
}
.ds-btn-purple:hover {
  box-shadow: var(--ds-shadow-glow-purple);
  filter: brightness(1.1);
}

.ds-btn-success {
  background: rgba(52, 211, 153, 0.15);
  color: var(--ds-success);
  border-color: rgba(52, 211, 153, 0.3);
}
.ds-btn-success:hover {
  background: rgba(52, 211, 153, 0.22);
  box-shadow: var(--ds-shadow-glow-success);
}

.ds-btn-sm {
  padding: var(--ds-space-xs) var(--ds-space-md);
  font-size: var(--ds-text-sm);
  border-radius: var(--ds-radius-md);
}

.ds-btn-lg {
  padding: var(--ds-space-md) var(--ds-space-xl);
  font-size: var(--ds-text-md);
  border-radius: var(--ds-radius-xl);
}

.ds-btn-pill {
  border-radius: var(--ds-radius-pill);
}

.ds-btn-icon {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: var(--ds-radius-lg);
}

.ds-btn-icon-sm {
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: var(--ds-radius-md);
  font-size: var(--ds-text-sm);
}

.ds-btn-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.ds-btn-loading::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid var(--ds-border);
  border-top-color: var(--ds-primary);
  border-radius: 50%;
  animation: ds-spin 0.6s linear infinite;
}

/* -- 5. Cards ----------------------------------------------------- */
.ds-card {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-xl);
  padding: var(--ds-space-2xl);
  transition: all var(--ds-transition-base);
}
.ds-card:hover {
  border-color: var(--ds-border-active);
}
.ds-card-compact {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  padding: var(--ds-space-md);
  transition: all var(--ds-transition-base);
}
.ds-card-secondary {
  background: var(--ds-surface-secondary);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-xl);
  padding: var(--ds-space-lg);
}
.ds-card-status {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  padding: var(--ds-space-md) var(--ds-space-lg);
  display: flex;
  align-items: center;
  gap: var(--ds-space-md);
}
.ds-card-hero {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.12), rgba(216, 201, 158, 0.08));
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-2xl);
  padding: var(--ds-space-3xl);
}
.ds-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--ds-space-lg);
}
.ds-card-title {
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-md);
  font-weight: var(--ds-weight-semibold);
  color: var(--ds-text);
}
.ds-card-body {
  color: var(--ds-muted);
  font-size: var(--ds-text-base);
  line-height: var(--ds-leading-relaxed);
}

/* -- 6. Status & Badges ------------------------------------------- */
.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-xs);
  padding: 2px 8px;
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-semibold);
  line-height: 1.4;
  border-radius: var(--ds-radius-pill);
  white-space: nowrap;
}
.ds-badge-online {
  background: rgba(52, 211, 153, 0.15);
  color: var(--ds-success);
}
.ds-badge-working {
  background: rgba(59, 130, 246, 0.15);
  color: var(--ds-info);
}
.ds-badge-waiting {
  background: rgba(251, 191, 36, 0.15);
  color: var(--ds-warning);
}
.ds-badge-offline {
  background: rgba(139, 155, 180, 0.15);
  color: var(--ds-muted);
}
.ds-badge-error {
  background: rgba(248, 113, 113, 0.15);
  color: var(--ds-danger);
}
.ds-badge-completed {
  background: rgba(52, 211, 153, 0.15);
  color: var(--ds-success);
}
.ds-badge-processing {
  background: rgba(124, 58, 237, 0.15);
  color: var(--ds-purple-light);
}
.ds-badge-neutral {
  background: rgba(139, 155, 180, 0.12);
  color: var(--ds-muted);
}

.ds-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ds-dot-online { background: var(--ds-success); box-shadow: 0 0 6px rgba(52, 211, 153, 0.5); }
.ds-dot-working { background: var(--ds-info); box-shadow: 0 0 6px rgba(59, 130, 246, 0.5); }
.ds-dot-waiting { background: var(--ds-warning); }
.ds-dot-offline { background: var(--ds-muted); }
.ds-dot-error { background: var(--ds-danger); box-shadow: 0 0 6px rgba(248, 113, 113, 0.5); }

.ds-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-medium);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  color: var(--ds-text);
}

/* -- 7. Panels & Layout ------------------------------------------- */
.ds-panel {
  background: var(--ds-bg-elevated);
  border: 1px solid var(--ds-border);
  border-radius: 20px;
}
.ds-panel-content {
  padding: var(--ds-space-2xl);
}
.ds-panel-header {
  padding: var(--ds-space-lg) var(--ds-space-2xl);
  border-bottom: 1px solid var(--ds-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ds-section {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-lg);
}
.ds-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ds-divider {
  border: none;
  border-top: 1px solid var(--ds-border);
  margin: 0;
}

/* -- 8. Inputs ---------------------------------------------------- */
.ds-input {
  width: 100%;
  padding: var(--ds-space-sm) var(--ds-space-md);
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-base);
  color: var(--ds-text);
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  transition: border-color var(--ds-transition-fast), box-shadow var(--ds-transition-fast);
  outline: none;
}
.ds-input::placeholder {
  color: var(--ds-muted);
}
.ds-input:focus {
  border-color: var(--ds-border-active);
  box-shadow: 0 0 0 3px rgba(216, 201, 158, 0.08);
}

.ds-textarea {
  width: 100%;
  padding: var(--ds-space-md);
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-base);
  color: var(--ds-text);
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  resize: vertical;
  min-height: 80px;
  transition: border-color var(--ds-transition-fast);
  outline: none;
}
.ds-textarea:focus {
  border-color: var(--ds-border-active);
  box-shadow: 0 0 0 3px rgba(216, 201, 158, 0.08);
}

.ds-select {
  width: 100%;
  padding: var(--ds-space-sm) var(--ds-space-md);
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-base);
  color: var(--ds-text);
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  appearance: none;
  cursor: pointer;
  outline: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%238b9bb4' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
}
.ds-select:focus {
  border-color: var(--ds-border-active);
}

.ds-toggle {
  position: relative;
  width: 40px;
  height: 22px;
  background: rgba(139, 155, 180, 0.25);
  border-radius: var(--ds-radius-pill);
  cursor: pointer;
  transition: background var(--ds-transition-fast);
  flex-shrink: 0;
}
.ds-toggle::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform var(--ds-transition-fast);
}
.ds-toggle.active {
  background: var(--ds-primary);
}
.ds-toggle.active::after {
  transform: translateX(18px);
}

.ds-checkbox {
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-surface);
  cursor: pointer;
  appearance: none;
  transition: all var(--ds-transition-fast);
  flex-shrink: 0;
}
.ds-checkbox:checked {
  background: var(--ds-primary);
  border-color: var(--ds-primary);
}
.ds-checkbox:checked::after {
  content: '?';
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--ds-text-dark);
  font-weight: 700;
}

.ds-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-xs);
}
.ds-form-label {
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-medium);
  color: var(--ds-muted);
}

.ds-search {
  position: relative;
}
.ds-search .ds-input {
  padding-left: 36px;
}
.ds-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ds-muted);
  pointer-events: none;
  font-size: var(--ds-text-base);
}

/* -- 9. Empty / Error / Loading States ---------------------------- */
.ds-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-md);
  padding: var(--ds-space-4xl) var(--ds-space-2xl);
  text-align: center;
}
.ds-empty-icon {
  font-size: 40px;
  line-height: 1;
  opacity: 0.6;
}
.ds-empty-title {
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-lg);
  font-weight: var(--ds-weight-semibold);
  color: var(--ds-text);
}
.ds-empty-desc {
  font-size: var(--ds-text-base);
  color: var(--ds-muted);
  max-width: 360px;
}

.ds-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-md);
  padding: var(--ds-space-4xl) var(--ds-space-2xl);
  text-align: center;
}
.ds-error-icon {
  font-size: 36px;
  line-height: 1;
}
.ds-error-title {
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-lg);
  font-weight: var(--ds-weight-semibold);
  color: var(--ds-danger);
}
.ds-error-desc {
  font-size: var(--ds-text-base);
  color: var(--ds-muted);
  max-width: 400px;
}

.ds-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-md);
  padding: var(--ds-space-4xl) var(--ds-space-2xl);
}
.ds-spinner {
  width: 24px;
  height: 24px;
  border: 2.5px solid var(--ds-border);
  border-top-color: var(--ds-primary);
  border-radius: 50%;
  animation: ds-spin 0.7s linear infinite;
}
.ds-spinner-sm {
  width: 14px;
  height: 14px;
  border-width: 2px;
}

/* Skeleton loading */
.ds-skeleton {
  background: linear-gradient(90deg, var(--ds-surface) 25%, rgba(255,255,255,0.04) 50%, var(--ds-surface) 75%);
  background-size: 200% 100%;
  animation: ds-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--ds-radius-lg);
}
.ds-skeleton-text {
  height: 12px;
  width: 100%;
  border-radius: var(--ds-radius-sm);
}
.ds-skeleton-text-sm {
  height: 10px;
  width: 60%;
  border-radius: var(--ds-radius-sm);
}
.ds-skeleton-heading {
  height: 18px;
  width: 40%;
  border-radius: var(--ds-radius-sm);
}
.ds-skeleton-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
.ds-skeleton-card {
  height: 100px;
  width: 100%;
}

@keyframes ds-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* -- 10. Animations ----------------------------------------------- */
@keyframes ds-spin {
  to { transform: rotate(360deg); }
}
@keyframes ds-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes ds-fade-in-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes ds-scale-in {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes ds-slide-down {
  from { opacity: 0; max-height: 0; }
  to { opacity: 1; max-height: 500px; }
}

.ds-animate-fade-in { animation: ds-fade-in 0.2s ease; }
.ds-animate-fade-in-up { animation: ds-fade-in-up 0.25s var(--ease-rise); }
.ds-animate-scale-in { animation: ds-scale-in 0.2s var(--ease-rise); }
.ds-animate-slide-down { animation: ds-slide-down 0.25s var(--ease-rise); }

.ds-hover-lift {
  transition: transform var(--ds-transition-base), box-shadow var(--ds-transition-base);
}
.ds-hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--ds-shadow-card);
}

.ds-focus-ring:focus-visible {
  outline: 2px solid var(--ds-primary);
  outline-offset: 2px;
}

.ds-transition-all { transition: all var(--ds-transition-base); }
.ds-transition-colors { transition: color var(--ds-transition-fast), background-color var(--ds-transition-fast), border-color var(--ds-transition-fast); }

/* -- 11. Icons ---------------------------------------------------- */
.ds-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ds-icon-xs { width: 12px; height: 12px; font-size: 12px; }
.ds-icon-sm { width: 16px; height: 16px; font-size: 16px; }
.ds-icon-md { width: 20px; height: 20px; font-size: 20px; }
.ds-icon-lg { width: 24px; height: 24px; font-size: 24px; }
.ds-icon-xl { width: 32px; height: 32px; font-size: 32px; }

/* -- 12. Utility: Colors ------------------------------------------ */
.ds-text-primary { color: var(--ds-primary); }
.ds-text-success { color: var(--ds-success); }
.ds-text-warning { color: var(--ds-warning); }
.ds-text-danger { color: var(--ds-danger); }
.ds-text-muted { color: var(--ds-muted); }
.ds-text-purple { color: var(--ds-purple-light); }
.ds-text-info { color: var(--ds-info); }
.ds-text-white { color: #fff; }

.ds-bg-primary { background: var(--ds-primary); }
.ds-bg-success { background: var(--ds-success); }
.ds-bg-danger { background: var(--ds-danger); }
.ds-bg-purple { background: var(--ds-purple); }
.ds-bg-surface { background: var(--ds-surface); }

.ds-border-primary { border-color: var(--ds-primary); }
.ds-border-success { border-color: var(--ds-success); }
.ds-border-danger { border-color: var(--ds-danger); }

/* -- 13. Responsive ----------------------------------------------- */
@media (max-width: 768px) {
  .ds-grid-2, .ds-grid-3, .ds-grid-4 {
    grid-template-columns: 1fr;
  }
  .ds-card { padding: var(--ds-space-lg); }
  .ds-card-hero { padding: var(--ds-space-2xl); }
  .ds-hide-mobile { display: none !important; }
}
@media (min-width: 769px) {
  .ds-hide-desktop { display: none !important; }
}

/* Reset & Scrollbar */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
}

body {
  font-family: var(--ds-font-body);
  background-color: var(--ds-bg);
  color: var(--ds-text);
  height: 100vh;
  overflow: hidden;
  display: flex;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(216, 201, 158, 0.05) 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(0, 136, 204, 0.05) 0%, transparent 40%);
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02);
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--ds-primary);
}

/* Main Layout Shell */
.app-container {
  display: flex;
  width: 100vw;
  height: 100vh;
  position: relative;
}

/* Sidebar Navigation */
.sidebar {
  width: 232px;
  background:
    linear-gradient(180deg, rgba(8, 15, 31, 0.96) 0%, rgba(5, 10, 22, 0.92) 100%);
  border-right: 1px solid var(--ds-border);
  padding: var(--ds-space-lg) var(--ds-space-md) var(--ds-space-md);
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(12px);
  z-index: 10;
}

.logo-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-md);
  padding: 0 var(--ds-space-sm) var(--ds-space-md);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  margin-bottom: var(--ds-space-lg);
  min-height: 56px;
}

.logo-brand {
  display: flex;
  align-items: center;
  gap: var(--ds-space-md);
  min-width: 0;
}

.logo-icon {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--ds-primary), #b8a67d);
  border-radius: var(--ds-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ds-bg);
  font-weight: 800;
  font-size: var(--ds-text-xl);
  box-shadow: var(--ds-shadow-glow-primary);
  flex-shrink: 0;
}

.logo-text h1 {
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-xl);
  font-weight: 800;
  letter-spacing: -0.8px;
  background: linear-gradient(90deg, #fff, var(--ds-primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding-right: var(--ds-space-2xs);
}

.logo-text span {
  font-size: var(--ds-text-xs);
  font-family: var(--ds-font-mono);
  color: rgba(148, 163, 184, 0.9);
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.nav-menu {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2xs);
}

.nav-item button,
.nav-group-link {
  width: 100%;
  padding: var(--ds-space-sm) var(--ds-space-md);
  border-radius: var(--ds-radius-xl);
  border: 1px solid transparent;
  background: transparent;
  appearance: none;
  color: var(--ds-muted);
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-sm);
  font-weight: 600;
  letter-spacing: -0.1px;
  display: flex;
  align-items: center;
  gap: var(--ds-space-md);
  transition: all var(--ds-transition-base);
  text-align: left;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.nav-item button svg,
.nav-group-link svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  transition: var(--transition);
}

.nav-item button:hover,
.nav-group-link:hover {
  color: var(--ds-text);
  background: rgba(255, 255, 255, 0.04);
}

.nav-item.active button,
.nav-group-link.active {
  color: #ffffff;
  background: rgba(216, 201, 158, 0.12);
  border-color: rgba(216, 201, 158, 0.22);
  font-weight: 600;
  box-shadow: var(--ds-shadow-subtle);
}

.nav-group-link.active svg,
.nav-item.active button svg {
  stroke: var(--ds-bg);
}

.nav-item.dimmed button {
  opacity: 0.62;
}

.sidebar-section-label {
  padding: var(--ds-space-sm) var(--ds-space-md) var(--ds-space-2xs);
  font-size: var(--ds-text-xs);
  font-weight: 800;
  letter-spacing: 1.6px;
  color: rgba(148, 163, 184, 0.55);
  text-transform: uppercase;
}

.nav-group {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2xs);
}

.nav-group-head {
  display: flex;
  align-items: stretch;
  gap: var(--ds-space-xs);
  cursor: pointer;
}

.nav-group-link {
  flex: 1;
}

.nav-group-children {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2xs);
  margin: 0;
  padding: 0 0 var(--ds-space-2xs) var(--ds-space-sm);
}

.nav-group-toggle {
  display: none;
}

.nav-group.is-collapsed .nav-group-children {
  display: none;
}

.mode-admin-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--ds-space-sm) var(--ds-space-md);
  border-radius: 999px;
  border: 1px solid rgba(124, 58, 237, 0.2);
  background: rgba(124, 58, 237, 0.04);
  color: rgba(221, 214, 254, 0.65);
  font-size: var(--ds-text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: all var(--ds-transition-base);
  opacity: 0.7;
}

.mode-admin-link:hover {
  color: var(--ds-purple-light);
  background: rgba(124, 58, 237, 0.12);
  border-color: rgba(124, 58, 237, 0.4);
  opacity: 1;
}

.sidebar-footer {
  margin-top: auto;
  padding: var(--ds-space-md) var(--ds-space-sm) var(--ds-space-sm);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-md);
}

.active-profile {
  display: flex;
  align-items: center;
  gap: var(--ds-space-md);
  padding: var(--ds-space-sm) var(--ds-space-md);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-xl);
  background: rgba(255, 255, 255, 0.025);
}

.active-profile-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ds-purple), var(--ds-purple-light));
  border: 1px solid var(--ds-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: #fff;
}

.active-profile-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.active-profile-info strong {
  font-size: var(--ds-text-sm);
  color: var(--ds-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.active-profile-info span {
  font-size: var(--ds-text-xs);
  color: var(--ds-success);
  display: flex;
  align-items: center;
  gap: var(--ds-space-xs);
}

.sidebar-shell-controls {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-sm);
  padding: 0 var(--ds-space-2xs) var(--ds-space-2xs);
}

.sidebar-execution-summary {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-sm);
  padding: 0 var(--ds-space-2xs) var(--ds-space-2xs);
}

.sidebar-shell-controls .mode-switcher {
  width: 100%;
  justify-content: space-between;
  padding: var(--ds-space-xs);
}

.sidebar-shell-controls .mode-switch-btn {
  flex: 1;
  min-width: 0;
}

.sidebar-execution-pills {
  display: flex;
  gap: var(--ds-space-sm);
  flex-wrap: wrap;
}

.execution-pill {
  padding: var(--ds-space-xs) var(--ds-space-sm);
  border-radius: 999px;
  font-size: var(--ds-text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid transparent;
}

.execution-pill-auto {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.28);
  color: var(--ds-success);
}

.execution-pill-review {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.28);
  color: var(--ds-warning);
}

.pulse-dot {
  width: 6px;
  height: 6px;
  background-color: var(--ds-success);
  border-radius: 50%;
  display: inline-block;
  animation: pulse 1.8s infinite;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.7); }
  70% { box-shadow: 0 0 0 6px rgba(52, 211, 153, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

/* Main Content Workspace */
.main-content {
  flex: 1;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* Top Navigation Bar */
.top-header {
  height: 56px;
  border-bottom: 1px solid var(--ds-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--ds-space-xl);
  background: rgba(7, 17, 36, 0.68);
  backdrop-filter: blur(10px);
  z-index: 5;
}

.header-title h2 {
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-xl);
  font-weight: 700;
  color: var(--ds-text);
  letter-spacing: -0.2px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--ds-space-md);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.header-template-pill {
  min-height: 30px;
  padding: var(--ds-space-xs) var(--ds-space-md);
}

.header-template-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  border: none;
  color: inherit;
  font-size: var(--ds-text-sm);
  font-weight: 700;
  cursor: pointer;
  outline: none;
  min-width: 72px;
}

.backend-status-badge {
  gap: var(--ds-space-sm);
  min-height: 30px;
  padding: var(--ds-space-xs) var(--ds-space-md);
}

.backend-status-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--ds-radius-pill);
  display: inline-block;
  background: var(--ds-success);
  box-shadow: var(--ds-shadow-glow-success);
  flex-shrink: 0;
}

.backend-status-badge.status-online .backend-status-dot {
  background: var(--ds-success);
  box-shadow: var(--ds-shadow-glow-success);
}

.backend-status-badge.status-degraded .backend-status-dot {
  background: var(--ds-warning);
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.7);
}

.backend-status-badge.status-offline .backend-status-dot {
  background: var(--ds-danger);
  box-shadow: var(--ds-shadow-glow-danger);
}

.backend-status-text {
  font-size: var(--ds-text-sm);
  font-weight: 700;
  color: var(--ds-text);
}

.persona-selector {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  color: var(--ds-text);
  padding: var(--ds-space-sm) var(--ds-space-lg);
  border-radius: var(--ds-radius-lg);
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-base);
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}

.compact-control {
  padding: 6px var(--ds-space-md);
  font-size: var(--ds-text-sm);
  border-radius: var(--ds-radius-pill);
  max-width: 260px;
}

.compact-select {
  background: transparent;
  border: none;
  color: var(--ds-text);
  outline: none;
  cursor: pointer;
}

.mode-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: rgba(9, 17, 36, 0.98);
  color: #fff;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: var(--ds-text-sm);
  font-weight: 700;
  padding-right: 18px;
  min-width: 190px;
}

.mode-select option,
select option {
  background: #091124;
  color: #fff;
}

.compact-control-group {
  display: flex;
  align-items: center;
  border: 1px solid var(--ds-border);
  padding: var(--ds-space-xs) var(--ds-space-md);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-overlay-subtle);
}

.persona-selector:hover {
  border-color: var(--ds-border-active);
  background: var(--ds-surface-hover);
}

.mode-switcher .mode-switch-btn {
  min-width: 72px;
  padding: var(--ds-space-sm) var(--ds-space-md);
  border: 0;
  border-radius: var(--ds-radius-pill);
  background: transparent;
  color: var(--ds-muted);
  font-size: var(--ds-text-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.mode-switcher .mode-switch-btn.active {
  background: rgba(216, 201, 158, 0.18);
  color: #fff;
  box-shadow: var(--ds-shadow-subtle);
}

.stat-badge {
  display: flex;
  align-items: center;
  gap: var(--ds-space-sm);
  background: var(--ds-overlay-subtle);
  border: 1px solid var(--ds-border);
  padding: var(--ds-space-sm) 14px;
  border-radius: var(--ds-radius-lg);
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-sm);
}

.compact-stat {
  padding: 6px var(--ds-space-md);
  border-radius: var(--ds-radius-pill);
}

.compact-stat .label {
  font-size: var(--ds-text-sm);
}

.compact-stat .value {
  font-size: var(--ds-text-sm);
}

.backend-mini-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-sm);
  min-height: 30px;
  padding: 5px 11px;
  border-radius: var(--ds-radius-pill);
  border: 1px solid var(--ds-border);
  background: var(--ds-overlay-subtle);
  color: var(--ds-muted);
  font-size: var(--ds-text-sm);
  font-weight: 700;
}

@media (max-width: 1280px) {
  .top-header {
    height: auto;
    min-height: 56px;
    padding: var(--ds-space-md) var(--ds-space-lg);
    gap: var(--ds-space-md);
  }
}

.stat-badge span.label {
  color: var(--ds-muted);
}

.stat-badge span.value {
  color: var(--ds-primary);
  font-weight: 700;
}

/* Tab Panels Content */
.tab-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  display: none; /* Controlled via active class */
}

.tab-content.active {
  display: block;
}

#tab-contacts.active,
#tab-boards.active,
#tab-inbox.active {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Dashboard Tab Styles */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.metric-card {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: 12px;
  padding: 24px;
  position: relative;
  overflow: hidden;
  transition: var(--transition);
}

.metric-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: transparent;
  transition: var(--transition);
}

.metric-card:hover {
  transform: translateY(-2px);
  border-color: var(--ds-border-active);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

.metric-card.whatsapp-card::before { background: var(--whatsapp); }
.metric-card.telegram-card::before { background: var(--telegram); }
.metric-card.facebook-card::before { background: var(--facebook); }
.metric-card.xhs-card::before { background: var(--xhs); }

.metric-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--ds-muted);
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 12px;
}

.metric-header svg {
  width: 20px;
  height: 20px;
}

.metric-value {
  font-family: var(--ds-font-display);
  font-size: 28px;
  font-weight: 800;
  color: var(--ds-text);
  line-height: 1.2;
}

.metric-footer {
  margin-top: 12px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.metric-footer.up { color: var(--ds-success); }
.metric-footer.down { color: var(--ds-danger); }

/* Quick Chart Container */
.chart-card {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.chart-title h3 {
  font-family: var(--ds-font-display);
  font-size: 16px;
  font-weight: 600;
}

.chart-placeholder {
  height: 220px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.01);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 10px 30px;
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.chart-bar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.chart-bar {
  width: 28px;
  background: linear-gradient(180deg, var(--ds-primary), rgba(216, 201, 158, 0.2));
  border-radius: 4px 4px 0 0;
  transition: height 1s var(--ease-rise);
  position: relative;
}

.chart-bar::after {
  content: attr(data-val);
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--ds-font-mono);
  font-size: 10px;
  color: var(--ds-primary);
  font-weight: bold;
}

.chart-label {
  margin-top: 8px;
  font-size: 11px;
  font-family: var(--ds-font-mono);
  color: var(--ds-muted);
}

/* Dashboard Bottom Grid */
.dashboard-row-2 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
}

.panel-card {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: 12px;
  padding: 24px;
  min-height: 300px;
}

.panel-title {
  font-family: var(--ds-font-display);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.panel-title button {
  background: transparent;
  color: var(--ds-primary);
  font-size: 12px;
  font-weight: 600;
  border: none;
}

/* Lead List Table Style */
.simple-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.simple-table th {
  padding: 12px;
  font-size: 12px;
  font-family: var(--ds-font-display);
  text-transform: uppercase;
  color: var(--ds-muted);
  border-bottom: 1px solid var(--ds-border);
  font-weight: 600;
}

.simple-table td {
  padding: 14px 12px;
  font-size: 13.5px;
  border-bottom: 1px solid var(--ds-overlay-subtle);
}

.simple-table tr:last-child td {
  border-bottom: none;
}

.lead-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.avatar-initials {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 11px;
  color: var(--ds-bg);
}

.platform-pill {
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 10px;
  font-family: var(--ds-font-mono);
  font-weight: 700;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.platform-pill.whatsapp { background: rgba(37, 211, 102, 0.15); color: var(--whatsapp); }
.platform-pill.telegram { background: rgba(0, 136, 204, 0.15); color: var(--telegram); }
.platform-pill.facebook { background: rgba(24, 119, 242, 0.15); color: var(--facebook); }
.platform-pill.xhs { background: rgba(255, 36, 66, 0.15); color: var(--xhs); }

.stage-pill {
  padding: 3px 10px;
  border-radius: var(--ds-radius-md);
  font-size: 11px;
  font-weight: 600;
  display: inline-block;
}

.stage-pill.new { background: rgba(251, 191, 36, 0.15); color: var(--ds-warning); }
.stage-pill.engaged { background: rgba(0, 136, 204, 0.15); color: var(--telegram); }
.stage-pill.objection { background: rgba(248, 113, 113, 0.15); color: var(--ds-danger); }
.stage-pill.booked { background: rgba(52, 211, 153, 0.15); color: var(--ds-success); }

/* Unified CRM Inbox Layout */
.crm-inbox-layout {
  display: grid;
  grid-template-columns: 320px 1fr 300px;
  height: calc(100vh - 70px);
  position: absolute;
  top: 70px;
  bottom: 0;
  left: 260px;
  right: 0;
}

/* CRM Inbox - Left: Lead Directory */
.crm-sidebar {
  border-right: 1px solid var(--ds-border);
  background: rgba(4, 11, 25, 0.4);
  display: flex;
  flex-direction: column;
}

.search-box {
  padding: 16px;
  border-bottom: 1px solid var(--ds-border);
}

.search-input {
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--ds-radius-lg);
  background: var(--ds-overlay-subtle);
  border: 1px solid var(--ds-border);
  color: var(--ds-text);
  font-size: 13px;
}

.search-input:focus {
  border-color: var(--ds-primary);
}

.lead-cards-list {
  flex: 1;
  overflow-y: auto;
  list-style: none;
}

.lead-card-item {
  padding: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.02);
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  gap: 12px;
  position: relative;
}

.lead-card-item:hover {
  background: rgba(255, 255, 255, 0.02);
}

.lead-card-item.active {
  background: rgba(216, 201, 158, 0.08);
}

.lead-card-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--ds-primary);
}

.lead-card-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--ds-bg);
  flex-shrink: 0;
  position: relative;
}

.lead-card-platform-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--ds-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lead-card-content {
  min-width: 0;
  flex: 1;
}

.lead-card-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}

.lead-card-header strong {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ds-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lead-card-header span {
  font-size: 10px;
  color: var(--ds-muted);
  font-family: var(--ds-font-mono);
}

.lead-card-msg {
  font-size: 12px;
  color: var(--ds-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 6px;
}

.lead-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.lead-card-unread-dot {
  width: 8px;
  height: 8px;
  background: var(--ds-primary);
  border-radius: 50%;
}

/* CRM Inbox - Center: Chat Box */
.crm-chatbox {
  display: flex;
  flex-direction: column;
  background: rgba(3, 10, 22, 0.2);
}

.chatbox-header {
  height: 64px;
  border-bottom: 1px solid var(--ds-border);
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(4, 11, 25, 0.4);
}

.chatbox-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.chatbox-title h4 {
  font-family: var(--ds-font-display);
  font-size: 15px;
  font-weight: 600;
}

.chatbox-title span {
  font-size: 11px;
  color: var(--ds-muted);
}

.chat-controls {
  display: flex;
  align-items: center;
  gap: 16px;
}

.agent-toggle-container {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 22px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: rgba(255,255,255,0.1);
  transition: .4s;
  border-radius: 34px;
  border: 1px solid var(--ds-border);
}

.slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: var(--ds-primary);
  border-color: var(--ds-primary);
}

input:checked + .slider:before {
  transform: translateX(20px);
  background-color: var(--ds-bg);
}

/* Chat Messages Box */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.msg-wrapper {
  display: flex;
  flex-direction: column;
  max-width: 65%;
}

.msg-wrapper.in {
  align-self: flex-start;
}

.msg-wrapper.out {
  align-self: flex-end;
}

.msg-bubble {
  padding: 12px 16px;
  border-radius: var(--ds-radius-xl);
  font-size: 13.5px;
  line-height: 1.5;
}

.msg-wrapper.in .msg-bubble {
  background: var(--ds-overlay-light);
  border: 1px solid var(--ds-border);
  color: var(--ds-text);
  border-top-left-radius: 2px;
}

.msg-wrapper.out .msg-bubble {
  background: var(--ds-primary);
  color: var(--ds-bg);
  font-weight: 500;
  border-top-right-radius: 2px;
}

.msg-meta {
  font-size: 10px;
  color: var(--ds-muted);
  margin-top: 4px;
  padding: 0 4px;
  font-family: var(--ds-font-mono);
}

.msg-wrapper.out .msg-meta {
  text-align: right;
}

/* Dynamic Schedule Slot inside bubble */
.bubble-scheduler {
  margin-top: 10px;
  background: rgba(4, 11, 25, 0.7);
  border: 1px dashed var(--ds-primary);
  border-radius: var(--ds-radius-lg);
  padding: 12px;
  width: 100%;
}

.bubble-scheduler-title {
  font-size: 11px;
  color: var(--ds-primary);
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}

.bubble-slots {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.bubble-slot-btn {
  background: var(--ds-overlay-subtle);
  border: 1px solid var(--ds-border);
  color: var(--ds-text);
  padding: 6px;
  border-radius: var(--ds-radius-sm);
  font-size: 11px;
  cursor: pointer;
  text-align: center;
  transition: var(--transition);
}

.bubble-slot-btn:hover {
  background: var(--ds-primary);
  color: var(--ds-bg);
  font-weight: bold;
}

/* Chat Input Bar */
.chat-input-bar {
  padding: 20px 24px;
  border-top: 1px solid var(--ds-border);
  background: rgba(4, 11, 25, 0.4);
  display: flex;
  gap: 12px;
}

.chat-input {
  flex: 1;
  background: var(--ds-overlay-subtle);
  border: 1px solid var(--ds-border);
  color: var(--ds-text);
  border-radius: var(--ds-radius-lg);
  padding: 12px 16px;
  font-size: 13.5px;
  font-family: var(--ds-font-body);
}

.chat-input:focus {
  border-color: var(--ds-primary);
}

.chat-send-btn {
  width: 44px;
  height: 44px;
  background: var(--ds-primary);
  border: none;
  border-radius: var(--ds-radius-lg);
  color: var(--ds-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 4px 12px var(--primary-glow);
}

.chat-send-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px var(--primary-glow);
}

.chat-send-btn svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2.5;
  fill: none;
}

/* CRM Inbox - Right Side Panel: AI Reasoning Console */
.crm-reasoning-panel {
  border-left: 1px solid var(--ds-border);
  background: rgba(4, 11, 25, 0.6);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  overflow-y: auto;
}

.panel-section-title {
  font-size: 11px;
  font-family: var(--ds-font-mono);
  color: var(--ds-primary);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 12px;
  font-weight: bold;
}

.reasoning-console {
  background: #020712;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  padding: 16px;
  font-family: var(--ds-font-mono);
  font-size: 12px;
  color: #a4b6c9;
  line-height: 1.6;
  min-height: 150px;
  position: relative;
  overflow: hidden;
}

.reasoning-console::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(216, 201, 158, 0.03) 0%, transparent 100%);
  pointer-events: none;
}

.reasoning-headline {
  color: var(--ds-primary);
  font-weight: bold;
  margin-bottom: 8px;
}

.lead-metadata-box {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  padding: 16px;
}

.metadata-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  margin-bottom: 10px;
}

.metadata-row:last-child {
  margin-bottom: 0;
}

.metadata-row span.label {
  color: var(--ds-muted);
}

.metadata-row span.value {
  color: var(--ds-text);
  font-weight: 500;
}

.sentiment-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
}

.sentiment-dot.positive { background: var(--ds-success); }
.sentiment-dot.neutral { background: var(--ds-warning); }
.sentiment-dot.negative { background: var(--ds-danger); }

/* === INBOX REDESIGN === */
.inbox-row-1 {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  background: rgba(4, 11, 25, 0.6);
  border-bottom: 1px solid var(--ds-border);
  padding: 0 16px;
  height: 44px;
}
.inbox-filter-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
}
.filter-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  color: var(--ds-muted);
  padding: 0 14px;
  height: 30px;
  border-radius: 999px;
  font-size: 12.5px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}
.filter-tab:hover { background: var(--ds-overlay-light); color: #fff; }
.filter-tab.active { background: var(--ds-primary); color: #fff; font-weight: 600; }
.filter-tab-count {
  font-size: 10.5px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: inherit;
  min-width: 12px;
  text-align: center;
}
.filter-tab-count:empty { display: none; }
.filter-tab.active .filter-tab-count { background: rgba(255,255,255,0.22); }

.inbox-main-area {
  display: grid;
  grid-template-columns: 260px 1fr 280px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Contacts Panel (Row 2) */
.inbox-contacts-panel {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--ds-border);
  background: rgba(4, 11, 25, 0.3);
  min-height: 0;
}
.inbox-channel-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--ds-border);
}
.inbox-channel-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.inbox-channel-select {
  flex: 1;
  min-width: 0;
  height: 30px;
  background: var(--ds-overlay-subtle);
  border: 1px solid var(--ds-border);
  color: #fff;
  padding: 0 8px;
  border-radius: var(--ds-radius-md);
  font-size: 12px;
}
.inbox-unread-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-overlay-subtle);
  font-size: 12px;
  color: var(--ds-muted);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}
.inbox-unread-toggle:hover { color: #fff; }
.inbox-search-wrap {
  position: relative;
}
.inbox-search-icon {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ds-muted);
  pointer-events: none;
}
.inbox-search-input {
  width: 100%;
  box-sizing: border-box;
  height: 30px;
  padding: 0 10px 0 28px;
  background: var(--ds-overlay-subtle);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  color: #fff;
  font-size: 12px;
}
.inbox-search-input:focus { outline: none; border-color: var(--ds-primary); }

/* Bot pause banner (human takeover countdown) */
.inbox-pause-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding: 8px 16px;
  background: rgba(250, 204, 21, 0.08);
  border-bottom: 1px solid rgba(250, 204, 21, 0.25);
  font-size: 12px;
  color: #fef08a;
}
.pause-banner-icon { font-size: 13px; }
.inbox-pause-banner strong { font-variant-numeric: tabular-nums; }
.pause-duration-select {
  margin-left: auto;
  height: 26px;
  background: var(--ds-overlay-light);
  border: 1px solid rgba(250,204,21,0.3);
  color: #fef08a;
  border-radius: var(--ds-radius-md);
  font-size: 11px;
  padding: 0 6px;
  cursor: pointer;
}
.pause-resume-btn {
  height: 26px;
  padding: 0 12px;
  background: var(--ds-primary);
  color: #fff;
  border: none;
  border-radius: var(--ds-radius-md);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.pause-resume-btn:hover { filter: brightness(1.15); }
.inbox-contact-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}
.inbox-contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--ds-overlay-subtle);
  transition: background 0.1s;
}
.inbox-contact-item:hover { background: rgba(255,255,255,0.04); }
.inbox-contact-item.active { background: rgba(124,58,237,0.12); border-left: 3px solid var(--ds-primary); }
.inbox-contact-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.inbox-contact-name {
  font-size: 13px;
  color: #fff;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inbox-contact-status {
  font-size: 10px;
  color: var(--ds-muted);
  white-space: nowrap;
}
.inbox-contact-unread {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0ea5e9;
  flex-shrink: 0;
}

/* Chat Panel (Row 3) */
.inbox-chat-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: rgba(4, 11, 25, 0.2);
}
.chat-customer-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ds-border);
  background: rgba(4, 11, 25, 0.5);
}
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chat-date-separator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 16px 0 12px;
  font-size: 11px;
  color: var(--ds-muted);
  font-weight: 500;
  position: relative;
}
.chat-date-separator::before,
.chat-date-separator::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.06);
}
.chat-msg {
  max-width: 75%;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.4;
  position: relative;
}
.chat-msg.in {
  align-self: flex-start;
  background: rgba(255,255,255,0.06);
  border-bottom-left-radius: 2px;
}
.chat-msg.out {
  align-self: flex-end;
  background: var(--ds-primary);
  border-bottom-right-radius: 2px;
}
.chat-msg.out.ai { background: rgba(16,185,129,0.3); }
.chat-msg-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
  font-weight: 600;
}
.chat-msg.in .chat-msg-label { color: #a78bfa; }
.chat-msg.out .chat-msg-label { color: rgba(255,255,255,0.6); }
.chat-msg.out.ai .chat-msg-label { color: #34d399; }
.chat-msg-time {
  font-size: 10px;
  color: var(--ds-muted);
  margin-top: 4px;
}
.chat-ai-response {
  flex-shrink: 0;
  border-top: 1px solid var(--ds-border);
  padding: 10px 16px;
  background: rgba(16,185,129,0.05);
}
.chat-ai-label {
  font-size: 11px;
  color: #34d399;
  font-weight: 600;
  margin-bottom: 4px;
}
.chat-ai-text {
  font-size: 13px;
  color: #d1d5db;
  margin-bottom: 8px;
  line-height: 1.4;
}
.chat-ai-use-btn {
  background: rgba(16,185,129,0.15);
  border: 1px solid rgba(16,185,129,0.3);
  color: #34d399;
  padding: 4px 14px;
  border-radius: var(--ds-radius-sm);
  font-size: 11px;
  cursor: pointer;
}
.chat-ai-use-btn:hover { background: rgba(16,185,129,0.3); }
.chat-input-area {
  flex-shrink: 0;
  border-top: 1px solid var(--ds-border);
  background: rgba(4, 11, 25, 0.5);
}
.chat-input-tabs {
  display: flex;
  border-bottom: 1px solid var(--ds-border);
}
.chat-input-tab {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--ds-muted);
  padding: 8px;
  font-size: 12px;
  cursor: pointer;
}
.chat-input-tab.active {
  color: #fff;
  border-bottom: 2px solid var(--ds-primary);
  font-weight: 600;
}
.inbox-text-input {
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: none;
  color: #fff;
  padding: 10px 16px;
  font-size: 13px;
  resize: vertical;
  font-family: inherit;
}
.inbox-text-input:focus { outline: none; }
.chat-input-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-top: 1px solid var(--ds-border);
}
.toolbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  color: var(--ds-muted);
  cursor: pointer;
  border-radius: var(--ds-radius-md);
  line-height: 1;
}
.toolbar-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }
.toolbar-select {
  background: var(--ds-overlay-subtle);
  border: 1px solid var(--ds-border);
  color: #fff;
  padding: 4px 8px;
  border-radius: var(--ds-radius-sm);
  font-size: 11px;
  flex: 1;
  max-width: 160px;
}
.chat-send-btn {
  margin-left: auto;
  background: #0ea5e9;
  color: #fff;
  border: none;
  padding: 6px 16px;
  border-radius: var(--ds-radius-md);
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
}
.chat-send-btn:hover { background: #0284c7; }

/* Profile Panel (Row 4) */
.inbox-profile-panel {
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--ds-border);
  background: rgba(4, 11, 25, 0.4);
  overflow-y: auto;
}
.profile-tabs {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--ds-border);
  flex-shrink: 0;
}
.profile-tab {
  background: transparent;
  border: none;
  color: var(--ds-muted);
  padding: 8px 10px;
  font-size: 11px;
  cursor: pointer;
  flex: 1;
  text-align: center;
}
.profile-tab.active {
  color: #fff;
  border-bottom: 2px solid var(--ds-primary);
  font-weight: 600;
}
.profile-panel-content {
  padding: 12px;
  flex: 1;
  overflow-y: auto;
}
.profile-section-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ds-muted);
  margin: 16px 0 8px;
  font-weight: 600;
}
.profile-section-title:first-child { margin-top: 0; }
.profile-field {
  margin-bottom: 8px;
}
.profile-field label {
  display: block;
  font-size: 10px;
  color: var(--ds-muted);
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.prof-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--ds-overlay-subtle);
  border: 1px solid var(--ds-border);
  color: #fff;
  padding: 6px 8px;
  border-radius: var(--ds-radius-sm);
  font-size: 12px;
}
.prof-input:focus { border-color: var(--ds-primary); outline: none; }
.prof-value {
  font-size: 12px;
  color: #d1d5db;
  display: block;
}
.profile-save-btn {
  width: 100%;
  margin-top: 12px;
  background: #0ea5e9;
  color: #fff;
  border: none;
  padding: 8px;
  border-radius: var(--ds-radius-md);
  font-size: 13px;
  cursor: pointer;
  font-weight: 600;
}
.profile-save-btn:hover { background: #0284c7; }
#prof-tags-list .prof-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(124,58,237,0.15);
  color: #a78bfa;
  padding: 3px 8px;
  border-radius: var(--ds-radius-sm);
  font-size: 11px;
}
#prof-tags-list .prof-tag button {
  background: none;
  border: none;
  color: var(--ds-danger);
  cursor: pointer;
  font-size: 12px;
  padding: 0;
  line-height: 1;
}

/* Live Simulation Tab (Interactive Area) */
.simulator-layout {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 20px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 0;
}

.simulator-info-pane {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.simulator-header-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--primary-glow);
  border: 1px solid var(--ds-primary);
  color: var(--ds-primary);
  padding: 6px 14px;
  border-radius: 99px;
  width: fit-content;
  font-family: var(--ds-font-mono);
  font-size: 11px;
  text-transform: uppercase;
}

.simulator-info-pane h3 {
  font-family: var(--ds-font-display);
  font-size: 32px;
  font-weight: 800;
  line-height: 1.2;
}

.simulator-info-pane p {
  color: var(--ds-muted);
  font-size: 15px;
  line-height: 1.6;
}

/* The physical simulated phone */
.phone-body {
  width: 345px;
  height: 680px;
  background: #000;
  border-radius: 42px;
  padding: 11px;
  box-shadow: 0 25px 60px rgba(0,0,0,0.8), inset 0 0 4px rgba(255,255,255,0.4);
  position: relative;
  justify-self: center;
  border: 4px solid #1f242e;
}

/* Phone top speaker bar and camera notch */
.phone-notch-island {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 110px;
  height: 25px;
  background: #000;
  border-radius: var(--ds-radius-panel);
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
}

.phone-notch-camera {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #111;
  position: relative;
}

.phone-notch-camera::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #004d80;
}

.phone-screen {
  width: 100%;
  height: 100%;
  background-color: #0b141a; /* Dark WhatsApp/Telegram Chat BG */
  border-radius: 32px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Phone Status Bar */
.phone-status-bar {
  height: 38px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  background: transparent;
  z-index: 10;
}

.phone-status-icons {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Simulated WhatsApp Header */
.sim-chat-header {
  background: #1f2c34;
  padding: 8px 16px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--ds-overlay-light);
}

.sim-chat-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ds-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--ds-bg);
}

.sim-chat-info {
  display: flex;
  flex-direction: column;
}

.sim-chat-name {
  font-size: 13.5px;
  font-weight: 600;
  color: #e9edef;
}

.sim-chat-status {
  font-size: 10px;
  color: #8696a0;
  font-family: var(--ds-font-mono);
}

/* Simulated Chat Message Log */
.sim-chat-body {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  background-image: radial-gradient(rgba(0,0,0,0.15) 1px, transparent 0);
  background-size: 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sim-msg {
  max-width: 80%;
  padding: 8px 12px;
  border-radius: var(--ds-radius-lg);
  font-size: 12.5px;
  line-height: 1.45;
  position: relative;
}

.sim-msg.in {
  align-self: flex-end;
  background: #005c4b; /* WhatsApp Sent Bubble */
  color: #e9edef;
  border-top-right-radius: 2px;
}

.sim-msg.out {
  align-self: flex-start;
  background: #202c33; /* WhatsApp Recv Bubble */
  color: #e9edef;
  border-top-left-radius: 2px;
}

.sim-msg-time {
  display: block;
  font-size: 8.5px;
  color: rgba(255, 255, 255, 0.45);
  text-align: right;
  margin-top: 4px;
}

/* Interactive Schedule Overlay Button */
.sim-calendar-bubble {
  background: #111b21;
  border: 1px solid rgba(216, 201, 158, 0.4);
  border-radius: var(--ds-radius-lg);
  padding: 12px;
  margin-top: 6px;
}

.sim-calendar-title {
  font-size: 11px;
  font-weight: bold;
  color: var(--ds-primary);
  margin-bottom: 8px;
}

.sim-calendar-btn {
  display: block;
  width: 100%;
  background: var(--ds-primary);
  color: var(--ds-bg);
  border: none;
  padding: 8px;
  border-radius: var(--ds-radius-sm);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: var(--transition);
}

.sim-calendar-btn:hover {
  background: #fff;
}

/* Typing Indicator Balloon */
.typing-balloon {
  align-self: flex-start;
  background: #202c33;
  padding: 10px 14px;
  border-radius: var(--ds-radius-lg);
  display: none; /* controlled dynamically */
  gap: 4px;
  align-items: center;
}

.typing-dot {
  width: 6px;
  height: 6px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  animation: typing 1s infinite alternate;
}

.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing {
  from { transform: translateY(0); opacity: 0.3; }
  to { transform: translateY(-4px); opacity: 1; }
}

/* Phone Input Bar */
.sim-chat-footer {
  background: #1f2c34;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--ds-overlay-light);
}

.sim-chat-input {
  flex: 1;
  background: #2a3942;
  border: none;
  border-radius: var(--ds-radius-panel);
  padding: 8px 16px;
  color: #e9edef;
  font-size: 12.5px;
}

.sim-chat-send {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #00a884;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
}

.sim-chat-send svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* Calendar Screen Dashboard styles */
.calendar-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 20px;
}

.calendar-widget {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-xl);
  padding: 24px;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.calendar-month-title {
  font-family: var(--ds-font-display);
  font-size: 18px;
  font-weight: 700;
}

.calendar-nav-btn {
  background: var(--ds-overlay-subtle);
  border: 1px solid var(--ds-border);
  color: var(--ds-text);
  width: 32px;
  height: 32px;
  border-radius: var(--ds-radius-md);
  cursor: pointer;
  font-weight: bold;
}

.calendar-grid-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 11px;
  font-family: var(--ds-font-mono);
  color: var(--ds-muted);
  text-transform: uppercase;
  margin-bottom: 12px;
  font-weight: 700;
}

.calendar-grid-cells {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

.calendar-cell {
  aspect-ratio: 1;
  background: rgba(255,255,255,0.01);
  border: 1px solid rgba(255,255,255,0.02);
  border-radius: var(--ds-radius-lg);
  padding: 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 70px;
  transition: var(--transition);
}

.calendar-cell:hover {
  background: var(--ds-overlay-subtle);
  border-color: var(--ds-border);
}

.calendar-cell.different-month {
  opacity: 0.3;
}

.calendar-cell.today {
  border-color: var(--ds-primary);
  background: rgba(216, 201, 158, 0.04);
}

.calendar-day-num {
  font-family: var(--ds-font-mono);
  font-size: 11px;
  color: var(--ds-muted);
  font-weight: bold;
}

.calendar-today-badge {
  background: var(--ds-primary);
  color: var(--ds-bg);
  border-radius: var(--ds-radius-sm);
  padding: 1px 4px;
}

.calendar-cell-events {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.calendar-event-dot {
  font-size: 9px;
  padding: 2px 4px;
  border-radius: var(--ds-radius-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

.calendar-event-dot.whatsapp { background: rgba(37,211,102,0.2); color: var(--whatsapp); }
.calendar-event-dot.telegram { background: rgba(0,136,204,0.2); color: var(--telegram); }
.calendar-event-dot.facebook { background: rgba(24,119,242,0.2); color: var(--facebook); }
.calendar-event-dot.xhs { background: rgba(255,36,66,0.2); color: var(--xhs); }

/* Persona / Rules Settings Tab */
.settings-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
}

.settings-card {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-xl);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.settings-section-title {
  font-family: var(--ds-font-display);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--ds-border);
  padding-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ds-muted);
}

.form-group input,
.form-group textarea,
.form-group select {
  background: var(--ds-overlay-subtle);
  border: 1px solid var(--ds-border);
  color: var(--ds-text);
  padding: 12px;
  border-radius: var(--ds-radius-lg);
  font-family: var(--ds-font-body);
  font-size: 13.5px;
  width: 100%;
}

.form-group textarea {
  resize: vertical;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--ds-primary);
}

.objection-rule-item {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 16px;
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid var(--ds-border);
  padding: 16px;
  border-radius: var(--ds-radius-lg);
  margin-bottom: 12px;
}

.objection-label {
  font-weight: 600;
  color: var(--ds-primary);
  font-size: 13px;
}

.objection-input {
  font-size: 12.5px;
  color: var(--ds-text);
  background: transparent;
  border: none;
  width: 100%;
}

.action-btn {
  background: var(--ds-primary);
  color: var(--ds-bg);
  border: none;
  padding: 12px 24px;
  border-radius: var(--ds-radius-lg);
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  font-family: var(--ds-font-display);
  width: fit-content;
}

.action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 15px var(--primary-glow);
}

/* Integrations Connect Cards */
.integrations-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.integration-card {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-xl);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
}

.integration-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.integration-card-logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.integration-brand-avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--ds-radius-md-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
}

.integration-brand-avatar.whatsapp { background-color: var(--whatsapp); }
.integration-brand-avatar.telegram { background-color: var(--telegram); }
.integration-brand-avatar.facebook { background-color: var(--facebook); }
.integration-brand-avatar.xhs { background-color: var(--xhs); }

.integration-name-wrap h4 {
  font-family: var(--ds-font-display);
  font-size: 15px;
  font-weight: 600;
}

.integration-name-wrap span {
  font-size: 11px;
  color: var(--ds-muted);
}

.integration-btn-connect {
  background: transparent;
  border: 1px solid var(--ds-primary);
  color: var(--ds-primary);
  padding: 6px 16px;
  border-radius: var(--ds-radius-md);
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  transition: var(--transition);
}

.integration-btn-connect:hover {
  background: var(--ds-primary);
  color: var(--ds-bg);
}

.integration-btn-connect.connected {
  background: rgba(52, 211, 153, 0.1);
  border-color: var(--ds-success);
  color: var(--ds-success);
}

.integration-card-desc {
  font-size: 13px;
  color: var(--ds-muted);
  line-height: 1.5;
}

.integration-meta-row {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  border-top: 1px solid var(--ds-overlay-light);
  padding-top: 12px;
  margin-top: auto;
}

.integration-meta-row span.label {
  color: var(--ds-muted);
}

.integration-meta-row span.val {
  color: var(--ds-text);
  font-weight: 600;
}

/* Visual QR Code Scanner Mock Modal */
.qr-modal {
  position: fixed;
  inset: 0;
  background: rgba(3, 10, 22, 0.85);
  display: none; /* Dynamic flex */
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.qr-modal-body {
  background: var(--ds-bg-elevated);
  border: 1px solid var(--ds-border-active);
  border-radius: var(--ds-radius-2xl);
  padding: 32px;
  max-width: 400px;
  width: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  box-shadow: 0 20px 50px var(--ds-overlay-dark);
  text-align: center;
}

.qr-container {
  width: 200px;
  height: 200px;
  background: white;
  padding: 10px;
  border-radius: var(--ds-radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.qr-code-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--whatsapp);
  animation: scan 2s infinite ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scan {
  0% { top: 0; }
  50% { top: 100%; }
  100% { top: 0; }
}

.qr-modal-close {
  background: var(--ds-overlay-light);
  border: 1px solid var(--ds-border);
  color: var(--ds-text);
  padding: 8px 16px;
  border-radius: var(--ds-radius-md);
  cursor: pointer;
  font-size: 13px;
}

.qr-modal-close:hover {
  background: var(--ds-danger);
  color: white;
}

.broadcast-type-option:hover {
  background: rgba(124, 58, 237, 0.15) !important;
  border-color: var(--ds-purple) !important;
}

/* Appointment Modal Box */
.appointment-detail-card {
  border-left: 3px solid var(--ds-success);
}

.appointment-detail-card strong {
  color: var(--ds-success);
}

/* ChatsHero Purple Welcome Banner */
.chatshero-welcome-banner {
  background: linear-gradient(135deg, #7c3aed, #4c1d95);
  border-radius: var(--ds-radius-xl);
  padding: 24px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(124, 58, 237, 0.35);
}

.chatshero-welcome-banner::after {
  content: "";
  position: absolute;
  right: -50px;
  top: -50px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: var(--ds-overlay-light);
  pointer-events: none;
}

.welcome-banner-icon {
  width: 56px;
  height: 56px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.welcome-tag {
  font-family: var(--ds-font-mono);
  font-size: 10px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 1px;
}

.chatshero-welcome-banner h2 {
  font-family: var(--ds-font-display);
  font-size: 22px;
  font-weight: 800;
  color: white;
  margin: 2px 0 6px;
}

.chatshero-welcome-banner p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.4;
  max-width: 500px;
}

/* Sparklines Spark Visualizer */
.sparkline-container {
  height: 30px;
  margin-top: 10px;
  width: 100%;
}

.sparkline-svg {
  width: 100%;
  height: 100%;
}

/* Sidebar Subnav Categories */
.nav-item-sub button {
  width: 100%;
  padding: var(--ds-space-sm) var(--ds-space-md) var(--ds-space-sm) var(--ds-space-3xl);
  background: transparent;
  color: var(--ds-muted);
  font-size: var(--ds-text-base);
  border: none;
  text-align: left;
  display: flex;
  align-items: center;
  gap: var(--ds-space-sm);
  cursor: pointer;
}

.nav-item-sub button .nav-item-sub-label {
  flex: 1;
}

.nav-item-sub button:hover {
  color: var(--ds-text);
  background: rgba(255, 255, 255, 0.02);
}

.nav-item-sub.active button {
  color: var(--ds-white);
}

.nav-item-sub.coming-soon button {
  opacity: 0.6;
  cursor: not-allowed;
}

.nav-item-sub.coming-soon button:hover {
  background: transparent;
  color: var(--ds-muted);
}

.sub-badge {
  font-size: var(--ds-text-xs);
  font-family: var(--ds-font-mono);
  font-weight: 700;
  padding: var(--ds-space-2xs) var(--ds-space-xs);
  border-radius: var(--ds-radius-sm);
  margin-left: auto;
}

.sub-badge.pro { background: var(--ds-info); color: white; }
.sub-badge.beta { background: var(--ds-warning); color: black; }

.plat-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}

/* Bots By Channel Grid */
.bots-channel-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.channel-grid-item {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--ds-border);
  padding: 12px;
  border-radius: var(--ds-radius-lg);
  display: flex;
  align-items: center;
  gap: 12px;
}

.channel-grid-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--ds-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: white;
}

.channel-grid-icon.whatsapp { background: var(--whatsapp); }
.channel-grid-icon.omni { background: var(--ds-primary); color: var(--ds-bg); }
.channel-grid-icon.facebook { background: var(--facebook); }
.channel-grid-icon.xhs { background: var(--xhs); }
.channel-grid-icon.telegram { background: var(--telegram); }
.channel-grid-icon.tiktok { background: #000; }
.channel-grid-icon.wechat { background: #09b83e; }
.channel-grid-icon.whatsapp-cloud { background: #0088cc; }

.channel-grid-info {
  display: flex;
  flex-direction: column;
}

.channel-grid-info strong {
  font-size: 16px;
  color: var(--ds-text);
}

.channel-grid-info span {
  font-size: 10px;
  color: var(--ds-muted);
}

/* Error Logs & Changelogs Styles */
.error-logs-container, .changelog-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 180px;
  overflow-y: auto;
}

.error-log-item {
  background: rgba(248, 113, 113, 0.04);
  border: 1px solid rgba(248, 113, 113, 0.15);
  border-left: 3px solid var(--ds-danger);
  padding: 10px;
  border-radius: var(--ds-radius-md);
}

.error-log-meta {
  font-family: var(--ds-font-mono);
  font-size: 9.5px;
  color: var(--ds-danger);
  margin-bottom: 4px;
}

.error-log-msg {
  font-family: var(--ds-font-mono);
  font-size: 11px;
  color: var(--ds-muted);
  line-height: 1.4;
  word-break: break-all;
}

.changelog-item {
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid var(--ds-border);
  padding: 10px;
  border-radius: var(--ds-radius-md);
}

.changelog-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}

.changelog-header strong {
  font-size: 11.5px;
  color: var(--ds-text);
}

.changelog-date {
  font-family: var(--ds-font-mono);
  font-size: 9.5px;
  color: var(--ds-muted);
}

.changelog-item p {
  font-size: 11px;
  color: var(--ds-muted);
  line-height: 1.4;
}

/* CSV Upload Dropzone Frame */
.csv-dropzone {
  border: 2px dashed var(--ds-border);
  border-radius: var(--ds-radius-lg);
  padding: 24px;
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255, 255, 255, 0.01);
}

.csv-dropzone:hover {
  border-color: var(--ds-purple);
  background: rgba(124, 58, 237, 0.05);
}

.csv-dropzone strong {
  font-size: 12.5px;
  margin-bottom: 2px;
}

/* Bot Builder Canvas Node Workspace */
.node-canvas-workspace {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #020712;
  background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 0);
  background-size: 24px 24px;
  overflow: auto;
  cursor: grab;
}

.node-canvas-svg {
  position: absolute;
  inset: 0;
  width: 2500px;
  height: 2000px;
  pointer-events: none;
  z-index: 1;
}

.node-canvas-nodes {
  position: absolute;
  inset: 0;
  width: 2500px;
  height: 2000px;
  z-index: 2;
  pointer-events: none;
}

.node-box {
  position: absolute;
  width: 240px;
  background: rgba(9, 17, 36, 0.95);
  border: 1.5px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: 0 4px 20px var(--ds-overlay-dark);
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--ds-transition-base);
  user-select: none;
}

.node-box.active {
  border-color: var(--ds-purple);
  box-shadow: 0 0 15px rgba(124, 58, 237, 0.4);
}

.node-header {
  padding: 8px 12px;
  border-bottom: 1px solid var(--ds-border);
  font-family: var(--ds-font-display);
  font-size: 12px;
  font-weight: 700;
  color: white;
  border-radius: 7px 7px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: move;
}

.node-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.node-body textarea, .node-body input {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--ds-border);
  color: white;
  font-size: 11px;
  padding: 6px;
  border-radius: var(--ds-radius-sm);
  resize: vertical;
}

.node-body select {
  background: rgba(9, 17, 36, 0.95);
  border: 1px solid var(--ds-border);
  color: white;
  font-size: 11px;
  padding: 6px;
  border-radius: var(--ds-radius-sm);
}

.node-body label {
  font-size: 9.5px;
  color: var(--ds-muted);
  text-transform: uppercase;
  font-family: var(--ds-font-mono);
}

.node-anchor {
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--ds-purple);
  border: 2px solid var(--ds-white);
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  cursor: crosshair;
  z-index: 10;
}

.node-anchor.left {
  left: -7px;
}

.node-anchor.right {
  right: -7px;
}

.node-anchor:hover {
  background: var(--ds-white);
  border-color: var(--ds-purple);
  transform: translateY(-50%) scale(1.2);
}

.node-delete-btn {
  background: transparent;
  color: var(--ds-muted);
  border: none;
  font-size: 12px;
  cursor: pointer;
}

.node-delete-btn:hover {
  color: var(--ds-danger);
}

/* Sub Flows Directory Grid & Folders styling */
.sub-flows-folders-grid {
  margin-top: 10px;
}

.folder-card {
  background: rgba(9, 17, 36, 0.65);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.folder-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #7c3aed, #a78bfa);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.folder-card:hover {
  background: rgba(9, 17, 36, 0.95);
  border-color: rgba(124, 58, 237, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.folder-card:hover::before {
  opacity: 1;
}

.folder-icon {
  font-size: 24px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.folder-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

.folder-name {
  font-family: var(--ds-font-body);
  font-weight: 600;
  font-size: 13px;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.folder-badge {
  background: rgba(124, 58, 237, 0.2);
  color: var(--ds-purple-light);
  font-size: 10px;
  font-family: var(--ds-font-mono);
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 99px;
  width: fit-content;
}

.folder-menu-btn {
  background: transparent;
  color: var(--ds-muted);
  border: none;
  font-size: 14px;
  cursor: pointer;
  padding: 4px;
  border-radius: var(--ds-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.folder-menu-btn:hover {
  color: white;
  background: var(--ds-overlay-light);
}

/* Dashed + Create Folder card style */
.folder-create-card {
  background: transparent;
  border: 1px dashed rgba(255,255,255,0.15);
  border-radius: var(--ds-radius-lg);
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all var(--ds-transition-base);
  color: var(--ds-muted);
  font-size: 13px;
  font-weight: 600;
}

.folder-create-card:hover {
  border-color: var(--ds-purple);
  color: white;
  background: rgba(124, 58, 237, 0.03);
}

/* Sub Flow Preview Cards styling */
.sub-flows-cards-grid {
  margin-top: 10px;
}

.sub-flow-card {
  background: rgba(9, 17, 36, 0.85);
  border: 1.5px solid var(--ds-border);
  border-radius: var(--ds-radius-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: all var(--ds-transition-slow);
  min-height: 220px;
}

.sub-flow-card:hover {
  border-color: var(--ds-purple);
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(124, 58, 237, 0.15);
}

.sub-flow-thumbnail {
  height: 120px;
  background: #020712;
  border-bottom: 1px solid var(--ds-border);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.sub-flow-info-box {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.sub-flow-title {
  font-family: var(--ds-font-body);
  font-weight: 700;
  font-size: 14px;
  color: white;
  margin: 0;
}

.sub-flow-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  border-top: 1px solid var(--ds-overlay-light);
  padding-top: 10px;
}

.sub-flow-node-count {
  font-size: 10px;
  color: var(--ds-muted);
  font-family: var(--ds-font-mono);
  background: var(--ds-overlay-light);
  padding: 2px 6px;
  border-radius: var(--ds-radius-sm);
}

/* Sidebar Subnav Active State Styling */
.nav-item-sub.active button {
  color: var(--ds-primary) !important;
  background: rgba(124, 58, 237, 0.08) !important;
  font-weight: 700;
  border-left: 3px solid var(--ds-primary);
  padding-left: 21px; /* Offset the 3px border to keep alignment */
}

/* ─── Global Select / Dropdown Fix ─── */
select, select:focus, select:active {
  background: rgba(9, 17, 36, 0.98) !important;
  color: var(--ds-white) !important;
}
select option, optgroup {
  background: #091124 !important;
  color: var(--ds-white) !important;
}
select option:hover,
select option:focus,
select option:active,
select option:checked {
  background: rgba(99, 102, 241, 0.2) !important;
}

/* Toggle Switch */
.toggle-switch { position:relative; display:inline-block; width:36px; height:20px; cursor:pointer; flex-shrink:0; }
.toggle-switch input { opacity:0; width:0; height:0; }
.toggle-slider { position:absolute; inset:0; background:rgba(255,255,255,0.12); border-radius: var(--ds-radius-md-lg); transition:all 0.25s ease; }
.toggle-slider::before { content:''; position:absolute; left:2px; bottom:2px; width:16px; height:16px; background:var(--ds-white); border-radius:50%; transition:all 0.25s ease; }
.toggle-switch input:checked+.toggle-slider { background:var(--ds-purple); }
.toggle-switch input:checked+.toggle-slider::before { transform:translateX(16px); }

/* ─── Global UI Spacing & Button Polish ─── */
#tab-persona .settings-card + .settings-card,
#tab-persona .settings-card + button,
#tab-persona button + .settings-card {
  margin-top: 16px !important;
}

.action-btn {
  padding: 10px 20px;
  border-radius: var(--ds-radius-md-lg);
  font-size: 13px;
  transition: all var(--ds-transition-base);
  letter-spacing: .2px;
}

.action-btn.small {
  padding: 6px 14px;
  font-size: 11px;
}

/* Improve general spacing between form rows */
.form-group + .form-group,
.form-group + button,
button + .form-group {
  margin-top: 4px;
}

/* Better action button colors */
.action-btn.primary {
  background: linear-gradient(135deg, var(--ds-primary), #b8a67d);
  color: var(--ds-bg);
  border: none;
}
.action-btn.secondary {
  background: rgba(99, 102, 241, 0.12);
  color: #818cf8;
  border: 1px solid rgba(99, 102, 241, 0.2);
}
.action-btn.secondary:hover {
  background: rgba(99, 102, 241, 0.2);
}
.action-btn.success {
  background: rgba(34, 197, 94, 0.12);
  color: var(--ds-success);
  border: 1px solid rgba(34, 197, 94, 0.2);
}
.action-btn.danger {
  background: rgba(239, 68, 68, 0.1);
  color: var(--ds-danger);
  border: 1px solid rgba(239, 68, 68, 0.2);
}
.action-btn.danger:hover {
  background: rgba(239, 68, 68, 0.18);
}

/* Override the default action-btn in promo spots */
#tab-persona .action-btn:not(.small):not(.danger):not(.secondary) {
  background: linear-gradient(135deg, var(--ds-primary), #b8a67d) !important;
  color: var(--ds-bg) !important;
  border: none !important;
}

/* ── Command Center Cards ── */
.cc-page {
  padding: 24px;
}

.cc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.cc-header-copy {
  min-width: 0;
}

.cc-header-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  font-family: var(--ds-font-display);
}

.cc-header-subtitle {
  color: var(--ds-muted);
  margin: 4px 0 0;
  font-size: 13px;
}

.cc-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cc-last-refresh {
  font-size: 11px;
  color: var(--ds-muted);
}

.cc-refresh-btn {
  padding: 6px 12px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.cc-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
}

.cc-card {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-xl);
  padding: 20px;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s;
}
.cc-card:hover { border-color: var(--ds-border-active); }
.cc-card[data-cc-nav] { cursor: pointer; }
.cc-card[data-cc-nav]:hover { background: var(--ds-surface-hover); }

.cc-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.cc-card-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--ds-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.cc-icon-system { background: linear-gradient(135deg, #065f46, #10b981); }
.cc-icon-build { background: linear-gradient(135deg, #1e40af, #3b82f6); }
.cc-icon-telegram { background: linear-gradient(135deg, #075985, #0ea5e9); }
.cc-icon-signals { background: linear-gradient(135deg, #701a75, #d946ef); }
.cc-icon-agents { background: linear-gradient(135deg, #9333ea, #a78bfa); }
.cc-icon-tasks { background: linear-gradient(135deg, #92400e, #f59e0b); }
.cc-icon-backups { background: linear-gradient(135deg, #be123c, #fb7185); }
.cc-card-title {
  font-family: var(--ds-font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--ds-white);
}

.cc-card-body {
  flex: 1;
  font-size: 13px;
  color: var(--ds-muted);
  line-height: 1.6;
}

.cc-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 60px;
  padding: 12px 0;
  color: var(--ds-muted);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}

.cc-error {
  padding: 12px 14px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.18);
  border-radius: var(--ds-radius-md-lg);
  color: var(--ds-danger);
  font-size: 12px;
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cc-error-btn {
  background: transparent;
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: var(--ds-danger);
  padding: 4px 10px;
  border-radius: var(--ds-radius-md);
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
}
.cc-error-btn:hover { background: rgba(239, 68, 68, 0.12); }

.cc-empty {
  text-align: center;
  padding: 16px 12px;
  color: var(--ds-muted);
  font-size: 12px;
  line-height: 1.5;
}

.cc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.cc-row:last-child { border-bottom: none; }
.cc-label { color: var(--ds-muted); font-size: 12px; }
.cc-value { color: var(--ds-white); font-weight: 600; font-size: 13px; }

.cc-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
  vertical-align: middle;
}
.cc-status-dot.ok { background: var(--ds-success); box-shadow: 0 0 6px rgba(52, 211, 153, 0.5); }
.cc-status-dot.warn { background: var(--ds-warning); box-shadow: 0 0 6px rgba(251, 191, 36, 0.5); }
.cc-status-dot.error { background: var(--ds-danger); box-shadow: 0 0 6px rgba(248, 113, 113, 0.5); }

.cc-big-number {
  font-size: 28px;
  font-weight: 800;
  color: var(--ds-white);
  line-height: 1;
}
.cc-big-label {
  font-size: 11px;
  color: var(--ds-muted);
  margin-top: 4px;
}

.cc-summary {
  text-align: center;
  margin-bottom: 12px;
}

.cc-inline-code {
  font-size: 11px;
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 6px;
  border-radius: var(--ds-radius-sm);
}

.cc-card-note {
  margin-top: 8px;
  padding: 8px;
  background: rgba(239, 68, 68, 0.08);
  border-radius: var(--ds-radius-md);
  font-size: 11px;
  color: var(--ds-danger);
}

.cc-action-buy {
  color: var(--ds-success);
}

.cc-action-sell {
  color: var(--ds-danger);
}

.cc-action-neutral {
  color: var(--ds-muted);
}

.cc-agent-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
  appearance: none;
  min-width: 0;
}
.cc-agent-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.cc-agent-row:hover {
  color: var(--ds-white);
}
.cc-agent-row:focus-visible {
  outline: 2px solid rgba(96, 165, 250, 0.45);
  outline-offset: 2px;
}
.cc-agent-row-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cc-agent-row-name {
  color: var(--ds-white);
  font-size: 13px;
  font-weight: 600;
}
.cc-agent-row-meta {
  color: var(--ds-muted);
  font-size: 11px;
}
.cc-agent-row-state {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--ds-radius-pill);
  white-space: nowrap;
  flex-shrink: 0;
}
.cc-agent-row-state.cc-action-buy {
  background: rgba(16, 185, 129, 0.12);
}
.cc-agent-row-state.cc-action-sell {
  background: rgba(239, 68, 68, 0.12);
}

.cc-task-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
  appearance: none;
  min-width: 0;
}
.cc-task-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.cc-task-row:hover {
  color: var(--ds-white);
}
.cc-task-row:focus-visible {
  outline: 2px solid rgba(96, 165, 250, 0.45);
  outline-offset: 2px;
}
.cc-task-row-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cc-task-row-name {
  color: var(--ds-white);
  font-size: 13px;
  font-weight: 600;
}
.cc-task-row-meta {
  color: var(--ds-muted);
  font-size: 11px;
}
.cc-task-row-state {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--ds-radius-pill);
  white-space: nowrap;
  flex-shrink: 0;
  text-transform: capitalize;
}
.cc-task-row-state-pending,
.cc-task-row-state-assigned,
.cc-task-row-state-running {
  background: rgba(251, 191, 36, 0.12);
  color: var(--ds-warning);
}
.cc-task-row-state-completed {
  background: rgba(16, 185, 129, 0.12);
  color: var(--ds-success);
}
.cc-task-row-state-failed,
.cc-task-row-state-cancelled {
  background: rgba(239, 68, 68, 0.12);
  color: var(--ds-danger);
}

.cc-json-block {
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--ds-radius-md-lg);
  background: rgba(255, 255, 255, 0.02);
  color: #e5e7eb;
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}

.cc-detail-panel {
  margin-top: 20px;
  padding: 20px;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-2xl);
  box-shadow: 0 18px 40px rgba(2, 6, 23, 0.16);
  grid-column: 1 / -1;
  overflow: hidden;
}
.cc-detail-header {
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ds-overlay-light);
}
.cc-detail-header-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cc-detail-kicker {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ds-muted);
}
.cc-detail-title {
  margin: 0;
  font-family: var(--ds-font-display);
  font-size: 16px;
  color: var(--ds-white);
  line-height: 1.25;
}
.cc-detail-subtitle {
  margin: 0;
  color: var(--ds-muted);
  font-size: 12px;
  line-height: 1.5;
}
.cc-detail-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.cc-detail-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}
.cc-detail-summary-title {
  font-family: var(--ds-font-display);
  font-size: 16px;
  color: var(--ds-white);
  line-height: 1.25;
}
.cc-detail-summary-subtitle {
  margin-top: 4px;
  font-size: 12px;
  color: var(--ds-muted);
  line-height: 1.4;
}
.cc-detail-summary-state {
  flex-shrink: 0;
}
.cc-detail-section {
  padding-top: 14px;
  border-top: 1px solid var(--ds-overlay-light);
}
.cc-detail-section-title {
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ds-muted);
  line-height: 1.4;
}
.cc-detail-section-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.cc-detail-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}
.cc-detail-stat {
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--ds-radius-md-lg);
  background: rgba(255, 255, 255, 0.02);
}
.cc-detail-stat-label {
  display: block;
  font-size: 11px;
  color: var(--ds-muted);
}
.cc-detail-stat-value {
  display: block;
  margin-top: 4px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ds-white);
}
.cc-chip {
  display: inline-flex;
  align-items: center;
  margin: 0 6px 6px 0;
  padding: 3px 8px;
  border-radius: var(--ds-radius-pill);
  background: rgba(255, 255, 255, 0.06);
  color: var(--ds-white);
  font-size: 11px;
}
.cc-detail-empty {
  padding: 12px 0;
  color: var(--ds-muted);
  font-size: 12px;
}
.cc-detail-error {
  padding: 12px 14px;
  border: 1px solid rgba(239, 68, 68, 0.18);
  border-radius: 10px;
  background: rgba(239, 68, 68, 0.08);
  color: var(--ds-danger);
  font-size: 12px;
  line-height: 1.5;
}

/* ── Status Badge ── */
.cc-badge {
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}
.cc-badge-loading {
  background: rgba(139, 155, 180, 0.15);
  color: var(--ds-muted);
}
.cc-badge-healthy {
  background: rgba(52, 211, 153, 0.15);
  color: var(--ds-success);
}
.cc-badge-warning {
  background: rgba(251, 191, 36, 0.15);
  color: var(--ds-warning);
}
.cc-badge-error {
  background: rgba(248, 113, 113, 0.15);
  color: var(--ds-danger);
}

/* ── Card Footer (last updated per card) ── */
.cc-card-footer {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 10px;
  color: var(--ds-muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 20px;
}
.cc-card-footer .cc-footer-time {
  opacity: 0.7;
}
.cc-card-footer .cc-footer-refresh {
  background: transparent;
  border: none;
  color: var(--ds-primary);
  font-size: 10px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
}
.cc-card-footer .cc-footer-refresh:hover {
  background: rgba(216, 201, 158, 0.1);
}

/* ── AI Workspace / Knowledge Base ── */

/* --- Mission Control v4 --- */
.mc-root {
  height: 100%;
  overflow-y: auto;
}

.mc-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--ds-space-4xl) var(--ds-space-2xl) var(--ds-space-3xl);
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3xl);
}

/* -- Motion (DS transitions only) -- */
.mc-fade-in {
  animation: mc-fade-in var(--ds-transition-slow) both;
}
@keyframes mc-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.mc-lift {
  transition: transform var(--ds-transition-fast), box-shadow var(--ds-transition-fast);
}
.mc-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--ds-shadow-hover-strong);
}
.mc-focus-visible:focus-visible {
  outline: 2px solid var(--ds-primary);
  outline-offset: 2px;
}

/* Hero */
.mc-hero {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-xs);
}

.mc-hero-eyebrow {
  color: var(--ds-primary);
  font-weight: var(--ds-weight-semibold);
  letter-spacing: 0.02em;
}

.mc-hero-title {
  margin: 0;
  font-weight: var(--ds-weight-extrabold);
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.mc-hero-lead {
  max-width: 480px;
  margin: 0;
  color: var(--ds-muted);
  line-height: var(--ds-leading-relaxed);
}

/* Hero stat chips */
.mc-hero-chips {
  margin-top: var(--ds-space-sm);
  flex-wrap: wrap;
}

.mc-hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--ds-space-2xs) var(--ds-space-md);
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-pill);
  color: var(--ds-muted);
}

.mc-chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ds-primary);
  flex-shrink: 0;
}

.mc-chip-dot-ok {
  background: var(--ds-online);
}

.mc-hero-chip-ok {
  border-color: transparent;
}

/* Hero sync status */
.mc-hero-sync {
  margin-top: var(--ds-space-xs);
  font-size: var(--ds-text-xs);
  opacity: 0.6;
}

/* Hero actions */
.mc-hero-actions {
  display: flex;
  gap: var(--ds-space-md);
  margin-top: var(--ds-space-sm);
}

/* Two-column grid */
.mc-grid {
  display: grid;
  grid-template-columns: 1fr 0.42fr;
  gap: var(--ds-space-3xl);
  align-items: start;
}

.mc-grid-main {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3xl);
}

.mc-grid-side {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3xl);
}

/* Focus */
.mc-focus-list {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-sm);
}

.mc-focus-card {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-sm);
  transition: transform var(--ds-transition-fast), box-shadow var(--ds-transition-fast);
}

.mc-focus-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--ds-shadow-hover-lift);
}

.mc-focus-card-head {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-space-md);
}

.mc-focus-num {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-bold);
  color: var(--ds-primary);
  background: rgba(216, 201, 158, 0.12);
  border-radius: 50%;
  flex-shrink: 0;
  line-height: 1;
}

/* Quick Actions � command style */
.mc-actions-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ds-space-sm);
}

.mc-action-cmd {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-sm);
  padding: var(--ds-space-sm) var(--ds-space-md);
  background: transparent;
  border: none;
  border-radius: var(--ds-radius-lg);
  color: var(--ds-text);
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-sm);
  cursor: pointer;
  transition: background var(--ds-transition-fast), color var(--ds-transition-fast);
  white-space: nowrap;
}

.mc-action-cmd:hover {
  background: var(--ds-surface);
  color: var(--ds-text);
}

.mc-action-icon {
  font-size: 15px;
  line-height: 1;
  opacity: 0.7;
}

.mc-action-label {
  font-weight: var(--ds-weight-medium);
}

/* Activity Timeline */
.mc-activity-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mc-activity-item {
  display: flex;
  align-items: center;
  gap: var(--ds-space-sm);
  padding: var(--ds-space-md) 0;
  border-bottom: 1px solid var(--ds-border);
}

.mc-activity-item:last-child {
  border-bottom: none;
}

.mc-activity-time {
  width: 38px;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.mc-activity-dot {
  flex-shrink: 0;
}

/* System Health � borderless */
.mc-health-list {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-xs);
}

.mc-health-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-md);
  padding: var(--ds-space-sm) var(--ds-space-md);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface);
}

/* Nova Suggestions � lighter, with action */
.mc-suggestion-list {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-xs);
}

.mc-suggestion-card {
  display: flex;
  align-items: center;
  gap: var(--ds-space-sm);
  padding: var(--ds-space-sm) var(--ds-space-md);
  border-radius: var(--ds-radius-lg);
  background: transparent;
  transition: background var(--ds-transition-fast);
}

.mc-suggestion-card:hover {
  background: var(--ds-surface);
}

.mc-suggestion-icon {
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}

.mc-suggestion-action {
  flex-shrink: 0;
}

/* Responsive � collapse to single column below 1100px */
@media (max-width: 1100px) {
  .mc-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .mc-container {
    padding: var(--ds-space-2xl) var(--ds-space-lg);
    gap: var(--ds-space-2xl);
  }

  .mc-hero-actions {
    flex-direction: column;
  }

  .mc-hero-actions .ds-btn {
    width: 100%;
  }

  .mc-actions-row {
    grid-template-columns: 1fr;
  }

  .mc-hero-chips {
    flex-direction: column;
    align-items: flex-start;
  }
}
.ai-workspace-shell {
  height: 100%;
  padding: var(--ds-space-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-lg);
  background:
    radial-gradient(circle at 15% 10%, rgba(124, 58, 237, 0.14) 0%, transparent 30%),
    radial-gradient(circle at 85% 20%, rgba(14, 165, 233, 0.1) 0%, transparent 28%),
    linear-gradient(180deg, rgba(3, 10, 22, 0.98), rgba(7, 17, 36, 0.98));
}

.ai-workspace-tabs {
  display: flex;
  gap: var(--ds-space-md);
  flex-wrap: wrap;
  padding: 0 0 var(--ds-space-md);
  border-bottom: 1px solid var(--ds-border);
}

.ai-workspace-tab-btn {
  border: 1px solid var(--ds-border);
  background: var(--ds-overlay-subtle);
  color: var(--ds-muted);
  border-radius: var(--ds-radius-pill);
  padding: var(--ds-space-md) var(--ds-space-lg);
  font-size: var(--ds-text-base);
  font-weight: var(--ds-weight-bold);
  cursor: pointer;
  transition: var(--transition);
}

.ai-workspace-tab-btn:hover {
  color: var(--ds-text);
  background: rgba(255, 255, 255, 0.06);
}

.ai-workspace-tab-btn.active {
  color: #0b1220;
  background: linear-gradient(135deg, var(--ds-primary), rgba(216, 201, 158, 0.78));
  border-color: transparent;
}

.ai-workspace-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.ai-workspace-topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--ds-space-lg);
}

.ai-workspace-eyebrow {
  font-size: var(--ds-text-xs);
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.95);
  margin-bottom: 6px;
}

.ai-workspace-title {
  margin: 0;
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-3xl);
  font-weight: var(--ds-weight-extrabold);
  color: #fff;
}

.ai-workspace-subtitle {
  margin: var(--ds-space-sm) 0 0;
  max-width: 720px;
  color: var(--ds-muted);
  font-size: var(--ds-text-base);
  line-height: 1.6;
}

.ai-workspace-header-actions {
  display: flex;
  gap: var(--ds-space-md);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.workspace-action-btn {
  border-radius: var(--ds-radius-xl);
  padding: var(--ds-space-md) var(--ds-space-lg);
  border: 1px solid var(--ds-border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ds-text);
  font-size: var(--ds-text-base);
  font-weight: var(--ds-weight-bold);
  cursor: pointer;
  transition: var(--transition);
}

.workspace-action-btn:hover {
  background: rgba(255, 255, 255, 0.07);
}

.workspace-action-btn.primary {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.2), rgba(216, 201, 158, 0.2));
  border-color: rgba(216, 201, 158, 0.3);
}

.workspace-header,
.ai-workspace-topbar,
.wt-topbar,
.wc-main-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--ds-space-lg);
}

.workspace-eyebrow,
.ai-workspace-eyebrow,
.wt-eyebrow {
  font-size: var(--ds-text-xs);
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.95);
  margin-bottom: 6px;
}

.workspace-title,
.ai-workspace-title,
.wt-title {
  margin: 0;
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-3xl);
  font-weight: var(--ds-weight-extrabold);
  color: #fff;
}

.workspace-subtitle,
.ai-workspace-subtitle,
.wt-subtitle {
  margin: var(--ds-space-sm) 0 0;
  max-width: 720px;
  color: var(--ds-muted);
  font-size: var(--ds-text-base);
  line-height: 1.6;
}

.workspace-header-actions,
.ai-workspace-header-actions,
.wt-actions,
.wc-header-actions {
  display: flex;
  gap: var(--ds-space-md);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.workspace-toolbar {
  padding: var(--ds-space-lg) var(--ds-space-lg);
  border-radius: var(--ds-radius-2xl);
  border: 1px solid var(--ds-border);
  background: var(--ds-overlay-subtle);
}

.workspace-status-banner {
  padding: var(--ds-space-md) var(--ds-space-lg);
  border-radius: var(--ds-radius-xl);
  font-size: var(--ds-text-base);
  border: 1px solid var(--ds-border);
  color: var(--ds-muted);
  background: var(--ds-overlay-subtle);
}

.workspace-status-banner.workspace-status-loading {
  color: rgba(59, 130, 246, 0.15);
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.25);
}

.workspace-status-banner.workspace-status-error {
  color: rgba(248, 113, 113, 0.15);
  background: rgba(248, 113, 113, 0.08);
  border-color: rgba(248, 113, 113, 0.25);
}

.workspace-state-panel {
  min-height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--ds-space-sm);
  text-align: center;
  border: 1px dashed rgba(148, 163, 184, 0.35);
  border-radius: var(--ds-radius-2xl);
  padding: var(--ds-space-2xl);
  color: var(--ds-muted);
  background: rgba(255, 255, 255, 0.02);
}

.workspace-state-panel h3 {
  margin: 0;
  font-family: var(--ds-font-display);
  color: #fff;
  font-size: var(--ds-text-xl);
}

.workspace-state-panel p {
  margin: 0;
  color: var(--ds-muted);
  line-height: 1.6;
}

.workspace-state-panel.workspace-loading-state,
.workspace-state-panel.workspace-state-loading {
  color: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.25);
  background: rgba(59, 130, 246, 0.07);
}

.workspace-state-panel.workspace-error-state,
.workspace-state-panel.workspace-state-error {
  color: rgba(248, 113, 113, 0.15);
  border-color: rgba(248, 113, 113, 0.3);
  background: rgba(248, 113, 113, 0.06);
}

.workspace-boundary-error {
  max-width: 540px;
  margin: 64px auto;
  text-align: center;
}

.workspace-boundary-error h3 {
  font-size: var(--ds-text-xl);
  margin-bottom: var(--ds-space-sm);
}

.workspace-boundary-error p {
  font-size: var(--ds-text-base);
  line-height: 1.5;
  margin-bottom: var(--ds-space-lg);
}

.workspace-init-loading {
  max-width: 540px;
  margin: 64px auto;
  text-align: center;
}

.workspace-state-panel.workspace-empty-state {
  color: var(--ds-muted);
}

.workspace-state-panel.workspace-state-compact {
  min-height: 0;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  padding: var(--ds-space-lg);
}

.kb-status-banner {
  padding: var(--ds-space-md) var(--ds-space-lg);
  border-radius: var(--ds-radius-xl);
  font-size: var(--ds-text-base);
  border: 1px solid var(--ds-border);
  color: var(--ds-muted);
  background: var(--ds-overlay-subtle);
}

.kb-status-banner.kb-status-loading {
  color: rgba(59, 130, 246, 0.15);
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.25);
}

.kb-status-banner.kb-status-error {
  color: rgba(248, 113, 113, 0.15);
  background: rgba(248, 113, 113, 0.08);
  border-color: rgba(248, 113, 113, 0.25);
}

.kb-toolbar {
  display: flex;
  justify-content: space-between;
  gap: var(--ds-space-lg);
  align-items: flex-end;
  padding: var(--ds-space-lg) var(--ds-space-lg);
  border-radius: var(--ds-radius-2xl);
  border: 1px solid var(--ds-border);
  background: var(--ds-overlay-subtle);
}

.kb-toolbar-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ds-space-md);
  flex: 1;
}

.kb-filter-field,
.kb-form-field {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-sm);
}

.kb-filter-field span,
.kb-form-field span {
  font-size: var(--ds-text-sm);
  color: var(--ds-muted);
  font-weight: var(--ds-weight-bold);
  letter-spacing: 0.2px;
}

.kb-filter-field input,
.kb-form-field input,
.kb-form-field textarea {
  width: 100%;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-xl);
  background: rgba(2, 6, 23, 0.55);
  color: var(--ds-text);
  padding: 11px var(--ds-space-md);
  font-size: var(--ds-text-base);
  transition: var(--transition);
}

.kb-form-field textarea {
  resize: vertical;
  min-height: 220px;
  line-height: 1.6;
}

.kb-filter-field input:focus,
.kb-form-field input:focus,
.kb-form-field textarea:focus {
  border-color: rgba(216, 201, 158, 0.45);
  box-shadow: 0 0 0 3px rgba(216, 201, 158, 0.08);
}

.kb-toolbar-meta {
  display: flex;
  align-items: center;
  gap: var(--ds-space-sm);
}

.kb-total-pill,
.kb-editor-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px var(--ds-space-md);
  border-radius: var(--ds-radius-pill);
  border: 1px solid var(--ds-border);
  background: var(--ds-overlay-subtle);
  font-size: var(--ds-text-base);
  font-weight: var(--ds-weight-bold);
  color: var(--ds-muted);
  white-space: nowrap;
}

.kb-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
  gap: var(--ds-space-lg);
  min-height: 0;
  flex: 1;
}

.kb-workspace {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.kb-list-panel,
.kb-editor-panel {
  min-height: 0;
  border: 1px solid var(--ds-border);
  border-radius: 20px;
  background: rgba(7, 17, 36, 0.72);
  backdrop-filter: blur(10px);
  overflow: hidden;
}

.kb-list-panel {
  display: flex;
  flex-direction: column;
}

.kb-list-header,
.kb-editor-header {
  display: flex;
  justify-content: space-between;
  gap: var(--ds-space-md);
  align-items: center;
  padding: var(--ds-space-lg) var(--ds-space-lg) var(--ds-space-lg);
  border-bottom: 1px solid var(--ds-overlay-light);
}

.kb-list-header h3,
.kb-editor-header h3 {
  margin: 0;
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-xl);
  color: #fff;
}

.kb-list-header span,
.kb-editor-header p {
  margin: 0;
  font-size: var(--ds-text-base);
  color: var(--ds-muted);
}

.kb-list-panel .kb-record-list {
  padding: var(--ds-space-lg);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-md);
}

.kb-record-card {
  padding: var(--ds-space-lg);
  border-radius: var(--ds-radius-2xl);
  border: 1px solid var(--ds-overlay-light);
  background: var(--ds-overlay-subtle);
}

.kb-record-card.active {
  border-color: rgba(216, 201, 158, 0.32);
  box-shadow: 0 0 0 1px rgba(216, 201, 158, 0.08);
}

.kb-record-card-header {
  display: flex;
  justify-content: space-between;
  gap: var(--ds-space-md);
  align-items: flex-start;
}

.kb-record-card h4 {
  margin: 0 0 var(--ds-space-sm);
  font-size: var(--ds-text-lg);
  font-weight: var(--ds-weight-extrabold);
  color: #fff;
}

.kb-record-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-sm);
  font-size: var(--ds-text-sm);
  color: var(--ds-muted);
}

.kb-record-meta span {
  padding: var(--ds-space-xs) var(--ds-space-sm);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-overlay-subtle);
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.kb-record-actions {
  display: flex;
  gap: var(--ds-space-sm);
  flex-shrink: 0;
}

.kb-row-btn {
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-xl);
  padding: var(--ds-space-sm) var(--ds-space-md);
  background: var(--ds-overlay-subtle);
  color: var(--ds-text);
  font-size: var(--ds-text-base);
  font-weight: var(--ds-weight-bold);
  cursor: pointer;
}

.kb-row-btn.danger {
  color: rgba(248, 113, 113, 0.15);
}

.kb-record-summary {
  margin: var(--ds-space-md) 0 0;
  color: var(--ds-muted);
  font-size: var(--ds-text-base);
  line-height: 1.7;
  white-space: pre-wrap;
}

.kb-tag-list {
  display: flex;
  gap: var(--ds-space-sm);
  flex-wrap: wrap;
  margin-top: var(--ds-space-md);
}

.kb-tag-chip {
  display: inline-flex;
  align-items: center;
  padding: var(--ds-space-sm) var(--ds-space-md);
  border-radius: var(--ds-radius-pill);
  background: rgba(124, 58, 237, 0.14);
  color: var(--ds-purple-light);
  border: 1px solid rgba(124, 58, 237, 0.18);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-bold);
}

.kb-tag-chip.muted {
  background: var(--ds-overlay-subtle);
  color: var(--ds-muted);
  border-color: var(--ds-overlay-light);
}

.kb-state-panel {
  padding: var(--ds-space-2xl);
  color: var(--ds-muted);
  font-size: var(--ds-text-base);
  text-align: center;
  border: 1px dashed var(--ds-border);
  border-radius: var(--ds-radius-2xl);
  margin: var(--ds-space-sm);
}

.kb-state-panel.error {
  color: var(--ds-danger);
  border-color: rgba(248, 113, 113, 0.3);
  background: rgba(248, 113, 113, 0.06);
}

.kb-editor-panel {
  display: flex;
  flex-direction: column;
}

.kb-editor-body {
  padding: var(--ds-space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-lg);
  overflow-y: auto;
}

.kb-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ds-space-md);
}

.kb-editor-actions {
  display: flex;
  gap: var(--ds-space-md);
  flex-wrap: wrap;
}

.kb-form-status {
  min-height: 20px;
  font-size: var(--ds-text-base);
  color: var(--ds-muted);
}

.kb-form-status.error {
  color: rgba(248, 113, 113, 0.15);
}

.ai-workspace-placeholder-panel {
  min-height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--ds-space-4xl);
  border-radius: var(--ds-radius-2xl);
  border: 1px solid var(--ds-border);
  background: var(--ds-overlay-subtle);
  text-align: center;
}

.ai-workspace-placeholder-panel h3 {
  margin: var(--ds-space-sm) 0 var(--ds-space-sm);
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-2xl);
  color: #fff;
}

.ai-workspace-placeholder-panel p {
  max-width: 520px;
  margin: 0;
  color: var(--ds-muted);
  font-size: var(--ds-text-base);
  line-height: 1.7;
}

.ai-workspace-placeholder-kicker {
  font-size: var(--ds-text-xs);
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ds-purple-light);
}

.ai-workspace-child-shell,
.ai-workspace-child-root {
  height: 100%;
  min-height: 0;
}

.wc-shell {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-lg);
}

.wc-status-wrap {
  flex: 0 0 auto;
}

.wc-status-banner {
  padding: var(--ds-space-md) var(--ds-space-lg);
  border-radius: var(--ds-radius-xl);
  font-size: var(--ds-text-base);
  border: 1px solid var(--ds-border);
  color: var(--ds-muted);
  background: var(--ds-overlay-subtle);
}

.wc-status-banner.wc-status-loading {
  color: rgba(59, 130, 246, 0.15);
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.25);
}

.wc-status-banner.wc-status-error {
  color: rgba(248, 113, 113, 0.15);
  background: rgba(248, 113, 113, 0.08);
  border-color: rgba(248, 113, 113, 0.25);
}

.wc-layout {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: var(--ds-space-lg);
}

.wc-sidebar,
.wc-main {
  min-height: 0;
  border: 1px solid var(--ds-border);
  border-radius: 20px;
  background: var(--ds-overlay-subtle);
  backdrop-filter: blur(8px);
  overflow: hidden;
}

.wc-sidebar {
  display: flex;
  flex-direction: column;
}

.wc-sidebar-header {
  padding: var(--ds-space-lg);
  display: flex;
  justify-content: space-between;
  gap: var(--ds-space-md);
  align-items: flex-start;
  border-bottom: 1px solid var(--ds-border);
}

.wc-sidebar-header h3,
.wc-panel-header h3 {
  margin: 0;
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-xl);
  color: #fff;
}

.wc-sidebar-header p,
.wc-panel-header p {
  margin: 6px 0 0;
  font-size: var(--ds-text-base);
  line-height: 1.6;
  color: var(--ds-muted);
}

.wc-sidebar-list {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: var(--ds-space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-md);
}

.wc-conversation-item {
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-2xl);
  background: rgba(2, 6, 23, 0.35);
  padding: var(--ds-space-lg);
  display: flex;
  gap: var(--ds-space-md);
  justify-content: space-between;
  align-items: flex-start;
}

.wc-conversation-item.active {
  border-color: rgba(216, 201, 158, 0.45);
  box-shadow: 0 0 0 1px rgba(216, 201, 158, 0.08);
}

.wc-conversation-item-title {
  font-weight: var(--ds-weight-bold);
  color: #fff;
  font-size: var(--ds-text-md);
  line-height: 1.45;
}

.wc-conversation-meta {
  margin-top: var(--ds-space-sm);
  display: flex;
  gap: var(--ds-space-md);
  flex-wrap: wrap;
  font-size: var(--ds-text-sm);
  color: var(--ds-muted);
}

.wc-conversation-actions {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-sm);
  flex-shrink: 0;
}

.wc-empty-note {
  border: 1px dashed rgba(148, 163, 184, 0.35);
  border-radius: var(--ds-radius-xl);
  padding: var(--ds-space-lg);
  color: var(--ds-muted);
  background: rgba(255, 255, 255, 0.02);
  font-size: var(--ds-text-base);
  line-height: 1.6;
}

.wc-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.wc-main-header {
  padding: var(--ds-space-lg);
  border-bottom: 1px solid var(--ds-border);
  display: flex;
  justify-content: space-between;
  gap: var(--ds-space-lg);
  align-items: flex-start;
}

.wc-header-actions {
  display: flex;
  gap: var(--ds-space-md);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.wc-settings-grid {
  padding: var(--ds-space-lg);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(240px, 0.9fr);
  gap: var(--ds-space-lg);
  border-bottom: 1px solid var(--ds-border);
}

.wc-field {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-sm);
}

.wc-field > span {
  font-size: var(--ds-text-sm);
  color: var(--ds-muted);
  font-weight: var(--ds-weight-bold);
  letter-spacing: 0.2px;
}

.wc-input,
.wc-message-input {
  width: 100%;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-xl);
  background: rgba(2, 6, 23, 0.55);
  color: var(--ds-text);
  padding: 11px var(--ds-space-md);
  font-size: var(--ds-text-base);
  transition: var(--transition);
}

.wc-input:focus,
.wc-message-input:focus {
  border-color: rgba(216, 201, 158, 0.45);
  box-shadow: 0 0 0 3px rgba(216, 201, 158, 0.08);
}

.wc-knowledge-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ds-space-md);
}

.wc-knowledge-chip {
  display: flex;
  gap: var(--ds-space-md);
  align-items: flex-start;
  padding: var(--ds-space-md);
  border-radius: var(--ds-radius-xl);
  border: 1px solid var(--ds-border);
  background: rgba(2, 6, 23, 0.35);
  cursor: pointer;
}

.wc-knowledge-chip.selected {
  border-color: rgba(216, 201, 158, 0.35);
  background: rgba(216, 201, 158, 0.08);
}

.wc-knowledge-chip.disabled {
  cursor: default;
  opacity: 0.7;
}

.wc-knowledge-chip input {
  margin-top: 3px;
}

.wc-knowledge-chip strong,
.wc-knowledge-chip em {
  display: block;
  font-style: normal;
}

.wc-knowledge-chip strong {
  color: #fff;
  font-size: var(--ds-text-base);
  line-height: 1.4;
}

.wc-knowledge-chip em {
  margin-top: var(--ds-space-xs);
  color: var(--ds-muted);
  font-size: var(--ds-text-sm);
}

.wc-main-grid {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.wc-message-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.wc-panel-header {
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--ds-border);
}

.wc-message-panel-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: var(--ds-space-lg);
}

.wc-message-list {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-md);
  padding-right: 4px;
}

.wc-message-empty {
  min-height: 240px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  border: 1px dashed rgba(148, 163, 184, 0.35);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.02);
  padding: var(--ds-space-2xl);
}

.wc-message-empty h3 {
  margin: 0 0 var(--ds-space-sm);
  font-family: var(--ds-font-display);
  color: #fff;
  font-size: var(--ds-text-xl);
}

.wc-message-empty p {
  margin: 0;
  color: var(--ds-muted);
  line-height: 1.6;
}

.wc-message {
  max-width: 82%;
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-sm);
}

.wc-message.user {
  align-self: flex-end;
}

.wc-message.assistant,
.wc-message.system {
  align-self: flex-start;
}

.wc-message-meta {
  display: flex;
  gap: var(--ds-space-md);
  flex-wrap: wrap;
  font-size: var(--ds-text-sm);
  color: var(--ds-muted);
}

.wc-message-bubble {
  border-radius: var(--ds-radius-2xl);
  padding: var(--ds-space-lg) var(--ds-space-lg);
  border: 1px solid var(--ds-border);
  background: rgba(2, 6, 23, 0.5);
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.7;
  font-size: var(--ds-text-base);
}

.wc-message.user .wc-message-bubble {
  border-color: rgba(216, 201, 158, 0.35);
  background: rgba(216, 201, 158, 0.09);
}

.wc-message.assistant .wc-message-bubble {
  border-color: rgba(59, 130, 246, 0.25);
  background: rgba(59, 130, 246, 0.08);
}

.wc-message.system .wc-message-bubble {
  border-color: rgba(52, 211, 153, 0.25);
  background: rgba(52, 211, 153, 0.08);
}

.wc-composer {
  border-top: 1px solid var(--ds-border);
  padding: var(--ds-space-lg) var(--ds-space-lg) var(--ds-space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-md);
}

.wc-message-input {
  min-height: 120px;
  resize: vertical;
  line-height: 1.6;
}

.wc-composer-actions {
  display: flex;
  justify-content: space-between;
  gap: var(--ds-space-md);
  align-items: center;
  flex-wrap: wrap;
}

.wc-composer-hint {
  font-size: var(--ds-text-sm);
  color: var(--ds-muted);
}

.wt-shell {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wt-topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--ds-space-lg);
}

.wt-eyebrow {
  font-size: var(--ds-text-xs);
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.95);
  margin-bottom: 6px;
}

.wt-title {
  margin: 0;
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-3xl);
  font-weight: var(--ds-weight-extrabold);
  color: #fff;
}

.wt-subtitle {
  margin: var(--ds-space-sm) 0 0;
  max-width: 760px;
  color: var(--ds-muted);
  font-size: var(--ds-text-base);
  line-height: 1.6;
}

.wt-actions {
  display: flex;
  align-items: center;
  gap: var(--ds-space-md);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.wt-total-pill,
.wt-stat-chip,
.wt-status-pill,
.wt-status-banner,
.wt-detail-state {
  border-radius: 999px;
  border: 1px solid var(--ds-border);
  background: var(--ds-overlay-subtle);
  color: var(--ds-muted);
}

.wt-total-pill {
  padding: 9px var(--ds-space-md);
  font-size: var(--ds-text-base);
  font-weight: var(--ds-weight-bold);
}

.wt-stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-sm);
}

.wt-stat-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-sm);
  padding: var(--ds-space-sm) 11px;
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-bold);
}

.wt-stat-chip strong {
  color: #fff;
}

.wt-status-wrap {
  min-height: 0;
}

.wt-status-banner {
  padding: var(--ds-space-md) var(--ds-space-lg);
  font-size: var(--ds-text-base);
}

.wt-status-banner.wt-status-loading {
  color: rgba(59, 130, 246, 0.15);
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.25);
}

.wt-status-banner.wt-status-error {
  color: rgba(248, 113, 113, 0.15);
  background: rgba(248, 113, 113, 0.08);
  border-color: rgba(248, 113, 113, 0.25);
}

.wt-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(180px, 0.6fr));
  gap: var(--ds-space-md);
  padding: var(--ds-space-lg) var(--ds-space-lg);
  border-radius: var(--ds-radius-2xl);
  border: 1px solid var(--ds-border);
  background: var(--ds-overlay-subtle);
}

.wt-filter,
.wt-field {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-sm);
}

.wt-filter span,
.wt-field span {
  font-size: var(--ds-text-sm);
  color: var(--ds-muted);
  font-weight: var(--ds-weight-bold);
  letter-spacing: 0.2px;
}

.wt-input,
.wt-filter input,
.wt-filter select,
.wt-field input,
.wt-field textarea,
.wt-field select {
  width: 100%;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-xl);
  background: rgba(2, 6, 23, 0.55);
  color: var(--ds-text);
  padding: 11px var(--ds-space-md);
  font-size: var(--ds-text-base);
  transition: var(--transition);
}

.wt-field textarea {
  resize: vertical;
  min-height: 180px;
  line-height: 1.6;
}

.wt-input:focus,
.wt-filter input:focus,
.wt-filter select:focus,
.wt-field input:focus,
.wt-field textarea:focus,
.wt-field select:focus {
  border-color: rgba(216, 201, 158, 0.45);
  box-shadow: 0 0 0 3px rgba(216, 201, 158, 0.08);
}

.wt-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.9fr);
  gap: var(--ds-space-lg);
  min-height: 0;
  flex: 1;
}

.wt-list-panel,
.wt-detail-panel {
  min-height: 0;
  border: 1px solid var(--ds-border);
  border-radius: 20px;
  background: rgba(7, 17, 36, 0.72);
  backdrop-filter: blur(10px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.wt-panel-header {
  display: flex;
  justify-content: space-between;
  gap: var(--ds-space-md);
  align-items: center;
  padding: var(--ds-space-lg) var(--ds-space-lg) var(--ds-space-lg);
  border-bottom: 1px solid var(--ds-overlay-light);
}

.wt-panel-header h3 {
  margin: 0;
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-xl);
  color: #fff;
}

.wt-panel-header p {
  margin: 0;
  font-size: var(--ds-text-base);
  color: var(--ds-muted);
}

.wt-panel-actions {
  display: flex;
  gap: var(--ds-space-md);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.wt-task-list {
  padding: var(--ds-space-lg);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-md);
}

.wt-task-card {
  padding: var(--ds-space-lg);
  border-radius: var(--ds-radius-2xl);
  border: 1px solid var(--ds-overlay-light);
  background: var(--ds-overlay-subtle);
  cursor: pointer;
  transition: var(--transition);
}

.wt-task-card:hover,
.wt-task-card.active {
  border-color: rgba(216, 201, 158, 0.32);
  box-shadow: 0 0 0 1px rgba(216, 201, 158, 0.08);
}

.wt-task-card-header {
  display: flex;
  justify-content: space-between;
  gap: var(--ds-space-md);
  align-items: flex-start;
}

.wt-task-card h4 {
  margin: 0 0 var(--ds-space-sm);
  font-size: var(--ds-text-lg);
  font-weight: var(--ds-weight-extrabold);
  color: #fff;
}

.wt-task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-sm);
  font-size: var(--ds-text-sm);
  color: var(--ds-muted);
}

.wt-task-meta-inline {
  margin-top: var(--ds-space-md);
}

.wt-task-meta span {
  padding: var(--ds-space-xs) var(--ds-space-sm);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-overlay-subtle);
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.wt-status-pill,
.wt-detail-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 11px;
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-extrabold);
  text-transform: uppercase;
}

.wt-status-pill.status-queued,
.wt-detail-state.status-queued {
  color: rgba(59, 130, 246, 0.15);
}

.wt-status-pill.status-assigned,
.wt-detail-state.status-assigned {
  color: rgba(59, 130, 246, 0.15);
}

.wt-status-pill.status-running,
.wt-detail-state.status-running {
  color: rgba(251, 191, 36, 0.15);
}

.wt-status-pill.status-completed,
.wt-detail-state.status-completed {
  color: rgba(52, 211, 153, 0.15);
}

.wt-status-pill.status-failed,
.wt-detail-state.status-failed {
  color: rgba(248, 113, 113, 0.15);
}

.wt-task-summary {
  margin: var(--ds-space-md) 0 0;
  color: var(--ds-muted);
  font-size: var(--ds-text-base);
  line-height: 1.7;
  white-space: pre-wrap;
}

.wt-task-actions {
  display: flex;
  gap: var(--ds-space-sm);
  margin-top: var(--ds-space-md);
  flex-wrap: wrap;
}

.wt-detail-panel {
  padding: 0;
}

.wt-detail-panel .wt-panel-header {
  padding-bottom: var(--ds-space-lg);
}

.wt-form-grid {
  padding: var(--ds-space-lg);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ds-space-lg);
  border-bottom: 1px solid var(--ds-overlay-light);
}

.wt-knowledge-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ds-space-sm);
  max-height: 240px;
  overflow: auto;
  padding-right: 2px;
}

.wt-knowledge-chip {
  display: flex;
  gap: var(--ds-space-md);
  align-items: flex-start;
  padding: var(--ds-space-md) var(--ds-space-md);
  border-radius: var(--ds-radius-xl);
  border: 1px solid var(--ds-overlay-light);
  background: var(--ds-overlay-subtle);
  cursor: pointer;
}

.wt-knowledge-chip.selected {
  border-color: rgba(216, 201, 158, 0.3);
  background: rgba(216, 201, 158, 0.08);
}

.wt-knowledge-chip input {
  margin-top: 3px;
}

.wt-knowledge-chip strong {
  display: block;
  color: #fff;
  font-size: var(--ds-text-base);
}

.wt-knowledge-chip em {
  display: block;
  font-style: normal;
  font-size: var(--ds-text-sm);
  color: var(--ds-muted);
  margin-top: 2px;
}

.wt-empty-note {
  padding: var(--ds-space-lg);
  border-radius: var(--ds-radius-xl);
  border: 1px dashed var(--ds-border);
  color: var(--ds-muted);
  font-size: var(--ds-text-base);
  background: rgba(255, 255, 255, 0.02);
}

.wt-form-status {
  padding: 0 var(--ds-space-lg) var(--ds-space-lg);
  min-height: 20px;
  font-size: var(--ds-text-base);
  color: var(--ds-muted);
}

.wt-detail-divider {
  border-top: 1px solid var(--ds-overlay-light);
}

.wt-detail-summary {
  padding: var(--ds-space-lg) var(--ds-space-lg) var(--ds-space-md);
  display: flex;
  justify-content: space-between;
  gap: var(--ds-space-md);
  align-items: flex-start;
}

.wt-detail-summary h3 {
  margin: 0;
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-xl);
  color: #fff;
}

.wt-detail-summary p {
  margin: var(--ds-space-sm) 0 0;
  color: var(--ds-muted);
  font-size: var(--ds-text-base);
  line-height: 1.6;
}

.wt-detail-kicker {
  font-size: var(--ds-text-xs);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ds-purple-light);
  margin-bottom: 6px;
}

.wt-detail-grid {
  padding: 0 var(--ds-space-lg) var(--ds-space-lg);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ds-space-md);
}

.wt-detail-grid div {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-xs);
  padding: var(--ds-space-md) var(--ds-space-md);
  border-radius: var(--ds-radius-xl);
  border: 1px solid var(--ds-overlay-light);
  background: var(--ds-overlay-subtle);
}

.wt-detail-grid strong {
  font-size: var(--ds-text-sm);
  color: var(--ds-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.wt-detail-grid span {
  color: var(--ds-text);
  font-size: var(--ds-text-base);
  line-height: 1.5;
  white-space: pre-wrap;
}

.wt-detail-section {
  padding: 0 var(--ds-space-lg) var(--ds-space-lg);
}

.wt-detail-section h4 {
  margin: 0 0 var(--ds-space-md);
  font-size: var(--ds-text-md);
  color: #fff;
}

.wt-knowledge-ref {
  padding: var(--ds-space-md) var(--ds-space-lg);
  border-radius: var(--ds-radius-xl);
  border: 1px solid var(--ds-overlay-light);
  background: var(--ds-overlay-subtle);
  margin-bottom: var(--ds-space-md);
}

.wt-knowledge-ref strong {
  display: block;
  color: #fff;
  font-size: var(--ds-text-base);
}

.wt-knowledge-ref span,
.wt-knowledge-ref p {
  display: block;
  color: var(--ds-muted);
  font-size: var(--ds-text-base);
  line-height: 1.6;
  margin: var(--ds-space-xs) 0 0;
}

.wt-json-block {
  margin: 0;
  padding: var(--ds-space-lg);
  border-radius: var(--ds-radius-xl);
  border: 1px solid var(--ds-overlay-light);
  background: rgba(2, 6, 23, 0.7);
  color: var(--ds-text);
  font-size: var(--ds-text-base);
  line-height: 1.6;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.wt-json-block.wt-json-block-error {
  color: rgba(248, 113, 113, 0.15);
}

@media (max-width: 960px) {
  .cc-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .cc-detail-panel {
    padding: 18px;
  }

  .cc-detail-summary {
    flex-direction: column;
    align-items: flex-start;
  }

  .cc-detail-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wt-main-grid {
    grid-template-columns: 1fr;
  }

  .wt-toolbar {
    grid-template-columns: 1fr;
  }

  .wt-detail-grid {
    grid-template-columns: 1fr;
  }

  .wt-topbar {
    flex-direction: column;
  }

  .wt-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .cc-cards-grid {
    grid-template-columns: 1fr;
  }

  .cc-card {
    min-height: 0;
  }

  .cc-detail-panel {
    padding: 16px;
    border-radius: 14px;
  }

  .cc-detail-body {
    gap: 14px;
  }

  .cc-detail-stats-grid {
    grid-template-columns: 1fr;
  }

  .cc-json-block {
    font-size: 11px;
    padding: 10px;
  }

  .ai-workspace-shell {
    padding: var(--ds-space-lg);
  }

  .ai-workspace-topbar {
    flex-direction: column;
  }

  .ai-workspace-header-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .kb-toolbar,
  .kb-main-grid {
    grid-template-columns: 1fr;
  }

  .wc-layout,
  .wc-settings-grid,
  .wc-knowledge-grid {
    grid-template-columns: 1fr;
  }

  .kb-toolbar {
    align-items: stretch;
  }

  .kb-toolbar-fields {
    grid-template-columns: 1fr;
  }

  .kb-form-grid {
    grid-template-columns: 1fr;
  }

  .wt-toolbar {
    align-items: stretch;
  }

  .wc-main-header,
  .wc-sidebar-header,
  .wc-composer-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .wc-header-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .wc-message {
    max-width: 100%;
  }

  .top-header {
    flex-wrap: wrap;
    align-content: center;
    gap: var(--ds-space-sm);
  }

  .header-title h2 {
    font-size: 16px;
  }

  .header-actions {
    width: 100%;
    justify-content: flex-start;
    gap: var(--ds-space-sm);
  }

  .header-template-select {
    font-size: var(--ds-text-sm);
  }

  .backend-status-badge {
    padding: var(--ds-space-xs) 9px;
  }

  .backend-status-text {
    font-size: var(--ds-text-sm);
  }
}

/* ============================================================
   APPLICATION SHELL — Phase 9.1B
   ============================================================ */

/* --- Sidebar Toggle Button --- */
.shell-sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  background: rgba(255,255,255,0.04);
  color: var(--ds-muted);
  cursor: pointer;
  margin-bottom: var(--ds-space-md);
  transition: var(--transition);
  flex-shrink: 0;
}
.shell-sidebar-toggle:hover {
  color: var(--ds-text);
  background: rgba(255,255,255,0.08);
}

/* --- Sidebar Collapse States --- */
.sidebar {
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.shell-sidebar-collapsed .sidebar {
  width: 60px;
  padding: var(--ds-space-md) var(--ds-space-sm);
}

.shell-sidebar-collapsed .sidebar .logo-container {
  padding: 0 0 var(--ds-space-md);
  margin-bottom: var(--ds-space-md);
  justify-content: center;
}

.shell-sidebar-collapsed .sidebar .logo-text {
  display: none;
}

.shell-sidebar-collapsed .sidebar .shell-sidebar-toggle {
  margin-bottom: var(--ds-space-sm);
}

.shell-sidebar-collapsed .sidebar .nav-item button {
  justify-content: center;
  padding: var(--ds-space-md);
  gap: 0;
  font-size: 0;
}

.shell-sidebar-collapsed .sidebar .nav-group-link {
  justify-content: center;
  padding: var(--ds-space-md);
  gap: 0;
  font-size: 0;
}

.shell-sidebar-collapsed .sidebar .nav-item button svg {
  width: 18px;
  height: 18px;
}

.shell-sidebar-collapsed .sidebar .nav-group-link svg {
  width: 18px;
  height: 18px;
}

.shell-sidebar-collapsed .sidebar .nav-item button span:not(.plat-dot):not(.pulse-dot) {
  display: none;
}

.shell-sidebar-collapsed .sidebar .nav-group-children,
.shell-sidebar-collapsed .sidebar .nav-group-toggle {
  display: none;
}

.shell-sidebar-collapsed .sidebar .sidebar-footer {
  display: flex;
  align-items: center;
  gap: var(--ds-space-sm);
  padding: var(--ds-space-md) var(--ds-space-2xs) var(--ds-space-xs);
}

.shell-sidebar-collapsed .sidebar .sidebar-section-label {
  display: none;
}

.shell-sidebar-collapsed .sidebar .sidebar-footer .active-profile-info {
  display: none;
}

.shell-sidebar-collapsed .sidebar .sidebar-footer .active-profile {
  justify-content: center;
  padding: var(--ds-space-sm) 0;
  background: transparent;
  border-color: transparent;
}

.shell-sidebar-collapsed .sidebar .sidebar-footer .sidebar-execution-summary {
  display: none;
}

.shell-sidebar-collapsed .sidebar #integration-channel-list {
  display: none !important;
}

.shell-sidebar-collapsed .sidebar .logo-container .logo-icon {
  margin: 0 auto;
}

/* --- Shell Workspace Layout --- */
.shell-workspace {
  flex: 1;
  display: flex;
  overflow: hidden;
  min-height: 0;
}

.shell-main-region {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

/* Make tab-content sections fill the shell-main-region */
.shell-main-region .tab-content {
  flex: 1;
  overflow-y: auto;
}

/* --- Nova Companion Panel --- */
/* Box/visual properties only. Nova is an overlay: all positioning, sizing and
   open/closed transforms live in the canonical `.shell-assistant.context-panel`
   block (search "UI v3 shell: context is an overlay").

   Removed here (audit 2026-07-20): `width: 340px`, `flex-shrink: 0`,
   `border-left` and `transition: width`. Those made Nova an in-flow flex
   column that subtracted 340px from Mission Control whenever the panel was
   open. Mission Control must keep full width at all times. */
.shell-assistant {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: rgba(4, 11, 25, 0.6);
  backdrop-filter: blur(12px);
}

/* --- Nova Shell --- */
.nova-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* --- Nova Header --- */
.nova-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ds-space-lg) var(--ds-space-lg);
  border-bottom: 1px solid var(--ds-border);
  flex-shrink: 0;
}

.nova-header-info {
  display: flex;
  align-items: center;
  gap: var(--ds-space-md);
}

.nova-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--ds-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ds-text-lg);
  color: var(--ds-text);
  flex-shrink: 0;
}

.nova-name {
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-md);
  font-weight: 700;
  color: var(--ds-text);
}

.nova-status {
  font-size: var(--ds-text-sm);
  display: flex;
  align-items: center;
  gap: var(--ds-space-xs);
  margin-top: 1px;
}

.nova-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  animation: nova-pulse-anim 2s infinite ease-in-out;
}

@keyframes nova-pulse-anim {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

.nova-close-btn {
  width: 26px;
  height: 26px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  background: transparent;
  color: var(--ds-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ds-text-lg);
  transition: var(--transition);
  flex-shrink: 0;
}

.nova-close-btn:hover {
  color: var(--ds-text);
  background: rgba(255,255,255,0.06);
}

/* --- Nova Body --- */
.nova-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--ds-space-md) var(--ds-space-lg);
}

/* --- Nova Summary --- */
.nova-summary {
  margin-bottom: var(--ds-space-lg);
}

.nova-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--ds-space-xs) 0;
  border-bottom: 1px solid var(--ds-overlay-subtle);
  font-size: var(--ds-text-base);
}

.nova-summary-row:last-child {
  border-bottom: none;
}

.nova-summary-label {
  color: var(--ds-muted);
  font-weight: 500;
}

.nova-summary-value {
  color: var(--ds-text);
  text-align: right;
  max-width: 55%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nova-muted {
  color: var(--ds-muted);
  opacity: 0.5;
}

.nova-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  margin-right: var(--ds-space-xs);
  vertical-align: middle;
}

.nova-status-online { background: var(--ds-success); }
.nova-status-degraded { background: var(--ds-warning); }
.nova-status-offline { background: var(--ds-danger); }
.nova-status-unknown { background: var(--ds-muted); }

/* --- Nova Sections --- */
.nova-section {
  margin-bottom: var(--ds-space-lg);
}

.nova-section-title {
  font-size: var(--ds-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ds-muted);
  margin-bottom: var(--ds-space-sm);
  padding: 0 2px;
}

.nova-empty {
  font-size: var(--ds-text-base);
  color: var(--ds-muted);
  opacity: 0.5;
  padding: var(--ds-space-sm) 2px;
}

/* --- Nova Quick Actions --- */
.nova-actions {
  margin-bottom: var(--ds-space-lg);
}

.nova-actions-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-sm);
}

.nova-action-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-xs);
  padding: var(--ds-space-xs) var(--ds-space-md);
  font-size: var(--ds-text-sm);
  font-weight: 500;
  color: var(--ds-muted);
  background: var(--ds-overlay-subtle);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.nova-action-btn:hover {
  color: var(--ds-text);
  background: rgba(124, 58, 237, 0.1);
  border-color: rgba(124, 58, 237, 0.3);
}

.nova-action-btn svg {
  flex-shrink: 0;
}

.nova-section-card {
  margin-bottom: var(--ds-space-lg);
}

.nova-section-card:last-child {
  margin-bottom: 0;
}

.nova-hero-card .oc-card-body,
.nova-actions-card .oc-card-body,
.nova-approvals-card .oc-card-body,
.nova-results-card .oc-card-body,
.nova-recommendations-card .oc-card-body {
  display: grid;
  gap: var(--ds-space-md);
}

.nova-hero-top {
  display: flex;
  justify-content: space-between;
  gap: var(--ds-space-md);
  align-items: flex-start;
}

.nova-hero-copy {
  min-width: 0;
}

.nova-hero-eyebrow {
  color: var(--ds-accent, #d8ff72);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.nova-hero-title {
  margin: 0;
  color: var(--ds-text);
  font-family: var(--ds-font-display);
  font-size: 24px;
  line-height: 1.2;
}

.nova-hero-subtitle {
  margin: 8px 0 0;
  color: var(--ds-muted);
  font-size: var(--ds-text-sm);
  line-height: 1.5;
}

.nova-hero-side {
  display: grid;
  justify-items: end;
  gap: 8px;
  flex-shrink: 0;
}

.nova-hero-refresh {
  color: var(--ds-muted);
  font-size: var(--ds-text-xs);
}

.nova-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.nova-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: #c6d0db;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nova-pill-ready { color: #8dffc1; background: rgba(141, 255, 193, 0.08); }
.nova-pill-streaming { color: #77a7ff; background: rgba(119, 167, 255, 0.08); }
.nova-pill-focus { color: #d8ff72; background: rgba(216, 255, 114, 0.08); }
.nova-pill-warn { color: #ffbf69; background: rgba(255, 191, 105, 0.08); }

.nova-muted-line {
  color: var(--ds-muted);
  font-size: var(--ds-text-sm);
  opacity: 0.72;
}

.nova-urgent-list,
.nova-card-stack {
  display: grid;
  gap: 10px;
}

.nova-urgent-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.045);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
}

.nova-urgent-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-top: 5px;
  background: #d8ff72;
  box-shadow: 0 0 0 4px rgba(216, 255, 114, 0.08);
  flex-shrink: 0;
}

.nova-urgent-text {
  color: #edf2f7;
  font-size: 11px;
  line-height: 1.45;
}

.nova-card-copy {
  display: grid;
  gap: 8px;
}

.nova-card-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  font-size: 11px;
}

.nova-card-label {
  color: var(--ds-muted);
  font-weight: 600;
}

.nova-card-value {
  color: var(--ds-text);
  text-align: right;
  max-width: 70%;
}

.nova-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.nova-action-strip .oc-action-toolbar {
  align-items: center;
}

.nova-stream-skeleton {
  min-height: 180px;
}

@media (max-width: 980px) {
  .nova-hero-top {
    flex-direction: column;
  }

  .nova-hero-side {
    justify-items: start;
  }

  .nova-metric-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Nova Timeline --- */
.nova-timeline {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nova-event {
  display: flex;
  align-items: center;
  gap: var(--ds-space-sm);
  padding: var(--ds-space-xs) 2px;
  font-size: var(--ds-text-sm);
  border-radius: var(--ds-radius-sm);
  transition: background 0.1s ease;
}

.nova-event:hover {
  background: rgba(255,255,255,0.02);
}

.nova-event-icon {
  flex-shrink: 0;
  width: 16px;
  text-align: center;
  color: var(--ds-muted);
  font-size: var(--ds-text-xs);
}

.nova-event-msg {
  flex: 1;
  color: var(--ds-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nova-event-time {
  flex-shrink: 0;
  font-size: var(--ds-text-xs);
  color: var(--ds-muted);
  opacity: 0.5;
}

/* --- Nova Notifications --- */
.nova-notifs {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-xs);
}

.nova-notif {
  display: flex;
  align-items: center;
  gap: var(--ds-space-sm);
  padding: var(--ds-space-sm) var(--ds-space-sm);
  border-radius: var(--ds-radius-md);
  font-size: var(--ds-text-sm);
  cursor: pointer;
  transition: background 0.1s ease;
}

.nova-notif:hover {
  background: rgba(255,255,255,0.04);
}

.nova-notif-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.nova-notif-msg {
  flex: 1;
  color: var(--ds-text);
}

.nova-notif-info { background: rgba(59, 130, 246, 0.06); }
.nova-notif-info .nova-notif-dot { background: var(--ds-info); }

.nova-notif-task { background: rgba(124, 58, 237, 0.06); }
.nova-notif-task .nova-notif-dot { background: var(--ds-purple); }

.nova-notif-warning { background: rgba(234, 179, 8, 0.06); }
.nova-notif-warning .nova-notif-dot { background: var(--ds-warning); }

.nova-notif-error { background: rgba(239, 68, 68, 0.06); }
.nova-notif-error .nova-notif-dot { background: var(--ds-danger); }

/* Generation-2 tablet drawer removed (audit 2026-07-20).
   It re-declared position/width/transform for <=1024px, but the canonical
   `.shell-assistant.context-panel` rules already position the panel as a fixed
   overlay at every breakpoint and outrank these on specificity (0,2,0 vs
   0,1,0), so this block never applied. */

/* --- Nova Responsive: Mobile --- */
/* Panel geometry relocated (audit 2026-07-20) to sit directly after the
   canonical overlay block near the end of this file. Media queries add no
   specificity, so at 0,2,0 these rules tied with the canonical desktop rules
   and lost purely on source order — the bottom sheet never rendered. Only the
   non-conflicting inner typography stays here. */
@media (max-width: 768px) {
  .nova-shell {
    border-radius: 16px 16px 0 0;
  }

  .nova-body {
    padding: var(--ds-space-md) var(--ds-space-lg);
  }
}

/* --- Bottom Composer --- */
.shell-composer {
  border-top: 1px solid var(--ds-border);
  background: rgba(7, 17, 36, 0.6);
  backdrop-filter: blur(10px);
  padding: 10px 24px;
  flex-shrink: 0;
  transition: padding 0.2s ease;
}

.shell-composer-inner {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  max-width: 100%;
}

.shell-composer-expand-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--ds-border);
  border-radius: 6px;
  background: transparent;
  color: var(--ds-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  flex-shrink: 0;
}

.shell-composer-expand-btn:hover {
  color: var(--ds-text);
  background: rgba(255,255,255,0.06);
}

.shell-composer-input {
  flex: 1;
  min-height: 36px;
  max-height: 200px;
  padding: 8px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  color: var(--ds-text);
  font-family: var(--ds-font-body);
  font-size: 13px;
  line-height: 1.4;
  resize: none;
  outline: none;
  transition: border-color 0.2s;
}

.shell-composer-input::placeholder {
  color: var(--ds-muted);
  opacity: 0.6;
}

.shell-composer-input:focus {
  border-color: var(--ds-border-active);
}

.shell-composer-send-btn {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 8px;
  background: var(--ds-primary);
  color: var(--ds-bg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  flex-shrink: 0;
}

.shell-composer-send-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.shell-composer-send-btn:not(:disabled):hover {
  box-shadow: 0 4px 12px var(--primary-glow);
}

.shell-composer-expanded .shell-composer-input {
  min-height: 80px;
  max-height: 400px;
}

/* ============================================================
   UNIFIED WORKSPACE � Sprint 10.6B
   Three-region layout: Left (conversations) | Center (runtime) | Right (context)
   ============================================================ */

.ws-shell {
  display: flex;
  height: 100%;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 10%, rgba(124, 58, 237, 0.03) 0%, transparent 30%),
    radial-gradient(circle at 85% 20%, rgba(14, 165, 233, 0.02) 0%, transparent 28%),
    var(--ds-bg-base, #040b19);
}

/* --- Left Panel: Conversation List --- */
.ws-left {
  width: 240px;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(4, 11, 25, 0.35);
  border-right: 1px solid rgba(255, 255, 255, 0.04);
}

.ws-left-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ds-space-lg) var(--ds-space-lg) var(--ds-space-md);
  flex-shrink: 0;
}

.ws-left-title {
  margin: 0;
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-md);
  font-weight: var(--ds-weight-bold);
  color: var(--ds-text);
}

.ws-left-count {
  font-size: var(--ds-text-sm);
  color: var(--ds-muted);
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--ds-radius-pill);
  padding: 2px var(--ds-space-sm);
}

.ws-left-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--ds-space-sm) var(--ds-space-sm);
}

.ws-conv-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.ws-conv-item {
  padding: var(--ds-space-md) var(--ds-space-md);
  border-radius: var(--ds-radius-lg);
  cursor: pointer;
  transition: background var(--ds-transition-fast);
}

.ws-conv-item:hover {
  background: var(--ds-surface, rgba(255, 255, 255, 0.04));
}

.ws-conv-item.active {
  background: rgba(124, 58, 237, 0.12);
}

.ws-conv-title {
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-medium);
  color: var(--ds-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: var(--ds-space-2xs);
}

.ws-conv-meta {
  display: flex;
  align-items: center;
  gap: var(--ds-space-sm);
  font-size: var(--ds-text-xs);
  color: var(--ds-muted);
}

.ws-conv-agent {
  color: var(--ds-primary);
  font-weight: var(--ds-weight-semibold);
}

.ws-conv-time {
  font-size: var(--ds-text-xs);
  color: var(--ds-muted);
  margin-top: var(--ds-space-2xs);
  opacity: 0.6;
}

.ws-conv-loading,
.ws-conv-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--ds-space-3xl) var(--ds-space-lg);
  color: var(--ds-muted);
  font-size: var(--ds-text-base);
}

.ws-conv-loading p,
.ws-conv-empty p {
  margin: 0 0 var(--ds-space-xs);
  font-size: var(--ds-text-base);
  color: var(--ds-text);
}

/* --- Center Panel: Conversation Runtime --- */
.ws-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

.ws-runtime {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

/* --- Bottom Composer --- */
.ws-composer {
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  padding: var(--ds-space-md) var(--ds-space-lg);
  flex-shrink: 0;
  background: rgba(4, 11, 25, 0.3);
}

.ws-composer-inner {
  display: flex;
  align-items: flex-end;
  gap: var(--ds-space-md);
  max-width: 800px;
  margin: 0 auto;
}

.ws-composer-input {
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--ds-radius-xl);
  padding: var(--ds-space-md) var(--ds-space-lg);
  color: var(--ds-text);
  font-size: var(--ds-text-base);
  font-family: var(--font-body);
  resize: none;
  min-height: 40px;
  max-height: 120px;
  outline: none;
  transition: border-color var(--ds-transition-base), box-shadow var(--ds-transition-base);
}

.ws-composer-input::placeholder {
  color: var(--ds-muted);
}

.ws-composer-input:focus {
  border-color: var(--ds-primary);
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.12);
}

.ws-composer-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ws-composer-send {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--ds-radius-lg);
  background: rgba(255, 255, 255, 0.06);
  color: var(--ds-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--ds-transition-fast);
}

.ws-composer-send:hover:not(:disabled) {
  color: var(--ds-primary);
  background: rgba(124, 58, 237, 0.12);
  border-color: rgba(124, 58, 237, 0.3);
}

.ws-composer-send:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* --- Right Panel: Context --- */
.ws-right {
  width: 300px;
  min-width: 260px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(4, 11, 25, 0.35);
  border-left: 1px solid rgba(255, 255, 255, 0.04);
}

.rp-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.rp-header {
  padding: var(--ds-space-lg) var(--ds-space-lg) var(--ds-space-md);
  flex-shrink: 0;
}

.rp-title {
  margin: 0;
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-md);
  font-weight: var(--ds-weight-bold);
  color: var(--ds-text);
}

.rp-tabs {
  display: flex;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  flex-shrink: 0;
  overflow-x: auto;
}

.rp-tab-btn {
  flex: 1;
  padding: var(--ds-space-sm) var(--ds-space-sm);
  border: none;
  background: transparent;
  color: var(--ds-muted);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-semibold);
  cursor: pointer;
  transition: color var(--ds-transition-fast);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.rp-tab-btn:hover {
  color: var(--ds-text);
}

.rp-tab-btn.active {
  color: var(--ds-primary);
  border-bottom-color: var(--ds-primary);
}

.rp-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--ds-space-md) var(--ds-space-md);
}

.rp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--ds-space-3xl) var(--ds-space-lg);
  color: var(--ds-muted);
  gap: var(--ds-space-xs);
}

.rp-empty p {
  margin: 0 0 var(--ds-space-xs);
  font-size: var(--ds-text-base);
  color: var(--ds-text);
}

.rp-hint {
  font-size: var(--ds-text-sm);
  color: var(--ds-muted);
  opacity: 0.6;
}

.rp-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.06);
  border-top-color: var(--ds-primary);
  border-radius: 50%;
  animation: rp-spin 0.8s linear infinite;
  margin-bottom: var(--ds-space-sm);
}

@keyframes rp-spin {
  to { transform: rotate(360deg); }
}

.rp-list {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-sm);
}

.rp-badge {
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-semibold);
  padding: 2px var(--ds-space-sm);
  border-radius: var(--ds-radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.rp-badge-muted {
  background: rgba(255, 255, 255, 0.06);
  color: var(--ds-muted);
}

.rp-badge-active {
  background: rgba(34, 197, 94, 0.15);
  color: var(--ds-success);
}

.rp-status-completed { color: var(--ds-success); }
.rp-status-running { color: var(--ds-warning); }
.rp-status-queued { color: var(--ds-muted); }
.rp-status-failed { color: var(--ds-danger); }
.rp-status-assigned { color: var(--ds-info); }

/* Task items */
.rp-task-item {
  padding: var(--ds-space-md) var(--ds-space-md);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-overlay-subtle);
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.rp-task-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-sm);
  margin-bottom: var(--ds-space-xs);
}

.rp-task-title {
  font-size: var(--ds-text-base);
  font-weight: var(--ds-weight-semibold);
  color: var(--ds-text);
}

.rp-task-meta {
  display: flex;
  align-items: center;
  gap: var(--ds-space-sm);
  font-size: var(--ds-text-xs);
  color: var(--ds-muted);
}

/* Knowledge items */
.rp-knowledge-item {
  padding: var(--ds-space-md) var(--ds-space-md);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-overlay-subtle);
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.rp-knowledge-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-sm);
  margin-bottom: var(--ds-space-xs);
}

.rp-knowledge-title {
  font-size: var(--ds-text-base);
  font-weight: var(--ds-weight-semibold);
  color: var(--ds-text);
}

.rp-knowledge-summary {
  margin: 0;
  font-size: var(--ds-text-sm);
  color: var(--ds-muted);
  line-height: 1.4;
}

/* Agent items */
.rp-agent-item {
  padding: var(--ds-space-md) var(--ds-space-md);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-overlay-subtle);
  border: 1px solid var(--ds-border);
}

.rp-agent-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-sm);
  margin-bottom: var(--ds-space-xs);
}

.rp-agent-name {
  font-size: var(--ds-text-base);
  font-weight: var(--ds-weight-semibold);
  color: var(--ds-text);
}

.rp-agent-desc {
  margin: 0;
  font-size: var(--ds-text-sm);
  color: var(--ds-muted);
  line-height: 1.4;
}

/* --- Workspace Responsive --- */
@media (max-width: 1100px) {
  .ws-right {
    width: 0;
    min-width: 0;
    border-left: none;
    overflow: hidden;
  }
}

@media (max-width: 900px) {
  .ws-left {
    width: 0;
    min-width: 0;
    border-right: none;
    overflow: hidden;
  }
}

/* ============================================================
   UNIFIED WORKSPACE � Sprint 10.6D
   Message timeline, composer, responsive drawers
   ============================================================ */

/* --- Center Wrap (status banner + center) --- */
.ws-center-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

/* --- Status Banner --- */
.ws-status-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ds-space-sm) var(--ds-space-lg);
  font-size: var(--ds-text-sm);
  flex-shrink: 0;
}

.ws-status-ok {
  background: rgba(34, 197, 94, 0.06);
  color: var(--ds-success);
  border-bottom: 1px solid rgba(34, 197, 94, 0.1);
}

.ws-status-error {
  background: rgba(239, 68, 68, 0.06);
  color: var(--ds-danger);
  border-bottom: 1px solid rgba(239, 68, 68, 0.1);
}

.ws-status-dismiss {
  background: none;
  border: none;
  color: inherit;
  font-size: var(--ds-text-lg);
  cursor: pointer;
  padding: 0 var(--ds-space-xs);
  opacity: 0.6;
}

.ws-status-dismiss:hover {
  opacity: 1;
}

/* --- Message Timeline --- */
.ws-timeline {
  flex: 1;
  overflow-y: auto;
  padding: var(--ds-space-xl) var(--ds-space-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-lg);
}

.ws-msg {
  max-width: 75%;
  padding: var(--ds-space-md) var(--ds-space-lg);
  border-radius: var(--ds-radius-xl);
  font-size: var(--ds-text-base);
  line-height: 1.6;
  word-wrap: break-word;
}

.ws-msg-user {
  align-self: flex-end;
  background: rgba(124, 58, 237, 0.1);
  border: 1px solid rgba(124, 58, 237, 0.15);
  border-bottom-right-radius: var(--ds-radius-sm);
}

.ws-msg-assistant {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom-left-radius: var(--ds-radius-sm);
}

.ws-msg-system {
  align-self: center;
  background: rgba(255, 255, 255, 0.015);
  border: 1px dashed rgba(255, 255, 255, 0.08);
  max-width: 90%;
  font-size: var(--ds-text-sm);
  color: var(--ds-muted);
  text-align: center;
}

.ws-msg-header {
  display: flex;
  align-items: center;
  gap: var(--ds-space-sm);
  margin-bottom: var(--ds-space-xs);
}

.ws-msg-role {
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ds-muted);
}

.ws-msg-user .ws-msg-role {
  color: var(--ds-primary);
}

.ws-msg-time {
  font-size: var(--ds-text-xs);
  color: var(--ds-muted);
  opacity: 0.6;
}

.ws-msg-body {
  color: var(--ds-text);
  white-space: pre-wrap;
}

/* --- Empty State --- */
.ws-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--ds-space-4xl) var(--ds-space-2xl);
  color: var(--ds-muted);
  flex: 1;
  gap: var(--ds-space-md);
}

/* --- Composer Enhancements --- */
.ws-composer-icon-btn {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--ds-radius-md);
  background: transparent;
  color: var(--ds-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color var(--ds-transition-fast);
}

.ws-composer-icon-btn:hover:not(:disabled) {
  color: var(--ds-text);
}

.ws-composer-icon-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.ws-composer-actions-left {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* --- Left Panel Enhancements --- */
.ws-left-actions {
  display: flex;
  gap: var(--ds-space-xs);
}

.ws-left-btn {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--ds-radius-md);
  background: rgba(255, 255, 255, 0.03);
  color: var(--ds-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--ds-transition-fast);
}

.ws-left-btn:hover {
  color: var(--ds-primary);
  background: rgba(124, 58, 237, 0.1);
  border-color: var(--ds-primary);
}

/* --- Right Panel Enhancements --- */
.rp-conversation-badge {
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-semibold);
  padding: 2px var(--ds-space-sm);
  border-radius: var(--ds-radius-sm);
  background: rgba(34, 197, 94, 0.12);
  color: var(--ds-success);
}

.rp-knowledge-attached {
  border-color: rgba(124, 58, 237, 0.2);
  background: rgba(124, 58, 237, 0.04);
}

.rp-knowledge-action {
  margin-top: 6px;
}

.rp-kb-toggle {
  padding: 3px var(--ds-space-md);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-semibold);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ds-muted);
  cursor: pointer;
  transition: all var(--ds-transition-fast);
}

.rp-kb-toggle:hover {
  color: var(--ds-primary);
  border-color: var(--ds-primary);
}

.rp-agent-selected {
  border-color: rgba(124, 58, 237, 0.2);
  background: rgba(124, 58, 237, 0.04);
}

/* --- Task Cards (Inline in Timeline) --- */
.ws-task-card {
  align-self: flex-start;
  max-width: 85%;
  background: rgba(34, 197, 94, 0.04);
  border: 1px solid rgba(34, 197, 94, 0.12);
  border-radius: var(--ds-radius-lg);
}

.ws-task-badge {
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-semibold);
  padding: 2px var(--ds-space-sm);
  border-radius: var(--ds-radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.ws-task-status-pending {
  background: rgba(234, 179, 8, 0.12);
  color: var(--ds-warning);
}

.ws-task-status-assigned {
  background: rgba(59, 130, 246, 0.12);
  color: var(--ds-info);
}

.ws-task-status-running {
  background: rgba(124, 58, 237, 0.12);
  color: var(--ds-purple);
}

.ws-task-status-completed {
  background: rgba(34, 197, 94, 0.12);
  color: var(--ds-success);
}

.ws-task-status-failed {
  background: rgba(239, 68, 68, 0.12);
  color: var(--ds-danger);
}

.ws-task-title {
  font-size: var(--ds-text-base);
  font-weight: var(--ds-weight-medium);
  color: var(--ds-text);
  margin-bottom: var(--ds-space-xs);
}

.ws-task-result {
  font-size: var(--ds-text-base);
  color: var(--ds-muted);
  margin-top: var(--ds-space-xs);
  padding: var(--ds-space-sm) var(--ds-space-sm);
  background: rgba(34, 197, 94, 0.03);
  border-radius: var(--ds-radius-sm);
  white-space: pre-wrap;
}

.ws-task-error {
  font-size: var(--ds-text-base);
  color: var(--ds-danger);
  margin-top: var(--ds-space-xs);
  padding: var(--ds-space-sm) var(--ds-space-sm);
  background: rgba(239, 68, 68, 0.03);
  border-radius: var(--ds-radius-sm);
  white-space: pre-wrap;
}

.ws-task-progress {
  display: flex;
  align-items: center;
  gap: var(--ds-space-sm);
  font-size: var(--ds-text-base);
  color: var(--ds-muted);
  margin-top: var(--ds-space-xs);
}

/* --- Typing Indicator --- */
.ws-typing {
  opacity: 0.7;
}

.ws-typing-dots {
  display: flex;
  gap: var(--ds-space-xs);
  padding: var(--ds-space-xs) 0;
}

.ws-typing-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ds-muted);
  animation: ws-typing-bounce 1.4s infinite ease-in-out;
}

.ws-typing-dot:nth-child(1) { animation-delay: 0s; }
.ws-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.ws-typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes ws-typing-bounce {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1); }
}

/* --- Task Expansion (Right Panel) --- */
.rp-task-expanded {
  border-color: rgba(124, 58, 237, 0.2);
}

.rp-task-detail {
  margin-top: var(--ds-space-sm);
  padding: var(--ds-space-sm);
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--ds-radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.rp-task-detail-row {
  font-size: var(--ds-text-base);
  color: var(--ds-muted);
  margin-bottom: var(--ds-space-xs);
  line-height: 1.4;
}

.rp-task-detail-row:last-child {
  margin-bottom: 0;
}

.rp-task-detail-row strong {
  color: var(--ds-text);
  font-weight: 600;
}

.rp-task-detail-error {
  color: var(--ds-danger);
}

/* --- Responsive: Medium (context collapsible) --- */
@media (max-width: 1100px) {
  .ws-right {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 20;
    transform: translateX(100%);
    transition: transform var(--ds-transition-base);
  }

  .ws-right.rp-open {
    transform: translateX(0);
  }
}

/* --- Responsive: Narrow (drawer mode) --- */
@media (max-width: 768px) {
  .ws-shell {
    position: relative;
  }

  .ws-left {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 20;
    width: 280px;
    transform: translateX(0);
    transition: transform var(--ds-transition-base);
  }

  .ws-left.ws-drawer-closed {
    transform: translateX(-100%);
  }

  .ws-center {
    width: 100%;
  }

  .ws-msg {
    max-width: 95%;
  }
}

/* Generation-2 duplicate removed (audit 2026-07-20).
   This zeroed the panel width at <=1024px, which is meaningless for a fixed
   overlay and conflicted with the tablet drawer rules. Narrow-viewport
   auto-close is now handled by appShell.js applyResponsive(), which toggles
   .shell-assistant-closed without destroying the saved preference. */

/* --- Responsive: Narrow (sidebar overlay) --- */
@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: -260px;
    width: 260px;
    height: 100vh;
    z-index: 1000;
    transition: left var(--ds-transition-slow);
  }

  .shell-sidebar-collapsed .sidebar {
    left: -260px;
    width: 260px;
    padding: var(--ds-space-2xl) var(--ds-space-lg);
  }

  body.shell-narrow-layout .sidebar.shell-sidebar-collapsed {
    left: 0;
    width: 260px;
    padding: var(--ds-space-lg) var(--ds-space-md);
  }

  body.shell-narrow-layout .sidebar .logo-text { display: block; }
  body.shell-narrow-layout .sidebar .nav-item button span:not(.plat-dot):not(.pulse-dot) { display: inline; }
  body.shell-narrow-layout .sidebar .sidebar-section-label { display: block; }
  body.shell-narrow-layout .sidebar .sidebar-footer { display: flex; }
  body.shell-narrow-layout .sidebar .sidebar-footer .active-profile-info { display: flex; }
  body.shell-narrow-layout .sidebar .sidebar-footer .sidebar-execution-summary { display: flex; }
  body.shell-narrow-layout .sidebar .nav-group-children { display: flex; }
  body.shell-narrow-layout .sidebar #integration-channel-list { display: block; }

  body.shell-narrow-layout .sidebar .nav-item button {
    font-size: var(--ds-text-md);
    gap: var(--ds-space-md);
    justify-content: flex-start;
    padding: var(--ds-space-md) var(--ds-space-lg);
  }

  .shell-composer {
    padding: 8px 16px;
  }

  .main-content {
    width: 100vw;
  }
}

/* ================================================================
   ONEAI Unified Components � Sprint 10.8C
   Single source of truth for shared component styles.
   All workspace modules reference these classes.
   ================================================================ */

/* -- Spinner / Loading ------------------------------------------- */

.oc-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.06);
  border-top-color: var(--ds-primary, #d8c99e);
  border-radius: 50%;
  animation: oc-spin 0.7s linear infinite;
  flex-shrink: 0;
}

.oc-spinner-sm {
  width: 12px;
  height: 12px;
  border-width: 1.5px;
}

@keyframes oc-spin {
  to { transform: rotate(360deg); }
}

.oc-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-sm, 8px);
  padding: var(--ds-space-xl, 24px);
  color: var(--ds-muted, #8b9bb4);
  font-size: var(--ds-text-sm, 12px);
}

.oc-loading-label {
  margin: 0;
  font-size: inherit;
}

/* -- Message ----------------------------------------------------- */

.oc-msg {
  padding: var(--ds-space-md, 12px) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.oc-msg:last-child {
  border-bottom: none;
}

.oc-msg-header {
  display: flex;
  align-items: center;
  gap: var(--ds-space-sm, 8px);
  margin-bottom: var(--ds-space-xs, 4px);
}

.oc-msg-role {
  font-size: var(--ds-text-xs, 10px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ds-muted, #8b9bb4);
}

.oc-msg-time {
  font-size: var(--ds-text-xs, 10px);
  color: rgba(255, 255, 255, 0.3);
}

.oc-msg-body {
  font-size: var(--ds-text-sm, 12px);
  line-height: 1.55;
  color: var(--ds-text, #f3f5f9);
  white-space: pre-wrap;
  word-break: break-word;
}

.oc-msg-user .oc-msg-role  { color: var(--ds-primary, #d8c99e); }
.oc-msg-assistant .oc-msg-role { color: var(--ds-purple, #7c3aed); }
.oc-msg-system .oc-msg-role { color: var(--ds-muted, #8b9bb4); }
.oc-msg-task .oc-msg-role { color: var(--ds-info, #3b82f6); }
.oc-msg-notification .oc-msg-role { color: var(--ds-warning, #eab308); }

/* -- Badge ------------------------------------------------------- */

.oc-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--ds-radius-pill, 999px);
  font-size: var(--ds-text-xs, 10px);
  font-weight: 600;
  text-transform: capitalize;
  white-space: nowrap;
  line-height: 1.4;
  background: rgba(255,255,255,0.06);
  color: var(--text-muted, #8b9bb4);
  flex-shrink: 0;
}

.oc-badge-md {
  padding: 4px 12px;
  font-size: var(--ds-text-xs, 10px);
}

.oc-badge-running,
.oc-badge-active,
.oc-badge-working {
  background: rgba(124,58,237,0.15);
  color: var(--ds-purple, #7c3aed);
}

.oc-badge-completed,
.oc-badge-success,
.oc-badge-online {
  background: rgba(34,197,94,0.15);
  color: var(--ds-success, #22c55e);
}

.oc-badge-failed,
.oc-badge-error,
.oc-badge-offline {
  background: rgba(239,68,68,0.15);
  color: var(--ds-danger, #ef4444);
}

.oc-badge-pending,
.oc-badge-queued {
  background: rgba(234,179,8,0.12);
  color: var(--ds-warning, #eab308);
}

.oc-badge-info,
.oc-badge-thinking,
.oc-badge-attention {
  background: rgba(59,130,246,0.12);
  color: var(--ds-info, #3b82f6);
}

.oc-badge-muted {
  background: rgba(255,255,255,0.06);
  color: var(--text-muted, #8b9bb4);
}

.oc-badge-degraded,
.oc-badge-warning {
  background: rgba(234,179,8,0.12);
  color: var(--ds-warning, #eab308);
}

.oc-badge-ready {
  background: rgba(34,197,94,0.15);
  color: var(--ds-success, #22c55e);
}

.oc-badge-waiting,
.oc-badge-idle {
  background: rgba(59,130,246,0.12);
  color: var(--ds-info, #3b82f6);
}

.oc-badge-new {
  background: rgba(124,58,237,0.15);
  color: var(--ds-purple, #7c3aed);
}

/* -- Empty State ------------------------------------------------- */

.oc-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--ds-space-3xl, 32px) var(--ds-space-lg, 16px);
  text-align: center;
  min-height: 140px;
}

.oc-empty svg {
  margin-bottom: var(--ds-space-sm, 8px);
  opacity: 0.3;
}

.oc-empty-title {
  margin: 0 0 var(--ds-space-xs, 4px);
  font-size: var(--ds-text-md, 14px);
  font-weight: 600;
  color: var(--text-main, #f3f5f9);
}

.oc-empty-hint {
  margin: 0;
  font-size: var(--ds-text-sm, 12px);
  color: var(--text-muted, #8b9bb4);
}

/* -- Timeline Item ----------------------------------------------- */

.oc-timeline-item {
  display: flex;
  align-items: center;
  gap: var(--ds-space-sm, 8px);
  padding: var(--ds-space-xs, 4px) 0;
  font-size: var(--ds-text-sm, 12px);
  color: var(--text-main, #f3f5f9);
}

.oc-timeline-icon {
  flex-shrink: 0;
  width: 16px;
  text-align: center;
  font-size: var(--ds-text-sm, 12px);
  color: var(--ds-muted, #8b9bb4);
}

.oc-timeline-msg {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.oc-timeline-time {
  flex-shrink: 0;
  font-size: var(--ds-text-xs, 10px);
  color: var(--text-muted, rgba(255,255,255,0.3));
}

/* -- Section Header ---------------------------------------------- */

.oc-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--ds-space-sm, 8px);
  border-bottom: 1px solid var(--border-main, rgba(255,255,255,0.06));
}

.oc-section-header-text {
  display: flex;
  align-items: baseline;
  gap: var(--ds-space-sm, 8px);
}

.oc-section-title {
  margin: 0;
  font-size: var(--ds-text-lg, 16px);
  font-weight: 600;
  color: var(--text-main, #f3f5f9);
}

.oc-section-subtitle {
  font-size: var(--ds-text-xs, 10px);
  color: var(--text-muted, #8b9bb4);
}

.oc-section-actions {
  display: flex;
  align-items: center;
  gap: var(--ds-space-xs, 4px);
}

/* -- Context Panel ----------------------------------------------- */

.oc-context-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.oc-context-header {
  display: flex;
  align-items: center;
  gap: var(--ds-space-sm, 8px);
  padding: var(--ds-space-md, 12px) var(--ds-space-lg, 16px);
  border-bottom: 1px solid var(--border-main, rgba(255,255,255,0.06));
}

.oc-context-title {
  margin: 0;
  font-size: var(--ds-text-md, 14px);
  font-weight: 600;
  color: var(--text-main, #f3f5f9);
}

.oc-context-badge {
  padding: 2px 8px;
  border-radius: var(--ds-radius-pill, 999px);
  font-size: var(--ds-text-xs, 10px);
  font-weight: 600;
  background: rgba(34,197,94,0.12);
  color: var(--ds-success, #22c55e);
}

.oc-context-body {
  flex: 1;
  overflow-y: auto;
}

/* -- Typing Indicator -------------------------------------------- */

.oc-typing-dots {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 0;
}

.oc-typing-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ds-muted, #8b9bb4);
  animation: oc-typing-pulse 1.2s ease-in-out infinite;
}

.oc-typing-dot:nth-child(2) { animation-delay: 0.15s; }
.oc-typing-dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes oc-typing-pulse {
  0%, 60%, 100% { opacity: 0.25; transform: scale(0.85); }
  30% { opacity: 1; transform: scale(1); }
}

/* -- Adaptive Context Panel -------------------------------------- */

.rp-shell-adaptive {
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: background-color 0.2s var(--ds-ease-standard, ease);
}

.rp-header { display: flex; align-items: center; gap: var(--ds-space-sm, 8px); }
.rp-title { margin: 0; }
.rp-conversation-badge { font-size: var(--ds-text-xs, 10px); }
.rp-mode-icon { font-size: var(--ds-text-md, 14px); }

/* -- Reason Badge ----------------------------------------------- */

.rp-reason-badge {
  display: flex;
  align-items: center;
  gap: var(--ds-space-xs, 4px);
  padding: var(--ds-space-2xs, 2px) var(--ds-space-sm, 8px);
  margin: var(--ds-space-2xs, 2px) var(--ds-space-md, 12px) 0;
  border-radius: var(--ds-radius-sm, 4px);
  font-size: var(--ds-text-xs, 10px);
  font-weight: 500;
  background: rgba(139,155,180,0.08);
  color: var(--ds-muted, #8b9bb4);
  animation: rp-fade-in 0.2s ease-out;
}

.rp-reason-icon { font-size: var(--ds-text-xs, 10px); line-height: 1; }
.rp-reason-text { flex: 1; }

.rp-reason-dismiss {
  background: none;
  border: none;
  padding: 0 2px;
  color: inherit;
  cursor: pointer;
  font-size: var(--ds-text-xs, 10px);
  opacity: 0.5;
  line-height: 1;
}

.rp-reason-dismiss:hover { opacity: 1; }

@keyframes rp-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* -- Mode-Specific Badge Colors --------------------------------- */

.ds-badge-trading { background: rgba(234,179,8,0.12); color: var(--ds-warning, #eab308); }
.ds-badge-crm { background: rgba(59,130,246,0.12); color: var(--ds-info, #3b82f6); }
.ds-badge-automation { background: rgba(124,58,237,0.12); color: var(--ds-purple, #7c3aed); }
.ds-badge-knowledge { background: rgba(34,197,94,0.12); color: var(--ds-success, #22c55e); }
.ds-badge-content { background: rgba(236,72,153,0.12); color: #ec4899; }
.ds-badge-neutral { background: rgba(139,155,180,0.08); color: var(--ds-muted, #8b9bb4); }

/* -- Adaptive Tabs ---------------------------------------------- */

.rp-tabs-adaptive {
  display: flex;
  gap: 2px;
  padding: var(--ds-space-xs, 4px) var(--ds-space-md, 12px);
  border-bottom: 1px solid var(--border-main, rgba(255,255,255,0.06));
  overflow-x: auto;
  scrollbar-width: none;
}

.rp-tabs-adaptive::-webkit-scrollbar { display: none; }

.rp-tab-btn {
  flex: 0 0 auto;
  padding: var(--ds-space-xs, 4px) var(--ds-space-sm, 8px);
  border: none;
  border-radius: var(--ds-radius-sm, 4px);
  background: transparent;
  color: var(--ds-muted, #8b9bb4);
  font-size: var(--ds-text-xs, 10px);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s var(--ds-ease-standard, ease);
}

.rp-tab-btn:hover { background: rgba(139,155,180,0.08); color: var(--text-main, #f3f5f9); }
.rp-tab-btn.active { background: rgba(139,155,180,0.12); color: var(--text-main, #f3f5f9); font-weight: 600; }

.rp-tab-icon { font-size: var(--ds-text-xs, 10px); line-height: 1; }

/* -- Body Adaptive ---------------------------------------------- */

.rp-body-adaptive {
  flex: 1;
  overflow-y: auto;
  padding: var(--ds-space-sm, 8px) var(--ds-space-md, 12px);
  transition: opacity 0.15s var(--ds-ease-standard, ease);
}

/* -- Mode Cards ------------------------------------------------- */

.rp-mode-card {
  margin-bottom: var(--ds-space-sm, 8px);
  animation: rp-card-in 0.2s ease-out;
}

@keyframes rp-card-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.rp-mode-card-header {
  display: flex;
  align-items: center;
  gap: var(--ds-space-xs, 4px);
  margin-bottom: var(--ds-space-xs, 4px);
}

.rp-mode-card-icon { font-size: var(--ds-text-sm, 12px); line-height: 1; }
.rp-mode-card-title {
  font-size: var(--ds-text-xs, 10px);
  font-weight: 600;
  color: var(--text-main, #f3f5f9);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.rp-mode-card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--ds-space-2xs, 2px) 0;
  font-size: var(--ds-text-xs, 10px);
  color: var(--ds-muted, #8b9bb4);
}

.rp-mode-card-row-title {
  font-weight: 500;
  color: var(--text-main, #f3f5f9);
}

.rp-mode-card-empty {
  font-size: var(--ds-text-xs, 10px);
  color: var(--ds-muted, #8b9bb4);
  margin: 0;
  padding: var(--ds-space-2xs, 2px) 0;
}

.rp-mode-card-hint {
  font-size: var(--ds-text-xs, 10px);
  color: var(--ds-muted, #8b9bb4);
  margin: var(--ds-space-2xs, 2px) 0 0;
}

/* -- Confidence Bar --------------------------------------------- */

.rp-confidence-bar {
  height: 4px;
  border-radius: 2px;
  background: rgba(139,155,180,0.12);
  overflow: hidden;
  margin: var(--ds-space-2xs, 2px) 0;
}

.rp-confidence-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--ds-success, #22c55e);
  transition: width 0.3s var(--ds-ease-standard, ease);
}

/* ONEAI UI v3 shared product surfaces */
.oc-product-page {
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 24px 28px 36px !important;
  overflow: auto !important;
  color: var(--text-main);
  background: #070a0e !important;
  scrollbar-width: thin;
  scrollbar-color: #29313c transparent;
}

.oc-product-page > :first-child {
  margin-top: 0 !important;
}

.oc-product-page h1,
.oc-product-page h2,
.oc-product-page h3,
.oc-product-page h4 {
  color: #edf2f7 !important;
  font-family: var(--font-display);
  letter-spacing: -0.025em;
}

.oc-product-page h2 {
  font-size: clamp(20px, 2vw, 28px) !important;
  font-weight: 650 !important;
}

.oc-product-page p,
.oc-product-page label,
.oc-product-page small {
  line-height: 1.5;
}

.oc-product-panel,
.oc-product-page .settings-card,
.oc-product-page .dashboard-card,
.oc-product-page .connect-card,
.oc-product-page .signal-card,
.oc-product-page .board-column,
.oc-product-page .subflow-card {
  border: 1px solid rgba(255, 255, 255, 0.075) !important;
  border-radius: 16px !important;
  background: #0e141b !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.24) !important;
}

.oc-product-button,
.oc-product-page .action-btn {
  min-height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 9px !important;
  background: rgba(255, 255, 255, 0.035) !important;
  color: #b3bdc9 !important;
  box-shadow: none !important;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.oc-product-button:hover,
.oc-product-page .action-btn:hover {
  border-color: rgba(216, 255, 114, 0.28) !important;
  background: rgba(216, 255, 114, 0.075) !important;
  color: #edf2f7 !important;
  transform: translateY(-1px);
}

.oc-product-button.primary,
.oc-product-page .action-btn.primary,
.oc-product-page button[type="submit"] {
  border-color: rgba(216, 255, 114, 0.45) !important;
  background: #d8ff72 !important;
  color: #10150d !important;
  font-weight: 750;
}

.oc-product-control,
.oc-product-page input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.oc-product-page textarea,
.oc-product-page select {
  min-height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 10px !important;
  background: rgba(5, 8, 11, 0.72) !important;
  color: #edf2f7 !important;
  box-shadow: none !important;
  outline: none;
}

.oc-product-control:focus,
.oc-product-page input:focus,
.oc-product-page textarea:focus,
.oc-product-page select:focus {
  border-color: rgba(216, 255, 114, 0.44) !important;
  box-shadow: 0 0 0 3px rgba(216, 255, 114, 0.06) !important;
}

.oc-product-page table,
.oc-product-table {
  width: 100%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.075) !important;
  border-radius: 14px;
  border-collapse: separate;
  border-spacing: 0;
  background: rgba(10, 14, 19, 0.72) !important;
}

.oc-product-page th {
  padding: 11px 14px !important;
  background: rgba(255, 255, 255, 0.025) !important;
  color: #687486 !important;
  font-size: 9px !important;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.oc-product-page td {
  padding: 12px 14px !important;
  border-color: rgba(255, 255, 255, 0.05) !important;
  color: #b3bdc9;
}

.oc-product-page .empty-state,
.oc-product-page .oc-empty,
.oc-product-page [class*="empty"] {
  border-color: rgba(255, 255, 255, 0.075) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.018) !important;
}

.oc-card,
.oc-empty-state,
.oc-loading-skeleton {
  animation: oc-fade-in 180ms ease-out both;
}

.oc-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.032), rgba(255, 255, 255, 0.016));
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.oc-card:hover {
  border-color: rgba(216, 255, 114, 0.18);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
  transform: translateY(-1px);
}

.oc-card-body {
  min-width: 0;
}

.oc-card-footer {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.oc-card-kicker,
.oc-section-subtitle {
  color: #8b98a7;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.oc-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.025);
  color: #c6d0db;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.oc-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.02);
  color: #c6d0db;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.oc-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.03);
}

.oc-badge-healthy { color: #8dffc1; background: rgba(141, 255, 193, 0.08); }
.oc-badge-busy { color: #d8ff72; background: rgba(216, 255, 114, 0.08); }
.oc-badge-warning { color: #ffbf69; background: rgba(255, 191, 105, 0.08); }
.oc-badge-offline { color: #ff8a8a; background: rgba(255, 138, 138, 0.08); }
.oc-badge-running { color: #77a7ff; background: rgba(119, 167, 255, 0.08); }
.oc-badge-queued { color: #c6d0db; background: rgba(198, 208, 219, 0.08); }
.oc-badge-processing { color: #d8ff72; background: rgba(216, 255, 114, 0.08); }

.oc-status-card,
.oc-metric-card,
.oc-task-card,
.oc-approval-card,
.oc-timeline-card {
  min-width: 0;
}

.oc-status-card-head,
.oc-metric-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.oc-status-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: rgba(216, 255, 114, 0.08);
  color: #d8ff72;
  flex: 0 0 auto;
}

.oc-status-card-title {
  margin: 4px 0 0;
  color: #edf2f7;
  font-size: 14px;
  line-height: 1.35;
}

.oc-metric-card-value {
  margin-top: 6px;
  color: #edf2f7;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
}

.oc-metric-card-detail {
  margin-top: 6px;
  color: #8b98a7;
  font-size: 11px;
  line-height: 1.45;
}

.oc-timeline {
  display: grid;
  gap: 10px;
}

.oc-timeline-item {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.045);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
}

.oc-timeline-icon {
  color: #d8ff72;
}

.oc-timeline-msg {
  color: #edf2f7;
  font-size: 11px;
  line-height: 1.45;
  word-break: break-word;
}

.oc-timeline-time {
  color: #8b98a7;
  font-size: 9px;
  white-space: nowrap;
}

.oc-task-card-body,
.oc-approval-card-body {
  display: grid;
  gap: 10px;
}

.oc-action-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
}

.oc-action-toolbar-leading,
.oc-action-toolbar-actions,
.oc-action-toolbar-trailing {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.oc-action-toolbar-actions {
  flex: 1;
  justify-content: flex-end;
}

.oc-empty-state {
  display: grid;
  place-items: center;
  gap: 6px;
  min-height: 120px;
  padding: 24px;
  text-align: center;
}

.oc-loading-skeleton {
  display: grid;
  gap: 10px;
  padding: 14px 4px;
}

.oc-loading-skeleton-bar {
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%);
  background-size: 200% 100%;
  animation: oc-shimmer 1.35s linear infinite;
}

.oc-loading-skeleton-title {
  height: 14px;
  max-width: 180px;
}

.oc-loading-skeleton-line {
  height: 10px;
}

.oc-loading-skeleton-label {
  color: #8b98a7;
  font-size: 10px;
}

.oc-product-page :is(button, [role="button"], a, input, textarea, select):focus-visible {
  outline: 2px solid rgba(216, 255, 114, 0.75) !important;
  outline-offset: 2px;
}

@keyframes oc-fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes oc-shimmer {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}

.oc-product-inbox {
  padding: 0 !important;
  overflow: hidden !important;
}

.oc-product-inbox.active {
  display: flex !important;
  flex-direction: column;
}

.oc-product-inbox .inbox-layout,
.oc-product-inbox .crm-inbox-layout {
  min-height: 0;
  flex: 1;
}

.oc-product-contacts #contacts-table-body > div,
.oc-product-contacts #contacts-table-header {
  border-color: rgba(255, 255, 255, 0.055) !important;
  background-color: transparent !important;
}

.oc-product-contacts #contacts-table-body > div:hover {
  background: rgba(216, 255, 114, 0.035) !important;
}

.oc-product-boards #boards-kanban-container {
  align-items: stretch;
  gap: 14px !important;
}

.oc-product-signals > div,
.oc-product-automation > div,
.oc-product-media > div,
.oc-product-connect > div,
.oc-product-persona > div,
.oc-product-analytics > div {
  width: min(1180px, 100%);
  margin-left: auto;
  margin-right: auto;
}

.oc-product-signals code,
.oc-product-signals pre {
  border-color: rgba(255, 255, 255, 0.075) !important;
  background: rgba(5, 8, 11, 0.72) !important;
  color: #b3bdc9 !important;
}

.oc-product-automation .settings-card {
  padding: 20px !important;
}

.oc-product-media #media-dropzone {
  min-height: 180px !important;
  border: 1px dashed rgba(216, 255, 114, 0.24) !important;
  background: radial-gradient(circle at 50% 0%, rgba(216, 255, 114, 0.055), transparent 55%) !important;
}

.oc-product-bot-builder {
  padding: 0 !important;
  overflow: hidden !important;
}

.oc-product-bot-builder .bot-builder-header,
.oc-product-bot-builder .builder-toolbar {
  border-color: rgba(255, 255, 255, 0.075) !important;
  background: rgba(10, 14, 19, 0.88) !important;
  backdrop-filter: blur(18px);
}

.oc-product-bot-builder .flow-node,
.oc-product-bot-builder .bot-node {
  border-color: rgba(255, 255, 255, 0.1) !important;
  border-radius: 14px !important;
  background: #111720 !important;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.28) !important;
}

.oc-product-persona .settings-grid,
.oc-product-connect .connect-grid {
  gap: 16px !important;
}

.oc-product-ai-workspace {
  padding: 0 !important;
  overflow: hidden !important;
}

.oc-product-ai-workspace.active {
  display: block !important;
}

@media (max-width: 900px) {
  .oc-product-page { padding: 18px 16px 28px !important; }
  .oc-product-signals [style*="grid-template-columns:1fr 1fr"],
  .oc-product-automation [style*="grid-template-columns:repeat(2"],
  .oc-product-media [style*="display:flex"] { grid-template-columns: 1fr !important; flex-direction: column; }
}

@media (max-width: 640px) {
  .oc-product-page { padding: 14px 12px 24px !important; }
  .oc-product-page h2 { font-size: 21px !important; }
  .oc-product-page .settings-card { padding: 16px !important; }
}

/* ============================================================
   WORKSPACE VISUAL REDESIGN — Complete Pass
   Workspace-scoped overrides only.
   ============================================================ */

.ws-shell {
  display: grid;
  grid-template-columns: minmax(250px, 280px) minmax(0, 1fr) minmax(300px, 340px);
  gap: var(--ds-space-lg, 16px);
  height: 100%;
  min-height: 0;
  padding: var(--ds-space-lg, 16px);
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 0%, rgba(124, 58, 237, 0.14) 0%, transparent 26%),
    radial-gradient(circle at 82% 8%, rgba(14, 165, 233, 0.1) 0%, transparent 22%),
    linear-gradient(180deg, rgba(3, 10, 22, 0.96), rgba(4, 11, 25, 0.99));
}

.ws-left,
.ws-center,
.ws-right {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--ds-border-subtle, rgba(255, 255, 255, 0.04));
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(8, 18, 36, 0.88), rgba(4, 11, 25, 0.96));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}

.ws-left {
  width: auto;
  flex-shrink: 1;
}

.ws-center {
  flex: 1;
}

.ws-right {
  width: auto;
  flex-shrink: 1;
}

.ws-left-header {
  align-items: flex-start;
  gap: var(--ds-space-md, 12px);
  padding: 18px 18px 14px;
}

.ws-left-heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.ws-left-eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ds-muted, #8b9bb4);
}

.ws-left-title {
  font-size: 20px;
  line-height: 1.15;
}

.ws-left-count {
  display: inline-flex;
  align-self: flex-start;
  margin-top: 2px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--ds-border-subtle, rgba(255, 255, 255, 0.04));
  background: var(--ds-surface-interactive, rgba(255, 255, 255, 0.04));
  color: var(--ds-muted, #8b9bb4);
  font-size: 11px;
  font-weight: 600;
}

.ws-left-body {
  padding: 0 10px 12px;
}

.ws-panel-surface {
  border-radius: 20px;
  border: 1px solid var(--ds-border-subtle, rgba(255, 255, 255, 0.04));
  background: rgba(255, 255, 255, 0.02);
}

.ws-conv-list {
  gap: 8px;
}

.ws-conv-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 14px 14px 12px;
  border-radius: 18px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  transition:
    background var(--ds-transition-base, 0.2s ease),
    border-color var(--ds-transition-base, 0.2s ease),
    transform var(--ds-transition-base, 0.2s ease);
}

.ws-conv-item:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.04);
  transform: translateY(-1px);
}

.ws-conv-item.active {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.14), rgba(255, 255, 255, 0.03));
  border-color: rgba(124, 58, 237, 0.24);
  box-shadow: 0 10px 20px rgba(124, 58, 237, 0.12);
}

.ws-conv-avatar {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(216, 201, 158, 0.2), rgba(124, 58, 237, 0.18));
  color: var(--ds-text, #f3f5f9);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.ws-conv-copy {
  flex: 1;
  min-width: 0;
}

.ws-conv-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.ws-conv-title {
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ds-text, #f3f5f9);
}

.ws-conv-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0;
  transition: opacity var(--ds-transition-base, 0.2s ease);
}

.ws-conv-item:hover .ws-conv-actions,
.ws-conv-item.active .ws-conv-actions {
  opacity: 1;
}

.ws-conv-action {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--ds-muted, #8b9bb4);
  cursor: pointer;
  transition:
    background var(--ds-transition-base, 0.2s ease),
    color var(--ds-transition-base, 0.2s ease),
    border-color var(--ds-transition-base, 0.2s ease);
}

.ws-conv-action:hover {
  color: var(--ds-text, #f3f5f9);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.08);
}

.ws-conv-action.danger:hover {
  color: var(--ds-danger, #ef4444);
  border-color: rgba(239, 68, 68, 0.2);
}

.ws-conv-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 11px;
  color: var(--ds-muted, #8b9bb4);
}

.ws-conv-count {
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--ds-text, #f3f5f9);
}

.ws-conv-time {
  opacity: 0.72;
}

.ws-conv-loading {
  align-items: flex-start;
  padding: 18px 16px;
}

.ws-conv-empty {
  align-items: flex-start;
  gap: 8px;
  padding: 22px 16px;
}

.ws-conv-empty-icon {
  opacity: 0.28;
}

.ws-conv-empty-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ds-text, #f3f5f9);
}

.ws-conv-empty-hint {
  margin: 0;
  color: var(--ds-muted, #8b9bb4);
  font-size: 12px;
  line-height: 1.6;
}

.ws-center-wrap {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}

.ws-status-banner {
  border-radius: 18px;
  border: 1px solid var(--ds-border-subtle, rgba(255, 255, 255, 0.04));
  background: rgba(255, 255, 255, 0.03);
  padding: 12px 16px;
  gap: 12px;
}

.ws-status-ok {
  background: rgba(34, 197, 94, 0.08);
  color: var(--ds-success, #22c55e);
  border-color: rgba(34, 197, 94, 0.16);
}

.ws-status-error {
  background: rgba(239, 68, 68, 0.08);
  color: var(--ds-danger, #ef4444);
  border-color: rgba(239, 68, 68, 0.16);
}

.ws-center {
  flex: 1;
  min-height: 0;
  gap: 12px;
}

.ws-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-radius: 24px;
  border: 1px solid var(--ds-border-subtle, rgba(255, 255, 255, 0.04));
  background: linear-gradient(180deg, rgba(8, 18, 36, 0.84), rgba(4, 11, 25, 0.95));
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.24);
}

.ws-thread-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px 14px;
  border-bottom: 1px solid var(--ds-border-subtle, rgba(255, 255, 255, 0.04));
}

.ws-thread-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.ws-thread-kicker {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ds-muted, #8b9bb4);
}

.ws-thread-title {
  margin: 0;
  font-family: var(--ds-font-display, var(--font-display));
  font-size: 24px;
  line-height: 1.15;
  color: var(--ds-text, #f3f5f9);
}

.ws-thread-copy-text {
  margin: 0;
  max-width: 760px;
  color: var(--ds-muted, #8b9bb4);
  font-size: 13px;
  line-height: 1.6;
}

.ws-thread-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.ws-thread-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--ds-border-subtle, rgba(255, 255, 255, 0.04));
  background: rgba(255, 255, 255, 0.04);
  color: var(--ds-text, #f3f5f9);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.ws-runtime {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.ws-empty-surface {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 30px 28px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 18%, rgba(124, 58, 237, 0.12), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
}

.ws-loading-surface {
  justify-content: center;
}

.ws-empty-hero {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 720px;
}

.ws-empty-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ds-muted, #8b9bb4);
}

.ws-empty-title {
  margin: 0;
  font-family: var(--ds-font-display, var(--font-display));
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.05;
  color: var(--ds-text, #f3f5f9);
}

.ws-empty-copy {
  margin: 0;
  color: var(--ds-muted, #8b9bb4);
  font-size: 14px;
  line-height: 1.7;
}

.ws-empty-actions {
  width: 100%;
  max-width: 560px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: 72px;
  gap: 9px;
}

.ws-empty-action {
  width: 100%;
  height: 100%;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 72px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid var(--ds-border-subtle, rgba(255, 255, 255, 0.04));
  background: var(--ds-surface-interactive, rgba(255, 255, 255, 0.04));
  color: var(--ds-text, #f3f5f9);
  text-align: left;
  cursor: pointer;
  transition:
    transform var(--ds-transition-base, 0.2s ease),
    background var(--ds-transition-base, 0.2s ease),
    border-color var(--ds-transition-base, 0.2s ease);
}

.ws-empty-action-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #5ea1ff;
  background: rgba(94, 161, 255, 0.08);
  border: 1px solid rgba(94, 161, 255, 0.1);
}

.ws-empty-action-icon svg,
.ws-empty-action-arrow svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ws-empty-action-copy {
  min-width: 0;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 3px;
}

.ws-empty-action-arrow {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  display: grid;
  place-items: center;
  color: #8492a5;
}

.ws-empty-action-arrow svg { width: 18px; height: 18px; }

.ws-empty-action[data-ws-action="knowledge"] .ws-empty-action-icon { color: #9b6cff; background: rgba(155, 108, 255, 0.09); border-color: rgba(155, 108, 255, 0.12); }
.ws-empty-action[data-ws-action="task"] .ws-empty-action-icon { color: #ff853d; background: rgba(255, 133, 61, 0.08); border-color: rgba(255, 133, 61, 0.11); }
.ws-empty-action[data-ws-action="review"] .ws-empty-action-icon { color: #42c7a0; background: rgba(66, 199, 160, 0.08); border-color: rgba(66, 199, 160, 0.11); }
.ws-empty-action.primary .ws-empty-action-icon { color: #d8ff72; background: rgba(216, 255, 114, 0.09); border-color: rgba(216, 255, 114, 0.12); }

.ws-empty-action:hover {
  transform: translateY(-1px);
  background: var(--ds-surface-interactive-hover, rgba(255, 255, 255, 0.06));
  border-color: rgba(124, 58, 237, 0.2);
}

.ws-empty-action.primary {
  background: linear-gradient(180deg, rgba(216, 201, 158, 0.22), rgba(124, 58, 237, 0.1));
  border-color: rgba(216, 201, 158, 0.26);
  box-shadow: 0 12px 26px rgba(124, 58, 237, 0.14);
}

.ws-empty-action-label {
  font-size: 14px;
  font-weight: 700;
}

.ws-empty-action-hint {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ds-muted, #8b9bb4);
}

.ws-thread-empty {
  min-height: 100%;
}

.ws-timeline {
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 22px 28px;
}

.ws-msg {
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--ds-border-subtle, rgba(255, 255, 255, 0.04));
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

.ws-msg-user {
  align-self: flex-end;
  background: linear-gradient(180deg, rgba(124, 58, 237, 0.14), rgba(124, 58, 237, 0.08));
  border-color: rgba(124, 58, 237, 0.2);
}

.ws-msg-assistant {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.035);
}

.ws-msg-system {
  align-self: stretch;
  max-width: none;
  background: rgba(255, 255, 255, 0.018);
  border-style: dashed;
  color: var(--ds-muted, #8b9bb4);
}

.ws-msg-header {
  margin-bottom: 0;
  justify-content: space-between;
}

.ws-msg-role {
  font-size: 11px;
  letter-spacing: 0.14em;
}

.ws-msg-body {
  font-size: 14px;
  line-height: 1.7;
}

.ws-task-card {
  align-self: flex-start;
  max-width: 100%;
  background: rgba(34, 197, 94, 0.05);
  border: 1px solid rgba(34, 197, 94, 0.14);
  border-radius: 20px;
}

.ws-task-title {
  font-size: 15px;
}

.ws-task-result,
.ws-task-error {
  margin-top: 2px;
  padding: 10px 12px;
  border-radius: 14px;
}

.ws-composer {
  padding: 0 22px 22px;
  border-top: none;
  background: transparent;
}

.ws-composer-shell {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid var(--ds-border-subtle, rgba(255, 255, 255, 0.04));
  background: linear-gradient(180deg, rgba(8, 18, 36, 0.86), rgba(5, 12, 24, 0.98));
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
}

.ws-composer-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ws-composer-hints {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ws-composer-shortcut {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--ds-border-subtle, rgba(255, 255, 255, 0.04));
  background: rgba(255, 255, 255, 0.04);
  color: var(--ds-muted, #8b9bb4);
  font-size: 11px;
  font-weight: 600;
}

.ws-composer-inner {
  max-width: none;
  margin: 0;
  align-items: flex-end;
  gap: 12px;
}

.ws-composer-input {
  min-height: 72px;
  max-height: 170px;
  padding: 14px 16px;
  border-radius: 20px;
  border: 1px solid var(--ds-border-subtle, rgba(255, 255, 255, 0.04));
  background: rgba(255, 255, 255, 0.05);
  color: var(--ds-text, #f3f5f9);
  font-size: 15px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.ws-composer-input:focus {
  border-color: rgba(124, 58, 237, 0.35);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}

.ws-composer-send {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  border: 1px solid rgba(124, 58, 237, 0.25);
  background: linear-gradient(180deg, rgba(216, 201, 158, 0.18), rgba(124, 58, 237, 0.12));
  color: var(--ds-primary, #d8c99e);
}

.ws-composer-send:hover:not(:disabled) {
  border-color: rgba(216, 201, 158, 0.4);
  background: linear-gradient(180deg, rgba(216, 201, 158, 0.24), rgba(124, 58, 237, 0.18));
  color: var(--ds-text, #f3f5f9);
}

.ws-composer-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--ds-muted, #8b9bb4);
  font-size: 12px;
}

.ws-composer-draft {
  color: var(--ds-text, #f3f5f9);
  opacity: 0.78;
}

.ws-composer-status {
  margin-left: auto;
}

.ws-right {
  border-left: 1px solid var(--ds-border-subtle, rgba(255, 255, 255, 0.04));
}

.rp-shell-adaptive {
  padding: 16px;
}

.rp-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 0 0 12px;
}

.rp-title {
  font-size: 18px;
  line-height: 1.2;
}

.rp-conversation-badge {
  margin-top: 2px;
}

.rp-reason-badge {
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid var(--ds-border-subtle, rgba(255, 255, 255, 0.04));
  background: rgba(255, 255, 255, 0.04);
}

.rp-tabs-adaptive {
  margin-bottom: 12px;
  padding-bottom: 6px;
  gap: 8px;
  border-bottom: 1px solid var(--ds-border-subtle, rgba(255, 255, 255, 0.04));
}

.rp-tab-btn {
  flex: 1 1 auto;
  min-height: 36px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ds-muted, #8b9bb4);
}

.rp-tab-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--ds-text, #f3f5f9);
}

.rp-tab-btn.active {
  background: rgba(124, 58, 237, 0.12);
  border-color: rgba(124, 58, 237, 0.18);
  color: var(--ds-text, #f3f5f9);
}

.rp-body-adaptive {
  padding: 0;
  gap: 10px;
}

.rp-mode-card {
  padding: 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--ds-border-subtle, rgba(255, 255, 255, 0.04));
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.16);
}

.rp-mode-card-header {
  justify-content: space-between;
  margin-bottom: 10px;
}

.rp-mode-card-title {
  letter-spacing: 0.14em;
}

.rp-mode-card-row {
  padding: 6px 0;
  font-size: 12px;
}

.rp-mode-card-empty {
  padding: 2px 0 0;
  line-height: 1.6;
}

.rp-mode-card-hint {
  margin-top: 8px;
}

.rp-confidence-bar {
  margin: 8px 0 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(139, 155, 180, 0.1);
}

.rp-confidence-fill {
  border-radius: 999px;
}

@media (max-width: 1280px) {
  .ws-shell {
    grid-template-columns: minmax(230px, 250px) minmax(0, 1fr) minmax(280px, 300px);
  }
}

@media (max-width: 1100px) {
  .ws-shell {
    grid-template-columns: minmax(220px, 240px) minmax(0, 1fr);
  }

  .ws-right {
    display: none;
  }
}

@media (max-width: 900px) {
  .ws-shell {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 12px;
  }

  .ws-left {
    max-height: 320px;
  }

  .ws-thread-head {
    flex-direction: column;
  }

  .ws-thread-meta {
    justify-content: flex-start;
  }
}

@media (max-width: 768px) {
  .ws-empty-actions {
    grid-template-columns: 1fr;
  }

  .ws-composer {
    padding: 0;
  }

  .ws-composer-shell {
    border-radius: 20px;
  }

  .ws-composer-toolbar,
  .ws-composer-meta {
    flex-direction: column;
    align-items: flex-start;
  }

  .ws-composer-status {
    margin-left: 0;
  }
}

/* Mission Control - UI v3 production page */
.mc-root {
  height: 100%;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #29313c transparent;
}

.mc-v3-container {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 24px 28px 42px;
  color: #edf2f7;
}

.mc-v3-eyebrow {
  display: block;
  color: #687486;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.mc-v3-eyebrow.mc-v3-accent { color: #d8ff72; }
.mc-v3-eyebrow.mc-v3-warm { color: #ffbf69; }

.mc-v3-nova {
  position: relative;
  min-height: 206px;
  padding: 25px 28px 22px 99px;
  overflow: hidden;
  border: 1px solid rgba(216, 255, 114, 0.13);
  border-radius: 24px;
  background:
    radial-gradient(circle at 4% 20%, rgba(216, 255, 114, 0.11), transparent 27%),
    linear-gradient(140deg, rgba(20, 27, 34, 0.96), rgba(11, 15, 20, 0.96));
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.38);
}

.mc-v3-nova::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(90deg, #000, transparent 72%);
}

.mc-v3-orbit {
  position: absolute;
  top: 30px;
  left: 29px;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(216, 255, 114, 0.25);
  border-radius: 50%;
  animation: mc-v3-float 5s ease-in-out infinite;
}

.mc-v3-orbit::before,
.mc-v3-orbit::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px dashed rgba(216, 255, 114, 0.2);
  border-radius: 50%;
  animation: mc-v3-spin 14s linear infinite;
}

.mc-v3-orbit::after { inset: -7px; animation-direction: reverse; }
.mc-v3-core { position: absolute; inset: 14px; border-radius: 50%; background: #d8ff72; box-shadow: 0 0 24px rgba(216, 255, 114, 0.65); }
.mc-v3-orbit i { position: absolute; top: 5px; left: 3px; width: 5px; height: 5px; border-radius: 50%; background: #fff; }
.mc-v3-nova-copy { position: relative; z-index: 1; }
.mc-v3-nova-copy h1 { margin: 7px 0 5px; font-size: 25px; font-weight: 620; letter-spacing: -0.04em; }
.mc-v3-nova-copy p { margin: 0; color: #7f8a99; font-size: 12px; }

.mc-v3-command-box {
  position: relative;
  z-index: 1;
  margin-top: 18px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 16px;
  background: rgba(5, 8, 11, 0.55);
  transition: 0.25s;
}

.mc-v3-command-box:focus-within { border-color: rgba(216, 255, 114, 0.45); box-shadow: 0 0 0 3px rgba(216, 255, 114, 0.06); }
.mc-v3-command-box textarea { display: block; width: 100%; height: 44px; padding: 14px 16px 4px; resize: none; border: 0; outline: 0; background: transparent; color: #edf2f7; font: inherit; }
.mc-v3-command-box textarea::placeholder { color: #637080; }
.mc-v3-command-tools { min-height: 39px; display: flex; align-items: center; gap: 8px; padding: 0 8px 7px; }
.mc-v3-command-tools button,
.mc-v3-suggestions button,
.mc-v3-section-heading button,
.mc-v3-timeline-content button { border: 0; background: transparent; color: #7f8a99; cursor: pointer; font: inherit; }
.mc-v3-command-tools > button:not(.mc-v3-execute) { height: 28px; border-radius: 8px; }
.mc-v3-command-tools > button:not(.mc-v3-execute):hover { color: #edf2f7; background: rgba(255, 255, 255, 0.06); }
.mc-v3-command-tools > span { margin-left: auto; color: #586473; font-size: 9px; }
.mc-v3-command-tools .mc-v3-execute { height: 29px; padding: 0 12px; border-radius: 8px; background: #d8ff72; color: #11160d; font-size: 10px; font-weight: 800; }
.mc-v3-command-tools .mc-v3-execute:disabled { opacity: 0.36; cursor: not-allowed; }
.mc-v3-execute b { margin-left: 7px; }
.mc-v3-suggestions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.mc-v3-suggestions button { padding: 6px 9px; border: 1px solid rgba(255, 255, 255, 0.075); border-radius: 999px; font-size: 9px; }
.mc-v3-suggestions button:hover { border-color: rgba(216, 255, 114, 0.25); color: #b3bdc9; }

.mc-v3-content-grid { display: grid; grid-template-columns: minmax(460px, 1fr) 320px; gap: 28px; margin-top: 28px; }
.mc-v3-flow,
.mc-v3-decisions { min-width: 0; }
.mc-v3-section + .mc-v3-section { margin-top: 28px; }
.mc-v3-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.mc-v3-section-heading h2 { margin: 5px 0 0; font-size: 15px; font-weight: 620; letter-spacing: -0.02em; }
.mc-v3-section-heading button { padding: 3px; font-size: 10px; }
.mc-v3-section-heading button:hover { color: #d8ff72; }
.mc-v3-section-heading.is-small { align-items: center; }
.mc-v3-section-heading.is-small h2 { font-size: 13px; }

.mc-v3-timeline { position: relative; }
.mc-v3-timeline::before { content: ""; position: absolute; top: 12px; bottom: 14px; left: 57px; width: 1px; background: linear-gradient(#d8ff72, rgba(255, 255, 255, 0.06) 46%, transparent); }
.mc-v3-timeline-item { display: grid; grid-template-columns: 44px 28px 1fr; margin-bottom: 10px; }
.mc-v3-timeline-item > time { padding-top: 13px; color: #596676; font-size: 9px; font-weight: 700; }
.mc-v3-marker { position: relative; }
.mc-v3-marker span { position: absolute; top: 15px; left: 10px; width: 8px; height: 8px; border: 2px solid #566170; border-radius: 50%; background: #070a0e; }
.mc-v3-timeline-item.is-running .mc-v3-marker span { border-color: #d8ff72; box-shadow: 0 0 10px rgba(216, 255, 114, 0.5); }
.mc-v3-timeline-item.is-warning .mc-v3-marker span { border-color: #ffbf69; }
.mc-v3-timeline-content { padding: 14px 16px; border: 1px solid rgba(255, 255, 255, 0.075); border-radius: 16px; background: linear-gradient(140deg, rgba(255, 255, 255, 0.048), rgba(255, 255, 255, 0.018)); }
.mc-v3-timeline-content.is-compact { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: rgba(255, 255, 255, 0.018); }
.mc-v3-timeline-top { display: flex; align-items: center; gap: 8px; color: #778392; font-size: 9px; }
.mc-v3-status { display: inline-block; padding: 3px 6px; border-radius: 5px; font-size: 7px; font-weight: 900; letter-spacing: 0.12em; }
.mc-v3-status.is-running { color: #d8ff72; background: rgba(216, 255, 114, 0.09); }
.mc-v3-status.is-done { margin-right: 9px; color: #8dffc1; background: rgba(141, 255, 193, 0.08); }
.mc-v3-status.is-waiting { margin-right: 9px; color: #ffbf69; background: rgba(255, 191, 105, 0.09); }
.mc-v3-timeline-content h3 { margin: 8px 0 5px; font-size: 12px; font-weight: 600; }
.mc-v3-timeline-content.is-compact h3 { display: inline; margin: 0; }
.mc-v3-timeline-content p { margin: 0; color: #7f8a99; font-size: 10px; line-height: 1.55; }
.mc-v3-timeline-content button { flex-shrink: 0; font-size: 10px; }
.mc-v3-progress,
.mc-v3-mini-progress { overflow: hidden; background: rgba(255, 255, 255, 0.06); }
.mc-v3-progress { height: 3px; margin-top: 12px; border-radius: 3px; }
.mc-v3-progress i,
.mc-v3-mini-progress i { display: block; width: var(--mc-progress); height: 100%; border-radius: inherit; background: linear-gradient(90deg, #d8ff72, #8dffc1); }
.mc-v3-meta { display: flex; justify-content: space-between; margin-top: 7px; color: #657180; font-size: 8px; }
.mc-v3-quiet { color: #657180; font-size: 9px; }

.mc-v3-task-list { border-top: 1px solid rgba(255, 255, 255, 0.075); }
.mc-v3-task-row { width: 100%; display: grid; grid-template-columns: 34px minmax(150px, 1fr) 90px 34px; gap: 10px; align-items: center; padding: 11px 2px; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.045); background: transparent; color: #edf2f7; text-align: left; cursor: pointer; }
.mc-v3-task-row:hover { background: rgba(255, 255, 255, 0.018); }
.mc-v3-task-symbol { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; font-size: 11px; }
.mc-v3-task-symbol.is-trading { color: #d8ff72; background: rgba(216, 255, 114, 0.1); }
.mc-v3-task-symbol.is-crm { color: #77a7ff; background: rgba(119, 167, 255, 0.1); }
.mc-v3-task-symbol.is-automation { color: #ffbf69; background: rgba(255, 191, 105, 0.1); }
.mc-v3-task-main strong,
.mc-v3-task-main small { display: block; }
.mc-v3-task-main strong { font-size: 10px; }
.mc-v3-task-main small { margin-top: 3px; color: #687484; font-size: 8px; }
.mc-v3-mini-progress { height: 3px; border-radius: 3px; }
.mc-v3-task-row > b { color: #8c98a6; font-size: 9px; text-align: right; }

.mc-v3-count { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 191, 105, 0.12); color: #ffbf69; font-size: 10px; }
.mc-v3-decision { padding: 15px; margin-bottom: 9px; border-top: 1px solid rgba(255, 255, 255, 0.075); background: linear-gradient(90deg, rgba(255, 255, 255, 0.025), transparent); }
.mc-v3-decision.is-priority { border-top-color: rgba(255, 191, 105, 0.28); }
.mc-v3-decision-head { display: flex; justify-content: space-between; color: #687484; font-size: 7px; letter-spacing: 0.1em; }
.mc-v3-decision-head span:first-child { color: #ffbf69; }
.mc-v3-decision h3 { margin: 9px 0 6px; font-size: 13px; }
.mc-v3-decision p { margin: 0; color: #7f8a99; font-size: 9px; line-height: 1.55; }
.mc-v3-decision p strong { color: #edf2f7; }
.mc-v3-facts { display: flex; gap: 20px; margin-top: 11px; color: #687484; font-size: 8px; }
.mc-v3-facts b { display: block; margin-top: 2px; color: #b3bdc9; }
.mc-v3-decision-actions { display: flex; gap: 6px; margin-top: 13px; }
.mc-v3-decision-actions button { height: 28px; padding: 0 10px; border: 1px solid rgba(255, 255, 255, 0.075); border-radius: 8px; background: transparent; color: #8c98a6; font-size: 8px; font-weight: 700; cursor: pointer; }
.mc-v3-decision-actions .is-approve { margin-left: auto; border-color: #d8ff72; background: #d8ff72; color: #11160d; }
.mc-v3-decision-actions .is-approve.is-muted { border-color: transparent; background: rgba(216, 255, 114, 0.12); color: #d8ff72; }
.mc-v3-signal { display: flex; align-items: center; justify-content: space-between; margin-top: 22px; padding: 15px 0 11px; border-top: 1px solid rgba(255, 255, 255, 0.075); }
.mc-v3-signal h2 { margin: 6px 0 0; font-size: 15px; }
.mc-v3-signal h2 small { margin-left: 5px; color: #7f8a99; font-size: 8px; font-weight: 500; }
.mc-v3-confidence { position: relative; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(#d8ff72 87%, rgba(255, 255, 255, 0.06) 0); }
.mc-v3-confidence::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #070a0e; }
.mc-v3-confidence span { position: relative; z-index: 1; font-size: 12px; font-weight: 700; }
.mc-v3-confidence small { color: #7f8a99; font-size: 7px; }
.mc-v3-signal-details { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255, 255, 255, 0.075); }
.mc-v3-signal-details span { padding: 9px 7px; background: #070a0e; }
.mc-v3-signal-details small { display: block; color: #5d6978; font-size: 7px; }
.mc-v3-signal-details b { display: block; margin-top: 3px; font-size: 9px; }
.mc-v3-signal-details .is-positive { color: #8dffc1; }
.mc-v3-followups { margin-top: 23px; }
.mc-v3-person { width: 100%; display: grid; grid-template-columns: 31px 1fr auto; gap: 9px; align-items: center; padding: 9px 0; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.045); background: transparent; color: #edf2f7; text-align: left; cursor: pointer; }
.mc-v3-person-avatar { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 9px; font-size: 8px; font-weight: 700; }
.mc-v3-person-avatar.is-amber { background: rgba(255, 191, 105, 0.12); color: #ffbf69; }
.mc-v3-person-avatar.is-blue { background: rgba(119, 167, 255, 0.12); color: #77a7ff; }
.mc-v3-person strong,
.mc-v3-person small { display: block; }
.mc-v3-person strong { font-size: 9px; }
.mc-v3-person small { margin-top: 3px; color: #7f8a99; font-size: 8px; }
.mc-v3-person time { color: #657180; font-size: 8px; }

.mc-v3-health { margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.075); }
.mc-v3-health-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.mc-v3-health-item { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.025); color: #7f8a99; font-size: 9px; }
.mc-v3-health-item b { white-space: nowrap; }

.mc-v3-workspace { max-width: 1240px; }
.mc-v3-panel {
  padding: 16px 16px 14px;
  margin-top: 22px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.032), rgba(255, 255, 255, 0.015));
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.22);
}
.mc-v3-panel-compact { padding-bottom: 10px; }
.mc-v3-panel-body { min-width: 0; }
.mc-v3-hero-summary { margin-top: 16px; }
.mc-v3-brief-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.mc-v3-brief-block {
  padding: 12px 13px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.mc-v3-brief-block strong { display: block; margin: 6px 0 4px; font-size: 13px; font-weight: 700; color: #edf2f7; }
.mc-v3-brief-block p { margin: 0; color: #778392; font-size: 10px; line-height: 1.45; }
.mc-v3-hero-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.mc-v3-hero-metric {
  padding: 11px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.028);
  border: 1px solid rgba(255, 255, 255, 0.045);
}
.mc-v3-hero-sync { margin-top: 10px; color: #7f8a99; font-size: 9px; }
.mc-v3-hero-metric span { display: block; color: #728091; font-size: 8px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.mc-v3-hero-metric strong { display: block; margin-top: 6px; color: #edf2f7; font-size: 12px; }
.mc-v3-hero-metric.tone-accent strong { color: #d8ff72; }
.mc-v3-hero-metric.tone-warning strong { color: #ffbf69; }
.mc-v3-brief-actions { margin-top: 14px; }
.mc-v3-brief-action-copy { display: flex; flex-direction: column; gap: 8px; }
.mc-v3-action-pill {
  width: 100%;
  display: grid;
  gap: 2px;
  padding: 11px 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  color: #edf2f7;
  text-align: left;
}
.mc-v3-action-pill:hover { border-color: rgba(216, 255, 114, 0.22); background: rgba(216, 255, 114, 0.04); }
.mc-v3-action-pill span { font-size: 11px; font-weight: 700; }
.mc-v3-action-pill small { color: #778392; font-size: 9px; line-height: 1.35; }

.mc-v3-feed-toolbar { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.mc-v3-filter-btn {
  height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.018);
  color: #7f8a99;
  font-size: 9px;
  font-weight: 700;
}
.mc-v3-filter-btn span { color: #a6b1bf; }
.mc-v3-filter-btn.is-active { border-color: rgba(216, 255, 114, 0.3); color: #d8ff72; }
.mc-v3-filter-btn.is-active span { color: #d8ff72; }
.mc-v3-feed-list,
.mc-v3-today-list,
.mc-v3-insight-list,
.mc-v3-followup-list,
.mc-v3-quick-grid,
.mc-v3-status-grid,
.mc-v3-message-stack,
.mc-v3-conversation-recs { display: grid; gap: 10px; }
.mc-v3-feed-item,
.mc-v3-today-item,
.mc-v3-insight-item,
.mc-v3-followup-item,
.mc-v3-approval-item {
  padding: 12px 13px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.024);
  border: 1px solid rgba(255, 255, 255, 0.045);
}
.mc-v3-feed-top,
.mc-v3-today-top,
.mc-v3-followup-top,
.mc-v3-approval-top,
.mc-v3-insight-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.mc-v3-feed-item h3,
.mc-v3-today-item h3,
.mc-v3-insight-item strong { margin: 8px 0 5px; font-size: 12px; }
.mc-v3-feed-item p,
.mc-v3-today-item p,
.mc-v3-insight-item p,
.mc-v3-followup-item p,
.mc-v3-approval-item p { margin: 0; color: #778392; font-size: 10px; line-height: 1.5; }
.mc-v3-feed-item time,
.mc-v3-status-row strong,
.mc-v3-followup-meta,
.mc-v3-today-meta { color: #728091; font-size: 9px; }
.mc-v3-today-priority {
  display: inline-flex;
  align-items: center;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  color: #a6b1bf;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.mc-v3-today-priority.is-high,
.mc-v3-today-priority.is-urgent { background: rgba(255, 191, 105, 0.12); color: #ffbf69; }
.mc-v3-today-priority.is-normal { background: rgba(216, 255, 114, 0.1); color: #d8ff72; }
.mc-v3-today-meta,
.mc-v3-followup-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}
.mc-v3-group + .mc-v3-group { margin-top: 10px; }
.mc-v3-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  color: #728091;
  font-size: 9px;
}
.mc-v3-group-head h3 { margin: 0; color: #edf2f7; font-size: 11px; }
.mc-v3-approval-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.mc-v3-approval-actions button,
.mc-v3-action-btn,
.mc-v3-quick-action {
  height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.016);
  color: #c6d0db;
  font-size: 9px;
  font-weight: 700;
}
.mc-v3-approval-actions button:hover,
.mc-v3-action-btn:hover,
.mc-v3-quick-action:hover { border-color: rgba(216, 255, 114, 0.22); color: #edf2f7; }
.mc-v3-conversation-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.mc-v3-conversation-summary > div {
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.045);
}
.mc-v3-conversation-summary strong { display: block; margin-top: 5px; color: #edf2f7; font-size: 11px; }
.mc-v3-conversation-recs { margin-top: 12px; }
.mc-v3-conversation-rec {
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.022);
  border: 1px solid rgba(255, 255, 255, 0.042);
}
.mc-v3-conversation-rec span { display: block; color: #edf2f7; font-size: 10px; font-weight: 700; }
.mc-v3-conversation-rec small { display: block; margin-top: 4px; color: #778392; font-size: 9px; line-height: 1.45; }
.mc-v3-message-stack { margin-top: 12px; }
.mc-v3-message-item { padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.018); }
.mc-v3-conversation-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.mc-v3-status-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mc-v3-status-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
}
.mc-v3-status-row span { color: #728091; font-size: 8px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.mc-v3-status-row strong { color: #edf2f7; font-size: 11px; }
.mc-v3-loading,
.mc-v3-empty { padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.018); }
.mc-v3-loading p,
.mc-v3-empty p { margin: 6px 0 0; color: #778392; font-size: 10px; }
.mc-v3-loading-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #d8ff72;
  box-shadow: 0 0 14px rgba(216, 255, 114, 0.42);
  animation: mc-v3-float 1.8s ease-in-out infinite;
}

@keyframes mc-v3-spin { to { transform: rotate(360deg); } }
@keyframes mc-v3-float { 50% { transform: translateY(-4px); } }

@media (prefers-reduced-motion: reduce) {
  .mc-v3-orbit,
  .mc-v3-orbit::before,
  .mc-v3-orbit::after { animation: none; }
}

@media (max-width: 1100px) {
  .mc-v3-content-grid { grid-template-columns: 1fr 300px; gap: 20px; }
  .mc-v3-health-grid { grid-template-columns: repeat(2, 1fr); }
  .mc-v3-brief-grid,
  .mc-v3-hero-grid,
  .mc-v3-conversation-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .mc-v3-content-grid { grid-template-columns: 1fr; }
  .mc-v3-decisions { margin-top: 10px; }
  .mc-v3-nova { padding-left: 78px; }
  .mc-v3-status-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .mc-v3-container { padding: 18px 14px 32px; }
  .mc-v3-nova { padding: 78px 18px 18px; border-radius: 18px; }
  .mc-v3-orbit { top: 20px; left: 22px; }
  .mc-v3-command-tools > span { display: none; }
  .mc-v3-command-tools .mc-v3-execute { margin-left: auto; }
  .mc-v3-task-row { grid-template-columns: 34px 1fr 34px; }
  .mc-v3-mini-progress { display: none; }
  .mc-v3-health-grid { grid-template-columns: 1fr; }
  .mc-v3-brief-grid,
  .mc-v3-hero-grid,
  .mc-v3-conversation-summary { grid-template-columns: 1fr; }
}

/* ============================================================
   ONEAI UI V2 - Full Browser Polish
   Module-scoped overrides only.
   ============================================================ */

.app-container {
  background: radial-gradient(circle at 50% 0%, rgba(124, 58, 237, 0.08), transparent 22%), var(--ds-bg);
}

.sidebar {
  width: 238px;
  padding: 14px 12px 12px;
  background:
    radial-gradient(circle at 20% 0%, rgba(124, 58, 237, 0.18), transparent 26%),
    linear-gradient(180deg, rgba(6, 12, 26, 0.98), rgba(4, 10, 20, 0.94));
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.03);
}

.logo-container {
  min-height: 62px;
  padding: 0 6px 14px;
  margin-bottom: 14px;
}

.logo-brand {
  gap: 10px;
}

.logo-icon {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  font-size: 18px;
  box-shadow: 0 16px 30px rgba(124, 58, 237, 0.18);
}

.logo-text h1 {
  color: var(--ds-text);
  background: none;
  -webkit-text-fill-color: initial;
  letter-spacing: -0.5px;
}

.logo-text span {
  font-size: 10px;
  letter-spacing: 1.8px;
  color: rgba(148, 163, 184, 0.86);
}

.shell-sidebar-toggle {
  align-self: flex-start;
  margin: 0 0 12px 2px;
}

.sidebar-nav {
  padding-right: 2px;
}

.nav-menu {
  gap: 4px;
}

.nav-item button,
.nav-group-link {
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 14px;
  border-color: transparent;
}

.nav-item button svg,
.nav-group-link svg {
  width: 15px;
  height: 15px;
}

.sidebar-section-label {
  padding-top: 10px;
}

.sidebar-footer {
  padding: 12px 4px 4px;
  gap: 10px;
}

.active-profile {
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.16);
}

.active-profile-avatar {
  width: 32px;
  height: 32px;
  font-size: 12px;
}

.active-profile strong {
  font-size: 13px;
  color: var(--ds-text);
}

.active-profile span {
  font-size: 11px;
}

.sidebar-execution-pills {
  gap: 8px;
  flex-wrap: wrap;
}

.execution-pill {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.08em;
}

.top-header {
  height: 54px;
  padding: 0 18px;
  background: rgba(4, 10, 22, 0.82);
  border-bottom-color: rgba(255, 255, 255, 0.05);
}

.header-title h2 {
  font-size: 16px;
  letter-spacing: -0.2px;
}

.header-actions {
  gap: 8px;
}

.backend-mini-pill,
.header-template-pill {
  min-height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--ds-border);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
}

.header-template-select {
  min-width: 56px;
  font-size: 12px;
}

.backend-status-badge {
  min-width: 154px;
}

.backend-status-text {
  font-size: 12px;
}

.shell-workspace {
  background: linear-gradient(180deg, rgba(3, 10, 22, 0.96), rgba(4, 11, 25, 0.99));
}

.shell-main-region .tab-content {
  min-height: 0;
}

.shell-main-region .tab-content:not(.active) {
  display: none !important;
}

.shell-main-region .tab-content.active {
  display: block;
}

.crm-page,
.auto-page,
.media-page,
.settings-page,
.analytics-page,
.library-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(124, 58, 237, 0.08), transparent 24%),
    radial-gradient(circle at 86% 8%, rgba(14, 165, 233, 0.05), transparent 20%),
    linear-gradient(180deg, rgba(4, 11, 25, 0.98), rgba(3, 10, 22, 0.99));
}

.bot-builder-page {
  padding: 0 !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(124, 58, 237, 0.08), transparent 24%),
    linear-gradient(180deg, rgba(4, 11, 25, 0.98), rgba(3, 10, 22, 0.99));
}

.crm-page > div:first-child,
.auto-page > div:first-child,
.media-page > div:first-child,
.settings-page > div:first-child,
.analytics-page > div:first-child,
.library-page > div:first-child {
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

#tab-inbox.crm-page-inbox-shell {
  padding: 0 !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(124, 58, 237, 0.08), transparent 24%),
    linear-gradient(180deg, rgba(4, 11, 25, 0.98), rgba(3, 10, 22, 0.99));
}

#tab-inbox .inbox-row-1 {
  padding: 18px 20px 0;
}

#tab-inbox .inbox-filter-tabs {
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 4px;
}

#tab-inbox .inbox-status-select {
  min-width: 168px;
  height: 36px;
  padding: 0 34px 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: rgba(13, 18, 25, 0.9);
  color: #dfe6ee;
  font: 650 12px var(--ds-font-body);
  cursor: pointer;
}

#tab-inbox .inbox-status-select:hover,
#tab-inbox .inbox-status-select:focus {
  border-color: rgba(216, 255, 114, 0.38);
  outline: none;
}

#tab-inbox .inbox-filter-tabs::-webkit-scrollbar {
  display: none;
}

#tab-inbox .filter-tab {
  min-height: 36px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ds-muted);
}

#tab-inbox .filter-tab.active {
  background: linear-gradient(135deg, rgba(216, 201, 158, 0.18), rgba(124, 58, 237, 0.14));
  border-color: rgba(216, 201, 158, 0.2);
  color: var(--ds-text);
}

#tab-inbox .inbox-main-area {
  padding: 16px 20px 20px;
  gap: 16px;
  min-height: 0;
}

#tab-inbox .inbox-contacts-panel,
#tab-inbox .inbox-chat-panel,
#tab-inbox .inbox-profile-panel {
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(8, 18, 36, 0.9), rgba(4, 11, 25, 0.96));
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.22);
  overflow: hidden;
}

#tab-inbox .inbox-channel-bar,
#tab-inbox .chat-customer-header,
#tab-inbox .chat-ai-response,
#tab-inbox .chat-input-area,
#tab-inbox .profile-tabs {
  border-color: rgba(255, 255, 255, 0.06);
}

#tab-inbox .inbox-contact-list {
  padding: 10px;
  gap: 8px;
}

#tab-inbox .inbox-contact-item {
  padding: 12px;
  border-radius: 16px;
  border-color: transparent;
}

#tab-inbox .inbox-contact-item.active {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.16), rgba(255, 255, 255, 0.03));
}

#tab-inbox .chat-customer-header {
  padding: 18px 20px;
  background: rgba(255, 255, 255, 0.02);
}

#tab-inbox .chat-messages {
  padding: 18px 20px;
  gap: 14px;
}

#tab-inbox .chat-input-area {
  padding: 18px 20px 20px;
  background: rgba(255, 255, 255, 0.02);
}

#tab-contacts > div:first-child,
#tab-boards > div:first-child,
#tab-calendar > div:first-child,
#tab-media > div:first-child,
#tab-analytics > div:first-child,
#tab-connect > div:first-child,
#tab-content-studio > div:first-child,
#tab-broadcast > div:first-child,
#tab-automation > div:first-child {
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.025);
  backdrop-filter: blur(14px);
}

#tab-contacts > div:nth-child(2),
#tab-boards > div:nth-child(2) {
  border-radius: 18px;
  overflow: hidden;
}

#tab-contacts > div:last-child,
#tab-boards > div:last-child {
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.025);
}

#tab-library .ai-lib-tab {
  padding-bottom: 12px !important;
  font-weight: 600;
  letter-spacing: 0.01em;
}

#tab-library .ai-lib-pane {
  border-radius: 18px;
}

#tab-library .ai-lib-pane > div {
  border-radius: 18px;
  border: 1px dashed rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.025);
}

#tab-persona .settings-grid,
#tab-connect .settings-grid {
  gap: 20px;
}

#tab-persona .settings-card,
#tab-connect .settings-card,
#tab-media .settings-card,
#tab-content-studio .settings-card,
#tab-broadcast .settings-card,
#tab-automation .settings-card,
#tab-library .settings-card,
#tab-calendar .settings-card {
  border-radius: 22px;
  border-color: rgba(255, 255, 255, 0.06);
  background:
    linear-gradient(180deg, rgba(8, 18, 36, 0.9), rgba(4, 11, 25, 0.96));
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.2);
}

#tab-persona .settings-section-title,
#tab-connect h4,
#tab-media h4,
#tab-content-studio h3,
#tab-broadcast h3 {
  letter-spacing: -0.01em;
}

#tab-media #media-dropzone {
  border-radius: 22px !important;
  border: 1px dashed rgba(255, 255, 255, 0.18) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(124, 58, 237, 0.12), transparent 30%),
    rgba(255, 255, 255, 0.03) !important;
}

#tab-media #media-grid > div {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

#tab-analytics .settings-card {
  text-align: left;
}

#tab-analytics .settings-card:nth-of-type(1) > div:first-child,
#tab-analytics .settings-card:nth-of-type(2) > div:first-child,
#tab-analytics .settings-card:nth-of-type(3) > div:first-child,
#tab-analytics .settings-card:nth-of-type(4) > div:first-child {
  font-family: var(--ds-font-display);
}

/* --- Product UI v2: Module Shell Polish --- */
.crm-page,
.auto-page,
.media-page,
.settings-page,
.analytics-page,
.library-page,
.bot-builder-page {
  position: relative;
  background:
    radial-gradient(circle at 12% 0%, rgba(124, 58, 237, 0.10), transparent 24%),
    radial-gradient(circle at 88% 12%, rgba(14, 165, 233, 0.06), transparent 22%),
    linear-gradient(180deg, rgba(4, 11, 25, 0.98), rgba(3, 10, 22, 0.995));
}

.crm-page > div:first-child,
.auto-page > div:first-child,
.media-page > div:first-child,
.settings-page > div:first-child,
.analytics-page > div:first-child,
.library-page > div:first-child {
  position: relative;
}

#tab-contacts > div:first-child,
#tab-boards > div:first-child,
#tab-calendar > div:first-child,
#tab-library > div:first-child,
#tab-content-studio > div:first-child,
#tab-broadcast > div:first-child,
#tab-automation > div:first-child,
#tab-media > div:first-child,
#tab-analytics > div:first-child,
#tab-connect > div:first-child,
#tab-persona > div:first-child {
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(180deg, rgba(8, 18, 36, 0.90), rgba(4, 11, 25, 0.96));
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.20);
}

#tab-persona .settings-card,
#tab-connect .settings-card,
#tab-media .settings-card,
#tab-content-studio .settings-card,
#tab-broadcast .settings-card,
#tab-automation .settings-card,
#tab-library .settings-card,
#tab-calendar .settings-card,
#tab-analytics .settings-card {
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(180deg, rgba(8, 18, 36, 0.90), rgba(4, 11, 25, 0.96));
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.20);
}

#tab-persona .settings-grid {
  gap: 20px;
}

#tab-persona .settings-section-title,
#tab-connect h4,
#tab-media h4,
#tab-content-studio h3,
#tab-broadcast h3 {
  letter-spacing: -0.01em;
}

#tab-media #media-dropzone {
  border-radius: 22px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(124, 58, 237, 0.12), transparent 30%),
    rgba(255, 255, 255, 0.03) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.20);
}

#tab-media #media-grid > div {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

#tab-library .ai-lib-pane {
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.025);
}

#tab-library .ai-lib-pane > div {
  border-radius: 18px;
  border: 1px dashed rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.025);
}

#tab-library .ai-lib-tab {
  position: relative;
}

#tab-library .ai-lib-tab.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ds-primary), var(--ds-purple));
}

#tab-inbox.crm-page-inbox-shell,
#tab-contacts.crm-page-inbox,
#tab-boards.crm-page-boards,
#tab-calendar.crm-page-calendar {
  background:
    radial-gradient(circle at 10% 0%, rgba(124, 58, 237, 0.10), transparent 24%),
    radial-gradient(circle at 88% 8%, rgba(14, 165, 233, 0.06), transparent 20%),
    linear-gradient(180deg, rgba(4, 11, 25, 0.98), rgba(3, 10, 22, 0.995));
}

#tab-inbox .inbox-contacts-panel,
#tab-inbox .inbox-chat-panel,
#tab-inbox .inbox-profile-panel,
#tab-contacts .contacts-table-shell,
#tab-boards .boards-kanban-shell {
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(180deg, rgba(8, 18, 36, 0.90), rgba(4, 11, 25, 0.96));
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.20);
}

#tab-inbox .inbox-contact-item {
  transition: transform var(--ds-transition-base), background var(--ds-transition-base), border-color var(--ds-transition-base);
}

#tab-inbox .inbox-contact-item:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.04);
}

#tab-bot-builder #bot-builder-directory-screen,
#tab-bot-builder #bot-builder-canvas-screen > .node-canvas-workspace,
#tab-bot-builder #bot-builder-canvas-screen > div[style*="right:0"] {
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(180deg, rgba(8, 18, 36, 0.90), rgba(4, 11, 25, 0.96));
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.20);
}

#tab-signals,
#tab-dashboard {
  background:
    radial-gradient(circle at 12% 0%, rgba(124, 58, 237, 0.08), transparent 24%),
    linear-gradient(180deg, rgba(4, 11, 25, 0.98), rgba(3, 10, 22, 0.995));
}

.crm-page .action-btn,
.auto-page .action-btn,
.media-page .action-btn,
.settings-page .action-btn,
.analytics-page .action-btn,
.library-page .action-btn,
.bot-builder-page .action-btn {
  border-radius: 14px;
}

.sidebar-shell-controls .mode-switcher,
.mode-switcher {
  display: none !important;
}

@media (max-width: 1280px) {
  .sidebar {
    width: 224px;
  }
}

@media (max-width: 1100px) {
  .sidebar {
    width: 216px;
  }

  .header-template-pill {
    max-width: 92px;
  }
}

@media (max-width: 900px) {
  .crm-page,
  .auto-page,
  .media-page,
  .settings-page,
  .analytics-page,
  .library-page {
    padding: 18px !important;
  }

  #tab-inbox .inbox-main-area {
    padding: 14px 14px 16px;
  }
}

@media (max-width: 768px) {
  .sidebar {
    width: 224px;
  }

  .top-header {
    padding: 0 14px;
  }

  .header-title h2 {
    font-size: 15px;
  }

  #tab-inbox .inbox-row-1,
  #tab-inbox .inbox-main-area {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* UI v3 shell: context is an overlay, never an unused layout column. */
.app-shell {
  grid-template-columns: 238px minmax(0, 1fr);
}

.shell-assistant.context-panel {
  position: fixed;
  z-index: 80;
  top: 56px;
  right: 0;
  bottom: 64px;
  width: 340px;
  height: auto;
  transform: translateX(0);
  box-shadow: -28px 0 70px rgba(0, 0, 0, 0.42);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease;
}

.shell-assistant.context-panel.shell-assistant-closed,
.shell-assistant-closed .shell-assistant.context-panel {
  width: 340px;
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 1280px) {
  .app-shell { grid-template-columns: 224px minmax(0, 1fr); }
}

/* --- Nova mobile: fullscreen-width bottom sheet --- */
/* Relocated here from the Nova Responsive section so it follows the canonical
   desktop rules in source order. Media queries carry no specificity weight, so
   position mattered. Owns all mobile panel geometry; the stray
   `width: min(340px, 92vw)` that previously lived here is folded in below. */
@media (max-width: 768px) {
  .app-shell { grid-template-columns: 1fr; }
  .rail { position: fixed; z-index: 100; }

  .shell-assistant.context-panel {
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: 100%;
    height: 60vh;
    max-height: 60vh;
    border-left: none;
    border-top: 1px solid var(--ds-border);
    border-radius: 16px 16px 0 0;
    z-index: 100;
    transform: translateY(0);
    transition: transform 0.3s ease;
  }

  .shell-assistant.context-panel.shell-assistant-closed,
  .shell-assistant-closed .shell-assistant.context-panel {
    width: 100%;
    transform: translateY(100%);
  }
}

/* ============================================================
   ONEAI UI v3 - Direct Production Migration
   Approved prototype visuals mapped onto the existing app.
   ============================================================ */

html,
body {
  min-height: 100%;
  background: var(--bg-deep);
  color: var(--text-main);
  font-family: var(--font-sans);
}

body {
  overflow: hidden;
}

.ambient {
  position: fixed;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.09;
  pointer-events: none;
  z-index: 0;
}

.ambient-a {
  width: 520px;
  height: 520px;
  background: #b7ff5b;
  top: -260px;
  left: 25%;
}

.ambient-b {
  width: 480px;
  height: 480px;
  background: #598eff;
  right: -250px;
  bottom: -260px;
}

.app-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 238px minmax(0, 1fr);
  width: 100vw;
  height: 100vh;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.012), transparent 42%);
}

.app-shell > * {
  position: relative;
  z-index: 1;
}

.rail {
  padding: 14px 12px 12px;
  background:
    radial-gradient(circle at 20% 0%, rgba(216, 255, 114, 0.12), transparent 26%),
    linear-gradient(180deg, rgba(6, 12, 26, 0.98), rgba(4, 10, 20, 0.94));
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.03);
}

.logo-container {
  min-height: 62px;
  padding: 0 6px 14px;
  margin-bottom: 14px;
}

.logo-brand {
  gap: 10px;
}

.logo-icon {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  font-size: 18px;
  box-shadow: 0 16px 30px rgba(124, 58, 237, 0.18);
}

.logo-text h1 {
  color: var(--text-main);
  background: none;
  -webkit-text-fill-color: initial;
  letter-spacing: -0.5px;
}

.logo-text span {
  font-size: 10px;
  letter-spacing: 1.8px;
  color: rgba(148, 163, 184, 0.86);
}

.shell-sidebar-toggle {
  align-self: flex-start;
  margin: 0 0 12px 2px;
}

.sidebar-nav {
  padding-right: 2px;
}

.nav-menu {
  gap: 4px;
}

.nav-item button,
.nav-group-link {
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 14px;
  border-color: transparent;
  letter-spacing: -0.01em;
}

.nav-item button svg,
.nav-group-link svg {
  width: 15px;
  height: 15px;
}

.nav-item.active button,
.nav-group-link.active {
  background: linear-gradient(135deg, rgba(216, 255, 114, 0.18), rgba(124, 58, 237, 0.14));
  border-color: rgba(216, 255, 114, 0.2);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
}

.nav-item.active button svg,
.nav-group-link.active svg {
  stroke: var(--bg-deep);
}

.sidebar-section-label {
  padding-top: 10px;
}

.nav-group-toggle {
  display: none;
}

.nav-group-children {
  padding-left: 10px;
}

.sidebar-footer {
  padding: 12px 4px 4px;
  gap: 10px;
}

.active-profile {
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.16);
}

.active-profile-avatar {
  width: 32px;
  height: 32px;
  font-size: 12px;
}

.active-profile strong {
  font-size: 13px;
  color: var(--text-main);
}

.active-profile span {
  font-size: 11px;
}

.sidebar-execution-pills {
  gap: 8px;
  flex-wrap: wrap;
}

.execution-pill {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.08em;
}

.workspace {
  background:
    radial-gradient(circle at 50% 0%, rgba(124, 58, 237, 0.08), transparent 22%),
    linear-gradient(180deg, rgba(3, 10, 22, 0.96), rgba(4, 11, 25, 0.99));
  overflow: hidden;
}

.main-content {
  min-width: 0;
}

.top-header {
  height: 56px;
  padding: 0 18px;
  background: rgba(4, 10, 22, 0.82);
  border-bottom-color: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
}

.header-title h2 {
  font-size: 16px;
  letter-spacing: -0.2px;
}

.header-actions {
  gap: 8px;
}

.backend-mini-pill,
.header-template-pill {
  min-height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.075);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
}

.header-template-select {
  min-width: 56px;
  font-size: 12px;
}

.backend-status-badge {
  min-width: 154px;
}

.backend-status-text {
  font-size: 12px;
}

.shell-workspace {
  background: transparent;
}

.shell-main-region {
  background: transparent;
}

.shell-main-region .tab-content {
  min-height: 0;
  padding: 24px;
  background: transparent;
}

.shell-main-region .tab-content:not(.active) {
  display: none !important;
}

.shell-main-region .tab-content.active {
  display: block;
}

.context-panel {
  width: 340px;
  border-left: 1px solid rgba(255, 255, 255, 0.075);
  background: rgba(10, 14, 19, 0.94);
  backdrop-filter: blur(24px);
}

/* Generation-1 duplicate removed (audit 2026-07-20).
   `.shell-assistant-closed .shell-assistant { width: 0 }` collapsed the panel
   by shrinking its box, which only makes sense for an in-flow column. The
   canonical closed state is the transform-based rule in the "Nova Companion
   Panel" block above. This rule was already dead by specificity but would have
   reactivated the moment `context-panel` was dropped from the markup. */

.shell-composer {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(3, 10, 22, 0.95);
  padding: 14px 16px;
}

.shell-composer-inner {
  border-radius: 16px;
  background: rgba(5, 8, 11, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.11);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
}

.shell-composer-input {
  background: transparent;
}

.crm-page,
.auto-page,
.media-page,
.settings-page,
.analytics-page,
.library-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(124, 58, 237, 0.08), transparent 24%),
    radial-gradient(circle at 86% 8%, rgba(14, 165, 233, 0.05), transparent 20%),
    linear-gradient(180deg, rgba(4, 11, 25, 0.98), rgba(3, 10, 22, 0.99));
}

.bot-builder-page {
  padding: 0 !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(124, 58, 237, 0.08), transparent 24%),
    linear-gradient(180deg, rgba(4, 11, 25, 0.98), rgba(3, 10, 22, 0.99));
}

.crm-page > div:first-child,
.auto-page > div:first-child,
.media-page > div:first-child,
.settings-page > div:first-child,
.analytics-page > div:first-child,
.library-page > div:first-child {
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

#tab-inbox.crm-page-inbox-shell {
  padding: 0 !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(124, 58, 237, 0.08), transparent 24%),
    linear-gradient(180deg, rgba(4, 11, 25, 0.98), rgba(3, 10, 22, 0.99));
}

#tab-inbox .inbox-row-1 {
  padding: 18px 20px 0;
}

#tab-inbox .inbox-filter-tabs {
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 4px;
}

#tab-inbox .inbox-filter-tabs::-webkit-scrollbar {
  display: none;
}

#tab-inbox .filter-tab {
  min-height: 36px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ds-muted);
}

#tab-inbox .filter-tab.active {
  background: linear-gradient(135deg, rgba(216, 255, 114, 0.18), rgba(124, 58, 237, 0.14));
  border-color: rgba(216, 255, 114, 0.2);
  color: var(--ds-text);
}

#tab-inbox .inbox-main-area {
  padding: 16px 20px 20px;
  gap: 16px;
  min-height: 0;
}

#tab-inbox .inbox-contacts-panel,
#tab-inbox .inbox-chat-panel,
#tab-inbox .inbox-profile-panel {
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(8, 18, 36, 0.9), rgba(4, 11, 25, 0.96));
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.22);
  overflow: hidden;
}

#tab-inbox .inbox-channel-bar,
#tab-inbox .chat-customer-header,
#tab-inbox .chat-ai-response,
#tab-inbox .chat-input-area,
#tab-inbox .profile-tabs {
  border-color: rgba(255, 255, 255, 0.06);
}

#tab-inbox .inbox-contact-list {
  padding: 10px;
  gap: 8px;
}

#tab-inbox .inbox-contact-item {
  padding: 12px;
  border-radius: 16px;
  border-color: transparent;
}

#tab-inbox .inbox-contact-item.active {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.16), rgba(255, 255, 255, 0.03));
}

#tab-inbox .chat-customer-header {
  padding: 18px 20px;
  background: rgba(255, 255, 255, 0.02);
}

#tab-inbox .chat-input-area {
  padding: 16px 20px 20px;
}

#tab-contacts > div:first-child,
#tab-boards > div:first-child,
#tab-calendar > div:first-child,
#tab-library > div:first-child,
#tab-content-studio > div:first-child,
#tab-broadcast > div:first-child,
#tab-automation > div:first-child,
#tab-media > div:first-child,
#tab-analytics > div:first-child,
#tab-connect > div:first-child,
#tab-persona > div:first-child {
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(180deg, rgba(8, 18, 36, 0.9), rgba(4, 11, 25, 0.96));
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.2);
}

#tab-persona .settings-card,
#tab-connect .settings-card,
#tab-media .settings-card,
#tab-content-studio .settings-card,
#tab-broadcast .settings-card,
#tab-automation .settings-card,
#tab-library .settings-card,
#tab-calendar .settings-card,
#tab-analytics .settings-card {
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(180deg, rgba(8, 18, 36, 0.9), rgba(4, 11, 25, 0.96));
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.2);
}

#tab-persona .settings-grid {
  gap: 20px;
}

#tab-persona .settings-section-title,
#tab-connect h4,
#tab-media h4,
#tab-content-studio h3,
#tab-broadcast h3 {
  letter-spacing: -0.01em;
}

#tab-media #media-dropzone {
  border-radius: 22px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(124, 58, 237, 0.12), transparent 30%),
    rgba(255, 255, 255, 0.03) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.2);
}

#tab-media #media-grid > div {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

#tab-library .ai-lib-pane {
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.025);
}

#tab-library .ai-lib-pane > div {
  border-radius: 18px;
  border: 1px dashed rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.025);
}

#tab-library .ai-lib-tab {
  position: relative;
}

#tab-library .ai-lib-tab.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ds-primary), var(--ds-purple));
}

#tab-inbox.crm-page-inbox-shell,
#tab-contacts.crm-page-inbox,
#tab-boards.crm-page-boards,
#tab-calendar.crm-page-calendar {
  background:
    radial-gradient(circle at 10% 0%, rgba(124, 58, 237, 0.10), transparent 24%),
    radial-gradient(circle at 88% 8%, rgba(14, 165, 233, 0.06), transparent 20%),
    linear-gradient(180deg, rgba(4, 11, 25, 0.98), rgba(3, 10, 22, 0.995));
}

#tab-inbox .inbox-contacts-panel,
#tab-inbox .inbox-chat-panel,
#tab-inbox .inbox-profile-panel,
#tab-contacts .contacts-table-shell,
#tab-boards .boards-kanban-shell {
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(180deg, rgba(8, 18, 36, 0.9), rgba(4, 11, 25, 0.96));
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.2);
}

#tab-inbox .inbox-contact-item {
  transition: transform var(--ds-transition-base), background var(--ds-transition-base), border-color var(--ds-transition-base);
}

#tab-inbox .inbox-contact-item:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.04);
}

#tab-bot-builder #bot-builder-directory-screen,
#tab-bot-builder #bot-builder-canvas-screen > .node-canvas-workspace,
#tab-bot-builder #bot-builder-canvas-screen > div[style*="right:0"] {
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(180deg, rgba(8, 18, 36, 0.9), rgba(4, 11, 25, 0.96));
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.2);
}

#tab-signals,
#tab-dashboard {
  background:
    radial-gradient(circle at 12% 0%, rgba(124, 58, 237, 0.08), transparent 24%),
    linear-gradient(180deg, rgba(4, 11, 25, 0.98), rgba(3, 10, 22, 0.995));
}

.crm-page .action-btn,
.auto-page .action-btn,
.media-page .action-btn,
.settings-page .action-btn,
.analytics-page .action-btn,
.library-page .action-btn,
.bot-builder-page .action-btn {
  border-radius: 14px;
}

.sidebar-shell-controls .mode-switcher,
.mode-switcher {
  display: none !important;
}

@media (max-width: 1280px) {
  .app-shell {
    grid-template-columns: 224px minmax(0, 1fr);
  }
}

@media (max-width: 1100px) {
  .app-shell {
    grid-template-columns: 216px minmax(0, 1fr);
  }

  /* `.context-panel { display: none }` removed (audit 2026-07-20).
     This was a fifth, later-cascade generation of Nova panel CSS. It hid the
     panel outright below 1100px, which made the tablet drawer and the mobile
     bottom sheet unreachable — the toggle appeared to do nothing. Narrow-width
     dismissal is now owned by appShell.js applyResponsive(), which closes the
     drawer via .shell-assistant-closed (a transform, so it stays animatable and
     re-openable) instead of removing it from the box tree. */

  .header-template-pill {
    max-width: 92px;
  }
}

@media (max-width: 900px) {
  .crm-page,
  .auto-page,
  .media-page,
  .settings-page,
  .analytics-page,
  .library-page {
    padding: 18px !important;
  }

  #tab-inbox .inbox-main-area {
    padding: 14px 14px 16px;
  }
}

@media (max-width: 768px) {
  body {
    overflow: auto;
  }

  .app-shell {
    grid-template-columns: 224px minmax(0, 1fr);
  }

  .rail {
    width: 224px;
  }

  .top-header {
    padding: 0 14px;
  }

  .header-title h2 {
    font-size: 15px;
  }

  #tab-inbox .inbox-row-1,
  #tab-inbox .inbox-main-area {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* ════════════════════════════════════════════════════════════════════
   UI v3 — Shared Product Module Layer (pv3-*)
   Extends the mission-control mc-v3 language to all production modules.
   Reused by: CRM, Trading, Automation, Media, Flow Builder, Settings.
   ════════════════════════════════════════════════════════════════════ */

.pv3-page {
  width: min(1280px, 100%);
  margin: 0 auto;
  color: #edf2f7;
}

.pv3-page-wide { width: 100%; }

/* Page header */
.pv3-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.pv3-header-copy { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.pv3-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #687486;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.pv3-eyebrow.is-accent { color: #d8ff72; }
.pv3-eyebrow.is-warm { color: #ffbf69; }
.pv3-eyebrow .pv3-live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #d8ff72;
  box-shadow: 0 0 10px rgba(216, 255, 114, 0.8);
}

.pv3-title {
  margin: 0 !important;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 30px) !important;
  font-weight: 680 !important;
  letter-spacing: -0.03em;
  color: #edf2f7 !important;
}

.pv3-sub {
  margin: 0;
  max-width: 640px;
  color: #8a93a3;
  font-size: 12.5px;
  line-height: 1.55;
}

.pv3-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Buttons */
.pv3-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  padding: 7px 15px !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.035) !important;
  color: #b3bdc9 !important;
  font-size: 12px !important;
  font-weight: 650;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: none !important;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.pv3-btn:hover {
  border-color: rgba(216, 255, 114, 0.3) !important;
  background: rgba(216, 255, 114, 0.08) !important;
  color: #edf2f7 !important;
  transform: translateY(-1px);
}

.pv3-btn.is-primary {
  border-color: rgba(216, 255, 114, 0.5) !important;
  background: #d8ff72 !important;
  color: #10150d !important;
  font-weight: 760;
}

.pv3-btn.is-primary:hover { background: #e6ff9a !important; color: #10150d !important; }

.pv3-btn.is-danger {
  border-color: rgba(255, 107, 107, 0.34) !important;
  background: rgba(255, 107, 107, 0.1) !important;
  color: #ff9c9c !important;
}

.pv3-btn.is-success {
  border-color: rgba(94, 234, 165, 0.36) !important;
  background: rgba(94, 234, 165, 0.12) !important;
  color: #86efac !important;
}

.pv3-btn.is-sm { min-height: 28px; padding: 4px 11px !important; font-size: 11px !important; border-radius: 8px !important; }

/* Layout grids */
.pv3-grid { display: grid; gap: 16px; min-width: 0; }
.pv3-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pv3-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pv3-grid.is-main { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; }
.pv3-grid.is-cards { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

@media (max-width: 1100px) {
  .pv3-grid.cols-2, .pv3-grid.cols-3, .pv3-grid.is-main { grid-template-columns: minmax(0, 1fr); }
}

.pv3-stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* Panels */
.pv3-panel {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 18px;
  background: #0e141b;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.24);
  overflow: hidden;
}

.pv3-panel.is-accent { border-color: rgba(216, 255, 114, 0.16); }

.pv3-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 15px 18px 13px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

.pv3-panel-head-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.pv3-panel-title {
  margin: 0 !important;
  font-family: var(--font-display);
  font-size: 14.5px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  color: #edf2f7 !important;
}

.pv3-panel-sub { margin: 0; color: #77839a; font-size: 11px; line-height: 1.5; }

.pv3-panel-body { padding: 16px 18px 18px; min-width: 0; }
.pv3-panel-body.is-flush { padding: 0; }

/* Status chips */
.pv3-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: #aab4c2;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}

.pv3-chip.is-positive { border-color: rgba(94, 234, 165, 0.3); background: rgba(94, 234, 165, 0.1); color: #86efac; }
.pv3-chip.is-negative { border-color: rgba(255, 107, 107, 0.3); background: rgba(255, 107, 107, 0.1); color: #ff9c9c; }
.pv3-chip.is-warning { border-color: rgba(255, 191, 105, 0.32); background: rgba(255, 191, 105, 0.1); color: #ffd699; }
.pv3-chip.is-info { border-color: rgba(119, 167, 255, 0.32); background: rgba(119, 167, 255, 0.1); color: #a7c4ff; }
.pv3-chip.is-accent { border-color: rgba(216, 255, 114, 0.34); background: rgba(216, 255, 114, 0.1); color: #d8ff72; }

/* KPI strip */
.pv3-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.pv3-kpi {
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.022);
}
.pv3-kpi small { display: block; color: #687486; font-size: 9px; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; margin-bottom: 5px; }
.pv3-kpi b { color: #edf2f7; font-family: var(--font-display); font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.pv3-kpi span { color: #77839a; font-size: 10.5px; margin-left: 5px; }

/* Fields */
.pv3-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 13px; min-width: 0; }
.pv3-field:last-child { margin-bottom: 0; }
.pv3-field > label {
  color: #77839a !important;
  font-size: 10px !important;
  font-weight: 780;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.pv3-field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .pv3-field-row { grid-template-columns: minmax(0, 1fr); } }

.pv3-hint { color: #687486; font-size: 11px; line-height: 1.5; }

/* Item rows (queues, lists, history) */
.pv3-list { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pv3-item {
  padding: 13px 15px;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.024);
  transition: border-color 0.16s ease, background 0.16s ease;
}
.pv3-item:hover { border-color: rgba(216, 255, 114, 0.18); background: rgba(255, 255, 255, 0.038); }
.pv3-item-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pv3-item-title { color: #edf2f7; font-size: 13px; font-weight: 700; letter-spacing: -0.01em; }
.pv3-item-sub { color: #77839a; font-size: 11px; margin-top: 3px; }
.pv3-item-body { margin-top: 9px; color: #aab4c2; font-size: 12px; line-height: 1.5; }
.pv3-item-meta { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 9px; color: #687486; font-size: 10.5px; }
.pv3-item-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* Empty state */
.pv3-empty {
  padding: 34px 20px;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.014);
  color: #77839a;
  font-size: 12px;
  text-align: center;
  line-height: 1.6;
}
.pv3-empty b { display: block; color: #aab4c2; font-size: 13px; margin-bottom: 4px; }
.pv3-empty.is-error { border-color: rgba(255, 107, 107, 0.35); color: #ff9c9c; }

/* Icon tiles */
.pv3-tile {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.045);
  font-size: 16px;
  flex: none;
}

/* Toggle row (setting + switch) */
.pv3-toggle-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 13px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.022);
}
.pv3-toggle-row .pv3-toggle-copy { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pv3-toggle-row strong { color: #dfe6ee; font-size: 12.5px; font-weight: 650; display: block; }
.pv3-toggle-row small { color: #77839a; font-size: 10.5px; display: block; margin-top: 2px; word-break: break-all; }

/* v3 switch (checkbox based) */
.pv3-switch { position: relative; display: inline-block; width: 40px; height: 22px; flex: none; }
.pv3-switch input { opacity: 0; width: 0; height: 0; }
.pv3-switch i {
  position: absolute; inset: 0; cursor: pointer;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: background 0.18s ease, border-color 0.18s ease;
}
.pv3-switch i::after {
  content: "";
  position: absolute; top: 2px; left: 3px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #cfd6df;
  transition: transform 0.18s ease, background 0.18s ease;
}
.pv3-switch input:checked + i { background: rgba(216, 255, 114, 0.28); border-color: rgba(216, 255, 114, 0.5); }
.pv3-switch input:checked + i::after { transform: translateX(17px); background: #d8ff72; }
.pv3-switch input:disabled + i { opacity: 0.4; cursor: not-allowed; }

/* Code / preview blocks */
.pv3-code {
  padding: 11px 13px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 11px;
  background: rgba(4, 7, 10, 0.82);
  color: #c8d2dd;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}

.pv3-var-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.pv3-var-chips code {
  padding: 2px 7px;
  border: 1px solid rgba(119, 167, 255, 0.22);
  border-radius: 6px;
  background: rgba(119, 167, 255, 0.08);
  color: #a7c4ff;
  font-size: 10px;
}

/* Pipeline strip (Trading) */
.pv3-pipeline { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; }
.pv3-pipeline-node { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pv3-pipeline-node .pv3-tile { width: 44px; height: 44px; font-size: 18px; }
.pv3-pipeline-node small { color: #77839a; font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.pv3-pipeline-arrow { color: #46505f; font-size: 16px; }

.oc-product-system-overview .pv3-pipeline {
  width: 100%;
  justify-content: center;
}

/* Section label inside panels */
.pv3-section-label {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 18px 0 10px;
  color: #8a93a3;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.pv3-section-label:first-child { margin-top: 0; }

/* ── CRM / Customers ──────────────────────────────────────────────── */

.pv3-crm {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.pv3-crm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 22px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  background: linear-gradient(180deg, rgba(15, 21, 29, 0.85), rgba(9, 13, 18, 0.4));
}

.pv3-crm-header .pv3-title { font-size: 21px !important; }

.landing-customer-service-context {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  margin-left: auto;
  padding: 8px 12px;
  border: 1px solid rgba(64, 146, 255, 0.25);
  border-radius: 10px;
  background: rgba(64, 146, 255, 0.08);
}

.landing-customer-service-context[hidden] { display: none; }
.landing-customer-service-context span { color: #7f8b9d; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; }
.landing-customer-service-context strong { color: #dbeafe; font-size: 12px; font-weight: 700; }

@media (max-width: 760px) {
  .pv3-crm-header { flex-wrap: wrap; }
  .landing-customer-service-context { order: 3; width: 100%; margin-left: 0; }
}

#tab-inbox .inbox-filter-tabs { display: flex; gap: 6px; flex-wrap: wrap; }

.pv3-scope .filter-tab {
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  color: #8a93a3 !important;
  font-size: 11px !important;
  font-weight: 650;
  padding: 5px 13px !important;
  cursor: pointer;
  transition: all 0.16s ease;
}
.pv3-scope .filter-tab:hover { color: #edf2f7 !important; border-color: rgba(216, 255, 114, 0.25) !important; }
.pv3-scope .filter-tab.active {
  background: rgba(216, 255, 114, 0.12) !important;
  border-color: rgba(216, 255, 114, 0.45) !important;
  color: #d8ff72 !important;
}
.pv3-scope .filter-tab-count {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 1px 6px;
  font-size: 9px;
  margin-left: 4px;
}

.pv3-crm-layout {
  display: grid;
  grid-template-columns: 292px minmax(0, 1fr) 308px;
  gap: 0;
  flex: 1;
  min-height: 0;
}

@media (max-width: 1200px) { .pv3-crm-layout { grid-template-columns: 252px minmax(0, 1fr) 272px; } }

.pv3-crm-contacts {
  display: flex; flex-direction: column; min-height: 0; min-width: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.055);
  background: rgba(10, 14, 19, 0.55);
}

.pv3-crm-contacts-tools { display: flex; flex-direction: column; gap: 9px; padding: 13px 13px 11px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.pv3-crm-contacts-tools .pv3-tool-row { display: flex; align-items: center; gap: 8px; }
.pv3-crm-contacts-tools select { flex: 1; min-width: 0; font-size: 12px !important; }

.pv3-scope .inbox-unread-toggle {
  display: inline-flex; align-items: center; gap: 5px;
  color: #8a93a3; font-size: 11px; cursor: pointer; white-space: nowrap;
}

.pv3-crm-search { position: relative; }
.pv3-crm-search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: #687486; pointer-events: none; }
.pv3-crm-search input { width: 100%; padding-left: 30px !important; font-size: 12px !important; }

.pv3-scope .inbox-contact-list { flex: 1; overflow-y: auto; min-height: 0; padding: 7px; scrollbar-width: thin; scrollbar-color: #29313c transparent; }

.pv3-scope .inbox-contact-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px;
  margin-bottom: 3px;
  border: 1px solid transparent !important;
  border-left: 3px solid transparent !important;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.pv3-scope .inbox-contact-item:hover { background: rgba(255, 255, 255, 0.045) !important; }
.pv3-scope .inbox-contact-item.active {
  background: rgba(216, 255, 114, 0.08) !important;
  border-color: rgba(216, 255, 114, 0.22) !important;
  border-left-color: #d8ff72 !important;
}
.pv3-scope .inbox-contact-avatar {
  width: 34px; height: 34px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px; font-weight: 800; flex: none;
}
.pv3-scope .inbox-contact-name { color: #dfe6ee; font-size: 12.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv3-scope .inbox-contact-status { color: #687486; font-size: 10.5px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv3-scope .inbox-contact-unread { width: 8px; height: 8px; border-radius: 50%; background: #d8ff72; box-shadow: 0 0 8px rgba(216, 255, 114, 0.7); flex: none; }

.pv3-crm-chat { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: rgba(7, 10, 14, 0.4); }

.pv3-scope .chat-customer-header {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  background: rgba(13, 18, 25, 0.6);
}

.pv3-scope .chat-placeholder { flex: 1; display: flex; align-items: center; justify-content: center; }

.pv3-scope .chat-messages {
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px 18px;
  scrollbar-width: thin; scrollbar-color: #29313c transparent;
}

.pv3-scope .chat-msg {
  max-width: 66%;
  padding: 9px 13px;
  border-radius: 15px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #dfe6ee;
  margin-bottom: 6px;
}
.pv3-scope .chat-msg.in {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom-left-radius: 5px;
}
.pv3-scope .chat-msg.out {
  align-self: flex-end;
  background: rgba(119, 167, 255, 0.13);
  border: 1px solid rgba(119, 167, 255, 0.2);
  border-bottom-right-radius: 5px;
}
.pv3-scope .chat-msg.out.ai {
  background: rgba(216, 255, 114, 0.09) !important;
  border-color: rgba(216, 255, 114, 0.24);
}
.pv3-scope .chat-msg-label { font-size: 9px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 3px; color: #8a93a3; }
.pv3-scope .chat-msg.out.ai .chat-msg-label { color: #d8ff72 !important; }
.pv3-scope .chat-msg-time { font-size: 9.5px; color: #687486; margin-top: 4px; }

.pv3-scope .chat-date-separator { align-self: center; color: #687486; font-size: 9.5px; font-weight: 750; letter-spacing: 0.12em; text-transform: uppercase; margin: 10px 0 8px; }

.pv3-scope .inbox-pause-banner {
  display: flex; align-items: center; gap: 10px;
  margin: 10px 16px 0;
  padding: 9px 13px;
  border: 1px solid rgba(255, 191, 105, 0.3);
  border-radius: 12px;
  background: rgba(255, 191, 105, 0.08);
  color: #ffd699;
  font-size: 11.5px;
}

.pv3-scope .chat-ai-response {
  margin: 0 16px 10px;
  padding: 11px 13px;
  border: 1px solid rgba(216, 255, 114, 0.22);
  border-radius: 13px;
  background: rgba(216, 255, 114, 0.055);
}
.pv3-scope .chat-ai-label { color: #d8ff72; font-size: 9px; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; margin-bottom: 5px; }
.pv3-scope .chat-ai-text { color: #dfe6ee; font-size: 12px; line-height: 1.5; }
.pv3-scope .chat-ai-use-btn {
  margin-top: 8px;
  padding: 4px 12px;
  border: 1px solid rgba(216, 255, 114, 0.45) !important;
  border-radius: 8px !important;
  background: rgba(216, 255, 114, 0.14) !important;
  color: #d8ff72 !important;
  font-size: 11px !important;
  font-weight: 700;
  cursor: pointer;
}

.pv3-scope .chat-input-area {
  border-top: 1px solid rgba(255, 255, 255, 0.055);
  background: rgba(13, 18, 25, 0.6);
  padding: 10px 16px 13px;
}
.pv3-scope .chat-input-tabs { display: flex; gap: 4px; margin-bottom: 8px; }
.pv3-scope .chat-input-tab {
  border: none !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
  color: #77839a !important;
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 10px !important;
  cursor: pointer;
}
.pv3-scope .chat-input-tab.active { color: #d8ff72 !important; border-bottom-color: #d8ff72 !important; }
.pv3-scope .inbox-text-input { width: 100%; resize: vertical; font-size: 12.5px !important; }
.pv3-scope .chat-input-toolbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.pv3-scope .toolbar-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 9px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  color: #8a93a3 !important;
  cursor: pointer;
}
.pv3-scope .toolbar-btn:hover { color: #d8ff72 !important; border-color: rgba(216, 255, 114, 0.3) !important; }
.pv3-scope .toolbar-select { min-height: 30px !important; font-size: 11px !important; max-width: 130px; }
.pv3-scope .chat-send-btn {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid rgba(216, 255, 114, 0.5) !important;
  border-radius: 10px !important;
  background: #d8ff72 !important;
  color: #10150d !important;
  font-size: 12px !important;
  font-weight: 760;
  min-width: 92px;
  height: 40px;
  padding: 0 18px !important;
  cursor: pointer;
}
.pv3-scope .chat-send-btn svg { width: 15px; height: 15px; }
.pv3-scope .chat-send-btn:hover:not(:disabled) { background: #e6ff9a !important; transform: translateY(-1px); }
.pv3-scope .chat-send-btn:disabled { cursor: not-allowed; opacity: 0.45; box-shadow: none; }

.pv3-scope .inbox-flow-btn.selected {
  color: #d8ff72 !important;
  border-color: rgba(216, 255, 114, 0.4) !important;
  background: rgba(216, 255, 114, 0.08) !important;
}

.pv3-crm-context {
  display: flex; flex-direction: column; min-height: 0; min-width: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.055);
  background: rgba(10, 14, 19, 0.55);
}

.pv3-crm-context-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 13px 15px 10px;
}

.pv3-scope .profile-tabs { display: flex; gap: 3px; padding: 0 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); overflow-x: auto; }
.pv3-scope .profile-tab {
  border: none !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
  color: #77839a !important;
  font-size: 10.5px !important;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 8px 9px !important;
  cursor: pointer;
  white-space: nowrap;
}
.pv3-scope .profile-tab.active { color: #d8ff72 !important; border-bottom-color: #d8ff72 !important; }

.pv3-scope .profile-panel-content { flex: 1; overflow-y: auto; min-height: 0; padding: 14px 15px 18px; scrollbar-width: thin; scrollbar-color: #29313c transparent; }
.pv3-scope .profile-section-title {
  color: #8a93a3; font-size: 9.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  margin: 16px 0 9px;
}
.pv3-scope .profile-section-title:first-child { margin-top: 0; }
.pv3-scope .profile-section-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0;
  cursor: pointer;
  user-select: none;
}
.pv3-scope .profile-section-toggle:hover,
.pv3-scope .profile-section-toggle:focus { color: #d8ff72; outline: none; }
.pv3-scope .profile-section-toggle svg { transition: transform 0.16s ease; }
.pv3-scope .profile-section-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.pv3-scope .profile-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.pv3-scope .profile-field > label { color: #77839a; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.pv3-scope .prof-input { font-size: 12px !important; }
.pv3-scope .prof-value { color: #c8d2dd; font-size: 12px; }
.pv3-scope .profile-save-btn {
  width: 100%;
  margin-top: 12px;
  min-height: 36px;
  border: 1px solid rgba(216, 255, 114, 0.5) !important;
  border-radius: 10px !important;
  background: #d8ff72 !important;
  color: #10150d !important;
  font-size: 12.5px !important;
  font-weight: 760;
  cursor: pointer;
}

#tab-inbox .inbox-flow-picker[hidden] { display: none; }
#tab-inbox .inbox-flow-picker {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 20px;
}
#tab-inbox .inbox-flow-picker-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 7, 14, 0.72);
  backdrop-filter: blur(5px);
}
#tab-inbox .inbox-flow-picker-dialog {
  position: relative;
  width: min(480px, 100%);
  max-height: min(620px, 86vh);
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  background: linear-gradient(180deg, #111820, #0b1118);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
#tab-inbox .inbox-flow-picker-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
#tab-inbox .inbox-flow-picker-head h3 { margin: 4px 0 0; color: #edf2f7; font-size: 18px; }
#tab-inbox .inbox-flow-picker-close {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.03);
  color: #8a93a3;
  font-size: 20px;
  cursor: pointer;
}
#tab-inbox .inbox-flow-picker-search {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 14px 16px 10px;
  padding: 0 12px;
  min-height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
  color: #77839a;
}
#tab-inbox .inbox-flow-picker-search:focus-within { border-color: rgba(216, 255, 114, 0.35); }
#tab-inbox .inbox-flow-picker-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #edf2f7;
  font: 500 12px var(--ds-font-body);
}
#tab-inbox .inbox-flow-picker-list {
  min-height: 120px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 4px 16px 14px;
}
#tab-inbox .inbox-flow-picker-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.025);
  color: #dfe6ee;
  text-align: left;
  cursor: pointer;
}
#tab-inbox .inbox-flow-picker-item:hover { border-color: rgba(216, 255, 114, 0.25); }
#tab-inbox .inbox-flow-picker-item.selected { border-color: rgba(216, 255, 114, 0.5); background: rgba(216, 255, 114, 0.07); }
#tab-inbox .inbox-flow-picker-name { font-size: 12.5px; font-weight: 700; }
#tab-inbox .inbox-flow-picker-marker { color: #77839a; font-size: 10px; font-weight: 700; text-transform: uppercase; }
#tab-inbox .inbox-flow-picker-item.selected .inbox-flow-picker-marker { color: #d8ff72; }
#tab-inbox .inbox-flow-picker-empty { padding: 28px 12px; color: #77839a; text-align: center; font-size: 12px; }
#tab-inbox .inbox-flow-picker-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* ── Flow Builder ─────────────────────────────────────────────────── */

.pv3-scope .folder-card {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 14px;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 14px !important;
  background: #0e141b !important;
  cursor: pointer;
  transition: border-color 0.16s ease, transform 0.16s ease;
}
.pv3-scope .folder-card:hover { border-color: rgba(216, 255, 114, 0.28) !important; transform: translateY(-2px); }
.pv3-scope .folder-icon { font-size: 20px; }
.pv3-scope .folder-info { min-width: 0; flex: 1; }
.pv3-scope .folder-name { color: #dfe6ee; font-size: 12.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv3-scope .folder-badge {
  display: inline-block; margin-top: 4px;
  padding: 1px 8px; border-radius: 999px;
  border: 1px solid rgba(216, 255, 114, 0.26);
  background: rgba(216, 255, 114, 0.08);
  color: #d8ff72; font-size: 9.5px; font-weight: 750;
}
.pv3-scope .folder-menu-btn { border: none !important; background: transparent !important; color: #687486 !important; font-size: 15px; cursor: pointer; }
.pv3-scope .folder-create-card {
  display: flex; align-items: center; justify-content: center;
  padding: 13px;
  border: 1px dashed rgba(255, 255, 255, 0.16) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.012) !important;
  color: #8a93a3; font-size: 12px; font-weight: 650;
  cursor: pointer;
  transition: border-color 0.16s ease, color 0.16s ease;
}
.pv3-scope .folder-create-card:hover { border-color: rgba(216, 255, 114, 0.4) !important; color: #d8ff72; }

.pv3-scope .sub-flow-card {
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 16px !important;
  background: #0e141b !important;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}
.pv3-scope .sub-flow-card:hover {
  border-color: rgba(216, 255, 114, 0.3) !important;
  transform: translateY(-3px);
  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.35);
}
.pv3-scope .sub-flow-thumbnail {
  position: relative;
  height: 108px;
  background:
    radial-gradient(circle at 30% 30%, rgba(216, 255, 114, 0.05), transparent 55%),
    rgba(4, 7, 10, 0.7) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.pv3-scope .sub-flow-info-box { padding: 12px 14px 13px; }
.pv3-scope .sub-flow-title { margin: 0 0 3px !important; color: #dfe6ee !important; font-size: 13px !important; font-weight: 700 !important; }
.pv3-scope .sub-flow-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; }
.pv3-scope .sub-flow-node-count { color: #77839a; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }

.pv3-canvas-toolbar {
  position: absolute; top: 14px; left: 14px; z-index: 100;
  display: flex; flex-direction: column; gap: 8px;
}
.pv3-canvas-toolbar-row { display: flex; align-items: center; gap: 8px; }
.pv3-canvas-pill {
  display: flex; align-items: center; gap: 2px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(9, 13, 18, 0.88);
  backdrop-filter: blur(8px);
}
.pv3-canvas-title-input {
  width: 230px;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 10px !important;
  background: rgba(9, 13, 18, 0.88) !important;
  color: #edf2f7 !important;
  font-family: var(--font-display);
  font-size: 14px !important;
  font-weight: 750;
  padding: 8px 12px !important;
  backdrop-filter: blur(8px);
}

.pv3-flow-config {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 312px;
  display: flex; flex-direction: column;
  border-left: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(9, 13, 18, 0.94);
  backdrop-filter: blur(12px);
  z-index: 100;
}
.pv3-node-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.pv3-node-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 13px !important;
  background: rgba(255, 255, 255, 0.028) !important;
  color: #b3bdc9 !important;
  font-size: 11px !important;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}
.pv3-node-btn:hover { transform: translateY(-2px); color: #edf2f7 !important; }
.pv3-node-btn.is-trigger:hover { border-color: rgba(196, 181, 253, 0.5) !important; background: rgba(124, 58, 237, 0.14) !important; }
.pv3-node-btn.is-prompt:hover { border-color: rgba(110, 231, 183, 0.5) !important; background: rgba(16, 185, 129, 0.12) !important; }
.pv3-node-btn.is-media:hover { border-color: rgba(249, 168, 212, 0.5) !important; background: rgba(236, 72, 153, 0.12) !important; }
.pv3-node-btn.is-objection:hover { border-color: rgba(125, 211, 252, 0.5) !important; background: rgba(14, 165, 233, 0.12) !important; }
.pv3-node-btn.is-scheduler:hover { border-color: rgba(252, 211, 77, 0.5) !important; background: rgba(245, 158, 11, 0.12) !important; }

.pv3-minimap {
  position: absolute; bottom: 20px; left: 20px; z-index: 100;
  width: 156px; height: 96px;
  border: 1px solid rgba(216, 255, 114, 0.35);
  border-radius: 10px;
  background: rgba(9, 13, 18, 0.88);
  backdrop-filter: blur(8px);
  pointer-events: none;
}
.pv3-minimap small {
  position: absolute; top: 6px; left: 8px;
  color: #687486; font-size: 8px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
}

/* ── Media ────────────────────────────────────────────────────────── */

.pv3-dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 11px;
  min-height: 200px;
  padding: 34px 22px;
  border: 2px dashed rgba(255, 255, 255, 0.14) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.014) !important;
  color: #8a93a3;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.pv3-dropzone:hover { border-color: rgba(216, 255, 114, 0.4) !important; background: rgba(216, 255, 114, 0.03) !important; }
.pv3-dropzone svg { opacity: 0.55; }
.pv3-dropzone p { margin: 0; font-size: 12.5px; color: #8a93a3; }

.pv3-asset-card {
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 15px;
  background: #0e141b;
  overflow: hidden;
  transition: border-color 0.16s ease, transform 0.16s ease;
}
.pv3-asset-card:hover { border-color: rgba(216, 255, 114, 0.28); transform: translateY(-2px); }
.pv3-asset-preview {
  height: 122px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4, 7, 10, 0.7);
  background-size: cover; background-position: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 30px;
}
.pv3-asset-info { padding: 10px 12px 12px; }
.pv3-asset-name { color: #dfe6ee; font-size: 11.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv3-asset-meta { color: #687486; font-size: 10px; margin-top: 3px; }

/* ── Settings navigation ──────────────────────────────────────────── */

.pv3-settings-layout {
  display: grid;
  grid-template-columns: 205px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
@media (max-width: 1000px) { .pv3-settings-layout { grid-template-columns: minmax(0, 1fr); } }

.pv3-settings-nav {
  position: sticky; top: 0;
  display: flex; flex-direction: column; gap: 3px;
  padding: 9px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 15px;
  background: #0e141b;
}
.pv3-settings-nav button {
  display: flex; align-items: center; gap: 8px;
  border: none !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: #8a93a3 !important;
  font-size: 12px !important;
  font-weight: 650;
  text-align: left;
  padding: 8px 11px !important;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.pv3-settings-nav button:hover { background: rgba(255, 255, 255, 0.045) !important; color: #edf2f7 !important; }
.pv3-settings-nav button.active { background: rgba(216, 255, 114, 0.1) !important; color: #d8ff72 !important; }

.pv3-scope .objection-rule-item {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 13px;
  margin-bottom: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.022);
}
.pv3-scope .objection-label { color: #ffd699; font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.pv3-scope .objection-input { width: 100%; resize: vertical; font-size: 12px !important; }

/* Full-height module pages (CRM + Flow Builder canvas) */
#tab-inbox.pv3-scope { display: none; }
#tab-inbox.pv3-scope.active { display: flex !important; flex-direction: column; padding: 0 !important; overflow: hidden !important; }
#tab-bot-builder.pv3-scope.active { padding: 0 !important; overflow: hidden !important; position: relative; }
#tab-bot-builder.pv3-scope .pv3-flow-directory { height: 100%; overflow-y: auto; padding: 24px 28px 40px; scrollbar-width: thin; scrollbar-color: #29313c transparent; }

/* UI v3 sub-navigation strip (injected across module families) */
.pv3-subnav {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding: 5px;
  width: fit-content;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  background: rgba(13, 18, 25, 0.7);
}
.pv3-subnav button {
  border: 1px solid transparent !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: #8a93a3 !important;
  font-size: 11.5px !important;
  font-weight: 650;
  padding: 6px 13px !important;
  cursor: pointer;
  transition: all 0.15s ease;
}
.pv3-subnav button:hover { color: #edf2f7 !important; background: rgba(255, 255, 255, 0.05) !important; }
.pv3-subnav button.active {
  background: rgba(216, 255, 114, 0.11) !important;
  border-color: rgba(216, 255, 114, 0.4) !important;
  color: #d8ff72 !important;
}

/* ════════════════════════════════════════════════════════════════════
   UI v3 — Workspace polish layer (additive, CSS-only)
   Fixes the broad `[class*="empty"]` product rule bleeding into
   workspace text atoms, restores intended surfaces, and refines
   spacing / alignment / hierarchy. No selectors used by JS renamed.
   ════════════════════════════════════════════════════════════════════ */

/* 1. Neutralize background/border bleed on workspace empty-state atoms */
.oc-product-page .ws-empty-surface [class*="empty"]:not(.ws-empty-action):not(.ws-empty-action-icon),
.oc-product-page .ws-conv-empty [class*="empty"],
.oc-product-page .ws-conv-empty-icon,
.oc-product-page .ws-conv-empty-title,
.oc-product-page .ws-conv-empty-hint,
.oc-product-page .ws-empty-kicker,
.oc-product-page .ws-empty-title,
.oc-product-page .ws-empty-copy,
.oc-product-page .ws-empty-hero,
.oc-product-page .ws-empty-actions,
.oc-product-page .ws-empty-action-label,
.oc-product-page .ws-empty-action-hint {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* 2. Restore the intended hero surface gradient */
.oc-product-page .ws-empty-surface {
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(255, 255, 255, 0.012) !important;
}

/* 3. Re-assert quick-action card styling over the generic product rule */
.oc-product-page .ws-empty-action {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  min-height: 72px;
  padding: 10px 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 14px !important;
  background: linear-gradient(105deg, rgba(16, 24, 34, 0.98), rgba(12, 19, 29, 0.95)) !important;
  color: #dfe6ee !important;
  text-align: left;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.oc-product-page .ws-empty-action:hover {
  transform: translateY(-2px);
  border-color: rgba(216, 255, 114, 0.3) !important;
  background: rgba(216, 255, 114, 0.06) !important;
}

.oc-product-page .ws-empty-action.primary {
  border-color: rgba(216, 255, 114, 0.42) !important;
  background: linear-gradient(105deg, rgba(216, 255, 114, 0.08), rgba(12, 20, 28, 0.96)) !important;
}

.oc-product-page .ws-empty-action-label {
  font-size: 13.5px;
  font-weight: 720;
  color: #edf2f7 !important;
}

.oc-product-page .ws-empty-action.primary .ws-empty-action-label { color: #d8ff72 !important; }

.oc-product-page .ws-empty-action-hint {
  font-size: 11.5px;
  line-height: 1.5;
  color: #8a93a3 !important;
}

/* 4. Hero hierarchy: kicker → title → copy rhythm */
.oc-product-page .ws-empty-kicker {
  color: #d8ff72 !important;
  font-size: 9.5px;
  letter-spacing: 0.22em;
}

.oc-product-page .ws-empty-title {
  font-size: clamp(26px, 2.6vw, 38px) !important;
  letter-spacing: -0.03em;
}

.oc-product-page .ws-empty-copy {
  max-width: 560px;
  margin: 0 auto !important;
  font-size: 13px;
}

.oc-product-page .ws-empty-actions { gap: 9px; margin-top: 4px; }

/* 5. Right panel tabs: underline tabs, not squeezed buttons */
.ws-right .rp-tabs { padding: 0 6px; overflow-x: visible; }

.ws-right .rp-tab-btn,
.ws-right .rp-tab-btn.oc-product-button {
  min-height: 34px;
  padding: 7px 5px !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #77839a !important;
  font-size: 10.5px !important;
  font-weight: 720;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.ws-right .rp-tab-btn:hover { color: #edf2f7 !important; transform: none; }

.ws-right .rp-tab-btn.active {
  color: #d8ff72 !important;
  border-bottom-color: #d8ff72 !important;
}

.ws-right .rp-tab-icon { font-size: 11px; margin-right: 2px; }

/* 6. Left panel: clearer header block and calmer empty state */
.ws-left-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.045);
  padding-bottom: 12px;
}

.ws-left .ws-conv-empty {
  gap: 4px;
  margin-top: 8px;
  padding: 30px 16px !important;
}

.ws-left .ws-conv-empty-icon { margin-bottom: 6px; opacity: 0.8; }

.ws-left .ws-conv-empty-title {
  font-size: 12.5px !important;
  font-weight: 650;
  color: #dfe6ee !important;
}

.ws-left .ws-conv-empty-hint {
  font-size: 11px !important;
  line-height: 1.55;
  color: #77839a !important;
}

/* 7. Composer: consistent focus and quieter helper row */
.ws-composer { padding: 12px 18px 14px; }

.ws-composer-input:focus {
  border-color: rgba(216, 255, 114, 0.4) !important;
  box-shadow: 0 0 0 3px rgba(216, 255, 114, 0.06) !important;
}

/* 8. Runtime column: keep reading measure centered with breathing room */
.ws-stage { min-height: 0; }
.ws-empty-surface { padding: 24px 20px 20px; gap: 16px; }

/* Contacts: compact row density (toggled by the toolbar settings button) */
#tab-contacts.contacts-compact #contacts-table-body > div {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

/* ════════════════════════════════════════════════════════════════════
   UI v3 — Product consistency layer (flat, Linear/Vercel-leaning)
   Unifies toolbar controls, badges, and spacing on legacy inline-styled
   surfaces (Contacts, Boards) with the shared pv3 control language.
   ════════════════════════════════════════════════════════════════════ */

/* Toolbar buttons on Contacts + Boards match pv3-btn */
#tab-contacts .oc-product-button,
#tab-contacts button[title],
#tab-boards .action-btn,
#tab-boards button[title] {
  min-height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  color: #8a93a3 !important;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

#tab-contacts button[title]:hover,
#tab-boards button[title]:hover {
  border-color: rgba(216, 255, 114, 0.3) !important;
  background: rgba(216, 255, 114, 0.07) !important;
  color: #edf2f7 !important;
}

/* Toolbar inputs/selects flat + consistent focus */
#tab-contacts input[type="text"],
#tab-contacts select,
#tab-boards input[type="text"],
#tab-boards select {
  background: rgba(255, 255, 255, 0.028) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 8px !important;
}

#tab-contacts input[type="text"]:focus,
#tab-boards input[type="text"]:focus {
  border-color: rgba(216, 255, 114, 0.4) !important;
  box-shadow: 0 0 0 3px rgba(216, 255, 114, 0.06) !important;
}

/* CRM conversation workspace: assistant-forward touches */
.pv3-scope .inbox-channel-select,
.pv3-scope .toolbar-select {
  border-radius: 8px !important;
}

.pv3-scope .pause-duration-select { max-width: 130px; font-size: 11px !important; }

/* Consistent scrollbars on module surfaces */
.pv3-scope *::-webkit-scrollbar { width: 8px; height: 8px; }
.pv3-scope *::-webkit-scrollbar-thumb { background: #252c36; border-radius: 4px; }
.pv3-scope *::-webkit-scrollbar-track { background: transparent; }

/* ── AI Mission Board ─────────────────────────────────────────────── */

.pv3-board-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.pv3-board-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.pv3-board-summary .pv3-kpi { display: flex; align-items: center; gap: 11px; }
.pv3-board-summary .pv3-kpi i {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
}
.pv3-board-summary .is-running i { background: #77a7ff; box-shadow: 0 0 8px rgba(119,167,255,0.6); }
.pv3-board-summary .is-waiting i { background: #ffbf69; box-shadow: 0 0 8px rgba(255,191,105,0.5); }
.pv3-board-summary .is-completed i { background: #5eeaa5; box-shadow: 0 0 8px rgba(94,234,165,0.5); }
.pv3-board-summary .is-failed i { background: #ff6b6b; box-shadow: 0 0 8px rgba(255,107,107,0.5); }

.pv3-mission-col {
  flex: 0 0 320px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 400px;
}

.pv3-mission-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 4px 8px;
  color: #8a93a3;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pv3-mission-card {
  padding: 13px 14px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 13px;
  background: #0e141b;
  cursor: grab;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.pv3-mission-card:hover { border-color: rgba(216, 255, 114, 0.26); transform: translateY(-1px); }

.pv3-mission-title {
  display: flex; align-items: center; gap: 9px;
  color: #edf2f7; font-size: 13px; font-weight: 680;
  min-width: 0;
}
.pv3-mission-title span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pv3-mission-meta {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 7px;
  color: #77839a; font-size: 10.5px;
}

.pv3-mission-progress {
  height: 4px; border-radius: 999px;
  margin-top: 10px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.pv3-mission-progress i {
  display: block; height: 100%;
  width: var(--mission-progress, 0%);
  border-radius: inherit;
  background: #d8ff72;
}

.pv3-mission-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 9px;
}

/* ── Automation execution status strip ────────────────────────────── */
/* Keep every mission stage aligned while allowing the pipeline to define its column count. */
.oc-product-boards #boards-kanban-container {
  display: grid !important;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  align-items: stretch !important;
  width: 100%;
}

.oc-product-boards .pv3-mission-col {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.oc-product-boards .pv3-mission-col-head {
  min-height: 34px;
  box-sizing: border-box;
}

.oc-product-boards .pv3-mission-card,
.oc-product-boards .pv3-mission-col > .pv3-empty {
  width: 100%;
  min-height: 116px;
  box-sizing: border-box;
}

.oc-product-boards .pv3-mission-col > .pv3-empty {
  display: grid;
  place-items: center;
}

.pv3-exec-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

/* ── Settings nav group labels ────────────────────────────────────── */
.pv3-settings-nav .pv3-nav-group-label {
  padding: 10px 11px 4px;
  color: #566070;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.pv3-settings-nav .pv3-nav-group-label:first-child { padding-top: 4px; }

/* ── System Center: shared collapsible advanced card ──────────────── */
.pv3-details {
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 15px;
  background: #0e141b;
  overflow: hidden;
}
.pv3-details > summary {
  list-style: none;
  cursor: pointer;
  padding: 13px 17px;
  color: #8a93a3;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}
.pv3-details > summary::-webkit-details-marker { display: none; }
.pv3-details > summary::before {
  content: "\203A";
  color: #566070;
  font-size: 15px;
  transition: transform 0.15s ease;
}
.pv3-details[open] > summary::before { transform: rotate(90deg); }
.pv3-details[open] > summary { color: #dfe6ee; border-bottom: 1px solid rgba(255, 255, 255, 0.055); }
.pv3-details-body { padding: 15px 17px 17px; }
.pv3-details .pv3-panel { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.pv3-details .pv3-panel-head { padding-left: 0; padding-right: 0; }
.pv3-details .pv3-panel-body { padding-left: 0; padding-right: 0; padding-bottom: 0; }

/* System Center status rows */
.pv3-status-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.018);
  font-size: 12px;
  color: #aab4c2;
}
.pv3-status-row b { color: #dfe6ee; font-weight: 650; word-break: break-word; }

/* Automation page: labelled section dividers (UI-only grouping) */
.pv3-page-section {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 26px 0 12px;
}
.pv3-page-section:first-of-type { margin-top: 4px; }
.pv3-page-section span {
  color: #8a93a3;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0.02em;
}
.pv3-page-section::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
}

/* Broadcast page: unify legacy toolbar controls with the shared style */
#tab-broadcast .broadcast-tab { font-size: 13px; }
#tab-broadcast .broadcast-tab.active { border-bottom-color: #d8ff72 !important; color: #d8ff72 !important; }
#tab-broadcast input[type="text"] {
  background: rgba(255, 255, 255, 0.028) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 8px !important;
}
#tab-broadcast input[type="text"]:focus {
  border-color: rgba(216, 255, 114, 0.4) !important;
  box-shadow: 0 0 0 3px rgba(216, 255, 114, 0.06) !important;
}
#tab-broadcast .action-btn {
  border-radius: 8px !important;
}
#tab-broadcast #broadcast-add-btn {
  background: #d8ff72 !important;
  color: #10150d !important;
  border: 1px solid rgba(216, 255, 114, 0.5) !important;
  font-weight: 700;
}

/* ============================================================
   Mission Control - section navigation
   ------------------------------------------------------------
   Mission Control was previously one continuous scrolling column
   of nine panels. The panels are unchanged; they are now grouped
   into six sections with a tab bar. Presentation only - every
   panel stays mounted, sections toggle via the [hidden] attribute.
   ============================================================ */

/* #tab-mission-control now carries .oc-product-page like the other
   21 pages, and that shell owns the page padding. Drop the container's
   own horizontal/top padding so it is not applied twice. */
.oc-product-mission-control .mc-v3-container {
  padding: 0 0 var(--ds-space-xl);
}

/* Shared product tab bar. Mission Control's section nav and the Knowledge
   page tab bar are the same component - one definition, multiple consumers. */
.oc-tabs,
.mc-v3-sectionnav {
  display: flex;
  align-items: center;
  gap: var(--ds-space-xs);
  margin-top: var(--ds-space-xl);
  padding-bottom: 2px;
  border-bottom: var(--ds-border-divider);
  overflow-x: auto;
  scrollbar-width: none;
}

.oc-tabs::-webkit-scrollbar {
  display: none;
}

.oc-tabs-tab {
  flex: 0 0 auto;
  padding: var(--ds-space-sm) var(--ds-space-md);
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: var(--ds-radius-sm) var(--ds-radius-sm) 0 0;
  background: transparent;
  color: #687486;
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-base);
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--ds-transition-fast),
              border-color var(--ds-transition-fast),
              background var(--ds-transition-fast);
}

.oc-tabs-tab:hover {
  color: #edf2f7;
  background: rgba(255, 255, 255, 0.03);
}

.oc-tabs-tab:focus-visible {
  outline: 2px solid #d8ff72;
  outline-offset: -2px;
}

.oc-tabs-tab.is-active {
  color: #d8ff72;
  border-bottom-color: #d8ff72;
}

@media (max-width: 640px) {
  .oc-tabs {
    margin-top: var(--ds-space-lg);
  }

  .oc-tabs-tab {
    padding: var(--ds-space-sm) var(--ds-space-sm);
    font-size: var(--ds-text-sm);
  }
}

/* ============================================================
   Page header consistency
   ------------------------------------------------------------
   Four parallel header implementations had drifted apart:
     .pv3-header       - 9 pages (Automation, Media, Signals, ...)
     .cc-header        - Dashboard only
     .workspace-header - Workspace only
     (Knowledge had no page header at all)

   .pv3-* is the de facto standard by usage, so the other two are
   aligned to its typography here. This is presentation only - no
   markup, ids, handlers or components are changed, so #cc-refresh-btn,
   #cc-last-refresh and the workspaceUi header builder all keep
   working exactly as before.
   ============================================================ */

.cc-header,
.workspace-header {
  align-items: flex-end;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.cc-header-title,
.workspace-title {
  margin: 0 !important;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 30px) !important;
  font-weight: 680 !important;
  letter-spacing: -0.03em;
  color: #edf2f7 !important;
}

.workspace-eyebrow {
  color: #687486;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.16em;
  margin-bottom: 6px;
}

.cc-header-subtitle,
.workspace-subtitle {
  margin: 4px 0 0;
  max-width: 640px;
  color: #8a93a3;
  font-size: 12.5px;
  line-height: 1.55;
}

/* The Knowledge tab bar now uses the shared .oc-tabs component, which draws
   its own active indicator via border-bottom. Suppress the page-local
   ::after underline (defined twice at #tab-library .ai-lib-tab.active) so
   the indicator is not rendered twice and matches Mission Control. */
#tab-library .oc-tabs-tab.ai-lib-tab.active::after {
  content: none;
}

/* ============================================================
   Nova assistant — profile context and recommendations
   ------------------------------------------------------------
   The assistant panel already had .nova-summary and
   .nova-action-btn. These are layout-only additions for the
   profile context block and the recommendation list; all
   colours, spacing and radii come from existing tokens.
   ============================================================ */

.nova-profile-context {
  margin-bottom: var(--ds-space-md);
}

/* Recommendations stack full width and wrap, unlike the icon
   grid used by quick actions. */
.nova-rec-grid {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-xs);
}

.nova-rec-btn {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  white-space: normal;
  line-height: 1.35;
}

/* In-focus for the active workspace profile. Emphasis only —
   out-of-focus recommendations remain visible and clickable. */
.nova-rec-btn[data-nova-focus="1"] {
  color: #d8ff72;
  border-color: rgba(216, 255, 114, 0.35);
}

/* Header toggle for the assistant panel. */
.oc-assistant-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-xs);
  border: 0;
  font: inherit;
  cursor: pointer;
}

/* ============================================================
   Authentication — login overlay (js/auth.js)
   Shown when there is no valid server-side session. Deliberately
   blocks the whole app: an unauthenticated user sees no data.
   ============================================================ */

.oneai-login-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  padding: 24px 18px;
  background:
    radial-gradient(600px 400px at 50% 38%, rgba(139,124,246,0.08), transparent 70%),
    #060910;
}

.oneai-login-overlay.oneai-login-visible {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100%;
}

.oneai-login-card {
  width: min(100%, 420px);
  margin: auto;
  padding: 26px 28px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 15px;
  background: #0a0e1a;
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 18px 50px rgba(0,0,0,0.35);
  color: #c8d0e8;
}

.oneai-login-brand {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8b7cf6;
}

.oneai-login-title {
  margin: 14px 0 0;
  color: #f0f3ff;
  font-size: 20px;
}

.oneai-login-hint {
  margin-top: 7px;
  color: #8892aa;
  font-size: 12px;
  line-height: 1.5;
}

.oneai-login-form {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

.oneai-login-label {
  color: #8892aa;
  font-size: 11px;
}

.oneai-login-input {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 7px;
  background: #060910;
  color: #f0f3ff;
  font: inherit;
}

.oneai-login-input:focus {
  outline: 2px solid rgba(139,124,246,.35);
  outline-offset: 1px;
  border-color: #8b7cf6;
}

.oneai-login-error {
  color: #f87171;
  font-size: 12px;
  line-height: 1.4;
}

.oneai-login-submit {
  min-height: 38px;
  margin-top: 4px;
  border: 1px solid rgba(139,124,246,.45);
  border-radius: 7px;
  background: #8b7cf6;
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.oneai-login-submit:disabled {
  opacity: .55;
  cursor: wait;
}

/* Hide app chrome behind the overlay so no stale data is readable. */
body.oneai-unauthenticated .app-shell,
body.oneai-unauthenticated .os-shell,
body.oneai-unauthenticated .shell-composer {
  display: none !important;
  pointer-events: none;
  user-select: none;
}

/* ============================================================
   AI-first surfaces (js/aiFirst.js)
   One shared vocabulary for cards, chips, tables, loading,
   empty and error states across Approvals, Results and
   Knowledge & Connections. Uses design-system tokens with
   literal fallbacks so it renders correctly even if a token
   is missing.
   ============================================================ */

.af-root {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--ds-space-3xl, 32px) var(--ds-space-2xl, 24px) var(--ds-space-3xl, 32px);
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-xl, 20px);
}

.af-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.af-title {
  margin: 0 0 4px;
  font-size: 24px;
  font-weight: 600;
  color: var(--ds-text, #e8edf5);
}

.af-subtitle {
  margin: 0;
  font-size: 13px;
  color: var(--ds-text-muted, #8b97a8);
}

.af-stack {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-lg, 16px);
}

/* --- Cards --- */
.af-card {
  border: 1px solid var(--ds-border, rgba(255, 255, 255, 0.09));
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  overflow: hidden;
}

.af-card-attention {
  border-color: rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.04);
}

.af-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--ds-border, rgba(255, 255, 255, 0.07));
}

.af-card-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ds-text, #e8edf5);
}

.af-count {
  min-width: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--ds-text-muted, #8b97a8);
  text-align: center;
}

.af-card-body { padding: 6px 0 0; }
.af-card-body > .af-state { margin: 10px 18px 18px; }

/* --- Chips --- */
.af-chip {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.7;
  white-space: nowrap;
}

.af-chip-neutral { background: rgba(255, 255, 255, 0.07); color: var(--ds-text-muted, #8b97a8); }
.af-chip-ok      { background: rgba(34, 197, 94, 0.13);  color: #86efac; }
.af-chip-off     { background: rgba(148, 163, 184, 0.13); color: #cbd5e1; }
.af-chip-risk    { background: rgba(239, 68, 68, 0.13);  color: #fca5a5; }
.af-chip-warn    { background: rgba(245, 158, 11, 0.14); color: #fcd34d; }

/* --- Tables --- */
.af-table-wrap { overflow-x: auto; }

.af-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.af-table th {
  text-align: left;
  padding: 10px 18px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ds-text-muted, #8b97a8);
  border-bottom: 1px solid var(--ds-border, rgba(255, 255, 255, 0.07));
  white-space: nowrap;
}

.af-table td {
  padding: 11px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: var(--ds-text, #e8edf5);
  vertical-align: middle;
}

.af-table tbody tr:last-child td { border-bottom: none; }
.af-table tbody tr:hover { background: rgba(255, 255, 255, 0.02); }

.af-code {
  padding: 1px 6px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.06);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}

/* --- States --- */
.af-state {
  padding: 22px 18px;
  border-radius: 10px;
  text-align: center;
}

.af-state-title { font-size: 14px; font-weight: 600; color: var(--ds-text, #e8edf5); }
.af-state-body  { margin-top: 4px; font-size: 13px; color: var(--ds-text-muted, #8b97a8); }

.af-state-empty { background: rgba(255, 255, 255, 0.02); }

.af-state-error {
  background: rgba(239, 68, 68, 0.07);
  border: 1px solid rgba(239, 68, 68, 0.22);
  text-align: left;
}

.af-state-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--ds-text-muted, #8b97a8);
  font-size: 13px;
}

.af-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-top-color: var(--ds-accent, #7dd3a0);
  border-radius: 50%;
  animation: af-spin 0.7s linear infinite;
}

@keyframes af-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .af-spinner { animation-duration: 2.4s; }
}

/* --- Controls --- */
.af-btn {
  padding: 7px 14px;
  border: 1px solid var(--ds-border, rgba(255, 255, 255, 0.12));
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--ds-text, #e8edf5);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}

.af-btn:hover { background: rgba(255, 255, 255, 0.08); }
.af-btn:focus-visible,
.af-seg:focus-visible,
.af-input:focus-visible {
  outline: 2px solid var(--ds-accent, #7dd3a0);
  outline-offset: 2px;
}

.af-filterbar {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.af-input {
  flex: 1 1 220px;
  min-width: 180px;
  padding: 8px 12px;
  border: 1px solid var(--ds-border, rgba(255, 255, 255, 0.12));
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--ds-text, #e8edf5);
  font-size: 13px;
  font-family: inherit;
}

.af-segmented {
  display: inline-flex;
  border: 1px solid var(--ds-border, rgba(255, 255, 255, 0.12));
  border-radius: 8px;
  overflow: hidden;
}

.af-seg {
  padding: 7px 13px;
  border: none;
  background: transparent;
  color: var(--ds-text-muted, #8b97a8);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}

.af-seg.is-active {
  background: rgba(125, 211, 160, 0.14);
  color: var(--ds-accent, #7dd3a0);
}

/* --- Summary tiles --- */
.af-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

.af-tile {
  padding: 16px 18px;
  border: 1px solid var(--ds-border, rgba(255, 255, 255, 0.09));
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}

.af-tile-value {
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ds-text, #e8edf5);
}

.af-tile-label {
  margin-top: 2px;
  font-size: 12px;
  color: var(--ds-text-muted, #8b97a8);
}

/* --- Planned connectors --- */
.af-note {
  margin: 0 18px 14px;
  font-size: 12px;
  color: var(--ds-text-muted, #8b97a8);
}

.af-planned-group { padding: 0 18px 16px; }

.af-planned-group-label {
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ds-text-muted, #8b97a8);
}

.af-planned-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

.af-planned-card {
  padding: 13px 15px;
  border: 1px dashed var(--ds-border, rgba(255, 255, 255, 0.13));
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.015);
  opacity: 0.78;
}

.af-planned-name { font-size: 13px; font-weight: 600; color: var(--ds-text, #e8edf5); }
.af-planned-note { margin: 3px 0 8px; font-size: 12px; color: var(--ds-text-muted, #8b97a8); }

/* --- Nav additions --- */
.nav-badge {
  margin-left: auto;
  min-width: 18px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.9);
  color: #1a1206;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.nav-subgroup-label {
  padding: 12px 0 5px 14px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ds-text-muted, #6b7688);
  list-style: none;
}

.af-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .af-root { padding: 20px 14px 28px; }
  .af-title { font-size: 20px; }
  .af-header { flex-direction: column; align-items: stretch; }
  .af-table th, .af-table td { padding: 9px 12px; }
  .af-filterbar { flex-direction: column; align-items: stretch; }
  .af-segmented { overflow-x: auto; }
}

/* ============================================================
   Workspace Connectors v2 — Premium AI-OS visual system
   Presentation only. One spacing scale, one type scale, one
   icon language, one button hierarchy, one card language.
   Scoped to .af-root so the rest of the app is untouched.
   ============================================================ */
.af-root {
  /* Single semantic palette + gold accent (scoped) */
  --af-gold: #d9b673;
  --af-gold-strong: #e8c886;
  --af-gold-soft: rgba(217, 182, 115, 0.14);
  --af-gold-line: rgba(217, 182, 115, 0.34);
  --af-success: #34d399;
  --af-warning: #fbbf24;
  --af-danger: #f87171;
  --af-info: #60a5fa;
  --af-surface: rgba(255, 255, 255, 0.022);
  --af-surface-2: rgba(255, 255, 255, 0.04);
  --af-line: rgba(255, 255, 255, 0.08);
  --af-radius: 18px;
  --af-lift: cubic-bezier(0.16, 1, 0.3, 1);
  max-width: 1180px;
}

/* --- Zone 1: Workspace Hero --- */
.af-hero {
  position: relative;
  padding: 30px 30px 26px;
  border: 1px solid var(--af-line);
  border-radius: 22px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(217, 182, 115, 0.10), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
  overflow: hidden;
}
.af-hero::after {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--af-gold-line), transparent);
}
.af-hero-copy { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.af-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--af-gold); margin-bottom: 12px;
}
.af-hero-eyebrow .af-dot { background: var(--af-gold); box-shadow: 0 0 0 4px var(--af-gold-soft); }
.af-hero h2 {
  margin: 0; font-size: 32px; line-height: 1.1; font-weight: 650; letter-spacing: -0.02em;
  color: var(--ds-text, #edf2f7);
}
.af-hero-sub { margin: 8px 0 0; font-size: 14px; color: var(--ds-text-muted, #7f8a99); max-width: 46ch; }

.af-hero-metrics {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 24px;
}
.af-metric {
  position: relative;
  padding: 18px 18px 16px;
  border: 1px solid var(--af-line);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  backdrop-filter: blur(8px);
  transition: transform 0.28s var(--af-lift), border-color 0.28s var(--af-lift), box-shadow 0.28s var(--af-lift);
  overflow: hidden;
}
.af-metric:hover { transform: translateY(-3px); border-color: var(--af-gold-line); box-shadow: 0 14px 34px -18px rgba(0,0,0,0.7); }
.af-metric-top { display: flex; align-items: center; justify-content: space-between; }
.af-metric-icon {
  width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--af-surface-2); color: var(--ds-text, #edf2f7);
}
.af-metric-icon svg { width: 19px; height: 19px; }
.af-metric.is-ok    .af-metric-icon { background: rgba(52,211,153,0.14);  color: var(--af-success); }
.af-metric.is-warn  .af-metric-icon { background: rgba(251,191,36,0.14);  color: var(--af-warning); }
.af-metric.is-sync  .af-metric-icon { background: rgba(96,165,250,0.14);  color: var(--af-info); }
.af-metric.is-gold  .af-metric-icon { background: var(--af-gold-soft);    color: var(--af-gold); }
.af-metric-value { margin-top: 14px; font-size: 34px; font-weight: 650; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ds-text, #edf2f7); }
.af-metric-label { margin-top: 6px; font-size: 12.5px; color: var(--ds-text-muted, #7f8a99); }

/* --- Animated status dots --- */
.af-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; background: var(--ds-text-muted, #7f8a99); }
.af-dot-ok   { background: var(--af-success); box-shadow: 0 0 0 0 rgba(52,211,153,0.5); animation: af-pulse 2s infinite; }
.af-dot-warn { background: var(--af-warning); }
.af-dot-off  { background: #64748b; }
.af-dot-sync { background: var(--af-info); animation: af-pulse 1.2s infinite; }
@keyframes af-pulse {
  0%   { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
  70%  { box-shadow: 0 0 0 6px rgba(0,0,0,0); opacity: 0.85; }
  100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .af-dot-ok, .af-dot-sync { animation: none; } }

/* --- Zone 2: Connector cards --- */
.af-conn-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px;
}
.af-conn-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--af-line);
  border-radius: var(--af-radius);
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.014));
  padding: 18px;
  transition: transform 0.28s var(--af-lift), border-color 0.28s var(--af-lift), box-shadow 0.28s var(--af-lift);
}
.af-conn-card:hover { transform: translateY(-4px); border-color: var(--af-gold-line); box-shadow: 0 20px 44px -22px rgba(0,0,0,0.75); }
.af-conn-head { display: flex; align-items: center; gap: 13px; }
.af-logo {
  width: 46px; height: 46px; border-radius: 13px; flex: none;
  display: grid; place-items: center; font-size: 20px; font-weight: 700;
  background: var(--af-surface-2); color: var(--ds-text, #edf2f7);
  border: 1px solid var(--af-line);
}
.af-logo svg { width: 24px; height: 24px; }
.af-conn-name { font-size: 15.5px; font-weight: 620; color: var(--ds-text, #edf2f7); line-height: 1.2; }
.af-conn-cat { margin-top: 2px; font-size: 11.5px; color: var(--ds-text-muted, #7f8a99); text-transform: capitalize; }
.af-status {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
  border: 1px solid var(--af-line); background: var(--af-surface-2); color: var(--ds-text-muted,#7f8a99);
  white-space: nowrap;
}
.af-status.is-ok   { color: var(--af-success); background: rgba(52,211,153,0.10);  border-color: rgba(52,211,153,0.28); }
.af-status.is-warn { color: var(--af-warning); background: rgba(251,191,36,0.10);  border-color: rgba(251,191,36,0.28); }
.af-status.is-off  { color: #cbd5e1;           background: rgba(148,163,184,0.10); border-color: rgba(148,163,184,0.24); }
.af-status.is-sync { color: var(--af-info);    background: rgba(96,165,250,0.10);  border-color: rgba(96,165,250,0.28); }

.af-conn-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin: 16px 0 4px; }
.af-meta-k { font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ds-text-muted, #7f8a99); }
.af-meta-v { margin-top: 2px; font-size: 13px; font-weight: 550; color: var(--ds-text, #edf2f7); word-break: break-word; }
.af-conn-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--af-line); }

/* --- Zone 3: Activity timeline --- */
.af-timeline { display: flex; flex-direction: column; padding: 4px 4px 4px 2px; }
.af-tl-item { position: relative; display: flex; gap: 14px; padding: 12px 6px 12px 4px; }
.af-tl-rail { position: relative; display: flex; flex-direction: column; align-items: center; flex: none; width: 16px; }
.af-tl-rail::before {
  content: ""; position: absolute; top: 18px; bottom: -12px; left: 50%; width: 1px;
  transform: translateX(-50%); background: var(--af-line);
}
.af-tl-item:last-child .af-tl-rail::before { display: none; }
.af-tl-node { width: 11px; height: 11px; border-radius: 50%; margin-top: 4px; border: 2px solid var(--ds-bg, #0d1117); z-index: 1; }
.af-tl-node.is-ok   { background: var(--af-success); }
.af-tl-node.is-warn { background: var(--af-warning); }
.af-tl-node.is-off  { background: #64748b; }
.af-tl-node.is-sync { background: var(--af-info); }
.af-tl-body { flex: 1; min-width: 0; }
.af-tl-text { font-size: 13.5px; color: var(--ds-text, #edf2f7); }
.af-tl-text strong { font-weight: 620; }
.af-tl-time { margin-top: 2px; font-size: 11.5px; color: var(--ds-text-muted, #7f8a99); }

/* --- Zone 4: Knowledge Sources (workspace cards) --- */
.af-ws-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.af-ws-card {
  display: flex; flex-direction: column; gap: 12px;
  border: 1px solid var(--af-line); border-radius: 16px; padding: 16px;
  background: var(--af-surface);
  transition: transform 0.28s var(--af-lift), border-color 0.28s var(--af-lift);
}
.af-ws-card:hover { transform: translateY(-3px); border-color: var(--af-gold-line); }
.af-ws-top { display: flex; align-items: center; gap: 11px; }
.af-ws-ico { width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center; background: var(--af-surface-2); color: var(--af-gold); }
.af-ws-ico svg { width: 17px; height: 17px; }
.af-ws-name { font-size: 14px; font-weight: 600; color: var(--ds-text, #edf2f7); }
.af-ws-sub { font-size: 11px; color: var(--ds-text-muted, #7f8a99); margin-top: 1px; }
.af-ws-rows { display: flex; flex-direction: column; gap: 7px; }
.af-ws-row { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; }
.af-ws-row span:first-child { color: var(--ds-text-muted, #7f8a99); }
.af-ws-health { display: inline-flex; align-items: center; gap: 6px; font-weight: 550; color: var(--ds-text, #edf2f7); }

/* --- Section label (unify hero-adjacent headings) --- */
.af-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 2px 2px 0; }
.af-section-title { margin: 0; font-size: 17px; font-weight: 620; letter-spacing: -0.01em; color: var(--ds-text, #edf2f7); }
.af-section-hint { font-size: 12px; color: var(--ds-text-muted, #7f8a99); }

/* --- Button hierarchy: exactly 4 styles --- */
.af-root .af-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 10px; font-weight: 550;
  transition: transform 0.18s var(--af-lift), background 0.18s var(--af-lift), border-color 0.18s var(--af-lift);
}
.af-root .af-btn:hover { transform: translateY(-1px); }
.af-root .af-btn:active { transform: translateY(0); }
.af-btn-primary {
  background: linear-gradient(180deg, var(--af-gold-strong), var(--af-gold));
  border-color: transparent; color: #241a06; font-weight: 650;
}
.af-btn-primary:hover { background: linear-gradient(180deg, #f0d193, var(--af-gold-strong)); }
.af-btn-ghost { background: transparent; border-color: transparent; color: var(--ds-text-muted, #7f8a99); }
.af-btn-ghost:hover { background: var(--af-surface-2); color: var(--ds-text, #edf2f7); }
.af-root .af-btn-danger { background: rgba(248,113,113,0.08); border-color: rgba(248,113,113,0.28); color: #fca5a5; }
.af-root .af-btn-danger:hover { background: rgba(248,113,113,0.16); }
.af-btn-compact { padding: 6px 11px; font-size: 12px; }

/* --- Progress + skeleton loaders --- */
.af-progress { height: 4px; border-radius: 999px; background: var(--af-surface-2); overflow: hidden; }
.af-progress > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--af-gold), var(--af-gold-strong)); }
.af-skel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.af-skeleton {
  height: 168px; border-radius: var(--af-radius); border: 1px solid var(--af-line);
  background: linear-gradient(100deg, rgba(255,255,255,0.03) 30%, rgba(255,255,255,0.07) 50%, rgba(255,255,255,0.03) 70%);
  background-size: 220% 100%; animation: af-shimmer 1.5s infinite linear;
}
@keyframes af-shimmer { to { background-position: -220% 0; } }
@media (prefers-reduced-motion: reduce) { .af-skeleton { animation: none; } }

/* --- Re-skin existing section cards to match --- */
.af-root .af-card { border-radius: var(--af-radius); background: var(--af-surface); }
.af-root .af-card-head { padding: 15px 20px; }
.af-root .af-card-title { font-size: 15px; }
.af-root .af-tile {
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  transition: transform 0.28s var(--af-lift), border-color 0.28s var(--af-lift);
}
.af-root .af-tile:hover { transform: translateY(-2px); border-color: var(--af-gold-line); }

/* --- Responsive: cards stack, timeline collapses --- */
@media (max-width: 900px) {
  .af-hero-metrics { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .af-hero { padding: 24px 20px; }
  .af-hero h2 { font-size: 26px; }
  .af-conn-grid, .af-ws-grid, .af-skel-grid { grid-template-columns: 1fr; }
  .af-conn-meta { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .af-hero-metrics { grid-template-columns: 1fr; }
  .af-conn-actions .af-btn { flex: 1 1 auto; justify-content: center; }
}

/* ============================================================
   Workspace Connectors v2.1 — Information Architecture
   Progressive disclosure: compact overview + tabs + drawer.
   These rules intentionally override earlier v2 sizing.
   ============================================================ */
.af-root {
  max-width: 1520px;
  padding: 22px clamp(16px, 3vw, 40px) 40px;
  gap: 18px;
}

/* --- Compact hero --- */
.af-root .af-hero { padding: 20px 24px 18px; }
.af-root .af-hero h2 { font-size: 25px; }
.af-root .af-hero-sub { margin-top: 5px; font-size: 13px; }
.af-root .af-hero-metrics { margin-top: 16px; gap: 12px; }
.af-root .af-metric { padding: 14px 16px 13px; }
.af-root .af-metric-value { font-size: 27px; margin-top: 10px; }
.af-root .af-metric-icon { width: 32px; height: 32px; border-radius: 9px; }
.af-root .af-metric-icon svg { width: 16px; height: 16px; }

/* --- Equal-height connector grid --- */
.af-conn-grid {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  align-items: stretch;
  gap: 14px;
}
.af-conn-card {
  height: 100%;
  min-height: 0;
  padding: 0;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  overflow: hidden;
  cursor: pointer;
}
.af-conn-card > * { min-width: 0; }
.af-conn-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 16px 16px 12px;
}
.af-conn-id { min-width: 0; }
.af-conn-name {
  font-size: 15px; font-weight: 620; color: var(--ds-text, #edf2f7);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.af-conn-cat {
  margin-top: 1px; font-size: 11px; color: var(--ds-text-muted, #7f8a99); text-transform: capitalize;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.af-status { max-width: 128px; overflow: hidden; }
.af-status span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* fixed facts area: exactly up to 3 single-line rows */
.af-conn-facts {
  padding: 2px 16px 4px;
  display: flex; flex-direction: column; gap: 7px;
}
.af-fact { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.af-fact-k { font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ds-text-muted, #7f8a99); }
.af-fact-v {
  font-size: 12.5px; font-weight: 550; color: var(--ds-text, #edf2f7);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.af-conn-actions {
  position: relative;
  display: flex; align-items: center; gap: 7px; flex-wrap: nowrap;
  padding: 12px 14px; margin-top: 8px;
  border-top: 1px solid var(--af-line);
}
.af-conn-actions .af-btn { white-space: nowrap; }
.af-conn-actions .af-btn:not(.af-menu-summary):first-child { flex: 0 1 auto; }

/* --- Overflow "More" menu (native details) --- */
.af-menu { position: relative; margin-left: auto; }
.af-menu > summary {
  list-style: none; user-select: none;
  padding: 6px 11px; font-size: 12px; border-radius: 10px;
  border: 1px solid var(--af-line); background: var(--af-surface-2); color: var(--ds-text, #edf2f7);
  cursor: pointer; white-space: nowrap;
}
.af-menu > summary::-webkit-details-marker { display: none; }
.af-menu[open] > summary { border-color: var(--af-gold-line); }
.af-menu-pop {
  position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 40;
  min-width: 190px; padding: 6px;
  border: 1px solid var(--af-line); border-radius: 12px;
  background: #131a24; box-shadow: 0 22px 48px -20px rgba(0,0,0,0.85);
  display: flex; flex-direction: column; gap: 2px;
}
.af-menu-item {
  display: block; width: 100%; text-align: left;
  padding: 8px 10px; border: none; border-radius: 8px;
  background: transparent; color: var(--ds-text, #edf2f7); font: inherit; font-size: 12.5px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.af-menu-item:hover { background: var(--af-surface-2); }
.af-menu-item.is-danger { color: #fca5a5; }

/* --- Secondary tab bar --- */
.af-tabbar {
  display: flex; gap: 4px; flex-wrap: wrap;
  padding: 5px; border: 1px solid var(--af-line); border-radius: 14px;
  background: var(--af-surface);
}
.af-tab {
  padding: 8px 15px; border: none; border-radius: 10px;
  background: transparent; color: var(--ds-text-muted, #7f8a99);
  font: inherit; font-size: 13px; font-weight: 550; cursor: pointer;
  transition: background 0.18s var(--af-lift), color 0.18s var(--af-lift);
  white-space: nowrap;
}
.af-tab:hover { color: var(--ds-text, #edf2f7); background: var(--af-surface-2); }
.af-tab.is-active { background: var(--af-gold-soft); color: var(--af-gold-strong); }

/* --- Two equal compact overview panels --- */
.af-overview-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch; }
.af-panel {
  display: flex; flex-direction: column;
  border: 1px solid var(--af-line); border-radius: var(--af-radius);
  background: var(--af-surface); min-height: 260px;
}
.af-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--af-line);
}
.af-panel-title { font-size: 14px; font-weight: 620; color: var(--ds-text, #edf2f7); }
.af-panel-body { padding: 8px 14px 12px; flex: 1; }
.af-link {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--af-gold); font: inherit; font-size: 12px; font-weight: 600; white-space: nowrap;
}
.af-link:hover { color: var(--af-gold-strong); text-decoration: underline; }

/* --- Bounded scroll lists (sticky header, internal scroll) --- */
.af-scrollbox {
  max-height: 480px; overflow: auto; border-radius: 12px; border: 1px solid var(--af-line);
}
.af-scrollbox .af-table { font-size: 12.5px; }
.af-scrollbox .af-table thead th {
  position: sticky; top: 0; z-index: 2;
  background: #121926; border-bottom: 1px solid var(--af-line);
}
.af-scrollbox .af-table td, .af-scrollbox .af-table th { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Right-side detail drawer --- */
.af-drawer-overlay {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(4, 7, 12, 0.55); backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden; transition: opacity 0.28s var(--af-lift), visibility 0.28s var(--af-lift);
}
.af-drawer-overlay.is-open { opacity: 1; visibility: visible; }
.af-drawer {
  position: fixed; top: 0; right: 0; z-index: 901;
  width: min(500px, 94vw); height: 100vh;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #10151d, #0c1017);
  border-left: 1px solid var(--af-gold-line);
  box-shadow: -30px 0 60px -30px rgba(0,0,0,0.9);
  transform: translateX(100%); transition: transform 0.3s var(--af-lift);
}
.af-drawer-overlay.is-open .af-drawer { transform: translateX(0); }
.af-drawer-head { display: flex; align-items: center; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--af-line); }
.af-drawer-head .af-logo { width: 42px; height: 42px; }
.af-drawer-title { min-width: 0; flex: 1; }
.af-drawer-title .af-conn-name { font-size: 16px; }
.af-drawer-close {
  width: 32px; height: 32px; border-radius: 9px; flex: none;
  border: 1px solid var(--af-line); background: var(--af-surface-2); color: var(--ds-text, #edf2f7);
  font-size: 17px; line-height: 1; cursor: pointer;
}
.af-drawer-close:hover { background: rgba(248,113,113,0.14); border-color: rgba(248,113,113,0.3); color: #fca5a5; }
.af-drawer-tabs { display: flex; gap: 3px; padding: 10px 14px; border-bottom: 1px solid var(--af-line); overflow-x: auto; }
.af-drawer-tab {
  padding: 7px 12px; border: none; border-radius: 9px; background: transparent;
  color: var(--ds-text-muted, #7f8a99); font: inherit; font-size: 12.5px; font-weight: 550; cursor: pointer; white-space: nowrap;
}
.af-drawer-tab:hover { color: var(--ds-text, #edf2f7); background: var(--af-surface-2); }
.af-drawer-tab.is-active { background: var(--af-gold-soft); color: var(--af-gold-strong); }
.af-drawer-body { flex: 1; overflow-y: auto; padding: 16px 20px 28px; }
.af-drawer-body .af-summary-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.af-drawer-body .af-drive-list { max-height: 46vh; overflow-y: auto; padding-right: 2px; }
.af-drawer-body .af-row-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* --- Drive rows: clamp inside drawer --- */
.af-drive-row { min-width: 0; }
.af-drive-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.af-breadcrumb-current { overflow-wrap: anywhere; }

/* --- Responsive grid: 4/3/2/1 --- */
@media (max-width: 1500px) { .af-conn-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } }
@media (max-width: 1200px) { .af-conn-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) {
  .af-conn-grid { grid-template-columns: repeat(2, 1fr); }
  .af-overview-cols { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .af-conn-grid { grid-template-columns: 1fr; }
  .af-tabbar { flex-wrap: nowrap; overflow-x: auto; }
  .af-scrollbox .af-table thead { display: none; }
  .af-scrollbox .af-table td { max-width: none; white-space: normal; }
}

/* ============================================================
   Workspace Connectors v2.2 — Premium refinement
   Lower density, more whitespace, tighter alignment,
   more premium cards, first-class drawer. Overrides v2.1.
   ============================================================ */
.af-root { gap: 26px; padding: 30px clamp(18px, 3vw, 44px) 52px; }

/* Hero — airier */
.af-root .af-hero { padding: 30px 34px 28px; border-radius: 24px; }
.af-root .af-hero-eyebrow { margin-bottom: 14px; letter-spacing: 0.16em; }
.af-root .af-hero h2 { font-size: 29px; }
.af-root .af-hero-sub { margin-top: 8px; font-size: 14px; }
.af-root .af-hero-metrics { margin-top: 26px; gap: 16px; }
.af-root .af-metric { padding: 20px 20px 18px; border-radius: 18px; }
.af-root .af-metric-icon { width: 40px; height: 40px; border-radius: 12px; }
.af-root .af-metric-icon svg { width: 20px; height: 20px; }
.af-root .af-metric-value { font-size: 31px; margin-top: 18px; }
.af-root .af-metric-label { margin-top: 8px; font-size: 13px; }

/* Tab bar — more room, clearer separation */
.af-tabbar { margin-top: 2px; padding: 6px; gap: 6px; border-radius: 16px; }
.af-tab { padding: 10px 18px; font-size: 13.5px; border-radius: 11px; }
.af-tabpanel { display: block; }

/* Connector cards — premium, less dense */
.af-conn-grid { grid-template-columns: repeat(auto-fill, minmax(322px, 1fr)); gap: 18px; }
.af-conn-card {
  border-radius: 20px;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(217,182,115,0.05), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012));
  transition: transform 0.3s var(--af-lift), border-color 0.3s var(--af-lift), box-shadow 0.3s var(--af-lift), background 0.3s var(--af-lift);
}
.af-conn-card:hover {
  transform: translateY(-4px);
  border-color: var(--af-gold-line);
  box-shadow: 0 26px 54px -26px rgba(0,0,0,0.8);
}
.af-conn-head { padding: 22px 22px 16px; gap: 14px; }
.af-logo { width: 52px; height: 52px; border-radius: 15px; background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.025)); }
.af-logo svg { width: 25px; height: 25px; }
.af-conn-name { font-size: 16px; font-weight: 640; letter-spacing: -0.01em; }
.af-conn-cat { margin-top: 3px; font-size: 11px; letter-spacing: 0.02em; }
.af-status { padding: 6px 12px; font-size: 11px; }
.af-conn-facts { padding: 6px 22px 10px; gap: 11px; }
.af-fact { grid-template-columns: 96px minmax(0, 1fr); }
.af-fact-k { font-size: 10px; }
.af-fact-v { font-size: 13px; }
.af-conn-actions { padding: 15px 20px; gap: 8px; }
.af-conn-actions .af-btn-compact { padding: 7px 13px; }

/* Compact overview panels — roomier, aligned */
.af-overview-cols { gap: 18px; }
.af-panel { border-radius: 20px; min-height: 300px; }
.af-panel-head { padding: 18px 20px; }
.af-panel-title { font-size: 15px; }
.af-panel-body { padding: 12px 20px 18px; }
.af-panel .af-timeline { padding: 4px 0; }
.af-panel .af-tl-item { padding: 11px 2px; }

/* Section rhythm */
.af-tabpanel > .af-card { border-radius: 20px; }
.af-tabpanel > .af-card + .af-card { margin-top: 18px; }

/* ---- First-class drawer (workspace, not modal) ---- */
.af-drawer-overlay { background: rgba(3, 6, 10, 0.40); backdrop-filter: blur(3px); }
.af-drawer {
  width: min(600px, 96vw);
  background: linear-gradient(180deg, #0f141c, #0a0e14);
  border-left: 1px solid rgba(255,255,255,0.08);
  box-shadow: -44px 0 90px -44px rgba(0,0,0,0.9);
}
.af-drawer-head { padding: 26px 30px 20px; gap: 15px; }
.af-drawer-head .af-logo { width: 50px; height: 50px; border-radius: 15px; }
.af-drawer-title .af-conn-name { font-size: 18px; }
.af-drawer-close { width: 34px; height: 34px; border-radius: 10px; font-size: 18px; }
.af-drawer-tabs { padding: 14px 24px; gap: 5px; border-bottom-color: rgba(255,255,255,0.06); }
.af-drawer-tab { padding: 9px 15px; font-size: 13px; border-radius: 11px; }
.af-drawer-body { padding: 26px 30px 44px; }
.af-drawer-body .af-summary-grid { gap: 14px; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }
.af-drawer-body .af-tile { border-radius: 14px; padding: 15px 16px; background: rgba(255,255,255,0.03); }
.af-drawer-body .af-tile-value { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Drawer body sections give clear hierarchy */
.af-dsection { margin-bottom: 26px; }
.af-dsection:last-child { margin-bottom: 0; }
.af-dsection-title {
  margin-bottom: 13px; font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ds-text-muted, #7f8a99);
}
.af-drawer-body .af-drive-list { max-height: 52vh; }
.af-drawer-body .af-row-actions .af-btn { border-radius: 10px; }

@media (max-width: 900px) {
  .af-root { gap: 22px; padding: 24px 16px 44px; }
  .af-root .af-hero h2 { font-size: 25px; }
}

/* ============================================================
   Verification overlay (js/auth.js)
   Covers the entire startup sequence — session, device
   credential, initialization check — so the UI is never
   shown speculatively.
   ============================================================ */

.oneai-verifying-overlay {
  position: fixed;
  inset: 0;
  z-index: 10001;             /* above the recovery login overlay */
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(4, 8, 16, 0.96);
  backdrop-filter: blur(18px);
}

.oneai-verifying-overlay.oneai-verifying-visible { display: flex; }

.oneai-verifying-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 34px 40px;
  text-align: center;
}

.oneai-verifying-row {
  display: flex;
  align-items: center;
  gap: 11px;
}

.oneai-verifying-text {
  font-size: 14px;
  color: var(--ds-text-muted, #8b97a8);
}

.oneai-verifying-spinner {
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-top-color: var(--ds-accent, #7dd3a0);
  border-radius: 50%;
  animation: oneai-verify-spin 0.7s linear infinite;
}

@keyframes oneai-verify-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .oneai-verifying-spinner { animation-duration: 2.4s; }
}

/* Blur the app while identity is being established, exactly as for login. */
body.oneai-verifying .app-shell,
body.oneai-verifying .shell-composer {
  filter: blur(6px);
  pointer-events: none;
  user-select: none;
}

/* ============================================================
   Nova Guided Tour (js/novaPresentation.js)
   A side panel plus a highlight ring. The ring is drawn AROUND
   the target rather than restyling it, so the tour never leaves
   visual residue on the page it was explaining.
   ============================================================ */

.nova-tour-panel {
  position: fixed;
  top: 56px;
  right: 0;
  bottom: 0;
  width: min(420px, 94vw);
  z-index: 9500;
  display: none;
  flex-direction: column;
  border-left: 1px solid var(--ds-border, rgba(255, 255, 255, 0.09));
  background: rgba(10, 14, 19, 0.985);
  backdrop-filter: blur(24px);
  box-shadow: -28px 0 70px rgba(0, 0, 0, 0.45);
}

.nova-tour-panel.nova-tour-visible { display: flex; }

.nova-tour-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--ds-border, rgba(255, 255, 255, 0.07));
}

.nova-tour-badge {
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(125, 211, 160, 0.16);
  color: var(--ds-accent, #7dd3a0);
  font-size: 11px;
  font-weight: 600;
}

.nova-tour-head-title {
  flex: 1;
  font-size: 13px;
  color: var(--ds-text-muted, #8b97a8);
}

/* Autonomous playback status.
   Hidden entirely when empty rather than rendered as a blank pill, so the
   header does not reserve space for a state that may never appear (the tour
   can also be driven manually with playback off). */
.nova-tour-status {
  display: none;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(125, 211, 160, 0.12);
  color: var(--ds-accent, #7dd3a0);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.nova-tour-status.is-visible { display: inline-block; }

/* A live dot marks narration in progress. It is decorative only — the status
   text already carries the meaning for screen readers via role="status". */
.nova-tour-status.is-visible::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
  animation: nova-tour-pulse-dot 1.6s ease-in-out infinite;
}

@keyframes nova-tour-pulse-dot {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}

@media (prefers-reduced-motion: reduce) {
  .nova-tour-status.is-visible::before { animation: none; }
}

.nova-tour-btn.nova-tour-stop {
  color: var(--ds-danger, #e5807f);
  border-color: rgba(229, 128, 127, 0.35);
}

.nova-tour-close {
  border: none;
  background: transparent;
  color: var(--ds-text-muted, #8b97a8);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.nova-tour-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 18px 8px;
}

.nova-tour-progress {
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  margin-bottom: 12px;
}

.nova-tour-progress-bar {
  height: 100%;
  background: var(--ds-accent, #7dd3a0);
  transition: width 0.3s ease;
}

.nova-tour-meta {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ds-text-muted, #6b7688);
}

.nova-tour-title {
  margin: 6px 0 8px;
  font-size: 20px;
  font-weight: 600;
  color: var(--ds-text, #e8edf5);
}

.nova-tour-purpose {
  margin: 0 0 14px;
  font-size: 13px;
  font-style: italic;
  color: var(--ds-accent, #7dd3a0);
}

.nova-tour-script p {
  margin: 0 0 11px;
  font-size: 14px;
  line-height: 1.62;
  color: var(--ds-text, #e8edf5);
}

.nova-tour-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 16px 0;
  padding: 14px;
  border: 1px solid var(--ds-border, rgba(255, 255, 255, 0.09));
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}

.nova-tour-split h3,
.nova-tour-kpis h3,
.nova-tour-knowledge h3,
.nova-tour-answer h4 {
  margin: 0 0 7px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ds-text-muted, #8b97a8);
}

.nova-tour-list {
  margin: 0;
  padding-left: 16px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ds-text, #e8edf5);
}

.nova-tour-list li { margin-bottom: 4px; }

.nova-tour-kpis { margin: 14px 0; }

.nova-tour-kpi {
  display: inline-block;
  margin: 0 6px 6px 0;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 12px;
  color: var(--ds-text, #e8edf5);
}

.nova-tour-answer {
  margin: 14px 0;
  padding: 12px 14px;
  border-left: 3px solid var(--ds-accent, #7dd3a0);
  border-radius: 0 8px 8px 0;
  background: rgba(125, 211, 160, 0.06);
  font-size: 13px;
  color: var(--ds-text, #e8edf5);
}

.nova-tour-answer p { margin: 0 0 8px; }

.nova-tour-knowledge { margin: 16px 0; }

.nova-tour-example {
  margin-bottom: 9px;
  padding: 10px 12px;
  border: 1px solid var(--ds-border, rgba(255, 255, 255, 0.09));
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.02);
}

.nova-tour-example-text {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ds-text, #e8edf5);
}

.nova-tour-citation {
  display: block;
  margin-top: 7px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--ds-text-muted, #8b97a8);
  white-space: pre-line;
}

.nova-tour-note {
  font-size: 12.5px;
  color: var(--ds-text-muted, #8b97a8);
}

/* --- Summary --- */
.nova-tour-summary-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 14px 0 18px;
}

.nova-tour-stat {
  padding: 12px;
  border: 1px solid var(--ds-border, rgba(255, 255, 255, 0.09));
  border-radius: 10px;
  text-align: center;
}

.nova-tour-stat strong {
  display: block;
  font-size: 20px;
  color: var(--ds-text, #e8edf5);
}

.nova-tour-stat span {
  font-size: 11px;
  color: var(--ds-text-muted, #8b97a8);
}

.nova-tour-reco {
  margin-bottom: 9px;
  padding: 11px 13px;
  border: 1px solid var(--ds-border, rgba(255, 255, 255, 0.09));
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
}

.nova-tour-reco:hover { background: rgba(255, 255, 255, 0.05); }

.nova-tour-reco-action {
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-text, #e8edf5);
}

.nova-tour-reco-why {
  margin-top: 3px;
  font-size: 12px;
  color: var(--ds-text-muted, #8b97a8);
}

.nova-tour-subtitle {
  font-size: 13px;
  color: var(--ds-text-muted, #8b97a8);
  margin-top: -8px;
  margin-bottom: 12px;
}

.nova-tour-summary-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

/* --- Ask + controls --- */
.nova-tour-ask-row { padding: 0 16px 10px; }

.nova-tour-ask {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--ds-border, rgba(255, 255, 255, 0.12));
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--ds-text, #e8edf5);
  font-size: 13px;
  font-family: inherit;
}

.nova-tour-controls {
  display: flex;
  gap: 8px;
  padding: 12px 16px 16px;
  border-top: 1px solid var(--ds-border, rgba(255, 255, 255, 0.07));
}

.nova-tour-btn {
  flex: 1;
  padding: 9px 12px;
  border: 1px solid var(--ds-border, rgba(255, 255, 255, 0.12));
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--ds-text, #e8edf5);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}

.nova-tour-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); }
.nova-tour-btn:disabled { opacity: 0.4; cursor: default; }

.nova-tour-primary {
  background: var(--ds-accent, #7dd3a0);
  border-color: var(--ds-accent, #7dd3a0);
  color: #06210f;
  font-weight: 600;
}

.nova-tour-btn:focus-visible,
.nova-tour-ask:focus-visible,
.nova-tour-close:focus-visible {
  outline: 2px solid var(--ds-accent, #7dd3a0);
  outline-offset: 2px;
}

.nova-tour-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Highlight ring --- */
.nova-tour-highlight {
  position: absolute;
  z-index: 9400;
  border: 2px solid var(--ds-accent, #7dd3a0);
  border-radius: 12px;
  box-shadow: 0 0 0 4px rgba(125, 211, 160, 0.16), 0 0 26px rgba(125, 211, 160, 0.28);
  pointer-events: none;
  animation: nova-tour-pulse 1.7s ease-in-out infinite;
}

@keyframes nova-tour-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
  .nova-tour-highlight { animation: none; }
  .nova-tour-progress-bar { transition: none; }
}

/* Keep the tour clear of the Nova drawer when both are open. */
body.nova-tour-active .shell-assistant.context-panel { right: min(420px, 94vw); }

@media (max-width: 768px) {
  .nova-tour-panel { top: auto; bottom: 0; width: 100%; height: 72vh; border-left: none; border-top: 1px solid var(--ds-border, rgba(255, 255, 255, 0.09)); }
  .nova-tour-split { grid-template-columns: 1fr; }
  body.nova-tour-active .shell-assistant.context-panel { right: 0; }
}

/* =========================================================================
   Nova Voice Experience
   ========================================================================= */

.nova-voice-mic {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9000;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--ds-surface, #1a1a2e);
  border: 2px solid var(--ds-border, rgba(255, 255, 255, 0.12));
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
  user-select: none;
  outline: none;
}

.nova-voice-mic:hover {
  background: var(--ds-surface-hover, #25254a);
  border-color: var(--ds-accent, #6c63ff);
}

.nova-voice-mic:focus-visible {
  box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.4);
}

.nova-voice-mic-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid transparent;
  transition: border-color 0.2s;
  pointer-events: none;
}

.nova-voice-mic-icon {
  width: 24px;
  height: 24px;
  color: var(--ds-text-secondary, rgba(255, 255, 255, 0.6));
  transition: color 0.2s;
}

.nova-voice-mic-tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  background: var(--ds-surface, #1a1a2e);
  border: 1px solid var(--ds-border, rgba(255, 255, 255, 0.12));
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--ds-text-secondary, rgba(255, 255, 255, 0.6));
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}

.nova-voice-mic:hover .nova-voice-mic-tooltip {
  opacity: 1;
}

/* States */

.nova-voice-mic.nova-voice-listening {
  background: #1e3a5f;
  border-color: #4fc3f7;
  box-shadow: 0 0 20px rgba(79, 195, 247, 0.3);
}

.nova-voice-mic.nova-voice-listening .nova-voice-mic-icon {
  color: #4fc3f7;
}

.nova-voice-mic.nova-voice-listening .nova-voice-mic-ring {
  border-color: #4fc3f7;
  animation: nova-voice-ring-pulse 1.5s ease-in-out infinite;
}

.nova-voice-mic.nova-voice-thinking {
  background: #2d2d5e;
  border-color: #b388ff;
  box-shadow: 0 0 20px rgba(179, 136, 255, 0.3);
}

.nova-voice-mic.nova-voice-thinking .nova-voice-mic-icon {
  color: #b388ff;
}

.nova-voice-mic.nova-voice-thinking .nova-voice-mic-ring {
  border-color: #b388ff;
  animation: nova-voice-ring-pulse 0.8s ease-in-out infinite;
}

.nova-voice-mic.nova-voice-speaking {
  background: #1b3a2a;
  border-color: #69f0ae;
  box-shadow: 0 0 20px rgba(105, 240, 174, 0.3);
}

.nova-voice-mic.nova-voice-speaking .nova-voice-mic-icon {
  color: #69f0ae;
}

.nova-voice-mic.nova-voice-speaking .nova-voice-mic-ring {
  border-color: #69f0ae;
  animation: nova-voice-ring-pulse 1.2s ease-in-out infinite;
}

.nova-voice-mic.nova-voice-paused {
  background: #3d3214;
  border-color: #ffd54f;
  box-shadow: 0 0 20px rgba(255, 213, 79, 0.3);
}

.nova-voice-mic.nova-voice-paused .nova-voice-mic-icon {
  color: #ffd54f;
}

.nova-voice-mic.nova-voice-offline {
  background: #2d1a1a;
  border-color: #ef5350;
  box-shadow: 0 0 10px rgba(239, 83, 80, 0.2);
  opacity: 0.6;
}

.nova-voice-mic.nova-voice-offline .nova-voice-mic-icon {
  color: #ef5350;
}

@keyframes nova-voice-ring-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.5; }
}

/* Voice settings panel */

.nova-voice-settings {
  position: fixed;
  bottom: 96px;
  right: 28px;
  z-index: 9001;
  width: 280px;
  background: var(--ds-surface, #1a1a2e);
  border: 1px solid var(--ds-border, rgba(255, 255, 255, 0.12));
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  display: none;
  flex-direction: column;
  overflow: hidden;
}

.nova-voice-settings.nova-voice-settings-visible {
  display: flex;
}

.nova-voice-settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ds-text-primary, #fff);
  border-bottom: 1px solid var(--ds-border, rgba(255, 255, 255, 0.08));
}

.nova-voice-settings-close {
  background: none;
  border: none;
  color: var(--ds-text-secondary, rgba(255, 255, 255, 0.6));
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  padding: 2px 6px;
}

.nova-voice-settings-close:hover { color: var(--ds-text-primary, #fff); }

.nova-voice-settings-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.nova-voice-setting-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ds-text-secondary, rgba(255, 255, 255, 0.7));
}

.nova-voice-setting-row span:first-child {
  min-width: 50px;
}

.nova-voice-setting-row select,
.nova-voice-setting-row input[type="range"] {
  flex: 1;
  background: var(--ds-surface-hover, #25254a);
  border: 1px solid var(--ds-border, rgba(255, 255, 255, 0.12));
  border-radius: 4px;
  color: var(--ds-text-primary, #fff);
  font-size: 12px;
  padding: 4px;
}

.nova-voice-setting-value {
  min-width: 30px;
  text-align: right;
  font-size: 12px;
  color: var(--ds-text-secondary, rgba(255, 255, 255, 0.5));
}

.nova-voice-settings-test {
  margin-top: 4px;
  padding: 8px;
  background: var(--ds-accent, #6c63ff);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
}

.nova-voice-settings-test:hover {
  background: var(--ds-accent-hover, #5a52e0);
}

@media (max-width: 768px) {
  .nova-voice-mic { bottom: 16px; right: 16px; width: 48px; height: 48px; }
  .nova-voice-mic-icon { width: 20px; height: 20px; }
  .nova-voice-settings { right: 16px; bottom: 76px; width: 260px; }
}

/* =========================================================================
   UI/UX Shell Cleanup — Phase 1
   Additive only. Reuses existing design tokens (--bg-card, --border-glass,
   --text-*, --success/--warning/--danger, --primary). Rollback = delete this
   block and restore the pre-cleanup index.html / appShell.js from backup.
   ========================================================================= */

/* ---- A. Top bar: three tidy interaction groups -------------------------- */
.top-header .tb-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 44px;
}
.tb-actions .tb-legacy-hidden { display: none !important; }

/* Group 1 — compact status chip (no oversized pill) */
.tb-actions .backend-status-badge.tb-status,
.tb-actions .backend-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 10px;
  border-radius: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  box-shadow: none;
}
.tb-actions .backend-status-badge .backend-status-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.14);
}
.tb-actions .backend-status-badge.status-offline .backend-status-dot { background: var(--danger); box-shadow: 0 0 0 3px rgba(248,113,113,0.14); }
.tb-actions .backend-status-badge.status-degraded .backend-status-dot { background: var(--warning); box-shadow: 0 0 0 3px rgba(251,191,36,0.14); }
.tb-actions .backend-status-badge .backend-status-text { color: var(--text-main); }

/* Group 2 — icon buttons (notifications + single assistant icon) */
.tb-actions .tb-icons { display: inline-flex; align-items: center; gap: 6px; }
.tb-iconbtn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: 9px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition);
}
.tb-iconbtn:hover {
  background: var(--bg-card);
  border-color: var(--border-glass);
  color: var(--text-main);
  transform: translateY(-1px);
}
.tb-iconbtn .tb-badge {
  position: absolute; top: -3px; right: -3px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff; font-size: 10px; font-weight: 700; line-height: 16px;
  text-align: center;
  border: 2px solid var(--bg-main);
}

/* Group 3 — user menu dropdown (native <details>) */
.tb-user { position: relative; }
.tb-user > summary { list-style: none; cursor: pointer; }
.tb-user > summary::-webkit-details-marker { display: none; }
.tb-user-summary {
  display: inline-flex; align-items: center; gap: 9px;
  height: 38px; padding: 0 8px 0 6px;
  border-radius: 10px;
  border: 1px solid var(--border-glass);
  background: var(--bg-card);
  transition: var(--transition);
}
.tb-user[open] .tb-user-summary,
.tb-user-summary:hover { border-color: var(--border-glass-active); background: var(--bg-card-hover); }
.tb-user-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--text-dark);
  background: linear-gradient(135deg, var(--primary), #9fe3b0);
}
.tb-user-meta { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.tb-user-name { font-size: 12.5px; font-weight: 600; color: var(--text-main); }
.tb-user-role { font-size: 10.5px; color: var(--text-muted); }
.tb-user-caret { color: var(--text-muted); }

.tb-user-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 232px;
  padding: 7px;
  border-radius: 12px;
  background: var(--bg-main);
  border: 1px solid var(--border-glass-active);
  box-shadow: 0 18px 40px rgba(0,0,0,0.45);
  z-index: 120;
  display: flex; flex-direction: column; gap: 2px;
}
.tb-menu-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 9px 10px;
  border: none; background: transparent; border-radius: 8px;
  color: var(--text-main); font-size: 13px; text-align: left; cursor: pointer;
  transition: background 0.15s var(--ease-rise);
}
.tb-menu-item svg { color: var(--text-muted); flex: 0 0 auto; }
.tb-menu-item:hover { background: var(--bg-card-hover); }
.tb-menu-item.tb-menu-danger { color: var(--danger); }
.tb-menu-item.tb-menu-danger svg { color: var(--danger); }
.tb-menu-sep { height: 1px; background: var(--border-glass); margin: 5px 2px; }
.tb-menu-profile { padding: 8px 10px 6px; }
.tb-menu-profile-label { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-bottom: 5px; }
.tb-menu-profile .header-template-select {
  width: 100%; background: var(--bg-card); color: var(--text-main);
  border: 1px solid var(--border-glass); border-radius: 8px; padding: 6px 8px; font-size: 12.5px;
}

/* ---- B. Global Ask Nova composer hidden on ordinary pages ---------------- */
.shell-composer.shell-composer-hidden,
.shell-composer[hidden] { display: none !important; }

/* ---- C. Settings submenu: icons + restrained colour semantics ------------ */
.settings-sub > button { display: flex; align-items: center; gap: 9px; }
.settings-sub .settings-sub-icon { flex: 0 0 auto; opacity: 0.9; }
.settings-sub-access .settings-sub-icon { color: #a78bfa; }   /* Account & Access — violet */
.settings-sub-services .settings-sub-icon { color: #5aa9ff; } /* Connected Services — blue */
.settings-sub-ai .settings-sub-icon { color: var(--warning); } /* AI Configuration — amber */
.settings-sub-data .settings-sub-icon { color: var(--success); } /* Data & Recovery — green */
.settings-sub.active .settings-sub-icon,
.settings-sub > button:hover .settings-sub-icon { opacity: 1; }

/* ---- D/E. Settings Overview cards (Workspace-Connectors visual language) -- */
.settings-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.so-card {
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px;
  border-radius: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  cursor: pointer;
  transition: var(--transition);
}
.so-card:hover { border-color: var(--border-glass-active); background: var(--bg-card-hover); transform: translateY(-2px); }
.so-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.so-card-head { display: flex; align-items: center; gap: 12px; }
.so-card-icon {
  width: 38px; height: 38px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-glass);
}
.so-icon-access { color: #a78bfa; background: rgba(167,139,250,0.10); }
.so-icon-services { color: #5aa9ff; background: rgba(90,169,255,0.10); }
.so-icon-ai { color: var(--warning); background: rgba(251,191,36,0.10); }
.so-icon-data { color: var(--success); background: rgba(52,211,153,0.10); }
.so-card-title { margin: 0; font-size: 14px; font-weight: 700; color: var(--text-main); font-family: var(--font-display); }
.so-card-sub { margin: 2px 0 0; font-size: 11.5px; color: var(--text-muted); }
.so-card-metrics { display: flex; gap: 18px; margin: 0; }
.so-card-metrics div { display: flex; flex-direction: column; gap: 2px; }
.so-card-metrics dt { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.so-card-metrics dd { margin: 0; font-size: 13px; font-weight: 600; color: var(--text-main); }
.so-card-btn {
  align-self: flex-start;
  margin-top: 2px; padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-glass-active);
  background: transparent; color: var(--text-main);
  font-size: 12px; font-weight: 600; cursor: pointer;
  transition: var(--transition);
}
.so-card-btn:hover { background: var(--primary); color: var(--text-dark); border-color: var(--primary); }

/* ---- F. Sidebar submenu spacing polish (non-destructive) ---------------- */
.nav-group-children .settings-sub > button { padding-top: 7px; padding-bottom: 7px; }

/* Responsive: keep the top bar tidy on narrower desktop widths. */
@media (max-width: 1100px) {
  .tb-user-meta { display: none; }
  .top-header .tb-actions { gap: 10px; }
}

/* UI/UX V2 — layout tokens referenced by the Pattern Library (Section 3/5/8)
   that were not yet defined. Additive; existing components are unaffected. */
:root {
  --ds-topbar-h: 56px;
  --ds-content-max: 1200px;
  --ds-drawer-w: 480px;
}

/* =========================================================================
   Mission Control V2 — AI Operations System grid (Pattern Library §7, §20)
   ========================================================================= */
.mc-ops { max-width: var(--ds-content-max, 1200px); margin: 0 auto; padding: 4px 0 20px; }
.mc-ops-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 20px;
}
.mc-ops-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 10px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ds-purple-light, #a78bfa);
}
.mc-ops-live {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ds-purple, #7c3aed);
  box-shadow: 0 0 0 3px rgba(124,58,237,0.18);
}
.mc-ops-head h1 { margin: 8px 0 4px; font-size: 22px; font-weight: 700; color: var(--ds-text); font-family: var(--ds-font-display); }
.mc-ops-head p { margin: 0; font-size: 13px; color: var(--ds-muted); max-width: 620px; }
.mc-ops-head-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.mc-ops-sync { font-size: 11px; color: var(--ds-muted); }

.mc-ops-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  align-items: start;
}
@media (max-width: 960px) { .mc-ops-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .mc-ops-grid { grid-template-columns: 1fr; gap: 10px; } }

.mc-ops-hero {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
  align-items: start;
}
@media (max-width: 760px) { .mc-ops-hero { grid-template-columns: 1fr; } }

.mc-col-left, .mc-col-center, .mc-col-right {
  display: flex; flex-direction: column; gap: 12px;
}
@media (max-width: 640px) { .mc-col-left, .mc-col-center, .mc-col-right { gap: 10px; } }

.mc-ops-footer {
  display: flex; flex-direction: column; gap: 12px;
  margin-top: 12px;
}

.mc-card-hero { min-height: 180px; }
.mc-card-large { min-height: 180px; }

.mc-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px;
  border: 1px solid var(--ds-border, rgba(255,255,255,0.075));
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255,255,255,0.030), rgba(255,255,255,0.014));
  box-shadow: 0 14px 34px rgba(0,0,0,0.18);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
  min-height: 150px;
}
.mc-card[role="button"] { cursor: pointer; }
.mc-card[role="button"]:hover {
  border-color: rgba(124,58,237,0.28);
  box-shadow: 0 18px 42px rgba(0,0,0,0.24);
  transform: translateY(-1px);
}
.mc-card[role="button"]:focus-visible { outline: 2px solid var(--ds-primary); outline-offset: 2px; }
.mc-card-wide { width: 100%; }

.mc-card-head { display: flex; align-items: center; gap: 8px; min-height: 18px; }
.mc-card-kicker {
  font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ds-muted);
}
.mc-card-badge {
  margin-left: auto;
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 700;
  background: rgba(255,255,255,0.06); color: #c6d0db;
  border: 1px solid rgba(255,255,255,0.08);
}
.mc-card-badge.is-active { background: rgba(124,58,237,0.15); color: #c4b5fd; border-color: rgba(124,58,237,0.30); }
.mc-card-badge.is-warning { background: rgba(234,179,8,0.14); color: #fde68a; border-color: rgba(234,179,8,0.30); }
.mc-card-badge.is-healthy { background: rgba(34,197,94,0.15); color: #86efac; border-color: rgba(34,197,94,0.30); }
.mc-card-view {
  margin-left: auto;
  background: transparent; border: none; cursor: pointer;
  color: var(--ds-primary); font-size: 11px; font-weight: 600; padding: 2px 4px;
}
.mc-card-view:hover { text-decoration: underline; }
.mc-card-title { margin: 0; font-size: 14px; font-weight: 600; color: var(--ds-text); }
.mc-card-body { margin-top: 2px; }

/* Metric tiles used by Working Now / Signal Monitoring */
.mc-metric-tiles { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.mc-metric-tile {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px; border-radius: 10px;
  background: rgba(255,255,255,0.03); border: 1px solid var(--ds-border);
}
.mc-metric-value { font-size: 18px; font-weight: 700; color: var(--ds-text); font-family: var(--ds-font-display); }
.mc-metric-label { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--ds-muted); }
.mc-metric-tile.is-active .mc-metric-value { color: var(--ds-purple-light, #a78bfa); }
.mc-metric-tile.is-warning .mc-metric-value { color: #fde68a; }
.mc-metric-tile.is-healthy .mc-metric-value { color: #86efac; }
.mc-metric-tile.is-offline .mc-metric-value { color: var(--ds-danger); }
.mc-signal-card { display: flex; flex-direction: column; gap: 10px; }

/* Keep every card body compact and internally scrollable so the grid stays
   even — no card can push its row tall and leave gaps beside it. */
.mc-card .mc-card-body { max-height: 300px; overflow-y: auto; }
.mc-card-wide .mc-card-body { max-height: 340px; }
.mc-card .mc-card-body::-webkit-scrollbar { width: 6px; }
.mc-card .mc-card-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 999px; }

/* Cleanup: Voice mic is Nova-only (Pattern Library §17). Hidden globally;
   shown only when the Nova workspace tab is active (body.nova-context set by
   appShell). Rollback: remove these two rules. */
#nova-voice-mic { display: none !important; }
body.nova-context #nova-voice-mic { display: flex !important; }

/* Cleanup: top status is a dot-only indicator (Pattern Library §5 — no label). */
.tb-actions .backend-status-badge .backend-status-text { display: none; }
.tb-actions .backend-status-badge {
  width: 32px; min-width: 32px; max-width: 32px;
  padding: 0; gap: 0; justify-content: center;
}

/* Mission Control — AI Working Now observability panel */
.mc-obs-status {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 600; color: var(--ds-text);
  padding: 6px 10px; border-radius: 8px; margin-bottom: 4px;
  background: rgba(255,255,255,0.03); border: 1px solid var(--ds-border);
}
.mc-obs-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ds-muted); }
.mc-obs-status.is-healthy .mc-obs-dot { background: var(--ds-success, #22c55e); box-shadow: 0 0 0 3px rgba(34,197,94,0.15); }
.mc-obs-status.is-active .mc-obs-dot { background: var(--ds-purple, #7c3aed); box-shadow: 0 0 0 3px rgba(124,58,237,0.18); }
.mc-obs-status.is-warning .mc-obs-dot { background: var(--ds-warning, #eab308); box-shadow: 0 0 0 3px rgba(234,179,8,0.15); }
.mc-obs-status.is-offline .mc-obs-dot { background: var(--ds-danger, #ef4444); box-shadow: 0 0 0 3px rgba(239,68,68,0.15); }
.mc-obs-meta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; font-size: 11px; color: var(--ds-muted); }
.mc-obs-note { margin-top: 8px; font-size: 11px; color: var(--ds-muted); opacity: .85; line-height: 1.5; }

/* Publish workspace */
.pub-job-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: 12px; }
.pub-job-detail dt { color: #77839a; font-weight: 500; }
.pub-job-detail dd { color: #d1d5de; margin: 0; font-weight: 600; }
.pub-job-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.pub-history-item { padding: 12px 14px; border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; background: rgba(255,255,255,0.025); }
.pub-history-item + .pub-history-item { margin-top: 8px; }
.pub-history-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.pub-history-title { font-size: 13px; font-weight: 600; color: #e2e6ed; }
.pub-history-meta { font-size: 11px; color: #6b7689; display: flex; gap: 12px; flex-wrap: wrap; }
.pub-history-url { font-size: 11px; color: #8b93a3; word-break: break-all; }
.pub-history-url a { color: #a7c4ff; text-decoration: none; }
.pub-history-url a:hover { text-decoration: underline; }
.pub-history-error { font-size: 11px; color: #ff9c9c; margin-top: 4px; }
.pub-approve-section { padding: 14px; border: 1px dashed rgba(216,255,114,0.2); border-radius: 10px; background: rgba(216,255,114,0.03); margin-bottom: 12px; }
.pub-approve-section h4 { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: #d8ff72; }
.pub-approve-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.pub-approve-item:last-child { border-bottom: none; }
@media (max-width: 900px) { .pub-job-detail { grid-template-columns: 1fr; } }