/* ═══════════════════════════════════════════════════════════
   SARATHI OS — Light Theme Override
   Applies dashboard visual language to all OS modules.
   Loaded after styles.css — uses cascade + specificity.
═══════════════════════════════════════════════════════════ */

/* ── CSS VARIABLES ──────────────────────────────────────── */
:root {
  --signal-strip-h: 34px;
  --bg-base: #F0F2F7;
  --bg-surface: #FFFFFF;
  --bg-elevated: #FFFFFF;
  --bg-card: #FFFFFF;
  --bg-input: #F8FAFC;

  --border: #E8ECF2;
  --border-active: rgba(99, 102, 241, 0.35);

  --accent: #6366F1;
  --accent-light: #818CF8;
  --accent-glow: rgba(99, 102, 241, 0.1);

  --red: #EF4444;
  --red-glow: rgba(239, 68, 68, 0.1);
  --green: #10B981;
  --green-glow: rgba(16, 185, 129, 0.1);
  --yellow: #F59E0B;
  --yellow-glow: rgba(245, 158, 11, 0.1);

  --text-primary: #1E293B;
  --text-secondary: #64748B;
  --text-muted: #94A3B8;

  --shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.06);

  --sidebar-w: 256px;
  --topbar-h: 56px;
}

/* ── BODY / SHELL ───────────────────────────────────────── */
body {
  background: var(--bg-base);
  color: var(--text-primary);
}

.os-shell {
  background: var(--bg-base);
}

/* ── BOOT SCREEN — keep dark (branded) ─────────────────── */
.boot-screen {
  background: #080B14;
}

/* ── LOGIN OVERLAY — keep dark (branded) ───────────────── */
.login-overlay {
  background: #080B14;
}

/* ── SIDEBAR ────────────────────────────────────────────── */
.sidebar {
  background: #FFFFFF;
  border-right: 1px solid var(--border);
  width: var(--sidebar-w);
  /* Defensive — sidebar is position:fixed today, so flex-shrink doesn't
     apply, but if it ever gets switched into the .os-shell flex flow this
     keeps it from collapsing on narrow viewports. */
  flex-shrink: 0;
  box-shadow: none;
}

/* Dashboard-style logo */
.sidebar-logo {
  padding: 18px 16px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.logo-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  object-fit: contain;
}

.logo-name {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  display: block;
}

.logo-tagline {
  font-size: 0.62rem;
  color: var(--text-muted);
  display: block;
}

/* Search box */
.sidebar-search {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.search-box {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 10px;
  cursor: pointer;
  transition: border-color 0.15s;
}

.search-box:hover {
  border-color: #C7D0DF;
}

.search-icon {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.search-placeholder {
  font-size: 0.73rem;
  color: var(--text-muted);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kbd {
  font-size: 0.58rem;
  color: var(--text-muted);
  background: #E2E8F0;
  padding: 1px 5px;
  border-radius: 4px;
  font-weight: 500;
}

/* Nav */
.sidebar-nav {
  padding: 8px 10px;
}

.nav-section-label {
  font-size: 0.62rem !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase;
  padding: 12px 8px 5px !important;
}

.nav-item {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 7px 10px !important;
  border-radius: 8px !important;
  color: var(--text-secondary) !important;
  font-size: 0.81rem !important;
  font-weight: 500 !important;
  margin-bottom: 1px !important;
  transition: all 0.13s !important;
  text-decoration: none !important;
}

.nav-item:hover {
  background: var(--bg-base) !important;
  color: var(--text-primary) !important;
  transform: none !important;
}

.nav-item.active {
  background: #EEF2FF !important;
  color: var(--accent) !important;
  font-weight: 600 !important;
}

.nav-icon {
  font-size: 0.9rem;
  width: 17px;
  text-align: center;
  flex-shrink: 0;
}

.nav-badge {
  margin-left: auto !important;
  background: var(--accent) !important;
  color: #fff !important;
  font-size: 0.58rem !important;
  font-weight: 700 !important;
  padding: 2px 6px !important;
  border-radius: 10px !important;
  min-width: 18px;
  text-align: center;
  flex-shrink: 0;
}

.nav-badge.new {
  background: var(--accent) !important;
}

.nav-badge.ai-status-badge {
  background: #F1F5F9 !important;
  color: var(--text-muted) !important;
}

.nav-badge.ai-status-badge.on {
  background: rgba(16, 185, 129, 0.12) !important;
  color: var(--green) !important;
}

/* Promo card */
.sidebar-promo {
  margin: 10px 12px 10px;
  background: linear-gradient(140deg, #4F46E5 0%, #7C3AED 100%);
  border-radius: 12px;
  padding: 14px 14px 12px;
  color: white;
  cursor: pointer;
  flex-shrink: 0;
}

.promo-text {
  font-size: 0.77rem;
  font-weight: 500;
  line-height: 1.55;
  margin-bottom: 10px;
}

.promo-link {
  font-size: 0.69rem;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.22);
  padding: 5px 10px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
  transition: background 0.15s;
  cursor: pointer;
  color: white;
}

.promo-link:hover {
  background: rgba(255, 255, 255, 0.24);
}

/* User section */
.sidebar-user {
  padding: 11px 14px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.13s;
}

.sidebar-user:hover {
  background: var(--bg-base);
}

.user-avatar {
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366F1, #8B5CF6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.77rem;
  font-weight: 700;
  flex-shrink: 0;
}

.user-info {
  flex: 1;
  line-height: 1.35;
  min-width: 0;
}

.user-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-role {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Legacy sidebar elements — hide cleanly */
.sidebar-brand {
  display: none !important;
}

.sidebar-footer {
  display: none !important;
}

.calibration-badge-legacy {
  display: none !important;
}

/* ── GLOBAL SIGNAL STRIP ────────────────────────────────── */
#global-signal-strip {
  background: #FFFFFF !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
  font-family: var(--font) !important;
  font-size: 0.73rem !important;
  padding: 0.45rem 1.5rem !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 61 !important;
  height: var(--signal-strip-h);
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
}

/* ── TOP BAR ────────────────────────────────────────────── */
.top-bar {
  background: #FFFFFF !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  top: var(--signal-strip-h) !important;
}

.breadcrumb {
  color: var(--text-secondary) !important;
  font-weight: 600 !important;
}

.system-clock {
  color: var(--text-muted) !important;
  font-family: var(--font) !important;
}

.menu-toggle {
  color: var(--text-secondary) !important;
  background: transparent !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
}

.menu-toggle:hover {
  background: var(--bg-base) !important;
}

/* Top-bar right side */
.top-bar-right {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

/* Nudge bell wrapper */
.nudge-bell-wrap {
  position: relative;
}

#nudge-bell-btn {
  background: var(--bg-base) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-secondary) !important;
  border-radius: 8px !important;
  font-size: 1rem !important;
  padding: 0.3rem 0.5rem !important;
  cursor: pointer !important;
  position: relative !important;
}

#nudge-bell-btn:hover {
  background: #EEF2FF !important;
  color: var(--accent) !important;
}

#nudge-count {
  background: var(--red) !important;
  display: none;
  position: absolute;
  top: -2px;
  right: -4px;
  font-size: 0.55rem;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
}

/* Nudge dropdown */
.nudge-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 380px;
  max-height: 500px;
  overflow-y: auto;
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12) !important;
  z-index: 9999;
  padding: 0.75rem;
}

.nudge-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.25rem 0.75rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.75rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
}

.nudge-dropdown-header span {
  font-size: 0.6rem;
  font-family: var(--mono);
  color: var(--text-muted);
}

#configure-context-btn {
  color: var(--accent) !important;
  font-size: 0.75rem !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 5px 12px !important;
  background: var(--bg-base) !important;
  white-space: nowrap !important;
}

#configure-context-btn:hover {
  background: #EEF2FF !important;
}

/* ── MODULE PANEL AREA ──────────────────────────────────── */
.main-content {
  background: var(--bg-base) !important;
  height: 100vh !important;
  overflow-y: auto !important;
}

.module-panel {
  background: var(--bg-base) !important;
}

.module-header {
  border-bottom: none !important;
}

.module-title {
  color: var(--text-primary) !important;
}

.module-subtitle {
  color: var(--text-muted) !important;
}

/* ── CARDS / PANELS ─────────────────────────────────────── */
.panel {
  background: #FFFFFF !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
  border-radius: var(--radius) !important;
}

.panel-header h3,
.panel-header h4 {
  color: var(--text-primary) !important;
}

.panel-header {
  border-bottom: 1px solid var(--border) !important;
  padding-bottom: 0.75rem !important;
  margin-bottom: 1rem !important;
}

/* Remove the panel-header border for panels that have their own gradient/custom headers */
.dsp-hero-panel>.dsp-hero-header,
.dsp-intel-orb-section .panel-header {
  border-bottom: none !important;
}

/* ── FORMS & INPUTS ─────────────────────────────────────── */
.form-input,
.form-select,
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select {
  background: var(--bg-input) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
  border-radius: var(--radius-sm) !important;
}

.form-input:focus,
.form-select:focus,
textarea:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
select:focus {
  border-color: var(--accent) !important;
  background: #FFFFFF !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.08) !important;
  outline: none !important;
}

.form-label {
  color: var(--text-secondary) !important;
}

.form-hint {
  color: var(--text-muted) !important;
}

/* Form-group row separators — only in settings-style panels, not in dense input forms */
#module-context .form-group,
#module-ai .form-group,
#module-database .form-group {
  border-bottom: 1px solid var(--border) !important;
  padding-bottom: 1rem !important;
  margin-bottom: 1rem !important;
}

#module-context .form-group:last-child,
#module-ai .form-group:last-child,
#module-database .form-group:last-child {
  border-bottom: none !important;
}

/* Range sliders */
input[type="range"] {
  accent-color: var(--accent);
}

/* ── BUTTONS ────────────────────────────────────────────── */
.btn-primary {
  background: var(--accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
}

.btn-primary:hover {
  background: #4F46E5 !important;
}

.btn-secondary {
  background: #F1F5F9 !important;
  border: 1px solid var(--border) !important;
  color: var(--text-secondary) !important;
  border-radius: 8px !important;
}

.btn-secondary:hover {
  background: #E2E8F0 !important;
  color: var(--text-primary) !important;
}

.btn-ghost {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--text-secondary) !important;
  border-radius: 8px !important;
}

.btn-ghost:hover {
  background: var(--bg-base) !important;
  color: var(--text-primary) !important;
}

.btn-danger {
  background: rgba(239, 68, 68, 0.1) !important;
  border: 1px solid rgba(239, 68, 68, 0.2) !important;
  color: var(--red) !important;
}

.btn-danger:hover {
  background: rgba(239, 68, 68, 0.15) !important;
}

/* ── CONTEXT CARD (in sidebar — hidden, but keep DSP bars working) ── */
#context-display {
  display: none !important;
}

#calibration-badge {
  display: none !important;
}

/* Context mini strip shown in top bar area */
.ctx-badge {
  background: rgba(99, 102, 241, 0.08) !important;
  color: var(--accent) !important;
  border: 1px solid rgba(99, 102, 241, 0.15) !important;
}

/* ── DSP BARS ───────────────────────────────────────────── */
.dsp-track {
  background: var(--bg-base) !important;
  border-radius: 4px !important;
}

.dsp-fill.demand {
  background: var(--yellow) !important;
}

.dsp-fill.supply {
  background: var(--green) !important;
}

.dsp-fill.process {
  background: var(--accent) !important;
}

.dsp-label {
  color: var(--text-muted) !important;
}

.dsp-score {
  color: var(--text-secondary) !important;
}

/* Context Engine module's DSP section */
.context-dsp {
  gap: 8px !important;
}

.dsp-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}

.dsp-bar:last-child {
  border-bottom: none;
}

/* ── DECISION CARDS ─────────────────────────────────────── */
.decision-card,
.decision-row,
[class*="decision-item"] {
  background: #FFFFFF !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
}

.decision-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

/* ── ASSUMPTION CARDS ───────────────────────────────────── */
.assumption-card,
[class*="assump"] {
  background: #FFFFFF !important;
  border: 1px solid var(--border) !important;
}

/* ── TAGS / RISK BADGES ─────────────────────────────────── */
.risk-badge,
[class*="risk-"] {
  border-radius: 6px !important;
  font-weight: 600 !important;
}

.risk-badge.high,
[class*="risk-high"] {
  background: rgba(239, 68, 68, 0.08) !important;
  color: var(--red) !important;
  border: 1px solid rgba(239, 68, 68, 0.15) !important;
}

.risk-badge.medium,
[class*="risk-medium"] {
  background: rgba(245, 158, 11, 0.08) !important;
  color: var(--yellow) !important;
  border: 1px solid rgba(245, 158, 11, 0.15) !important;
}

.risk-badge.low,
[class*="risk-low"] {
  background: rgba(16, 185, 129, 0.08) !important;
  color: var(--green) !important;
  border: 1px solid rgba(16, 185, 129, 0.15) !important;
}

/* Horizon / domain tags */
[class*="horizon-"],
[class*="domain-"],
[class*="tag-"] {
  border-radius: 6px !important;
}

/* ── PRIORITY ENGINE CARDS ──────────────────────────────── */
.priority-card {
  background: #F8FAFC !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
}

.priority-card:hover {
  background: #F1F5F9 !important;
}

.priority-card.wait {
  background: rgba(16, 185, 129, 0.05) !important;
  border-color: rgba(16, 185, 129, 0.2) !important;
}

.priority-card.critical {
  background: rgba(239, 68, 68, 0.04) !important;
  border-color: rgba(239, 68, 68, 0.15) !important;
}

/* ── METABOLISM TIMELINE ────────────────────────────────── */
.metabolism-timeline {
  border-left-color: var(--border) !important;
}

.timeline-event {
  background: #FFFFFF !important;
  border: 1px solid var(--border) !important;
}

.timeline-event::before {
  background: var(--accent) !important;
}

.timeline-dot {
  background: var(--accent) !important;
  border: 2px solid #FFFFFF !important;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2) !important;
}

/* ── DSP RADAR ──────────────────────────────────────────── */
.dsp-radar-container {
  background: var(--bg-base) !important;
  border-radius: 12px !important;
}

#radar-svg polygon[fill*="rgba(99,102,241"] {
  fill: rgba(99, 102, 241, 0.12) !important;
}

/* ── EMPTY STATES ───────────────────────────────────────── */
.empty-mini,
.empty-state,
[class*="empty-"] {
  color: var(--text-muted) !important;
}

.empty-state .empty-icon {
  opacity: 0.4 !important;
}

/* ── SIGNAL ITEMS ───────────────────────────────────────── */
.signal-item {
  border-bottom: 1px solid var(--border) !important;
}

.signal-item.high {
  border-left: 3px solid var(--red) !important;
  background: rgba(239, 68, 68, 0.03) !important;
}

.signal-item.medium {
  border-left: 3px solid var(--yellow) !important;
  background: rgba(245, 158, 11, 0.03) !important;
}

.signal-item.low {
  border-left: 3px solid var(--green) !important;
  background: rgba(16, 185, 129, 0.03) !important;
}

/* ── BRIEFING CARDS ─────────────────────────────────────── */
.briefing-card,
[class*="briefing-"] {
  background: #FFFFFF !important;
  border: 1px solid var(--border) !important;
}

/* ── EXTERNAL REALITY FEED ──────────────────────────────── */
.external-signal-card,
[class*="external-"] {
  background: #FFFFFF !important;
  border: 1px solid var(--border) !important;
}

/* ── FAILURE MAP / SIMULATION ITEMS ────────────────────── */
.failure-item,
.simulation-item,
.assumption-item,
[class*="failure-"],
[class*="simulation-"] {
  background: #F8FAFC !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
}

.failure-item.severity-high {
  background: rgba(239, 68, 68, 0.04) !important;
  border-left: 3px solid var(--red) !important;
}

/* ── FRICTION CHECKBOXES / LOCKS ────────────────────────── */
.friction-gate {
  background: var(--bg-base) !important;
  border: 1px solid var(--border) !important;
}

.friction-gate.locked {
  border-color: rgba(245, 158, 11, 0.3) !important;
  background: rgba(245, 158, 11, 0.04) !important;
}

/* ── TOAST NOTIFICATIONS ────────────────────────────────── */
.toast {
  background: #FFFFFF !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
}

/* ── NUDGE PANEL ────────────────────────────────────────── */
#nudge-panel {
  background: #FFFFFF !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1) !important;
}

#nudge-panel * {
  color: var(--text-primary) !important;
}

#nudge-panel .nudge-item {
  border-bottom: 1px solid var(--border) !important;
}

#nudge-panel .nudge-item:hover {
  background: var(--bg-base) !important;
}

/* ── MODALS ─────────────────────────────────────────────── */
.modal-overlay {
  background: rgba(15, 23, 42, 0.4) !important;
}

.modal-content,
[class*="modal-"],
[class*="overlay-"] .panel {
  background: #FFFFFF !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12) !important;
}

/* ── ONBOARDING ─────────────────────────────────────────── */
.ob-step {
  background: var(--bg-base) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-muted) !important;
}

.ob-step.active {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
}

.ob-step.done {
  background: var(--green) !important;
  color: #fff !important;
  border-color: var(--green) !important;
}

.ob-step-panel {
  color: var(--text-primary) !important;
}

.ob-role-btn {
  background: var(--bg-base) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-secondary) !important;
}

.ob-role-btn:hover,
.ob-role-btn.active {
  background: #EEF2FF !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* ── AI MODULE ──────────────────────────────────────────── */
[id*="ai-"] .panel,
#module-ai .panel {
  background: #FFFFFF !important;
}

/* ── DATABASE MODULE ────────────────────────────────────── */
#module-database .panel {
  background: #FFFFFF !important;
}

.db-status-mini {
  background: var(--bg-base) !important;
  border: 1px solid var(--border) !important;
}

.db-status-dot {
  background: var(--text-muted) !important;
  box-shadow: none !important;
}

.db-status-dot.connected {
  background: var(--green) !important;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2) !important;
}

/* ── CONTEXT ENGINE MODULE ──────────────────────────────── */
#module-context .panel {
  background: #FFFFFF !important;
}

/* ── ASSUMPTION TRACKER ─────────────────────────────────── */
.assump-linked {
  color: var(--accent) !important;
}

/* ── CALIBRATION / FOUNDER MODEL ────────────────────────── */
.calibration-panel {
  background: #FFFFFF !important;
  border: 1px solid var(--border) !important;
}

/* ── SCROLLBAR ──────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #C7D0DF;
}

/* ── FRESHNESS WARNING BAR ──────────────────────────────── */
#freshness-warning {
  background: rgba(245, 158, 11, 0.08) !important;
  border-bottom: 1px solid rgba(245, 158, 11, 0.2) !important;
}

/* ── GLOBAL SIGNAL CONTENT ──────────────────────────────── */
#global-signal-text {
  color: var(--text-primary) !important;
}

#global-signal-metric {
  color: var(--text-muted) !important;
}

/* ── RESPONSIVE MOBILE ──────────────────────────────────── */
@media (max-width: 768px) {
  .sidebar {
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.1) !important;
  }
}

/* ── SIDEBAR SEARCH BUTTON FIX ──────────────────────────── */
/* Reset native <button> browser defaults; keep visual styles from .search-box */
.sidebar-search .search-box {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
}

/* ── ASK SARATHI CHAT MODAL ─────────────────────────────── */
.sarathi-chat-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 0 0 1rem 1rem;
  pointer-events: none;
}

.sarathi-chat-modal.hidden {
  display: none;
}

.sarathi-chat-shell {
  width: 380px;
  max-height: 560px;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid #E8ECF2;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(99, 102, 241, 0.08);
  pointer-events: all;
  animation: chatSlideUp 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
}

@keyframes chatSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.sarathi-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid #F0F2F7;
  background: linear-gradient(135deg, #6366F1 0%, #818CF8 100%);
  border-radius: 16px 16px 0 0;
}

.sarathi-chat-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.sarathi-chat-avatar {
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.sarathi-chat-name {
  font-weight: 600;
  color: #fff;
  font-size: 0.9rem;
  line-height: 1.2;
}

.sarathi-chat-sub {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.72rem;
}

.sarathi-chat-close {
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.sarathi-chat-close:hover {
  background: rgba(255, 255, 255, 0.28);
}

.sarathi-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  scroll-behavior: smooth;
}

.sarathi-chat-msg {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  max-width: 100%;
}

.sarathi-msg-ai {
  justify-content: flex-start;
}

.sarathi-msg-user {
  justify-content: flex-end;
}

.sarathi-msg-avatar {
  width: 24px;
  height: 24px;
  min-width: 24px;
  background: #EEF2FF;
  border-radius: 6px;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sarathi-msg-bubble {
  padding: 0.6rem 0.85rem;
  border-radius: 12px;
  font-size: 0.84rem;
  line-height: 1.55;
  max-width: 85%;
  word-break: break-word;
}

.sarathi-msg-ai .sarathi-msg-bubble {
  background: #F8FAFC;
  border: 1px solid #E8ECF2;
  color: #1E293B;
  border-radius: 4px 12px 12px 12px;
}

.sarathi-msg-user .sarathi-msg-bubble {
  background: #6366F1;
  color: #fff;
  border-radius: 12px 4px 12px 12px;
}

.sarathi-chat-msg.thinking .sarathi-msg-bubble::after {
  content: '●●●';
  animation: chatDots 1.2s infinite;
  letter-spacing: 2px;
  font-size: 0.7rem;
}

@keyframes chatDots {

  0%,
  100% {
    opacity: 0.3;
  }

  50% {
    opacity: 1;
  }
}

.sarathi-chat-no-ai {
  margin: 0 1rem 0.5rem;
  padding: 0.6rem 0.8rem;
  background: #FFF7ED;
  border: 1px solid #FED7AA;
  border-radius: 8px;
  font-size: 0.8rem;
  color: #92400E;
}

.sarathi-chat-no-ai a {
  color: #6366F1;
}

.sarathi-chat-no-ai.hidden {
  display: none;
}

.sarathi-chat-input-area {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid #F0F2F7;
  background: #FAFBFC;
  border-radius: 0 0 16px 16px;
}

.sarathi-chat-textarea {
  flex: 1;
  resize: none;
  border: 1px solid #E8ECF2;
  border-radius: 10px;
  padding: 0.55rem 0.75rem;
  font-size: 0.84rem;
  font-family: inherit;
  background: #FFFFFF;
  color: #1E293B;
  line-height: 1.5;
  max-height: 120px;
  overflow-y: auto;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.sarathi-chat-textarea:focus {
  outline: none;
  border-color: #6366F1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

.sarathi-chat-textarea::placeholder {
  color: #94A3B8;
}

.sarathi-chat-send {
  width: 36px;
  height: 36px;
  min-width: 36px;
  background: #6366F1;
  border: none;
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, transform 0.1s;
}

.sarathi-chat-send:hover {
  background: #4F46E5;
}

.sarathi-chat-send:active {
  transform: scale(0.93);
}

.sarathi-chat-send:disabled {
  background: #C7D2FE;
  cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════
   DSP HEALTH — Ring Widget + Slider Cards
═══════════════════════════════════════════════════════════ */

/* ── DSP Hero Panel ─────────────────────────────────────── */
.dsp-hero-panel {
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid #E8ECF2 !important;
  box-shadow: 0 4px 24px rgba(99, 102, 241, 0.07) !important;
}

.dsp-hero-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.1rem 0.9rem;
  background: linear-gradient(135deg, #6366F1 0%, #818CF8 100%);
  border-radius: 12px 12px 0 0;
}

.dsp-hero-title-block {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.dsp-hero-icon {
  width: 34px;
  height: 34px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: #fff;
}

.dsp-hero-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
}

.dsp-hero-sub {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  letter-spacing: 0.02em;
}

/* ── TTF Badge ───────────────────────────────────────────── */
.ttf-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.3rem 0.65rem;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  letter-spacing: 0.03em;
  border: 1px solid rgba(255, 255, 255, 0.25);
  transition: background 0.3s, color 0.3s;
}

.ttf-badge.ttf-critical {
  background: #EF4444;
  border-color: #EF4444;
  color: #fff;
}

.ttf-badge.ttf-warning {
  background: #F59E0B;
  border-color: #F59E0B;
  color: #fff;
}

.ttf-badge.ttf-stable {
  background: #10B981;
  border-color: #10B981;
  color: #fff;
}

/* ── Three Ring Cards ────────────────────────────────────── */
.dsp-rings-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-bottom: 1px solid #F0F2F7;
}

.dsp-ring-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem 0.5rem 0.75rem;
  border-right: 1px solid #F0F2F7;
  transition: background 0.2s;
}

.dsp-ring-card:last-child {
  border-right: none;
}

.dsp-ring-card:hover {
  background: #F8FAFC;
}

.dsp-ring-wrap {
  position: relative;
  width: 72px;
  height: 72px;
  margin-bottom: 0.5rem;
}

.dsp-ring-svg {
  width: 72px;
  height: 72px;
  transform: rotate(-90deg);
}

.dsp-ring-track {
  stroke: #EEF2FF;
  stroke-width: 7;
  fill: none;
}

.dsp-ring-fill {
  stroke-width: 7;
  fill: none;
  stroke-linecap: round;
  stroke: #6366F1;
  transition: stroke-dashoffset 0.9s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.5s ease;
}

.dsp-ring-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.dsp-ring-val {
  font-size: 1.2rem;
  font-weight: 800;
  color: #1E293B;
  line-height: 1;
}

.dsp-ring-unit {
  font-size: 0.6rem;
  color: #94A3B8;
  margin-top: 1px;
}

.dsp-ring-meta {
  text-align: center;
}

.dsp-ring-label {
  font-size: 0.76rem;
  font-weight: 600;
  color: #1E293B;
}

.dsp-ring-desc {
  font-size: 0.62rem;
  color: #94A3B8;
  margin-top: 1px;
}

.dsp-ring-status {
  font-size: 0.62rem;
  font-weight: 600;
  margin-top: 0.3rem;
  padding: 0.15rem 0.45rem;
  border-radius: 10px;
  display: inline-block;
  background: #EEF2FF;
  color: #6366F1;
  transition: background 0.3s, color 0.3s;
}

.dsp-ring-status.status-critical {
  background: #FEE2E2;
  color: #EF4444;
}

.dsp-ring-status.status-risk {
  background: #FEF3C7;
  color: #D97706;
}

.dsp-ring-status.status-moderate {
  background: #EEF2FF;
  color: #6366F1;
}

.dsp-ring-status.status-good {
  background: #DBEAFE;
  color: #2563EB;
}

.dsp-ring-status.status-strong {
  background: #D1FAE5;
  color: #059669;
}

.dsp-ring-trend {
  font-size: 0.75rem;
  color: #94A3B8;
  margin-top: 2px;
  transition: color 0.3s;
}

/* ── Comparison Bars ─────────────────────────────────────── */
.dsp-bars-section {
  padding: 0.85rem 1.1rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-bottom: 1px solid #F0F2F7;
}

.dsp-bar-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.dsp-bar-dim {
  font-size: 0.7rem;
  font-weight: 700;
  width: 14px;
  text-align: center;
  flex-shrink: 0;
}

.demand-dim {
  color: #EF4444;
}

.supply-dim {
  color: #8B5CF6;
}

.process-dim {
  color: #0EA5E9;
}

.dsp-bar-track {
  flex: 1;
  height: 6px;
  background: #EEF2FF;
  border-radius: 99px;
  overflow: hidden;
}

.dsp-bar-fill {
  height: 100%;
  border-radius: 99px;
  transition: width 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

.dsp-bar-demand {
  background: linear-gradient(90deg, #F97316, #EF4444);
}

.dsp-bar-supply {
  background: linear-gradient(90deg, #A78BFA, #8B5CF6);
}

.dsp-bar-process {
  background: linear-gradient(90deg, #38BDF8, #0EA5E9);
}

.dsp-bar-pct {
  font-size: 0.68rem;
  font-weight: 600;
  color: #94A3B8;
  width: 28px;
  text-align: right;
  flex-shrink: 0;
}

/* ── Constraint Block ────────────────────────────────────── */
.dsp-constraint-block {
  padding: 0.9rem 1.1rem;
}

.dsp-constraint-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94A3B8;
  margin-bottom: 0.35rem;
}

.dsp-constraint-text {
  font-size: 0.83rem;
  color: #1E293B;
  line-height: 1.55;
}

/* ── DSP Slider Cards (Context Engine) ───────────────────── */
.dsp-sliders-panel .panel-header {
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #F0F2F7;
  margin-bottom: 0.75rem;
}

.dsp-input-card {
  border: 1px solid #E8ECF2;
  border-radius: 10px;
  padding: 0.85rem 1rem;
  margin-bottom: 0.65rem;
  background: #FAFBFC;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.dsp-input-card:hover {
  border-color: #C7D2FE;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.06);
}

.dsp-input-card:last-child {
  margin-bottom: 0;
}

.demand-input-card:hover {
  border-color: #FECACA;
}

.supply-input-card:hover {
  border-color: #DDD6FE;
}

.process-input-card:hover {
  border-color: #BAE6FD;
}

.dsp-input-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}

.dsp-input-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  font-size: 0.75rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.demand-input-icon {
  background: #FEE2E2;
  color: #EF4444;
}

.supply-input-icon {
  background: #EDE9FE;
  color: #7C3AED;
}

.process-input-icon {
  background: #E0F2FE;
  color: #0284C7;
}

.dsp-input-labels {
  flex: 1;
  min-width: 0;
}

.dsp-input-name {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: #1E293B;
}

.dsp-input-desc {
  display: block;
  font-size: 0.7rem;
  color: #94A3B8;
  margin-top: 1px;
}

.dsp-input-score-wrap {
  display: flex;
  align-items: baseline;
  gap: 1px;
}

.dsp-input-score {
  font-size: 1.4rem;
  font-weight: 800;
  color: #1E293B;
  line-height: 1;
  min-width: 2.5ch;
  text-align: right;
  transition: color 0.3s;
}

.dsp-input-max {
  font-size: 0.7rem;
  color: #94A3B8;
}

.dsp-input-status {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  border-radius: 10px;
  background: #EEF2FF;
  color: #6366F1;
  flex-shrink: 0;
  transition: background 0.3s, color 0.3s;
}

.dsp-input-status.status-critical {
  background: #FEE2E2;
  color: #EF4444;
}

.dsp-input-status.status-risk {
  background: #FEF3C7;
  color: #D97706;
}

.dsp-input-status.status-moderate {
  background: #EEF2FF;
  color: #6366F1;
}

.dsp-input-status.status-good {
  background: #DBEAFE;
  color: #2563EB;
}

.dsp-input-status.status-strong {
  background: #D1FAE5;
  color: #059669;
}

/* ── Custom Slider Track ─────────────────────────────────── */
.dsp-input-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 99px;
  outline: none;
  cursor: pointer;
  background: linear-gradient(to right,
      var(--slider-color, #6366F1) 0%,
      var(--slider-color, #6366F1) var(--pct, 0%),
      #EEF2FF var(--pct, 0%),
      #EEF2FF 100%);
  transition: background 0.1s;
}

.dsp-input-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--slider-color, #6366F1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: border-color 0.3s, transform 0.15s;
}

.dsp-input-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

.dsp-input-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--slider-color, #6366F1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}

.demand-input-card .dsp-input-slider {
  --slider-color: #EF4444;
}

.supply-input-card .dsp-input-slider {
  --slider-color: #8B5CF6;
}

.process-input-card .dsp-input-slider {
  --slider-color: #0EA5E9;
}

/* ═══════════════════════════════════════════════════════════════
   DSP INTELLIGENCE ENGINE MODULE
   ═══════════════════════════════════════════════════════════════ */

/* Nav badge */
.dsp-intel-nav-badge {
  background: linear-gradient(135deg, #6366F1, #8B5CF6) !important;
  color: #fff !important;
}

/* ── Main Layout: form + orb side by side ─────────────────── */
.dsp-intel-main {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 1.5rem;
  align-items: start;
  margin-bottom: 1.5rem;
}

@media (max-width: 1100px) {
  .dsp-intel-main {
    grid-template-columns: 1fr;
  }
}

.dsp-intel-form {
  height: fit-content;
}

/* ── Orb Section ──────────────────────────────────────────── */
.dsp-intel-orb-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

/* 3-column grid: [arc-d] [orb] [arc-s], with arc-p below orb */
.dsp-orb-stage {
  display: grid;
  grid-template-columns: 130px 1fr 130px;
  grid-template-rows: auto auto;
  gap: 1.5rem 1rem;
  align-items: center;
  justify-items: center;
  width: 100%;
  padding: 2rem 1rem;
  background: linear-gradient(160deg, #F8FAFF 0%, #EEF2FF 100%);
  border: 1px solid #E0E7FF;
  border-radius: 20px;
}

.arc-demand {
  grid-column: 1;
  grid-row: 1;
}

.dsp-orb-core-wrap {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.arc-supply {
  grid-column: 3;
  grid-row: 1;
}

.arc-process {
  grid-column: 2;
  grid-row: 2;
}

/* ── DSP Orb (Centerpiece) ───────────────────────────────── */
.dsp-orb {
  position: relative;
  width: 168px;
  height: 168px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366F1, #4F46E5);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  animation: dspOrbPulse 3.5s ease-in-out infinite;
  --orb-glow: rgba(99, 102, 241, 0.45);
  transition: background 1s ease, --orb-glow 1s ease;
  z-index: 1;
}

@keyframes dspOrbPulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 var(--orb-glow), 0 0 30px var(--orb-glow);
  }

  50% {
    box-shadow: 0 0 0 18px transparent, 0 0 55px var(--orb-glow);
  }
}

.dsp-orb[data-tier="critical"] {
  background: linear-gradient(135deg, #EF4444, #DC2626);
}

.dsp-orb[data-tier="risky"] {
  background: linear-gradient(135deg, #F59E0B, #D97706);
}

.dsp-orb[data-tier="strong"] {
  background: linear-gradient(135deg, #10B981, #059669);
}

.dsp-orb-glow {
  position: absolute;
  inset: -24px;
  border-radius: 50%;
  background: rgba(99, 102, 241, 0.12);
  filter: blur(22px);
  z-index: -1;
  pointer-events: none;
  animation: dspGlowPulse 3.5s ease-in-out infinite;
}

@keyframes dspGlowPulse {

  0%,
  100% {
    opacity: 0.6;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.12);
  }
}

.dsp-orb-face {
  text-align: center;
  color: #fff;
  position: relative;
  z-index: 2;
}

.dsp-orb-val {
  font-size: 2.75rem;
  font-weight: 800;
  letter-spacing: -2px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.dsp-orb-sublabel {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  opacity: 0.85;
  text-transform: uppercase;
  margin-top: 2px;
}

.dsp-orb-verdict {
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.3rem 0.9rem;
  border-radius: 99px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 2px solid transparent;
}

.dsp-orb-verdict.awaiting {
  background: #F1F5F9;
  color: #94A3B8;
  border-color: #E2E8F0;
}

.dsp-orb-verdict.verdict-strong {
  background: #D1FAE5;
  color: #059669;
  border-color: #6EE7B7;
}

.dsp-orb-verdict.verdict-risky {
  background: #FEF3C7;
  color: #D97706;
  border-color: #FCD34D;
}

.dsp-orb-verdict.verdict-avoid {
  background: #FEE2E2;
  color: #DC2626;
  border-color: #FCA5A5;
}

.dsp-orb-verdict.verdict-pivot {
  background: #EDE9FE;
  color: #7C3AED;
  border-color: #C4B5FD;
}

.dsp-orb-ttf {
  font-size: 0.72rem;
  color: #64748B;
  letter-spacing: 0.02em;
}

.dsp-orb-ttf strong {
  color: #334155;
}

/* ── Arc Indicators (D, S, P rings) ──────────────────────── */
.dsp-orb-arc {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}

.arc-ring-wrap {
  position: relative;
  width: 70px;
  height: 70px;
}

.arc-ring-svg {
  width: 70px;
  height: 70px;
  transform: rotate(-90deg);
}

.arc-ring-track {
  fill: none;
  stroke: #E0E7FF;
  stroke-width: 5;
}

.arc-ring-fill {
  fill: none;
  stroke-width: 5;
  stroke-linecap: round;
  transition: stroke-dashoffset 1.1s cubic-bezier(.4, 0, .2, 1), stroke 0.8s ease;
}

.arc-fill-demand {
  stroke: #6366F1;
}

.arc-fill-supply {
  stroke: #F59E0B;
}

.arc-fill-process {
  stroke: #0EA5E9;
}

.arc-ring-inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.arc-ring-val {
  font-size: 1rem;
  font-weight: 800;
  color: #1E293B;
  font-variant-numeric: tabular-nums;
}

.arc-meta-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.arc-letter {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  padding: 1px 6px;
  border-radius: 4px;
}

.demand-letter {
  background: #EEF2FF;
  color: #4F46E5;
}

.supply-letter {
  background: #FFFBEB;
  color: #D97706;
}

.process-letter {
  background: #F0F9FF;
  color: #0369A1;
}

.arc-name {
  font-size: 0.72rem;
  font-weight: 700;
  color: #334155;
  margin-top: 2px;
}

.arc-sub {
  font-size: 0.65rem;
  color: #64748B;
  white-space: nowrap;
}

.arc-conf {
  font-size: 0.62rem;
  color: #94A3B8;
  font-style: italic;
}

/* ── Constraint Strip ────────────────────────────────────── */
.dsp-constraint-strip {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  background: #FFF7ED;
  border: 1px solid #FED7AA;
  border-radius: 10px;
  padding: 0.65rem 0.9rem;
  font-size: 0.78rem;
  color: #92400E;
  width: 100%;
  max-width: 560px;
}

.dsp-constraint-icon {
  font-size: 0.9rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.dsp-constraint-action {
  display: block;
  color: #B45309;
  margin-top: 2px;
  font-style: italic;
}

/* ── AI Insights Strip ───────────────────────────────────── */
.dsp-insights-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 1200px) {
  .dsp-insights-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 720px) {
  .dsp-insights-strip {
    grid-template-columns: 1fr;
  }
}

.dsp-insight-card {
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.dsp-insight-card-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid #F1F5F9;
  padding-bottom: 0.5rem;
}

.dsp-insight-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.dsp-insight-list li {
  font-size: 0.78rem;
  color: #334155;
  line-height: 1.4;
  padding-left: 0.8rem;
  position: relative;
}

.dsp-insight-list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: #94A3B8;
  font-size: 0.65rem;
  top: 1px;
}

.dsp-warn-card {
  border-color: #FED7AA;
  background: #FFFBEB;
}

.dsp-warn-card .dsp-insight-card-header {
  color: #92400E;
  border-color: #FEF3C7;
}

.dsp-warn-card .dsp-insight-list li::before {
  color: #F59E0B;
}

.dsp-timing-card {
  border-color: #BBF7D0;
  background: #F0FDF4;
}

.dsp-timing-card .dsp-insight-card-header {
  color: #166534;
  border-color: #BBF7D0;
}

.dsp-action-card {
  border-color: #C7D2FE;
  background: #EEF2FF;
}

.dsp-action-card .dsp-insight-card-header {
  color: #3730A3;
  border-color: #C7D2FE;
}

.dsp-action-card .dsp-insight-list li::before {
  color: #6366F1;
}

.dsp-timing-text {
  font-size: 0.78rem;
  color: #166534;
  line-height: 1.5;
  margin: 0;
}

.dsp-meta-line {
  font-size: 0.73rem;
  color: #475569;
  margin: 0;
  line-height: 1.4;
}

/* ── What-If Simulator ───────────────────────────────────── */
.dsp-simulator-section {
  margin-top: 0;
}

.dsp-sim-empty {
  text-align: center;
  padding: 2.5rem;
  color: #94A3B8;
  font-size: 0.85rem;
  border: 2px dashed #E2E8F0;
  border-radius: 12px;
  margin: 0.5rem 0;
}

.dsp-sim-body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.dsp-sim-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}

.dsp-sim-var-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 0.4rem;
}

.dsp-sim-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.dsp-sim-pill {
  padding: 0.3rem 0.75rem;
  border-radius: 99px;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1.5px solid #E2E8F0;
  background: #F8FAFC;
  color: #64748B;
  cursor: pointer;
  transition: all 0.15s ease;
}

.dsp-sim-pill:hover {
  border-color: #6366F1;
  color: #4F46E5;
  background: #EEF2FF;
}

.dsp-sim-pill.active {
  background: #6366F1;
  border-color: #6366F1;
  color: #fff;
}

/* Simulator Result */
.dsp-sim-result {
  display: flex;
  align-items: center;
  gap: 2rem;
  background: linear-gradient(135deg, #EEF2FF, #F5F3FF);
  border: 1.5px solid #C7D2FE;
  border-radius: 16px;
  padding: 1.25rem 1.5rem;
  flex-wrap: wrap;
}

.dsp-sim-score-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  min-width: 100px;
}

.dsp-sim-score-num {
  font-size: 2.5rem;
  font-weight: 800;
  color: #4F46E5;
  letter-spacing: -2px;
  line-height: 1;
}

.dsp-sim-delta-badge {
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.1rem 0.5rem;
  border-radius: 99px;
}

.dsp-sim-delta-badge.delta-pos {
  background: #D1FAE5;
  color: #059669;
}

.dsp-sim-delta-badge.delta-neg {
  background: #FEE2E2;
  color: #DC2626;
}

.dsp-sim-delta-badge.delta-zero {
  background: #F1F5F9;
  color: #64748B;
}

.dsp-sim-score-label {
  font-size: 0.7rem;
  color: #64748B;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.dsp-sim-dims {
  display: flex;
  gap: 1.5rem;
}

.dsp-sim-dim {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}

.dsp-sim-dim-letter {
  font-size: 0.6rem;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 4px;
}

.dsp-sim-dim-val {
  font-size: 1.3rem;
  font-weight: 800;
  color: #1E293B;
}

.dsp-sim-dim-delta {
  font-size: 0.65rem;
  font-weight: 700;
}

.dsp-sim-dim-delta.delta-pos {
  color: #059669;
}

.dsp-sim-dim-delta.delta-neg {
  color: #DC2626;
}

.dsp-sim-optimal {
  font-size: 0.75rem;
  font-weight: 700;
  color: #059669;
  background: #D1FAE5;
  padding: 0.3rem 0.75rem;
  border-radius: 99px;
  align-self: center;
}

/* ── Supply note (inverted scoring) ─────────────────────── */
.arc-supply .arc-sub::after {
  content: ' ↑=worse';
  font-size: 0.58rem;
  opacity: 0.7;
}

/* ═══════════════════════════════════════════════════════════
   WORKSPACE SWITCHER
   ═══════════════════════════════════════════════════════════ */

.workspace-switcher {
  position: relative;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.ws-active-btn {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 8px;
  padding: 0.45rem 0.6rem;
  cursor: pointer;
  transition: background 0.15s;
  text-align: left;
}

.ws-active-btn:hover {
  background: rgba(0, 0, 0, 0.08);
}

.ws-active-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: linear-gradient(135deg, #6366F1, #8B5CF6);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ws-active-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.ws-active-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: #1E293B;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ws-active-meta {
  font-size: 0.65rem;
  color: #64748B;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ws-count-badge {
  flex-shrink: 0;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background: #E2E8F0;
  color: #475569;
  font-size: 0.62rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

.ws-chevron {
  flex-shrink: 0;
  color: #94A3B8;
  transition: transform 0.2s;
}

.ws-active-btn[aria-expanded="true"] .ws-chevron {
  transform: rotate(180deg);
}

/* Dropdown */
.ws-dropdown {
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  top: calc(100% - 0.5rem + 2px);
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 500;
  overflow: hidden;
}

.ws-dropdown[hidden] {
  display: none;
}

.ws-dropdown-label {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94A3B8;
  padding: 0.65rem 0.75rem 0.35rem;
}

.ws-list {
  max-height: 240px;
  overflow-y: auto;
}

.ws-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: background 0.12s;
  border-radius: 0;
}

.ws-item:hover {
  background: #F8FAFC;
}

.ws-item.ws-item-active {
  background: #EEF2FF;
}

.ws-item-avatar {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: linear-gradient(135deg, #6366F1, #8B5CF6);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ws-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.ws-item-name {
  font-size: 0.76rem;
  font-weight: 600;
  color: #1E293B;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ws-item-meta {
  font-size: 0.63rem;
  color: #64748B;
}

.ws-item-actions {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  opacity: 0;
  transition: opacity 0.15s;
}

.ws-item:hover .ws-item-actions {
  opacity: 1;
}

.ws-item-check {
  color: #6366F1;
  font-size: 0.8rem;
}

.ws-item-del {
  background: none;
  border: none;
  cursor: pointer;
  color: #94A3B8;
  font-size: 0.72rem;
  padding: 2px 4px;
  border-radius: 4px;
  line-height: 1;
  transition: color 0.12s, background 0.12s;
}

.ws-item-del:hover {
  color: #EF4444;
  background: #FEE2E2;
}

.ws-dropdown-footer {
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  padding: 0.5rem 0.75rem;
}

.ws-new-btn {
  width: 100%;
  background: none;
  border: 1px dashed #CBD5E1;
  border-radius: 7px;
  color: #475569;
  font-size: 0.73rem;
  font-weight: 600;
  padding: 0.4rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.ws-new-btn:hover {
  border-color: #6366F1;
  color: #6366F1;
  background: #EEF2FF;
}

/* ── Create Workspace Modal ──────────────────────────────── */
.ws-create-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(4px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ws-create-modal[hidden] {
  display: none;
}

.ws-create-shell {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
  width: 420px;
  max-width: calc(100vw - 2rem);
  overflow: hidden;
}

.ws-create-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.25rem 0.75rem;
  border-bottom: 1px solid #F1F5F9;
}

.ws-create-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1E293B;
}

.ws-create-close {
  background: none;
  border: none;
  cursor: pointer;
  color: #94A3B8;
  font-size: 1rem;
  padding: 2px 6px;
  border-radius: 6px;
  transition: color 0.12s, background 0.12s;
}

.ws-create-close:hover {
  color: #EF4444;
  background: #FEE2E2;
}

.ws-create-body {
  padding: 1.1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ws-create-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #374151;
}

.ws-create-input {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1.5px solid #E2E8F0;
  border-radius: 8px;
  font-size: 0.85rem;
  color: #1E293B;
  background: #F8FAFC;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}

.ws-create-input:focus {
  border-color: #6366F1;
  background: #fff;
}

.ws-create-hint {
  margin: 0;
  font-size: 0.72rem;
  color: #94A3B8;
  line-height: 1.5;
}

.ws-create-footer {
  display: flex;
  gap: 0.6rem;
  justify-content: flex-end;
  padding: 0.75rem 1.25rem 1.1rem;
  border-top: 1px solid #F1F5F9;
}

/* ═══════════════════════════════════════════════════════════
   APPROVALS (HITL)
   ═══════════════════════════════════════════════════════════ */

.approvals-nav-badge {
  background: #DC2626 !important;
  color: #fff !important;
  font-weight: 700;
}

.approvals-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.approvals-loading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 2rem;
  color: #64748B;
  font-size: 0.85rem;
  justify-content: center;
}

.approvals-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 3rem 1.5rem;
  color: #64748B;
}

.approvals-empty-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #D1FAE5;
  color: #059669;
  font-size: 1.7rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.85rem;
}

.approvals-empty-title {
  font-size: 1rem;
  font-weight: 700;
  color: #1E293B;
  margin-bottom: 0.35rem;
}

.approvals-empty-sub {
  font-size: 0.78rem;
  max-width: 32em;
  line-height: 1.5;
}

.approvals-error {
  padding: 1rem;
  background: #FEE2E2;
  color: #B91C1C;
  border-radius: 8px;
  font-size: 0.82rem;
}

.approvals-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.approval-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  transition: opacity 0.25s, transform 0.25s, box-shadow 0.15s;
  position: relative;
}

.approval-card:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.approval-card[data-tone="danger"] {
  border-left: 3px solid #DC2626;
}

.approval-card[data-tone="finance"] {
  border-left: 3px solid #D97706;
}

.approval-card[data-tone="outreach"] {
  border-left: 3px solid #6366F1;
}

.approval-card[data-tone="system"] {
  border-left: 3px solid #64748B;
}

.approval-card-pending {
  opacity: 0.55;
  pointer-events: none;
}

.approval-card-resolved {
  opacity: 0;
  transform: translateY(-6px);
}

.approval-card-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.approval-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: #F1F5F9;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.approval-headline {
  flex: 1;
  min-width: 0;
}

.approval-action {
  font-size: 0.92rem;
  font-weight: 700;
  color: #1E293B;
  margin-bottom: 2px;
}

.approval-meta {
  font-size: 0.7rem;
  color: #94A3B8;
  font-family: var(--mono, monospace);
}

.approval-tone-badge {
  flex-shrink: 0;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.55rem;
  border-radius: 99px;
}

.approval-tone-danger {
  background: #FEE2E2;
  color: #B91C1C;
}

.approval-tone-finance {
  background: #FEF3C7;
  color: #92400E;
}

.approval-tone-outreach {
  background: #EEF2FF;
  color: #4338CA;
}

.approval-tone-system {
  background: #F1F5F9;
  color: #475569;
}

.approval-payload {
  background: #F8FAFC;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  padding: 0.75rem 0.85rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.6rem 1rem;
  margin-bottom: 0.85rem;
}

.approval-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.approval-field.full {
  grid-column: 1 / -1;
}

.approval-field-label {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94A3B8;
}

.approval-field-val {
  font-size: 0.82rem;
  color: #1E293B;
  word-break: break-word;
}

.approval-empty-payload {
  font-size: 0.78rem;
  color: #94A3B8;
}

.approval-draft {
  margin: 0;
  padding: 0.6rem 0.75rem;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 6px;
  font-family: var(--mono, monospace);
  font-size: 0.76rem;
  line-height: 1.55;
  color: #334155;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 240px;
  overflow-y: auto;
}

.approval-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.55rem;
}

.approval-reject-btn,
.approval-approve-btn {
  font-size: 0.78rem !important;
  padding: 0.45rem 0.95rem !important;
}

.approval-approve-btn {
  background: #059669 !important;
}

.approval-approve-btn:hover {
  background: #047857 !important;
}

/* ═══════════════════════════════════════════════════════════
   OUTREACH COMPOSER
   ═══════════════════════════════════════════════════════════ */

.outreach-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 1100px) {
  .outreach-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  }
}

.outreach-channel-toggle {
  display: inline-flex;
  background: #F1F5F9;
  border-radius: 99px;
  padding: 3px;
  margin-bottom: 1rem;
}

.outreach-chan-btn {
  background: transparent;
  border: none;
  padding: 0.45rem 1rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #475569;
  border-radius: 99px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.outreach-chan-btn:hover {
  color: #1E293B;
}

.outreach-chan-btn.active {
  background: #fff;
  color: #1E293B;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.outreach-form,
.outreach-review-form {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.outreach-form .form-label,
.outreach-review-form .form-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: -0.35rem;
}

.outreach-input,
.outreach-body {
  font-family: inherit;
  resize: vertical;
}

.outreach-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}

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

.outreach-generate-btn {
  margin-top: 0.5rem;
  align-self: flex-start;
  font-size: 0.85rem !important;
  padding: 0.55rem 1.1rem !important;
}

.outreach-error {
  margin-top: 0.5rem;
  padding: 0.6rem 0.8rem;
  background: #FEE2E2;
  color: #B91C1C;
  border-radius: 6px;
  font-size: 0.78rem;
}

.outreach-meta {
  font-size: 0.7rem;
  color: #94A3B8;
  font-family: var(--mono, monospace);
}

.outreach-body {
  min-height: 200px;
  line-height: 1.55;
  font-size: 0.85rem;
  color: #334155;
}

.outreach-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.55rem;
  margin-top: 0.75rem;
}

.outreach-queue-btn {
  background: #059669 !important;
}

.outreach-queue-btn:hover {
  background: #047857 !important;
}

.outreach-queue-btn:disabled,
.outreach-generate-btn:disabled {
  opacity: 0.6;
  cursor: wait;
}

/* ═══════════════════════════════════════════════════════════
   AI DECISION PRE-MORTEM (decision-analyzer)
   ═══════════════════════════════════════════════════════════ */

.ai-analysis-section .result-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ai-analysis-tag {
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  background: linear-gradient(135deg, #6366F1, #8B5CF6);
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}

.ai-analysis-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.85rem 1rem;
  background: #F8FAFC;
  border: 1px dashed rgba(99, 102, 241, 0.3);
  border-radius: 10px;
}

.ai-analysis-empty-copy {
  margin: 0;
  font-size: 0.78rem;
  color: #475569;
  line-height: 1.5;
}

.ai-analyze-btn {
  font-size: 0.78rem !important;
  padding: 0.45rem 0.95rem !important;
  align-self: flex-start;
}

.ai-analyze-btn:disabled {
  opacity: 0.6;
  cursor: wait;
}

.ai-analysis-error {
  margin-top: 0.6rem;
  padding: 0.6rem 0.8rem;
  background: #FEE2E2;
  color: #B91C1C;
  border-radius: 6px;
  font-size: 0.78rem;
}

.ai-analysis-result {
  background: #fff;
  border: 1px solid rgba(99, 102, 241, 0.15);
  border-radius: 10px;
  padding: 0.95rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.ai-analysis-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.ai-risk-pill {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.3rem 0.7rem;
  border-radius: 99px;
  background: #F1F5F9;
  color: #475569;
}

.ai-risk-pill[data-tier="low"] {
  background: #D1FAE5;
  color: #065F46;
}

.ai-risk-pill[data-tier="medium"] {
  background: #FEF3C7;
  color: #92400E;
}

.ai-risk-pill[data-tier="high"] {
  background: #FFE4E6;
  color: #9F1239;
}

.ai-risk-pill[data-tier="critical"] {
  background: #FEE2E2;
  color: #7F1D1D;
}

.ai-analysis-meta {
  font-size: 0.65rem;
  color: #94A3B8;
  font-family: var(--mono, monospace);
  flex: 1;
  min-width: 0;
}

.ai-analysis-rerun {
  background: none;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  width: 26px;
  height: 26px;
  cursor: pointer;
  font-size: 0.85rem;
  color: #64748B;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.ai-analysis-rerun:hover {
  color: #6366F1;
  border-color: #6366F1;
  background: #EEF2FF;
}

.ai-risk-justify {
  margin: 0;
  font-size: 0.78rem;
  color: #334155;
  line-height: 1.55;
}

.ai-analysis-block-title {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94A3B8;
  margin-bottom: 0.35rem;
}

.ai-analysis-list {
  margin: 0;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.ai-analysis-list li {
  font-size: 0.79rem;
  color: #334155;
  line-height: 1.5;
}

.ai-analysis-list-empty {
  list-style: none;
  color: #94A3B8;
  font-style: italic;
}

.ai-analysis-callout {
  margin: 0;
  font-size: 0.82rem;
  color: #1E293B;
  line-height: 1.55;
  padding: 0.6rem 0.75rem;
  background: #F8FAFC;
  border-left: 3px solid #6366F1;
  border-radius: 0 6px 6px 0;
}

.ai-analysis-callout-action {
  border-left-color: #059669;
  background: #ECFDF5;
}

.ai-dsp-impact-title {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94A3B8;
  margin-bottom: 0.4rem;
}

.ai-dsp-impact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.ai-dsp-impact-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.7rem;
  background: #F8FAFC;
  border-radius: 7px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.ai-dsp-impact-cell span {
  font-size: 0.7rem;
  font-weight: 700;
  color: #94A3B8;
  letter-spacing: 0.04em;
}

.ai-dsp-impact-cell strong {
  font-size: 0.95rem;
  font-weight: 800;
  color: #1E293B;
  font-variant-numeric: tabular-nums;
}

.ai-dsp-impact-cell[data-tone="positive"] {
  background: #ECFDF5;
  border-color: rgba(5, 150, 105, 0.2);
}

.ai-dsp-impact-cell[data-tone="positive"] strong {
  color: #059669;
}

.ai-dsp-impact-cell[data-tone="negative"] {
  background: #FEF2F2;
  border-color: rgba(220, 38, 38, 0.2);
}

.ai-dsp-impact-cell[data-tone="negative"] strong {
  color: #DC2626;
}

/* ═══════════════════════════════════════════════════════════
   AI INTELLIGENCE MODULE — layout fixes
   Two-col grid was clipping the left panel because grid items
   default to min-width:auto (=min-content), so the action-row
   buttons + provider-grid could push the column past its share.
   ═══════════════════════════════════════════════════════════ */

/* Module containers must clip — never let inner cards overflow horizontally */
.module-panel {
  overflow-x: hidden;
  min-width: 0;
}

/* Two-col grid items must be allowed to shrink below their min-content */
.two-col-layout {
  min-width: 0;
}

.two-col-layout>* {
  min-width: 0;
}

/* Panels themselves: hard cap at 100% of column, don't bleed */
#module-ai .panel {
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* Provider grid: don't force 3 columns at narrow widths — wrap instead */
#module-ai .ai-provider-grid {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
}

#module-ai .ai-provider-btn {
  min-width: 0;
  /* Long model strings like "Gemini 1.5 Pro / Flash" must wrap, not blow up the column */
  word-break: break-word;
}

#module-ai .provider-models {
  white-space: normal;
  line-height: 1.35;
}

/* Action row: let buttons wrap before they push the column wider */
#module-ai .ai-action-row {
  flex-wrap: wrap;
}

#module-ai .ai-action-row>button {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
}

/* API key row: input must shrink, toggle stays compact */
#module-ai .api-key-row {
  min-width: 0;
}

#module-ai .api-key-row .form-input {
  min-width: 0;
  width: 100%;
}

/* Prompt preview: keep wrapped, never extend container */
#module-ai .ai-prompt-preview {
  max-width: 100%;
  white-space: pre-wrap;
  word-break: break-word;
  box-sizing: border-box;
}

/* Form labels with <small> hint text inside: don't push width */
#module-ai .form-group label {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: baseline;
}

#module-ai .form-group label small {
  color: var(--text-muted);
  font-weight: 400;
  font-size: 0.7rem;
}

/* Setting rows on the right panel: wrap when squeezed */
#module-ai .ai-setting-row {
  flex-wrap: wrap;
  min-width: 0;
}

#module-ai .ai-setting-info {
  min-width: 0;
}

/* Usage grid inside the nested panel: never overflow */
#module-ai .ai-usage-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  min-width: 0;
}

/* Header pill should not wrap awkwardly when title squeezes */
#module-ai .module-header {
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* ═══════════════════════════════════════════════════════════
   AI Intelligence — final layout fixes
   The module uses .ai-two-col-layout (1.2fr/0.8fr) which my earlier
   .two-col-layout selectors never matched. Without min-width:0 on the
   grid items, the API config card's min-content (3 provider buttons,
   password input, action buttons) blew past its 1.2fr share and bled
   left behind the fixed sidebar.
   ═══════════════════════════════════════════════════════════ */

.main-content {
  /* Critical for shrinkable flex children: without min-width:0, the flex item
     refuses to size below its content's intrinsic min-width and pushes
     against the sidebar / right edge when DevTools or a small viewport
     shrinks the available space.
     overflow-x: auto (not hidden) — when a child genuinely overflows the
     available width (e.g. a wide table), the user gets a scroll bar instead
     of silently-clipped content. */
  width: 100%;
  min-width: 0;
  overflow-x: auto;
}

/* ── Pulse main grid (formerly inline style) ─────────────────
   Two-column on wide laptops, single-column once the right rail
   would crush below ~340px. Targeted only at the Pulse module
   so other module two-column layouts use .two-col-layout. */
.pulse-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 1.5rem;
  align-items: start;
}
@media (max-width: 1100px) {
  .pulse-grid { grid-template-columns: 1fr; }
}

.ai-two-col-layout {
  min-width: 0 !important;
  /* Use auto-fit so 2 cards always share the row evenly without overflow */
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
}

.ai-two-col-layout>* {
  min-width: 0 !important;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* Premium AI header: tame the huge padding that crowded narrow viewports */
#module-ai .ai-premium-header {
  padding: 1.5rem !important;
  margin-bottom: 1.25rem !important;
  flex-wrap: wrap;
  gap: 1rem;
  min-width: 0;
  box-sizing: border-box;
}

#module-ai .ai-title-block {
  min-width: 0;
  flex: 1;
  gap: 1rem;
}

#module-ai .ai-title-block>div {
  min-width: 0;
}

#module-ai .ai-icon-glow {
  width: 48px;
  height: 48px;
  font-size: 1.5rem;
  flex-shrink: 0;
}

#module-ai .module-title {
  font-size: 1.05rem;
  line-height: 1.3;
}

#module-ai .module-subtitle {
  font-size: 0.85rem;
  line-height: 1.45;
  word-break: break-word;
}

/* Make sure the status pill doesn't push the whole header out of column */
#module-ai .ai-status-pill-premium {
  flex-shrink: 0;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════
   AI Intelligence — NUCLEAR scoped reset.
   The previous fix didn't bite because some nested element (likely
   .ai-icon-glow or the ::before/::after pseudo on .ai-premium-header,
   or the provider-grid's min-content) was forcing the parent wider.
   Force every descendant to stay inside its allocated box.
   ═══════════════════════════════════════════════════════════ */

#module-ai,
#module-ai * {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Decorative pseudo-elements that bleed outside their parent and rely on
   parent overflow:hidden to be clipped — kill them. They're cosmetic. */
#module-ai .ai-premium-header::before,
#module-ai .ai-icon-glow::after {
  display: none !important;
}

/* Hard contain the module to its allocated width */
#module-ai {
  width: 100% !important;
  position: relative !important;
  overflow-x: clip !important;
}

/* Force the module-panel to behave as a clean block (not a flex/grid item
   that can mis-size in some parent contexts) */
#module-ai.module-panel {
  display: block !important;
}

#module-ai.module-panel.active {
  display: block !important;
}

/* Provider grid: smaller min so it can really fit a narrow column */
#module-ai .ai-provider-grid {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
  gap: 8px !important;
}

#module-ai .ai-provider-btn {
  padding: 0.7rem 0.4rem !important;
}

#module-ai .provider-models {
  font-size: 0.6rem !important;
  white-space: normal !important;
  word-break: break-word !important;
  line-height: 1.3 !important;
}

/* Slim down the premium header at the top */
#module-ai .ai-premium-header {
  padding: 1rem 1.25rem !important;
  margin-bottom: 1rem !important;
  border-radius: 14px !important;
}

#module-ai .ai-icon-glow {
  width: 40px !important;
  height: 40px !important;
  font-size: 1.25rem !important;
  border-radius: 11px !important;
}

#module-ai .ai-status-pill-premium {
  padding: 0.4rem 0.85rem !important;
  font-size: 0.78rem !important;
}

/* ═══════════════════════════════════════════════════════════
   AI Intelligence module — fully retired from the SPA.
   • Nav item hidden (the [hidden] attr was being overridden by
     .nav-item { display: flex }, so we force display:none here).
   • Module panel hidden too — provider config is developer UX,
     not founder UX. The orchestrator (backend/lib/ai/orchestrator)
     handles routing server-side; AI activity surfaces in Focus's
     Settings drawer.
   • Markup stays in DOM so the 18 getElementById call sites in
     app.js still resolve to real nodes (init logic stays harmless
     against hidden inputs/toggles).
   ═══════════════════════════════════════════════════════════ */

#nav-ai,
#module-ai,
#module-ai.module-panel,
#module-ai.module-panel.active,
/* Integrations is also dev config — DB connection URL, Hostinger deploy
   steps, phpMyAdmin instructions. Founders configure none of this; the
   backend reads .env. Hidden for the same reason as AI Intelligence. */
#nav-database,
#module-database,
#module-database.module-panel,
#module-database.module-panel.active {
  display: none !important;
}

/* ── Settings module layout ──────────────────────────────────
   Stack of panels capped at a readable width and aligned to the
   left of the content area so it doesn't fight the flex column
   layout that .module-panel.active uses. */
#module-settings .settings-stack {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 640px;
  width: 100%;
  align-self: flex-start;
}

#module-settings .panel {
  padding: 1.25rem 1.5rem;
}

#module-settings .form-group {
  margin-bottom: 0.85rem;
}

#module-settings .form-group:last-of-type {
  margin-bottom: 1rem;
}

#module-settings .settings-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

#module-settings .settings-status {
  font-size: 0.85rem;
  color: var(--text-muted);
}
#module-settings .settings-verify {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
}
#module-settings .settings-verify-status {
  font-weight: 600;
  font-size: 0.8rem;
  padding: 0.2rem 0.6rem;
  border-radius: 99px;
}
#module-settings .settings-verify-status.verified {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
}
#module-settings .settings-verify-status.unverified {
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
}
#module-settings #settings-resend-verify {
  font-size: 0.78rem;
  padding: 0.3rem 0.85rem;
}

/* Retired modules — info already lives elsewhere (or feature is a stub):
     • DSP Intelligence    → DSP Health widget on Pulse covers it
     • External Reality    → Phase-1 manual-entry stub, not founder workflow
     • Founder Briefing    → local-only summary; superseded by Pulse
   Keeping the markup so links don't 404, but hiding nav + panel. */
#nav-dsp,
#module-dsp,
#module-dsp.module-panel.active,
#nav-external,
#module-external,
#module-external.module-panel.active,
#nav-briefing,
#module-briefing,
#module-briefing.module-panel.active {
  display: none !important;
}