/* ================================
  REALTI GLOBAL STYLES
  ================================ */

/* Global box-sizing */
*, *::before, *::after {
  box-sizing: border-box;
}

/* ================================
  CSS VARIABLES & UTILITIES
  ================================ */
:root {
  /* Colors */
  --color-primary: #090E3A;
  --color-primary-light: #1a2a6c;
  --color-primary-dark: #000518;
  --color-accent: #6C63FF;
  --color-accent-dark: #4D4DAD;
  --color-danger: #DC2626;
  --color-danger-dark: #B91C1C;
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-text: #090E3A;
  --color-text-muted: rgba(9, 14, 58, 0.6);
  --color-text-light: rgba(9, 14, 58, 0.4);
  --color-bg: #ffffff;
  --color-bg-secondary: #f8f9fa;
  --color-border: rgba(0, 0, 0, 0.05);
  
  /* Linear Gradients */
  --gradient-primary: linear-gradient(135deg, #6C63FF 0%, #4D4DAD 100%);
  --gradient-danger: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%);
  --gradient-accent: linear-gradient(135deg, #EC4899 0%, #8B5CF6 100%);
  
  /* Radial Gradient Patterns for Backgrounds */
  --gradient-purple-glow: radial-gradient(ellipse 1000px 800px at 20% 30%, rgba(108, 99, 255, 0.2) 0%, transparent 50%);
  --gradient-pink-glow: radial-gradient(ellipse 800px 600px at 80% 70%, rgba(236, 72, 153, 0.15) 0%, transparent 50%);
  --gradient-teal-glow: radial-gradient(ellipse 600px 400px at 50% 50%, rgba(78, 205, 196, 0.1) 0%, transparent 50%);
  
  /* Glassmorphism */
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(255, 255, 255, 0.2);
  --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
  --glass-blur: blur(10px);
  
  /* Layout */
  --container-max: 1200px;
  --container-max-lg: 1320px;
  --container-padding: 20px;
  --container-padding-sm: 15px;
  --nav-height: 60px;
  --sidebar-width: 280px; /* Increased from default */
  
  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  
  /* Typography */
  --font-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --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;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
  
  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;
  
  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;
}

/* ================================
  UTILITY CLASSES
  ================================ */

/* Container */
/* .container styles are now in the master rule above */

.container-lg {
  max-width: 1200px; /* Keep consistent with nav */
}

@media (max-width: 575px) {
  .container {
    padding: 0 var(--container-padding-sm);
  }
}

/* Button Base System */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 14px 28px;
  border-radius: var(--radius-lg);
  font-size: var(--font-size-base);
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all var(--transition-base);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  user-select: none;
}

/* Button Variants */
.btn--primary {
  background: var(--gradient-primary);
  color: white;
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(108, 99, 255, 0.3);
}

.btn--secondary {
  background: white;
  color: var(--color-primary);
  border: 2px solid var(--color-border);
}

.btn--secondary:hover {
  background: var(--color-bg-secondary);
  border-color: rgba(9, 14, 58, 0.1);
}

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

.btn--danger:hover {
  background: var(--color-danger-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(220, 38, 38, 0.3);
}

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

.btn--outline:hover {
  background: var(--color-bg-secondary);
  border-color: rgba(9, 14, 58, 0.2);
}

/* Button Sizes */
.btn--sm {
  padding: 8px 16px;
  font-size: var(--font-size-sm);
}

.btn--lg {
  padding: 18px 36px;
  font-size: var(--font-size-lg);
}

/* Button States */
.btn:disabled,
.btn--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

/* Text Utilities */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-muted { color: var(--color-text-muted); }
.text-light { color: var(--color-text-light); }
.text-primary { color: var(--color-primary); }
.text-accent { color: var(--color-accent); }
.text-danger { color: var(--color-danger); }

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

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--space-xs); }
.mb-2 { margin-bottom: var(--space-sm); }
.mb-3 { margin-bottom: var(--space-md); }
.mb-4 { margin-bottom: var(--space-lg); }
.mb-5 { margin-bottom: var(--space-xl); }

.p-0 { padding: 0; }
.p-1 { padding: var(--space-xs); }
.p-2 { padding: var(--space-sm); }
.p-3 { padding: var(--space-md); }
.p-4 { padding: var(--space-lg); }
.p-5 { padding: var(--space-xl); }

/* Display Utilities */
.d-none { display: none; }
.d-block { display: block; }
.d-flex { display: flex; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }

/* Flex Utilities */
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

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

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

.gap-1 { gap: var(--space-xs); }
.gap-2 { gap: var(--space-sm); }
.gap-3 { gap: var(--space-md); }
.gap-4 { gap: var(--space-lg); }
.gap-5 { gap: var(--space-xl); }

/* Background Gradient Utilities */
.bg-gradient-auth {
  background: 
    var(--gradient-purple-glow),
    var(--gradient-pink-glow),
    var(--gradient-teal-glow);
}

.bg-gradient-auth-alt {
  background: 
    radial-gradient(ellipse 1000px 800px at 80% 20%, rgba(236, 72, 153, 0.2) 0%, transparent 50%),
    radial-gradient(ellipse 800px 600px at 20% 80%, rgba(78, 205, 196, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse 600px 400px at 50% 50%, rgba(108, 99, 255, 0.1) 0%, transparent 50%);
}

/* Glassmorphism Utilities */
.glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

.glass-dark {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

/* ================================
  NAVIGATION
  ================================ */
nav {
   position: fixed;
   background: transparent;
   backdrop-filter: none;
   -webkit-backdrop-filter: none;
   top: 0;
   left: 0;
   right: 0;
   width: 100%;
   z-index: 1000;
   height: 60px;
   border-bottom: 1px solid transparent;
   transition: all 0.3s ease;
   box-sizing: border-box;
}

/* Nav scrolled state */
nav.scrolled {
   background: rgba(255, 255, 255, 0.95);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   border-bottom: 1px solid rgba(0, 0, 0, 0.05);
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.nav-container {
   width: 100%;
   max-width: 1240px; /* Same as all other containers */
   margin: 0 auto;
   padding: 0 20px;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   box-sizing: border-box;
}

/* Remove responsive changes - nav stays same width always */

/* Keep consistent padding even on mobile */
@media (max-width: 575px) {
   .nav-container {
       width: 100%; /* Only on mobile allow full width */
       max-width: 1200px;
       padding: 0 20px; /* Keep same padding */
   }
}

.nav-logo {
   display: flex;
   align-items: center;
   gap: 12px;
   text-decoration: none;
}

.nav-logo img {
   width: 40px;
   height: 40px;
}

.nav-logo span {
   font-size: 20px;
   font-weight: 700;
   color: var(--color-primary);
   letter-spacing: -0.5px;
   transition: all var(--transition-base);
}

/* Logo styling on transparent nav */
nav:not(.scrolled) .nav-logo span {
   color: var(--color-primary);
   text-shadow: 0 1px 3px rgba(255, 255, 255, 0.3);
}

.nav-links {
   display: flex;
   align-items: center;
   gap: 30px;
   list-style: none;
   margin: 0;
   padding: 0;
}

.nav-links a {
   color: var(--color-primary);
   text-decoration: none;
   font-size: 14px;
   opacity: 0.6;
   transition: all var(--transition-base);
}

/* Don't change opacity on scroll - only adjust for readability */
nav:not(.scrolled) .nav-links a {
   opacity: 0.7;
   text-shadow: 0 1px 3px rgba(255, 255, 255, 0.5);
}

nav.scrolled .nav-links a {
   opacity: 0.6;
   text-shadow: none;
}

.nav-links a:hover {
   opacity: 1;
}

/* Ensure buttons don't inherit link opacity */
.nav-links .btn--primary {
   opacity: 1 !important;
}

/* Navigation specific button styling - override defaults */
.nav-links .btn {
   padding: 8px 20px;
   font-size: 14px;
   background: #090E3A;
   color: white;
   border-radius: 8px;
}

.nav-links .btn--primary {
   background: #090E3A !important;
   color: white !important;
   opacity: 1 !important;
   transition: background-color var(--transition-base), box-shadow var(--transition-base);
}

/* Button maintains same appearance in both states */
nav:not(.scrolled) .nav-links .btn--primary,
nav.scrolled .nav-links .btn--primary {
   background: #090E3A !important;
   color: white !important;
   opacity: 1 !important;
}

/* Slight shadow on transparent nav for visibility */
nav:not(.scrolled) .nav-links .btn--primary {
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.nav-links .btn--primary:hover {
   background: #0A1148 !important;
   color: white !important;
   opacity: 1 !important;
   transform: none;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* Mobile menu button */
.mobile-menu-btn {
   display: none;
   background: none;
   border: none;
   font-size: 24px;
   color: var(--color-primary);
}

/* Mobile styles */
@media (max-width: 768px) {
   .nav-links {
       display: none;
   }
   
   .mobile-menu-btn {
       display: block;
   }
}

/* ================================
  FOOTER
  ================================ */
footer {
   background: transparent;
   border-top: 1px solid rgba(0, 0, 0, 0.05);
   padding: 60px 0 40px 0;
   margin-top: auto;
   position: relative;
   overflow: visible;
   z-index: 10;
   min-height: 280px;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
}

.footer-container {
   padding-bottom: 20px; /* Additional bottom padding */
   display: flex;
   flex-direction: column;
   gap: 15px;
   position: relative;
   z-index: 2;
}

/* Large screens - keep consistent width */
@media (min-width: 1400px) {
   .footer-container {
       max-width: 1200px; /* Match nav-container */
   }
}

/* Extra small devices */
@media (max-width: 575px) {
   .footer-container {
       padding: 0 15px 20px 15px;
   }
}

.footer-links-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
}

.footer-left,
.footer-right {
   display: flex;
   align-items: center;
   gap: 20px;
}

.footer-left a,
.footer-right a {
   color: #9CA3AF;
   text-decoration: none;
   font-size: 14px;
   transition: color var(--transition-base);
}

.footer-left a:hover,
.footer-right a:hover {
   color: #6B7280;
}

.footer-separator {
   color: #E5E7EB;
   margin: 0 5px;
}

.footer-copyright {
   color: #9CA3AF;
   font-size: 14px;
}

/* Footer logo/watermark */
.footer-logo {
   position: absolute;
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
   width: 280px;
   height: 220px;
   opacity: 0.5;
   pointer-events: none;
   z-index: 1;
   max-height: 100%;
}

/* Mobile footer */
@media (max-width: 768px) {
   footer {
       min-height: auto;
       padding: 40px 0 30px 0;
   }
   
   .footer-container {
       flex-direction: column;
       gap: 20px;
       text-align: center;
   }
   
   .footer-links-row {
       flex-direction: column;
       gap: 10px;
   }
   
   .footer-left,
   .footer-right {
       flex-direction: column;
       gap: 10px;
   }
   
   .footer-separator {
       display: none;
   }
   
   .footer-logo {
       width: 200px;
       height: 150px;
   }
}

/* ================================
  ROOT HTML SETUP - POWERFUL FOUNDATION
  ================================ */
html {
   /* Smooth scrolling for anchor links */
   scroll-behavior: smooth;
   
   /* Allow vertical scrolling when needed */
   overflow-y: auto;
   /* Removed scrollbar-gutter to prevent empty space */
   
   /* Prevent horizontal overflow */
   overflow-x: hidden;
   
   /* Better text rendering */
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
   
   /* Prevent iOS text size adjust on rotate */
   -webkit-text-size-adjust: 100%;
   
   /* Base font size for REM calculations */
   font-size: 16px; /* 1rem = 16px */
   
   /* Full height for proper layouts */
   height: 100%;
   
   /* Custom scrollbar */
   scrollbar-width: thin;
   scrollbar-color: rgba(0,0,0,0.3) rgba(0,0,0,0.1);
}

/* Webkit browsers custom scrollbar */
html::-webkit-scrollbar {
   width: 10px;
   height: 10px;
}

html::-webkit-scrollbar-track {
   background: rgba(0,0,0,0.1);
}

html::-webkit-scrollbar-thumb {
   background: rgba(0,0,0,0.3);
   border-radius: var(--radius-sm);
}

html::-webkit-scrollbar-thumb:hover {
   background: rgba(0,0,0,0.5);
}

/* Theme variations */
html[data-theme="dark"] {
   color-scheme: dark;
}

/* Responsive font scaling */
@media (max-width: 768px) {
   html { font-size: 15px; }
}

@media (min-width: 1600px) {
   html { font-size: 17px; }
}

@media (min-width: 2000px) {
   html { font-size: 18px; }
}

/* ================================
  BODY SETUP
  ================================ */
body {
   /* Use HTML's height */
   min-height: 100%;
   margin: 0;
   
   /* Default font stack */
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 
                'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 
                'Segoe UI Emoji', 'Segoe UI Symbol';
   
   /* Base text settings */
   line-height: 1.6;
   color: var(--color-primary);
   
   /* Flex for sticky footer */
   display: flex;
   flex-direction: column;
   
   /* BACKGROUND DECISION: Set on body for most cases */
   background: #ffffff;
   
   /* Prevent text selection on UI elements */
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

/* Allow text selection on content */
body * {
   -webkit-user-select: text;
   -moz-user-select: text;
   -ms-user-select: text;
   user-select: text;
}

/* Prevent selection on buttons, nav, etc */
button, nav, .btn, .nav-links {
   -webkit-user-select: none !important;
   -moz-user-select: none !important;
   -ms-user-select: none !important;
   user-select: none !important;
}

/* Focus styles for accessibility */
:focus-visible {
   outline: 2px solid #4D4DAD;
   outline-offset: 2px;
}

/* Remove focus for mouse users */
:focus:not(:focus-visible) {
   outline: none;
}

/* ================================
  MAIN CONTAINER
  ================================ */
/* Master container - prevents any width variations */
.main-container {
   background: #ffffff;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   width: 100vw; /* Always full viewport width */
   max-width: 100vw; /* Prevent any overflow */
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   overflow-x: hidden; /* Prevent horizontal scroll */
   position: relative;
}

/* Override main-container background for chat page */
.chat-page .main-container {
   background: transparent !important;
   min-height: 100vh;
   position: relative;
   z-index: 1; /* Above gradient */
   overflow: visible; /* Allow content to flow naturally */
}

/* ================================
  RESPONSIVE UTILITIES
  ================================ */
/* Master container width - NEVER changes */
:root {
   --master-width: 1240px; /* Total width including padding */
   --content-width: 1200px; /* Content width */
   --content-padding: 20px;
}

/* Apply consistent width to ALL containers */
.nav-container,
.hero-container,
.features-container,
.demo-container,
.stats-container,
.cta-container,
.premium-container,
.api-container,
.api-access-container,
.pricing-container,
.login-container,
.register-container,
.settings-container,
.footer-container,
.container {
   width: 100%;
   max-width: var(--master-width);
   margin: 0 auto;
   padding: 0 var(--content-padding);
   box-sizing: border-box;
}

/* Extra small devices */
@media (max-width: 575px) {
   .hero-container,
   .features-container,
   .demo-container,
   .stats-container,
   .cta-container,
   .premium-container,
   .api-container,
   .api-access-container,
   .pricing-container {
       padding: 0 15px;
   }
}

/* Large screens - keep consistent width */
@media (min-width: 1400px) {
   .hero-container,
   .features-container,
   .demo-container,
   .stats-container,
   .cta-container,
   .premium-container,
   .api-container,
   .api-access-container,
   .pricing-container {
       max-width: 1200px; /* Match nav-container */
   }
}

/* ================================
  CONTINUOUS GRADIENT FLOW SYSTEM
  ================================ */
.gradient-flow-wrapper {
   position: relative;
   overflow: hidden;
   background: #F4F5FB; /* Base background for all sections */
   width: 100%;
   box-sizing: border-box;
}

/* Create a single continuous gradient background */
.gradient-flow-background {
   position: absolute;
   top: -20%;
   left: 0;
   width: 100%;
   height: 120%;
   pointer-events: none;
   z-index: 0;
   
   /* Multiple overlapping gradients creating continuous flow */
   background: 
      /* Gradient 1 - Top purple glow */
      radial-gradient(ellipse 1000px 800px at 30% 5%, 
         rgba(147, 51, 234, 0.3) 0%, 
         rgba(147, 51, 234, 0.15) 30%, 
         transparent 60%),
      
      /* Gradient 2 - Pink accent flowing down */
      radial-gradient(ellipse 900px 700px at 70% 15%, 
         rgba(236, 72, 153, 0.35) 0%, 
         rgba(236, 72, 153, 0.2) 25%, 
         transparent 55%),
      
      /* Gradient 3 - Blue orb mid-section */
      radial-gradient(circle 800px at 20% 35%, 
         rgba(59, 130, 246, 0.25) 0%, 
         rgba(59, 130, 246, 0.1) 35%, 
         transparent 65%),
      
      /* Gradient 4 - Teal flow center */
      radial-gradient(ellipse 1200px 600px at 60% 45%, 
         rgba(78, 205, 196, 0.3) 0%, 
         rgba(78, 205, 196, 0.15) 30%, 
         transparent 60%),
      
      /* Gradient 5 - Purple-pink blend */
      radial-gradient(ellipse 1000px 700px at 80% 60%, 
         rgba(147, 51, 234, 0.2) 0%, 
         rgba(236, 72, 153, 0.15) 25%, 
         transparent 55%),
      
      /* Gradient 6 - Green-blue accent */
      radial-gradient(circle 700px at 25% 75%, 
         rgba(6, 255, 165, 0.2) 0%, 
         rgba(58, 134, 255, 0.15) 30%, 
         transparent 60%),
      
      /* Gradient 7 - Pink glow bottom */
      radial-gradient(ellipse 900px 600px at 40% 85%, 
         rgba(255, 0, 110, 0.25) 0%, 
         rgba(255, 0, 110, 0.1) 35%, 
         transparent 65%),
      
      /* Gradient 8 - Final purple fade */
      radial-gradient(ellipse 1100px 500px at 70% 95%, 
         rgba(131, 56, 236, 0.2) 0%, 
         rgba(147, 51, 234, 0.1) 40%, 
         transparent 70%);
}

/* Ensure all sections have relative positioning */
.gradient-flow-wrapper > section,
.gradient-flow-wrapper > footer {
   position: relative;
   z-index: 1;
}

/* ================================
  COMMON BUTTON STYLES
  ================================ */
.btn-primary,
.btn-secondary {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 14px 28px;
   border-radius: var(--radius-lg);
   font-size: 1rem;
   font-weight: 600;
   text-decoration: none;
   transition: all var(--transition-slow);
}

.btn-primary {
   background: var(--gradient-primary);
   color: white;
}

.btn-primary:hover {
   transform: translateY(-2px);
   box-shadow: 0 10px 30px rgba(108, 99, 255, 0.3);
}

.btn-secondary {
   background: white;
   color: var(--color-primary);
   border: 2px solid rgba(9, 14, 58, 0.1);
}

.btn-secondary:hover {
   background: rgba(9, 14, 58, 0.05);
}

/* ================================
  INDEX PAGE STYLES
  ================================ */
/* ================================
  HERO SECTION
  ================================ */
.hero {
   background: transparent; /* Transparent for index page */
   padding-top: 60px;
   min-height: 100vh;
   display: flex;
   align-items: center; /* Center for index page */
}

.hero-container {
   padding: 80px 20px;
}

.hero-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 60px;
   align-items: center;
}

.hero-text h1 {
   font-size: clamp(2.5rem, 5vw, 4rem);
   font-weight: 800;
   color: var(--color-primary);
   line-height: 1.1;
   margin-bottom: 24px;
   letter-spacing: -0.02em;
}

.hero-text .accent {
   background: linear-gradient(135deg, #6C63FF 0%, #EC4899 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   display: inline-block; /* Ensures gradient displays properly */
}

.hero-text p {
   font-size: 1.25rem;
   color: rgba(9, 14, 58, 0.6);
   line-height: 1.6;
   margin-bottom: 32px;
}

.hero-buttons {
   display: flex;
   gap: 16px;
   flex-wrap: wrap;
}

/* Mobile hero */
@media (max-width: 768px) {
   .hero {
       min-height: auto;
       padding-top: 80px;
   }
   
   .hero-container {
       padding: 40px 20px;
   }
   
   .hero-grid {
       grid-template-columns: 1fr;
       gap: 40px;
   }
   
   .hero-buttons {
       flex-direction: column;
   }
   
   .hero-buttons a {
       width: 100%;
       justify-content: center;
   }
}

/* ================================
  CHAT PREVIEW
  ================================ */
.chat-preview {
   background: white;
   border-radius: var(--radius-xl);
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
   overflow: hidden;
   max-width: 500px;
   margin: 0 auto;
}

.chat-header {
   background: var(--gradient-primary);
   color: white;
   padding: 20px;
   display: flex;
   align-items: center;
   gap: 12px;
}

.chat-header i {
   font-size: 24px;
}

.chat-header h3 {
   margin: 0;
   font-size: 18px;
   font-weight: 600;
}

.chat-messages {
   padding: 20px;
   background: #f8f9fa;
   min-height: 300px;
}

/* Old message styles - commented out to prevent conflicts
.message {
   margin-bottom: 16px;
   display: flex;
}

.message.user {
   justify-content: flex-end;
}

.message.ai {
   justify-content: flex-start;
}

.message-bubble {
   max-width: 80%;
   padding: 12px 16px;
   border-radius: var(--radius-xl);
   font-size: 14px;
   line-height: 1.5;
}

.message.user .message-bubble {
   background: #6C63FF;
   color: white;
   border-bottom-right-radius: 4px;
}

.message.ai .message-bubble {
   background: white;
   color: var(--color-primary);
   border-bottom-left-radius: 4px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
*/

/* Typing indicator */
.typing-indicator {
   display: flex;
   gap: 4px;
   padding: 16px;
}

.typing-indicator span {
   width: 8px;
   height: 8px;
   background: #6C63FF;
   border-radius: 50%;
   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%, 80%, 100% {
       opacity: 0.3;
       transform: scale(1);
   }
   40% {
       opacity: 1;
       transform: scale(1.2);
   }
}

/* ================================
  SECTION HEADERS
  ================================ */
.section-header {
   text-align: center;
   max-width: 800px;
   margin: 0 auto 60px;
}

.section-header h2 {
   font-size: clamp(2rem, 4vw, 3rem);
   font-weight: 800;
   color: var(--color-primary);
   margin-bottom: 16px;
   letter-spacing: -0.02em;
}

.section-header p {
   font-size: 1.25rem;
   color: rgba(9, 14, 58, 0.6);
   line-height: 1.6;
}

/* ================================
  FEATURES SECTION
  ================================ */
.features {
   background: #ffffff; /* Updated to white */
   padding: 100px 0;
}

.features-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 30px;
}

.feature-card {
   background: white;
   border: 1px solid rgba(0, 0, 0, 0.05);
   border-radius: var(--radius-xl);
   padding: 32px;
   transition: all var(--transition-slow);
}

.feature-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.feature-icon {
   width: 60px;
   height: 60px;
   background: var(--gradient-primary);
   border-radius: var(--radius-lg);
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 20px;
}

.feature-icon i {
   font-size: 24px;
   color: white;
}

.feature-card h3 {
   font-size: 1.25rem;
   font-weight: 700;
   color: var(--color-primary);
   margin-bottom: 12px;
}

.feature-card p {
   color: rgba(9, 14, 58, 0.6);
   margin-bottom: 20px;
   line-height: 1.6;
}

.feature-examples {
   list-style: none;
   padding: 0;
   margin: 0;
}

.feature-examples li {
   display: flex;
   align-items: flex-start;
   gap: 8px;
   margin-bottom: 8px;
   font-size: 0.875rem;
   color: rgba(9, 14, 58, 0.8);
}

.feature-examples i {
   color: #10B981;
   margin-top: 2px;
   font-size: 12px;
}

@media (max-width: 768px) {
   .features-grid {
       grid-template-columns: 1fr;
       gap: 20px;
   }
}

/* ================================
  DEMO SECTION
  ================================ */
.demo-section {
   background: #f8f9fa;
   padding: 100px 0;
}

.demo-box {
   background: white;
   border-radius: var(--radius-xl);
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
   overflow: hidden;
   max-width: 1000px;
   margin: 0 auto;
}

.demo-header {
   background: var(--gradient-primary);
   color: white;
   padding: 30px;
   text-align: center;
}

.demo-header h3 {
   margin: 0 0 8px 0;
   font-size: 1.5rem;
   font-weight: 600;
}

.demo-header p {
   margin: 0;
   opacity: 0.9;
}

.demo-content {
   padding: 40px;
}

.query-examples {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
   margin-bottom: 40px;
}

.query-card {
   background: #f8f9fa;
   border-radius: var(--radius-lg);
   padding: 20px;
   cursor: pointer;
   transition: all var(--transition-slow);
   border: 2px solid transparent;
}

.query-card:hover {
   background: white;
   border-color: #6C63FF;
   transform: translateY(-2px);
   box-shadow: 0 10px 20px rgba(108, 99, 255, 0.1);
}

.query-card h4 {
   font-size: 0.875rem;
   color: #6C63FF;
   margin: 0 0 8px 0;
   text-transform: uppercase;
   letter-spacing: 0.05em;
}

.query-card p {
   margin: 0;
   color: var(--color-primary);
   font-size: 0.95rem;
   line-height: 1.4;
}

.demo-input {
   display: flex;
   gap: 12px;
   background: #f8f9fa;
   padding: 8px;
   border-radius: var(--radius-lg);
}

.demo-input input {
   flex: 1;
   padding: 14px 20px;
   border: none;
   background: white;
   border-radius: var(--radius-md);
   font-size: 1rem;
   color: var(--color-primary);
   outline: none;
}

.demo-input input::placeholder {
   color: rgba(9, 14, 58, 0.4);
}

.demo-input button {
   padding: 14px 28px;
   background: var(--gradient-primary);
   color: white;
   border: none;
   border-radius: var(--radius-md);
   font-size: 1rem;
   font-weight: 600;
   cursor: pointer;
   display: flex;
   align-items: center;
   gap: 8px;
   transition: all var(--transition-slow);
}

.demo-input button:hover {
   transform: translateX(2px);
}

@media (max-width: 768px) {
   .query-examples {
       grid-template-columns: 1fr;
       gap: 12px;
   }
   
   .demo-input {
       flex-direction: column;
   }
   
   .demo-input button {
       width: 100%;
       justify-content: center;
   }
}

/* ================================
  STATS SECTION
  ================================ */
.stats {
   background: white;
   padding: 80px 0;
   border-top: 1px solid rgba(0, 0, 0, 0.05);
   border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.stats-container {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 40px;
}

.stat-item {
   text-align: center;
}

.stat-item h3 {
   font-size: 3rem;
   font-weight: 800;
   color: var(--color-primary);
   margin: 0 0 8px 0;
   background: linear-gradient(135deg, #6C63FF 0%, #EC4899 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
}

.stat-item p {
   font-size: 1.125rem;
   color: rgba(9, 14, 58, 0.6);
   margin: 0;
}

@media (max-width: 768px) {
   .stats-container {
       grid-template-columns: repeat(2, 1fr);
       gap: 30px;
   }
   
   .stat-item h3 {
       font-size: 2rem;
   }
   
   .stat-item p {
       font-size: 1rem;
   }
}

/* ================================
  CTA SECTION
  ================================ */
.cta {
   background: #f8f9fa;
   padding: 100px 0;
}

.cta-content {
   text-align: center;
   max-width: 800px;
   margin: 0 auto;
   padding: 0 20px;
}

.cta-content h2 {
   font-size: clamp(2rem, 4vw, 3rem);
   font-weight: 800;
   color: var(--color-primary);
   margin-bottom: 20px;
   letter-spacing: -0.02em;
}

.cta-content p {
   font-size: 1.25rem;
   color: rgba(9, 14, 58, 0.6);
   margin-bottom: 40px;
}

.cta .btn-primary {
   font-size: 1.125rem;
   padding: 18px 40px;
}

.cta .btn-primary i {
   margin-left: 8px;
   transition: transform var(--transition-slow);
}

.cta .btn-primary:hover i {
   transform: translateX(5px);
}

/* ================================
  LOGIN PAGE STYLES
  ================================ */
/* Auth pages - keep nav transparent */
.auth-page nav {
   background: transparent !important;
   backdrop-filter: none !important;
   -webkit-backdrop-filter: none !important;
   border-bottom: 1px solid transparent !important;
   box-shadow: none !important;
}

/* Chat page - allow nav to transition when scrolled */
.chat-page nav:not(.scrolled) {
   background: transparent;
   backdrop-filter: none;
   -webkit-backdrop-filter: none;
   border-bottom: 1px solid transparent;
   box-shadow: none;
}

/* On chat page, nav should be below sidebar */
.chat-page nav {
   z-index: 500 !important; /* Well below sidebar's 2000 */
}

/* When sidebar is open, prevent nav from blocking sidebar area */
body.sidebar-open.chat-page nav {
   width: calc(100% - var(--sidebar-width));
   left: var(--sidebar-width);
}

/* ================================
  CHAT PAGE SPECIFIC STYLES
  ================================ */
/* Chat page uses gradient-flow from base template */
.chat-page .gradient-flow-wrapper {
   min-height: 100vh;
   height: auto; /* Allow height to grow with content */
   overflow: visible; /* Allow content to flow */
   overflow-x: hidden; /* Prevent horizontal scroll */
}

/* Enable body scrolling on chat page only when needed */
.chat-page {
   overflow-y: auto; /* This will only show scrollbar when content exceeds viewport */
   overflow-x: hidden !important; /* Prevent horizontal scrollbar */
   height: 100vh;
   /* Removed scrollbar-gutter - only show scrollbar when needed */
}

/* Ensure html doesn't show horizontal scrollbar on chat page */
html:has(.chat-page) {
   overflow-x: hidden !important;
}

/* Custom scrollbar styling for chat page */
.chat-page::-webkit-scrollbar {
   width: 8px; /* Narrower scrollbar */
}

.chat-page::-webkit-scrollbar-track {
   background: transparent; /* Invisible track */
}

.chat-page::-webkit-scrollbar-thumb {
   background: rgba(0, 0, 0, 0.2);
   border-radius: 4px;
}

.chat-page::-webkit-scrollbar-thumb:hover {
   background: rgba(0, 0, 0, 0.3);
}

/* Chat Section */
.chat-section {
   min-height: calc(100vh - 60px); /* Changed to min-height to allow expansion */
   padding: 45px 0 0 0; /* Add top padding for spacing from nav */
   position: relative;
   overflow: visible; /* Allow content to expand */
   display: flex;
   flex-direction: column;
}

.chat-container {
   flex: 1;
   width: 100%;
   padding-left: var(--sidebar-width);
   display: flex;
   flex-direction: column;
   transition: padding-left var(--transition-base);
   overflow: hidden;
}

body:not(.sidebar-open) .chat-container {
   padding-left: 0;
}

/* Reset html/body margins for consistency */
html, body {
   margin: 0;
   padding: 0;
   width: 100%;
}

/* Prevent scrolling on auth pages */
body.auth-page {
   overflow-y: hidden !important;
   height: 100vh !important;
   margin: 0 !important;
   padding: 0 !important;
}

/* Fix gradient wrapper on auth pages */
.auth-page .gradient-flow-wrapper {
   height: 100vh;
   overflow: hidden;
}

.auth-page .main-container {
   height: 100vh;
   overflow: hidden;
}
.login-section {
   height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 70px 20px 60px;
   background: transparent; /* Changed to transparent to show gradients */
   position: relative;
   overflow: hidden;
}

/* Background gradient */
.login-background {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 1;
}

.login-container {
   position: relative;
   z-index: 1;
   width: 100%;
   max-width: 480px;
   margin: 0 auto;
   padding: 0 20px;
   box-sizing: border-box;
}

.login-card {
   background: rgba(255, 255, 255, 0.8);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
   border-radius: var(--radius-2xl);
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
   padding: 36px 56px;
   border: 1px solid rgba(255, 255, 255, 0.3);
   width: 100%;
   box-sizing: border-box;
}

.login-logo {
   width: 80px;
   height: 80px;
   margin: 0 auto 24px;
   display: block;
}

.login-title {
   font-size: 1.75rem;
   font-weight: 800;
   color: var(--color-primary);
   text-align: center;
   margin-bottom: 6px;
   letter-spacing: -0.02em;
}

.login-subtitle {
   color: rgba(9, 14, 58, 0.6);
   text-align: center;
   margin-bottom: 20px;
   font-size: 0.95rem;
}

/* Form styles */
.form-group {
   margin-bottom: 10px;
   width: 100%;
   box-sizing: border-box;
}

.form-label {
   display: block;
   margin-bottom: 6px;
   color: var(--color-primary);
   font-weight: 600;
   font-size: 0.875rem;
   letter-spacing: 0.02em;
}

.form-control {
   width: 100%;
   padding: 10px 16px;
   border: 2px solid rgba(0, 0, 0, 0.08);
   border-radius: var(--radius-lg);
   font-size: 0.95rem;
   color: var(--color-primary);
   background: white;
   transition: all var(--transition-base);
   outline: none;
   box-sizing: border-box;
}

.form-control:focus {
   border-color: #6C63FF;
   box-shadow: 0 0 0 4px rgba(108, 99, 255, 0.1);
}

.form-control::placeholder {
   color: rgba(9, 14, 58, 0.4);
}

/* Submit button */
.btn-submit {
   width: 100%;
   padding: 16px;
   background: var(--gradient-primary);
   color: white;
   border: none;
   border-radius: var(--radius-lg);
   font-size: 1rem;
   font-weight: 600;
   cursor: pointer;
   transition: all var(--transition-slow);
   margin-top: 8px;
}

.btn-submit:hover {
   transform: translateY(-2px);
   box-shadow: 0 10px 30px rgba(108, 99, 255, 0.3);
}

/* Links */
.login-links {
   text-align: center;
   margin-top: 24px;
}

.login-links p {
   color: rgba(9, 14, 58, 0.6);
   margin: 0;
   font-size: 0.9rem;
}

.login-links a {
   color: #6C63FF;
   font-weight: 600;
   text-decoration: none;
   transition: opacity var(--transition-base);
}

.login-links a:hover {
   opacity: 0.8;
}

/* Alert messages */
.alert {
   padding: 12px 16px;
   border-radius: var(--radius-md);
   margin-bottom: 20px;
   font-size: 0.875rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.alert-danger {
   background: #FEE;
   color: #C33;
   border: 1px solid #FCC;
}

.alert-success {
   background: #EFE;
   color: #3C3;
   border: 1px solid #CFC;
}

.btn-close {
   background: none;
   border: none;
   font-size: 1.2rem;
   cursor: pointer;
   opacity: 0.5;
   transition: opacity var(--transition-base);
}

.btn-close:hover {
   opacity: 1;
}

/* Mobile responsiveness */
@media (max-width: 480px) {
   .login-card {
       padding: 32px 24px;
   }
   
   .login-title {
       font-size: 1.75rem;
   }
}

/* ================================
  REGISTER PAGE STYLES
  ================================ */
.register-section {
   height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 78px 20px 52px;
   background: transparent; /* Changed to transparent to show gradients */
   position: relative;
   overflow: hidden;
}

/* Background gradient */
.register-background {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 0;
}

.register-container {
   position: relative;
   z-index: 1;
   width: 100%;
   max-width: 500px;
   margin: 0 auto;
   padding: 0 20px;
   box-sizing: border-box;
}

.register-card {
   background: rgba(255, 255, 255, 0.8);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
   border-radius: var(--radius-2xl);
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
   padding: 20px 48px 24px;
   border: 1px solid rgba(255, 255, 255, 0.3);
   width: 100%;
   box-sizing: border-box;
}

.register-logo {
   width: 80px;
   height: 80px;
   margin: 0 auto 24px;
   display: block;
}

.register-title {
   font-size: 1.5rem;
   font-weight: 800;
   color: var(--color-primary);
   text-align: center;
   margin-bottom: 2px;
   letter-spacing: -0.02em;
}

.register-subtitle {
   color: rgba(9, 14, 58, 0.6);
   text-align: center;
   margin-bottom: 16px;
   font-size: 0.9rem;
}

/* Form row for side-by-side fields */
.form-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 12px;
   margin-bottom: 10px;
   width: 100%;
   box-sizing: border-box;
}

/* Captcha section */
.captcha-section {
   background: #f8f9fa;
   padding: 12px;
   border-radius: var(--radius-lg);
   margin-bottom: 12px;
}

.captcha-content {
   display: flex;
   align-items: center;
   gap: 20px;
   justify-content: center;
}

.captcha-input-group {
   display: flex;
   flex-direction: column;
   gap: 8px;
   flex: 1;
   max-width: 250px;
}

.captcha-input {
   margin: 0;
}

.captcha-image {
   display: block;
   margin: 0;
   border-radius: var(--radius-md);
   border: 2px solid rgba(0, 0, 0, 0.1);
   max-width: 140px;
   height: auto;
}

.captcha-label {
   font-size: 0.85rem;
   color: var(--color-primary);
   margin: 0;
   font-weight: 500;
}

/* Links */
.register-links {
   text-align: center;
   margin-top: 10px;
}

/* Form submit button spacing */
.register-card .btn--primary,
.login-card .btn--primary {
   width: 100%;
   margin-top: 4px;
   margin-bottom: 0;
}

.register-links p {
   color: rgba(9, 14, 58, 0.6);
   margin: 0;
   font-size: 0.9rem;
   line-height: 1.4;
}

.register-links a {
   color: #6C63FF;
   font-weight: 600;
   text-decoration: none;
   transition: opacity var(--transition-base);
}

.register-links a:hover {
   opacity: 0.8;
}

/* Mobile responsiveness */
@media (max-width: 600px) {
   .register-card {
       padding: 24px 32px;
   }
   
   .register-container {
       max-width: 100%;
   }
   
   .register-title {
       font-size: 1.4rem;
   }
   
   .form-row {
       grid-template-columns: 1fr;
   }
   
   .captcha-content {
       flex-direction: column;
       gap: 12px;
   }
   
   .captcha-input-group {
       max-width: 100%;
       width: 100%;
   }
}

/* Hidden field for JS check */
#js_check {
   display: none;
}

/* ================================
  SETTINGS PAGE STYLES
  ================================ */
.settings-section {
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 80px 20px 40px;
   background: #f8f9fa;
   position: relative;
   overflow: hidden;
}

/* Background gradient */
.settings-background {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: 
      radial-gradient(ellipse 1000px 800px at 20% 20%, 
         rgba(108, 99, 255, 0.15) 0%, 
         transparent 50%),
      radial-gradient(ellipse 800px 600px at 80% 80%, 
         rgba(78, 205, 196, 0.1) 0%, 
         transparent 50%);
   z-index: 0;
}

.settings-container {
   position: relative;
   z-index: 1;
   width: 100%;
   max-width: 600px;
}

.settings-card {
   background: white;
   border-radius: var(--radius-2xl);
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
   padding: 48px;
   border: 1px solid rgba(0, 0, 0, 0.05);
}

.settings-header {
   text-align: center;
   margin-bottom: 48px;
}

.settings-title {
   font-size: 2rem;
   font-weight: 800;
   color: var(--color-primary);
   margin-bottom: 8px;
   letter-spacing: -0.02em;
}

.settings-subtitle {
   color: rgba(9, 14, 58, 0.6);
   font-size: 1rem;
}

/* Section styles */
.settings-section-item {
   margin-bottom: 40px;
   padding-bottom: 40px;
   border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.settings-section-item:last-child {
   margin-bottom: 0;
   padding-bottom: 0;
   border-bottom: none;
}

.section-title {
   font-size: 1.25rem;
   font-weight: 700;
   color: var(--color-primary);
   margin-bottom: 16px;
   display: flex;
   align-items: center;
   gap: 8px;
}

.section-title i {
   font-size: 1rem;
   color: #6C63FF;
}

/* Account info */
.account-info {
   background: #f8f9fa;
   padding: 20px;
   border-radius: var(--radius-lg);
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.account-email {
   display: flex;
   flex-direction: column;
   gap: 4px;
}

.account-label {
   font-size: 0.875rem;
   color: rgba(9, 14, 58, 0.6);
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.05em;
}

.account-value {
   font-size: 1rem;
   color: var(--color-primary);
   font-weight: 500;
}

/* Links list */
.settings-links {
   list-style: none;
   padding: 0;
   margin: 0;
}

.settings-links li {
   margin-bottom: 12px;
}

.settings-links a {
   color: #6C63FF;
   text-decoration: none;
   font-weight: 500;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   transition: opacity var(--transition-base);
}

.settings-links a:hover {
   opacity: 0.8;
}

.settings-links i {
   font-size: 0.875rem;
}

/* Buttons */
.btn-outline {
   background: white;
   color: var(--color-primary);
   border: 2px solid rgba(0, 0, 0, 0.1);
   padding: 12px 24px;
   border-radius: var(--radius-lg);
   font-size: 1rem;
   font-weight: 600;
   cursor: pointer;
   transition: all var(--transition-slow);
   display: inline-flex;
   align-items: center;
   gap: 8px;
}

.btn-outline:hover {
   background: #f8f9fa;
   border-color: rgba(0, 0, 0, 0.2);
}

.btn-danger {
   background: #DC2626;
   color: white;
   border: none;
   padding: 12px 24px;
   border-radius: var(--radius-lg);
   font-size: 1rem;
   font-weight: 600;
   cursor: pointer;
   transition: all var(--transition-slow);
   display: inline-flex;
   align-items: center;
   gap: 8px;
}

.btn-danger:hover {
   background: #B91C1C;
   transform: translateY(-2px);
   box-shadow: 0 10px 30px rgba(220, 38, 38, 0.3);
}

/* Modal styles */
.modal-overlay {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: rgba(0, 0, 0, 0.5);
   z-index: 1000;
   align-items: center;
   justify-content: center;
}

.modal-overlay.show {
   display: flex;
}

.modal {
   background: white;
   border-radius: var(--radius-xl);
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
   padding: 32px;
   max-width: 480px;
   width: 90%;
   position: relative;
}

.modal-header {
   margin-bottom: 20px;
}

.modal-title {
   font-size: 1.5rem;
   font-weight: 700;
   color: var(--color-primary);
   margin: 0;
}

.modal-close {
   position: absolute;
   top: 20px;
   right: 20px;
   background: none;
   border: none;
   font-size: 1.5rem;
   color: rgba(9, 14, 58, 0.4);
   cursor: pointer;
   transition: color var(--transition-base);
}

.modal-close:hover {
   color: var(--color-primary);
}

.modal-body {
   color: rgba(9, 14, 58, 0.8);
   line-height: 1.6;
   margin-bottom: 24px;
}

.modal-footer {
   display: flex;
   gap: 12px;
   justify-content: flex-end;
}

.modal-footer form {
   margin: 0;
}

.btn-secondary {
   background: #E5E7EB;
   color: var(--color-primary);
   border: none;
   padding: 12px 24px;
   border-radius: var(--radius-lg);
   font-size: 1rem;
   font-weight: 600;
   cursor: pointer;
   transition: all var(--transition-slow);
}

.btn-secondary:hover {
   background: #D1D5DB;
}

/* Mobile responsiveness */
@media (max-width: 640px) {
   .settings-card {
       padding: 32px 24px;
   }
   
   .settings-title {
       font-size: 1.75rem;
   }
   
   .account-info {
       flex-direction: column;
       align-items: flex-start;
       gap: 12px;
   }
}

/* ================================
  DOCUMENTATION PAGE STYLES
  ================================ */
.doc-container {
   max-width: var(--container-max);
   margin: 0 auto;
   padding: 30px 20px;
}

.doc-header {
   text-align: center;
   margin-bottom: 60px;
}

.doc-header h1 {
   font-size: 3rem;
   font-weight: 700;
   color: var(--color-primary);
   margin-bottom: 20px;
}

.doc-header p {
   font-size: 1.25rem;
   color: #666;
}

.doc-section {
   background: #f8f9fa;
   border-radius: var(--radius-xl);
   padding: 40px;
   margin-bottom: 40px;
   border: 1px solid rgba(0, 0, 0, 0.05);
}

.doc-section h2 {
   font-size: 2rem;
   font-weight: 600;
   color: var(--color-primary);
   margin-bottom: 30px;
}

.doc-section h3 {
   font-size: 1.5rem;
   font-weight: 600;
   color: var(--color-primary);
   margin-top: 30px;
   margin-bottom: 20px;
}

.doc-section p {
   color: #666;
   line-height: 1.8;
   margin-bottom: 20px;
}

.code-example {
   background: #1e1e1e;
   color: #e0e0e0;
   padding: 20px;
   border-radius: var(--radius-md);
   font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
   overflow-x: auto;
   margin: 20px 0;
}

.api-endpoint {
   background: white;
   padding: 20px;
   border-radius: var(--radius-md);
   margin: 20px 0;
   border: 1px solid rgba(0, 0, 0, 0.1);
}

.method-badge {
   display: inline-block;
   padding: 5px 15px;
   background: #10B981;
   color: white;
   border-radius: var(--radius-sm);
   font-size: 0.875rem;
   font-weight: 600;
   margin-right: 10px;
}

.endpoint-path {
   font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
   color: #666;
}

/* ================================
  DATA LABELING/BROKERAGE PAGE STYLES
  ================================ */
/* CSS Custom Properties (Variables) */
:root {
   /* Colors */
   --color-primary: #090E3A;
   --color-primary-light: #1a2a6c;
   --color-primary-dark: #000518;
   
   --color-accent: #6C63FF;
   --color-success: #10B981;
   --color-warning: #F59E0B;
   --color-danger: #EF4444;
   
   --color-text: #090E3A;
   --color-text-muted: rgba(9, 14, 58, 0.6);
   --color-text-light: rgba(9, 14, 58, 0.4);
   
   --color-bg: #ffffff;
   --color-bg-secondary: #f8f9fa;
   --color-bg-tertiary: #e9ecef;
   
   /* Spacing */
   --space-xs: 0.25rem;  /* 4px */
   --space-sm: 0.5rem;   /* 8px */
   --space-md: 1rem;     /* 16px */
   --space-lg: 1.5rem;   /* 24px */
   --space-xl: 2rem;     /* 32px */
   --space-2xl: 3rem;    /* 48px */
   --space-3xl: 5rem;    /* 80px */
   
   /* Typography */
   --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   --font-mono: 'SF Mono', Monaco, Consolas, monospace;
   
   --text-xs: 0.75rem;   /* 12px */
   --text-sm: 0.875rem;  /* 14px */
   --text-base: 1rem;    /* 16px */
   --text-lg: 1.125rem;  /* 18px */
   --text-xl: 1.25rem;   /* 20px */
   --text-2xl: 1.5rem;   /* 24px */
   --text-3xl: 1.875rem; /* 30px */
   --text-4xl: 2.25rem;  /* 36px */
   --text-5xl: 3rem;     /* 48px */
   
   /* Layout */
   --container-max: 1200px;
   --nav-height: 60px;
   
   /* Transitions */
   --transition-fast: 150ms ease;
   --transition-base: 250ms ease;
   --transition-slow: 350ms ease;
   
   /* Shadows */
   --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
   --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
   --shadow-lg: 0 10px 20px rgba(0,0,0,0.1);
   --shadow-xl: 0 20px 40px rgba(0,0,0,0.1);
   
   /* Border radius */
   --radius-sm: 4px;
   --radius-md: 8px;
   --radius-lg: 12px;
   --radius-xl: 16px;
   --radius-full: 9999px;
   
   /* Gradients */
   --gradient-teal-glow: radial-gradient(
       ellipse 800px 600px at 60% 40%,
       rgba(78, 205, 196, 0.5) 0%,
       rgba(149, 225, 211, 0.3) 30%,
       rgba(149, 225, 211, 0.1) 60%,
       transparent 80%
   );
   
   --gradient-teal-diagonal: linear-gradient(
       135deg,
       rgba(149, 225, 211, 0.8) 0%,
       rgba(78, 205, 196, 0.6) 25%,
       rgba(78, 205, 196, 0.4) 50%,
       rgba(78, 205, 196, 0.2) 75%,
       transparent 100%
   );
   
   --gradient-purple-glow: radial-gradient(
       ellipse 800px 600px at 50% 50%,
       rgba(147, 51, 234, 0.3) 0%,
       rgba(147, 51, 234, 0.2) 20%,
       rgba(147, 51, 234, 0.1) 40%,
       rgba(147, 51, 234, 0.05) 60%,
       transparent 80%
   );
   
   --gradient-blue-orb: radial-gradient(
       circle 600px at 20% 50%,
       rgba(166, 200, 245, 0.4) 0%,
       rgba(166, 200, 245, 0.2) 30%,
       transparent 60%
   );
   
   --gradient-soft-mix: linear-gradient(
       180deg,
       rgba(230, 183, 243, 0.05) 0%,
       rgba(166, 200, 245, 0.05) 100%
   );
   
   --gradient-pink-accent: radial-gradient(
       circle 400px at 80% 20%,
       rgba(246, 135, 179, 0.3) 0%,
       rgba(246, 135, 179, 0.1) 40%,
       transparent 70%
   );

   /* Figma glassmorphic gradient */
   --gradient-figma-design: linear-gradient(
       135deg,
       rgba(255, 0, 0, 0.38) 0%,
       rgba(55, 0, 255, 0.6) 50%,
       rgba(0, 255, 255, 0.4) 100%
   );
}

/* Dark theme overrides */
html[data-theme="dark"] {
   --color-bg: #1a1a1a;
   --color-text: #ffffff;
   --color-text-muted: rgba(255,255,255,0.6);
}

/* ================================
  GRADIENT SYSTEM / CLASSES
  ================================ */
/* Teal Glow - Radial gradient */
.gradient-teal-glow {
   position: relative;
}

.gradient-teal-glow::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: var(--gradient-teal-glow);
   pointer-events: none;
   z-index: 0;
   opacity: 1;
   transition: opacity var(--transition-slow);
}

/* Teal Diagonal - Linear gradient */
.gradient-teal-diagonal {
   position: relative;
}

.gradient-teal-diagonal::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: var(--gradient-teal-diagonal);
   pointer-events: none;
   z-index: 0;
   opacity: 1;
   transition: opacity var(--transition-slow);
}

/* Purple Glow - Large decorative gradient */
.gradient-purple-glow {
   position: relative;
}

.gradient-purple-glow::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: var(--gradient-purple-glow);
   pointer-events: none;
   z-index: 0;
   opacity: 1;
   mix-blend-mode: normal; /* Default blend mode */
   transition: opacity var(--transition-slow);
}

/* Figma Design Gradient - Glassmorphic with blur */
.gradient-figma-design {
   position: relative;
   /* Add backdrop filter for glassmorphic effect */
   backdrop-filter: blur(10px) saturate(180%);
   -webkit-backdrop-filter: blur(10px) saturate(180%);
   /* Force consistent rendering */
   transform: translateZ(0);
   -webkit-transform: translateZ(0);
   /* Ensure proper stacking context */
   isolation: isolate;
}

/* Animated gradient inside clip-path */
.gradient-figma-design::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   pointer-events: none;
   z-index: 0;
   
   /* Animated gradient background */
   background: linear-gradient(270deg, #ff006e, #8338ec, #3a86ff, #06ffa5);
   background-size: 800% 800%;
   
   /* Key settings for that soft look */
   opacity: .4;
   mix-blend-mode: hard-light;
   filter: blur(1px);
   
   /* Smooth radial fade from center */
   -webkit-mask-image: 
      radial-gradient(ellipse 80% 70% at 35% 35%, 
         black 0%, 
         transparent 100%);
   mask-image: 
      radial-gradient(ellipse 80% 70% at 35% 25%, 
         black 0%, 
         transparent 100%);
   
   /* Smooth infinite animation */
   animation: GradientShift 20s ease infinite;
}

/* Gradient animation keyframes */
@keyframes GradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Optional: background orbs for additional depth */
.gradient-figma-design::after {
   content: '';
   position: absolute;
   top: -50%;
   left: -50%;
   width: 200%;
   height: 200%;
   pointer-events: none;
   z-index: -1;
   opacity: 0.2;
   
   background: 
      radial-gradient(circle 600px at 30% 50%, rgba(255, 0, 110, 0.3) 0%, transparent 50%),
      radial-gradient(circle 500px at 70% 30%, rgba(131, 56, 236, 0.3) 0%, transparent 50%),
      radial-gradient(circle 700px at 50% 70%, rgba(58, 134, 255, 0.3) 0%, transparent 50%);
   
   animation: OrbitRotate 60s linear infinite;
   filter: blur(60px);
}

/* Simple rotation for background orbs */
@keyframes OrbitRotate {
   from {
      transform: rotate(0deg);
   }
   to {
      transform: rotate(360deg);
   }
}

/* Blend mode modifiers */
.blend-hard-light .gradient-purple-glow::before,
.gradient-purple-glow.blend-hard-light::before {
   mix-blend-mode: hard-light;
}

.blend-soft-light .gradient-purple-glow::before,
.gradient-purple-glow.blend-soft-light::before {
   mix-blend-mode: soft-light;
}

.blend-multiply .gradient-purple-glow::before,
.gradient-purple-glow.blend-multiply::before {
   mix-blend-mode: multiply;
}

.blend-screen .gradient-purple-glow::before,
.gradient-purple-glow.blend-screen::before {
   mix-blend-mode: screen;
}

.blend-overlay .gradient-purple-glow::before,
.gradient-purple-glow.blend-overlay::before {
   mix-blend-mode: overlay;
}

/* Blue Orb - Accent gradient */
.gradient-blue-orb {
   position: relative;
}

.gradient-blue-orb::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: var(--gradient-blue-orb);
   pointer-events: none;
   z-index: 0;
   opacity: 1;
   transition: opacity var(--transition-slow);
}

/* Soft Mix - Background gradient */
.gradient-soft-mix {
   position: relative;
}

.gradient-soft-mix::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: var(--gradient-soft-mix);
   pointer-events: none;
   z-index: 0;
   opacity: 1;
   transition: opacity var(--transition-slow);
}

/* Pink Accent - Decorative gradient */
.gradient-pink-accent {
   position: relative;
}

.gradient-pink-accent::before {
   content: '';
   position: absolute;
   top: 0;
   right: 0;
   width: 600px;
   height: 600px;
   background: var(--gradient-pink-accent);
   pointer-events: none;
   z-index: 0;
   opacity: 1;
   transition: opacity var(--transition-slow);
}

/* Ensure Content is Above Gradients */
.gradient-teal-glow > *,
.gradient-teal-diagonal > *,
.gradient-purple-glow > *,
.gradient-blue-orb > *,
.gradient-soft-mix > *,
.gradient-pink-accent > *,
.gradient-figma-design > * {
   position: relative;
   z-index: 1;
}

/* Toggle Classes */
/* Hide all gradients */
.gradients-hidden .gradient-teal-glow::before,
.gradients-hidden .gradient-teal-diagonal::before,
.gradients-hidden .gradient-purple-glow::before,
.gradients-hidden .gradient-blue-orb::before,
.gradients-hidden .gradient-soft-mix::before,
.gradients-hidden .gradient-pink-accent::before,
.gradients-hidden .gradient-figma-design::before {
   opacity: 0;
}

/* Individual gradient toggles */
.hide-teal-glow .gradient-teal-glow::before { opacity: 0; }
.hide-teal-diagonal .gradient-teal-diagonal::before { opacity: 0; }
.hide-purple-glow .gradient-purple-glow::before { opacity: 0; }
.hide-blue-orb .gradient-blue-orb::before { opacity: 0; }
.hide-soft-mix .gradient-soft-mix::before { opacity: 0; }
.hide-pink-accent .gradient-pink-accent::before { opacity: 0; }
.hide-figma-design .gradient-figma-design::before { opacity: 0; }

/* Opacity modifiers */
.gradients-subtle .gradient-teal-glow::before,
.gradients-subtle .gradient-teal-diagonal::before,
.gradients-subtle .gradient-purple-glow::before,
.gradients-subtle .gradient-blue-orb::before,
.gradients-subtle .gradient-soft-mix::before,
.gradients-subtle .gradient-pink-accent::before,
.gradients-subtle .gradient-figma-design::before {
   opacity: 0.5;
}

.gradients-strong .gradient-teal-glow::before,
.gradients-strong .gradient-teal-diagonal::before,
.gradients-strong .gradient-purple-glow::before,
.gradients-strong .gradient-blue-orb::before,
.gradients-strong .gradient-soft-mix::before,
.gradients-strong .gradient-pink-accent::before,
.gradients-strong .gradient-figma-design::before {
   opacity: 1.5;
}

/* ================================
  BROKERAGE PAGE SPECIFIC STYLES
  ================================ */
/* Hero section for brokerage page */
.hero.gradient-figma-design {
   background: #ffffff !important;
   padding-top: 60px;
   min-height: 100vh;
   display: flex;
   align-items: flex-end;
   padding-bottom: 0px;
   position: relative;
   overflow: visible;
   transform: translateZ(0);
   -webkit-transform: translateZ(0);
   backface-visibility: hidden;
   -webkit-backface-visibility: hidden;
}

/* Brokerage Hero text */
.hero-text h1 {
   font-size: clamp(2rem, 5vw + 1rem, 3.5rem);
   font-weight: 800;
   line-height: 1.1;
   color: var(--color-primary);
   margin-bottom: 30px;
   letter-spacing: -0.03em;
}

.hero-text h1 .accent {
   color: var(--color-primary);
}

.hero-text p {
   font-size: clamp(1rem, 2vw, 1.125rem);
   line-height: 1.6;
   color: rgba(9, 14, 58, 0.6);
   max-width: 540px;
}

.hero-text p strong {
   font-weight: 700;
   color: rgba(9, 14, 58, 0.7);
}

.hero-visual {
   display: flex;
   justify-content: center;
   align-items: center;
}

.hero-visual img {
   max-width: 100%;
   height: auto;
   display: block;
   filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.1));
   will-change: filter, opacity;
   transform: translateZ(0);
   -webkit-transform: translateZ(0);
   opacity: 0;
   transition: opacity var(--transition-slow);
}

.hero-visual img.loaded {
   opacity: 1;
}

/* Premium section */
.premium {
   background: #ffffff;
   padding: 80px 0;
   text-align: center;
   position: relative;
   z-index: 5;
   overflow: hidden;
   margin-top: 0;
   box-shadow: 0 -10px 30px rgba(0,0,0,0.05);
   border-radius: 0;
   border-top: 1px solid rgba(0,0,0,0.05);
}

/* Premium Badge */
.premium-badge-wrapper {
   display: inline-block;
   position: relative;
   margin-bottom: 40px;
}

.premium-badge-shadow {
   position: absolute;
   width: 100%;
   height: 100%;
   background: #f2efef;
   border-radius: var(--radius-full);
   top: 1px;
   left: 0;
   z-index: 0;
   overflow: hidden;
   isolation: isolate;
}

.premium-badge-shadow::before {
   content: '';
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background:
       radial-gradient(circle 150px at 20% 150%, rgba(230, 183, 243, 0.5) 0%, transparent 40%),
       radial-gradient(circle 150px at 80% 150%, rgba(166, 200, 245, 0.5) 0%, transparent 40%);
   z-index: -1;
}

.premium-badge {
   background: #ffffff;
   color: var(--color-primary);
   padding: 10px 24px;
   border-radius: var(--radius-full);
   font-size: 13px;
   font-weight: 700;
   letter-spacing: 0.5px;
   display: inline-flex;
   align-items: center;
   gap: 10px;
   text-transform: uppercase;
   position: relative;
   overflow: hidden;
   isolation: isolate;
}

.premium-badge::before {
   content: '';
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background:
       radial-gradient(circle 150px at 20% 150%, rgba(230, 183, 243, 0.5) 0%, transparent 40%),
       radial-gradient(circle 150px at 80% 150%, rgba(166, 200, 245, 0.5) 0%, transparent 40%);
   z-index: -1;
}

.premium-badge .star-icon {
   font-size: 18px;
   color: var(--color-primary);
}

.premium h2 {
   font-size: clamp(1.5rem, 4vw, 2.625rem);
   font-weight: 700;
   line-height: 1.2;
   color: var(--color-primary);
   margin-bottom: 20px;
   letter-spacing: -0.02em;
}

.premium p {
   font-size: 16px;
   line-height: 1.6;
   color: rgba(9, 14, 58, 0.6);
   max-width: 600px;
   margin: 0 auto;
}

/* API Data Section */
.api-data {
   background: #F4F5FB;
   padding: 120px 0;
   position: relative;
   overflow: hidden;
}

/* Top gradient for each API Data section */
.api-data::before {
   content: '';
   position: absolute;
   top: 0;
   left: 50%;
   transform: translateX(-50%);
   width: 100%;
   height: 50%;
   background: radial-gradient(
       ellipse 600px 400px at 50% 0%,
       #F2DFFC 0%,
       rgba(242, 223, 252, 0.9) 15%,
       rgba(242, 223, 252, 0.7) 25%,
       rgba(242, 223, 252, 0.5) 35%,
       rgba(242, 223, 252, 0.3) 45%,
       rgba(242, 223, 252, 0.15) 55%,
       transparent 70%
   );
   pointer-events: none;
   z-index: 1;
}

.api-content {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 60px;
   align-items: center;
}

/* Code block styling */
.api-code-wrapper {
   display: flex;
   justify-content: flex-end;
}

.api-code-block {
   background: #1E1E1E;
   border-radius: var(--radius-xl);
   padding: 40px;
   max-width: 100%;
   width: 100%;
   position: relative;
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.api-code-block pre {
   margin: 0;
   overflow-x: auto;
   color: #D4D4D4;
   font-family: 'SF Mono', Monaco, Consolas, monospace;
   font-size: 14px;
   line-height: 1.6;
}

.api-code-block code {
   display: block;
   white-space: pre;
   color: #D4D4D4;
}

/* Dots at bottom of code block */
.code-dots {
   position: absolute;
   bottom: 20px;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
   gap: 8px;
}

.code-dots span {
   width: 6px;
   height: 6px;
   background: rgba(255, 255, 255, 0.3);
   border-radius: 50%;
}

.code-dots span:nth-child(2) {
   background: rgba(255, 255, 255, 0.5);
}

/* Text content */
.api-text {
   max-width: 100%;
}

.api-label {
   font-size: 13px;
   font-weight: 700;
   letter-spacing: 0.5px;
   color: rgba(9, 14, 58, 0.8);
   text-transform: uppercase;
   display: inline-block;
   background: rgba(255, 255, 255, 0.7);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   padding: 10px 20px;
   border-radius: 30px;
   border: 1px solid rgba(255, 255, 255, 0.3);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
   position: relative;
   overflow: hidden;
   isolation: isolate;
}

/* Gradient overlay for API labels */
.api-label::before {
   content: '';
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background:
       radial-gradient(circle 150px at 20% 50%, rgba(230, 183, 243, 0.4) 0%, transparent 40%),
       radial-gradient(circle 150px at 80% 50%, rgba(166, 200, 245, 0.4) 0%, transparent 40%);
   z-index: -1;
}

.api-text h2 {
   font-size: clamp(2rem, 4vw, 3rem);
   font-weight: 800;
   line-height: 1.1;
   color: var(--color-primary);
   margin: 20px 0 30px 0;
   letter-spacing: -0.03em;
}

.api-text p {
   font-size: 18px;
   line-height: 1.6;
   color: rgba(9, 14, 58, 0.6);
   margin-bottom: 40px;
}

/* Action buttons */
.api-actions {
   display: flex;
   gap: 16px;
}

.btn-copy,
.btn-download {
   width: 48px;
   height: 48px;
   border: 1px solid rgba(9, 14, 58, 0.1);
   background: white;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: all var(--transition-base);
   color: var(--color-primary);
}

.btn-copy:hover,
.btn-download:hover {
   background: var(--color-primary);
   color: white;
   transform: translateY(-2px);
   box-shadow: 0 4px 12px rgba(9, 14, 58, 0.15);
}

/* Responsive */
@media (max-width: 968px) {
   .api-content {
       grid-template-columns: 1fr;
       gap: 60px;
   }
   
   .api-code-wrapper {
       justify-content: center;
       order: 2;
   }
   
   .api-text {
       text-align: center;
       margin: 0 auto;
       order: 1;
   }
   
   .api-actions {
       justify-content: center;
   }
}

@media (max-width: 568px) {
   .api-data {
       padding: 80px 0;
   }
   
   .api-code-block {
       padding: 24px;
       border-radius: var(--radius-xl);
   }
   
   .api-code-block pre {
       font-size: 12px;
   }
}

/* API Access Section */
.api-access {
   background: transparent;
   padding: 120px 0;
   position: relative;
   overflow: visible;
}

.section-badge {
   display: inline-block;
   background: rgba(255, 255, 255, 0.9);
   backdrop-filter: blur(10px);
   padding: 10px 20px;
   border-radius: 30px;
   font-size: 13px;
   font-weight: 700;
   letter-spacing: 0.5px;
   margin-bottom: 40px;
   border: 1px solid rgba(0, 0, 0, 0.05);
}

.api-access h2 {
   font-size: clamp(2rem, 5vw, 3.5rem);
   font-weight: 800;
   line-height: 1.1;
   color: var(--color-primary);
   margin-bottom: 30px;
   letter-spacing: -0.03em;
}

.api-access > p {
   font-size: 18px;
   line-height: 1.6;
   color: rgba(9, 14, 58, 0.6);
   max-width: 600px;
   margin-bottom: 60px;
}

/* API Demo Grid */
.api-demo-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 40px;
   margin-top: 60px;
}

/* Glassmorphic Boxes */
.glassmorphic {
   background: rgba(255, 255, 255, 0.7);
   backdrop-filter: blur(20px) saturate(180%);
   -webkit-backdrop-filter: blur(20px) saturate(180%);
   border: 1px solid rgba(255, 255, 255, 0.3);
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
   position: relative;
   overflow: hidden;
}

/* Gradient inside glassmorphic boxes */
.glassmorphic::before {
   content: '';
   position: absolute;
   top: -50%;
   right: -50%;
   width: 100%;
   height: 100%;
   background: radial-gradient(
       circle 300px at center,
       rgba(255, 0, 110, 0.1) 0%,
       rgba(131, 56, 236, 0.08) 30%,
       transparent 60%
   );
   pointer-events: none;
   z-index: 0;
}

.glassmorphic > * {
   position: relative;
   z-index: 1;
}

.api-demo-box {
   padding: 40px;
   border-radius: var(--radius-xl);
}

.api-demo-box h3 {
   font-size: 14px;
   font-weight: 700;
   letter-spacing: 0.5px;
   color: var(--color-primary);
   margin-bottom: 10px;
}

.api-demo-box p {
   font-size: 14px;
   color: rgba(9, 14, 58, 0.6);
   margin-bottom: 30px;
}

/* API Form */
.api-form label {
   display: block;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 0.5px;
   color: rgba(9, 14, 58, 0.6);
   margin-bottom: 8px;
   text-transform: uppercase;
}

.api-form select {
   width: 100%;
   padding: 12px 16px;
   border: 1px solid rgba(9, 14, 58, 0.1);
   border-radius: var(--radius-md);
   background: white;
   font-size: 14px;
   margin-bottom: 20px;
   appearance: none;
   cursor: pointer;
}

.btn-send {
   width: 100%;
   padding: 14px;
   background: var(--color-primary);
   color: white;
   border: none;
   border-radius: var(--radius-md);
   font-size: 14px;
   font-weight: 600;
   cursor: pointer;
   transition: all var(--transition-base);
   margin-top: 10px;
}

.btn-send:hover {
   background: #0A1148;
   transform: translateY(-2px);
}

.link-docs {
   display: inline-block;
   margin-top: 20px;
   font-size: 14px;
   color: var(--color-primary);
   text-decoration: none;
   font-weight: 600;
}

/* Code Response */
.code-response {
   background: #1E1E1E;
   border-radius: var(--radius-lg);
   padding: 20px;
   overflow-x: auto;
}

.code-response pre {
   margin: 0;
   color: #D4D4D4;
   font-family: 'SF Mono', Monaco, Consolas, monospace;
   font-size: 13px;
   line-height: 1.5;
   white-space: pre;
}

/* Pricing Section */
.pricing {
   background: transparent;
   padding: 120px 0;
   position: relative;
   overflow: visible;
}

.pricing-header {
   text-align: center;
   margin-bottom: 60px;
}

.pricing-header h2 {
   font-size: clamp(2rem, 4vw, 3rem);
   font-weight: 800;
   line-height: 1.2;
   color: var(--color-primary);
   margin-bottom: 40px;
   letter-spacing: -0.02em;
}

.pricing-toggle {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 30px;
   font-size: 14px;
   font-weight: 600;
   color: rgba(9, 14, 58, 0.6);
}

.toggle-switch {
   background: rgba(9, 14, 58, 0.05);
   border-radius: 30px;
   padding: 4px;
   display: flex;
   gap: 4px;
}

.toggle-switch span {
   padding: 8px 20px;
   border-radius: var(--radius-xl);
   cursor: pointer;
   transition: all var(--transition-base);
}

.toggle-switch span:first-child {
   background: white;
   color: var(--color-primary);
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Pricing Grid */
.pricing-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 40px;
   margin-bottom: 80px;
}

.pricing-card {
   padding: 50px 40px;
   border-radius: var(--radius-2xl);
   text-align: left;
}

.pricing-card.featured {
   border: 2px solid rgba(147, 51, 234, 0.3);
}

.pricing-card h3 {
   font-size: 16px;
   font-weight: 700;
   letter-spacing: 0.5px;
   color: var(--color-primary);
   margin-bottom: 10px;
}

.pricing-card p {
   font-size: 14px;
   color: rgba(9, 14, 58, 0.6);
   margin-bottom: 30px;
}

.pricing-card ul {
   list-style: none;
   padding: 0;
   margin: 0 0 40px 0;
}

.pricing-card li {
   padding: 10px 0;
   font-size: 14px;
   color: rgba(9, 14, 58, 0.8);
}

.price {
   font-size: 48px;
   font-weight: 700;
   color: var(--color-primary);
   margin-bottom: 30px;
}

.price span {
   font-size: 18px;
   font-weight: 400;
   color: rgba(9, 14, 58, 0.6);
}

.btn-plan {
   width: 100%;
   padding: 14px;
   background: var(--color-primary);
   color: white;
   border: none;
   border-radius: var(--radius-md);
   font-size: 14px;
   font-weight: 600;
   cursor: pointer;
   transition: all var(--transition-base);
}

.btn-plan.featured {
   background: #6C63FF;
}

.btn-plan:hover {
   transform: translateY(-2px);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Credits Section */
.credits-section {
   max-width: 800px;
   margin: 0 auto;
   text-align: center;
}

.credits-section h3 {
   font-size: 24px;
   font-weight: 700;
   color: var(--color-primary);
   margin-bottom: 16px;
}

.credits-section > p {
   font-size: 16px;
   color: rgba(9, 14, 58, 0.6);
   margin-bottom: 40px;
}

.credits-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 24px;
}

.credit-item {
   text-align: left;
   padding: 20px;
   background: rgba(255, 255, 255, 0.5);
   backdrop-filter: blur(10px);
   border: 1px solid rgba(9, 14, 58, 0.05);
   border-radius: var(--radius-lg);
}

.credit-item h4 {
   font-size: 15px;
   font-weight: 600;
   color: var(--color-primary);
   margin-bottom: 4px;
}

.credit-item p {
   font-size: 14px;
   color: rgba(9, 14, 58, 0.6);
   margin: 0;
}

/* Responsive adjustments */
@media (max-width: 968px) {
   .api-demo-grid,
   .pricing-grid {
       grid-template-columns: 1fr;
   }
   
   .api-access h2,
   .pricing-header h2 {
       text-align: center;
   }
   
   .api-access > p {
       text-align: center;
       margin: 0 auto 60px;
   }
}

@media (max-width: 568px) {
   .credits-grid {
       grid-template-columns: 1fr;
   }
   
   .api-demo-box,
   .pricing-card {
       padding: 30px;
   }
}

/* Mobile adjustments for hero */
@media (max-width: 767px) {
   .hero {
       min-height: auto;
       padding: 80px 0 0px 0;
   }
   
   .hero-container {
       padding: 40px 20px 0;
   }
   
   .hero-text {
       text-align: center;
       order: 2;
   }
   
   .hero-text p {
       margin: 0 auto;
   }
   
   .hero-visual {
       order: 1;
       margin-bottom: 20px;
   }
   
   .hero-visual img {
       max-height: 300px;
   }
}

/* Responsive Premium Section */
@media (max-width: 768px) {
   .premium {
       padding: 60px 0;
   }
   
   .premium-container {
       padding: 0 20px;
   }
   
   .premium p br {
       display: none;
   }
   
   /* Mobile nav links specific to brokerage page */
   .nav-links {
       position: fixed;
       top: 60px;
       left: -100%;
       width: 100%;
       height: calc(100vh - 60px);
       background: white;
       flex-direction: column;
       padding: 40px 0px;
       gap: 20px;
       transition: left var(--transition-slow);
       box-shadow: 0 2px 10px rgba(0,0,0,0.1);
       z-index: 999;
   }
   
   .nav-links.show {
       left: 0;
   }
}

/* Touch-friendly adjustments */
@media (hover: none) and (pointer: coarse) {
   button, a {
       min-height: 44px;
       min-width: 44px;
   }
   
   .nav-links a {
       padding: 12px 20px;
       width: 100%;
   }
}

/* ================================
  CHAT PAGE STYLES
  ================================ */
/* Special styles for chat page */
body.chat-welcome-state {
   overflow: hidden;
   height: 100vh;
}

body:not(.chat-welcome-state) {
   min-height: 100vh;
   height: auto;
}

/* Chat page specific navigation */
/* Chat page nav should NOT adjust for sidebar - keep consistent with other pages */
.chat-page nav .nav-container {
   padding-left: 20px !important; /* Same as all other pages */
   transition: none; /* Remove transition since we're not changing padding */
}

/* Nav logo fade animation - opposite of sidebar logo */
.chat-page .nav-logo {
   transition: none; /* No transition initially */
   opacity: 1; /* Visible when sidebar is closed */
   transform: scale(1);
}

/* Enable transitions after page load */
body.sidebar-transitions.chat-page .nav-logo {
   transition: opacity var(--transition-medium), transform var(--transition-medium);
}

/* Hide nav logo when sidebar is open */
body.sidebar-open.chat-page .nav-logo {
   opacity: 0;
   transform: scale(0.8);
   pointer-events: none;
}

/* Coordinate timing with sidebar logo */
body.sidebar-open.sidebar-transitions.chat-page .nav-logo {
   transition-delay: 0s; /* Hide immediately when sidebar opens */
}

body:not(.sidebar-open).sidebar-transitions.chat-page .nav-logo {
   transition-delay: 0.15s; /* Show after sidebar logo hides */
}

/* ================================
  SIDEBAR STYLES
  ================================ */
.sidebar {
   position: fixed;
   top: 0;
   left: 0;
   width: var(--sidebar-width);
   height: 100vh;
   background: rgba(255, 255, 255, 0.5); /* 50% opacity for glass effect */
   backdrop-filter: blur(16px) saturate(180%); /* Enhanced blur and saturation */
   -webkit-backdrop-filter: blur(16px) saturate(180%);
   border-right: 1px solid rgba(255, 255, 255, 0.5); /* Brighter border for glass edge */
   box-shadow: 
      0 8px 32px rgba(31, 38, 135, 0.12),
      inset 0 0 0 1px rgba(255, 255, 255, 0.1); /* Dual shadow for depth */
   z-index: 2000; /* Higher than nav */
   transition: none; /* No transition initially */
   overflow-y: auto;
   padding: 0;
   display: flex;
   flex-direction: column;
}

/* Add transition only after page loads */
body.sidebar-transitions .sidebar {
   transition: transform var(--transition-base), box-shadow var(--transition-base);
}

/* Sidebar Header */
.sidebar-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: 61px; /* Match nav height + 1px */
   padding: 0 15px 0 20px;
   border-bottom: 1px solid rgba(0, 0, 0, 0.05);
   flex-shrink: 0;
   position: relative;
   z-index: 2002; /* Higher than sidebar content */
}

/* Sidebar Logo */
.sidebar-logo {
   display: flex;
   align-items: center;
   gap: 12px;
   text-decoration: none;
   flex-shrink: 0;
   transition: all var(--transition-base);
}

.sidebar-logo img {
   width: 32px; /* Reduced from 40px */
   height: 32px; /* Reduced from 40px */
   transition: opacity var(--transition-medium), transform var(--transition-medium);
}

.sidebar-logo span {
   font-size: 18px; /* Reduced from 20px */
   font-weight: 700;
   color: var(--color-primary);
   letter-spacing: -0.5px;
   transition: opacity var(--transition-medium), transform var(--transition-medium);
}

/* Hide logo and title when sidebar is closed */
body:not(.sidebar-open) .sidebar-logo img,
body:not(.sidebar-open) .sidebar-logo span {
   opacity: 0;
   transform: scale(0.8);
   transition-delay: 0s; /* Immediate fade out */
}

/* Show logo and title when sidebar is open */
body.sidebar-open .sidebar-logo img,
body.sidebar-open .sidebar-logo span {
   opacity: 1;
   transform: scale(1);
   transition-delay: 0.15s; /* Slight delay for fade in */
}

/* CSS Toggle - Hidden by default */
body:not(.sidebar-open) .sidebar {
   transform: translateX(-100%) !important;
}

body.sidebar-open .sidebar {
   transform: translateX(0) !important;
}

/* Toggle button inside sidebar */
.sidebar-toggle-inside {
   width: 30px;
   height: 30px;
   background: rgba(255, 255, 255, 0.3); /* Glassmorphic background */
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   border: 1px solid rgba(255, 255, 255, 0.5);
   border-radius: var(--radius-md);
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: all var(--transition-base);
   color: var(--color-text-muted);
   flex-shrink: 0;
   position: relative;
   padding: 0;
   font: inherit;
   z-index: 3001; /* Higher than everything */
   outline: inherit;
}

.sidebar-toggle-inside:hover {
   background: rgba(255, 255, 255, 0.9);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   color: var(--color-primary);
   transform: scale(1.1);
   box-shadow: 0 2px 8px rgba(31, 38, 135, 0.15);
}

.sidebar-toggle-inside:active {
   transform: scale(0.95);
}

/* Ensure chevron icon doesn't interfere with button clicks */
.sidebar-toggle-inside i {
   pointer-events: none;
}

/* Sidebar Toggle Button - Outside */
.sidebar-toggle {
   position: fixed;
   top: 70px; /* Below nav */
   left: 20px;
   width: 40px;
   height: 40px;
   background: rgba(255, 255, 255, 0.7); /* Glassmorphic background */
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
   border: 1px solid rgba(255, 255, 255, 0.3);
   border-radius: var(--radius-md);
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: all var(--transition-base);
   z-index: 3000; /* Higher than sidebar and nav */
   box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
   font-size: 18px;
   color: var(--color-primary);
}

body.sidebar-open .sidebar-toggle {
   opacity: 0;
   pointer-events: none;
}

.sidebar-toggle:hover {
   background: var(--color-primary);
   color: white;
   transform: scale(1.05);
}

.sidebar-toggle i {
   transition: transform var(--transition-base);
}

/* New Chat Button */
.new-chat-btn {
   margin: 20px;
   padding: 12px 20px;
   background: rgba(9, 14, 58, 0.85); /* Semi-transparent blue */
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   color: white;
   border: 1px solid rgba(255, 255, 255, 0.2);
   border-radius: var(--radius-md);
   font-size: 14px;
   font-weight: 600;
   cursor: pointer;
   display: flex;
   align-items: center;
   gap: 10px;
   width: calc(100% - 40px);
   transition: all var(--transition-base);
   flex-shrink: 0;
   box-shadow: 0 4px 16px rgba(9, 14, 58, 0.2);
}

.new-chat-btn:hover {
   background: #0A1148; /* Slightly lighter on hover */
   transform: translateY(-2px);
   box-shadow: 0 8px 24px rgba(9, 14, 58, 0.3);
}

/* ================================
  SIDEBAR MENU NAVIGATION STYLES
  ================================ */
/* Sidebar menu container */
.sidebar__menu {
   padding: 20px 0;
   flex: 1;
   overflow-y: auto;
}

/* Navigation list - remove default list styling */
.sidebar__menu .nav {
   list-style: none;
   margin: 0;
   padding: 0;
}

/* Navigation items - add vertical spacing */
.sidebar__menu .nav__item {
   list-style: none; /* Ensure no dots */
   margin: 0 0 8px 0; /* 8px bottom margin for better spacing */
   padding: 0;
}

/* Navigation links - modern styling with better spacing */
.sidebar__menu .nav__link {
   display: flex;
   align-items: center;
   gap: 12px; /* Space between icon and text */
   padding: 12px 20px; /* Generous padding for better touch targets */
   margin: 0 20px; /* Side margins for visual balance */
   color: var(--color-text-secondary);
   text-decoration: none;
   font-size: 14px;
   font-weight: 500;
   border-radius: var(--radius-md);
   transition: all var(--transition-fast);
   position: relative;
   overflow: hidden;
}

/* Navigation link hover state */
.sidebar__menu .nav__link:hover {
   background: rgba(9, 14, 58, 0.08);
   color: var(--color-primary);
   transform: translateX(4px); /* Subtle slide effect */
}

/* Active navigation link */
.sidebar__menu .nav__link--active {
   background: rgba(9, 14, 58, 0.12);
   color: var(--color-primary);
   font-weight: 600;
   box-shadow: inset 3px 0 0 var(--color-primary); /* Left border indicator */
}

/* Navigation icons */
.sidebar__menu .nav__icon {
   width: 18px;
   height: 18px;
   opacity: 0.7;
   transition: opacity var(--transition-fast);
   flex-shrink: 0; /* Prevent icon from shrinking */
}

/* Icon opacity changes on hover and active states */
.sidebar__menu .nav__link:hover .nav__icon,
.sidebar__menu .nav__link--active .nav__icon {
   opacity: 1;
}

/* Ensure proper text wrapping and ellipsis for long menu names */
.sidebar__menu .nav__link span {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   flex: 1;
}

/* Focus states for accessibility */
.sidebar__menu .nav__link:focus {
   outline: 2px solid var(--color-primary);
   outline-offset: -2px;
}

/* Additional spacing for footer section if present */
.sidebar__footer {
   margin-top: auto;
   padding: 20px 0; /* Remove side padding to match menu structure */
   border-top: 1px solid rgba(9, 14, 58, 0.1);
}

/* Footer links should match menu link alignment */
.sidebar__footer .nav__link {
   margin: 0 20px; /* Same side margins as regular menu items */
   color: var(--color-text-muted);
   /* Inherit all other styles from .sidebar__menu .nav__link */
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 12px 20px;
   text-decoration: none;
   font-size: 14px;
   font-weight: 500;
   border-radius: var(--radius-md);
   transition: all var(--transition-fast);
}

/* Footer link hover state */
.sidebar__footer .nav__link:hover {
   background: rgba(9, 14, 58, 0.08);
   color: var(--color-primary);
   transform: translateX(4px);
}

/* ================================
  DASHBOARD STYLES
  ================================ */
/* Dashboard main container */
.dashboard-section {
   padding: 0;
   min-height: 100vh;
   /* Removed background - let the base template handle it */
   margin-left: 0;
   transition: margin-left var(--transition-base);
}

/* When sidebar is open, add left margin to avoid overlap */
body.sidebar-open .dashboard-section {
   margin-left: var(--sidebar-width, 280px);
}

/* Data section styles (similar to dashboard-section) */
.data-section {
   padding: 0;
   min-height: 100vh;
   margin-left: 0;
   transition: margin-left var(--transition-base);
}

/* When sidebar is open, add left margin to avoid overlap */
body.sidebar-open .data-section {
   margin-left: var(--sidebar-width, 280px);
}

/* Data section container */
.data-section .container {
   max-width: 1400px;
   margin: 0 auto;
   padding: 40px 20px;
}

/* Make the data page cards look modern */
.data-section .card {
   background: transparent;
   border: 1px solid rgba(255, 255, 255, 0.2);
   border-radius: var(--radius-lg);
   transition: all var(--transition-base);
   overflow: hidden;
}

.data-section .card:hover {
   box-shadow: 0 12px 40px rgba(31, 38, 135, 0.25);
}

.data-section .card__header {
   background: linear-gradient(135deg, rgba(108, 99, 255, 0.1) 0%, rgba(236, 72, 153, 0.1) 100%);
   border-bottom: 1px solid rgba(255, 255, 255, 0.2);
   padding: 24px;
}

.data-section .card__header-content {
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
   gap: 16px;
}

.data-section .card__title-section h5 {
   color: var(--color-primary);
   font-size: 1.5rem;
   font-weight: 700;
   margin: 0 0 4px 0;
}

.data-section .card__title-section p {
   color: rgba(9, 14, 58, 0.6);
   margin: 0;
   font-size: 0.875rem;
}

.data-section .card__body {
   padding: 24px;
}


/* Table controls styling */
.data-section .table-controls {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 24px;
   flex-wrap: wrap;
   gap: 16px;
   background: rgba(255, 255, 255, 0.5);
   backdrop-filter: blur(10px);
   border-radius: var(--radius-md);
   padding: 20px;
   border: 1px solid rgba(255, 255, 255, 0.3);
}

.data-section .table-controls__left {
   display: flex;
   align-items: center;
   gap: 16px;
}

.data-section .table-controls__right {
   display: flex;
   align-items: center;
   gap: 16px;
}

/* Ensure forms inside controls are inline */
.data-section .table-controls .form--inline {
   display: flex;
   align-items: center;
   gap: 12px;
   margin: 0;
}

.data-section .table-controls .label {
   white-space: nowrap;
   margin: 0;
   font-size: 14px;
   font-weight: 500;
   color: var(--color-text);
}

/* Fix select dropdowns in table controls - same as form selects */
.data-section .table-controls .select {
   appearance: none !important;
   -webkit-appearance: none !important;
   -moz-appearance: none !important;
   background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(9, 14, 58, 0.6)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
   background-repeat: no-repeat !important;
   background-position: right 12px center !important;
   background-size: 16px !important;
   padding-right: 40px !important;
   cursor: pointer;
}

.data-section .table-controls .select:focus {
   background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c63ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
}

/* Remove browser defaults for table control selects */
.data-section .table-controls .select::-ms-expand {
   display: none !important;
}

.data-section .table-controls .select::-webkit-calendar-picker-indicator,
.data-section .table-controls .select::-webkit-clear-button,
.data-section .table-controls .select::-webkit-inner-spin-button,
.data-section .table-controls .select::-webkit-outer-spin-button {
   display: none !important;
   -webkit-appearance: none !important;
   background: none !important;
}

/* Table control select options styling */
.data-section .table-controls .select option {
   background: white !important;
   background-image: none !important;
   background-color: white !important;
   color: var(--color-text) !important;
   padding: 8px 12px !important;
   border: none !important;
   outline: none !important;
   appearance: none !important;
   -webkit-appearance: none !important;
   -moz-appearance: none !important;
   box-shadow: none !important;
   text-shadow: none !important;
}

.data-section .table-controls .select option::before,
.data-section .table-controls .select option::after,
.data-section .table-controls .select option:before,
.data-section .table-controls .select option:after {
   display: none !important;
   content: none !important;
   background: none !important;
   background-image: none !important;
}

.data-section .table-controls .select option:checked {
   background: #f0f0f0 !important;
   background-image: none !important;
   background-color: #f0f0f0 !important;
   color: var(--color-text) !important;
   box-shadow: none !important;
}

.data-section .table-controls .select option:hover {
   background: #f8f9fa !important;
   background-image: none !important;
   background-color: #f8f9fa !important;
   box-shadow: none !important;
}

.data-section .table-controls .select option * {
   background: none !important;
   background-image: none !important;
   display: none !important;
}

.data-section .table-controls .select option::-webkit-calendar-picker-indicator {
   display: none !important;
   background: none !important;
}

/* Table wrapper to contain overflow */
.data-section .table-wrapper {
   overflow-x: auto;
   margin-bottom: 0;
}

/* Table styling improvements */
.data-section .table {
   background: rgba(255, 255, 255, 0.9);
   backdrop-filter: blur(10px);
   border-radius: var(--radius-md);
   border: 1px solid rgba(255, 255, 255, 0.3);
   box-shadow: 0 4px 16px rgba(31, 38, 135, 0.1);
   width: 100%;
   min-width: 600px;
}

.data-section .table__head {
   background: linear-gradient(135deg, rgba(108, 99, 255, 0.1) 0%, rgba(236, 72, 153, 0.1) 100%);
}

.data-section .table__header {
   padding: 16px;
   font-weight: 600;
   color: var(--color-primary);
   border-bottom: 1px solid rgba(255, 255, 255, 0.3);
   position: relative;
}

/* Sortable header styling */
.data-section .table__header--sortable {
   cursor: pointer;
   user-select: none;
   transition: background var(--transition-base);
}

.data-section .table__header--sortable:hover {
   background: rgba(108, 99, 255, 0.05);
}

.data-section .table__header-content {
   display: flex;
   align-items: center;
   gap: 8px;
   justify-content: space-between;
}

.data-section .table__header-text {
   flex: 1;
}

.data-section .table__sort-icon {
   color: rgba(9, 14, 58, 0.4);
   font-size: 14px;
   transition: color var(--transition-base);
}

.data-section .table__header--sortable:hover .table__sort-icon {
   color: var(--color-primary);
}

/* Active sort state */
.data-section .table__sort-icon .fa-sort-up,
.data-section .table__sort-icon .fa-sort-down {
   color: var(--color-primary);
}

/* Drag handle styling */
.data-section .table__drag-handle {
   color: rgba(9, 14, 58, 0.3);
   font-size: 12px;
   cursor: grab;
   margin-left: 8px;
}

.data-section .table__drag-handle:active {
   cursor: grabbing;
}

.data-section .table__cell {
   padding: 12px 16px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.2);
   color: rgba(9, 14, 58, 0.8);
}

.data-section .table__row:hover {
   background: rgba(108, 99, 255, 0.05);
}

/* Action buttons in table */
.data-section .table__cell--actions {
   display: flex;
   gap: 8px;
   flex-wrap: wrap;
}

.data-section .btn--small {
   padding: 6px 12px;
   font-size: 0.75rem;
   border-radius: var(--radius-sm);
}

/* Pagination styling */
.pagination-nav {
   margin-top: 32px;
   margin-bottom: 24px;
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
   position: relative;
   clear: both;
}

.pagination {
   display: flex;
   gap: 4px;
   list-style: none;
   margin: 0;
   padding: 0;
   align-items: center;
}

.pagination__item {
   display: inline-block;
}

.pagination__link {
   display: flex;
   align-items: center;
   justify-content: center;
   min-width: 40px;
   height: 40px;
   padding: 0 12px;
   color: var(--color-primary);
   text-decoration: none;
   background: rgba(255, 255, 255, 0.9);
   backdrop-filter: blur(10px);
   border: 1px solid rgba(255, 255, 255, 0.3);
   border-radius: var(--radius-md);
   font-weight: 500;
   transition: all var(--transition-base);
   cursor: pointer;
}

.pagination__link:hover {
   background: rgba(255, 255, 255, 1);
   border-color: var(--color-primary);
   transform: translateY(-2px);
   box-shadow: 0 4px 12px rgba(108, 99, 255, 0.2);
}

.pagination__item--active .pagination__link {
   background: var(--color-primary);
   color: white;
   border-color: var(--color-primary);
   box-shadow: 0 4px 16px rgba(108, 99, 255, 0.3);
   font-weight: 600;
}

.pagination__item--active .pagination__link:hover {
   transform: none;
   background: var(--color-primary);
}

.pagination__item--disabled .pagination__link {
   opacity: 0.4;
   cursor: not-allowed;
   pointer-events: none;
   background: rgba(255, 255, 255, 0.5);
}

/* Ensure proper spacing in data section */
.data-section .pagination-nav {
   margin-top: 32px;
   margin-bottom: 0;
}

/* Ensure card body contains floats and positions elements correctly */
.data-section .card__body {
   position: relative;
   overflow: visible;
}

/* Data form section styles (similar to data-section) */
.data-form-section {
   padding: 0;
   min-height: 100vh;
   margin-left: 0;
   transition: margin-left var(--transition-base);
}

/* When sidebar is open, add left margin to avoid overlap */
body.sidebar-open .data-form-section {
   margin-left: var(--sidebar-width, 280px);
}

/* Data form container */
.data-form-section .container {
   max-width: 900px;
   margin: 0 auto;
   padding: 40px 20px;
}

/* Designer section styles (similar to other sections) */
.designer-section {
   padding: 0;
   min-height: 100vh;
   margin-left: 0;
   transition: margin-left var(--transition-base);
}

/* When sidebar is open, add left margin to avoid overlap */
body.sidebar-open .designer-section {
   margin-left: var(--sidebar-width, 280px);
}

/* Designer container */
.designer-section .designer {
   max-width: 1400px;
   margin: 0 auto;
   padding: 40px 20px;
}

/* Designer header */
.designer__header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 30px;
   padding: 20px;
   background: rgba(255, 255, 255, 0.95);
   backdrop-filter: blur(20px);
   border-radius: var(--radius-lg);
   border: 1px solid rgba(255, 255, 255, 0.2);
}

.designer__info .info-table {
   border-collapse: collapse;
}

.designer__info .info-table td {
   padding: 8px 16px;
   border: none;
}

.designer__info .info-table td:first-child {
   font-weight: 600;
   color: var(--text-secondary);
}

/* Designer workspace */
.designer__workspace {
   display: flex;
   gap: 30px;
   align-items: flex-start;
}

/* Field list */
.field-list {
   min-width: 200px;
   max-width: 300px;
   background: rgba(255, 255, 255, 0.95);
   backdrop-filter: blur(20px);
   border-radius: var(--radius-lg);
   border: 1px solid rgba(255, 255, 255, 0.2);
   padding: 20px;
}

.field-list h3 {
   margin: 0 0 15px 0;
   color: var(--text-primary);
   font-size: 1.1rem;
   font-weight: 600;
}

.field {
   background: var(--primary-color);
   color: white;
   padding: 10px 15px;
   margin: 8px 0;
   border-radius: var(--radius-md);
   cursor: grab;
   transition: all var(--transition-base);
   user-select: none;
}

.field:hover {
   background: var(--primary-hover);
   transform: translateY(-2px);
   box-shadow: var(--shadow-lg);
}

.field:active {
   cursor: grabbing;
}

/* Make field buttons in field-list display one per line */
.field-list .field.btn {
   display: flex;
   align-items: center;
   width: 100%;
   margin-bottom: 8px;
   text-align: left;
   justify-content: flex-start;
   min-height: 42px;
   padding: 12px 16px;
}

/* Ensure grip icon and text are aligned */
.field-list .field.btn i {
   margin-right: 8px;
   flex-shrink: 0;
}

/* Designer canvas */
.designer__canvas {
   flex: 1;
   background: rgba(255, 255, 255, 0.95);
   backdrop-filter: blur(20px);
   border-radius: var(--radius-lg);
   border: 1px solid rgba(255, 255, 255, 0.2);
   padding: 20px;
   min-height: 400px;
   overflow: hidden;
}

/* Ensure table-container stays within canvas bounds */
.designer__canvas .table-container {
   max-width: 100%;
   overflow-x: auto;
}

/* Layout table */
.layout-table {
   width: 100%;
   border-collapse: collapse;
   margin-bottom: 20px;
}

.layout-table td {
   border: 2px dashed #e0e0e0;
   padding: 15px;
   min-height: 50px;
   position: relative;
   transition: all var(--transition-base);
}

.layout-table .drop-zone {
   min-height: 50px;
   background: rgba(248, 249, 250, 0.8);
}

.layout-table .drop-zone:hover {
   background: rgba(var(--primary-rgb), 0.1);
   border-color: var(--primary-color);
}

.layout-table .drop-zone[contenteditable="true"]:focus {
   outline: 2px solid var(--primary-color);
   outline-offset: 2px;
   background: white;
}

/* Layout table with ID - ensure grid lines are visible */
#layout-table {
   border: 1px solid #ddd;
   border-collapse: collapse;
   width: 100%;
   table-layout: fixed;
}

#layout-table td {
   border: 1px solid #ddd;
   padding: 8px;
   min-width: 50px;
   min-height: 40px;
}

/* Merge button cells - fixed width and right aligned */
#layout-table td:has(.merge-btn) {
   width: 150px;
   text-align: right;
   vertical-align: middle;
   padding: 5px;
}

/* Alternative selector for merge button cells (broader browser support) */
#layout-table td[colspan="2"]:last-child {
   width: 150px;
   text-align: right;
   vertical-align: middle;
   padding: 5px;
}

/* Code output */
.output-container {
   position: relative;
   margin-top: 20px;
}

.code-output {
   background: #1a1a1a;
   color: #f8f8f2;
   padding: 20px;
   border-radius: var(--radius-lg);
   font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
   font-size: 14px;
   line-height: 1.6;
   overflow: auto;
   white-space: pre;
}

.copy-button {
   position: absolute;
   top: 12px;
   right: 12px;
   background: rgba(255, 255, 255, 0.1);
   border: 1px solid rgba(255, 255, 255, 0.2);
   color: #f8f8f2;
   padding: 8px 10px;
   border-radius: var(--radius-md);
   cursor: pointer;
   font-size: 14px;
   backdrop-filter: blur(10px);
   transition: all 0.2s ease;
   z-index: 1;
}

.copy-button:hover {
   background: rgba(255, 255, 255, 0.2);
   border-color: rgba(255, 255, 255, 0.3);
   transform: translateY(-1px);
}
   word-wrap: break-word;
   width: fit-content;
}

/* Constrain output width when sidebar is open */
body.sidebar-open .code-output {
   max-width: calc(100vw - var(--sidebar-width, 280px) - 100px);
}

/* Constrain output width when sidebar is closed */
body:not(.sidebar-open) .code-output {
   max-width: calc(100vw - 100px);
}

/* Merge buttons */
.merge-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: var(--space-sm);
   padding: 8px 16px;
   background: var(--color-success);
   color: white;
   border: none;
   border-radius: var(--radius-lg);
   font-size: 13px;
   font-weight: 500;
   cursor: pointer;
   transition: all var(--transition-base);
   text-decoration: none;
}

.merge-btn:hover {
   background: #059669;
   transform: translateY(-1px);
   box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

/* ================================
  DATA FORM STYLES
  ================================ */
/* Form card styling */
.data-form-section .form-card {
   background: rgba(255, 255, 255, 0.95);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
   border: 1px solid rgba(255, 255, 255, 0.2);
   border-radius: var(--radius-lg);
   box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
   overflow: hidden;
}

/* Form header */
.data-form-section .form-header {
   background: linear-gradient(135deg, rgba(108, 99, 255, 0.1) 0%, rgba(236, 72, 153, 0.1) 100%);
   border-bottom: 1px solid rgba(255, 255, 255, 0.2);
   padding: 32px;
   text-align: center;
}

.data-form-section .form-header h2 {
   color: var(--color-primary);
   font-size: 2rem;
   font-weight: 700;
   margin: 0;
   letter-spacing: -0.5px;
}

/* Form body */
.data-form-section .form-body {
   padding: 40px;
}

/* Form grid */
.data-form-section .form-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: 24px;
   margin-bottom: 32px;
}

/* Full width form groups */
.data-form-section .form__group--full {
   grid-column: 1 / -1;
}

/* Form group styling */
.data-form-section .form__group {
   display: flex;
   flex-direction: column;
   gap: 8px;
}

/* Label styling */
.data-form-section .label {
   font-weight: 600;
   color: var(--color-text);
   font-size: 14px;
   display: flex;
   align-items: center;
   gap: 4px;
}

.data-form-section .label .text--danger {
   color: var(--color-danger);
   font-size: 16px;
}

/* Enhanced input/select/textarea styling */
.data-form-section .input,
.data-form-section .select,
.data-form-section .textarea {
   background: rgba(255, 255, 255, 0.7);
   backdrop-filter: blur(10px);
   border: 2px solid rgba(255, 255, 255, 0.3);
   border-radius: var(--radius-md);
   padding: 12px 16px; /* Reset to normal padding */
   font-size: 15px;
   font-family: inherit;
   color: var(--color-text);
   transition: all var(--transition-base);
   width: 100%;
   line-height: 1.5;
   min-height: 48px; /* Ensure minimum height */
   box-sizing: border-box;
}

.data-form-section .textarea {
   min-height: 120px;
   resize: vertical;
   padding: 12px 16px; /* Reset to normal padding for textarea */
}

/* Specific select styling */
.data-form-section .select {
   display: flex;
   align-items: center;
   height: 48px;
   min-height: 48px;
}

.data-form-section .input:focus,
.data-form-section .textarea:focus {
   outline: none;
   background: rgba(255, 255, 255, 0.9);
   border-color: var(--color-primary);
   box-shadow: 0 0 0 4px rgba(108, 99, 255, 0.1);
}

.data-form-section .select:focus {
   outline: none !important;
   background: rgba(255, 255, 255, 0.9);
   border-color: var(--color-primary);
   box-shadow: 0 0 0 4px rgba(108, 99, 255, 0.1) !important;
   background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c63ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
}

.data-form-section .input:hover,
.data-form-section .select:hover,
.data-form-section .textarea:hover {
   border-color: rgba(108, 99, 255, 0.4);
}

/* Readonly/disabled state */
.data-form-section .input[readonly],
.data-form-section .select[disabled],
.data-form-section .textarea[readonly] {
   background: rgba(0, 0, 0, 0.05);
   border-color: rgba(0, 0, 0, 0.1);
   cursor: not-allowed;
   opacity: 0.7;
}

/* Modern toggle switch */
.data-form-section .toggle {
   position: relative;
   display: inline-block;
}

.data-form-section .toggle__input {
   position: absolute;
   opacity: 0;
   cursor: pointer;
   width: 100%;
   height: 100%;
   z-index: 2;
}

.data-form-section .toggle__label {
   display: block;
   width: 56px;
   height: 32px;
   background: rgba(255, 255, 255, 0.7);
   border: 2px solid rgba(255, 255, 255, 0.3);
   border-radius: 100px;
   position: relative;
   cursor: pointer;
   transition: all var(--transition-base);
}

.data-form-section .toggle__label::after {
   content: '';
   position: absolute;
   top: 3px;
   left: 3px;
   width: 22px;
   height: 22px;
   background: white;
   border-radius: 50%;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
   transition: all var(--transition-base);
}

.data-form-section .toggle__input:checked ~ .toggle__label {
   background: var(--color-primary);
   border-color: var(--color-primary);
}

.data-form-section .toggle__input:checked ~ .toggle__label::after {
   transform: translateX(24px);
}

.data-form-section .toggle__input:hover ~ .toggle__label {
   border-color: rgba(108, 99, 255, 0.4);
}

.data-form-section .toggle__input:focus ~ .toggle__label {
   box-shadow: 0 0 0 4px rgba(108, 99, 255, 0.1);
}

.data-form-section .toggle__input:disabled ~ .toggle__label {
   opacity: 0.5;
   cursor: not-allowed;
}

/* Form actions */
.data-form-section .form__actions {
   display: flex;
   gap: 16px;
   justify-content: center;
   padding-top: 24px;
   border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.data-form-section .form__actions .btn {
   min-width: 140px;
}

/* Alert styling */
.data-form-section .alerts {
   margin-bottom: 24px;
}

.data-form-section .alert {
   padding: 16px 20px;
   border-radius: var(--radius-md);
   border: 1px solid;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   backdrop-filter: blur(10px);
}

.data-form-section .alert--success {
   background: rgba(34, 197, 94, 0.1);
   border-color: rgba(34, 197, 94, 0.3);
   color: #059669;
}

.data-form-section .alert--error,
.data-form-section .alert--danger {
   background: rgba(239, 68, 68, 0.1);
   border-color: rgba(239, 68, 68, 0.3);
   color: #DC2626;
}

.data-form-section .alert--warning {
   background: rgba(245, 158, 11, 0.1);
   border-color: rgba(245, 158, 11, 0.3);
   color: #D97706;
}

.data-form-section .alert--info {
   background: rgba(59, 130, 246, 0.1);
   border-color: rgba(59, 130, 246, 0.3);
   color: #2563EB;
}

.data-form-section .alert__close {
   background: none;
   border: none;
   font-size: 24px;
   line-height: 1;
   cursor: pointer;
   opacity: 0.6;
   transition: opacity var(--transition-base);
   padding: 0;
   color: currentColor;
}

.data-form-section .alert__close:hover {
   opacity: 1;
}

/* Select dropdown arrow - complete browser reset */
.data-form-section .select {
   appearance: none !important;
   -webkit-appearance: none !important;
   -moz-appearance: none !important;
   background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(9, 14, 58, 0.6)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
   background-repeat: no-repeat !important;
   background-position: right 16px center !important;
   background-size: 16px !important;
   padding-right: 48px !important;
   cursor: pointer;
}

/* Webkit specific dropdown styling reset */
.data-form-section .select::-webkit-calendar-picker-indicator,
.data-form-section .select::-webkit-clear-button,
.data-form-section .select::-webkit-inner-spin-button,
.data-form-section .select::-webkit-outer-spin-button {
   display: none !important;
   -webkit-appearance: none !important;
   background: none !important;
}

/* Firefox specific dropdown styling */
.data-form-section .select:-moz-focusring {
   color: transparent !important;
   text-shadow: 0 0 0 var(--color-text) !important;
}

.data-form-section .select::-moz-focus-inner {
   border: 0 !important;
   outline: none !important;
}

/* Remove all browser default select styling */
.data-form-section .select::-ms-expand {
   display: none;
}

.data-form-section .select::-webkit-appearance {
   -webkit-appearance: none;
}

.data-form-section .select::-moz-appearance {
   -moz-appearance: none;
}

/* Style for select options (dropdown items) - nuclear option reset */
.data-form-section .select option {
   background: white !important;
   background-image: none !important;
   background-color: white !important;
   color: var(--color-text) !important;
   padding: 8px 12px !important;
   border: none !important;
   outline: none !important;
   appearance: none !important;
   -webkit-appearance: none !important;
   -moz-appearance: none !important;
   box-shadow: none !important;
   text-shadow: none !important;
}

/* Remove any pseudo-elements from options */
.data-form-section .select option::before,
.data-form-section .select option::after,
.data-form-section .select option:before,
.data-form-section .select option:after {
   display: none !important;
   content: none !important;
   background: none !important;
   background-image: none !important;
}

/* Additional reset for option styling */
.data-form-section .select option:checked {
   background: #f0f0f0 !important;
   background-image: none !important;
   background-color: #f0f0f0 !important;
   color: var(--color-text) !important;
   box-shadow: none !important;
}

.data-form-section .select option:hover {
   background: #f8f9fa !important;
   background-image: none !important;
   background-color: #f8f9fa !important;
   box-shadow: none !important;
}

/* Try to override any inherited styling */
.data-form-section .select option * {
   background: none !important;
   background-image: none !important;
   display: none !important;
}

/* WebKit specific option styling */
.data-form-section .select option::-webkit-calendar-picker-indicator {
   display: none !important;
   background: none !important;
}

/* Ensure only the select element has the arrow, not its children */
.data-form-section .select option,
.data-form-section .select optgroup {
   background-image: none !important;
}

/* Force complete reset on select and its dropdown */
.data-form-section .select {
   background-color: rgba(255, 255, 255, 0.7) !important;
   background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(9, 14, 58, 0.6)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
   background-repeat: no-repeat !important;
   background-position: right 16px center !important;
   background-size: 16px !important;
}

/* Global reset to remove any browser injected styles */
select[class*="select"] option {
   background-image: none !important;
   list-style: none !important;
   list-style-image: none !important;
   list-style-type: none !important;
}

/* Extra aggressive reset for any blue chevrons */
select option::marker,
select option::-webkit-details-marker {
   display: none !important;
}

/* Force override any UA stylesheet */
*[class*="data-form-section"] select option {
   background-image: none !important;
   -webkit-appearance: none !important;
   -moz-appearance: none !important;
   appearance: none !important;
}

/* Responsive form adjustments */
@media (max-width: 768px) {
   .data-form-section .form-header {
      padding: 24px 20px;
   }
   
   .data-form-section .form-header h2 {
      font-size: 1.5rem;
   }
   
   .data-form-section .form-body {
      padding: 24px 20px;
   }
   
   .data-form-section .form-grid {
      grid-template-columns: 1fr;
   }
   
   .data-form-section .form__actions {
      flex-direction: column;
   }
   
   .data-form-section .form__actions .btn {
      width: 100%;
   }
   
   body.sidebar-open .data-form-section {
      margin-left: 0;
   }
}

/* Modal styling for field selection */
#fieldSelectionModal {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: rgba(0, 0, 0, 0.5);
   backdrop-filter: blur(4px);
   z-index: 9999; /* Highest z-index to ensure it's above everything */
   transition: left var(--transition-base);
}

/* Adjust modal position when sidebar is open */
body.sidebar-open #fieldSelectionModal {
   left: var(--sidebar-width, 280px);
}

#fieldSelectionModal.show {
   display: flex;
   align-items: center;
   justify-content: center;
}

#fieldSelectionModal .modal__dialog {
   max-width: 500px;
   width: 90%;
   margin: 2rem;
}

#fieldSelectionModal .modal__content {
   background: rgba(255, 255, 255, 0.95);
   backdrop-filter: blur(20px);
   border-radius: var(--radius-lg);
   border: 1px solid rgba(255, 255, 255, 0.3);
   box-shadow: 0 20px 60px rgba(31, 38, 135, 0.3);
   position: relative;
}

#fieldSelectionModal .modal__header {
   padding: 24px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.2);
   position: relative;
}

#fieldSelectionModal .modal__title {
   color: var(--color-primary);
   font-size: 1.25rem;
   font-weight: 700;
   margin: 0;
}

#fieldSelectionModal .modal__body {
   padding: 24px;
   max-height: 400px;
   overflow-y: auto;
}

#fieldSelectionModal .modal__footer {
   padding: 24px;
   border-top: 1px solid rgba(255, 255, 255, 0.2);
   display: flex;
   justify-content: flex-end;
}

#fieldSelectionModal .modal__close {
   position: absolute;
   top: 16px;
   right: 16px;
   background: none;
   border: none;
   font-size: 1.5rem;
   color: rgba(9, 14, 58, 0.6);
   cursor: pointer;
   padding: 4px;
   border-radius: var(--radius-sm);
   transition: all var(--transition-base);
   width: 32px;
   height: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
}

#fieldSelectionModal .modal__close:hover {
   background: rgba(108, 99, 255, 0.1);
   color: var(--color-primary);
}

/* Field list styling */
#fieldList {
   list-style: none;
   padding: 0;
   margin: 0;
}

.field-item {
   display: flex;
   align-items: center;
   padding: 12px;
   margin-bottom: 8px;
   background: rgba(255, 255, 255, 0.7);
   backdrop-filter: blur(10px);
   border: 1px solid rgba(255, 255, 255, 0.3);
   border-radius: var(--radius-md);
   transition: all var(--transition-base);
   user-select: none;
}

.field-item:hover {
   background: rgba(255, 255, 255, 0.9);
   transform: translateX(4px);
   box-shadow: 0 4px 12px rgba(108, 99, 255, 0.15);
}

/* Content wrapper */
.field-item__content {
   display: flex;
   align-items: center;
   flex: 1;
   gap: 12px;
}

/* Drag handle styling - now first in layout */
.field-item__handle {
   display: flex;
   align-items: center;
   padding: 8px;
   margin-right: 8px;
   color: rgba(9, 14, 58, 0.4);
   cursor: grab;
   transition: all var(--transition-base);
}

.field-item__handle:hover {
   color: var(--color-primary);
   transform: scale(1.1);
}

.field-item__handle:active {
   cursor: grabbing;
}

/* Custom checkbox styling */
.field-item__checkbox {
   position: relative;
   display: flex;
   align-items: center;
   cursor: pointer;
}

.field-item__checkbox input[type="checkbox"] {
   position: absolute;
   opacity: 0;
   cursor: pointer;
   width: 24px;
   height: 24px;
   margin: 0;
}

.field-item__checkmark {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 24px;
   height: 24px;
   background: rgba(255, 255, 255, 0.9);
   border: 2px solid rgba(108, 99, 255, 0.3);
   border-radius: var(--radius-sm);
   transition: all var(--transition-base);
   pointer-events: none;
}

.field-item__checkmark i {
   display: none;
   font-size: 12px;
   color: white;
}

.field-item__checkbox input[type="checkbox"]:checked ~ .field-item__checkmark {
   background: var(--color-primary);
   border-color: var(--color-primary);
}

.field-item__checkbox input[type="checkbox"]:checked ~ .field-item__checkmark i {
   display: block;
}

.field-item__checkbox:hover .field-item__checkmark {
   border-color: var(--color-primary);
   transform: scale(1.1);
}

/* Label styling */
.field-item__label {
   flex: 1;
   font-weight: 500;
   color: var(--color-text);
   transition: color var(--transition-base);
}

.field-item:hover .field-item__label {
   color: var(--color-primary);
}

/* Sortable.js states */
.field-item--ghost {
   opacity: 0.4;
   background: rgba(108, 99, 255, 0.1);
}

.field-item--chosen {
   box-shadow: 0 8px 24px rgba(108, 99, 255, 0.3);
   transform: scale(1.02);
}

.field-item--drag {
   opacity: 0;
}

/* ================================
  FORM CONTROLS
  ================================ */
/* Base input/select styling */
.input,
.select,
.dropdown {
   height: 42px;
   padding: 0 16px;
   background: rgba(255, 255, 255, 0.9);
   backdrop-filter: blur(10px);
   border: 1px solid rgba(255, 255, 255, 0.3);
   border-radius: var(--radius-md);
   font-size: 14px;
   font-family: inherit;
   color: var(--color-text);
   transition: all var(--transition-base);
   outline: none;
}

.input:focus,
.select:focus,
.dropdown:focus {
   background: rgba(255, 255, 255, 1);
   border-color: var(--color-primary);
   box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.1);
}

.input:hover,
.select:hover,
.dropdown:hover {
   border-color: rgba(108, 99, 255, 0.3);
}

/* Dropdown specific styling */
.select,
.dropdown {
   appearance: none;
   background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(9, 14, 58, 0.6)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
   background-repeat: no-repeat;
   background-position: right 12px center;
   background-size: 16px;
   padding-right: 40px;
   cursor: pointer;
}

.select:focus,
.dropdown:focus {
   background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c63ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
}

/* Small variant */
.select--small,
.dropdown--small,
.input--small {
   height: 36px;
   padding: 0 12px;
   font-size: 13px;
}

.select--small,
.dropdown--small {
   background-position: right 8px center;
   background-size: 14px;
   padding-right: 32px;
}

/* Button height matching - Update existing button styles */
.btn {
   height: 42px;
   padding: 0 24px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 14px;
   font-weight: 500;
   border: none;
   border-radius: var(--radius-md);
   cursor: pointer;
   transition: all var(--transition-base);
   text-decoration: none;
   outline: none;
}

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

.btn--primary:hover {
   background: #5a52e0;
   transform: translateY(-1px);
   box-shadow: 0 4px 12px rgba(108, 99, 255, 0.3);
}

.btn--secondary {
   background: rgba(255, 255, 255, 0.9);
   color: var(--color-primary);
   border: 1px solid rgba(108, 99, 255, 0.3);
}

.btn--secondary:hover {
   background: rgba(255, 255, 255, 1);
   border-color: var(--color-primary);
   box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.1);
}

.btn--small {
   height: 36px;
   padding: 0 16px;
   font-size: 13px;
}

/* Ensure form inline has proper spacing */
.form--inline {
   display: flex;
   gap: 12px;
   align-items: center;
   flex-wrap: wrap;
}

.dashboard-container {
   max-width: 1200px;
   margin: 0 auto;
   padding: 40px 20px;
}

.dashboard {
   display: flex;
   flex-direction: column;
   gap: 40px;
}

/* Stats grid for metric cards - smaller cards for 4-column layout */
.stats-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
   gap: 20px;
   margin-bottom: 20px;
}

/* Individual stat cards */
.stat-card {
   background: rgba(255, 255, 255, 0.95);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
   border: 1px solid rgba(255, 255, 255, 0.2);
   border-radius: var(--radius-lg);
   padding: 0;
   box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
   transition: all var(--transition-base);
   overflow: hidden;
}

.stat-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 12px 40px rgba(31, 38, 135, 0.25);
}

.stat-card__content {
   padding: 20px 16px;
   text-align: center;
   position: relative;
}

.stat-card__icon {
   margin-bottom: 12px;
}

.stat-card__icon i {
   font-size: 28px;
   color: var(--color-primary);
   opacity: 0.8;
}

.stat-card__title {
   font-size: 13px;
   font-weight: 600;
   color: var(--color-text-secondary);
   text-transform: uppercase;
   letter-spacing: 0.5px;
   margin: 0 0 10px 0;
   line-height: 1.2;
}

.stat-card__value {
   font-size: 2.2rem;
   font-weight: 700;
   color: var(--color-primary);
   margin: 0;
   line-height: 1;
}

/* Info grid for three-column sections */
.info-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 24px;
   margin-bottom: 20px;
}

/* Individual info sections */
.info-section {
   background: rgba(255, 255, 255, 0.95);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
   border: 1px solid rgba(255, 255, 255, 0.2);
   border-radius: var(--radius-lg);
   padding: 24px;
   box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
   transition: all var(--transition-base);
}

.info-section:hover {
   transform: translateY(-2px);
   box-shadow: 0 12px 40px rgba(31, 38, 135, 0.25);
}

.info-section .heading--h2 {
   font-size: 18px;
   font-weight: 600;
   color: var(--color-primary);
   margin: 0 0 20px 0;
   padding-bottom: 12px;
   border-bottom: 2px solid rgba(9, 14, 58, 0.1);
}

.info-list {
   display: flex;
   flex-direction: column;
   gap: 8px;
}

.info-item {
   padding: 8px 0;
   font-size: 14px;
   color: var(--color-text-primary);
   border-bottom: 1px solid rgba(9, 14, 58, 0.05);
   transition: color var(--transition-fast);
}

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

.info-item:hover {
   color: var(--color-primary);
}

.info-item strong {
   color: var(--color-text-primary);
   font-weight: 600;
}

/* Counties section - larger table */
.counties-section {
   background: rgba(255, 255, 255, 0.95);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
   border: 1px solid rgba(255, 255, 255, 0.2);
   border-radius: var(--radius-lg);
   padding: 24px;
   box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
   margin-bottom: 20px;
}

.counties-section .heading--h2 {
   font-size: 20px;
   font-weight: 600;
   color: var(--color-primary);
   margin: 0 0 20px 0;
   padding-bottom: 12px;
   border-bottom: 2px solid rgba(9, 14, 58, 0.1);
}

.table-container {
   overflow-x: auto;
   border-radius: var(--radius-md);
   border: 1px solid rgba(9, 14, 58, 0.1);
}

/* System info - two-column grid */
.system-info {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
   gap: 24px;
}

/* Responsive design */
@media (max-width: 1024px) {
   /* On tablet, ensure sidebar doesn't interfere */
   body.sidebar-open .dashboard-section {
       margin-left: 0;
   }
   
   .stats-grid {
       grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   }
}

@media (max-width: 768px) {
   .dashboard-container {
       padding: 20px 16px;
   }
   
   .dashboard-section {
       margin-left: 0 !important; /* Remove sidebar margin on mobile */
   }
   
   .stats-grid {
       grid-template-columns: repeat(2, 1fr);
       gap: 16px;
   }
   
   .info-grid {
       grid-template-columns: 1fr;
       gap: 16px;
   }
   
   .system-info {
       grid-template-columns: 1fr;
       gap: 16px;
   }
   
   .stat-card__value {
       font-size: 1.8rem;
   }
   
   .info-section,
   .counties-section {
       padding: 20px;
   }
}

@media (max-width: 480px) {
   .dashboard-container {
       padding: 16px 12px;
   }
   
   .dashboard {
       gap: 24px;
   }
   
   .stats-grid {
       grid-template-columns: 1fr;
       gap: 12px;
   }
   
   .stat-card__content {
       padding: 16px 12px;
   }
   
   .stat-card__value {
       font-size: 1.6rem;
   }
   
   .info-section,
   .counties-section {
       padding: 16px;
   }
}

/* ================================
  TABLE STYLES FOR DASHBOARD
  ================================ */
/* Base table styling */
.table {
   width: 100%;
   border-collapse: collapse;
   font-size: 14px;
   background: white;
   border-radius: var(--radius-md);
   overflow: hidden;
}

.table__head {
   background: rgba(9, 14, 58, 0.05);
}

.table__header {
   padding: 16px 12px;
   text-align: left;
   font-weight: 600;
   color: var(--color-text-primary);
   border-bottom: 2px solid rgba(9, 14, 58, 0.1);
   font-size: 13px;
   text-transform: uppercase;
   letter-spacing: 0.5px;
}

.table__header--right {
   text-align: right;
}

.table__body {
   background: white;
}

.table__row {
   border-bottom: 1px solid rgba(9, 14, 58, 0.05);
   transition: background-color var(--transition-fast);
}

.table__row:hover {
   background: rgba(9, 14, 58, 0.02);
}

.table__row:last-child {
   border-bottom: none;
}

.table__cell {
   padding: 12px;
   color: var(--color-text-primary);
   vertical-align: middle;
}

.table__cell--right {
   text-align: right;
   font-weight: 500;
}

/* Table responsive wrapper */
.table-container {
   overflow-x: auto;
   border-radius: var(--radius-md);
   border: 1px solid rgba(9, 14, 58, 0.1);
   box-shadow: 0 2px 8px rgba(31, 38, 135, 0.1);
}

/* Mobile table adjustments */
@media (max-width: 768px) {
   .table__header,
   .table__cell {
       padding: 10px 8px;
   }
   
   .table {
       font-size: 13px;
   }
   
   .table__header {
       font-size: 12px;
   }
}

/* Conversation List */
.conversation-list {
   padding: 0 20px 20px;
   flex: 1;
   overflow-y: auto;
}

.conversation-date {
   font-size: 12px;
   font-weight: 600;
   color: var(--color-text-muted);
   margin: 20px 0 10px;
   text-transform: uppercase;
   letter-spacing: 0.5px;
}

.conversation-item {
   padding: 10px 15px;
   margin-bottom: 5px;
   border-radius: var(--radius-md);
   cursor: pointer;
   transition: all var(--transition-fast);
   display: flex;
   align-items: center;
   gap: 10px;
   color: var(--color-text);
   text-decoration: none;
}

.conversation-item:hover {
   background: rgba(255, 255, 255, 0.8);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   transform: translateX(4px);
   box-shadow: 0 2px 8px rgba(31, 38, 135, 0.08);
}

.conversation-item.active {
   background: rgba(108, 99, 255, 0.1);
   color: #6C63FF;
   border-left: 3px solid #6C63FF;
   padding-left: 17px; /* Adjust for border */
}

.conversation-item.active:hover {
   background: rgba(108, 99, 255, 0.15);
}

.conversation-item i {
   font-size: 14px;
   opacity: 0.6;
}

.conversation-item span {
   font-size: 14px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

/* ================================
  CHAT LAYOUT - CLEANED UP
  ================================ */

.chat-main {
   flex: 1;
   display: flex;
   flex-direction: column;
   width: 100%;
   position: relative;
   margin: 0 auto;
   max-width: 750px; /* Adjusted to 750px */
   padding: 0; /* Removed padding to allow full width */
   overflow: visible; /* Changed from hidden to visible */
   min-height: 0; /* Allow proper flex behavior */
}

/* Welcome State */
.chat-welcome {
   flex: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 20px;
   padding-bottom: 15vh;
   height: calc(100vh - 60px);
   overflow: hidden;
   transition: all var(--transition-base);
}

/* Center chat content when sidebar is open */
body.sidebar-open .chat-welcome {
   padding-left: 20px;
   padding-right: 20px;
}

.welcome-content {
   text-align: center;
   width: 100%;
   max-width: 750px; /* Match chat-main width */
   margin: 0 auto;
   padding: 0 40px; /* Match chat-input-wrapper padding */
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 40px;
}

.welcome-content h1 {
   font-size: 2.5rem; /* Fixed size */
   font-weight: 800;
   line-height: 1.2;
   color: var(--color-primary);
   margin: 0;
   letter-spacing: -0.03em;
   width: 100%;
   white-space: normal;
}

/* Force consistent line breaks */
@media (min-width: 768px) {
   .welcome-content h1 {
       font-size: 2.5rem; /* Fixed size for consistency */
   }
}

/* When sidebar is open, ensure h1 stays on 2 lines */
body.sidebar-open .welcome-content h1 {
   font-size: 2.5rem; /* Keep same size */
   white-space: normal;
   line-height: 1.2;
}

/* When sidebar is open, ensure form is full width */
body.sidebar-open .welcome-content {
   max-width: 750px; /* Match chat-main */
}

body.sidebar-open .welcome-content .search-box {
   width: 100%; /* Use full width of container */
   max-width: 750px;
}

.search-box {
   position: relative;
   width: 100%;
   max-width: 100%; /* Use full width of container */
   background: white;
   border-radius: 28px;
   padding: 4px;
   display: flex;
   align-items: center;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.search-box input {
   flex: 1;
   padding: 12px 20px;
   font-size: 16px;
   border: none;
   background: transparent;
   color: #333;
   outline: none;
}

.search-box input::placeholder {
   color: rgba(0, 0, 0, 0.5);
}

.search-box button {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: #050B2B;
   border: none;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: all 0.2s;
   flex-shrink: 0;
}

.search-box button:hover {
   transform: scale(1.05);
}

.search-box button i {
   color: white;
   font-size: 16px;
}

/* Messages Area Wrapper - Creates hard boundary */
.messages-area-wrapper {
   flex: 1;
   overflow: visible; /* Allow content to expand page */
   display: flex;
   flex-direction: column;
   width: 100%;
   position: relative;
   min-height: 0; /* Allow shrinking */
   padding-bottom: 140px; /* Space for fixed input */
}

/* Messages Area */
#messages-area {
   flex: 1;
   padding: 20px 0 20px 0;
   margin-bottom: 0;
   display: none;
   width: 100%;
   max-width: 100%;
   overflow: visible;
   position: relative;
   /* Create fade effect at bottom */
   -webkit-mask-image: linear-gradient(
      to bottom,
      black 0%,
      black calc(100% - 40px), /* Start fade 40px from bottom */
      transparent 100% /* Complete fade at bottom */
   );
   mask-image: linear-gradient(
      to bottom,
      black 0%,
      black calc(100% - 40px),
      transparent 100%
   );
}

/* Hide scrollbar for Webkit browsers */
#messages-area::-webkit-scrollbar {
   display: none;
}

/* DO NOT reduce width when sidebar is open - keep content readable */
body.sidebar-open #messages-area {
   padding-left: 0;
   padding-right: 0;
}

/* Keep wrapper full width when sidebar is open */
body.sidebar-open .messages-area-wrapper {
   left: 0;
   right: 0;
}

/* Removed old conflicting chat-main styles */

#messages-area[style*="display: block"] {
   display: flex !important;
   flex-direction: column;
}

/* Messages container wrapper for hard clipping */
.messages-container {
   padding: 20px 40px; /* Match chat-input-wrapper horizontal padding */
   padding-bottom: 120px;
   display: flex;
   flex-direction: column;
   gap: 16px;
}

/* Style tables in bot messages */
.bot-message table {
   width: 100%;
   border-collapse: collapse;
   margin: 10px 0;
}

.bot-message td {
   padding: 8px 12px;
}

.bot-message td:first-child {
   font-weight: 600;
   color: var(--color-text-muted);
   white-space: nowrap;
   width: 40%;
}

.bot-message a {
   color: #6C63FF;
   text-decoration: none;
}

.bot-message a:hover {
   text-decoration: underline;
}

/* Button Container */
.button-container {
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
   margin: 20px 0;
   padding: 0 20px;
}

/* Chat Buttons */
.chat-button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 10px 20px;
   background: white;
   border: 1px solid rgba(0, 0, 0, 0.1);
   border-radius: var(--radius-xl);
   font-size: 14px;
   font-weight: 500;
   color: var(--color-primary);
   cursor: pointer;
   transition: all var(--transition-base);
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
   outline: none;
   position: relative;
   overflow: visible;
   vertical-align: middle;
   min-height: 40px;
   width: auto;
   text-align: center;
   line-height: 1.2;
   -webkit-tap-highlight-color: transparent;
   user-select: none;
   box-sizing: border-box;
}

.chat-button:hover {
   background: var(--color-primary);
   color: white;
   transform: translateY(-2px);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.chat-button:active {
   transform: translateY(0);
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.chat-button.loading {
   opacity: 0.6;
   transform: scale(0.95);
   pointer-events: none;
   background: #f0f0f0;
}

/* Message Styles */
.message {
   display: inline-block;
   padding: 16px 20px;
   border-radius: var(--radius-xl);
   max-width: min(85%, 600px); /* Proportional to 750px */
   width: auto;
   word-wrap: break-word;
   word-break: normal;
   overflow-wrap: break-word;
   white-space: normal;
   overflow: visible;
   box-sizing: border-box;
   animation: fadeIn 0.3s ease;
   position: relative;
}

/* Force content inside messages to respect container width */
.message * {
   max-width: 100% !important;
   word-wrap: break-word !important;
   word-break: normal !important;
   overflow-wrap: break-word !important;
   box-sizing: border-box !important;
   white-space: normal !important;
}

/* Override any inline width styles */
.message *[style*="width"] {
   width: auto !important;
   max-width: 100% !important;
}

/* Specific rules for common elements */
.message table {
   table-layout: fixed;
   width: 100% !important;
}

.message td, .message th {
   word-wrap: break-word;
   word-break: break-word;
   overflow-wrap: break-word;
   white-space: normal;
}

.message div {
   max-width: 100%;
   overflow-wrap: break-word;
}

.message pre {
   white-space: pre-wrap;
   word-wrap: break-word;
   overflow-x: auto;
   max-width: 100%;
}

.message img {
   max-width: 100%;
   height: auto;
}

.user-message {
   background: #090E3A !important;
   color: white !important;
   margin-left: auto;
   margin-right: 0;
   border-bottom-right-radius: 5px;
   width: fit-content;
}

.user-message p {
   color: white !important;
}

/* Additional specificity to ensure user messages are dark navy */
.messages-container .message-wrapper .message.user-message {
   background: #090E3A !important;
   color: white !important;
}

/* Target by debug attribute as fallback */
[data-debug="user-message"] .message {
   background: #090E3A !important;
   color: white !important;
}

[data-debug="user-message"] .message p {
   color: white !important;
}

/* Direct targeting of the exact class combination */
.message.user-message {
   background: #090E3A !important;
   color: white !important;
}

div.message.user-message {
   background: #090E3A !important;
   color: white !important;
}

/* Container for user messages to ensure right alignment */
.message-wrapper {
   display: flex;
   width: 100%;
   margin-bottom: 16px;
   justify-content: flex-end;
}

.message-wrapper.bot {
   justify-content: flex-start;
}

/* Ensure user messages have dark navy background - more specific selectors */
.message-wrapper .message.user-message {
   background: #090E3A !important;
   color: white !important;
}

.user-message p {
   margin: 0;
   color: white;
   word-wrap: break-word;
   word-break: break-word;
   overflow-wrap: break-word;
}

/* Additional specificity to ensure dark navy background on user messages */
.messages-container .message-wrapper .message.user-message,
.messages-container .user-message {
   background: #090E3A !important;
   background-color: #090E3A !important;
   color: white !important;
}

/* Also style messages with kind="question" as user messages */
.messages-container .message-wrapper[data-debug="user-message"] .message {
   background: #090E3A !important;
   background-color: #090E3A !important;
   color: white !important;
}

.messages-container .message-wrapper[data-debug="user-message"] .message p {
   color: white !important;
}

.bot-message {
   background: rgba(255, 255, 255, 0.9);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   border: 1px solid rgba(0, 0, 0, 0.05);
   color: var(--color-primary);
   margin-right: auto;
   border-bottom-left-radius: 5px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.bot-message p {
   margin: 0;
   color: var(--color-primary);
   word-wrap: break-word;
   word-break: break-word;
   overflow-wrap: break-word;
}

/* Bot message content handling */
.bot-message > div {
   width: 100%;
   max-width: 100%;
   overflow: visible;
   word-break: normal;
   overflow-wrap: break-word;
}

/* Button styling within messages */
.bot-message .button-container,
.bot-message .action-buttons {
   display: flex;
   gap: 10px;
   margin-top: 12px;
   flex-wrap: wrap;
}

.bot-message button,
.bot-message .action-button,
.bot-message a[data-action="button"] {
   padding: 8px 16px;
   background: white;
   color: var(--color-primary);
   border: 1px solid rgba(0, 0, 0, 0.1);
   border-radius: 20px;
   font-size: 14px;
   cursor: pointer;
   transition: all 0.2s;
   text-decoration: none;
   display: inline-block;
}

.bot-message button:hover,
.bot-message .action-button:hover,
.bot-message a[data-action="button"]:hover {
   background: var(--color-primary);
   color: white;
   transform: translateY(-1px);
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.bot-message ul, .bot-message ol {
   padding-left: 20px;
   margin: 10px 0;
}

.bot-message li {
   word-wrap: break-word;
   word-break: break-word;
}

/* Remove nested bubble styling for bot messages */
.message.bot-message .message.bot-message {
   all: unset !important;
   display: block !important;
   background: transparent !important;
   background-color: transparent !important;
   box-shadow: none !important;
   border: none !important;
   border-radius: 0 !important;
   padding: 0 !important;
   margin: 0 !important;
}

.message.bot-message > .message.bot-message:first-child {
   all: unset !important;
   display: block !important;
   background: transparent !important;
}

/* Removed old chat-wrapper styles */

.bot-message .bot-message {
   background: transparent !important;
   background-color: transparent !important;
   box-shadow: none !important;
   border: none !important;
   padding: 0 !important;
   margin: 0 !important;
}

/* Remove background styles inside bot messages */
.bot-message div[style*="background: rgba(255, 255, 255"],
.bot-message div[style*="background:rgba(255,255,255"],
.bot-message div[style*="background: rgb(255, 255, 255"],
.bot-message div[style*="background:rgb(255,255,255"],
.bot-message div[style*="background: white"],
.bot-message div[style*="background:white"],
.bot-message div[style*="background: #fff"],
.bot-message div[style*="background:#fff"],
.bot-message div[style*="background: #ffffff"],
.bot-message div[style*="background:#ffffff"] {
   background: transparent !important;
   background-color: transparent !important;
}

/* Fixed Input */
.chat-input-fixed {
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
   padding: 20px 0; /* Remove horizontal padding */
   background: transparent; /* Transparent to show gradient behind */
   border-top: none;
   display: block; /* Changed from none to block - always show when element exists */
   z-index: 101;
   box-shadow: none;
   min-height: 120px; /* Ensure it covers enough area */
   transition: padding-left var(--transition-base);
}

/* Overlay to hide content behind input - removed, not needed */
.chat-input-overlay {
   display: none;
}


/* Fade effect - removed, will be applied to chat-input-wrapper */


/* When sidebar is open, shift the input to center it in remaining viewport */
body.sidebar-open .chat-input-fixed {
   padding-left: var(--sidebar-width);
}

/* Only transition input after page loads */
body.sidebar-transitions .chat-input-fixed {
   transition: left var(--transition-base);
}

body.sidebar-open .chat-input-overlay {
   left: calc(var(--sidebar-width) / 2);
   right: 0;
   width: auto;
}

.chat-input-wrapper {
   max-width: 750px; /* Match chat-main width */
   margin: 0 auto;
   padding: 0 40px; /* Match messages container padding (20px + 20px from chat-main) */
}

/* Chat input form */
.chat-input {
   position: relative;
   width: 100%;
   display: flex;
   align-items: center;
   background: white;
   border-radius: 28px;
   padding: 4px;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.chat-input input {
   flex: 1;
   padding: 12px 20px;
   font-size: 16px;
   border: none;
   background: transparent;
   color: var(--color-primary); /* Dark text for white background */
   outline: none;
}

.chat-input input::placeholder {
   color: rgba(9, 14, 58, 0.5); /* Dark placeholder for white background */
}

.chat-input button {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: var(--color-primary); /* Dark button on white input */
   border: none;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: all 0.2s;
   flex-shrink: 0;
}

.chat-input button:hover {
   transform: scale(1.05);
}

.chat-input button i {
   color: white; /* White icon on dark button */
   font-size: 16px;
}

.chat-textarea {
   flex: 1;
   padding: 12px 20px;
   font-size: 16px;
   line-height: 1.5;
   border: none;
   border-radius: var(--radius-xl);
   background: transparent;
   resize: none;
   min-height: 40px;
   max-height: 120px;
   color: var(--color-primary);
   transition: all var(--transition-slow);
}

.chat-textarea:focus {
   outline: none;
}

.chat-send-btn {
   width: 40px;
   height: 40px;
   border: none;
   border-radius: 50%;
   background: var(--color-primary);
   color: white;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all var(--transition-base);
   flex-shrink: 0;
}

.chat-send-btn:hover {
   transform: scale(1.05);
   background: #0A1148;
}

/* Loading States */
.sidebar-loading {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 60px 20px;
   text-align: center;
}

.loading-dragon {
   width: 40px;
   height: 40px;
   opacity: 0.8;
   animation: dragonPulse 2s ease-in-out infinite;
   margin-bottom: 20px;
}

.loading-text {
   display: flex;
   align-items: baseline;
   gap: 2px;
   font-size: 14px;
   color: var(--color-text-muted);
}

.loading-dots {
   display: inline-flex;
}

.loading-dots .dot {
   opacity: 0;
   animation: dotFade 1.5s ease-in-out infinite;
}

.loading-dots .dot:nth-child(1) {
   animation-delay: 0s;
}

.loading-dots .dot:nth-child(2) {
   animation-delay: 0.2s;
}

.loading-dots .dot:nth-child(3) {
   animation-delay: 0.4s;
}

@keyframes dragonPulse {
   0%, 100% {
       opacity: 0.8;
       transform: scale(1);
   }
   50% {
       opacity: 1;
       transform: scale(1.1);
   }
}

@keyframes dotFade {
   0%, 80%, 100% {
       opacity: 0;
   }
   40% {
       opacity: 1;
   }
}

/* Empty State */
.sidebar-empty {
   text-align: center;
   padding: 60px 20px;
   color: var(--color-text-muted);
   font-size: 14px;
}

.sidebar-empty i {
   font-size: 48px;
   opacity: 0.2;
   margin-bottom: 20px;
   display: block;
}

/* ================================
  CHAT PAGE ANIMATIONS
  ================================ */
@keyframes fadeIn {
   from {
       opacity: 0;
       transform: translateY(10px);
   }
   to {
       opacity: 1;
       transform: translateY(0);
   }
}

@keyframes spin {
   0% {
       transform: rotate(0deg);
   }
   100% {
       transform: rotate(360deg);
   }
}

.fa-spin {
   animation: spin 1s infinite linear;
}

/* ================================
  CHAT PAGE RESPONSIVE
  ================================ */
@media (max-width: 768px) {
   .chat-page nav .nav-container {
       padding-left: 20px;
   }
   
   .sidebar {
       transform: translateX(-100%);
   }
   
   /* Removed old mobile chat-wrapper styles */
   
   body.sidebar-open .chat-input-fixed {
       left: 0;
   }
   
   .sidebar-toggle-inside {
       display: flex; /* Keep visible on mobile */
   }
   
   .sidebar-toggle {
       display: flex; /* Keep visible on mobile */
   }
}