/* ==========================================================================
   AURUM DASHBOARD - IMPORT-ONLY ENTRY POINT
   Order matters: tokens -> base -> layout -> components -> utilities
   ========================================================================== */

/* 1. Design Tokens (must be first) */

/* ==========================================================================
   AURUM AI LABS - OFFICIAL DESIGN TOKENS
   Source: 24-brand-styles.md / Aurum_Technical_Design_System_ALIGNED_03Nov25.md
   ========================================================================== */

:root {
  /* Primary Brand Colors */
  --color-vivid-blue: #0466C8;
  --brand-blue: #0466C8;
  --color-yellow: #EEC35A;
  --color-black: #000000;
  
  /* Secondary Colors */
  --color-red-orange: #EE8029;
  --color-evergreen: #03BFA4;
  --color-dark-red: #E73134;
  
  /* Gradient Colors */
  --color-medium-blue: #1D75CE;
  --color-teal: #74C5BD;
  
  /* Neutrals */
  --color-white: #FFFFFF;
  --color-gray-50: #EFEFEF;
  --color-gray-100: #F2F0EF;
  --color-gray-200: #E4E4E7;
  --color-gray-300: #D4D4D8;
  --color-gray-500: #71717A;
  --color-gray-600: #52525B;
  --color-gray-800: #262626;
  --color-gray-900: #1A1A1A;
  --color-gray-950: #171717;
  
  /* Special UI Colors */
  --color-icon-bg-light: #F5F5F5;
  --color-icon-bg-dark: #333333;
  --color-warm-subtle: #FFF8E7;
  --color-bg-subtle-warm: #FFF8E7;
  
  /* Semantic Color Mapping */
  --color-primary: var(--color-vivid-blue);
  --color-secondary: var(--color-yellow);
  --color-success: var(--color-evergreen);
  --color-warning: var(--color-red-orange);
  --color-error: var(--color-dark-red);
  
  /* Brand Semantic Aliases */
  --brand-gold: var(--color-yellow);
  --brand-gold-text: var(--color-yellow);
  --brand-teal: var(--color-evergreen);
  --brand-magenta: var(--color-red-orange);
  
  /* Brand Gradients */
  --gradient-highlight: linear-gradient(180deg, #1D75CE 0%, #1D75CE 70%, #74C5BD 100%);
  --gradient-cta: linear-gradient(180deg, #0466C8 0%, #1D75CE 100%);
  --gradient-success: linear-gradient(180deg, #03BFA4 0%, #03BFA4 100%);
  
  /* Typography - Urbanist Font */
  --font-family-primary: 'Urbanist', system-ui, -apple-system, sans-serif;
  --font-family-mono: 'JetBrains Mono', 'SF Mono', Consolas, Monaco, monospace;
  
  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* Font Sizes */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem;
  --font-size-4xl: 2.5rem;
  --font-size-5xl: 3.5rem;
  --text-3xl: 2.1875rem;
  --text-4xl: 2.8125rem;
  
  /* Display Typography - Using clamp for responsive scaling */
  --display-sm: clamp(28px, 4vw, 36px);
  --display-md: clamp(32px, 5vw, 48px);
  --display-lg: clamp(40px, 6vw, 60px);
  --display-xl: clamp(48px, 8vw, 72px);
  
  /* Line Heights */
  --leading-tight: 1.1;
  --leading-snug: 1.2;
  --leading-normal: 1.3;
  --leading-body: 1.4;
  --leading-relaxed: 1.6;
  
  /* Spacing (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  
  /* Border Radius */
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 24px;
  --radius-full: 9999px;
  
  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.10);
  --shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.12);
  
  /* Colored Shadows */
  --shadow-blue: 0 4px 16px rgba(4, 102, 200, 0.2);
  --shadow-blue-hover: 0 8px 24px rgba(4, 102, 200, 0.35);
  --shadow-success: 0 4px 12px rgba(3, 191, 164, 0.2);
  --shadow-danger: 0 4px 12px rgba(231, 49, 52, 0.2);
  
  /* Transitions */
  --transition-fast: 200ms;
  --transition-normal: 300ms;
  --transition-slow: 500ms;
  --ease-standard: cubic-bezier(0.25, 0.4, 0.25, 1);
  --ease-smooth: cubic-bezier(0.65, 0, 0.35, 1);
}

/* Light Mode (default) */

:root, [data-theme="light"] {
  --color-background: var(--color-white);
  --color-background-secondary: #F9F2E2;
  --color-foreground: var(--color-black);
  --color-foreground-muted: var(--color-gray-600);
  --color-foreground-secondary: #52525B;
  --color-border: var(--color-gray-200);
  --color-border-secondary: #D4D4D8;
  --color-icon-bg: var(--color-icon-bg-light);
  
  /* Cards & UI */
  --color-card: var(--color-white);
  --color-card-foreground: var(--color-black);
  --color-popover: var(--color-white);
  --color-popover-foreground: var(--color-black);
  
  /* Input & Forms */
  --color-input: var(--color-gray-200);
  --color-ring: var(--color-vivid-blue);
  
  /* Muted */
  --color-muted: #F4F4F5;
  --color-muted-foreground: var(--color-gray-600);
  
  /* Sidebar & Topbar */
  --sidebar-bg: var(--color-white);
  --topbar-bg: var(--color-white);
}

/* Dark Mode - Softer dark following website design */

[data-theme="dark"], .dark {
  /* Backgrounds - Softer dark blue-gray instead of pure black */
  --color-background: #0F1419;
  --color-background-secondary: #151B23;
  --color-background-tertiary: #1C242D;
  --color-background-accent: #0D1426;
  
  /* Foregrounds */
  --color-foreground: #F7F9FC;
  --color-foreground-secondary: #E2E8F0;
  --color-foreground-muted: #94A3B8;
  
  /* Cards & UI - Slightly lighter than background */
  --color-card: #151B23;
  --color-card-foreground: #E2E8F0;
  --color-popover: #1C242D;
  --color-popover-foreground: #E2E8F0;
  
  /* Borders & Inputs */
  --color-border: #2D3748;
  --color-border-secondary: #1E293B;
  --color-input: #2D3748;
  --color-ring: #4A7FFF;
  
  /* Muted */
  --color-muted: #1E293B;
  --color-muted-foreground: #94A3B8;
  
  /* Grays for dark mode */
  --color-gray-400: #9CA3AF;
  --color-gray-800: #1F1F1F;
  --color-gray-900: #0F0F0F;
  
  /* Sidebar & Topbar */
  --sidebar-bg: #0A0A0A;
  --topbar-bg: #0A0A0A;
  --color-icon-bg: var(--color-icon-bg-dark);
  
  /* Shadows for dark mode */
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.5);
}

/* 2. Base Styles */

/* ==========================================================================
   BASE STYLES - Reset, Typography, Global Defaults
   ========================================================================== */

/* Reset */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--leading-body);
  color: var(--color-foreground);
  background-color: var(--color-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Typography */

h1, .h1 {
  font-size: var(--text-4xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
}

h2, .h2 {
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-snug);
}

h3, .h3 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-normal);
}

h4, .h4 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-normal);
}

h5, .h5 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-normal);
}

h6, .h6 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-normal);
}

/* Links */

a {
  color: var(--color-vivid-blue);
  text-decoration: none;
  transition: color var(--transition-normal);
}

a:hover {
  text-decoration: underline;
}

/* Text utilities */

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

.text-primary {
  color: var(--color-vivid-blue) !important;
}

.text-success {
  color: var(--color-evergreen) !important;
}

.text-warning {
  color: var(--color-yellow) !important;
}

.text-danger {
  color: var(--color-dark-red) !important;
}

/* Ensure all headings have proper color */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--color-foreground);
}

/* Paragraphs inherit color */

p {
  color: inherit;
}

/* Span and label defaults */

span, label {
  color: inherit;
}

/* Small text */

small, .small {
  color: var(--color-foreground-muted);
}

/* Font weight utilities */

.fw-bold {
  font-weight: var(--font-weight-bold);
  color: var(--color-foreground);
}

.fw-semibold {
  font-weight: var(--font-weight-semibold);
}

.fw-medium {
  font-weight: var(--font-weight-medium);
}

/* Container */

.container {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

/* Accessibility */

:focus-visible {
  outline: 2px solid var(--color-vivid-blue);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* 3. Layout */

/* ==========================================================================
   LAYOUT - App Shell, Sidebar, Topbar, Content
   Aligned with aurumai-website-frontend design patterns
   ========================================================================== */

/* App Layout */

#app-layout {
  min-height: 100vh;
  position: relative;
}

/* ==========================================================================
   TOPBAR - Pill Style Header (matching website)
   Now full-width since sidebar is a drawer
   ========================================================================== */

.topbar-custom {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1060;
  padding: 0;
  transition: none;
  background-color: var(--color-background);
  height: 64px;
  display: flex;
  align-items: center;
}

[data-theme="dark"] .topbar-custom {
  background-color: #0A0A0A;
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 64px;
  padding: 0 var(--space-5);
  background: transparent;
  overflow: visible;
  min-width: 0;
  flex: 1;
}

/* Logo in topbar — left side */

.topbar-logo-area {
  display: flex;
  align-items: center;
  width: 220px;
  flex-shrink: 0;
  padding-left: var(--space-4);
}

.topbar-logo-area .sidebar-logo--light {
  display: block;
  height: 49px;
  width: auto;
}

.topbar-logo-area .sidebar-logo--dark {
  display: none;
  height: 49px;
  width: auto;
}

[data-theme="dark"] .topbar-logo-area .sidebar-logo--light {
  display: none;
}

[data-theme="dark"] .topbar-logo-area .sidebar-logo--dark {
  display: block;
}

/* Topbar Left */

.topbar-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0; /* Don't shrink logo/menu */
  min-width: 0;
}

.button-toggle-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-lg);
  color: var(--color-foreground);
  cursor: pointer;
  transition: background-color var(--transition-normal);
}

.button-toggle-menu:hover {
  background: var(--color-muted);
}

.button-toggle-menu svg,
.button-toggle-menu [data-lucide] {
  width: 20px;
  height: 20px;
}

/* Topbar Logo */

.topbar-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.topbar-logo-img {
  height: 32px;
  width: auto;
}

/* Hide hamburger + logo on desktop — sidebar has its own logo */

@media (min-width: 768px) {
  .topbar-left {
    display: none;
  }
}

/* Mobile sidebar toggle — only visible on mobile where sidebar is a drawer */

.topbar-sidebar-toggle {
  display: none !important; /* Hidden on desktop — !important overrides btn-icon-ghost */
}

@media (max-width: 767px) {
  .topbar-sidebar-toggle {
    display: flex !important; /* Show only on mobile */
  }
}

.topbar-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-foreground);
}

/* Topbar Right */

.topbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: nowrap;
  min-width: 0; /* Allow flex items to shrink */
  overflow: visible; /* Allow dropdowns to escape */
  position: relative; /* Ensure proper stacking context */
}

/* Credit Display - Prevent overflow on mobile */

#credit-display-container {
  min-width: 0; /* Allow text to truncate */
  flex-shrink: 1; /* Allow to shrink if needed */
}

.credit-display {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.credit-display span {
  font-size: var(--font-size-sm);
  line-height: 1.2;
}

.credit-display .fa-coins {
  flex-shrink: 0;
}

/* User Menu Button - Prevent overflow on mobile */

#user-menu-button {
  min-width: 0;
  padding: var(--space-1) var(--space-2);
  gap: var(--space-1);
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
}

#user-menu-button img,
#user-menu-button i {
  flex-shrink: 0;
}

/* Bootstrap dropdown arrow - show by default, prevent overflow */

#user-menu-button.dropdown-toggle::after {
  flex-shrink: 0;
  margin-left: var(--space-1);
  border-width: 0.3em 0.3em 0;
  border-top-color: currentColor;
  display: inline-block; /* Ensure arrow shows */
}

/* Theme Toggle - Matching website theme-toggle.tsx */

.theme-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: transparent;
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: background-color var(--transition-normal);
}

.theme-toggle:hover {
  background: var(--color-muted);
}

.theme-toggle-track {
  position: relative;
  width: 48px;
  height: 24px;
  border-radius: var(--radius-full);
  background-color: var(--color-muted);
  transition: background-color var(--transition-normal);
}

[data-theme="dark"] .theme-toggle-track {
  background-color: rgba(4, 102, 200, 0.2);
}

.theme-toggle-knob {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  background-color: var(--color-foreground);
  opacity: 0.7;
  transition: transform var(--transition-normal), background-color var(--transition-normal), opacity var(--transition-normal);
}

[data-theme="dark"] .theme-toggle-knob {
  transform: translateX(24px);
  background-color: var(--color-vivid-blue);
  opacity: 1;
}

.theme-toggle-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-foreground);
}

/* Topbar User Avatar */

.topbar-user-avatar {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--color-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.topbar-user-avatar i,
.topbar-user-avatar svg {
  width: 16px;
  height: 16px;
  color: var(--color-foreground-muted);
}

/* Topbar Org Switcher */

.topbar-org-switcher {
  display: flex;
  align-items: center;
}

/* Avatar pill (initials) — used by trigger and menu rows */

.topbar-org-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: rgba(4, 102, 200, 0.12);
  color: #0466C8;
  font: 600 11px/1 "Urbanist", system-ui, sans-serif;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

/* Trigger button */

.org-switcher-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
  color: var(--color-foreground, #0f172a);
  font: 600 13px/1 "Urbanist", system-ui, sans-serif;
  transition: background-color 120ms ease, border-color 120ms ease;
  max-width: 220px;
}

.org-switcher-trigger:hover {
  background: var(--color-muted, rgba(15, 23, 42, 0.04));
  border-color: rgba(15, 23, 42, 0.08);
}

.org-switcher-trigger__label {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.org-switcher-trigger__chev {
  width: 14px;
  height: 14px;
  color: var(--color-foreground-muted, #64748b);
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .org-switcher-trigger__label { display: none; }
  .org-switcher-trigger { padding: 0 8px; }
}

/* Dropdown menu — manual styling (not Bootstrap-themed) so we control width */

.org-switcher-menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 280px;
  padding: 6px;
  background: var(--color-background, #ffffff);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(15, 23, 42, 0.06);
  z-index: 1000;
}

.org-switcher-menu.show { display: block; }

.org-switcher-menu__header {
  padding: 8px 10px 6px;
  font: 600 11px/1 "Urbanist", system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-foreground-muted, #64748b);
}

.org-switcher-menu__divider {
  height: 1px;
  margin: 4px 6px;
  background: rgba(15, 23, 42, 0.06);
}

/* Menu row */

.org-switcher-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  color: var(--color-foreground, #0f172a);
  transition: background-color 100ms ease;
}

.org-switcher-item:hover { background: rgba(4, 102, 200, 0.06); }

.org-switcher-item.is-active { background: rgba(4, 102, 200, 0.10); }

.org-switcher-item__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.org-switcher-item__name {
  font: 600 13px/1.2 "Urbanist", system-ui, sans-serif;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.org-switcher-item__sub {
  font: 500 11px/1.2 "Urbanist", system-ui, sans-serif;
  color: var(--color-foreground-muted, #64748b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.org-switcher-item__check {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #0466C8;
  flex-shrink: 0;
}

.org-switcher-item__check svg { width: 16px; height: 16px; }

/* Dark mode (driven by [data-theme="dark"] from ThemeManager) */

[data-theme="dark"] .org-switcher-menu {
  background: #0f172a;
  border-color: rgba(148, 163, 184, 0.18);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.30);
}

[data-theme="dark"] .org-switcher-item { color: #e2e8f0; }

[data-theme="dark"] .org-switcher-item:hover { background: rgba(56, 132, 220, 0.16); }

[data-theme="dark"] .org-switcher-item.is-active { background: rgba(56, 132, 220, 0.22); }

[data-theme="dark"] .org-switcher-item__sub { color: #94a3b8; }

[data-theme="dark"] .org-switcher-menu__divider { background: rgba(148, 163, 184, 0.18); }

[data-theme="dark"] .org-switcher-trigger { color: #f1f5f9; }

[data-theme="dark"] .org-switcher-trigger:hover {
  background: rgba(148, 163, 184, 0.10);
  border-color: rgba(148, 163, 184, 0.18);
}

[data-theme="dark"] .topbar-org-avatar {
  background: rgba(56, 132, 220, 0.20);
  color: #93c5fd;
}

/* Settings → Workspace card */

.settings-workspace {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: rgba(15, 23, 42, 0.02);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
}

.settings-workspace--readonly {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 16px;
}

.settings-workspace__item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  color: #0f172a;
  transition: background-color 120ms ease, border-color 120ms ease;
  min-height: 64px;
}

.settings-workspace__item:hover {
  background: rgba(4, 102, 200, 0.06);
  border-color: rgba(4, 102, 200, 0.20);
}

.settings-workspace__item.is-active {
  background: rgba(4, 102, 200, 0.10);
  border-color: rgba(4, 102, 200, 0.35);
  cursor: default;
}

.settings-workspace__item .topbar-org-avatar {
  width: 36px;
  height: 36px;
  font-size: 13px;
}

.settings-workspace__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  flex: 1;
}

.settings-workspace__name {
  display: block;
  font: 600 15px/1.2 "Urbanist", system-ui, sans-serif;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.settings-workspace__sub {
  display: block;
  font: 500 12.5px/1.3 "Urbanist", system-ui, sans-serif;
  color: #64748b;
  text-transform: capitalize;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.settings-workspace__badge {
  flex-shrink: 0;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(4, 102, 200, 0.14);
  color: #0466C8;
  font: 600 11px/1 "Urbanist", system-ui, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.settings-workspace__hint {
  flex-shrink: 0;
  font: 600 11px/1 "Urbanist", system-ui, sans-serif;
  color: #64748b;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 100ms ease;
}

.settings-workspace__item:hover .settings-workspace__hint { opacity: 1; }

.settings-workspace__divider {
  height: 1px;
  margin: 2px 8px;
  background: rgba(15, 23, 42, 0.06);
}

.settings-workspace__footer {
  margin-top: 8px;
  padding: 0 4px 2px;
  font-size: 12px;
  line-height: 1.5;
  color: #64748b;
}

.settings-workspace__migrate {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  padding: 12px 14px;
  border: 1px dashed rgba(4, 102, 200, 0.35);
  border-radius: 10px;
  background: rgba(4, 102, 200, 0.04);
}

.settings-workspace__migrate-title {
  font: 600 13px/1.3 "Urbanist", system-ui, sans-serif;
  color: #0f172a;
}

.settings-workspace__migrate-sub {
  font: 500 12px/1.4 "Urbanist", system-ui, sans-serif;
  color: #64748b;
}

.settings-workspace__migrate button {
  align-self: flex-start;
}

[data-theme="dark"] .settings-workspace {
  background: rgba(148, 163, 184, 0.06);
  border-color: rgba(148, 163, 184, 0.18);
}

[data-theme="dark"] .settings-workspace__item { color: #e2e8f0; }

[data-theme="dark"] .settings-workspace__item:hover {
  background: rgba(56, 132, 220, 0.16);
  border-color: rgba(56, 132, 220, 0.35);
}

[data-theme="dark"] .settings-workspace__item.is-active {
  background: rgba(56, 132, 220, 0.22);
  border-color: rgba(56, 132, 220, 0.50);
}

[data-theme="dark"] .settings-workspace__sub,
[data-theme="dark"] .settings-workspace__hint,
[data-theme="dark"] .settings-workspace__footer,
[data-theme="dark"] .settings-workspace__migrate-sub { color: #94a3b8; }

[data-theme="dark"] .settings-workspace__divider { background: rgba(148, 163, 184, 0.18); }

[data-theme="dark"] .settings-workspace__migrate {
  border-color: rgba(56, 132, 220, 0.45);
  background: rgba(56, 132, 220, 0.08);
}

[data-theme="dark"] .settings-workspace__migrate-title { color: #f1f5f9; }

[data-theme="dark"] .settings-workspace__badge {
  background: rgba(56, 132, 220, 0.25);
  color: #93c5fd;
}

/* Icon Button Ghost */

.btn-icon-ghost {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-full);
  color: var(--color-foreground);
  cursor: pointer;
  transition: background-color var(--transition-normal);
}

.btn-icon-ghost:hover {
  background: var(--color-muted);
}

.btn-icon-ghost svg,
.btn-icon-ghost [data-lucide] {
  width: 20px;
  height: 20px;
}

.btn-icon-ghost::after {
  display: none; /* Remove dropdown arrow */
}

/* Dropdown Styling */

.dropdown-menu {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  min-width: 180px;
  z-index: 1060 !important; /* Highest - above topbar (1050), sidebar (1055), and everything */
  position: absolute !important; /* Ensure proper stacking */
}

/* Bootstrap dropdown positioning - ensure it's above everything */

.dropdown {
  position: relative;
  z-index: 1060 !important; /* Higher than topbar and sidebar */
  overflow: visible; /* Ensure dropdown menu can escape parent container */
}

/* Ensure dropdown menu can escape any overflow constraints */

.topbar-right .dropdown {
  overflow: visible;
}

.topbar-right {
  overflow: visible; /* Allow dropdowns to escape */
}

/* Dropdown menu end (right-aligned) - ensure proper z-index */

.dropdown-menu-end {
  z-index: 1060 !important;
}

.dropdown-header {
  padding: var(--space-2) var(--space-3);
}

.dropdown-header-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-foreground);
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-foreground);
  text-decoration: none;
  transition: background-color var(--transition-normal);
}

.dropdown-item:hover {
  background: var(--color-muted);
  color: var(--color-foreground);
}

.dropdown-item svg,
.dropdown-item [data-lucide] {
  width: 16px;
  height: 16px;
  opacity: 0.7;
}

/* ==========================================================================
   SIDEBAR - Permanent Sidebar (Figma aligned)
   Desktop: permanent fixed sidebar
   Mobile: slide-out drawer with overlay
   ========================================================================== */

.app-sidebar {
  position: fixed;
  top: 64px;
  bottom: 0;
  left: 0;
  width: 220px;
  z-index: 1055;
  background-color: var(--color-background);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform var(--transition-normal) var(--ease-smooth);
}

[data-theme="dark"] .app-sidebar {
  background-color: #0A0A0A;
  border-right-color: var(--color-border);
}

.sidebar-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Sidebar Overlay — only shown on mobile */

.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65); /* Dims background — content less visible behind sidebar */
  opacity: 0;
  visibility: hidden;
  z-index: 1054;
  transition: opacity var(--transition-normal), visibility var(--transition-normal);
}

.sidebar-overlay.visible {
  opacity: 1;
  visibility: visible;
}

/* --- Sidebar Logo — hidden, logo is now in the topbar --- */

.sidebar-logo-header {
  display: none;
}

.sidebar-logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: opacity var(--transition-normal);
}

.sidebar-logo-link:hover {
  opacity: 0.8;
}

.sidebar-logo-img {
  height: 32px;
  width: auto;
  max-width: 100%;
}

/* Theme-aware logo switching */

.sidebar-logo--light {
  display: block;
}

.sidebar-logo--dark {
  display: none;
}

[data-theme="dark"] .sidebar-logo--light {
  display: none;
}

[data-theme="dark"] .sidebar-logo--dark {
  display: block;
}

/* --- Sidebar User Profile --- */

.sidebar-profile {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin: 0 var(--space-2) var(--space-2);
  border-radius: var(--radius-lg);
}

.sidebar-profile__avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--color-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.sidebar-profile__avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--radius-full);
}

.sidebar-profile__avatar-fallback {
  width: 18px;
  height: 18px;
  color: var(--color-foreground-muted);
}

[data-theme="dark"] .sidebar-profile__avatar {
  background: var(--color-icon-bg-dark);
}

.sidebar-profile__info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sidebar-profile__name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-profile__role {
  font-size: 11px;
  color: var(--color-vivid-blue);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-style: italic;
}

/* --- Sidebar Menu --- */

.sidebar-menu-label {
  padding: var(--space-3) var(--space-4) var(--space-2);
  font-size: 10px;
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-foreground-muted);
}

/* Group labels rendered inline within the menu list (Sources / Knowledge).
   Reuse the .sidebar-menu-label look; add a touch of top space so each group
   separates cleanly from the items above it. */

#side-menu > li.side-menu-group {
  margin-top: var(--space-2);
}

#sidebar-menu {
  padding: 0;
}

#side-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

#side-menu > li {
  margin-bottom: 2px;
}

#side-menu a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  color: var(--color-foreground-muted);
  text-decoration: none;
  transition: all var(--transition-normal);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
  border-radius: 0;
  margin: 0;
  border-left: 3px solid transparent;
}

#side-menu a:hover {
  color: var(--color-foreground);
  background-color: var(--color-muted);
}

#side-menu a.active {
  color: var(--color-vivid-blue);
  background-color: rgba(4, 102, 200, 0.06);
  font-weight: var(--font-weight-semibold);
  border-left-color: var(--color-vivid-blue);
}

[data-theme="dark"] #side-menu a.active {
  background-color: rgba(4, 102, 200, 0.1);
}

#side-menu a svg,
#side-menu a [data-lucide] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.6;
}

#side-menu a.active svg,
#side-menu a.active [data-lucide] {
  opacity: 1;
  color: var(--color-vivid-blue);
}

/* NEW badge on Choose Module */

.sidebar-badge {
  font-size: 9px;
  font-weight: var(--font-weight-bold);
  padding: 1px 6px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-left: auto;
}

.sidebar-badge--new {
  background: var(--color-red-orange);
  color: white;
}

/* --- Expandable sidebar submenu (Assets → categories) --- */

.sidebar-submenu-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-2) var(--space-4);
  background: none;
  border: none;
  border-left: 3px solid transparent;
  color: var(--color-foreground-muted);
  font-family: inherit;
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
  text-align: left;
  cursor: pointer;
  transition: all var(--transition-normal);
}

.sidebar-submenu-toggle:hover {
  color: var(--color-foreground);
  background-color: var(--color-muted);
}

.sidebar-submenu-toggle > [data-lucide],
.sidebar-submenu-toggle > svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.6;
}

.sidebar-submenu-chevron {
  margin-left: auto;
  width: 14px !important;
  height: 14px !important;
  opacity: 0.5 !important;
  transition: transform var(--transition-normal);
}

.sidebar-submenu-toggle[aria-expanded="true"] .sidebar-submenu-chevron {
  transform: rotate(180deg);
}

.sidebar-submenu {
  list-style: none;
  margin: 2px 0 4px;
  padding: 0;
}

.sidebar-submenu[hidden] { display: none; }

.sidebar-submenu > li { margin-bottom: 1px; }

.sidebar-submenu a {
  padding: 5px var(--space-4) 5px calc(var(--space-4) + 30px) !important;
  font-size: 12px;
}

/* --- Module Header (shown when module active) --- */

.module-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-2) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.module-icon {
  width: 36px;
  height: 36px;
  margin-top: 2px;
  background: var(--color-icon-bg-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

[data-theme="dark"] .module-icon {
  background: var(--color-icon-bg-dark);
}

.module-icon svg,
.module-icon [data-lucide] {
  color: var(--color-vivid-blue);
  width: 18px;
  height: 18px;
}

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

.module-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1.35;
  color: var(--color-foreground);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.module-category {
  font-size: 10px;
  color: var(--color-foreground-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* --- Sidebar Spacer (push bottom down) --- */

.sidebar-spacer {
  flex: 1;
}

/* --- Sidebar Bottom Section --- */

.sidebar-bottom {
  padding: var(--space-3) var(--space-3);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* Credits Widget — Horizontal with circular ring */

.sidebar-credits {
  position: relative; /* anchor for .sidebar-credits__audit popover */
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
  cursor: help;
}

[data-theme="dark"] .sidebar-credits {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--color-border);
}

.sidebar-credits__left {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.sidebar-credits__count {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-foreground);
  line-height: 1;
}

.sidebar-credits__label {
  font-size: 10px;
  color: var(--color-foreground-muted);
  line-height: 1.3;
}

.sidebar-credits__upgrade {
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  color: var(--color-vivid-blue);
  text-decoration: none;
  margin-top: 2px;
}

.sidebar-credits__upgrade:hover {
  text-decoration: underline;
}

/* Circular Progress Ring */

.sidebar-credits__ring {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.sidebar-credits__svg {
  width: 100%;
  height: 100%;
}

/* Audit popover — opens to the right of the sidebar widget on hover/focus.
   Uses position: fixed (not absolute) so it escapes .app-sidebar's
   overflow: hidden. Bottom is set dynamically by CreditDisplay.js to
   align with the widget; left is anchored to the sidebar's right edge
   (.app-sidebar is 220px wide, see .app-sidebar rule above). */

.sidebar-credits__audit {
  position: fixed;
  bottom: 80px; /* JS overrides this on first reveal to track widget */
  left: calc(220px + var(--space-2));
  width: 280px;
  max-height: 360px;
  overflow-y: auto;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 1100; /* above .app-sidebar (1055) */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-4px);
  transition: opacity 120ms ease-out, transform 120ms ease-out, visibility 0s linear 120ms;
  cursor: default;
}

.sidebar-credits:hover .sidebar-credits__audit,
.sidebar-credits:focus-within .sidebar-credits__audit,
.sidebar-credits__audit:hover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
  transition-delay: 0s;
}

/* Invisible bridge across the 8px gap between the widget and the popover —
   prevents the cursor from losing :hover state mid-transit. */

.sidebar-credits__audit::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 0;
  bottom: 0;
  width: 10px;
}

[data-theme="dark"] .sidebar-credits__audit {
  background: rgba(20, 20, 24, 0.98);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.sidebar-credits__audit-header {
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-foreground-muted);
  margin-bottom: var(--space-2);
}

.sidebar-credits__audit-math {
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-foreground);
}

.sidebar-credits__audit-math-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
}

.sidebar-credits__audit-math-row--total {
  font-weight: var(--font-weight-bold);
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-1);
  padding-top: var(--space-1);
}

.sidebar-credits__audit-math-label {
  color: var(--color-foreground-muted);
}

.sidebar-credits__audit-divider {
  height: 1px;
  background: var(--color-border);
  margin: var(--space-2) 0;
}

.sidebar-credits__audit-section-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-foreground-muted);
  margin-bottom: var(--space-1);
}

.sidebar-credits__audit-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.sidebar-credits__audit-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  font-size: 12px;
  color: var(--color-foreground);
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  border: none;
  text-align: left;
}

.sidebar-credits__audit-row:hover,
.sidebar-credits__audit-row:focus-visible {
  background: var(--color-background-muted, rgba(0, 0, 0, 0.04));
  outline: none;
}

.sidebar-credits__audit-row[disabled] {
  cursor: default;
  color: var(--color-foreground-muted);
}

.sidebar-credits__audit-row[disabled]:hover {
  background: transparent;
}

.sidebar-credits__audit-row-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}

.sidebar-credits__audit-row-title {
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-credits__audit-row-date {
  font-size: 10px;
  color: var(--color-foreground-muted);
}

.sidebar-credits__audit-row-amount {
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-weight-medium);
  flex-shrink: 0;
}

.sidebar-credits__audit-row-amount--debit {
  color: var(--color-foreground);
}

.sidebar-credits__audit-row-amount--credit {
  color: var(--color-success, #10B981);
}

.sidebar-credits__audit-empty {
  font-size: 11px;
  color: var(--color-foreground-muted);
  font-style: italic;
  padding: var(--space-2) 0;
  text-align: center;
}

.sidebar-credits__audit-footer {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
  font-size: 11px;
  color: var(--color-foreground-muted);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-credits__audit-viewall {
  color: var(--color-vivid-blue);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
}

.sidebar-credits__audit-viewall:hover {
  text-decoration: underline;
}

.sidebar-credits__audit-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 5px;
  border-radius: var(--radius-sm, 4px);
  vertical-align: middle;
  margin-left: 4px;
}

.sidebar-credits__audit-badge--bad {
  background: rgba(231, 49, 52, 0.12);
  color: #E73134;
}

.sidebar-credits__audit-badge--neutral {
  background: rgba(245, 158, 11, 0.12);
  color: #B45309;
}

.sidebar-credits__audit-badge--good {
  background: rgba(16, 185, 129, 0.12);
  color: var(--color-success, #10B981);
}

[data-theme="dark"] .sidebar-credits__audit-badge--bad {
  background: rgba(231, 49, 52, 0.18);
}

[data-theme="dark"] .sidebar-credits__audit-badge--neutral {
  background: rgba(245, 158, 11, 0.2);
  color: #FCD34D;
}

[data-theme="dark"] .sidebar-credits__audit-badge--good {
  background: rgba(16, 185, 129, 0.22);
}

.sidebar-credits__audit-row-amount--zero {
  color: var(--color-foreground-muted);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.sidebar-credits__audit-row--info {
  cursor: help;
}

.sidebar-credits__audit-row--info:hover,
.sidebar-credits__audit-row--info:focus-visible {
  background: var(--color-background-muted, rgba(0, 0, 0, 0.04));
  outline: none;
}

/* Sidebar Auth Controls */

.sidebar-auth {
  margin-bottom: var(--space-2);
}

.sidebar-auth #auth-container {
  flex-direction: column;
  width: 100%;
}

.sidebar-auth #sign-in-btn {
  width: 100%;
  justify-content: center;
  border-radius: var(--radius-full);
}

.sidebar-auth #user-menu {
  width: 100%;
}

.sidebar-auth #user-menu-button {
  width: 100%;
  justify-content: flex-start;
}

.sidebar-auth #credit-display-container {
  display: none; /* Credits already shown in sidebar widget */
}

/* Bottom Links (Settings, Help) */

.sidebar-bottom__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  color: var(--color-foreground-muted);
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-radius: 0;
  transition: all var(--transition-normal);
}

.sidebar-bottom__link:hover {
  color: var(--color-foreground);
  background-color: var(--color-muted);
}

.sidebar-bottom__link svg,
.sidebar-bottom__link [data-lucide] {
  width: 16px;
  height: 16px;
  opacity: 0.6;
}

/* ==========================================================================
   CONTENT PAGE - Offset for permanent sidebar on desktop
   ========================================================================== */

.content-page {
  margin-left: 220px;
  padding-top: 64px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin-left var(--transition-normal);
  background-color: var(--color-background);
  position: relative;
  z-index: 1;
}

/* Topbar spans FULL width — logo left, controls right */

.topbar-custom {
  left: 0;
}

/* Content inner area — zero outer padding. All vertical/horizontal breathing
   room comes from the individual view wrappers (.pr-shell for reports,
   .know-chat-panel for chat, .view-container for list pages) so there's
   only one padding layer at any point — no competing outer+inner stack. */

.content {
  flex: 1;
  padding: 0;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  /* overflow-x: clip keeps the horizontal clip without creating an implicit
     Y-scroll container (as `hidden` would), so position: sticky inside plan
     reports resolves to the viewport and the tabs actually stick. */
  overflow-x: clip;
  background-color: transparent;
  margin-top: 0;
}

[data-theme="dark"] .content {
  background-color: #141414;
}

[data-theme="dark"] .content-page {
  background-color: #0A0A0A;
}

@media (min-width: 768px) {
  .content {
    padding: 0;
  }
}

@media (min-width: 1024px) {
  .content {
    padding: 0;
  }
}

/* Breadcrumbs Container */

#breadcrumbs-container {
  padding-top: var(--space-2);
  margin-bottom: var(--space-4);
  padding-left: var(--space-6);
  padding-right: var(--space-6);
  clear: both;
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  overflow: hidden;
}

@media (min-width: 768px) {
  #breadcrumbs-container {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
    max-width: 1200px;
  }
}

@media (min-width: 1024px) {
  #breadcrumbs-container {
    padding-left: var(--space-10);
    padding-right: var(--space-10);
    max-width: 1400px;
  }
}

#breadcrumbs-container .breadcrumb {
  margin-left: 0;
  padding-left: 0;
  padding-right: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

/* ==========================================================================
   FOOTER - Matching website footer style (Light & Dark Mode)
   ========================================================================== */

.footer {
  background-color: #0A0A0A;
  border-top: none;
  padding: var(--space-4) var(--space-6);
}

[data-theme="dark"] .footer {
  background-color: #0A0A0A;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.footer-left {
  display: flex;
  align-items: center;
}

.footer-copyright {
  font-size: var(--font-size-sm);
  color: var(--color-foreground-muted);
  margin: 0;
}

[data-theme="dark"] .footer-copyright {
  color: var(--color-foreground-muted);
}

.footer-right {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* API Mode Indicator - Subtle badge style */

.api-mode-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--color-foreground);
  transition: background-color var(--transition-normal);
}

.api-mode-indicator:hover {
  background: var(--color-gray-100);
}

[data-theme="dark"] .api-mode-indicator {
  background: var(--color-gray-800);
  border-color: var(--color-border);
  color: var(--color-foreground);
}

[data-theme="dark"] .api-mode-indicator:hover {
  background: var(--color-gray-700);
}

.api-mode-indicator svg,
.api-mode-indicator [data-lucide] {
  width: 14px;
  height: 14px;
  opacity: 0.7;
}

.api-mode-indicator.live-mode {
  background: rgba(3, 191, 164, 0.2);
  border-color: rgba(3, 191, 164, 0.4);
  color: var(--color-evergreen);
}

[data-theme="dark"] .api-mode-indicator.live-mode {
  background: rgba(3, 191, 164, 0.15);
  border-color: rgba(3, 191, 164, 0.3);
  color: var(--color-evergreen);
}

.footer-version {
  font-size: var(--font-size-xs);
  color: var(--color-foreground-muted);
}

[data-theme="dark"] .footer-version {
  color: var(--color-foreground-muted);
}

/* ==========================================================================
   RESPONSIVE - Sidebar mobile behavior
   ========================================================================== */

@media (max-width: 767px) {
  .app-sidebar {
    transform: translateX(-100%);
    box-shadow: var(--shadow-xl);
    width: min(85vw, 600px); /* Wider sidebar on mobile — fills most of the screen */
  }
  
  body.sidebar-open .app-sidebar {
    transform: translateX(0);
  }
  
  body.sidebar-open {
    overflow: hidden;
  }
  
  .content-page {
    margin-left: 0;
  }
  
  .topbar-custom {
    left: 0;
  }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
  .topbar-custom {
    padding: var(--space-2);
  }
  
  .topbar-inner {
    padding: 0 var(--space-3);
  }
  
  .topbar-logo-img {
    height: 28px;
  }
  
  .topbar-right {
    gap: var(--space-1);
  }
  
  /* Hide theme toggle label on mobile */
  .theme-toggle-label {
    display: none;
  }
  
  /* Credit display - smaller text, hide "credits" word on very small screens */
  .credit-display span {
    font-size: var(--font-size-xs);
  }
  
  .credit-display .fa-coins {
    font-size: 12px;
  }
  
  /* User menu button - compact on mobile */
  #user-menu-button {
    padding: var(--space-1) var(--space-2);
    min-width: auto;
    max-width: none;
  }
  
  #user-menu-button #user-icon-fallback {
    width: 16px;
    height: 16px;
  }
  
  /* Keep dropdown arrow visible on tablet, only hide on very small screens */
  #user-menu-button.dropdown-toggle::after {
    display: inline-block !important;
    margin-left: var(--space-1);
  }
  
  /* Auth container - prevent overflow */
  #auth-container {
    gap: var(--space-1);
    min-width: 0;
    flex-shrink: 1;
  }
  
  /* Ensure dropdowns appear above everything on mobile */
  .dropdown-menu {
    z-index: 1060 !important;
  }
  
  .dropdown {
    z-index: 1060 !important;
  }
  
  .content {
    /* Zero outer padding on mobile too — view wrappers own the gutter. */
    padding: 0;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }
  
  /* Breadcrumbs - Mobile-specific fixes */
  #breadcrumbs-container {
    padding-left: var(--space-4); /* Match content padding */
    padding-right: var(--space-4); /* Match content padding */
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }
  
  #breadcrumbs-container .breadcrumb {
    padding-left: 0;
    padding-right: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }
  
  /* Breadcrumb items - truncate long text on mobile */
  .breadcrumb-item {
    flex-shrink: 1; /* Allow items to shrink */
    min-width: 0; /* Allow flex items to shrink below content size */
    max-width: 100%; /* Don't exceed container */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  /* Breadcrumb item text - ensure truncation */
  .breadcrumb-item a,
  .breadcrumb-item span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    display: inline-block;
  }
  
  /* Breadcrumb separator - ensure it doesn't break layout */
  .breadcrumb-item + .breadcrumb-item::before {
    flex-shrink: 0; /* Separator should never shrink */
  }
  
  .footer-inner {
    flex-direction: column;
    text-align: center;
  }
  
  .footer-right {
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .topbar-inner {
    padding: 0 var(--space-2);
  }
  
  .topbar-right {
    gap: var(--space-1);
  }
  
  /* Credit display - show only number on very small screens */
  .credit-display .credit-label {
    display: none; /* Hide "credits" text on very small screens */
  }
  
  .credit-display .credit-amount {
    display: inline;
  }
  
  /* Make credit display more compact */
  .credit-display {
    font-size: var(--font-size-xs);
  }
  
  /* User menu - icon only on very small screens */
  #user-menu-button {
    min-width: 36px;
    max-width: 36px;
    padding: var(--space-1);
  }
  
  #user-menu-button #user-icon-fallback {
    width: 14px;
    height: 14px;
  }
  
  /* Hide dropdown arrow only on very small screens to save space */
  #user-menu-button.dropdown-toggle::after {
    display: none !important;
  }
  
  /* Credit display container - ensure it doesn't overflow */
  #credit-display-container {
    max-width: 80px; /* Limit width on very small screens */
  }
  
  .credit-display {
    font-size: 10px;
  }
  
  .credit-display .fa-coins {
    font-size: 10px;
  }
  
  /* Ensure dropdowns appear above everything on very small screens */
  .dropdown-menu {
    z-index: 1060 !important;
    position: absolute !important;
  }
  
  .dropdown {
    z-index: 1060 !important;
    position: relative !important;
  }
  
  /* Help button - smaller on mobile */
  .btn-icon-ghost {
    width: 32px;
    height: 32px;
  }
  
  .btn-icon-ghost svg,
  .btn-icon-ghost [data-lucide] {
    width: 16px;
    height: 16px;
  }
  
  /* Theme toggle - smaller on mobile */
  .theme-toggle {
    padding: var(--space-1);
  }
  
  .theme-toggle-track {
    width: 40px;
    height: 20px;
  }
  
  .theme-toggle-knob {
    width: 14px;
    height: 14px;
  }
  
  [data-theme="dark"] .theme-toggle-knob {
    transform: translateX(20px);
  }
}

/* 4. Components (alphabetical) */

/* ==========================================================================
   AGENT TABS STYLES - Light & Dark Mode Support
   ========================================================================== */

.agent-tabs-container {
  margin-bottom: var(--space-6);
}

.nav-tabs .nav-link {
  color: var(--color-foreground-muted);
  transition: all var(--transition-normal) var(--ease-standard);
}

.nav-tabs .nav-link:hover {
  color: var(--color-vivid-blue);
}

.nav-tabs .nav-link.active {
  color: var(--color-vivid-blue);
  border-bottom-color: var(--color-vivid-blue);
}

/* Dark Mode */

[data-theme="dark"] .nav-tabs .nav-link {
  color: var(--color-foreground-muted);
}

[data-theme="dark"] .nav-tabs .nav-link:hover {
  color: var(--color-vivid-blue);
}

[data-theme="dark"] .nav-tabs .nav-link.active {
  color: var(--color-vivid-blue);
  border-bottom-color: var(--color-vivid-blue);
}

/* ==========================================================================
   AURUM LOGO LOOP
   Branded focal loader. Ported from
   `Aurum AI Labs Logo Animations/animated-logo-loop-light.html`, stripped of
   demo chrome, theme-aware via [data-theme].

   Component markup is injected by AurumLogoLoop.js:

     .aurum-logo-loop
       .aurum-logo-loop__glow
       .aurum-logo-loop__stage
         canvas.aurum-logo-loop__dots
         svg.aurum-logo-loop__svg
           (bg circle, gold group, blue mark, shimmer)
   ========================================================================== */

.aurum-logo-loop {
  --aurum-logo-size: 280px;
  --aurum-logo-glow-size: calc(var(--aurum-logo-size) * 1.21); /* ~340px when size=280 */
  --aurum-logo-glow-color-a: rgba(238, 195, 90, 0.15);
  --aurum-logo-glow-color-b: rgba(29, 117, 206, 0.1);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--aurum-logo-size);
  height: var(--aurum-logo-size);
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

/* Dark theme tones the glow down slightly, matching the dark asset. */

[data-theme="dark"] .aurum-logo-loop {
  --aurum-logo-glow-color-a: rgba(238, 195, 90, 0.12);
  --aurum-logo-glow-color-b: rgba(29, 117, 206, 0.08);
}

/*
 * Background disc fill. SVG markup hardcodes fill="white" (matches the dark
 * asset where white-on-black reads well); on light surfaces that disappears
 * into the page, so flip to a dark navy in light mode. CSS `fill` overrides
 * the SVG attribute.
 */

.aurum-logo-loop__bg-circle { fill: #0b1220; }

[data-theme="dark"] .aurum-logo-loop__bg-circle { fill: #ffffff; }

.aurum-logo-loop__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--aurum-logo-glow-size);
  height: var(--aurum-logo-glow-size);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    var(--aurum-logo-glow-color-a) 0%,
    var(--aurum-logo-glow-color-b) 40%,
    transparent 70%
  );
  filter: blur(40px);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
  z-index: 0;
}

.aurum-logo-loop__stage {
  position: relative;
  width: var(--aurum-logo-size);
  height: var(--aurum-logo-size);
  z-index: 1;
}

/*
 * Canvas sits ON TOP of the SVG — not the other way round. The SVG draws a
 * solid-white bg circle that grows to fill the full viewBox; if the canvas
 * were underneath, the converging dots (meant to sparkle over the white disc)
 * would be hidden. Matches the original demo layering.
 */

.aurum-logo-loop__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  z-index: 2;
}

.aurum-logo-loop__dots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
}

/* Honor reduced-motion: show the fully-rendered logo without the sweep. */

@media (prefers-reduced-motion: reduce) {
  .aurum-logo-loop__dots { display: none; }
  .aurum-logo-loop__glow { opacity: 0.6 !important; }
  .aurum-logo-loop__blue { opacity: 1 !important; }
  .aurum-logo-loop__gold {
    opacity: 1 !important;
    transform: none !important;
  }
  .aurum-logo-loop__shimmer { display: none; }
  .aurum-logo-loop__bg-circle { r: 256 !important; opacity: 1 !important; }
}

/* ==========================================================================
   AVATAR COMPONENT
   ========================================================================== */

.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}

/* Sizes */

.avatar-sm {
  width: 32px;
  height: 32px;
}

.avatar-md {
  width: 40px;
  height: 40px;
}

.avatar-lg {
  width: 48px;
  height: 48px;
}

.avatar-xl {
  width: 64px;
  height: 64px;
}

/* Image */

.avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* Fallback */

.avatar-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-muted);
  color: var(--color-muted-foreground);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
}

.avatar-sm .avatar-fallback {
  font-size: 12px;
}

.avatar-lg .avatar-fallback,
.avatar-xl .avatar-fallback {
  font-size: var(--font-size-base);
}

/* Status Indicator */

.avatar-status {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-background);
}

.avatar-status-online {
  background-color: var(--color-success);
}

.avatar-status-offline {
  background-color: var(--color-gray-400);
}

.avatar-status-busy {
  background-color: var(--color-error);
}

.avatar-status-away {
  background-color: var(--color-warning);
}

/* Dark Mode */

[data-theme="dark"] .avatar-fallback {
  background: var(--color-gray-800);
  color: var(--color-foreground);
}

[data-theme="dark"] .avatar-status {
  border-color: var(--color-background);
}

[data-theme="dark"] .avatar-status-offline {
  background-color: var(--color-gray-500);
}

/* ==========================================================================
   BADGE STYLES - Brand-aligned (Pill Shape by Default)
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-full); /* Pill shape by default (matching website) */
}

.badge-sm {
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
}

.badge-md {
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-sm);
}

.badge-lg {
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-base);
}

/* Badge Variants */

.badge-primary {
  background-color: var(--color-vivid-blue);
  color: var(--color-white);
}

.badge-success {
  background-color: var(--color-success);
  color: var(--color-white);
}

.badge-warning {
  background-color: var(--color-warning);
  color: var(--color-black);
}

.badge-danger {
  background-color: var(--color-error);
  color: var(--color-white);
}

.badge-secondary {
  background-color: var(--color-muted);
  color: var(--color-foreground);
}

.badge-outline {
  background-color: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-foreground);
}

/* Dark Mode */

[data-theme="dark"] .badge-primary {
  background-color: var(--color-vivid-blue);
  color: var(--color-white);
}

[data-theme="dark"] .badge-success {
  background-color: var(--color-success);
  color: var(--color-white);
}

[data-theme="dark"] .badge-warning {
  background-color: var(--color-warning);
  color: var(--color-black);
}

[data-theme="dark"] .badge-danger {
  background-color: var(--color-error);
  color: var(--color-white);
}

[data-theme="dark"] .badge-secondary {
  background-color: var(--color-muted);
  color: var(--color-foreground);
}

[data-theme="dark"] .badge-outline {
  background-color: transparent;
  border-color: var(--color-border);
  color: var(--color-foreground);
}

/* Legacy support - badge-pill class (now default, but kept for compatibility) */

.badge-pill {
  border-radius: var(--radius-full);
}

/* ==========================================================================
   BUTTON COMPONENT - All Variants and Sizes
   ========================================================================== */

/* Base Button - All buttons are pill-shaped for brand consistency */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-full);
  transition: all var(--transition-normal);
  cursor: pointer;
  border: none;
  text-decoration: none;
  white-space: nowrap;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

/* Button Sizes */

.btn-sm {
  height: 36px;
  min-width: 80px;
  padding: 0 var(--space-4);
  font-size: var(--font-size-sm);
}

.btn,
.btn-md {
  height: 44px;
  min-width: 100px;
  padding: 0 var(--space-6);
  font-size: var(--font-size-base);
}

.btn-lg {
  height: 52px;
  min-width: 120px;
  padding: 0 var(--space-8);
  font-size: var(--font-size-lg);
}

.btn-xl {
  height: 56px;
  min-width: 140px;
  padding: 0 var(--space-10);
  font-size: var(--font-size-lg);
}

/* Button Variants */

.btn-primary {
  background: var(--color-vivid-blue);
  color: white;
  box-shadow: var(--shadow-blue);
  border: 2px solid transparent;
}

.btn-primary:hover {
  background: white;
  color: var(--color-vivid-blue);
  border: 2px solid var(--color-vivid-blue);
  box-shadow: var(--shadow-blue-hover);
  transform: translateY(-2px);
}

/* Icon color inherits from button text color */

.btn-primary:hover i,
.btn-primary:hover svg,
.btn-primary:hover [class*="fa-"] {
  color: var(--color-vivid-blue);
}

[data-theme="dark"] .btn-primary:hover {
  background: var(--color-gray-900);
  color: var(--color-vivid-blue);
  border-color: var(--color-vivid-blue);
}

[data-theme="dark"] .btn-primary:hover i,
[data-theme="dark"] .btn-primary:hover svg,
[data-theme="dark"] .btn-primary:hover [class*="fa-"] {
  color: var(--color-vivid-blue);
}

.btn-secondary {
  background: transparent;
  border: 2px solid var(--color-vivid-blue);
  color: var(--color-vivid-blue);
  transition: all var(--transition-normal);
}

/* Secondary button icons - blue in normal state */

.btn-secondary i,
.btn-secondary svg,
.btn-secondary [class*="fa-"] {
  color: var(--color-vivid-blue);
  transition: color var(--transition-normal);
}

.btn-secondary:hover {
  background: white;
  color: var(--color-vivid-blue);
  border-color: var(--color-vivid-blue);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(4, 102, 200, 0.2);
}

/* Secondary button icons on hover - stay blue */

.btn-secondary:hover i,
.btn-secondary:hover svg,
.btn-secondary:hover [class*="fa-"] {
  color: var(--color-vivid-blue);
}

[data-theme="dark"] .btn-secondary:hover {
  background: var(--color-gray-900);
  color: var(--color-vivid-blue);
  border-color: var(--color-vivid-blue);
}

[data-theme="dark"] .btn-secondary:hover i,
[data-theme="dark"] .btn-secondary:hover svg,
[data-theme="dark"] .btn-secondary:hover [class*="fa-"] {
  color: var(--color-vivid-blue);
}

.btn-success {
  background: var(--color-evergreen);
  color: white;
}

.btn-success:hover {
  box-shadow: var(--shadow-success);
  transform: translateY(-2px);
}

.btn-destructive {
  background: var(--color-dark-red);
  color: white;
}

.btn-destructive:hover {
  box-shadow: var(--shadow-error);
  transform: translateY(-2px);
}

.btn-special {
  background: var(--color-yellow);
  color: black;
}

.btn-special:hover {
  box-shadow: var(--shadow-yellow);
  transform: translateY(-2px);
}

.btn-outline {
  background: transparent;
  border: 2px solid var(--color-vivid-blue);
  color: var(--color-vivid-blue);
}

.btn-outline:hover {
  background: rgba(4, 102, 200, 0.05);
}

/* Danger outline — same always-visible pill as .btn-outline, in the error color */

.btn-outline-danger {
  background: transparent;
  border: 2px solid var(--color-error);
  color: var(--color-error);
}

.btn-outline-danger:hover {
  background: var(--color-error);
  color: #fff;
}

.btn-ghost {
  background: transparent;
  color: var(--color-foreground);
  border: none;
}

.btn-ghost:hover {
  background: rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.05);
}

.btn-link {
  background: transparent;
  color: var(--color-vivid-blue);
  border: none;
  text-decoration: none;
  min-width: auto;
}

.btn-link:hover {
  text-decoration: underline;
}

/* Button Radius Variants - Reusable Classes */

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

.btn-rounded-sm,
.btn.btn-rounded-sm {
  border-radius: var(--radius-sm);
}

.btn-rounded-lg,
.btn.btn-rounded-lg {
  border-radius: var(--radius-lg);
}

.btn-rounded-xl,
.btn.btn-rounded-xl {
  border-radius: var(--radius-xl);
}

/* Reusable CTA Button Variants */

.cta-button {
  height: 44px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.cta-button-primary {
  background: var(--color-vivid-blue);
  border: 1px solid var(--color-vivid-blue);
  color: white;
  box-shadow: var(--shadow-blue);
}

.cta-button-primary:hover:not(:disabled) {
  background: white;
  color: var(--color-vivid-blue);
  border-color: var(--color-vivid-blue);
  box-shadow: var(--shadow-blue-hover);
  transform: translateY(-2px);
}

[data-theme="dark"] .cta-button-primary:hover:not(:disabled) {
  background: var(--color-gray-900);
  color: var(--color-vivid-blue);
  border-color: var(--color-vivid-blue);
}

.cta-button-outline {
  background: rgba(4, 102, 200, 0.05);
  border: 1px solid rgba(4, 102, 200, 0.3);
  color: var(--color-vivid-blue);
}

.cta-button-outline:hover:not(:disabled) {
  background: var(--color-vivid-blue);
  border-color: var(--color-vivid-blue);
  color: white;
  box-shadow: var(--shadow-blue-hover);
  transform: translateY(-2px);
}

[data-theme="dark"] .cta-button-outline {
  background: rgba(4, 102, 200, 0.1);
  border-color: rgba(4, 102, 200, 0.4);
}

/* Icon Buttons */

.btn-icon {
  width: 40px;
  height: 40px;
  min-width: auto;
  padding: 0;
  justify-content: center;
}

.btn-icon-sm {
  width: 36px;
  height: 36px;
}

.btn-icon-lg {
  width: 52px;
  height: 52px;
}

/* Button States */

.btn:disabled,
.btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn:active {
  transform: scale(0.98);
}

.btn-loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.btn-loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  margin-left: -8px;
  margin-top: -8px;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: var(--radius-full);
  animation: btn-spin 0.6s linear infinite;
}

@keyframes btn-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Button Group */

.btn-group {
  display: inline-flex;
  gap: var(--space-2);
}

.btn-group .btn {
  margin: 0;
}

/* Full Width */

.btn-block {
  width: 100%;
  display: flex;
}

/* ==========================================================================
   BOOTSTRAP OVERRIDES - Ensure custom styling takes precedence
   ========================================================================== */

/* Bootstrap Outline Primary - for option buttons */

.btn.btn-outline-primary {
  background: transparent;
  border: 2px solid var(--color-vivid-blue);
  color: var(--color-vivid-blue);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-full);
}

.btn.btn-outline-primary:hover {
  background: rgba(4, 102, 200, 0.1);
  border-color: var(--color-vivid-blue);
  color: var(--color-vivid-blue);
  transform: translateY(-2px);
}

.btn.btn-outline-primary.active,
.btn.btn-outline-primary:active {
  background: var(--color-vivid-blue);
  border-color: var(--color-vivid-blue);
  color: white;
}

[data-theme="dark"] .btn.btn-outline-primary {
  border-color: var(--color-vivid-blue);
  color: var(--color-vivid-blue);
}

[data-theme="dark"] .btn.btn-outline-primary:hover {
  background: rgba(4, 102, 200, 0.2);
}

[data-theme="dark"] .btn.btn-outline-primary.active {
  background: var(--color-vivid-blue);
  color: white;
}

/* Bootstrap Primary - solid buttons */

.btn.btn-primary {
  background: var(--color-vivid-blue);
  border: 2px solid transparent;
  color: white;
  border-radius: var(--radius-full);
}

.btn.btn-primary:hover:not(:disabled) {
  background: white;
  color: var(--color-vivid-blue);
  border: 2px solid var(--color-vivid-blue);
  transform: translateY(-2px);
  box-shadow: var(--shadow-blue-hover);
}

/* Icon color on hover for Bootstrap primary buttons */

.btn.btn-primary:hover:not(:disabled) i,
.btn.btn-primary:hover:not(:disabled) svg,
.btn.btn-primary:hover:not(:disabled) [class*="fa-"] {
  color: var(--color-vivid-blue);
}

[data-theme="dark"] .btn.btn-primary:hover:not(:disabled) {
  background: var(--color-gray-900);
  color: var(--color-vivid-blue);
  border-color: var(--color-vivid-blue);
}

[data-theme="dark"] .btn.btn-primary:hover:not(:disabled) i,
[data-theme="dark"] .btn.btn-primary:hover:not(:disabled) svg,
[data-theme="dark"] .btn.btn-primary:hover:not(:disabled) [class*="fa-"] {
  color: var(--color-vivid-blue);
}

.btn.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* W-100 full width buttons */

.btn.w-100 {
  width: 100%;
}

/* Filter buttons (Completed/All) - Pill-shaped for consistency with module buttons */

.filter-controls .btn.btn-sm,
.filter-controls .btn.btn-primary,
.filter-controls .btn.btn-outline-primary {
  border-radius: var(--radius-full);
}

/* Breadcrumb styling */

.breadcrumb {
  background: transparent;
  padding: 0;
  margin: 0;
  margin-left: 0; /* Ensure no left margin */
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden; /* Prevent overflow on mobile */
}

.breadcrumb-item {
  display: flex;
  align-items: center;
  flex-shrink: 1; /* Allow items to shrink on mobile */
  min-width: 0; /* Allow flex items to shrink below content size */
  overflow: hidden; /* Hide overflow text */
  text-overflow: ellipsis; /* Show ellipsis for long text */
  white-space: nowrap; /* Prevent wrapping within item */
}

/* Breadcrumb item links and text - ensure truncation */

.breadcrumb-item a,
.breadcrumb-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  display: block;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: "/";
  color: var(--color-foreground-muted);
  padding: 0 var(--space-2);
  font-weight: var(--font-weight-normal);
}

.breadcrumb-item a {
  color: var(--color-vivid-blue);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.breadcrumb-item a:hover {
  color: var(--color-medium-blue);
  text-decoration: underline;
}

.breadcrumb-item.active {
  color: var(--color-foreground-muted);
}

[data-theme="dark"] .breadcrumb-item.active {
  color: var(--color-gray-300);
}

/* Platform Dropdown - Theme-Aware Styling */

.topbar-right .btn-outline-light,
.topbar-right .dropdown-toggle {
  border-color: var(--color-border);
  color: var(--color-foreground);
  background: transparent;
}

.topbar-right .btn-outline-light:hover,
.topbar-right .dropdown-toggle:hover {
  background: var(--color-muted);
  border-color: var(--color-gray-300);
}

[data-theme="dark"] .topbar-right .btn-outline-light,
[data-theme="dark"] .topbar-right .dropdown-toggle {
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--color-foreground);
  background: transparent;
}

[data-theme="dark"] .topbar-right .btn-outline-light:hover,
[data-theme="dark"] .topbar-right .dropdown-toggle:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.3);
}

/* ==========================================================================
   CARD COMPONENT - All Variants and Sizes
   Aligned with aurumai-website-frontend design patterns
   ========================================================================== */

/* Base Card */

.card {
  background: var(--color-card);
  color: var(--color-foreground);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: all var(--transition-normal);
}

[data-theme="dark"] .card {
  background: var(--color-gray-900);
  border-color: var(--color-border);
}

/* Card Variants */

.card-default {
  background: var(--color-card);
  color: var(--color-foreground);
}

.card-outline {
  background: transparent;
  border: 1px solid var(--color-border);
}

.card-elevated {
  background: var(--color-card);
  box-shadow: var(--shadow-lg);
  border: none;
}

.card-elevated:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

[data-theme="dark"] .card-elevated {
  background: var(--color-gray-900);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.card-accent {
  background: rgba(4, 102, 200, 0.05);
  border: 1px solid rgba(4, 102, 200, 0.2);
}

[data-theme="dark"] .card-accent {
  background: rgba(4, 102, 200, 0.1);
  border-color: rgba(4, 102, 200, 0.3);
}

/* Card Sizes */

.card-sm .card-body {
  padding: var(--space-4);
}

.card-md .card-body,
.card .card-body {
  padding: var(--space-6);
}

.card-lg .card-body {
  padding: var(--space-8);
}

/* Card Subcomponents */

.card-header {
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-border);
  background: transparent;
}

[data-theme="dark"] .card-header {
  background: transparent;
  border-color: var(--color-border);
}

.card-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-snug);
  margin: 0;
  color: var(--color-foreground);
}

.card-text,
.card-description {
  color: var(--color-foreground-muted);
  line-height: var(--leading-relaxed);
  margin-top: var(--space-2);
}

[data-theme="dark"] .card-text,
[data-theme="dark"] .card-description {
  color: var(--color-gray-400);
}

.card-body {
  padding: var(--space-6);
}

.card-footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border);
  background: transparent;
}

[data-theme="dark"] .card-footer {
  background: transparent;
  border-color: var(--color-border);
}

/* Card List Items */

.card .list-unstyled {
  margin: 0;
  padding: 0;
}

.card .list-unstyled li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  color: var(--color-foreground);
  font-size: var(--font-size-sm);
}

.card .list-unstyled li i {
  color: var(--color-vivid-blue);
  width: 20px;
  text-align: center;
}

/* Card with Image */

.card-image,
.card-img-top {
  width: 100%;
  height: auto;
  display: block;
}

.card-img-top {
  border-top-left-radius: calc(var(--radius-xl) - 1px);
  border-top-right-radius: calc(var(--radius-xl) - 1px);
}

/* Clickable Card */

.card-clickable,
.card.h-100 {
  cursor: pointer;
  transition: all var(--transition-normal);
}

.card-clickable:hover,
.card.h-100:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-vivid-blue);
}

[data-theme="dark"] .card-clickable:hover,
[data-theme="dark"] .card.h-100:hover {
  box-shadow: 0 10px 40px rgba(4, 102, 200, 0.2);
}

/* Card Loading State */

.card-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.6;
}

.card-loading::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-background);
  opacity: 0.5;
}

/* Module Cards (Specific) */

.col-md-6.col-lg-4 .card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.col-md-6.col-lg-4 .card .card-body {
  flex: 1;
}

.col-md-6.col-lg-4 .card .card-footer {
  margin-top: auto;
}

/* Alert Cards */

.alert {
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  border: 1px solid;
}

.alert-warning {
  background: rgba(238, 195, 90, 0.1);
  border-color: rgba(238, 195, 90, 0.3);
  color: var(--color-yellow);
}

.alert-danger {
  background: rgba(231, 49, 52, 0.1);
  border-color: rgba(231, 49, 52, 0.3);
  color: var(--color-dark-red);
}

.alert-success {
  background: rgba(3, 191, 164, 0.1);
  border-color: rgba(3, 191, 164, 0.3);
  color: var(--color-evergreen);
}

.alert-info {
  background: rgba(4, 102, 200, 0.1);
  border-color: rgba(4, 102, 200, 0.3);
  color: var(--color-vivid-blue);
}

[data-theme="dark"] .alert-warning,
[data-theme="dark"] .alert-danger,
[data-theme="dark"] .alert-success,
[data-theme="dark"] .alert-info {
  background: rgba(255, 255, 255, 0.05);
}

/* ==========================================================================
   MODULE CARDS - Mini vs Full Analysis Cards
   ========================================================================== */

.module-selector {
  padding: var(--space-4) 0;
}

.module-selector__header {
  text-align: center;
  margin-bottom: var(--space-10);
}

@media (min-width: 768px) {
  .module-selector__header {
    margin-bottom: var(--space-12);
  }
}

.module-selector__title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-foreground);
  margin: 0 0 var(--space-2);
}

.module-selector__subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-foreground-muted);
  margin: 0;
}

.module-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin: 0 auto;
  align-items: stretch; /* Ensure all cards have equal height */
}

@media (min-width: 768px) {
  .module-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
    max-width: 1200px;
    align-items: stretch; /* Ensure equal height cards in 2-column layout */
  }
}

/* Smaller desktop screens - ensure cards don't get too narrow */

@media (min-width: 900px) and (max-width: 1023px) {
  .module-cards-grid {
    gap: var(--space-6); /* Slightly reduce gap for more space */
    max-width: 100%;
    padding: 0 var(--space-4); /* Add padding to prevent edge-to-edge */
  }
}

@media (min-width: 1024px) {
  .module-cards-grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: 1400px;
    align-items: stretch; /* Ensure equal height cards in 3-column layout */
  }
}

/* Base Module Card - Matching website structure */

.module-card {
  background: var(--color-background);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  min-height: 300px;
  height: 100%; /* Ensure cards fill grid cell height */
  display: flex;
  flex-direction: column;
  transition: all 300ms;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  /* Border with 50% opacity matching website border-border/50 */
  border: 1px solid rgba(228, 228, 231, 0.5);
  box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .module-card {
  background: rgba(0, 0, 0, 0.8);
}

@media (min-width: 640px) {
  .module-card {
    min-height: 400px;
  }
}

@media (min-width: 768px) {
  .module-card {
    padding: var(--space-8);
  }
}

/* Smaller desktop screens - reduce padding slightly for more button space */

@media (min-width: 900px) and (max-width: 1023px) {
  .module-card {
    padding: var(--space-6); /* Slightly less padding to give buttons more room */
  }
}

[data-theme="dark"] .module-card {
  background: rgba(0, 0, 0, 0.8);
  border-color: rgba(45, 55, 72, 0.5);
}

.module-card:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-vivid-blue);
}

/* Standard and Featured cards use same base styling - border opacity handled in base */

/* Card Header */

.module-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

/* Card Icon - Matching website w-8 h-8 sm:w-10 sm:h-10 */

.module-card .module-card__icon {
  width: 32px;
  height: 32px;
  background: var(--color-icon-bg-light);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--transition-normal);
}

@media (min-width: 640px) {
  .module-card .module-card__icon {
    width: 40px;
    height: 40px;
  }
}

[data-theme="dark"] .module-card .module-card__icon {
  background: var(--color-icon-bg-dark);
}

.module-card .module-card__icon svg,
.module-card .module-card__icon [data-lucide] {
  width: 20px;
  height: 20px;
  color: var(--color-vivid-blue);
}

/* Card Badge */

.module-card__badge {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.module-card__badge--outline {
  background: rgba(4, 102, 200, 0.1);
  border: 1px solid rgba(4, 102, 200, 0.25);
  color: var(--color-vivid-blue);
}

[data-theme="dark"] .module-card__badge--outline {
  background: rgba(4, 102, 200, 0.2);
  border-color: rgba(4, 102, 200, 0.4);
}

.module-card__badge--ga4-connected {
  background: rgba(3, 191, 164, 0.15);
  border: 1px solid rgba(3, 191, 164, 0.3);
  color: #03BFA4;
}

[data-theme="dark"] .module-card__badge--ga4-connected {
  background: rgba(3, 191, 164, 0.2);
  border-color: rgba(3, 191, 164, 0.4);
}

.module-card__badge--gradient {
  background: rgba(4, 102, 200, 0.1);
  border: 1px solid rgba(4, 102, 200, 0.25);
  color: var(--color-vivid-blue);
}

[data-theme="dark"] .module-card__badge--gradient {
  background: rgba(4, 102, 200, 0.2);
  border-color: rgba(4, 102, 200, 0.4);
}

/* Card Title - Matching website text-base sm:text-lg */

.module-card .module-card__title,
h5.module-card__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-foreground);
  margin: 0 0 var(--space-2) 0;
  line-height: var(--leading-snug);
  transition: color var(--transition-normal);
}

@media (min-width: 640px) {
  .module-card .module-card__title,
  h5.module-card__title {
    font-size: var(--font-size-lg);
  }
}

.module-card:hover .module-card__title {
  color: var(--color-vivid-blue);
}

/* Card Description - Matching website text-xs sm:text-sm */

.module-card .module-card__description,
p.module-card__description {
  font-size: var(--font-size-xs);
  color: var(--color-foreground-muted);
  line-height: var(--leading-relaxed);
  margin: 0;
  margin-bottom: var(--space-2);
}

@media (min-width: 640px) {
  .module-card .module-card__description,
  p.module-card__description {
    font-size: var(--font-size-sm);
  }
}

/* Module Card Additional Sections - Benefits, Input/Output - Equal spacing */

.module-card__benefits,
.module-card__input-sources {
  margin-bottom: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
  flex-shrink: 0; /* Prevent sections from shrinking */
}

/* Ensure consistent spacing between all sections */

.module-card__description {
  margin-bottom: var(--space-2);
  flex-shrink: 0;
}

/* ── Meta rows: Inputs / Best for / Output / Usage ── */

.module-card__meta {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: var(--space-4);
  flex: 1;
}

.module-card__meta-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2) 0 var(--space-1);
  border-top: 1px solid var(--color-border);
}

.module-card__meta-label {
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-foreground-muted);
  text-transform: capitalize;
}

.module-card__meta-value {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-foreground);
  line-height: var(--leading-snug);
}

[data-theme="dark"] .module-card__meta-row {
  border-top-color: rgba(255,255,255,0.08);
}

/* Note: margin-top handled by border-top spacing, no need for additional top margin */

.module-card__section-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-foreground);
  margin-bottom: var(--space-1);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Hover hint for truncated sections */

.module-card__hover-hint {
  font-size: 10px;
  font-weight: var(--font-weight-normal);
  color: var(--color-vivid-blue);
  text-transform: none;
  letter-spacing: normal;
  opacity: 0.8;
}

/* Benefits List with hover tooltip for Output Parameters */

.module-card__benefits {
  position: relative;
  cursor: pointer;
}

.module-card__benefits-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.module-card__benefits-list li {
  font-size: var(--font-size-xs);
  color: var(--color-foreground-muted);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-1);
  padding-left: var(--space-4);
  position: relative;
}

.module-card__benefits-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-evergreen);
  font-weight: var(--font-weight-bold);
}

@media (min-width: 640px) {
  .module-card__benefits-list li {
    font-size: var(--font-size-sm);
  }
}

/* Hover tooltip for Output Parameters on Key Benefits - Light mode default */

.module-card__benefits::after {
  content: "OUTPUT PARAMETERS: " attr(data-outputs);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  right: 0;
  background: #ffffff;
  color: #1a1a2e;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  line-height: var(--leading-relaxed);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(0, 0, 0, 0.1);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  max-width: 100%;
  word-wrap: break-word;
  white-space: normal;
}

/* Dark mode tooltip styling - Using brand color */

[data-theme="dark"] .module-card__benefits::after {
  background: rgba(4, 102, 200, 0.15); /* Brand blue with transparency */
  color: #E2E8F0; /* Light text for contrast */
  border: 1px solid rgba(4, 102, 200, 0.3); /* Brand blue border */
  box-shadow: 0 4px 20px rgba(4, 102, 200, 0.2); /* Brand blue shadow */
  backdrop-filter: blur(8px); /* Subtle blur for depth */
}

.module-card__benefits:hover::after,
.module-card__benefits:focus-within::after {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Mobile touch support for Key Benefits tooltip */

@media (hover: none) and (pointer: coarse) {
  .module-card__benefits:active::after,
  .module-card__benefits.tooltip-active::after {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}

/* Input Parameters & Source - Show full content, no truncation */

.module-card__input-text {
  font-size: var(--font-size-xs);
  color: var(--color-foreground-muted);
  line-height: var(--leading-relaxed);
  margin: 0;
  white-space: normal;
}

.module-card__input-text strong {
  font-weight: var(--font-weight-semibold);
  color: var(--color-foreground);
}

@media (min-width: 640px) {
  .module-card__input-text {
    font-size: var(--font-size-sm);
  }
}

/* Note: Output Parameters now shown as tooltip on Key Benefits hover (see .module-card__benefits::after) */

/* Card Stats - Matching website: Credits (green) on left, Time (blue) on right */

.module-card__stats {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-3);
  margin-bottom: var(--space-2);
  flex-shrink: 0; /* Ensure consistent spacing for equal card heights */
}

@media (min-width: 640px) {
  .module-card__stats {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.module-card__stat-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-foreground-muted);
}

.module-card__stat-item svg,
.module-card__stat-item [data-lucide] {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

@media (min-width: 640px) {
  .module-card__stat-item svg,
  .module-card__stat-item [data-lucide] {
    width: 16px;
    height: 16px;
  }
}

/* Credits - Green on left (matching website) */

.module-card__stat-item--credits {
  color: var(--color-foreground-muted);
}

.module-card__stat-item--credits svg,
.module-card__stat-item--credits [data-lucide] {
  color: var(--color-evergreen);
}

.module-card__stat-label {
  color: var(--color-foreground-muted);
  font-size: var(--font-size-xs);
}

.module-card__stat-value {
  color: var(--color-evergreen);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-xs);
}

/* Time - Blue on right (matching website) */

.module-card__stat-item--time {
  color: var(--color-foreground-muted);
}

.module-card__stat-item--time svg,
.module-card__stat-item--time [data-lucide] {
  color: var(--color-vivid-blue);
}

.module-card__stat-text {
  color: var(--color-foreground-muted);
  font-size: var(--font-size-xs);
}

/* Card Actions Container - Matching website flex layout */

.module-card__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: auto; /* Push buttons to bottom for equal card heights */
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  flex-shrink: 0; /* Prevent buttons from shrinking */
}

.module-card__actions button {
  display: inline-flex;
  visibility: visible;
  opacity: 1;
}

@media (min-width: 640px) {
  .module-card__actions {
    flex-direction: row;
    align-items: stretch;
    gap: var(--space-2);
  }
}

/* Smaller desktop screens - ensure button container has enough space */

@media (min-width: 900px) and (max-width: 1023px) {
  .module-card__actions {
    gap: var(--space-2);
    flex-wrap: nowrap; /* Prevent buttons from wrapping */
  }
}

/* Card Button - Matching website min-h-9 h-9 text-xs sm:text-sm */

.module-card .module-card__button,
button.module-card__button {
  min-height: 36px;
  height: 36px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all 300ms;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: visible; /* Changed from hidden to prevent text clipping */
  white-space: nowrap;
  box-sizing: border-box;
  text-overflow: ellipsis; /* Fallback if text still overflows */
}

@media (min-width: 640px) {
  .module-card .module-card__button,
  button.module-card__button {
    font-size: var(--font-size-sm);
  }
}

/* Primary Button - Matching website button-primary */

.module-card .module-card__button--primary,
button.module-card__button--primary {
  width: 100%;
  background: var(--color-vivid-blue);
  border: 1px solid var(--color-vivid-blue);
  color: white;
  box-shadow: var(--shadow-blue);
}

@media (min-width: 640px) {
  .module-card .module-card__button--primary,
  button.module-card__button--primary {
    flex: 1;
    width: auto;
    min-width: 100px; /* Prevent text truncation on smaller screens */
  }
}

/* Smaller desktop screens (900px - 1024px) - ensure buttons don't truncate */

@media (min-width: 900px) and (max-width: 1023px) {
  .module-card .module-card__button--primary,
  button.module-card__button--primary {
    min-width: 120px; /* Ensure full "Start Analysis" text fits */
    font-size: var(--font-size-xs); /* Keep smaller font */
    padding: 0 var(--space-3); /* Slightly reduce padding */
  }
  
  .module-card .module-card__button--secondary,
  button.module-card__button--secondary {
    min-width: 140px; /* Ensure "View Demo" text fits */
    font-size: var(--font-size-xs);
    padding: 0 var(--space-3);
  }
}

.module-card .module-card__button--primary:hover:not(:disabled),
button.module-card__button--primary:hover:not(:disabled) {
  background: var(--color-medium-blue);
  border-color: var(--color-medium-blue);
  box-shadow: var(--shadow-blue-hover);
  transform: translateY(-2px);
}

/* Secondary Button - Matching website button-secondary */

.module-card .module-card__button--secondary,
button.module-card__button--secondary {
  width: 100%;
  background: transparent;
  border: 2px solid var(--color-vivid-blue);
  color: var(--color-vivid-blue);
}

@media (min-width: 640px) {
  .module-card .module-card__button--secondary,
  button.module-card__button--secondary {
    width: auto;
    min-width: 120px;
    flex-shrink: 0;
  }
}

.module-card .module-card__button--secondary:hover:not(:disabled),
button.module-card__button--secondary:hover:not(:disabled) {
  background: rgba(4, 102, 200, 0.05);
  border-color: var(--color-vivid-blue);
  color: var(--color-vivid-blue);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Button Shine Effect - Matching website button-shine.css */

@keyframes button-shine {
  0% {
    opacity: 0;
    background-position: 200% 0;
  }
  5% {
    opacity: 1;
  }
  30% {
    background-position: -200% 0;
    opacity: 0;
  }
  100% {
    opacity: 0;
    background-position: -200% 0;
  }
}

.module-card .module-card__button--primary::after,
button.module-card__button--primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.08) 25%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.08) 75%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 200% 100%;
  background-position: 200% 0;
  pointer-events: none;
  opacity: 0;
  animation: button-shine 4s infinite;
  transition: all 0.3s ease;
  border-radius: var(--radius-full);
}

.module-card .module-card__button--secondary::after,
button.module-card__button--secondary::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.08) 25%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.08) 75%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 200% 100%;
  background-position: 200% 0;
  pointer-events: none;
  opacity: 0;
  animation: button-shine 4s infinite;
  animation-delay: 1s;
  transition: all 0.3s ease;
  border-radius: var(--radius-full);
}

[data-theme="dark"] .module-card .module-card__button--primary,
[data-theme="dark"] button.module-card__button--primary {
  background: var(--color-vivid-blue);
  border-color: var(--color-vivid-blue);
  color: white;
}

[data-theme="dark"] .module-card .module-card__button--secondary,
[data-theme="dark"] button.module-card__button--secondary {
  background: transparent;
  border-color: var(--color-vivid-blue);
  color: var(--color-vivid-blue);
}

.module-card__button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Landing Page Layout */

.landing-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

@media (min-width: 768px) {
  .landing-page {
    gap: var(--space-16);
  }
}

/* Past Jobs Section */

.past-jobs {
  margin-top: var(--space-4);
}

@media (min-width: 768px) {
  .past-jobs {
    margin-top: var(--space-6);
  }
}

.past-jobs__header {
  margin-bottom: var(--space-6);
}

.past-jobs__title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-foreground);
  margin: 0;
}

.past-jobs__title svg,
.past-jobs__title [data-lucide] {
  width: 24px;
  height: 24px;
  color: var(--color-vivid-blue);
}

/* Jobs List - Add vertical spacing between items */

.jobs-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .jobs-list {
    gap: var(--space-6);
  }
}

/* Responsive Adjustments */

@media (max-width: 767px) {
  .module-cards-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  
  .module-card__stats {
    flex-direction: column;
    gap: var(--space-2);
  }
  
  .landing-page {
    gap: var(--space-8);
  }
  
  .past-jobs {
    margin-top: var(--space-8);
  }
}

/* Job Item */

.job-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-normal);
  margin-bottom: 0; /* Remove any default margin - spacing handled by .jobs-list gap */
}

.job-item:hover {
  border-color: var(--color-vivid-blue);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

[data-theme="dark"] .job-item {
  background: var(--color-gray-900);
}

.job-item__icon {
  width: 40px;
  height: 40px;
  background: var(--color-icon-bg-light);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

[data-theme="dark"] .job-item__icon {
  background: var(--color-icon-bg-dark);
}

.job-item__icon svg,
.job-item__icon [data-lucide] {
  width: 20px;
  height: 20px;
  color: var(--color-vivid-blue);
}

.job-item__content {
  flex: 1;
  min-width: 0;
}

.job-item__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-foreground);
  margin-bottom: var(--space-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.job-item__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-foreground-muted);
}

.job-item__divider {
  color: var(--color-border);
}

.job-item__status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
  flex-shrink: 0;
}

.job-item__time {
  font-size: var(--font-size-xs);
  color: var(--color-foreground-muted);
}

/* Per-row Cancel/Retry actions on the Past Jobs list. The row itself is
   `onclick="viewJob(...)"`, so action buttons live inside .job-item__status
   and stop propagation in JS to avoid bubbling to the row click. */

.job-item__actions {
  display: flex;
  gap: var(--space-2, 0.5rem);
  margin-top: 2px;
}

.job-item__actions .btn-link {
  padding: 0;
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
}

.job-item__actions .ji-cancel-btn {
  color: var(--color-foreground-muted);
}

.job-item__actions .btn-link:hover:not(:disabled) {
  text-decoration: underline;
}

.job-item__actions .btn-link:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Status Badge */

.status-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-full);
  text-transform: capitalize;
}

.status-badge--success {
  background: rgba(3, 191, 164, 0.15);
  color: var(--color-evergreen);
}

.status-badge--primary {
  background: rgba(4, 102, 200, 0.15);
  color: var(--color-vivid-blue);
}

.status-badge--danger {
  background: rgba(231, 49, 52, 0.15);
  color: var(--color-dark-red);
}

.status-badge--secondary {
  background: var(--color-muted);
  color: var(--color-foreground-muted);
}

/* Responsive */

@media (max-width: 640px) {
  .job-item {
    flex-wrap: wrap;
    gap: var(--space-3);
  }
  
  .job-item__status {
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border);
  }
}

/* ==========================================================================
   HOME PAGE - Hero Section & Redesigned Module Cards (Figma Aligned)
   ========================================================================== */

/* --- Home Hero Section --- */

.home-hero {
  text-align: center;
  padding: var(--space-12) var(--space-4) var(--space-8);
  max-width: 800px;
  margin: 0 auto;
}

.home-hero__title {
  font-size: var(--display-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-foreground);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-4);
}

.home-hero__subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-foreground-muted);
  line-height: var(--leading-relaxed);
  margin: 0 0 var(--space-8);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 768px) {
  .home-hero__subtitle {
    font-size: var(--font-size-base);
  }
}

/* Search Bar */

.home-hero__search {
  max-width: 600px;
  margin: 0 auto;
}

.home-hero__search-inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: var(--space-3) var(--space-5);
  transition: all var(--transition-normal);
  box-shadow: var(--shadow-sm);
}

.home-hero__search-inner:focus-within {
  border-color: var(--color-vivid-blue);
  box-shadow: 0 0 0 4px rgba(4, 102, 200, 0.12);
}

[data-theme="dark"] .home-hero__search-inner {
  background: var(--color-card);
  border-color: var(--color-border);
}

[data-theme="dark"] .home-hero__search-inner:focus-within {
  border-color: var(--color-vivid-blue);
  box-shadow: 0 0 0 4px rgba(4, 102, 200, 0.2);
}

.home-hero__search-icon {
  width: 18px;
  height: 18px;
  color: var(--color-foreground-muted);
  flex-shrink: 0;
}

.home-hero__search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  color: var(--color-foreground);
  padding: var(--space-1) 0;
}

.home-hero__search-input::-moz-placeholder {
  color: var(--color-foreground-muted);
  opacity: 0.7;
}

.home-hero__search-input::placeholder {
  color: var(--color-foreground-muted);
  opacity: 0.7;
}

/* --- Home Module Cards Grid --- */

.home-modules {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-2);
}

.home-modules__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 640px) {
  .home-modules__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .home-modules__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
  }
}

.home-modules__browse {
  text-align: center;
  margin-top: var(--space-8);
}

.home-modules__browse-link {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-vivid-blue);
  text-decoration: none;
  transition: all var(--transition-normal);
}

.home-modules__browse-link:hover {
  text-decoration: underline;
  color: var(--color-medium-blue);
}

/* --- Home Module Card --- */

.home-module-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  transition: all 300ms ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.home-module-card:hover {
  border-color: var(--color-vivid-blue);
  box-shadow: 0 8px 24px rgba(4, 102, 200, 0.12);
  transform: translateY(-2px);
}

[data-theme="dark"] .home-module-card {
  background: rgba(21, 27, 35, 0.8);
  border-color: var(--color-border);
}

[data-theme="dark"] .home-module-card:hover {
  border-color: rgba(4, 102, 200, 0.5);
  box-shadow: 0 8px 24px rgba(4, 102, 200, 0.15);
}

/* Card Header — Icon + Title */

.home-module-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.home-module-card__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.home-module-card__icon svg,
.home-module-card__icon [data-lucide] {
  width: 18px;
  height: 18px;
}

/* Icon Color Variants */

.home-module-card__icon.icon-color-yellow {
  background: rgba(238, 195, 90, 0.15);
}

.home-module-card__icon.icon-color-yellow svg,
.home-module-card__icon.icon-color-yellow [data-lucide] {
  color: #EEC35A;
}

.home-module-card__icon.icon-color-blue {
  background: rgba(4, 102, 200, 0.12);
}

.home-module-card__icon.icon-color-blue svg,
.home-module-card__icon.icon-color-blue [data-lucide] {
  color: #0466C8;
}

.home-module-card__icon.icon-color-green {
  background: rgba(3, 191, 164, 0.12);
}

.home-module-card__icon.icon-color-green svg,
.home-module-card__icon.icon-color-green [data-lucide] {
  color: #03BFA4;
}

.home-module-card__icon.icon-color-orange {
  background: rgba(238, 128, 41, 0.12);
}

.home-module-card__icon.icon-color-orange svg,
.home-module-card__icon.icon-color-orange [data-lucide] {
  color: #EE8029;
}

/* Dark mode icon adjustments */

[data-theme="dark"] .home-module-card__icon.icon-color-yellow {
  background: rgba(238, 195, 90, 0.2);
}

[data-theme="dark"] .home-module-card__icon.icon-color-blue {
  background: rgba(4, 102, 200, 0.2);
}

[data-theme="dark"] .home-module-card__icon.icon-color-green {
  background: rgba(3, 191, 164, 0.2);
}

[data-theme="dark"] .home-module-card__icon.icon-color-orange {
  background: rgba(238, 128, 41, 0.2);
}

.home-module-card__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-foreground);
  margin: 0;
  line-height: var(--leading-snug);
}

@media (min-width: 1024px) {
  .home-module-card__title {
    font-size: var(--font-size-lg);
  }
}

/* Card Description */

.home-module-card__description {
  font-size: var(--font-size-xs);
  color: var(--color-foreground-muted);
  line-height: var(--leading-relaxed);
  margin: 0 0 var(--space-1);
  flex-grow: 0;
}

@media (min-width: 640px) {
  .home-module-card__description {
    font-size: var(--font-size-sm);
  }
}

/* Card Detail Rows — Best for (description → Best for spacing reduced) */

.home-module-card__details {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: var(--space-2);
  margin-top: var(--space-1);
}

.home-module-card__detail-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-1) 0 0;
  border-top: 1px solid var(--color-border);
}

.home-module-card__detail-label {
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-foreground-muted);
  text-transform: capitalize;
}

.home-module-card__detail-value {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-foreground);
  line-height: var(--leading-snug);
  word-break: break-word;
}

[data-theme="dark"] .home-module-card__detail-row {
  border-top-color: rgba(255,255,255,0.08);
}

/* Card Footer — CTA Button */

.home-module-card__footer {
  margin-top: auto;
  padding-top: var(--space-3);
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-2);
  align-items: center;
}

/* When a "View Sample Output" button is present, both CTAs share the row
   evenly (same line). Single-button cards are unaffected. */

.home-module-card__footer:has(.home-module-card__cta--secondary) .home-module-card__cta {
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
  padding-left: var(--space-3);
  padding-right: var(--space-3);
}

.home-module-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  background: var(--color-vivid-blue);
  color: white;
  border: 1px solid var(--color-vivid-blue);
  border-radius: var(--radius-lg);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: all var(--transition-normal);
  box-shadow: var(--shadow-blue);
  white-space: nowrap;
}

@media (min-width: 640px) {
  .home-module-card__cta {
    font-size: var(--font-size-sm);
  }
}

.home-module-card__cta:hover:not(:disabled) {
  background: var(--color-medium-blue);
  border-color: var(--color-medium-blue);
  box-shadow: var(--shadow-blue-hover);
  transform: translateY(-1px);
}

.home-module-card__cta:hover:not(:disabled) svg,
.home-module-card__cta:hover:not(:disabled) [data-lucide] {
  transform: translateX(2px);
}

.home-module-card__cta svg,
.home-module-card__cta [data-lucide] {
  transition: transform var(--transition-normal);
}

.home-module-card__cta:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Secondary CTA (Demo Output "View Sample Output") — brand Secondary variant:
   transparent + blue border/text, fills on hover (mirrors .btn-secondary).
   Double-class selectors raise specificity above the base + dark
   `.home-module-card__cta` rules so the secondary wins in BOTH themes
   (otherwise the dark base rule paints it filled-blue like the primary). */

.home-module-card__cta.home-module-card__cta--secondary {
  background: transparent;
  color: var(--color-vivid-blue);
  border-color: var(--color-vivid-blue);
  box-shadow: none;
}

.home-module-card__cta.home-module-card__cta--secondary:hover:not(:disabled) {
  background: rgba(4, 102, 200, 0.08);
  color: var(--color-vivid-blue);
  border-color: var(--color-vivid-blue);
  box-shadow: none;
  transform: translateY(-1px);
}

[data-theme="dark"] .home-module-card__cta.home-module-card__cta--secondary {
  background: transparent;
  color: var(--color-vivid-blue);
  border-color: var(--color-vivid-blue);
}

[data-theme="dark"] .home-module-card__cta.home-module-card__cta--secondary:hover:not(:disabled) {
  background: var(--color-gray-900);
  color: var(--color-vivid-blue);
  border-color: var(--color-vivid-blue);
}

[data-theme="dark"] .home-module-card__cta {
  background: var(--color-vivid-blue);
  border-color: var(--color-vivid-blue);
  color: white;
}

[data-theme="dark"] .home-module-card__cta:hover:not(:disabled) {
  background: var(--color-medium-blue);
  border-color: var(--color-medium-blue);
}

/* --- Responsive: Mobile adjustments --- */

@media (max-width: 639px) {
  .home-hero {
    padding: var(--space-8) var(--space-2) var(--space-6);
  }
  
  .home-hero__title {
    font-size: clamp(24px, 6vw, 36px);
  }
  
  .home-modules {
    padding: 0;
  }
  
  .home-module-card {
    padding: var(--space-5);
  }
}

/* ==========================================================================
   CONNECTIONS PAGE - Platform connection cards
   ========================================================================== */

.connections-page {
  max-width: 1200px;
  margin: 0 auto;
}

.connections-page__header {
  margin-bottom: var(--space-8);
}

.connections-page__title {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: var(--space-2);
  color: var(--color-foreground);
}

.connections-page__subtitle {
  font-size: 14px;
  opacity: 0.7;
  margin: 0;
}

/* Category sections (grouped by property_config.category) */

.connections-section {
  margin-bottom: var(--space-8);
}

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

.connections-section__title {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--color-foreground);
  opacity: 0.65;
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.connections-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--space-6);
}

.connection-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  transition: all var(--transition-normal);
}

.connection-card:hover {
  border-color: var(--color-vivid-blue);
  box-shadow: 0 8px 24px -8px rgba(4, 102, 200, 0.25);
  transform: translateY(-4px);
}

.connection-card--connected {
  border-color: rgba(52, 168, 83, 0.3);
}

.connection-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.connection-card__title-group {
  flex: 1;
}

.connection-card__title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 4px 0;
  color: var(--color-foreground);
}

.connection-card__code {
  font-size: 11px;
  opacity: 0.6;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Brand-logo tile — monochrome SVG, theme-swapped (see connectionLogos.js) */

.connection-card__logo {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-icon-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.connection-card__logo-img {
  width: 26px;
  height: 26px;
  -o-object-fit: contain;
     object-fit: contain;
}

/* Light/dark logo swap — mirrors .sidebar-logo--light / --dark */

.connection-card__logo-img--dark { display: none; }

.connection-card__logo-img--light { display: block; }

[data-theme="dark"] .connection-card__logo-img--light { display: none; }

[data-theme="dark"] .connection-card__logo-img--dark { display: block; }

/* Letter fallback for any unmapped platform */

.connection-card__logo--fallback {
  border: none;
  background: linear-gradient(135deg, var(--color-vivid-blue), var(--color-teal));
  color: #fff;
  font-weight: 600;
  font-size: 20px;
}

/* "Coming soon" badge — pinned to the top of the header row */

.connection-card__badge {
  align-self: flex-start;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--color-vivid-blue);
  background: rgba(4, 102, 200, 0.12);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  letter-spacing: 0.2px;
}

/* Coming-soon cards read as not-yet-active without being fully greyed out */

.connection-card--coming-soon .connection-card__logo {
  opacity: 0.9;
}

.connection-card--coming-soon .connection-card__description {
  opacity: 0.7;
}

.connection-card__description {
  font-size: 13px;
  opacity: 0.8;
  margin-bottom: var(--space-4);
  line-height: 1.5;
}

.connection-status {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.connection-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.connection-actions .btn {
  flex: 1;
  min-width: -moz-fit-content;
  min-width: fit-content;
}

@media (max-width: 768px) {
  .connections-grid {
    grid-template-columns: 1fr;
  }
  
  .connection-actions {
    flex-direction: column;
  }
  
  .connection-actions .btn {
    width: 100%;
  }
}

/* ==========================================================================
   CHAT WELCOME HERO STATE (Figma Page 4)
   ========================================================================== */

.chat-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: calc(100vh - 140px);
  padding: var(--space-6);
  text-align: center;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.chat-welcome::-webkit-scrollbar {
  display: none;
}

/* Hero Section */

.chat-welcome__hero {
  margin-bottom: var(--space-10, 48px);
}

.chat-welcome__title {
  font-family: var(--font-family-primary);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: var(--font-weight-bold);
  color: var(--color-foreground);
  line-height: 1.2;
  margin: 0 0 var(--space-3);
}

.chat-welcome__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.chat-welcome__logo {
  width: 32px;
  height: 32px;
  -o-object-fit: contain;
     object-fit: contain;
  vertical-align: middle;
}

@media (min-width: 768px) {
  .chat-welcome__logo {
    width: 40px;
    height: 40px;
  }
}

.chat-welcome__subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-foreground-muted);
  line-height: var(--leading-relaxed);
  max-width: 560px;
  margin: 0 auto;
}

/* Input Card */

.chat-welcome__card {
  width: 90%;
  max-width: none;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
  animation: slideCardIn 400ms ease-out both;
}

[data-theme="dark"] .chat-welcome__card {
  background: var(--color-gray-900);
  border-color: rgba(255,255,255,0.08);
}

.chat-welcome__question {
  font-family: var(--font-family-primary);
  font-size: clamp(18px, 2.5vw, 24px);
  font-weight: var(--font-weight-bold);
  color: var(--color-foreground);
  margin: 0 0 var(--space-4);
  text-align: left;
}

/* Override chat-input in welcome card */

.chat-welcome__card .chat-input {
  padding: 0;
  margin: 0;
}

/* Disclaimer */

.chat-welcome__disclaimer {
  font-size: var(--font-size-xs);
  color: var(--color-foreground-muted);
  margin: var(--space-4) 0 0;
  text-align: center;
  flex-shrink: 0;
}

/* ==========================================================================
   CARD-BASED CHAT FLOW (Figma Pages 4b-4d)
   ========================================================================== */

/* Slide-in animation for cards */

@keyframes slideCardIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.chat-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: calc(100vh - 140px);
  overflow-y: auto;
  padding: var(--space-6);
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.chat-flow::-webkit-scrollbar {
  display: none;
}

.chat-flow__cards {
  width: 90%;
  max-width: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: auto;
  padding-bottom: var(--space-6);
}

/* Action bar inside current card — send/skip at bottom right */

.chat-flow__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* Base Card */

.chat-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-6);
}

[data-theme="dark"] .chat-card {
  background: var(--color-gray-900);
  border-color: rgba(255,255,255,0.08);
}

.chat-card__question {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-foreground);
  margin: 0 0 var(--space-3);
  line-height: 1.3;
}

.chat-card__optional {
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-sm);
  color: var(--color-foreground-muted);
}

/* Answered Card — compact row */

.chat-card--answered {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
}

.chat-card--answered .chat-card__question {
  font-size: var(--font-size-base);
  margin-bottom: var(--space-2);
}

.chat-card__content {
  flex: 1;
  min-width: 0;
}

.chat-card__answers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.chat-card__answer-pill {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  background: var(--color-muted);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-foreground);
  white-space: nowrap;
}

[data-theme="dark"] .chat-card__answer-pill {
  background: var(--color-gray-800);
}

.chat-card__edit {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--color-foreground-muted);
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: all var(--transition-normal);
}

.chat-card__edit:hover {
  background: var(--color-muted);
  color: var(--color-foreground);
}

[data-theme="dark"] .chat-card__edit:hover {
  background: var(--color-gray-800);
}

/* Current Question Card */

.chat-card--current {
  box-shadow: var(--shadow-md);
}

.chat-card--current .chat-input {
  padding: 0;
  margin: 0;
}

/* Slide-in animation for new cards */

.chat-card--animate {
  animation: slideCardIn 400ms ease-out both;
}

/* Ready State Card — "All set!" */

.chat-card--ready {
  text-align: center;
  padding: var(--space-8) var(--space-6);
  background: linear-gradient(180deg, var(--color-card) 0%, rgba(4, 102, 200, 0.03) 100%);
  border: 1px solid var(--color-border);
}

[data-theme="dark"] .chat-card--ready {
  background: linear-gradient(180deg, var(--color-gray-900) 0%, rgba(4, 102, 200, 0.06) 100%);
}

.chat-card__ready-title {
  font-family: var(--font-family-primary);
  font-size: clamp(18px, 2.5vw, 24px);
  font-weight: var(--font-weight-bold);
  color: var(--color-foreground);
  margin: 0 0 var(--space-4);
}

.chat-card__credits-summary {
  display: flex;
  justify-content: center;
  gap: var(--space-6);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}

.chat-card__credit-item {
  font-size: var(--font-size-sm);
  color: var(--color-foreground-muted);
}

.chat-card__credit-item strong {
  color: var(--color-foreground);
  font-weight: var(--font-weight-semibold);
}

.chat-card__start-btn {
  background: var(--color-vivid-blue) !important;
  border: none !important;
  border-radius: var(--radius-lg) !important;
  padding: var(--space-3) var(--space-8) !important;
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-semibold) !important;
  font-size: var(--font-size-base) !important;
  color: white !important;
  transition: all var(--transition-normal);
  box-shadow: var(--shadow-blue);
}

.chat-card__start-btn:hover:not(:disabled) {
  background: var(--color-medium-blue) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-blue-hover);
}

/* Chat Container - Aligned with home page module cards grid */

.chat-container {
  width: 100%;
  max-width: 1200px; /* Match module cards grid for 2-column layout */
  margin: 0 auto;
  padding: var(--space-6) var(--space-6);
  display: flex;
  flex-direction: column;
  height: 100%;
}

@media (min-width: 1024px) {
  .chat-container {
    max-width: 1400px; /* Match module cards grid for 3-column layout */
    padding: var(--space-8) var(--space-8);
  }
}

/* Progress Bar */

.chat-container .progress {
  background-color: var(--color-border);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.chat-container .progress-bar {
  background: linear-gradient(90deg, var(--color-vivid-blue), var(--color-medium-blue));
  border-radius: var(--radius-full);
  transition: width 0.5s ease-out;
}

/* Step Indicator */

.chat-container .text-muted.small {
  color: var(--color-foreground-muted);
  font-size: var(--font-size-sm);
}

/* Chat Messages Container - Full width within container, scrollable */

.chat-messages {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--space-4) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
  margin: 0;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* Chat Message */

.chat-message {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  max-width: 85%;
  animation: messageSlideIn 0.3s ease-out;
}

@keyframes messageSlideIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.chat-message.assistant,
.chat-message.chat-message--assistant {
  align-self: flex-start;
  flex-direction: row;
}

.chat-message.user,
.chat-message.chat-message--user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

/* Message Avatar */

.chat-message__avatar,
.message-avatar {
  flex-shrink: 0;
}

.chat-message__avatar .avatar-fallback,
.chat-message .avatar-fallback {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
}

/* Assistant Avatar */

.chat-message--assistant .avatar-fallback,
.chat-message.assistant .avatar-fallback {
  background: linear-gradient(135deg, var(--color-vivid-blue), var(--color-medium-blue));
  color: white;
}

/* User Avatar */

.chat-message--user .avatar-fallback,
.chat-message.user .avatar-fallback {
  background: var(--color-muted);
  color: var(--color-foreground);
}

[data-theme="dark"] .chat-message--user .avatar-fallback,
[data-theme="dark"] .chat-message.user .avatar-fallback {
  background: var(--color-gray-800);
  color: var(--color-foreground);
}

/* Aurum Logo in Avatar */

.avatar-logo {
  width: 24px;
  height: 24px;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: var(--radius-sm);
}

.avatar-fallback--assistant {
  background: linear-gradient(135deg, var(--color-vivid-blue), var(--color-medium-blue));
  color: white;
}

.avatar-fallback-text {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
}

/* Message Bubble */

.chat-message__bubble,
.message-bubble {
  flex: 1;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-xl);
  word-wrap: break-word;
  line-height: 1.5;
  font-size: var(--font-size-base);
  transition: background-color var(--transition-normal);
  max-width: -moz-fit-content;
  max-width: fit-content;
}

/* Assistant Bubble - Light background, readable in both modes */

.chat-message.assistant .message-bubble,
.chat-message.chat-message--assistant .chat-message__bubble,
.chat-message--assistant .message-bubble {
  background-color: var(--color-card);
  color: var(--color-foreground);
  border: none;
  border-bottom-left-radius: var(--radius-sm);
}

[data-theme="dark"] .chat-message.assistant .message-bubble,
[data-theme="dark"] .chat-message.chat-message--assistant .chat-message__bubble,
[data-theme="dark"] .chat-message--assistant .message-bubble {
  background-color: var(--color-gray-900);
  border: none;
}

/* User Bubble - Primary blue */

.chat-message.user .message-bubble,
.chat-message.chat-message--user .chat-message__bubble,
.chat-message--user .message-bubble {
  background: linear-gradient(135deg, var(--color-vivid-blue), var(--color-medium-blue));
  color: white;
  border-bottom-right-radius: var(--radius-sm);
  transition: all var(--transition-normal);
  cursor: default;
}

.chat-message.user .message-bubble:hover,
.chat-message.chat-message--user .chat-message__bubble:hover,
.chat-message--user .message-bubble:hover {
  background: white;
  color: var(--color-vivid-blue);
  border: none;
  transform: none;
  box-shadow: none;
}

[data-theme="dark"] .chat-message.user .message-bubble:hover,
[data-theme="dark"] .chat-message.chat-message--user .chat-message__bubble:hover,
[data-theme="dark"] .chat-message--user .message-bubble:hover {
  background: var(--color-gray-900);
  color: var(--color-vivid-blue);
  border: none;
}

/* Override Bootstrap bg-light for dark mode */

.chat-message .bg-light {
  background-color: var(--color-card) !important;
  color: var(--color-foreground) !important;
}

[data-theme="dark"] .chat-message .bg-light {
  background-color: var(--color-gray-900) !important;
  color: var(--color-foreground) !important;
  border: 1px solid var(--color-border);
}

/* Chat Input Area - Full width within container, aligned at bottom */

.chat-input {
  margin-top: auto;
  padding: var(--space-4) 0;
  width: 100%;
}

.chat-input form,
.chat-input .d-flex {
  display: flex;
  gap: var(--space-3);
  align-items: stretch;
}

.chat-input .form-control,
.chat-input input[type="text"] {
  flex: 1;
  height: 52px;
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--color-border);
  border-radius: 8px;
  background-color: var(--color-card);
  color: var(--color-foreground);
  font-size: var(--font-size-base);
  transition: all var(--transition-normal);
}

.chat-input .form-control:focus,
.chat-input input[type="text"]:focus {
  border-color: var(--color-vivid-blue);
  box-shadow: 0 0 0 4px rgba(4, 102, 200, 0.15);
  outline: none;
}

.chat-input .form-control::-moz-placeholder, .chat-input input[type="text"]::-moz-placeholder {
  color: var(--color-foreground-muted);
}

.chat-input .form-control::placeholder,
.chat-input input[type="text"]::placeholder {
  color: var(--color-foreground-muted);
}

[data-theme="dark"] .chat-input .form-control,
[data-theme="dark"] .chat-input input[type="text"] {
  background-color: var(--color-gray-900);
  border-color: var(--color-border);
}

[data-theme="dark"] .chat-input .form-control:focus,
[data-theme="dark"] .chat-input input[type="text"]:focus {
  border-color: var(--color-vivid-blue);
  box-shadow: 0 0 0 4px rgba(4, 102, 200, 0.25);
}

/* Send Button - Higher specificity to override Bootstrap */

.chat-input .btn.btn-primary:not(.option-btn):not(.multi-option-btn):not(.single-option-deferred):not(.chat-send-btn):not(.multi-bulk-btn),
.chat-input button[type="submit"].btn-primary:not(.chat-send-btn),
.chat-input button[type="submit"]:not(.chat-send-btn) {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  flex-shrink: 0;
  flex-grow: 0;
  flex-basis: 52px;
  padding: 0 !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, var(--color-vivid-blue), var(--color-medium-blue));
  border: 2px solid transparent;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-normal);
}

/* Normal state icon - white (legacy icon-only Sends; excludes .chat-send-btn which has its own styling) */

.chat-input .btn.btn-primary:not(.option-btn):not(.multi-option-btn):not(.single-option-deferred):not(.chat-send-btn):not(.multi-bulk-btn) i,
.chat-input .btn.btn-primary:not(.option-btn):not(.multi-option-btn):not(.single-option-deferred):not(.chat-send-btn):not(.multi-bulk-btn) svg,
.chat-input .btn.btn-primary:not(.option-btn):not(.multi-option-btn):not(.single-option-deferred):not(.chat-send-btn):not(.multi-bulk-btn) [class*="fa-"],
.chat-input button[type="submit"]:not(.chat-send-btn) i,
.chat-input button[type="submit"]:not(.chat-send-btn) svg,
.chat-input button[type="submit"]:not(.chat-send-btn) [class*="fa-"] {
  font-size: 18px;
  color: white;
  transition: color var(--transition-normal);
}

/* Hover state - light mode: white background, blue icon */

.chat-input .btn.btn-primary:not(.option-btn):not(.multi-option-btn):not(.single-option-deferred):not(.chat-send-btn):not(.multi-bulk-btn):hover,
.chat-input .btn.btn-primary:not(.option-btn):not(.multi-option-btn):not(.single-option-deferred):not(.chat-send-btn):not(.multi-bulk-btn):hover:not(:disabled),
.chat-input button[type="submit"].btn-primary:not(.chat-send-btn):hover,
.chat-input button[type="submit"]:not(.chat-send-btn):hover {
  background: #ffffff;
  color: var(--color-vivid-blue);
  border: 2px solid var(--color-vivid-blue);
  transform: scale(1.05);
  box-shadow: var(--shadow-blue-hover);
}

/* Hover state icon - blue */

.chat-input .btn.btn-primary:not(.option-btn):not(.multi-option-btn):not(.single-option-deferred):not(.chat-send-btn):not(.multi-bulk-btn):hover i,
.chat-input .btn.btn-primary:not(.option-btn):not(.multi-option-btn):not(.single-option-deferred):not(.chat-send-btn):not(.multi-bulk-btn):hover svg,
.chat-input .btn.btn-primary:not(.option-btn):not(.multi-option-btn):not(.single-option-deferred):not(.chat-send-btn):not(.multi-bulk-btn):hover [class*="fa-"],
.chat-input button[type="submit"]:not(.chat-send-btn):hover i,
.chat-input button[type="submit"]:not(.chat-send-btn):hover svg,
.chat-input button[type="submit"]:not(.chat-send-btn):hover [class*="fa-"] {
  color: var(--color-vivid-blue);
}

/* Dark mode hover: black background, blue border/icon */

[data-theme="dark"] .chat-input .btn.btn-primary:not(.option-btn):not(.multi-option-btn):not(.single-option-deferred):not(.chat-send-btn):not(.multi-bulk-btn):hover,
[data-theme="dark"] .chat-input button[type="submit"]:not(.chat-send-btn):hover {
  background: #000000;
  color: var(--color-vivid-blue);
  border-color: var(--color-vivid-blue);
}

[data-theme="dark"] .chat-input .btn.btn-primary:not(.option-btn):not(.multi-option-btn):not(.single-option-deferred):not(.chat-send-btn):not(.multi-bulk-btn):hover i,
[data-theme="dark"] .chat-input .btn.btn-primary:not(.option-btn):not(.multi-option-btn):not(.single-option-deferred):not(.chat-send-btn):not(.multi-bulk-btn):hover svg,
[data-theme="dark"] .chat-input .btn.btn-primary:not(.option-btn):not(.multi-option-btn):not(.single-option-deferred):not(.chat-send-btn):not(.multi-bulk-btn):hover [class*="fa-"],
[data-theme="dark"] .chat-input button[type="submit"]:not(.chat-send-btn):hover i,
[data-theme="dark"] .chat-input button[type="submit"]:not(.chat-send-btn):hover svg,
[data-theme="dark"] .chat-input button[type="submit"]:not(.chat-send-btn):hover [class*="fa-"] {
  color: var(--color-vivid-blue);
}

/* Active state */

.chat-input .btn.btn-primary:not(.option-btn):not(.multi-option-btn):not(.single-option-deferred):not(.chat-send-btn):not(.multi-bulk-btn):active,
.chat-input button[type="submit"]:not(.chat-send-btn):active {
  transform: scale(0.98);
}

/* Skip Button for Optional Parameters - Higher specificity to override Bootstrap */

.chat-input .btn.btn-secondary.skip-btn,
.chat-input button.btn-secondary.skip-btn,
.chat-input .btn.btn-secondary#skip-btn-text,
.chat-input .btn.btn-secondary#skip-btn-single,
.chat-input .btn.btn-secondary#skip-btn-single-deferred,
.chat-input .btn.btn-secondary#skip-btn-multi,
.chat-input .skip-btn,
.chat-input #skip-btn-text,
.chat-input #skip-btn-single,
.chat-input #skip-btn-single-deferred,
.chat-input #skip-btn-multi {
  height: 44px;
  min-width: 100px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-xl);
  font-weight: var(--font-weight-medium);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  /* Normal state - Secondary button style */
  background: transparent;
  border: 2px solid var(--color-vivid-blue);
  color: var(--color-vivid-blue);
  transition: all var(--transition-normal);
}

/* Normal state icon - blue */

.chat-input .btn.btn-secondary.skip-btn i,
.chat-input .btn.btn-secondary.skip-btn svg,
.chat-input .btn.btn-secondary.skip-btn [class*="fa-"],
.chat-input .skip-btn i,
.chat-input .skip-btn svg,
.chat-input .skip-btn [class*="fa-"],
.chat-input #skip-btn-text i,
.chat-input #skip-btn-single i,
.chat-input #skip-btn-single-deferred i,
.chat-input #skip-btn-multi i {
  color: var(--color-vivid-blue);
  transition: color var(--transition-normal);
}

/* Hover state - white background, blue text */

.chat-input .btn.btn-secondary.skip-btn:hover,
.chat-input button.btn-secondary.skip-btn:hover,
.chat-input .skip-btn:hover,
.chat-input #skip-btn-text:hover,
.chat-input #skip-btn-single:hover,
.chat-input #skip-btn-single-deferred:hover,
.chat-input #skip-btn-multi:hover {
  background: white;
  color: var(--color-vivid-blue);
  border-color: var(--color-vivid-blue);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(4, 102, 200, 0.2);
}

/* Hover state icon - blue */

.chat-input .btn.btn-secondary.skip-btn:hover i,
.chat-input .btn.btn-secondary.skip-btn:hover svg,
.chat-input .btn.btn-secondary.skip-btn:hover [class*="fa-"],
.chat-input .skip-btn:hover i,
.chat-input .skip-btn:hover svg,
.chat-input .skip-btn:hover [class*="fa-"],
.chat-input #skip-btn-text:hover i,
.chat-input #skip-btn-single:hover i,
.chat-input #skip-btn-single-deferred:hover i,
.chat-input #skip-btn-multi:hover i {
  color: var(--color-vivid-blue);
}

/* Dark mode hover */

[data-theme="dark"] .chat-input .btn.btn-secondary.skip-btn:hover,
[data-theme="dark"] .chat-input .skip-btn:hover,
[data-theme="dark"] .chat-input #skip-btn-text:hover,
[data-theme="dark"] .chat-input #skip-btn-single:hover,
[data-theme="dark"] .chat-input #skip-btn-single-deferred:hover,
[data-theme="dark"] .chat-input #skip-btn-multi:hover {
  background: var(--color-gray-900);
  color: var(--color-vivid-blue);
  border-color: var(--color-vivid-blue);
  box-shadow: 0 4px 12px rgba(4, 102, 200, 0.3);
}

[data-theme="dark"] .chat-input .btn.btn-secondary.skip-btn:hover i,
[data-theme="dark"] .chat-input .btn.btn-secondary.skip-btn:hover svg,
[data-theme="dark"] .chat-input .skip-btn:hover i,
[data-theme="dark"] .chat-input #skip-btn-text:hover i,
[data-theme="dark"] .chat-input #skip-btn-single:hover i,
[data-theme="dark"] .chat-input #skip-btn-single-deferred:hover i,
[data-theme="dark"] .chat-input #skip-btn-multi:hover i {
  color: var(--color-vivid-blue);
}

/* Option Buttons (Single/Multi Select) - Higher specificity */

.chat-input .btn.btn-outline-primary.option-btn,
.chat-input .btn.btn-outline-primary.multi-option-btn,
.chat-input .btn.btn-outline-primary,
.chat-input .option-btn,
.chat-input .multi-option-btn,
.chat-input .single-option-deferred {
  padding: var(--space-3) var(--space-6);
  border-radius: 9999px;
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
  transition: all var(--transition-normal);
  border: 2px solid var(--color-vivid-blue);
  background: transparent;
  color: var(--color-vivid-blue);
  height: auto;
  min-width: auto;
  white-space: nowrap;
  flex-shrink: 0;
  overflow: visible;
}

.chat-input .btn.btn-outline-primary.option-btn:hover,
.chat-input .btn.btn-outline-primary.multi-option-btn:hover,
.chat-input .btn.btn-outline-primary:hover,
.chat-input .option-btn:hover,
.chat-input .multi-option-btn:hover,
.chat-input .single-option-deferred:hover {
  background: rgba(4, 102, 200, 0.15);
  transform: translateY(-2px);
  color: var(--color-vivid-blue);
}

.chat-input .btn.btn-outline-primary.option-btn.active,
.chat-input .btn.btn-outline-primary.multi-option-btn.active,
.chat-input .btn.btn-outline-primary.active,
.chat-input .option-btn.active,
.chat-input .multi-option-btn.active,
.chat-input .single-option-deferred.active {
  background: var(--color-vivid-blue);
  color: white;
  border-color: var(--color-vivid-blue);
}

[data-theme="dark"] .chat-input .btn.btn-outline-primary,
[data-theme="dark"] .chat-input .option-btn,
[data-theme="dark"] .chat-input .multi-option-btn,
[data-theme="dark"] .chat-input .single-option-deferred {
  border-color: var(--color-vivid-blue);
  color: var(--color-vivid-blue);
  background: transparent;
}

[data-theme="dark"] .chat-input .btn.btn-outline-primary:hover,
[data-theme="dark"] .chat-input .option-btn:hover,
[data-theme="dark"] .chat-input .multi-option-btn:hover,
[data-theme="dark"] .chat-input .single-option-deferred:hover {
  background: rgba(4, 102, 200, 0.25);
}

[data-theme="dark"] .chat-input .btn.btn-outline-primary.active,
[data-theme="dark"] .chat-input .option-btn.active,
[data-theme="dark"] .chat-input .multi-option-btn.active,
[data-theme="dark"] .chat-input .single-option-deferred.active,
[data-theme="dark"] .chat-input .btn-outline-primary.active {
  background: var(--color-vivid-blue) !important;
  color: white !important;
}

/* How many options / how to submit — under questions */

.chat-input .chat-select-guideline,
.chat-welcome .chat-select-guideline {
  line-height: 1.45;
  max-width: 42rem;
}

/* Deferred single-select (edit flow): same vertical rhythm as multi-select */

.single-select-deferred {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.single-select-instant {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Multi-Select Container */

.multi-select-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.multi-select-container .d-flex {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.multi-select-container .text-muted,
.multi-select-container .small {
  color: var(--color-foreground-muted) !important;
  font-size: var(--font-size-sm);
}

/* Canonical chat Send button — brand primary CTA (text + chevron)
   Used by text-form Send, single-deferred Send, and multi-select Send.
   Brand ref: aurumailabs.com/brand → Buttons & CTAs ("XL rounded by default,
   border-radius: 12px"; primary + ChevronRight for CTA-with-Arrow). */

.chat-input .btn.chat-send-btn,
.chat-input .btn.btn-primary.chat-send-btn,
.chat-input button.chat-send-btn,
.chat-send-btn {
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--color-vivid-blue);
  color: white;
  border: 2px solid transparent;
  font-weight: var(--font-weight-semibold);
  min-width: 160px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  transition: all var(--transition-normal);
}

.chat-input .btn.chat-send-btn:hover:not(:disabled),
.chat-input button.chat-send-btn:hover:not(:disabled),
.chat-send-btn:hover:not(:disabled) {
  background: white;
  color: var(--color-vivid-blue);
  border: 2px solid var(--color-vivid-blue);
  transform: translateY(-2px);
  box-shadow: var(--shadow-blue-hover);
}

[data-theme="dark"] .chat-input .btn.chat-send-btn:hover:not(:disabled),
[data-theme="dark"] .chat-send-btn:hover:not(:disabled) {
  background: var(--color-gray-900);
  color: var(--color-vivid-blue);
  border-color: var(--color-vivid-blue);
}

.chat-input .btn.chat-send-btn:disabled,
.chat-send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Send chevron: white by default, blue on hover, inherits sizing */

.chat-send-btn i,
.chat-send-btn [class*="fa-"] {
  font-size: 0.875rem;
  color: inherit;
  transition: transform var(--transition-normal);
}

.chat-send-btn:hover:not(:disabled) i {
  transform: translateX(2px);
}

/* Multi-select bulk buttons (All / None) — smaller ghost pills */

.chat-input .multi-select-container .multi-bulk-btn,
.multi-select-container .multi-bulk-btn {
  padding: 4px 12px;
  height: 30px;
  min-width: 0;
  border-radius: var(--radius-full);
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-foreground-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  transition: all var(--transition-fast);
}

.chat-input .multi-select-container .multi-bulk-btn:hover:not(:disabled),
.multi-select-container .multi-bulk-btn:hover:not(:disabled) {
  border-color: var(--color-vivid-blue);
  color: var(--color-vivid-blue);
  background: rgba(4, 102, 200, 0.08);
}

.chat-input .multi-select-container .multi-bulk-btn:disabled,
.multi-select-container .multi-bulk-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Keyboard shortcut hint — small muted line under the disclaimer */

.chat-kbd-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2) var(--space-5);
  margin: var(--space-3) auto 0;
  padding: 0 var(--space-4);
  max-width: 52rem;
  font-size: var(--font-size-xs);
  color: var(--color-foreground-muted);
  line-height: 1.5;
}

.chat-kbd-hint .chat-kbd-chord {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.chat-kbd-hint .chat-kbd-arrows {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

/* Override Bootstrap's solid-black default for <kbd> inside our hint */

.chat-flow .chat-kbd-hint kbd,
.chat-welcome .chat-kbd-hint kbd,
.chat-kbd-hint kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  line-height: 1;
  color: var(--color-foreground) !important;
  background: var(--color-card) !important;
  border: 1px solid var(--color-border) !important;
  border-bottom-width: 2px !important;
  border-radius: 4px !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
}

[data-theme="dark"] .chat-flow .chat-kbd-hint kbd,
[data-theme="dark"] .chat-welcome .chat-kbd-hint kbd,
[data-theme="dark"] .chat-kbd-hint kbd {
  background: var(--color-gray-900) !important;
  color: var(--color-foreground) !important;
  border-color: var(--color-border) !important;
}

/* Touch-only devices (phones, tablets without a physical keyboard) can't
   use Tab/arrow/Enter/Esc shortcuts, so the hint just steals space. */

@media (hover: none) and (pointer: coarse) {
  .chat-kbd-hint {
    display: none;
  }
}

/* Keyboard focus ring on option pills (multi-select, single-select, deferred single) */

.chat-input .multi-option-btn:focus-visible,
.chat-input .option-btn:focus-visible,
.chat-input .single-option-deferred:focus-visible,
.multi-select-container .multi-option-btn:focus-visible,
.single-select-deferred .single-option-deferred:focus-visible {
  outline: 2px solid var(--color-vivid-blue);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(4, 102, 200, 0.25);
}

/* Execute Button (Ready State) */

.chat-input .text-center {
  padding: var(--space-6);
  background: var(--color-card);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
}

[data-theme="dark"] .chat-input .text-center {
  background: var(--color-gray-900);
}

.chat-input .text-success {
  color: var(--color-evergreen) !important;
  font-weight: var(--font-weight-medium);
}

.chat-input .btn-success {
  background: linear-gradient(135deg, var(--color-evergreen), #02a08a);
  border: none;
  padding: var(--space-3) var(--space-8);
  border-radius: var(--radius-full);
  font-weight: var(--font-weight-semibold);
  transition: all var(--transition-normal);
}

.chat-input .btn-success:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(3, 191, 164, 0.35);
}

/* Typing Indicator */

.typing-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  max-width: -moz-fit-content;
  max-width: fit-content;
}

[data-theme="dark"] .typing-indicator {
  background-color: var(--color-gray-900);
}

.typing-indicator span {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background-color: var(--color-vivid-blue);
  animation: typing 1.4s infinite;
}

.typing-indicator span:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typing {
  0%, 60%, 100% {
    opacity: 0.3;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-4px);
  }
}

/* Scrollbar Styling */

/* Modern thin scrollbar */

.chat-messages::-webkit-scrollbar {
  width: 8px;
}

.chat-messages::-webkit-scrollbar-track {
  background: transparent;
  margin: var(--space-2) 0;
}

.chat-messages::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  background-clip: padding-box;
  -webkit-transition: background 0.2s ease;
  transition: background 0.2s ease;
}

.chat-messages::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
  border: 2px solid transparent;
  background-clip: padding-box;
}

[data-theme="dark"] .chat-messages::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border: 2px solid transparent;
  background-clip: padding-box;
}

[data-theme="dark"] .chat-messages::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
  border: 2px solid transparent;
  background-clip: padding-box;
}

/* Firefox scrollbar */

.chat-messages {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}

[data-theme="dark"] .chat-messages {
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

/* Loading State */

.chat-container .loading-message {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-foreground-muted);
  font-size: var(--font-size-sm);
}

.chat-container .loading-message i {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ==========================================================================
   BREADCRUMB PROGRESS TRAIL
   ========================================================================== */

.chat-breadcrumb {
  margin-bottom: var(--space-3);
  padding: 0;
  overflow-x: auto;
}

/* Override mt-4 margin on chat panel view */

#chat-panel-view.mt-4 {
  margin-top: 0 !important;
}

/* Hide footer when chat panel is visible */

#chat-panel-view[style*="block"] ~ .footer,
body:has(#chat-panel-view[style*="block"]) .footer {
  display: none !important;
}

.breadcrumb-trail {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.breadcrumb-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  position: relative;
  min-width: 64px;
}

.breadcrumb-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  position: relative;
  z-index: 2;
}

.breadcrumb-icon svg,
.breadcrumb-icon [data-lucide] {
  width: 16px;
  height: 16px;
}

/* Pending State */

.breadcrumb-step--pending .breadcrumb-icon {
  background: var(--color-muted);
  color: var(--color-foreground-muted);
  border: 2px solid var(--color-border);
}

[data-theme="dark"] .breadcrumb-step--pending .breadcrumb-icon {
  background: var(--color-gray-800);
  border-color: var(--color-gray-700);
}

/* Active State */

.breadcrumb-step--active .breadcrumb-icon {
  background: var(--color-vivid-blue);
  color: white;
  box-shadow: 0 0 0 4px rgba(4, 102, 200, 0.2);
  border: none;
}

.breadcrumb-step--active .breadcrumb-label {
  color: var(--color-vivid-blue);
  font-weight: var(--font-weight-semibold);
}

/* Completed State */

.breadcrumb-step--completed .breadcrumb-icon {
  background: var(--color-evergreen);
  color: white;
  border: none;
}

.breadcrumb-step--completed .breadcrumb-label {
  color: var(--color-evergreen);
}

/* Label */

.breadcrumb-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-foreground-muted);
  text-align: center;
  transition: color 0.3s ease;
}

/* Connector Line */

.breadcrumb-connector {
  width: 40px;
  height: 3px;
  background: var(--color-border);
  position: absolute;
  left: calc(50% + 22px);
  top: 20px;
  border-radius: var(--radius-full);
  transition: background 0.3s ease;
}

[data-theme="dark"] .breadcrumb-connector {
  background: var(--color-gray-700);
}

.breadcrumb-connector--completed {
  background: var(--color-evergreen);
}

/* Status Text */

.breadcrumb-status {
  text-align: center;
  margin-top: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-foreground-muted);
}

/* ==========================================================================
   FULL-PAGE CHAT LAYOUT
   ========================================================================== */

/* Chat Panel View - Full screen height */

#chat-panel-view {
  height: calc(100vh - 160px);
  min-height: 500px;
  display: flex;
  flex-direction: column;
  padding: 0;
}

/* Full-width chat container - fills available space */

#chat-panel-view .chat-container {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* When sidebar is open - no change needed, container is already full width */

body.sidebar-open #chat-panel-view .chat-container {
  max-width: 100%;
}

/* Messages area - fills available space, aligned with container */

#chat-panel-view .chat-messages {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
  margin: 0;
  padding: var(--space-4) 0;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* Chat Input Form */

.chat-input-form {
  display: flex;
  gap: var(--space-3);
  align-items: stretch;
}

/* Chat Options (select buttons) */

.chat-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* ==========================================================================
   EXECUTE SECTION - Colorful Confirmation Bar
   ========================================================================== */

.chat-execute {
  padding: var(--space-4) var(--space-5);
  background: linear-gradient(135deg, rgba(4, 102, 200, 0.08) 0%, rgba(3, 191, 164, 0.06) 100%);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(4, 102, 200, 0.2);
  box-shadow: 0 4px 20px rgba(4, 102, 200, 0.1);
  margin: var(--space-4) 0;
}

[data-theme="dark"] .chat-execute {
  background: linear-gradient(135deg, rgba(4, 102, 200, 0.15) 0%, rgba(3, 191, 164, 0.08) 100%);
  border-color: rgba(4, 102, 200, 0.3);
  box-shadow: 0 4px 24px rgba(4, 102, 200, 0.15);
}

.chat-execute__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

.chat-execute__info {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.chat-execute__icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--color-vivid-blue), var(--color-evergreen));
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(4, 102, 200, 0.3);
}

.chat-execute__icon svg,
.chat-execute__icon [data-lucide] {
  width: 24px;
  height: 24px;
  color: white;
}

.chat-execute__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.chat-execute__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-foreground);
  line-height: 1.2;
}

.chat-execute__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-vivid-blue);
  font-weight: var(--font-weight-medium);
}

[data-theme="dark"] .chat-execute__meta {
  color: var(--color-evergreen);
}

.chat-execute__meta svg,
.chat-execute__meta [data-lucide] {
  width: 14px;
  height: 14px;
}

.chat-execute__divider {
  margin: 0 var(--space-1);
  color: var(--color-foreground-muted);
  opacity: 0.5;
}

/* CTA Button */

.chat-execute__button {
  padding: var(--space-3) var(--space-6);
  background: linear-gradient(135deg, var(--color-vivid-blue), var(--color-evergreen));
  border: none;
  border-radius: var(--radius-xl);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-base);
  color: white;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  transition: all var(--transition-normal);
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(4, 102, 200, 0.25);
}

.chat-execute__button:hover {
  background: white;
  color: var(--color-vivid-blue);
  border: 2px solid var(--color-vivid-blue);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(4, 102, 200, 0.4);
}

[data-theme="dark"] .chat-execute__button:hover {
  background: var(--color-gray-900);
  color: var(--color-vivid-blue);
  border-color: var(--color-vivid-blue);
}

.chat-execute__button:active {
  transform: translateY(0);
}

.chat-execute__button svg,
.chat-execute__button [data-lucide] {
  width: 18px;
  height: 18px;
}

/* Responsive */

@media (max-width: 540px) {
  .chat-execute {
    padding: var(--space-4);
  }
  
  .chat-execute__row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
  }
  
  .chat-execute__button {
    justify-content: center;
  }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
  .chat-container {
    padding: 0 var(--space-3);
    max-width: 100%;
  }
  
  .chat-message {
    max-width: 95%;
  }
  
  .chat-messages {
    padding: var(--space-3);
  }
  
  .chat-input {
    padding: var(--space-3);
  }
  
  .chat-input .form-control,
  .chat-input input[type="text"] {
    height: 48px;
  }
  
  .chat-input .btn-primary,
  .chat-input button[type="submit"] {
    width: 48px;
    height: 48px;
    min-width: 48px;
  }
  
  #chat-panel-view {
    height: calc(100vh - 140px);
  }
  
  .breadcrumb-step {
    min-width: 60px;
  }
  
  .breadcrumb-icon {
    width: 36px;
    height: 36px;
  }
  
  .breadcrumb-icon svg,
  .breadcrumb-icon [data-lucide] {
    width: 16px;
    height: 16px;
  }
  
  .breadcrumb-connector {
    width: 24px;
    left: calc(50% + 18px);
    top: 16px;
  }
  
  .breadcrumb-label {
    font-size: 10px;
  }
  
  #chat-panel-view {
    min-height: auto;
    padding: var(--space-2);
  }

  .chat-messages {
    max-height: 50vh;
  }

  /* Reclaim space on mobile — the hero pushes the card too far down on
     short viewports, and the card itself can sit edge-to-edge. */
  .chat-welcome {
    height: auto;
    min-height: calc(100vh - 140px);
    padding: var(--space-4) var(--space-3);
    justify-content: center;
  }

  .chat-welcome__hero {
    margin-bottom: var(--space-6);
  }

  .chat-welcome__card,
  .chat-flow__cards {
    width: 100%;
  }

  .chat-welcome__card {
    padding: var(--space-4);
  }

  .chat-flow {
    padding: var(--space-3);
  }
}

/* ==========================================================================
   MODULE ACTIVATION TOAST
   ========================================================================== */

#module-toast {
  position: fixed;
  top: 72px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  z-index: 99999;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 28px;
  background: #111111;
  color: #ffffff;
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  font-family: var(--font-family-primary, 'Urbanist', sans-serif);
  min-width: 360px;
  max-width: 560px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

#module-toast.module-toast--show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.module-toast__icon {
  font-size: 28px;
  flex-shrink: 0;
  line-height: 1;
}

.module-toast__title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.2px;
  line-height: 1.2;
}

.module-toast__sub {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 2px;
  line-height: 1.3;
}

/* ==========================================================================
   CHECKPOINT (AGGREGATOR REVIEW) COMPONENT
   Rendered by src/assets/js/components/CheckpointUI.js
   The component uses Bootstrap utilities (.bg-light) for inner section
   blocks and the footer. Those are theme-agnostic, so the dark theme needs
   scoped overrides to keep section backgrounds dark and labels readable.
   ========================================================================== */

[data-theme="dark"] .checkpoint-container .bg-light {
  background-color: var(--color-background-tertiary) !important;
  color: var(--color-foreground);
}

[data-theme="dark"] .checkpoint-container .card-footer.bg-light {
  background-color: var(--color-background-secondary) !important;
  border-top-color: var(--color-border) !important;
}

[data-theme="dark"] .checkpoint-container .text-muted {
  color: var(--color-foreground-muted) !important;
}

[data-theme="dark"] .checkpoint-container .text-secondary {
  color: var(--color-foreground-secondary) !important;
}

[data-theme="dark"] .checkpoint-container .text-dark {
  color: var(--color-foreground) !important;
}

[data-theme="dark"] .checkpoint-container strong {
  color: var(--color-foreground);
}

[data-theme="dark"] .checkpoint-container #checkpoint-notes {
  background-color: var(--color-background);
  color: var(--color-foreground);
  border-color: var(--color-border);
}

[data-theme="dark"] .checkpoint-container #checkpoint-notes::-moz-placeholder {
  color: var(--color-foreground-muted);
}

[data-theme="dark"] .checkpoint-container #checkpoint-notes::placeholder {
  color: var(--color-foreground-muted);
}

/* ==========================================================================
   EXISTING CREATIVES — library page (sidebar: Existing Creatives)
   Source-mode tab bar mirrors .mindmap-tabs; entity pills mirror
   .mindmap-pill so the page reads as a sibling of the Mindmap chunk list.
   ========================================================================== */

/* ── Layout grid ──────────────────────────────────────────────────────────── */

.existing-creatives__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.existing-creatives__card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-card, #fff);
  transition: transform 0.15s, box-shadow 0.15s;
}

.existing-creatives__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.existing-creatives__card-thumb {
  position: relative;
  width: 100%;
  /* 4:3 keeps the grid rows aligned but gives wide / portrait creatives more
     room than a square would. The image itself is sized with object-fit:
     contain, so a 16:9 banner letterboxes top/bottom and a 9:16 story
     letterboxes left/right — full creative visible, no crop. */
  aspect-ratio: 4 / 3;
  background: #f1f5f9;
  border-radius: 6px;
  overflow: hidden;
  cursor: zoom-in;
  display: flex;
  align-items: center;
  justify-content: center;
}

.existing-creatives__card-thumb img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
}

.existing-creatives__card-thumb-empty {
  color: #94a3b8;
  font-size: 12px;
  text-align: center;
  padding: 8px;
}

.existing-creatives__card-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  background: rgba(15, 23, 42, 0.75);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.existing-creatives__card-badge--generated { background: rgba(4, 102, 200, 0.85); }

.existing-creatives__card-badge--upload    { background: rgba(15, 23, 42, 0.75); }

[data-theme="dark"] .existing-creatives__card { background: var(--color-gray-900, #0f172a); }

[data-theme="dark"] .existing-creatives__card-thumb { background: #1e293b; }

[data-theme="dark"] .existing-creatives__card-thumb-empty { color: #64748b; }

/* ── Search bar ──────────────────────────────────────────────────────────── */

/* Single outer border, visible in BOTH states. Only the color changes on
   focus — no thickness/shadow/inset shift between states. */

.existing-creatives__search {
  position: relative;
  margin-bottom: 12px;
  max-width: 560px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  transition: border-color 0.15s;
}

.existing-creatives__search:focus-within {
  border-color: #0466C8;
}

[data-theme="dark"] .existing-creatives__search {
  background: #1e293b;
  border-color: #334155;
}

/* Icon is absolutely positioned so its rendering is fully decoupled from
   the <input> — focus/blur on the input can never reflow it away. */

.existing-creatives__search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: #94a3b8;
  pointer-events: none;
  z-index: 1;
}

.existing-creatives__search-icon svg {
  display: block;
  width: 16px;
  height: 16px;
}

/* Specificity bump (.existing-creatives__search .existing-creatives__search-input)
   is needed because forms.css has a global `input[type="search"]` rule that
   forces a 44px height + symmetric padding and is imported AFTER this file. */

.existing-creatives__search .existing-creatives__search-input,
.existing-creatives__search .existing-creatives__search-input:hover,
.existing-creatives__search .existing-creatives__search-input:focus,
.existing-creatives__search .existing-creatives__search-input:focus-visible,
.existing-creatives__search .existing-creatives__search-input:active {
  display: block;
  width: 100%;
  height: auto;
  padding: 9px 12px 9px 36px;   /* left padding leaves room for the icon */
  border: 0 none transparent;
  border-radius: 0;
  background: transparent;
  background-color: transparent;
  font-size: 13px;
  color: #0f172a;
  outline: 0 none transparent;
  box-shadow: none;
  -webkit-box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  box-sizing: border-box;
}

.existing-creatives__search .existing-creatives__search-input:-webkit-autofill,
.existing-creatives__search .existing-creatives__search-input:-webkit-autofill:hover,
.existing-creatives__search .existing-creatives__search-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 30px #fff inset;
  -webkit-text-fill-color: #0f172a;
  -webkit-transition: background-color 9999s ease-out;
  transition: background-color 9999s ease-out;
}

.existing-creatives__search .existing-creatives__search-input::-moz-placeholder { color: #94a3b8; }

.existing-creatives__search .existing-creatives__search-input::placeholder { color: #94a3b8; }

.existing-creatives__search .existing-creatives__search-input::-webkit-search-cancel-button,
.existing-creatives__search .existing-creatives__search-input::-webkit-search-decoration { -webkit-appearance: none; display: none; }

[data-theme="dark"] .existing-creatives__search:focus-within {
  border-color: #f5c842;
}

[data-theme="dark"] .existing-creatives__search-icon { color: #64748b; }

[data-theme="dark"] .existing-creatives__search-input { color: #f1f5f9; }

/* ── Source-mode tabs (mirror .mindmap-tabs) ─────────────────────────────── */

.existing-creatives__tabs {
  display: flex;
  gap: 4px;
  padding: 8px 0 0;
  border-bottom: 1px solid #e9ecef;
  margin-bottom: 12px;
}

.existing-creatives__tab {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  background: transparent;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  border-radius: 4px 4px 0 0;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.existing-creatives__tab:hover { color: #0466C8; background: rgba(4, 102, 200, 0.05); }

.existing-creatives__tab.is-active {
  color: #0466C8;
  border-bottom-color: #0466C8;
}

.existing-creatives__tab-count {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  background: rgba(100, 116, 139, 0.12);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
}

.existing-creatives__tab.is-active .existing-creatives__tab-count {
  background: rgba(4, 102, 200, 0.12);
  color: #0466C8;
}

[data-theme="dark"] .existing-creatives__tabs { border-bottom-color: #334155; }

[data-theme="dark"] .existing-creatives__tab { color: #94a3b8; }

[data-theme="dark"] .existing-creatives__tab:hover { color: #f5c842; background: rgba(245, 200, 66, 0.06); }

[data-theme="dark"] .existing-creatives__tab.is-active { color: #f5c842; border-bottom-color: #f5c842; }

/* ── Entity pills (mirror .mindmap-pill) ─────────────────────────────────── */

.existing-creatives__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.existing-creatives__pill {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #475569;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s;
}

.existing-creatives__pill:hover {
  border-color: #0466C8;
  color: #0466C8;
}

.existing-creatives__pill.is-active {
  background: #0466C8;
  border-color: #0466C8;
  color: #fff;
}

.existing-creatives__pill-count {
  background: rgba(100, 116, 139, 0.12);
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
}

.existing-creatives__pill.is-active .existing-creatives__pill-count {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}

[data-theme="dark"] .existing-creatives__pill { background: #1e293b; border-color: #334155; color: #cbd5e1; }

[data-theme="dark"] .existing-creatives__pill:hover { border-color: #f5c842; color: #f5c842; }

[data-theme="dark"] .existing-creatives__pill.is-active { background: #f5c842; border-color: #f5c842; color: #0f172a; }

/* ── Edit asset modal ────────────────────────────────────────────────────── */

.existing-creatives__edit-modal .modal-content {
  border-radius: 12px;
  overflow: hidden;
}

.existing-creatives__edit-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
}

@media (max-width: 768px) {
  .existing-creatives__edit-grid { grid-template-columns: 1fr; }
}

.existing-creatives__edit-preview {
  position: sticky;
  top: 0;
}

.existing-creatives__edit-preview img {
  width: 100%;
  height: auto;
  max-height: 220px;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 8px;
  background: #f1f5f9;
  display: block;
}

.existing-creatives__edit-preview-empty {
  width: 100%;
  height: 160px;
  background: #f1f5f9;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-size: 12px;
}

.existing-creatives__edit-fields {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.existing-creatives__edit-section {
  padding-bottom: 16px;
  border-bottom: 1px solid #f1f5f9;
}

.existing-creatives__edit-section:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.existing-creatives__edit-section-title {
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  margin-bottom: 12px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

[data-theme="dark"] .existing-creatives__edit-preview img,
[data-theme="dark"] .existing-creatives__edit-preview-empty { background: #1e293b; }

[data-theme="dark"] .existing-creatives__edit-section { border-bottom-color: #1e293b; }

[data-theme="dark"] .existing-creatives__edit-section-title { color: #cbd5e1; }

/* ── Modal z-index bump ──────────────────────────────────────────────────── */

/* The dashboard chrome has dropdowns at z-index: 1060 !important and tooltip
   surfaces at 1100, both of which were painting OVER Bootstrap's default
   modal (1055). The modals are now rendered into a body-level portal
   (#ec-modals-portal) so they escape any transformed-ancestor stacking
   context, and !important defeats the dashboard's !important rules. */

/* #ap-modals-portal = the Audience Persona page's modal portal — same body-level
   portal fighting the same 1060/1100 dashboard chrome, so it needs the identical
   lift. Without it the modal renders at Bootstrap's default 1055, BELOW the
   global .modal-backdrop.show (1195) below, so the backdrop paints over the modal
   and swallows every click (the "Save selected does nothing" bug). */

#ec-modals-portal .modal,
#ap-modals-portal .modal { z-index: 1200 !important; }

.modal-backdrop.show { z-index: 1195 !important; }

#ec-modals-portal .modal-dialog,
#ap-modals-portal .modal-dialog { z-index: 1201; }

/* ── Modal dark-mode legibility ──────────────────────────────────────────── */

/* Bootstrap's default modal styling assumes a light surface; the dashboard
   dark theme paints the modal black but leaves form labels in the default
   dim color, which makes the Add asset / Edit asset forms unreadable. These
   overrides apply only when [data-theme="dark"] is on the <html> element. */

[data-theme="dark"] :is(#ec-modals-portal, #ap-modals-portal) .modal-content {
  background-color: #0f172a;
  border: 1px solid #1e293b;
  color: #e2e8f0;
}

[data-theme="dark"] :is(#ec-modals-portal, #ap-modals-portal) .modal-header,
[data-theme="dark"] :is(#ec-modals-portal, #ap-modals-portal) .modal-footer {
  border-color: #1e293b;
}

[data-theme="dark"] :is(#ec-modals-portal, #ap-modals-portal) .modal-title,
[data-theme="dark"] :is(#ec-modals-portal, #ap-modals-portal) .modal-body,
[data-theme="dark"] :is(#ec-modals-portal, #ap-modals-portal) .form-label,
[data-theme="dark"] :is(#ec-modals-portal, #ap-modals-portal) .form-text,
[data-theme="dark"] :is(#ec-modals-portal, #ap-modals-portal) label {
  color: #e2e8f0;
}

[data-theme="dark"] :is(#ec-modals-portal, #ap-modals-portal) .text-muted,
[data-theme="dark"] :is(#ec-modals-portal, #ap-modals-portal) .text-muted small {
  color: #94a3b8 !important;
}

[data-theme="dark"] :is(#ec-modals-portal, #ap-modals-portal) .form-control,
[data-theme="dark"] :is(#ec-modals-portal, #ap-modals-portal) .form-control:focus,
[data-theme="dark"] :is(#ec-modals-portal, #ap-modals-portal) textarea.form-control,
[data-theme="dark"] :is(#ec-modals-portal, #ap-modals-portal) input[type="text"],
[data-theme="dark"] :is(#ec-modals-portal, #ap-modals-portal) input[type="email"],
[data-theme="dark"] :is(#ec-modals-portal, #ap-modals-portal) input[type="number"],
[data-theme="dark"] :is(#ec-modals-portal, #ap-modals-portal) input[type="file"] {
  background-color: #1e293b;
  border-color: #334155;
  color: #f1f5f9;
}

[data-theme="dark"] :is(#ec-modals-portal, #ap-modals-portal) .form-control::-moz-placeholder {
  color: #64748b;
}

[data-theme="dark"] :is(#ec-modals-portal, #ap-modals-portal) .form-control::placeholder {
  color: #64748b;
}

[data-theme="dark"] :is(#ec-modals-portal, #ap-modals-portal) .form-control:focus {
  border-color: #0466C8;
  box-shadow: 0 0 0 4px rgba(4, 102, 200, 0.25);
}

/* File picker chrome — the "Choose file" button + filename strip */

[data-theme="dark"] :is(#ec-modals-portal, #ap-modals-portal) input[type="file"]::-webkit-file-upload-button:hover,
[data-theme="dark"] :is(#ec-modals-portal, #ap-modals-portal) input[type="file"]::file-selector-button:hover {
  background-color: #475569;
}

/* Required-field asterisks need contrast against dark */

[data-theme="dark"] :is(#ec-modals-portal, #ap-modals-portal) .text-danger {
  color: #f87171 !important;
}

/* Form-check labels (checkboxes inside the upload modal) */

[data-theme="dark"] :is(#ec-modals-portal, #ap-modals-portal) .form-check-label {
  color: #e2e8f0;
}

[data-theme="dark"] :is(#ec-modals-portal, #ap-modals-portal) .form-check-input {
  background-color: #1e293b;
  border-color: #475569;
}

[data-theme="dark"] :is(#ec-modals-portal, #ap-modals-portal) .form-check-input:checked {
  background-color: #0466C8;
  border-color: #0466C8;
}

/* Cancel button (outline secondary) in dark mode */

[data-theme="dark"] :is(#ec-modals-portal, #ap-modals-portal) .btn-secondary {
  background-color: transparent;
  border-color: #475569;
  color: #e2e8f0;
}

[data-theme="dark"] :is(#ec-modals-portal, #ap-modals-portal) .btn-secondary:hover {
  background-color: #1e293b;
  border-color: #64748b;
}

[data-theme="dark"] :is(#ec-modals-portal, #ap-modals-portal) .btn-close {
  filter: invert(1) grayscale(100%) brightness(2);
}

/* Inline <code> blocks (asset id in edit modal preview) */

[data-theme="dark"] :is(#ec-modals-portal, #ap-modals-portal) code {
  background-color: #1e293b;
  color: #94a3b8;
  padding: 2px 4px;
  border-radius: 3px;
}

/* Edit-modal section dividers + titles */

[data-theme="dark"] :is(#ec-modals-portal, #ap-modals-portal) .existing-creatives__edit-section {
  border-bottom-color: #1e293b;
}

[data-theme="dark"] :is(#ec-modals-portal, #ap-modals-portal) .existing-creatives__edit-section-title {
  color: #cbd5e1;
}

[data-theme="dark"] :is(#ec-modals-portal, #ap-modals-portal) .existing-creatives__edit-preview img,
[data-theme="dark"] :is(#ec-modals-portal, #ap-modals-portal) .existing-creatives__edit-preview-empty {
  background-color: #1e293b;
}

/* Inline <hr> divider in upload modal manual-tags section */

[data-theme="dark"] :is(#ec-modals-portal, #ap-modals-portal) hr {
  border-color: #1e293b;
  opacity: 0.6;
}

/* ── Lightbox (full-image overlay) ───────────────────────────────────────── */

/* Rendered at document.body level so position:fixed escapes any transformed
   ancestor and the overlay always covers the full viewport (incl. sidebar). */

.existing-creatives__lightbox {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.92);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 32px 48px;
  cursor: zoom-out;
}

.existing-creatives__lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  cursor: default;
}

.existing-creatives__lightbox-close {
  position: fixed;
  top: 20px;
  right: 24px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: rgba(15, 23, 42, 0.9);
  border: 2px solid rgba(255, 255, 255, 0.6);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  font-weight: 400;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  transition: transform 0.12s, background 0.12s, border-color 0.12s;
}

.existing-creatives__lightbox-close:hover {
  background: #dc2626;
  border-color: #fff;
  transform: scale(1.05);
}

.existing-creatives__lightbox-close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.existing-creatives__lightbox-caption {
  position: fixed;
  bottom: 16px;
  left: 0;
  right: 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
  padding: 0 16px;
  pointer-events: none;
}

/* ── Card actions (Edit / Delete icon buttons) ───────────────────────────── */

.existing-creatives__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}

.existing-creatives__action {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 12px;
  padding: 4px 8px;
}

/* ════════════════════════════════════════════════════════════════════════════
   Audience Persona page (Docs > Audience Persona) — dedicated, mobile-responsive
   layout used by AudiencePersonasPage.js. Scoped `persona-*` so it never affects
   the Assets (existing-creatives) cards. Shares the #ap-modals-portal z-index
   lift defined near the top of this file.
   ════════════════════════════════════════════════════════════════════════════ */

.persona-toolbar { display: flex; flex-wrap: wrap; gap: 8px; }

.persona-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.persona-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--color-white, #ffffff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 14px;
  padding: 16px;
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}

.persona-card:hover {
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
  border-color: rgba(4, 102, 200, 0.35);
}

.persona-card__top { display: flex; align-items: center; gap: 12px; }

.persona-card__avatar {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  border-radius: 12px;
  display: grid; place-items: center;
  font-weight: 700; font-size: 14px; letter-spacing: .3px;
  color: #ffffff;
  background: linear-gradient(135deg, #0466C8, #5b9bf0);
}

.persona-card__title { flex: 1 1 auto; min-width: 0; }

.persona-card__name {
  font-weight: 650; font-size: 15px; line-height: 1.25;
  color: var(--color-heading, #0f172a);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.persona-card__segment {
  font-size: 12px; color: var(--color-text-muted, #64748b);
  text-transform: capitalize;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.persona-card__source {
  flex: 0 0 auto;
  font-size: 10px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
  background: #eef2f7; color: #475569; white-space: nowrap;
}

.persona-source--brand_analysis { background: #e0f2fe; color: #0369a1; }

.persona-source--generated      { background: #ede9fe; color: #6d28d9; }

.persona-source--pdf_extraction { background: #e2e8f0; color: #334155; }

.persona-source--manual         { background: #f1f5f9; color: #475569; }

.persona-card__summary {
  margin: 0; font-size: 13px; line-height: 1.5;
  color: var(--color-text, #334155);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

.persona-card__meta {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--color-text-muted, #64748b);
}

.persona-card__meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.persona-card__chips { display: flex; flex-wrap: wrap; gap: 6px; }

.persona-chip {
  font-size: 11.5px; line-height: 1.4;
  padding: 2px 9px; border-radius: 999px;
  background: #f1f5f9; color: #334155; border: 1px solid #e2e8f0;
}

.persona-chip--all { color: #94a3b8; font-style: italic; }

.persona-card__footer {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: auto; padding-top: 10px;
  border-top: 1px solid var(--color-border, #f1f5f9);
}

.persona-knowledge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 600;
  padding: 3px 9px; border-radius: 999px;
  background: #f1f5f9; color: #94a3b8;
}

.persona-knowledge.is-synced { background: #dcfce7; color: #15803d; }

.persona-card__actions { display: flex; gap: 6px; flex: 0 0 auto; }

.persona-card__actions .btn { padding: 5px 9px; line-height: 1; }

.persona-empty {
  text-align: center; padding: 48px 24px;
  border: 1px dashed var(--color-border, #cbd5e1); border-radius: 16px;
}

.persona-empty__icon {
  width: 56px; height: 56px; margin: 0 auto 14px;
  border-radius: 16px; display: grid; place-items: center;
  background: #eef4ff; color: #0466C8;
}

/* Review-modal proposal cards */

.persona-proposal {
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 12px; padding: 14px; margin-bottom: 12px;
  background: var(--color-white, #ffffff);
  transition: opacity .15s ease, border-color .15s ease;
}

.persona-proposal.is-off { opacity: .5; }

.persona-proposal__head { margin-bottom: 10px; }

.persona-proposal__keep {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 600; font-size: 13px; cursor: pointer; margin: 0;
}

.persona-proposal__facts { margin-top: 8px; display: grid; gap: 4px; }

.persona-proposal__fact { font-size: 12px; color: var(--color-text-muted, #64748b); line-height: 1.45; }

.persona-proposal__fact strong { color: var(--color-text, #334155); font-weight: 600; }

/* Dark mode */

[data-theme="dark"] .persona-card,
[data-theme="dark"] .persona-proposal { background: #0f172a; border-color: #1e293b; }

[data-theme="dark"] .persona-card__name { color: #e2e8f0; }

[data-theme="dark"] .persona-card__summary { color: #cbd5e1; }

[data-theme="dark"] .persona-chip { background: #1e293b; color: #cbd5e1; border-color: #334155; }

[data-theme="dark"] .persona-card__footer { border-color: #1e293b; }

[data-theme="dark"] .persona-knowledge { background: #1e293b; color: #64748b; }

[data-theme="dark"] .persona-knowledge.is-synced { background: rgba(21, 128, 61, .22); color: #4ade80; }

[data-theme="dark"] .persona-empty { border-color: #334155; }

[data-theme="dark"] .persona-empty__icon { background: rgba(4, 102, 200, .15); }

[data-theme="dark"] .persona-proposal__fact strong { color: #e2e8f0; }

/* ── Mobile (≤575px) ── */

@media (max-width: 575.98px) {
  .persona-grid { grid-template-columns: 1fr; gap: 12px; }
  .persona-toolbar { width: 100%; }
  .persona-toolbar .btn { flex: 1 1 auto; justify-content: center; }
  .persona-card__footer { flex-wrap: wrap; }
}

/* Know Chat Panel — Chat interface for Know/RAG and Deep Dive tiers
   Brand colors: Vivid Blue #0466C8, Medium Blue #1D75CE, Teal #74C5BD,
   Evergreen #03BFA4 (Know tier), Yellow #EEC35A

   Theming: all interior surfaces use CSS custom properties so light/dark
   are driven by a single set of tokens re-bound at the bottom of the file. */

.know-chat-panel {
  --kc-surface: #ffffff;
  --kc-surface-elev: #f7f8fa;
  --kc-bubble-assistant: #f1f4f9;
  --kc-bubble-user: #0466c8;
  --kc-bubble-user-text: #ffffff;
  --kc-border: rgba(15, 23, 42, 0.08);
  --kc-border-strong: rgba(15, 23, 42, 0.14);
  --kc-text: #0f172a;
  --kc-text-muted: #64748b;
  --kc-chip-bg: rgba(4, 102, 200, 0.06);
  --kc-chip-border: rgba(4, 102, 200, 0.18);
  --kc-chip-hover: rgba(4, 102, 200, 0.12);
  --kc-accent: #0466c8;
  --kc-accent-soft: rgba(4, 102, 200, 0.1);
  --kc-panel-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.04);

  /* Shared gutter tokens (mirror --pr-* so chat + report align) */
  --kc-content-max: 1200px;
  --kc-content-pad-x: clamp(16px, 4vw, 40px);

  display: flex;
  flex-direction: column;
  height: calc(100vh - 80px);
  max-height: 900px;
  width: 100%;
  max-width: var(--kc-content-max);
  margin-inline: auto;
  background: var(--kc-surface);
  color: var(--kc-text);
  border-radius: 12px;
  border: 1px solid var(--kc-border);
  box-shadow: var(--kc-panel-shadow);
  overflow: hidden;
  position: relative;
}

/* Header */

.know-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px var(--kc-content-pad-x);
  border-bottom: 1px solid var(--kc-border);
  background: var(--kc-surface-elev);
  flex-shrink: 0;
}

.know-chat-header__info {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.know-chat-header__icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(180deg, #0466c8, #1d75ce);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(4, 102, 200, 0.22);
}

.know-chat-header__icon svg {
  width: 18px;
  height: 18px;
}

.know-chat-header__titles {
  min-width: 0;
}

.know-chat-header__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--kc-text);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.know-chat-header__subtitle {
  font-size: 12px;
  color: var(--kc-text-muted);
  margin-top: 2px;
}

/* Context strip under header — analysis metadata */

.know-chat-context {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding: 8px 20px;
  border-bottom: 1px solid var(--kc-border);
  background: var(--kc-surface-elev);
  font-size: 11.5px;
  color: var(--kc-text-muted);
  flex-shrink: 0;
}

.know-chat-context__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--kc-chip-bg);
  border: 1px solid var(--kc-chip-border);
  color: var(--kc-accent);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.know-chat-context__dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
}

/* Custom back button (replaces Bootstrap outline-secondary) */

.know-chat-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid var(--kc-border-strong);
  color: var(--kc-text);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  flex-shrink: 0;
}

.know-chat-back:hover {
  background: var(--kc-surface-elev);
  border-color: var(--kc-accent);
  color: var(--kc-accent);
}

.know-chat-back:active {
  transform: translateY(1px);
}

.know-chat-back svg {
  width: 14px;
  height: 14px;
}

/* Messages container */

.know-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px var(--kc-content-pad-x);
  display: flex;
  flex-direction: column;
  gap: 16px;
  scroll-behavior: smooth;
  position: relative;
}

/* Empty state wrapper — hosts the hint line and the starter chips.
   Horizontal padding is 0 so the starter chips align with the input row
   (the .know-chat-messages parent already supplies --kc-content-pad-x). */

.know-chat-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  text-align: center;
  color: var(--kc-text-muted);
  padding: 32px 0 16px;
  font-size: 14px;
  line-height: 1.6;
  gap: 6px;
}

.know-chat-empty__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--kc-text);
}

.know-chat-empty__hint {
  font-size: 12.5px;
  opacity: 0.85;
  margin: 0;
}

/* Suggested prompt chips — fill the messages-container width so the grid's
   left and right edges match the input row's left and right edges. */

.know-chat-suggestions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  width: 100%;
  margin-top: 18px;
}

.know-chat-suggestion {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--kc-chip-bg);
  border: 1px solid var(--kc-chip-border);
  color: var(--kc-text);
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}

.know-chat-suggestion:hover {
  background: var(--kc-chip-hover);
  border-color: var(--kc-accent);
  transform: translateY(-1px);
}

.know-chat-suggestion:focus-visible {
  outline: 2px solid var(--kc-accent);
  outline-offset: 2px;
}

/* Suggestion chip icon — now a 32 px host for a compact AurumLogoLoop,
   so the empty-state chips match the assistant avatar's branded animation.
   Clipping: overflow:hidden + border-radius alone let the loop's wander-
   phase dots and blur-halo glow bleed past the disc edge (reported as
   "blue dots outside the circle"). `clip-path: circle(50%)` forces a hard
   elliptical clip that applies to blur filters and overflowing canvas
   pixels alike; `isolation: isolate` pins the stacking context so nothing
   inside escapes via z-index/filter interactions. */

.know-chat-suggestion__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  margin-top: 0;
  color: var(--kc-accent);
  overflow: hidden;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  isolation: isolate;
  clip-path: circle(50%);
}

.know-chat-suggestion__icon .aurum-logo-loop {
  flex-shrink: 0;
}

.know-chat-suggestion__text {
  flex: 1;
  font-weight: 500;
}

.know-chat-suggestions--loading {
  opacity: 0.5;
  pointer-events: none;
}

.know-chat-suggestion-skeleton {
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(
    90deg,
    var(--kc-chip-bg) 0%,
    var(--kc-chip-hover) 50%,
    var(--kc-chip-bg) 100%
  );
  background-size: 200% 100%;
  animation: know-chat-shimmer 1.4s ease-in-out infinite;
}

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

/* Suggestions error state — shown when the server fails to generate chips
   (e.g. Sanity agentPrompt doc missing). Replaces the chips grid. */

.know-chat-suggestions-error {
  width: 100%;
  max-width: 560px;
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(220, 38, 38, 0.06);
  border: 1px solid rgba(220, 38, 38, 0.25);
  color: var(--kc-text);
  text-align: left;
}

.know-chat-suggestions-error__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #b91c1c;
}

.know-chat-suggestions-error__title svg {
  width: 15px;
  height: 15px;
}

.know-chat-suggestions-error__detail {
  margin: 6px 0 10px;
  font-size: 12.5px;
  color: var(--kc-text-muted);
  line-height: 1.45;
  word-break: break-word;
}

.know-chat-suggestions-error__retry {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  background: var(--kc-surface);
  border: 1px solid var(--kc-border-strong);
  color: var(--kc-text);
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.know-chat-suggestions-error__retry:hover {
  background: var(--kc-surface-elev);
  border-color: var(--kc-accent);
  color: var(--kc-accent);
}

.know-chat-suggestions-error__retry:focus-visible {
  outline: 2px solid var(--kc-accent);
  outline-offset: 2px;
}

.know-chat-suggestions-error__retry svg {
  width: 13px;
  height: 13px;
}

[data-theme="dark"] .know-chat-suggestions-error,
.dark .know-chat-suggestions-error {
  background: rgba(220, 38, 38, 0.1);
  border-color: rgba(248, 113, 113, 0.3);
}

[data-theme="dark"] .know-chat-suggestions-error__title,
.dark .know-chat-suggestions-error__title {
  color: #fca5a5;
}

/* Message rows */

.know-chat-message {
  display: flex;
  gap: 10px;
  max-width: 85%;
  position: relative;
}

.know-chat-message--user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.know-chat-message--assistant {
  align-self: flex-start;
}

/* Avatar */

.know-chat-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(180deg, #0466c8, #1d75ce);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(4, 102, 200, 0.25);
}

/* NOTE: we used to pin `.know-chat-avatar svg { 15px }` for the Lucide
   sparkles icon. That rule (0,1,1 specificity) overrode the loop's own
   `.aurum-logo-loop__svg { 100% }` (0,1,0) once the loop's SVG layer
   became a descendant of the avatar, compressing the bg-circle and blue
   mark into a 15 × 15 box while the canvas dots stayed full-size — the
   "crescent" regression. The avatar no longer hosts any static SVG so
   the rule is gone; see `.know-chat-avatar--loop` below for the new
   sizing approach. */

/* Live AurumLogoLoop variant — the avatar hosts the same branded canvas
   animation `ProcessingView` uses. A few adjustments vs the static disc:
   - size bumped 32→44 px so the dot-converge phase is legible at avatar scale
   - gradient background dropped; the loop paints its own white bg circle
   - box-shadow dropped; the loop ships its own soft radial glow
   - the loop mounts as an inline-flex `.aurum-logo-loop` that sizes itself
     to 44 px via its own --aurum-logo-size CSS var (passed in from JS).
     We just size the host box to match and clip the ~53 px glow halo so
     it doesn't bleed into the bubble row.
   - border-radius relaxed to the default circle; the loop's bg-circle and
     glow already present as a disc. */

.know-chat-avatar--loop {
  width: 44px;
  height: 44px;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
  padding: 0;
  border-radius: 50%;
}

/* The loop is placed inside the avatar's flex container; without
   flex-shrink:0 it gets squished below its intrinsic 44 px if the parent
   (for whatever reason — cached CSS, ancestor flex churn) resolves smaller,
   producing a tiny "speck with scattered dots" render. Pin it. */

.know-chat-avatar--loop .aurum-logo-loop {
  flex-shrink: 0;
}

/* Bubbles */

.know-chat-bubble {
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.6;
  max-width: 100%;
  position: relative;
}

.know-chat-bubble--user {
  background: var(--kc-bubble-user);
  color: var(--kc-bubble-user-text);
  border-bottom-right-radius: 4px;
}

.know-chat-bubble--assistant {
  background: var(--kc-bubble-assistant);
  color: var(--kc-text);
  border-bottom-left-radius: 4px;
}

.know-chat-content {
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

.know-chat-content ul {
  margin: 8px 0;
  padding-left: 20px;
}

.know-chat-content li {
  margin-bottom: 4px;
}

.know-chat-content p {
  margin: 6px 0;
}

.know-chat-content p:first-child {
  margin-top: 0;
}

.know-chat-content p:last-child {
  margin-bottom: 0;
}

/* Copy button on hover for assistant messages */

.know-chat-copy-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--kc-border);
  background: var(--kc-surface);
  color: var(--kc-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s, background 0.15s, border-color 0.15s;
  padding: 0;
}

.know-chat-bubble--assistant:hover .know-chat-copy-btn,
.know-chat-copy-btn:focus-visible {
  opacity: 1;
}

.know-chat-copy-btn:hover {
  color: var(--kc-accent);
  border-color: var(--kc-accent);
}

.know-chat-copy-btn:focus-visible {
  outline: 2px solid var(--kc-accent);
  outline-offset: 2px;
}

.know-chat-copy-btn svg {
  width: 14px;
  height: 14px;
}

.know-chat-copy-btn--copied {
  color: #03bfa4;
  border-color: rgba(3, 191, 164, 0.4);
  opacity: 1;
}

/* Timestamps (hover only) */

.know-chat-timestamp {
  font-size: 10.5px;
  color: var(--kc-text-muted);
  margin-top: 4px;
  opacity: 0;
  transition: opacity 0.15s;
  text-align: right;
}

.know-chat-message:hover .know-chat-timestamp {
  opacity: 0.75;
}

.know-chat-message--user .know-chat-timestamp {
  text-align: left;
}

/* Typing indicator (3-dot pulse inside assistant bubble) */

.know-chat-typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 0;
}

.know-chat-typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--kc-text-muted);
  opacity: 0.35;
  animation: know-chat-typing-bounce 1.2s ease-in-out infinite;
}

.know-chat-typing span:nth-child(2) { animation-delay: 0.15s; }

.know-chat-typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes know-chat-typing-bounce {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* Sources */

.know-chat-sources {
  margin-top: 10px;
  border-top: 1px solid var(--kc-border);
  padding-top: 8px;
}

.know-chat-sources-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--kc-accent);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
  margin-left: -4px;
  border-radius: 4px;
  font-weight: 500;
  font-family: inherit;
}

.know-chat-sources-toggle:focus-visible {
  outline: 2px solid var(--kc-accent);
  outline-offset: 2px;
}

.know-chat-sources-toggle svg {
  width: 14px;
  height: 14px;
}

.know-chat-chevron {
  transition: transform 0.2s;
}

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

.know-chat-sources-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.know-chat-sources-body.know-chat-sources-open {
  max-height: 2000px;
}

.know-chat-sources-list {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.know-chat-source-item {
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--kc-surface-elev);
  border: 1px solid var(--kc-border);
  font-size: 12px;
}

.know-chat-source-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.know-chat-source-tag {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--kc-chip-border);
  color: var(--kc-accent);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.05em;
}

.know-chat-source-score {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid rgba(3, 191, 164, 0.35);
  color: #03bfa4;
  font-size: 10px;
  font-weight: 600;
}

.know-chat-source-text {
  margin: 0;
  color: var(--kc-text-muted);
  line-height: 1.5;
  font-size: 12px;
}

/* Scroll-to-bottom FAB */

.know-chat-scroll-btn {
  position: absolute;
  bottom: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--kc-surface);
  border: 1px solid var(--kc-border-strong);
  color: var(--kc-text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 0.2s, transform 0.2s, color 0.15s, border-color 0.15s;
  z-index: 5;
}

.know-chat-scroll-btn--visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.know-chat-scroll-btn:hover {
  color: var(--kc-accent);
  border-color: var(--kc-accent);
}

.know-chat-scroll-btn:focus-visible {
  outline: 2px solid var(--kc-accent);
  outline-offset: 2px;
}

.know-chat-scroll-btn svg {
  width: 18px;
  height: 18px;
}

/* Input area */

.know-chat-input-area {
  padding: 14px var(--kc-content-pad-x) 16px;
  border-top: 1px solid var(--kc-border);
  background: var(--kc-surface-elev);
  flex-shrink: 0;
}

.know-chat-loading {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: var(--kc-text-muted);
  padding: 8px 0;
}

.know-chat-input-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.know-chat-input {
  flex: 1;
  border: 1px solid var(--kc-border-strong);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 14px;
  font-family: inherit;
  resize: none;
  line-height: 1.5;
  min-height: 48px;
  max-height: 160px;
  background: var(--kc-surface);
  color: var(--kc-text);
  transition: border-color 0.15s, box-shadow 0.15s;
  overflow-y: auto;
}

.know-chat-input::-moz-placeholder {
  color: var(--kc-text-muted);
  opacity: 0.7;
}

.know-chat-input::placeholder {
  color: var(--kc-text-muted);
  opacity: 0.7;
}

.know-chat-input:focus {
  outline: none;
  border-color: var(--kc-accent);
  box-shadow: 0 0 0 3px var(--kc-accent-soft);
}

.know-chat-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.know-chat-send-btn {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(180deg, #0466c8, #1d75ce);
  border: 1px solid #0466c8;
  color: #fff;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s, opacity 0.15s;
}

.know-chat-send-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, #0355a5, #0466c8);
  box-shadow: 0 4px 12px rgba(4, 102, 200, 0.3);
}

.know-chat-send-btn:focus-visible {
  outline: 2px solid var(--kc-accent);
  outline-offset: 2px;
}

.know-chat-send-btn:disabled {
  background: var(--kc-border-strong);
  border-color: var(--kc-border-strong);
  color: var(--kc-text-muted);
  cursor: not-allowed;
  box-shadow: none;
  opacity: 0.7;
}

.know-chat-send-btn svg {
  width: 18px;
  height: 18px;
}

.know-chat-hint {
  font-size: 11px;
  color: var(--kc-text-muted);
  margin-top: 8px;
  text-align: center;
  opacity: 0.7;
}

/* ─── Dark mode token re-binding ──────────────────────────────────────────── */

[data-theme="dark"] .know-chat-panel,
.dark .know-chat-panel {
  --kc-surface: #121212;
  --kc-surface-elev: #1a1a1a;
  --kc-bubble-assistant: #1f1f1f;
  --kc-bubble-user: #0466c8;
  --kc-bubble-user-text: #ffffff;
  --kc-border: rgba(255, 255, 255, 0.08);
  --kc-border-strong: rgba(255, 255, 255, 0.16);
  --kc-text: #fafafa;
  --kc-text-muted: #9ca3af;
  --kc-chip-bg: rgba(4, 102, 200, 0.14);
  --kc-chip-border: rgba(123, 181, 232, 0.28);
  --kc-chip-hover: rgba(4, 102, 200, 0.24);
  --kc-accent: #7bb5e8;
  --kc-accent-soft: rgba(123, 181, 232, 0.15);
  --kc-panel-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset,
                     0 8px 24px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .know-chat-suggestion,
.dark .know-chat-suggestion {
  color: #fafafa;
}

[data-theme="dark"] .know-chat-scroll-btn,
.dark .know-chat-scroll-btn {
  background: #1f1f1f;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .know-chat-copy-btn,
.dark .know-chat-copy-btn {
  background: #1a1a1a;
}

[data-theme="dark"] .know-chat-send-btn:disabled,
.dark .know-chat-send-btn:disabled {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.35);
}

/* ─── Brand Selector ─────────────────────────────────────────────────────── */

.know-brand-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
  gap: 16px;
  color: var(--kc-text-muted, #71717a);
  font-size: 14px;
}

.know-brand-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
  gap: 12px;
  text-align: center;
  color: var(--kc-text-muted, #71717a);
  font-size: 14px;
}

.know-brand-empty__hint {
  font-size: 12px;
  opacity: 0.7;
  max-width: 280px;
  margin: 0;
}

/* Hero card: All Brands */

.know-brand-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 20px 24px;
  background: linear-gradient(180deg, #0466c8 0%, #1d75ce 100%);
  border: none;
  border-radius: 16px;
  cursor: pointer;
  color: #fff;
  font-family: inherit;
  transition: transform 0.2s, box-shadow 0.2s;
  text-align: left;
}

.know-brand-hero:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(4, 102, 200, 0.35);
}

.know-brand-hero:focus-visible {
  outline: 2px solid var(--kc-accent);
  outline-offset: 3px;
}

.know-brand-hero__left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.know-brand-hero__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.know-brand-hero__icon svg {
  width: 22px;
  height: 22px;
}

.know-brand-hero__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
}

.know-brand-hero__meta {
  font-size: 13px;
  opacity: 0.8;
  margin-top: 2px;
}

.know-brand-hero__action {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  opacity: 0.85;
  transition: opacity 0.15s, gap 0.15s;
}

.know-brand-hero:hover .know-brand-hero__action {
  opacity: 1;
  gap: 10px;
}

.know-brand-section-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--kc-text-muted, #71717a);
  margin: 24px 0 12px;
}

.know-brand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
}

.know-brand-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 12px 16px;
  background: var(--kc-surface, #fff);
  border: 1px solid var(--kc-border, rgba(0, 0, 0, 0.08));
  border-radius: 12px;
  cursor: pointer;
  text-align: center;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}

.know-brand-tile:hover {
  border-color: #0466c8;
  box-shadow: 0 4px 16px rgba(4, 102, 200, 0.12);
  transform: translateY(-2px);
}

.know-brand-tile:focus-visible {
  outline: 2px solid #0466c8;
  outline-offset: 2px;
}

.know-brand-tile__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(4, 102, 200, 0.1);
  color: #0466c8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.know-brand-tile__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--kc-text, #1a1a1a);
  line-height: 1.3;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.know-brand-tile__count {
  font-size: 11px;
  color: var(--kc-text-muted, #71717a);
}

/* Dark mode — brand selector */

[data-theme="dark"] .know-brand-hero {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .know-brand-hero:hover {
  box-shadow: 0 8px 24px rgba(4, 102, 200, 0.4);
}

[data-theme="dark"] .know-brand-tile,
.dark .know-brand-tile {
  background: #121212;
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .know-brand-tile:hover,
.dark .know-brand-tile:hover {
  border-color: #7bb5e8;
  box-shadow: 0 4px 16px rgba(4, 102, 200, 0.18);
}

[data-theme="dark"] .know-brand-tile__avatar,
.dark .know-brand-tile__avatar {
  background: rgba(4, 102, 200, 0.2);
  color: #7bb5e8;
}

[data-theme="dark"] .know-brand-tile__name {
  color: #fafafa;
}

/* ==========================================================================
   FORM ELEMENTS - Input, Select, Checkbox, Radio
   Aligned with aurumai-website-frontend design patterns
   ========================================================================== */

/* Input */

.form-control,
.input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"] {
  height: 44px;
  padding: var(--space-2) var(--space-4);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-card);
  font-size: var(--font-size-base);
  color: var(--color-foreground);
  transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
  width: 100%;
}

.form-control::-moz-placeholder, .input::-moz-placeholder, input::-moz-placeholder {
  color: var(--color-foreground-muted);
}

.form-control::placeholder,
.input::placeholder,
input::placeholder {
  color: var(--color-foreground-muted);
}

.form-control:focus,
.input:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus {
  border-color: var(--color-vivid-blue);
  box-shadow: 0 0 0 4px rgba(4, 102, 200, 0.15);
  outline: none;
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .input,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"] {
  background: var(--color-gray-900);
  border-color: var(--color-border);
  color: var(--color-foreground);
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .input:focus,
[data-theme="dark"] input:focus {
  border-color: var(--color-vivid-blue);
  box-shadow: 0 0 0 4px rgba(4, 102, 200, 0.25);
}

/* Textarea */

textarea.form-control,
textarea.input,
textarea {
  height: auto;
  min-height: 100px;
  resize: vertical;
  padding: var(--space-3) var(--space-4);
}

/* Checkbox */

.form-check-input,
.checkbox,
input[type="checkbox"] {
  width: 18px;
  height: 18px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-card);
  cursor: pointer;
  transition: all var(--transition-normal);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.form-check-input:checked,
.checkbox:checked,
input[type="checkbox"]:checked {
  background: var(--color-vivid-blue);
  border-color: var(--color-vivid-blue);
}

.form-check-input:checked::after,
.checkbox:checked::after,
input[type="checkbox"]:checked::after {
  content: "✓";
  color: white;
  font-size: 12px;
  font-weight: bold;
}

.form-check-input:focus,
.checkbox:focus,
input[type="checkbox"]:focus {
  box-shadow: 0 0 0 4px rgba(4, 102, 200, 0.2);
  outline: none;
}

[data-theme="dark"] .form-check-input,
[data-theme="dark"] .checkbox,
[data-theme="dark"] input[type="checkbox"] {
  background: var(--color-gray-900);
  border-color: var(--color-border);
}

/* Radio */

input[type="radio"] {
  width: 18px;
  height: 18px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-card);
  cursor: pointer;
  transition: all var(--transition-normal);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

input[type="radio"]:checked {
  border-color: var(--color-vivid-blue);
  background: var(--color-vivid-blue);
  box-shadow: inset 0 0 0 4px var(--color-card);
}

input[type="radio"]:focus {
  box-shadow: 0 0 0 4px rgba(4, 102, 200, 0.2);
  outline: none;
}

[data-theme="dark"] input[type="radio"] {
  background: var(--color-gray-900);
  border-color: var(--color-border);
}

[data-theme="dark"] input[type="radio"]:checked {
  box-shadow: inset 0 0 0 4px var(--color-gray-900);
}

/* Select */

.form-select,
select {
  height: 44px;
  padding: 0 var(--space-10) 0 var(--space-4);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2371717A' d='M2.5 4.5l3.5 3.5 3.5-3.5'/%3E%3C/svg%3E") no-repeat right var(--space-4) center;
  color: var(--color-foreground);
  font-size: var(--font-size-base);
  cursor: pointer;
  transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 100%;
}

.form-select:focus,
select:focus {
  border-color: var(--color-vivid-blue);
  box-shadow: 0 0 0 4px rgba(4, 102, 200, 0.15);
  outline: none;
}

[data-theme="dark"] .form-select,
[data-theme="dark"] select {
  background-color: var(--color-gray-900);
  border-color: var(--color-border);
}

/* Custom Select Trigger */

.select-trigger {
  height: 44px;
  padding: 0 var(--space-4);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-card);
  color: var(--color-foreground);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  cursor: pointer;
  transition: border-color var(--transition-normal);
}

.select-trigger:hover {
  border-color: var(--color-vivid-blue);
}

.select-content {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  max-height: 300px;
  overflow-y: auto;
}

[data-theme="dark"] .select-content {
  background: var(--color-gray-900);
}

.select-item {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--transition-normal);
}

.select-item:hover {
  background: var(--color-muted);
}

.select-item.selected {
  background: rgba(4, 102, 200, 0.1);
  color: var(--color-vivid-blue);
}

/* Form Group */

.form-group {
  margin-bottom: var(--space-4);
}

.form-label {
  display: block;
  margin-bottom: var(--space-2);
  font-weight: var(--font-weight-medium);
  color: var(--color-foreground);
}

.form-help,
.form-text {
  font-size: var(--font-size-sm);
  color: var(--color-foreground-muted);
  margin-top: var(--space-1);
}

/* Validation States */

.form-control.is-invalid,
.input.is-invalid,
.was-validated .form-control:invalid {
  border-color: var(--color-dark-red);
}

.form-control.is-invalid:focus,
.input.is-invalid:focus {
  box-shadow: 0 0 0 4px rgba(231, 49, 52, 0.2);
}

.form-control.is-valid,
.input.is-valid,
.was-validated .form-control:valid {
  border-color: var(--color-evergreen);
}

.form-control.is-valid:focus,
.input.is-valid:focus {
  box-shadow: 0 0 0 4px rgba(3, 191, 164, 0.2);
}

.invalid-feedback {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-dark-red);
  margin-top: var(--space-1);
}

.valid-feedback {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-evergreen);
  margin-top: var(--space-1);
}

/* Input Group */

.input-group {
  display: flex;
  align-items: stretch;
}

.input-group .form-control {
  border-radius: 0;
}

.input-group .form-control:first-child {
  border-top-left-radius: var(--radius-lg);
  border-bottom-left-radius: var(--radius-lg);
}

.input-group .form-control:last-child {
  border-top-right-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}

.input-group-text {
  display: flex;
  align-items: center;
  padding: 0 var(--space-4);
  background: var(--color-muted);
  border: 2px solid var(--color-border);
  color: var(--color-foreground-muted);
}

[data-theme="dark"] .input-group-text {
  background: var(--color-gray-800);
}

/* Form Check (Bootstrap Override) */

.form-check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-left: 0;
}

.form-check-label {
  color: var(--color-foreground);
  cursor: pointer;
}

/* Already included in dashboard.css */

/* ==========================================================================
   RESPONSIVE GRID SYSTEM
   ========================================================================== */

.grid {
  display: grid;
}

/* Column Counts with Responsive Defaults */

.grid-cols-1 {
  grid-template-columns: repeat(1, 1fr);
}

.grid-cols-2 {
  grid-template-columns: repeat(1, 1fr);
}

.grid-cols-3 {
  grid-template-columns: repeat(1, 1fr);
}

.grid-cols-4 {
  grid-template-columns: repeat(1, 1fr);
}

.grid-cols-5 {
  grid-template-columns: repeat(1, 1fr);
}

.grid-cols-6 {
  grid-template-columns: repeat(1, 1fr);
}

/* Small screens (640px+) */

@media (min-width: 640px) {
  .grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .grid-cols-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .grid-cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .grid-cols-5 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .grid-cols-6 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Medium screens (768px+) */

@media (min-width: 768px) {
  .grid-cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .grid-cols-5 {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .grid-cols-6 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Large screens (1024px+) */

@media (min-width: 1024px) {
  .grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .grid-cols-5 {
    grid-template-columns: repeat(5, 1fr);
  }
  
  .grid-cols-6 {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* Gap Sizes */

.gap-none {
  gap: 0;
}

.gap-sm {
  gap: var(--space-4);
}

.gap-md {
  gap: var(--space-6);
}

.gap-lg {
  gap: var(--space-8);
}

.gap-xl {
  gap: var(--space-10);
}

/* Responsive Gap Sizes */

@media (min-width: 768px) {
  .gap-sm {
    gap: var(--space-6);
  }
  
  .gap-md {
    gap: var(--space-8);
  }
  
  .gap-lg {
    gap: var(--space-10);
  }
  
  .gap-xl {
    gap: var(--space-12);
  }
}

/* Auto-fit and Auto-fill */

.grid-auto-fit {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.grid-auto-fill {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

/* Alignment */

.grid-items-start {
  align-items: start;
}

.grid-items-center {
  align-items: center;
}

.grid-items-end {
  align-items: end;
}

.grid-content-start {
  justify-content: start;
}

.grid-content-center {
  justify-content: center;
}

.grid-content-end {
  justify-content: end;
}

/* Grid layouts */

.metric-grid {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .metric-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .metric-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.swot-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(1, 1fr);
}

@media (min-width: 768px) {
  .swot-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   ICON STYLES - Brand-aligned with Lucide Icons
   ========================================================================== */

.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Brand-Standard Icon Sizes (matching website) */

.icon-xs {
  width: 1rem; /* 16px - Extra Small: Inline icons, badges */
  height: 1rem;
}

.icon-sm {
  width: 1.25rem; /* 20px - Small: CTA buttons, navigation */
  height: 1.25rem;
}

.icon-md {
  width: 1.5rem; /* 24px - Default: Standard icons, stat cards */
  height: 1.5rem;
}

.icon-lg {
  width: 2rem; /* 32px - Large: Feature highlights */
  height: 2rem;
}

.icon-xl {
  width: 6rem; /* 96px - Extra Large: Hero elements, product logos */
  height: 6rem;
}

/* Circular Icon Backgrounds (matching website pattern) */

.icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background-color: var(--color-icon-bg-light);
}

.icon-circle-xs {
  padding: var(--space-2); /* 8px padding */
}

.icon-circle-sm {
  padding: var(--space-2); /* 8px padding */
}

.icon-circle-md {
  padding: var(--space-4); /* 16px padding - Standard */
}

.icon-circle-lg {
  padding: var(--space-6); /* 24px padding - Large */
}

/* Icon Colors */

.icon-primary {
  color: var(--color-vivid-blue);
}

.icon-success {
  color: var(--color-evergreen);
}

.icon-warning {
  color: var(--color-yellow);
}

.icon-danger {
  color: var(--color-dark-red);
}

.icon-muted {
  color: var(--color-foreground-muted);
}

/* Dark Mode */

[data-theme="dark"] .icon-circle {
  background-color: var(--color-icon-bg-dark); /* #333333 */
}

[data-theme="dark"] .icon-primary {
  color: var(--color-vivid-blue);
}

[data-theme="dark"] .icon-success {
  color: var(--color-evergreen);
}

[data-theme="dark"] .icon-warning {
  color: var(--color-yellow);
}

[data-theme="dark"] .icon-danger {
  color: var(--color-dark-red);
}

[data-theme="dark"] .icon-muted {
  color: var(--color-foreground-muted);
}

/* ==========================================================================
   LIST STYLES - Light & Dark Mode Support
   ========================================================================== */

/* Base List Group */

.list-group {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.list-group-item {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-left: 3px solid transparent;
  color: var(--color-foreground);
  padding: var(--space-3) var(--space-4);
  transition: all var(--transition-normal);
}

.list-group-item + .list-group-item {
  border-top: none;
}

.list-group-item:first-child {
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}

.list-group-item:last-child {
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}

.list-group-item:hover {
  border-left-color: var(--color-vivid-blue);
  background: var(--color-muted);
}

.list-group-item.active {
  background: var(--color-vivid-blue);
  border-color: var(--color-vivid-blue);
  color: white;
}

/* Dark Mode */

[data-theme="dark"] .list-group-item {
  background: var(--color-gray-900);
  border-color: var(--color-border);
  color: var(--color-foreground);
}

[data-theme="dark"] .list-group-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-left-color: var(--color-vivid-blue);
}

[data-theme="dark"] .list-group-item.active {
  background: var(--color-vivid-blue);
  color: white;
}

/* List Group Flush (no borders) */

.list-group-flush .list-group-item {
  border-left: none;
  border-right: none;
  border-radius: 0;
}

.list-group-flush .list-group-item:first-child {
  border-top: none;
}

.list-group-flush .list-group-item:last-child {
  border-bottom: none;
}

/* List Unstyled */

.list-unstyled {
  padding-left: 0;
  list-style: none;
}

.list-unstyled li {
  color: var(--color-foreground);
  padding: var(--space-2) 0;
}

/* Inline List */

.list-inline {
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.list-inline-item {
  color: var(--color-foreground);
}

/* ==========================================================================
   PROCESSING VIEW
   In-progress job status screen. Rendered by
   src/assets/js/components/ProcessingView.js.

   Structure:
     .pv2
       .pv2-inner
         .pv2-header
           .pv2-chip.pv2-elapsed
           .pv2-chip.pv2-step-chip
         .pv2-percent
         .pv2-bar (Bootstrap .progress)
         .pv2-current
         .pv2-message
         .pv2-completed
         .pv2-summary
         .pv2-hint
   ========================================================================== */

.pv2 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72vh;
  padding: 64px 16px 48px;
}

.pv2-inner {
  width: 100%;
  max-width: 560px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Persistent logo slot — the AurumLogoLoop canvas lives here and is never
   rebuilt by the re-render cycle. */

.pv2-logo-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 36px;
}

.pv2-logo-slot:empty {
  /* Keep the vertical rhythm even if the logo fails to mount. */
  margin-bottom: 0;
}

/* Content slot holds everything that re-renders each poll / tick. Matches the
   inner flex column so children still stack + center correctly. */

.pv2-content-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* B3: short fade-in animation when the view mode changes (live ->
   cancelling -> terminal). ProcessingView.render() toggles this class via
   a reflow-forced re-add so the animation re-fires on real transitions
   only — not on every 3s poll tick. Without this the swap to the
   terminal card reads as a hard cut (live progress -> red banner in one
   frame), which is jarring after the user has been watching live
   progress for minutes. 200ms is short enough to feel responsive but
   long enough that the transition is perceptible. */

.pv2-content-slot--enter {
  animation: pv2-fade-in 200ms ease-out;
}

@keyframes pv2-fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pv2-content-slot--enter {
    animation: none;
  }
}

/* ─── Header chips ─────────────────────────────────────────────────────── */

.pv2-header {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.pv2-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-family: var(--font-family-primary, 'Urbanist', system-ui, sans-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  border-radius: 999px;
  background: var(--color-surface-alt, rgba(15, 23, 42, 0.04));
  color: var(--color-text-muted, #6b7280);
  border: 1px solid var(--color-border, rgba(15, 23, 42, 0.08));
  white-space: nowrap;
}

.pv2-chip i { opacity: 0.8; }

.pv2-step-chip {
  background: var(--color-primary-soft, rgba(29, 117, 206, 0.08));
  color: var(--color-primary, #1D75CE);
  border-color: var(--color-primary-soft-border, rgba(29, 117, 206, 0.2));
}

/* A4: Frozen elapsed chip on terminal cards. The "Cancelled @ m:ss" /
   "Failed @ m:ss" stamp is a moment-in-time receipt, not an active timer
   — render it in a calmer color so it visually reads as "stopped" rather
   than "still ticking". */

.pv2-elapsed--cancelled {
  background: var(--color-warning-soft, rgba(202, 138, 4, 0.10));
  color: var(--color-warning, #ca8a04);
  border-color: var(--color-warning-soft-border, rgba(202, 138, 4, 0.25));
}

.pv2-elapsed--failed {
  background: var(--color-danger-soft, rgba(220, 38, 38, 0.10));
  color: var(--color-danger, #dc2626);
  border-color: var(--color-danger-soft-border, rgba(220, 38, 38, 0.25));
}

/* B1: Elapsed chip during the optimistic "cancelling" substate. We dim
   it slightly so the user reads "we noticed your click and we're
   stopping" — but we don't recolor to the terminal palette yet because
   the work hasn't actually stopped yet. */

.pv2-elapsed--cancelling {
  opacity: 0.55;
}

/* ─── Percent + bar ────────────────────────────────────────────────────── */

.pv2-percent {
  font-family: var(--font-family-primary, 'Urbanist', system-ui, sans-serif);
  font-size: clamp(3rem, 8vw, 4.5rem);
  font-weight: 700;
  line-height: 1;
  margin: 12px 0 32px;
  color: var(--color-text, inherit);
  letter-spacing: -0.02em;
}

.pv2-bar {
  width: 100%;
  max-width: 400px;
  height: 10px;
  margin: 0 0 40px;
  border-radius: 999px;
  overflow: hidden;
}

.pv2-bar .progress-bar {
  border-radius: 999px;
}

/* ─── Text rows ────────────────────────────────────────────────────────── */

.pv2-current {
  font-size: 17px;
  font-weight: 500;
  margin: 0 0 12px;
  color: var(--color-text, inherit);
}

.pv2-current strong {
  font-weight: 700;
}

.pv2-message {
  font-size: 14px;
  color: var(--color-text-muted, #6b7280);
  margin: 0 0 28px;
  max-width: 440px;
  line-height: 1.5;
}

.pv2-completed {
  margin: 16px 0 28px;
  width: 100%;
}

.pv2-completed-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted, #6b7280);
  margin: 0 0 14px;
}

.pv2-completed-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

/* A2: De-emphasized completed-chip strip for the cancelled card. The same
   chips that read as "successful completion" during a live run shouldn't
   carry the same green success affordance on a cancelled card — that's
   the visual contradiction at the root of the screenshot bug
   (red banner + green chips). Mute the surface and outline; keep the
   check icon so the user still sees what was preserved.

   The wrapper class also dials back the section margin slightly so the
   muted strip doesn't dominate the cancellation banner below it. */

.pv2-completed--muted {
  margin-top: 12px;
  margin-bottom: 18px;
}

.pv2-completed-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 12px;
}

.pv2-completed-badge--muted {
  background: var(--color-surface-alt, rgba(15, 23, 42, 0.05));
  color: var(--color-text-muted, #6b7280);
  border: 1px solid var(--color-border, rgba(15, 23, 42, 0.10));
}

.pv2-completed-badge--muted i {
  color: var(--color-success, #15803d);
  opacity: 0.65;
}

/* D1: Inline summary line under the chip strip on cancelled / failed
   cards. Reassures the user that partial work was preserved (e.g. "2 of
   4 agents completed before stop — partial work retained."). The shield
   icon mirrors the visual language of a "safe" / "preserved" affordance. */

.pv2-preserved-summary {
  font-size: 13px;
  color: var(--color-text-muted, #6b7280);
  margin: -4px 0 18px;
  max-width: 460px;
  line-height: 1.5;
  text-align: center;
}

.pv2-preserved-summary i {
  color: var(--color-success, #15803d);
  opacity: 0.85;
}

.pv2-summary {
  font-size: 13px;
  color: var(--color-text-muted, #6b7280);
  margin: 0 0 28px;
  max-width: 500px;
  line-height: 1.55;
}

.pv2-hint {
  font-size: 13px;
  color: var(--color-text-muted, #6b7280);
  margin: 24px 0 0;
  opacity: 0.8;
}

/* When we're near or past the upper bound of the usual window, render the
   hint at full opacity so it reads as the "we know, we know" acknowledgement
   that pairs with the reassurance toast. */

.pv2-hint--emphasis {
  opacity: 1;
}

/* ─── Finalising pill ───────────────────────────────────────────────────
   Shown in place of .pv2-hint once progress hits 100 % but the backend
   hasn't emitted `status: 'completed'` yet (Formatter still serialising),
   AND while loadResults() awaits the getJob() fetch. Communicates active
   work so the UI doesn't read as stuck at 100 %.
   ─────────────────────────────────────────────────────────────────────── */

.pv2-finalising {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 24px 0 0;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--color-primary-soft, rgba(29, 117, 206, 0.08));
  color: var(--color-primary, #1D75CE);
  border: 1px solid var(--color-primary-soft-border, rgba(29, 117, 206, 0.18));
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.pv2-finalising__spinner {
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: pv2-spin 0.8s linear infinite;
  flex-shrink: 0;
}

@keyframes pv2-spin {
  to { transform: rotate(360deg); }
}

/* ─── Footer actions (Cancel button) ───────────────────────────────────── */

.pv2-footer-actions {
  display: flex;
  justify-content: center;
  margin-top: 24px;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.pv2-footer-actions .btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* B4: Stable-width Cancel button so the "Cancel Analysis" -> "Cancelling…"
   text swap doesn't reflow the footer (which would shift the back-to-past
   button as a side-effect during the most fragile UI moment). The min-
   width is sized for the longest label including the spinner. */

.pv2-cancel-btn {
  min-width: 168px;
  justify-content: center;
}

/* D4: Retry button can carry a credit-cost hint ("Retry analysis (10
   credits)"), so its label is variable-width by design. Reserve a
   sensible minimum so the button doesn't shrink to a tiny pill on the
   shortest label. */

.pv2-retry-btn {
  min-width: 188px;
  justify-content: center;
}

/* ─── Failure state (terminal failed/cancelled) ───────────────────────────
   Shown by ProcessingView in place of the progress bar + hint when
   state.job.status is 'failed' or 'cancelled'. The structured `.failed-banner`
   markup mirrors components/FailedBanner.js so we can swap to the
   component-based version later without restyling.                          */

.pv2-failed-during {
  text-align: center;
  font-size: 1rem;
  color: #b91c1c;
  margin-top: 12px;
  margin-bottom: 8px;
}

.pv2-failed-during strong {
  color: #7f1d1d;
}

.failed-banner {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 18px;
  border-radius: 12px;
  margin-top: 16px;
  border: 1px solid transparent;
  background: #fef2f2;
  color: #7f1d1d;
}

.failed-banner--danger {
  background: #fef2f2;
  border-color: #fecaca;
  color: #7f1d1d;
}

.failed-banner--warning {
  background: #fffbeb;
  border-color: #fde68a;
  color: #78350f;
}

.failed-banner--info {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1e3a8a;
}

/* A5/A6/E4: Cancelled banner — calmer amber/neutral palette so the card
   reads as "stopped intentionally", not "broken". A red/danger variant
   for an intentional user action feels accusatory. The icon is a
   "circle-stop" rather than "exclamation-circle" for the same reason. */

.failed-banner--cancelled {
  background: #fffbeb;
  border-color: #fde68a;
  color: #78350f;
}

[data-theme="dark"] .failed-banner--cancelled {
  background: rgba(202, 138, 4, 0.12);
  border-color: rgba(253, 230, 138, 0.30);
  color: #fcd34d;
}

[data-theme="dark"] .failed-banner--danger {
  background: rgba(220, 38, 38, 0.12);
  border-color: rgba(254, 202, 202, 0.30);
  color: #fca5a5;
}

[data-theme="dark"] .failed-banner--warning {
  background: rgba(202, 138, 4, 0.12);
  border-color: rgba(253, 230, 138, 0.30);
  color: #fcd34d;
}

[data-theme="dark"] .failed-banner--info {
  background: rgba(37, 99, 235, 0.12);
  border-color: rgba(191, 219, 254, 0.30);
  color: #93c5fd;
}

.failed-banner__icon {
  flex: 0 0 auto;
  font-size: 1.25rem;
  line-height: 1.2;
  padding-top: 2px;
}

.failed-banner__body {
  flex: 1 1 auto;
  min-width: 0;
}

.failed-banner__message {
  font-weight: 500;
  line-height: 1.4;
}

.failed-banner__meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 6px;
  font-size: 0.85rem;
  opacity: 0.8;
}

.failed-banner__meta code {
  background: rgba(0, 0, 0, 0.06);
  padding: 1px 6px;
  border-radius: 4px;
}

/* D3: Inline refund receipt rendered inside the cancelled banner so the
   user sees a persistent confirmation of what was returned, even after
   they dismiss the toast. The slightly stronger weight + rotate-left
   icon visually separates it from the surrounding banner copy. */

.failed-banner__refund {
  margin-top: 8px;
  font-size: 0.92rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0;
  opacity: 0.95;
}

/* B1: Cancelling substate — the optimistic intermediate card rendered
   between the user's click and the backend confirmation. A calm,
   centered "we're stopping things" affordance so the click feels
   acknowledged immediately. Color is neutral (no red, no green) because
   the work is in flux. */

.pv2-cancelling {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  margin: 24px 0;
  border-radius: 14px;
  background: var(--color-surface-alt, rgba(15, 23, 42, 0.04));
  border: 1px solid var(--color-border, rgba(15, 23, 42, 0.08));
  max-width: 480px;
  width: 100%;
  text-align: left;
}

.pv2-cancelling__spinner {
  width: 22px;
  height: 22px;
  border: 2px solid var(--color-text-muted, #6b7280);
  border-right-color: transparent;
  border-radius: 50%;
  animation: pv2-spin 0.8s linear infinite;
  flex-shrink: 0;
}

.pv2-cancelling__body {
  flex: 1 1 auto;
  min-width: 0;
}

.pv2-cancelling__title {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text, inherit);
}

.pv2-cancelling__hint {
  margin: 0;
  font-size: 13px;
  color: var(--color-text-muted, #6b7280);
  line-height: 1.4;
}

[data-theme="dark"] .pv2-cancelling {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.10);
}

[data-theme="dark"] .pv2-completed-badge--muted {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.65);
  border-color: rgba(255, 255, 255, 0.10);
}

/* ==========================================================================
   RESULTS DASHBOARD - Asymmetric Bento Grid Layout
   ========================================================================== */

/* Results Dashboard Container - Aligned with home page module cards grid */

.results-dashboard {
  padding: var(--space-6) var(--space-6);
  max-width: 1200px; /* Match module cards grid for 2-column layout */
  margin: 0 auto;
  width: 100%;
}

@media (min-width: 1024px) {
  .results-dashboard {
    max-width: 1400px; /* Match module cards grid for 3-column layout */
    padding: var(--space-8) var(--space-8);
  }
}

/* ==========================================================================
   HEADER
   ========================================================================== */

.results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
  gap: var(--space-4);
}

.results-header__title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-foreground);
  margin: 0 0 var(--space-1) 0;
}

.results-header__meta {
  color: var(--color-foreground-muted);
  font-size: var(--font-size-sm);
  margin: 0;
}

.results-header__action {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: linear-gradient(135deg, var(--color-vivid-blue), var(--color-medium-blue));
  border: none;
  border-radius: var(--radius-xl);
  color: white !important;
  font-weight: var(--font-weight-semibold);
  transition: all var(--duration-normal) var(--easing-smooth);
}

.results-header__action i {
  color: white !important;
}

.results-header__action span {
  color: white !important;
}

.results-header__action:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(4, 102, 200, 0.3);
}

/* Outline variant for secondary actions (Download, Ask about report) */

.results-header__action--outline {
  background: transparent;
  border: 2px solid var(--color-vivid-blue);
  color: var(--color-vivid-blue) !important;
}

.results-header__action--outline i,
.results-header__action--outline span {
  color: var(--color-vivid-blue) !important;
}

.results-header__action--outline:hover {
  background: rgba(4, 102, 200, 0.05);
}

.results-header__action i {
  width: 18px;
  height: 18px;
}

/* ==========================================================================
   BENTO GRID
   ========================================================================== */

.results-bento {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.bento-row {
  display: grid;
  gap: var(--space-4);
}

/* Hero row: Score card (2/3) + Position card (1/3) */

.bento-row--hero {
  grid-template-columns: 2fr 1fr;
}

/* Stats row: 4 equal cards */

.bento-row--stats {
  grid-template-columns: repeat(4, 1fr);
}

/* ==========================================================================
   BENTO CARDS
   ========================================================================== */

.bento-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-5);
  transition: all var(--duration-normal) var(--easing-smooth);
}

.bento-card:hover {
  border-color: rgba(4, 102, 200, 0.3);
  box-shadow: 0 8px 32px rgba(4, 102, 200, 0.08);
}

[data-theme="dark"] .bento-card {
  background: var(--color-gray-900);
  border-color: var(--color-border);
}

[data-theme="dark"] .bento-card:hover {
  border-color: rgba(4, 102, 200, 0.4);
  box-shadow: 0 8px 32px rgba(4, 102, 200, 0.15);
}

.bento-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-foreground-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.bento-card__header i {
  width: 16px;
  height: 16px;
  color: var(--color-vivid-blue);
}

/* ==========================================================================
   SCORE CARD
   ========================================================================== */

.bento-card--score {
  background: linear-gradient(135deg, rgba(4, 102, 200, 0.05) 0%, rgba(3, 191, 164, 0.03) 100%);
}

[data-theme="dark"] .bento-card--score {
  background: linear-gradient(135deg, rgba(4, 102, 200, 0.1) 0%, rgba(3, 191, 164, 0.05) 100%);
}

.bento-score {
  display: flex;
  align-items: baseline;
  margin-bottom: var(--space-4);
}

.bento-score__value {
  font-size: 4rem;
  font-weight: var(--font-weight-bold);
  background: linear-gradient(135deg, var(--color-vivid-blue), var(--color-evergreen));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}

.bento-score__max {
  font-size: var(--font-size-2xl);
  color: var(--color-foreground-muted);
  margin-left: var(--space-1);
}

.bento-score__bar {
  height: 8px;
  background: var(--color-muted);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-bottom: var(--space-3);
}

[data-theme="dark"] .bento-score__bar {
  background: var(--color-gray-800);
}

.bento-score__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-vivid-blue), var(--color-evergreen));
  border-radius: var(--radius-full);
  transition: width 1s var(--easing-smooth);
}

.bento-score__label {
  font-size: var(--font-size-sm);
  color: var(--color-evergreen);
  font-weight: var(--font-weight-medium);
}

/* ==========================================================================
   POSITION CARD
   ========================================================================== */

.bento-card--position {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: linear-gradient(135deg, rgba(3, 191, 164, 0.05) 0%, rgba(4, 102, 200, 0.03) 100%);
}

[data-theme="dark"] .bento-card--position {
  background: linear-gradient(135deg, rgba(3, 191, 164, 0.1) 0%, rgba(4, 102, 200, 0.05) 100%);
}

.bento-card--position .bento-card__header {
  justify-content: center;
}

.bento-position {
  margin-bottom: var(--space-3);
}

.bento-position__badge {
  display: inline-block;
  padding: var(--space-2) var(--space-5);
  background: linear-gradient(135deg, var(--color-evergreen), var(--color-vivid-blue));
  color: white;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  border-radius: var(--radius-full);
  box-shadow: 0 4px 16px rgba(3, 191, 164, 0.3);
}

.bento-position__desc {
  font-size: var(--font-size-sm);
  color: var(--color-foreground-muted);
}

/* ==========================================================================
   INSIGHTS CARD
   ========================================================================== */

.bento-card--insights {
  padding: var(--space-6);
}

.bento-insights {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.bento-insight {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-muted);
  border-radius: var(--radius-xl);
  border-left: 3px solid var(--color-vivid-blue);
  animation: slideInLeft 0.4s ease-out both;
}

[data-theme="dark"] .bento-insight {
  background: rgba(255, 255, 255, 0.03);
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.bento-insight__icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(4, 102, 200, 0.1), rgba(3, 191, 164, 0.1));
  border-radius: var(--radius-lg);
  flex-shrink: 0;
}

.bento-insight__icon i {
  width: 18px;
  height: 18px;
  color: var(--color-vivid-blue);
}

.bento-insight__text {
  color: var(--color-foreground);
  font-size: var(--font-size-base);
}

/* ==========================================================================
   STAT CARDS
   ========================================================================== */

.bento-stat {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  transition: all var(--duration-normal) var(--easing-smooth);
}

.bento-stat:hover {
  transform: translateY(-2px);
}

[data-theme="dark"] .bento-stat {
  background: var(--color-gray-900);
}

.bento-stat__icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  flex-shrink: 0;
}

.bento-stat__icon i {
  width: 22px;
  height: 22px;
}

.bento-stat--blue .bento-stat__icon {
  background: rgba(4, 102, 200, 0.1);
  color: var(--color-vivid-blue);
}

.bento-stat--teal .bento-stat__icon {
  background: rgba(3, 191, 164, 0.1);
  color: var(--color-evergreen);
}

.bento-stat--purple .bento-stat__icon {
  background: rgba(139, 92, 246, 0.1);
  color: #8B5CF6;
}

.bento-stat--orange .bento-stat__icon {
  background: rgba(249, 115, 22, 0.1);
  color: #F97316;
}

.bento-stat__value {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-foreground);
  line-height: 1;
}

.bento-stat__label {
  font-size: var(--font-size-xs);
  color: var(--color-foreground-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ==========================================================================
   DETAILS CARD (Expandable)
   ========================================================================== */

.bento-card--details {
  overflow: hidden;
}

.bento-card__header--collapsible {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bento-card__header-left {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.bento-card__chevron {
  width: 20px;
  height: 20px;
  transition: transform var(--duration-normal) var(--easing-smooth);
}

.bento-card--details.expanded .bento-card__chevron {
  transform: rotate(180deg);
}

.bento-details {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--easing-smooth);
}

.bento-card--details.expanded .bento-details {
  max-height: 2000px;
}

/* ==========================================================================
   LEGACY STYLES (for schema-based rendering)
   ========================================================================== */

/* Results Header - Legacy */

.results-dashboard h4 {
  color: var(--color-foreground);
  font-weight: var(--font-weight-semibold);
}

.results-dashboard .text-muted {
  color: var(--color-foreground-muted) !important;
}

/* Card Overrides for Results */

.results-dashboard .card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

[data-theme="dark"] .results-dashboard .card {
  background: var(--color-gray-900);
  border-color: var(--color-border);
}

.results-dashboard .card-header {
  background: transparent;
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-4) var(--space-6);
}

[data-theme="dark"] .results-dashboard .card-header {
  background: rgba(255, 255, 255, 0.02);
}

.results-dashboard .card-header h5 {
  color: var(--color-foreground);
  margin: 0;
  font-weight: var(--font-weight-semibold);
}

.results-dashboard .card-body {
  padding: var(--space-6);
}

.results-dashboard .card-title {
  color: var(--color-foreground);
}

.results-dashboard .card-text {
  color: var(--color-foreground-muted);
}

/* Card Text Field - Label and content on same line, wrapped content aligns with label */

.results-dashboard .card-text-field {
  display: block !important;
  color: var(--color-foreground-muted);
  text-align: left !important;
  margin-bottom: 0.25rem !important;
  line-height: 1.5;
}

.results-dashboard .card-text-field .field-label {
  display: inline !important;
  white-space: nowrap !important;
  text-align: left !important;
  margin-right: 0.25rem;
}

.results-dashboard .card-text-field .field-content {
  display: inline !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  text-align: left !important;
  text-indent: 0 !important;
  /* When content wraps, it will naturally align with the start of the line (label position) */
}

[data-theme="dark"] .results-dashboard .card-text-field {
  color: var(--color-foreground-muted);
}

/* List Text Field - Label and content on same line, wrapped content aligns with label */

.results-dashboard .list-text-field {
  display: block !important;
  color: var(--color-foreground-muted);
  text-align: left !important;
  margin-bottom: 0.25rem !important;
  line-height: 1.5;
}

.results-dashboard .list-text-field .field-label {
  display: inline !important;
  white-space: nowrap !important;
  text-align: left !important;
  margin-right: 0.25rem;
}

.results-dashboard .list-text-field .field-content {
  display: inline !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  text-align: left !important;
  text-indent: 0 !important;
  /* When content wraps, it will naturally align with the start of the line (label position) */
}

[data-theme="dark"] .results-dashboard .list-text-field {
  color: var(--color-foreground-muted);
}

/* Quadrant Text Field - Label and content on same line, wrapped content aligns with label */

.results-dashboard .quadrant-text-field {
  display: block !important;
  color: var(--color-foreground-muted);
  text-align: left !important;
  margin-bottom: 0.25rem !important;
  line-height: 1.5;
}

.results-dashboard .quadrant-text-field .field-label {
  display: inline !important;
  white-space: nowrap !important;
  text-align: left !important;
  margin-right: 0.25rem;
}

.results-dashboard .quadrant-text-field .field-content {
  display: inline !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  text-align: left !important;
  text-indent: 0 !important;
}

[data-theme="dark"] .results-dashboard .quadrant-text-field {
  color: var(--color-foreground-muted);
}

/* Force left alignment for all text fields in generic lists and cards */

.results-dashboard .generic-list .card-body {
  text-align: left !important;
}

.results-dashboard .generic-list .card-body p {
  text-align: left !important;
}

.results-dashboard .generic-list .card-body .fw-medium {
  text-align: left !important;
}

/* List Group for Results */

.results-dashboard .list-group {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.results-dashboard .list-group-item {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-left: 3px solid transparent;
  color: var(--color-foreground);
  padding: var(--space-4);
  transition: all var(--transition-normal);
}

.results-dashboard .list-group-item + .list-group-item {
  border-top: none;
}

.results-dashboard .list-group-item:first-child {
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}

.results-dashboard .list-group-item:last-child {
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}

.results-dashboard .list-group-item:hover {
  background: var(--color-muted);
  border-left-color: var(--color-vivid-blue);
}

[data-theme="dark"] .results-dashboard .list-group-item {
  background: var(--color-gray-900);
  border-color: var(--color-border);
  color: var(--color-foreground);
}

[data-theme="dark"] .results-dashboard .list-group-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* Progress Bars */

.results-dashboard .progress {
  background: var(--color-muted);
  border-radius: var(--radius-full);
  overflow: hidden;
}

[data-theme="dark"] .results-dashboard .progress {
  background: var(--color-gray-800);
}

.results-dashboard .progress-bar {
  border-radius: var(--radius-full);
}

/* Gauge Labels */

.results-dashboard .fw-bold {
  color: var(--color-foreground);
}

/* Chart Container - Ensure proper centering */

.results-dashboard .chart-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* ApexCharts radialBar centering */

.results-dashboard .apexcharts-radialbar {
  display: flex;
  align-items: center;
  justify-content: center;
}

.results-dashboard .apexcharts-datalabel-value {
  text-align: center !important;
  margin: 0 auto !important;
}

/* Agent Results */

.results-dashboard .agent-results {
  padding: var(--space-4);
}

.results-dashboard .agent-results h6 {
  color: var(--color-foreground);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-3);
}

.results-dashboard .agent-results p {
  color: var(--color-foreground-muted);
}

/* Tab Content */

.results-dashboard .tab-content {
  padding: var(--space-4) 0;
}

.results-dashboard .tab-pane {
  color: var(--color-foreground);
}

/* Nav Tabs in Results */

.results-dashboard .nav-tabs {
  border-bottom: 1px solid var(--color-border);
  gap: var(--space-2);
}

/* Tab Container in Results Dashboard */

.results-dashboard .tab-container .nav-pills .nav-link.active,
.results-dashboard .tab-container .nav-pills .nav-link.active *,
.results-dashboard .tab-container .nav-pills .nav-link.active span,
.results-dashboard .tab-container .nav-pills .nav-link.active i {
  background: var(--color-vivid-blue) !important;
  color: white !important;
}

.results-dashboard .tab-container .nav-pills .nav-link.active.text-primary,
.results-dashboard .tab-container .nav-pills .nav-link.active.text-info,
.results-dashboard .tab-container .nav-pills .nav-link.active.text-warning,
.results-dashboard .tab-container .nav-pills .nav-link.active.text-success,
.results-dashboard .tab-container .nav-pills .nav-link.active.text-secondary,
.results-dashboard .tab-container .nav-pills .nav-link.active.text-danger {
  color: white !important;
}

.results-dashboard .tab-container .nav-pills .nav-link.active.text-primary *,
.results-dashboard .tab-container .nav-pills .nav-link.active.text-info *,
.results-dashboard .tab-container .nav-pills .nav-link.active.text-warning *,
.results-dashboard .tab-container .nav-pills .nav-link.active.text-success *,
.results-dashboard .tab-container .nav-pills .nav-link.active.text-secondary *,
.results-dashboard .tab-container .nav-pills .nav-link.active.text-danger * {
  color: white !important;
}

.results-dashboard .nav-tabs .nav-link {
  color: var(--color-foreground-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: var(--space-3) var(--space-4);
  font-weight: var(--font-weight-medium);
  transition: all var(--transition-normal);
}

.results-dashboard .nav-tabs .nav-link:hover {
  color: var(--color-vivid-blue);
  border-bottom-color: var(--color-gray-300);
}

.results-dashboard .nav-tabs .nav-link.active {
  color: white !important;
  border-bottom-color: var(--color-vivid-blue);
  background: var(--color-vivid-blue);
}

/* Override Bootstrap text color classes when tab is active */

.results-dashboard .nav-tabs .nav-link.active.text-primary,
.results-dashboard .nav-tabs .nav-link.active.text-info,
.results-dashboard .nav-tabs .nav-link.active.text-warning,
.results-dashboard .nav-tabs .nav-link.active.text-success,
.results-dashboard .nav-tabs .nav-link.active.text-secondary,
.results-dashboard .nav-tabs .nav-link.active.text-danger {
  color: white !important;
}

[data-theme="dark"] .results-dashboard .nav-tabs .nav-link {
  color: var(--color-foreground-muted);
}

[data-theme="dark"] .results-dashboard .nav-tabs .nav-link:hover {
  color: var(--color-vivid-blue);
}

[data-theme="dark"] .results-dashboard .nav-tabs .nav-link.active {
  color: white !important;
  background: var(--color-vivid-blue);
  border-bottom-color: var(--color-vivid-blue);
}

/* Override Bootstrap text color classes when tab is active in dark mode */

[data-theme="dark"] .results-dashboard .nav-tabs .nav-link.active.text-primary,
[data-theme="dark"] .results-dashboard .nav-tabs .nav-link.active.text-info,
[data-theme="dark"] .results-dashboard .nav-tabs .nav-link.active.text-warning,
[data-theme="dark"] .results-dashboard .nav-tabs .nav-link.active.text-success,
[data-theme="dark"] .results-dashboard .nav-tabs .nav-link.active.text-secondary,
[data-theme="dark"] .results-dashboard .nav-tabs .nav-link.active.text-danger {
  color: white !important;
}

/* Results dashboard nav-pills active state */

.results-dashboard .nav-pills .nav-link.active,
.results-dashboard .nav-pills .nav-link.active * {
  background: var(--color-vivid-blue);
  color: white !important;
}

.results-dashboard .nav-pills .nav-link.active span,
.results-dashboard .nav-pills .nav-link.active i {
  color: white !important;
}

.results-dashboard .nav-pills .nav-link.active.text-primary,
.results-dashboard .nav-pills .nav-link.active.text-info,
.results-dashboard .nav-pills .nav-link.active.text-warning,
.results-dashboard .nav-pills .nav-link.active.text-success,
.results-dashboard .nav-pills .nav-link.active.text-secondary,
.results-dashboard .nav-pills .nav-link.active.text-danger {
  color: white !important;
}

.results-dashboard .nav-pills .nav-link.active.text-primary *,
.results-dashboard .nav-pills .nav-link.active.text-info *,
.results-dashboard .nav-pills .nav-link.active.text-warning *,
.results-dashboard .nav-pills .nav-link.active.text-success *,
.results-dashboard .nav-pills .nav-link.active.text-secondary *,
.results-dashboard .nav-pills .nav-link.active.text-danger * {
  color: white !important;
}

[data-theme="dark"] .results-dashboard .nav-pills .nav-link.active,
[data-theme="dark"] .results-dashboard .nav-pills .nav-link.active * {
  background: var(--color-vivid-blue);
  color: white !important;
}

[data-theme="dark"] .results-dashboard .nav-pills .nav-link.active span,
[data-theme="dark"] .results-dashboard .nav-pills .nav-link.active i {
  color: white !important;
}

[data-theme="dark"] .results-dashboard .nav-pills .nav-link.active.text-primary,
[data-theme="dark"] .results-dashboard .nav-pills .nav-link.active.text-info,
[data-theme="dark"] .results-dashboard .nav-pills .nav-link.active.text-warning,
[data-theme="dark"] .results-dashboard .nav-pills .nav-link.active.text-success,
[data-theme="dark"] .results-dashboard .nav-pills .nav-link.active.text-secondary,
[data-theme="dark"] .results-dashboard .nav-pills .nav-link.active.text-danger {
  color: white !important;
}

[data-theme="dark"] .results-dashboard .nav-pills .nav-link.active.text-primary *,
[data-theme="dark"] .results-dashboard .nav-pills .nav-link.active.text-info *,
[data-theme="dark"] .results-dashboard .nav-pills .nav-link.active.text-warning *,
[data-theme="dark"] .results-dashboard .nav-pills .nav-link.active.text-success *,
[data-theme="dark"] .results-dashboard .nav-pills .nav-link.active.text-secondary *,
[data-theme="dark"] .results-dashboard .nav-pills .nav-link.active.text-danger * {
  color: white !important;
}

/* Badges in Results */

.results-dashboard .badge {
  font-weight: var(--font-weight-medium);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
}

.results-dashboard .badge.bg-primary {
  background: var(--color-vivid-blue) !important;
  color: white;
}

.results-dashboard .badge.bg-success {
  background: var(--color-evergreen) !important;
  color: white;
}

.results-dashboard .badge.bg-warning {
  background: var(--color-yellow) !important;
  color: var(--color-black);
}

.results-dashboard .badge.bg-danger {
  background: var(--color-dark-red) !important;
  color: white;
}

.results-dashboard .badge.bg-info {
  background: var(--color-vivid-blue) !important;
  color: white;
}

.results-dashboard .badge.bg-secondary {
  background: var(--color-gray-500) !important;
  color: white;
}

/* Text Colors */

.results-dashboard .text-success {
  color: var(--color-evergreen) !important;
}

.results-dashboard .text-warning {
  color: var(--color-yellow) !important;
}

.results-dashboard .text-danger {
  color: var(--color-dark-red) !important;
}

/* Pre/Code blocks for JSON */

.results-dashboard pre {
  background: var(--color-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  color: var(--color-foreground);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  overflow-x: auto;
}

[data-theme="dark"] .results-dashboard pre {
  background: var(--color-gray-900);
  border-color: var(--color-border);
}

/* Small/Muted Text */

.results-dashboard small,
.results-dashboard .small {
  color: var(--color-foreground-muted);
}

/* Icons in Results */

.results-dashboard [data-lucide="lightbulb"] {
  color: var(--color-vivid-blue) !important;
}

.results-dashboard [data-lucide="database"] {
  color: var(--color-vivid-blue);
}

/* Nested Cards */

.results-dashboard .card .card {
  border: 1px solid var(--color-border);
}

[data-theme="dark"] .results-dashboard .card .card {
  background: rgba(255, 255, 255, 0.02);
}

/* Headings */

.results-dashboard h6 {
  color: var(--color-foreground);
  font-weight: var(--font-weight-semibold);
}

/* Spans and Labels */

.results-dashboard span {
  color: var(--color-foreground);
}

.results-dashboard span.text-muted {
  color: var(--color-foreground-muted) !important;
}

/* Loading State */

.results-dashboard .spinner-border {
  color: var(--color-vivid-blue);
}

.results-dashboard .text-center p {
  color: var(--color-foreground-muted);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {
  .bento-row--hero {
    grid-template-columns: 1fr 1fr;
  }
  
  .bento-row--stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .results-dashboard {
    padding: var(--space-4);
  }
  
  .bento-row--hero {
    grid-template-columns: 1fr;
  }
  
  .bento-row--stats {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .results-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .bento-score__value {
    font-size: 3rem;
  }
  
  .results-dashboard .card-body {
    padding: var(--space-4);
  }
}

@media (max-width: 480px) {
  .bento-row--stats {
    grid-template-columns: 1fr;
  }
  
  .bento-insight {
    flex-direction: column;
    text-align: center;
  }
  
  .bento-insight__icon {
    margin-bottom: var(--space-2);
  }
}

/* ==========================================================================
   GENERIC GRID - Responsive Column Layout
   ========================================================================== */

/* Base: Mobile-first (1 column) */

.results-dashboard .generic-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

/* Small screens (≥640px): 2 columns */

@media (min-width: 640px) {
  .results-dashboard .generic-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Medium screens (≥768px): 3 columns (default for entity profile) */

@media (min-width: 768px) {
  .results-dashboard .generic-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* Large screens (≥1024px): 4 columns */

@media (min-width: 1024px) {
  .results-dashboard .generic-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* Override for 2-column grids (explicit 2-column config) */

.results-dashboard .generic-grid[data-columns="2"] {
  grid-template-columns: 1fr !important;
}

@media (min-width: 640px) {
  .results-dashboard .generic-grid[data-columns="2"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Override for 3-column grids (explicit 3-column config like entity profile) */

.results-dashboard .generic-grid[data-columns="3"] {
  grid-template-columns: 1fr !important;
}

@media (min-width: 640px) {
  .results-dashboard .generic-grid[data-columns="3"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (min-width: 768px) {
  .results-dashboard .generic-grid[data-columns="3"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ==========================================================================
   GRID CELL COLUMN SPANNING - Responsive
   ========================================================================== */

/* On mobile (<640px): Ignore colSpan, all cells stack (span 1) */

.results-dashboard .generic-grid .grid-cell {
  grid-column: span 1;
}

/* On small screens (≥640px): Apply colSpan for 2-column grids */

@media (min-width: 640px) {
  /* 2-column grid colSpan support - starts when 2-column grid becomes active */
  .results-dashboard .generic-grid[data-columns="2"] .grid-cell[data-colspan="2"],
  .results-dashboard .generic-grid[data-columns="2"] .grid-cell[data-colspan="3"] {
    grid-column: span 2 !important; /* Full width in 2-column grid */
  }
}

/* On medium+ screens (≥768px): Apply colSpan for 3-column grids */

@media (min-width: 768px) {
  /* 3-column grid colSpan support */
  .results-dashboard .generic-grid[data-columns="3"] .grid-cell[data-colspan="3"] {
    grid-column: span 3 !important;
  }
  
  .results-dashboard .generic-grid[data-columns="3"] .grid-cell[data-colspan="2"] {
    grid-column: span 2 !important;
  }
}

/* ================================
   GENERIC GRID - COMPREHENSIVE POSITIONING SUPPORT
   Supports Level 1 (span), Level 2 (explicit), Level 3 (template)
   ================================ */

/* Base grid setup with flexible rows */

.results-dashboard .generic-grid {
  display: grid;
  gap: 1rem;
  width: 100%;
}

/* Default: 1 column on mobile */

.results-dashboard .generic-grid {
  grid-template-columns: 1fr;
}

/* Responsive columns */

@media (min-width: 640px) {
  .results-dashboard .generic-grid[data-columns="2"] {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .results-dashboard .generic-grid[data-columns="3"] {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .results-dashboard .generic-grid[data-columns="4"] {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1024px) {
  .results-dashboard .generic-grid[data-columns="4"] {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Auto rows with auto height */

.results-dashboard .generic-grid {
  grid-auto-rows: auto;
}

/* Explicit rows */

.results-dashboard .generic-grid[data-rows="2"] {
  grid-template-rows: repeat(2, auto);
}

.results-dashboard .generic-grid[data-rows="3"] {
  grid-template-rows: repeat(3, auto);
}

.results-dashboard .generic-grid[data-rows="4"] {
  grid-template-rows: repeat(4, auto);
}

/* Grid auto-flow control */

.results-dashboard .generic-grid[data-flow="column"] {
  grid-auto-flow: column;
}

.results-dashboard .generic-grid[data-flow="dense"] {
  grid-auto-flow: dense;
}

/* ================================
   LEVEL 1: SPAN-BASED POSITIONING
   ================================ */

/* Column spanning - Responsive */

@media (min-width: 640px) {
  .results-dashboard .generic-grid[data-columns="2"] .grid-cell[data-colspan="2"],
  .results-dashboard .generic-grid[data-columns="2"] .grid-cell[data-colspan="3"] {
    grid-column: span 2 !important;
  }
}

@media (min-width: 768px) {
  .results-dashboard .generic-grid[data-columns="3"] .grid-cell[data-colspan="3"] {
    grid-column: span 3 !important;
  }
  
  .results-dashboard .generic-grid[data-columns="3"] .grid-cell[data-colspan="2"] {
    grid-column: span 2 !important;
  }
  
  .results-dashboard .generic-grid[data-columns="4"] .grid-cell[data-colspan="4"] {
    grid-column: span 4 !important;
  }
  
  .results-dashboard .generic-grid[data-columns="4"] .grid-cell[data-colspan="3"] {
    grid-column: span 3 !important;
  }
  
  .results-dashboard .generic-grid[data-columns="4"] .grid-cell[data-colspan="2"] {
    grid-column: span 2 !important;
  }
}

/* Row spanning - NEW! */

.results-dashboard .generic-grid .grid-cell[data-rowspan="2"] {
  grid-row: span 2;
}

.results-dashboard .generic-grid .grid-cell[data-rowspan="3"] {
  grid-row: span 3;
}

.results-dashboard .generic-grid .grid-cell[data-rowspan="4"] {
  grid-row: span 4;
}

/* ================================
   LEVEL 2: EXPLICIT POSITIONING
   ================================ */

/* Grid column explicit positioning */

.results-dashboard .generic-grid .grid-cell[data-grid-column] {
  grid-column: var(--grid-column);
}

/* Apply data-grid-column as CSS variable for responsive control */

.results-dashboard .generic-grid .grid-cell[data-grid-column="1"] { --grid-column: 1; grid-column: 1; }

.results-dashboard .generic-grid .grid-cell[data-grid-column="2"] { --grid-column: 2; grid-column: 2; }

.results-dashboard .generic-grid .grid-cell[data-grid-column="3"] { --grid-column: 3; grid-column: 3; }

.results-dashboard .generic-grid .grid-cell[data-grid-column="4"] { --grid-column: 4; grid-column: 4; }

/* Span syntax: "1 / 3" means start at 1, end at 3 (span 2 columns) */

.results-dashboard .generic-grid .grid-cell[data-grid-column="1 / 2"] { grid-column: 1 / 2; }

.results-dashboard .generic-grid .grid-cell[data-grid-column="1 / 3"] { grid-column: 1 / 3; }

.results-dashboard .generic-grid .grid-cell[data-grid-column="1 / 4"] { grid-column: 1 / 4; }

.results-dashboard .generic-grid .grid-cell[data-grid-column="1 / 5"] { grid-column: 1 / 5; }

.results-dashboard .generic-grid .grid-cell[data-grid-column="2 / 3"] { grid-column: 2 / 3; }

.results-dashboard .generic-grid .grid-cell[data-grid-column="2 / 4"] { grid-column: 2 / 4; }

.results-dashboard .generic-grid .grid-cell[data-grid-column="2 / 5"] { grid-column: 2 / 5; }

.results-dashboard .generic-grid .grid-cell[data-grid-column="3 / 4"] { grid-column: 3 / 4; }

.results-dashboard .generic-grid .grid-cell[data-grid-column="3 / 5"] { grid-column: 3 / 5; }

.results-dashboard .generic-grid .grid-cell[data-grid-column="4 / 5"] { grid-column: 4 / 5; }

/* Grid row explicit positioning */

.results-dashboard .generic-grid .grid-cell[data-grid-row="1"] { grid-row: 1; }

.results-dashboard .generic-grid .grid-cell[data-grid-row="2"] { grid-row: 2; }

.results-dashboard .generic-grid .grid-cell[data-grid-row="3"] { grid-row: 3; }

.results-dashboard .generic-grid .grid-cell[data-grid-row="4"] { grid-row: 4; }

.results-dashboard .generic-grid .grid-cell[data-grid-row="5"] { grid-row: 5; }

/* Row span syntax */

.results-dashboard .generic-grid .grid-cell[data-grid-row="1 / 2"] { grid-row: 1 / 2; }

.results-dashboard .generic-grid .grid-cell[data-grid-row="1 / 3"] { grid-row: 1 / 3; }

.results-dashboard .generic-grid .grid-cell[data-grid-row="1 / 4"] { grid-row: 1 / 4; }

.results-dashboard .generic-grid .grid-cell[data-grid-row="1 / 5"] { grid-row: 1 / 5; }

.results-dashboard .generic-grid .grid-cell[data-grid-row="2 / 3"] { grid-row: 2 / 3; }

.results-dashboard .generic-grid .grid-cell[data-grid-row="2 / 4"] { grid-row: 2 / 4; }

.results-dashboard .generic-grid .grid-cell[data-grid-row="2 / 5"] { grid-row: 2 / 5; }

.results-dashboard .generic-grid .grid-cell[data-grid-row="3 / 4"] { grid-row: 3 / 4; }

.results-dashboard .generic-grid .grid-cell[data-grid-row="3 / 5"] { grid-row: 3 / 5; }

.results-dashboard .generic-grid .grid-cell[data-grid-row="4 / 5"] { grid-row: 4 / 5; }

/* Alignment options */

.results-dashboard .generic-grid .grid-cell[data-align-self="start"] { align-self: start; }

.results-dashboard .generic-grid .grid-cell[data-align-self="center"] { align-self: center; }

.results-dashboard .generic-grid .grid-cell[data-align-self="end"] { align-self: end; }

.results-dashboard .generic-grid .grid-cell[data-align-self="stretch"] { align-self: stretch; }

.results-dashboard .generic-grid .grid-cell[data-justify-self="start"] { justify-self: start; }

.results-dashboard .generic-grid .grid-cell[data-justify-self="center"] { justify-self: center; }

.results-dashboard .generic-grid .grid-cell[data-justify-self="end"] { justify-self: end; }

.results-dashboard .generic-grid .grid-cell[data-justify-self="stretch"] { justify-self: stretch; }

/* ================================
   LEVEL 3: GRID TEMPLATE AREAS
   ================================ */

/* Template mode uses inline style for grid-template-areas */

/* Individual cells use data-grid-area */

.results-dashboard .generic-grid--template .grid-cell[data-grid-area] {
  grid-area: attr(data-grid-area);
}

/* Specific named areas for common layouts */

.results-dashboard .generic-grid--template .grid-cell[data-grid-area="sentiment"] { grid-area: sentiment; }

.results-dashboard .generic-grid--template .grid-cell[data-grid-area="news"] { grid-area: news; }

.results-dashboard .generic-grid--template .grid-cell[data-grid-area="search"] { grid-area: search; }

.results-dashboard .generic-grid--template .grid-cell[data-grid-area="coverage"] { grid-area: coverage; }

.results-dashboard .generic-grid--template .grid-cell[data-grid-area="chart1"] { grid-area: chart1; }

.results-dashboard .generic-grid--template .grid-cell[data-grid-area="chart2"] { grid-area: chart2; }

/* ================================
   RESPONSIVE OVERRIDES FOR MOBILE
   ================================ */

/* On mobile (< 640px): Stack all cells vertically, ignore positioning */

@media (max-width: 639px) {
  .results-dashboard .generic-grid .grid-cell[data-colspan],
  .results-dashboard .generic-grid .grid-cell[data-rowspan],
  .results-dashboard .generic-grid .grid-cell[data-grid-column],
  .results-dashboard .generic-grid .grid-cell[data-grid-row] {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }
}

/* ==========================================================================
   SKELETON LOADING STATES
   ========================================================================== */

.skeleton {
  background: var(--color-muted);
  border-radius: var(--radius-md);
  animation: skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  position: relative;
  overflow: hidden;
}

@keyframes skeleton-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Skeleton Variants */

.skeleton-text {
  height: 16px;
  width: 100%;
  margin-bottom: var(--space-2);
}

.skeleton-title {
  height: 24px;
  width: 60%;
  margin-bottom: var(--space-3);
}

.skeleton-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
}

.skeleton-avatar-sm {
  width: 32px;
  height: 32px;
}

.skeleton-avatar-lg {
  width: 48px;
  height: 48px;
}

.skeleton-button {
  height: 44px;
  width: 120px;
}

.skeleton-card {
  height: 200px;
  width: 100%;
}

.skeleton-line {
  height: 12px;
  width: 100%;
  margin-bottom: var(--space-2);
}

.skeleton-line-short {
  width: 75%;
}

.skeleton-line-long {
  width: 90%;
}

/* Shimmer Effect (Optional Enhancement) */

.skeleton-shimmer::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 100%
  );
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}

/* Dark Mode Adjustments */

[data-theme="dark"] .skeleton {
  background: var(--color-gray-800);
}

[data-theme="dark"] .skeleton-shimmer::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.05) 50%,
    transparent 100%
  );
}

/* ==========================================================================
   TABLE STYLES - Light & Dark Mode Support
   ========================================================================== */

.table {
  font-family: var(--font-family-primary);
  width: 100%;
  border-collapse: collapse;
}

.table thead th {
  background-color: var(--color-gray-100);
  color: var(--color-foreground);
  font-weight: var(--font-weight-semibold);
  border-bottom: 2px solid var(--color-border);
  padding: var(--space-3) var(--space-4);
  text-align: left;
}

.table tbody td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-foreground);
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--color-gray-50);
}

.table-hover tbody tr:hover {
  background-color: var(--color-gray-100);
}

/* Dark Mode */

[data-theme="dark"] .table thead th {
  background-color: var(--color-gray-800);
  color: var(--color-foreground);
  border-color: var(--color-border);
}

[data-theme="dark"] .table tbody td {
  border-color: var(--color-border);
  color: var(--color-foreground);
}

[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--color-gray-900);
}

[data-theme="dark"] .table-hover tbody tr:hover {
  background-color: var(--color-gray-800);
}

/* ==========================================================================
   TABS COMPONENT - All Variants
   ========================================================================== */

/* Default Tabs */

.tabs-default .tabs-list {
  display: flex;
  gap: var(--space-2);
  background: var(--color-muted);
  padding: var(--space-1);
  border-radius: var(--radius-lg);
}

.tabs-default .tab-trigger {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-foreground-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all var(--transition-normal);
}

.tabs-default .tab-trigger:hover {
  color: var(--color-foreground);
}

.tabs-default .tab-trigger.active {
  background: var(--color-background);
  color: var(--color-foreground);
  box-shadow: var(--shadow-sm);
}

/* Underlined Tabs */

.tabs-underlined .tabs-list,
.nav-tabs {
  display: flex;
  gap: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.tabs-underlined .tab-trigger,
.nav-tabs .nav-link {
  padding: var(--space-2) var(--space-4);
  border-bottom: 2px solid transparent;
  color: var(--color-foreground-muted);
  background: transparent;
  border-top: none;
  border-left: none;
  border-right: none;
  cursor: pointer;
  font-weight: var(--font-weight-medium);
  transition: all var(--transition-normal);
}

.tabs-underlined .tab-trigger:hover,
.nav-tabs .nav-link:hover {
  color: var(--color-vivid-blue);
  border-bottom-color: var(--color-gray-300);
}

.tabs-underlined .tab-trigger.active,
.nav-tabs .nav-link.active {
  border-bottom-color: var(--color-vivid-blue);
  color: var(--color-foreground);
  background-color: transparent;
}

/* Pills Tabs */

.tabs-pills .tabs-list {
  display: flex;
  gap: var(--space-2);
}

.tabs-pills .tab-trigger {
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-3);
  color: var(--color-foreground-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  font-weight: var(--font-weight-medium);
  transition: all var(--transition-normal);
}

.tabs-pills .tab-trigger:hover {
  background: var(--color-muted);
}

.tabs-pills .tab-trigger.active {
  background: var(--color-vivid-blue);
  color: white;
}

/* Bootstrap Nav Pills (used by TabNavigation component) */

.nav-pills {
  display: flex;
  gap: var(--space-2);
}

.nav-pills .nav-link {
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-3);
  color: var(--color-foreground-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  font-weight: var(--font-weight-medium);
  transition: all var(--transition-normal);
}

.nav-pills .nav-link:hover {
  background: var(--color-muted);
  color: var(--color-foreground);
}

.nav-pills .nav-link.active,
.nav-pills .nav-link.active * {
  background: var(--color-vivid-blue);
  color: white !important;
}

.nav-pills .nav-link.active span,
.nav-pills .nav-link.active i {
  color: white !important;
}

/* Override Bootstrap text color classes when tab is active */

.nav-pills .nav-link.active.text-primary,
.nav-pills .nav-link.active.text-info,
.nav-pills .nav-link.active.text-warning,
.nav-pills .nav-link.active.text-success,
.nav-pills .nav-link.active.text-secondary,
.nav-pills .nav-link.active.text-danger {
  color: white !important;
}

.nav-pills .nav-link.active.text-primary *,
.nav-pills .nav-link.active.text-info *,
.nav-pills .nav-link.active.text-warning *,
.nav-pills .nav-link.active.text-success *,
.nav-pills .nav-link.active.text-secondary *,
.nav-pills .nav-link.active.text-danger * {
  color: white !important;
}

[data-theme="dark"] .nav-pills .nav-link {
  color: var(--color-foreground-muted);
}

[data-theme="dark"] .nav-pills .nav-link:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-foreground);
}

[data-theme="dark"] .nav-pills .nav-link.active,
[data-theme="dark"] .nav-pills .nav-link.active * {
  background: var(--color-vivid-blue);
  color: white !important;
}

[data-theme="dark"] .nav-pills .nav-link.active span,
[data-theme="dark"] .nav-pills .nav-link.active i {
  color: white !important;
}

/* Override Bootstrap text color classes when tab is active in dark mode */

[data-theme="dark"] .nav-pills .nav-link.active.text-primary,
[data-theme="dark"] .nav-pills .nav-link.active.text-info,
[data-theme="dark"] .nav-pills .nav-link.active.text-warning,
[data-theme="dark"] .nav-pills .nav-link.active.text-success,
[data-theme="dark"] .nav-pills .nav-link.active.text-secondary,
[data-theme="dark"] .nav-pills .nav-link.active.text-danger {
  color: white !important;
}

[data-theme="dark"] .nav-pills .nav-link.active.text-primary *,
[data-theme="dark"] .nav-pills .nav-link.active.text-info *,
[data-theme="dark"] .nav-pills .nav-link.active.text-warning *,
[data-theme="dark"] .nav-pills .nav-link.active.text-success *,
[data-theme="dark"] .nav-pills .nav-link.active.text-secondary *,
[data-theme="dark"] .nav-pills .nav-link.active.text-danger * {
  color: white !important;
}

/* Outline Tabs */

.tabs-outline .tabs-list {
  display: flex;
  gap: var(--space-2);
}

.tabs-outline .tab-trigger {
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  color: var(--color-foreground-muted);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  font-weight: var(--font-weight-medium);
  transition: all var(--transition-normal);
}

.tabs-outline .tab-trigger:hover {
  border-color: var(--color-border);
}

.tabs-outline .tab-trigger.active {
  border-color: var(--color-border);
  color: var(--color-foreground);
  background: var(--color-background);
}

/* Tab Content */

.tab-content,
.tabs-content {
  padding: var(--space-4) 0;
}

/* Tab Sizes */

.tabs-sm .tab-trigger {
  font-size: var(--font-size-sm);
  padding: var(--space-1) var(--space-2);
}

.tabs-lg .tab-trigger {
  font-size: var(--font-size-lg);
  padding: var(--space-3) var(--space-4);
}

/* ==========================================================================
   HORIZONTAL SCROLLING TABS (Dynamic Tab Navigation)
   ========================================================================== */

.tab-container {
  position: relative;
  width: 100%;
}

.tab-container.scrollable {
  overflow: hidden;
}

.tab-scroll-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; /* iOS smooth scrolling */
}

.tab-scroll-wrapper::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.tab-container .nav.flex-nowrap {
  flex-wrap: nowrap;
  white-space: nowrap;
  margin-bottom: 0;
}

.tab-container .nav-item {
  flex-shrink: 0;
}

.tab-container .nav-link {
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* Scroll Buttons */

.scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: all var(--transition-normal);
  color: var(--color-foreground);
}

.scroll-btn:hover {
  background: var(--color-muted);
  box-shadow: var(--shadow-lg);
}

.scroll-btn:active {
  transform: translateY(-50%) scale(0.95);
}

.scroll-btn.scroll-left {
  left: 0;
  padding-right: 2px;
}

.scroll-btn.scroll-right {
  right: 0;
  padding-left: 2px;
}

.tab-container.has-overflow .scroll-btn {
  display: flex;
}

/* Sticky Tabs */

.tab-container.sticky-top {
  position: sticky;
  top: 0;
  z-index: 1020;
  background: var(--color-background);
  padding-top: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
}

/* Tab Container Background - Theme Aware */

.tab-container {
  background: var(--color-background);
}

[data-theme="dark"] .tab-container {
  background: var(--color-background);
}

/* Mobile Responsive */

@media (max-width: 768px) {
  .tab-container .nav-link {
    font-size: var(--font-size-sm);
    padding: var(--space-2) var(--space-3);
  }
  
  .scroll-btn {
    width: 32px;
    height: 32px;
    font-size: var(--font-size-sm);
  }
}

/* ==========================================================================
   SUB-TABS (Two-Level Tab Navigation)
   ========================================================================== */

/* Sub-tabs Container */

.subtabs-wrapper {
  margin-top: -0.5rem;
  margin-bottom: 1.5rem;
  padding: 0.75rem 0;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

/* Sub-tabs Navigation */

.nav-subtabs {
  padding-left: 2rem;
  gap: 0.25rem;
}

.nav-subtabs .nav-link {
  font-size: 0.875rem;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
}

.nav-subtabs .nav-link:hover {
  background: var(--color-hover);
}

.nav-subtabs .nav-link.active {
  background: var(--color-primary);
  color: white !important;
  font-weight: 500;
}

/* Override color classes for active subtabs */

.nav-subtabs .nav-link.active.text-primary,
.nav-subtabs .nav-link.active.text-info,
.nav-subtabs .nav-link.active.text-warning,
.nav-subtabs .nav-link.active.text-success,
.nav-subtabs .nav-link.active.text-secondary,
.nav-subtabs .nav-link.active.text-danger {
  color: white !important;
}

.nav-subtabs .nav-link.active *,
.nav-subtabs .nav-link.active span,
.nav-subtabs .nav-link.active i {
  color: white !important;
}

/* Subtab Scrolling */

.subtab-container.scrollable {
  position: relative;
}

.subtab-scroll-wrapper[data-scrollable="true"] {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.subtab-scroll-wrapper[data-scrollable="true"]::-webkit-scrollbar {
  height: 4px;
}

.subtab-scroll-wrapper[data-scrollable="true"]::-webkit-scrollbar-track {
  background: var(--color-surface);
}

.subtab-scroll-wrapper[data-scrollable="true"]::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 2px;
}

/* Dark Mode Support */

[data-theme="dark"] .subtabs-wrapper {
  background: var(--color-background);
  border-bottom-color: var(--color-border);
}

[data-theme="dark"] .nav-subtabs .nav-link {
  color: var(--color-foreground-muted);
}

[data-theme="dark"] .nav-subtabs .nav-link:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-foreground);
}

[data-theme="dark"] .nav-subtabs .nav-link.active {
  background: var(--color-vivid-blue);
  color: white !important;
}

[data-theme="dark"] .nav-subtabs .nav-link.active *,
[data-theme="dark"] .nav-subtabs .nav-link.active span,
[data-theme="dark"] .nav-subtabs .nav-link.active i {
  color: white !important;
}

/* Responsive: Stack subtabs on mobile */

@media (max-width: 768px) {
  .nav-subtabs {
    padding-left: 0;
    flex-wrap: wrap;
  }
  
  .nav-subtabs .nav-link {
    font-size: 0.813rem;
    padding: 0.4rem 0.75rem;
  }
  
  .subtabs-wrapper {
    padding: 0.5rem 0;
  }
}

/* ==========================================================================
   TREND INDICATOR STYLES - Light & Dark Mode Support
   ========================================================================== */

.trend-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-weight: var(--font-weight-semibold);
}

.trend-up {
  color: var(--color-success);
}

.trend-down {
  color: var(--color-error);
}

.trend-stable {
  color: var(--color-gray-500);
}

/* Dark Mode */

[data-theme="dark"] .trend-up {
  color: var(--color-success);
}

[data-theme="dark"] .trend-down {
  color: var(--color-error);
}

[data-theme="dark"] .trend-stable {
  color: var(--color-gray-400);
}

/* 5. Utilities (last) */

/**
 * Consolidated animations for Aurum AI Dashboard
 * Adapted from marketing website with dashboard-specific optimizations
 */

/* --------------------------------
   General Animation Utilities
-------------------------------- */

.animate-fade {
  animation: fadeIn var(--transition-normal) var(--ease-standard) both;
}

.hover-float {
  transition: transform var(--transition-normal) var(--ease-standard);
}

.hover-float:hover { 
  transform: translateY(-4px); 
}

/* Disable animations for users who prefer reduced motion */

@media (prefers-reduced-motion: reduce) {
  *, 
  *::before, 
  *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------
   Fade Animations
-------------------------------- */

@keyframes fadeIn {
  0% { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes fadeOut {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(6px); }
}

.fade-in {
  animation: fadeIn var(--transition-normal) var(--ease-standard) both;
}

.fade-out {
  animation: fadeOut var(--transition-normal) var(--ease-standard) both;
}

/* --------------------------------
   Button Animations
-------------------------------- */

@keyframes button-shine {
  0% {
    opacity: 0;
    background-position: 200% 0;
  }
  5% {
    opacity: 1;
  }
  30% {
    background-position: -200% 0;
    opacity: 0;
  }
  100% {
    opacity: 0;
    background-position: -200% 0;
  }
}

/* Apply shine to primary buttons */

.btn-primary {
  position: relative;
  overflow: hidden;
}

.btn-primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.08) 25%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.08) 75%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 200% 100%;
  background-position: 200% 0;
  pointer-events: none;
  opacity: 0;
  animation: button-shine 4s infinite;
  transition: all 0.3s ease;
}

/* --------------------------------
   Card Animations
-------------------------------- */

/* Card lift effect on hover */

.card-hover-lift {
  transition: transform var(--transition-normal) var(--ease-standard), 
              box-shadow var(--transition-normal) var(--ease-standard);
}

.card-hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* Card gradient overlay */

.card-gradient-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, var(--color-vivid-blue) 0%, var(--color-teal) 100%);
  opacity: 0.05;
  transition: opacity var(--transition-normal) var(--ease-standard);
}

.card:hover .card-gradient-overlay {
  opacity: 0.1;
}

/* --------------------------------
   Progress Animations
-------------------------------- */

/* Progress bar animation */

.progress-bar {
  height: 0.5rem;
  border-radius: var(--radius-full);
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.1);
}

.progress-value {
  height: 100%;
  border-radius: var(--radius-full);
  background: linear-gradient(to right, var(--color-vivid-blue), var(--color-teal));
  transition: width var(--transition-slow) var(--ease-standard);
}

/* Spinner animation */

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.spinner {
  animation: spin 1s linear infinite;
}

/* --------------------------------
   Pulse Animations
-------------------------------- */

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* --------------------------------
   Shimmer Effect
-------------------------------- */

@keyframes shimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

.shimmer-effect {
  position: relative;
  overflow: hidden;
}

.shimmer-effect::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  animation: shimmer 2s infinite;
}

/* --------------------------------
   Floating Elements Animation
-------------------------------- */

@keyframes float {
  0%, 100% {
    transform: translateY(0) rotate(var(--rotation, 0deg));
  }
  50% {
    transform: translateY(-20px) rotate(calc(var(--rotation, 0deg) + 5deg));
  }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  --rotation: var(--rotation, 0deg);
}

/* --------------------------------
   Slide Animations
-------------------------------- */

@keyframes slideInLeft {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  0% {
    opacity: 0;
    transform: translateX(20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.slide-in-left {
  animation: slideInLeft var(--transition-normal) var(--ease-standard) both;
}

.slide-in-right {
  animation: slideInRight var(--transition-normal) var(--ease-standard) both;
}

/* --------------------------------
   Mobile Optimizations
-------------------------------- */

@media (max-width: 768px) {
  /* Simplified animations for mobile */
  .animate-float {
    animation-duration: 8s; /* Slower float */
  }
  
  .shimmer-effect::after {
    animation-duration: 3s; /* Slower shimmer */
  }
  
  /* Add hardware acceleration for smoother animations */
  .animate-mobile {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
  }
}

/**
 * Utility classes for Aurum AI Dashboard
 * Includes iOS fixes, accessibility helpers, and responsive utilities
 */

/* --------------------------------
   iOS-specific fixes
-------------------------------- */

/* Fix for momentum scrolling behavior on iOS */

@supports (-webkit-touch-callout: none) {
  html, body {
    /* Prevent scrolling bounce effect that can happen on iOS */
    -webkit-overflow-scrolling: touch;
    /* Prevent text size adjustment on orientation change */
    -webkit-text-size-adjust: 100%;
  }
  
  /* Fix for input fields and buttons */
  input, 
  button, 
  textarea, 
  select {
    /* Disable iOS styling on form elements */
    -webkit-appearance: none;
    -moz-appearance: none;
         appearance: none;
    border-radius: var(--radius-md);
  }
  
  /* Fix for iOS hover states - use active instead */
  button:active,
  a:active {
    opacity: 0.8;
  }
  
  /* Fix for position:fixed elements on iOS Safari */
  .fixed {
    transform: translateZ(0);
    backface-visibility: hidden;
  }
  
  /* Fix for 100vh issue in iOS Safari */
  .h-screen {
    height: 100vh; /* Use the viewport height */
    height: -webkit-fill-available; /* Fallback for iOS */
  }
  
  /* Smooth scroll polyfill for iOS */
  .smooth-scroll {
    -webkit-overflow-scrolling: touch;
  }
  
  /* Fix sticky positioning in iOS Safari */
  .sticky {
    position: sticky;
  }
  
  /* Fix iOS tap highlight color */
  * {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
}

/* Fix for notched iPhones - ensure content doesn't get hidden under the notch */

@supports (padding: max(0px)) {
  .notch-padding {
    padding-left: max(env(safe-area-inset-left), 16px);
    padding-right: max(env(safe-area-inset-right), 16px);
    padding-top: max(env(safe-area-inset-top), 16px);
    padding-bottom: max(env(safe-area-inset-bottom), 16px);
  }
  
  .header {
    padding-top: max(env(safe-area-inset-top), 0px);
  }
  
  .fixed-bottom {
    padding-bottom: max(env(safe-area-inset-bottom), 16px);
  }
}

/* Improve touch area size for better interaction */

.touch-target {
  min-height: 44px;
  min-width: 44px;
}

/* --------------------------------
   Accessibility Utilities
-------------------------------- */

/* Screen reader only text */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Focus styles */

.focus-ring:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-vivid-blue);
}

/* Better keyboard focus indication */

.focus-visible:focus-visible {
  outline: 2px solid var(--color-vivid-blue);
  outline-offset: 2px;
}

/* Skip link for keyboard navigation */

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  padding: 8px;
  background-color: var(--color-background);
  color: var(--color-foreground);
  z-index: 100;
  transition: top 0.2s;
}

.skip-link:focus {
  top: 0;
}

/* Make focus ring visible only when using keyboard */

body:not(.user-is-tabbing) button:focus,
body:not(.user-is-tabbing) input:focus,
body:not(.user-is-tabbing) select:focus,
body:not(.user-is-tabbing) textarea:focus {
  outline: none;
}

/* --------------------------------
   Responsive Layout Utilities
-------------------------------- */

/* Mobile layout utilities */

@media (max-width: 768px) {
  .mobile-only {
    display: block;
  }
  
  .desktop-only {
    display: none;
  }
  
  .mobile-text-center {
    text-align: center;
  }
  
  .mobile-full-width {
    width: 100%;
  }
  
  .mobile-stack {
    display: flex;
    flex-direction: column;
  }
  
  .mobile-p-4 {
    padding: var(--space-4);
  }
  
  .mobile-my-4 {
    margin-top: var(--space-4);
    margin-bottom: var(--space-4);
  }
}

/* Desktop layout utilities */

@media (min-width: 769px) {
  .mobile-only {
    display: none;
  }
  
  .desktop-only {
    display: block;
  }
}

/* --------------------------------
   Display Utilities
-------------------------------- */

.hidden {
  display: none;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.grid {
  display: grid;
}

/* --------------------------------
   Text Utilities
-------------------------------- */

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --------------------------------
   Overflow Utilities
-------------------------------- */

.overflow-hidden {
  overflow: hidden;
}

.overflow-auto {
  overflow: auto;
}

.overflow-scroll {
  overflow: scroll;
}

.overflow-x-auto {
  overflow-x: auto;
}

.overflow-y-auto {
  overflow-y: auto;
}

/* --------------------------------
   Position Utilities
-------------------------------- */

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.sticky {
  position: sticky;
}

/* --------------------------------
   Z-Index Utilities
-------------------------------- */

.z-0 {
  z-index: 0;
}

.z-10 {
  z-index: 10;
}

.z-20 {
  z-index: 20;
}

.z-30 {
  z-index: 30;
}

.z-40 {
  z-index: 40;
}

.z-50 {
  z-index: 50;
}

/* --------------------------------
   Width/Height Utilities
-------------------------------- */

.w-full {
  width: 100%;
}

.h-full {
  height: 100%;
}

.w-screen {
  width: 100vw;
}

.h-screen {
  height: 100vh;
}

/* --------------------------------
   Pointer Events
-------------------------------- */

.pointer-events-none {
  pointer-events: none;
}

.pointer-events-auto {
  pointer-events: auto;
}

/* --------------------------------
   User Select
-------------------------------- */

.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.select-text {
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}

.select-all {
  -webkit-user-select: all;
     -moz-user-select: all;
          user-select: all;
}

/* --------------------------------
   Cursor Utilities
-------------------------------- */

.cursor-pointer {
  cursor: pointer;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

.cursor-default {
  cursor: default;
}

/* --------------------------------
   Opacity Utilities
-------------------------------- */

.opacity-0 {
  opacity: 0;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-75 {
  opacity: 0.75;
}

.opacity-100 {
  opacity: 1;
}

/* ==========================================================================
   ADDITIONAL DASHBOARD-SPECIFIC STYLES
   ========================================================================== */

/* Loading overlay */

#loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* View containers — shared horizontal gutter so home / past-jobs /
   connections / new-analysis all sit on the same left/right rail.
   Report view (#results-view) and Know Chat (#know-chat-view) override
   with zero inline padding because they control their own gutter via
   .pr-shell and .know-chat-panel respectively (centred max-width). */

.view-container {
  min-height: 500px;
  padding-inline: clamp(16px, 4vw, 40px);
  box-sizing: border-box;
}

#results-view,
#know-chat-view,
#mindmap-view {
  padding-inline: 0;
}

/* Neutralise the Bootstrap `mt-4` top margin on view containers — each
   view (pr-shell, past-jobs, know-chat-panel) sets its own top inset. */

.view-container.mt-4 {
  margin-top: 0 !important;
}

/* Animate fade in */

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

.animate-fade-in {
  animation: fadeIn var(--transition-normal) ease-out;
}

/* Theme transition */

body {
  transition: background-color var(--transition-normal), color var(--transition-normal);
}