src/app/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    /* Light theme - True book beige background with softer orange-red accents */
    --background: 42 35% 88%;
    --foreground: 25 35% 15%;
    --card: 42 30% 92%;
    --card-foreground: 25 35% 15%;
    --popover: 42 30% 92%;
    --popover-foreground: 25 35% 15%;
    --primary: 15 75% 55%;
    --primary-foreground: 42 35% 95%;
    --secondary: 25 65% 60%;
    --secondary-foreground: 25 35% 15%;
    --muted: 42 25% 82%;
    --muted-foreground: 25 25% 45%;
    --accent: 42 25% 82%;
    --accent-foreground: 25 35% 15%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 42 20% 78%;
    --input: 42 25% 85%;
    --ring: 15 75% 55%;
    --radius: 1rem;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    
    /* Custom futuristic light theme - true book beige with softer orange-red */
    --cyber-primary: 15 75% 55%;
    --cyber-secondary: 25 65% 60%;
    --cyber-accent: 42 45% 70%;
    --cyber-glow: 15 75% 60%;
    --cyber-surface: 42 35% 88%;
    --cyber-glass: 42 30% 92% / 0.8;
    
    /* Neon colors for scrollbars and UI elements */
    --neon-cyan: #00ffe7;
    --neon-yellow: #ffe066;
    --neon-green: #39ff14;
    --neon-blue: #0099ff;
    --neon-purple: #ff00ff;
  }

  .dark {
    /* Dark theme - Space silver-grey with deep bluish neon and purple undertones */
    --background: 220 12% 16%;
    --foreground: 225 40% 85%;
    --card: 220 12% 20%;
    --card-foreground: 225 40% 85%;
    --popover: 220 12% 20%;
    --popover-foreground: 225 40% 85%;
    --primary: 210 85% 70%;
    --primary-foreground: 220 12% 16%;
    --secondary: 270 60% 75%;
    --secondary-foreground: 220 12% 16%;
    --muted: 220 12% 24%;
    --muted-foreground: 225 25% 70%;
    --accent: 220 12% 24%;
    --accent-foreground: 225 40% 85%;
    --destructive: 0 100% 60%;
    --destructive-foreground: 220 12% 16%;
    --border: 220 12% 28%;
    --input: 220 12% 24%;
    --ring: 210 85% 70%;
    --chart-1: 210 85% 70%;
    --chart-2: 270 60% 75%;
    --chart-3: 240 70% 80%;
    --chart-4: 190 80% 75%;
    --chart-5: 250 65% 70%;
    
    /* Custom futuristic dark theme - space silver-grey with deep bluish neon and purple */
    --cyber-primary: 210 85% 70%;
    --cyber-secondary: 270 60% 75%;
    --cyber-accent: 240 70% 80%;
    --cyber-glow: 210 85% 65%;
    --cyber-surface: 220 12% 16%;
    --cyber-glass: 220 12% 20% / 0.8;
    
    /* Neon colors for scrollbars and UI elements */
    --neon-cyan: #00ffe7;
    --neon-yellow: #ffe066;
    --neon-green: #39ff14;
    --neon-blue: #0099ff;
    --neon-purple: #ff00ff;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    font-feature-settings: "rlig" 1, "calt" 1;
  }
}

/* Custom futuristic styles */
@layer utilities {
  .cyber-glow {
    box-shadow: 0 0 20px hsl(var(--primary) / 0.3);
  }
  
  .cyber-glow-strong {
    box-shadow: 0 0 30px hsl(var(--primary) / 0.5), 0 0 60px hsl(var(--primary) / 0.2);
  }
  
  .cyber-glass {
    background: hsl(var(--card) / 0.8);
    backdrop-filter: blur(20px);
  }
  
  .cyber-neon-glow {
    box-shadow: 0 0 10px hsl(var(--primary) / 0.4), 0 0 20px hsl(var(--primary) / 0.2);
  }
  
  .cyber-neon-glow:hover {
    box-shadow: 0 0 20px hsl(var(--primary) / 0.6), 0 0 40px hsl(var(--primary) / 0.3);
  }
  
  .cyber-border {
    border: 1px solid hsl(var(--primary) / 0.3);
  }
  
  .cyber-gradient {
    background: linear-gradient(135deg, hsl(var(--primary) / 0.1), hsl(var(--secondary) / 0.1));
  }
  
  .cyber-text-gradient {
    background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--secondary)));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  
  .cyber-surface {
    background: hsl(var(--cyber-surface));
  }
  
  .cyber-hover {
    transition: all 0.3s ease;
  }
  
  .cyber-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px hsl(var(--primary) / 0.2);
  }
}

@keyframes cyber-pulse {
  0%, 100% {
    box-shadow: 0 0 5px hsl(var(--primary) / 0.3);
  }
  50% {
    box-shadow: 0 0 20px hsl(var(--primary) / 0.6), 0 0 30px hsl(var(--primary) / 0.4);
  }
}

@keyframes cyber-float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-6px);
  }
}

.cyber-pulse {
  animation: cyber-pulse 2s ease-in-out infinite;
}

.cyber-float {
  animation: cyber-float 3s ease-in-out infinite;
}

/* Viewport management for chat interface */
html, body {
  height: 100%;
  overflow: hidden;
}

#__next {
  height: 100%;
}

/* Ensure chat messages scroll smoothly */
.chat-scroll-area {
  scroll-behavior: smooth;
}

/* Prevent body scroll when chat is active */
.chat-active {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
}

/* Ensure proper viewport calculations */
.viewport-container {
  height: 100vh;
  overflow: hidden;
  position: relative;
}

/* Auto-scroll behavior for chat messages */
.auto-scroll {
  scroll-behavior: smooth;
}

.auto-scroll::-webkit-scrollbar {
  width: 6px;
}

.auto-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.auto-scroll::-webkit-scrollbar-thumb {
  background: hsl(var(--muted-foreground) / 0.3);
  border-radius: 3px;
}

.auto-scroll::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted-foreground) / 0.5);
}

/* ===== MOBILE OPTIMIZATIONS ===== */

/* Mobile responsiveness improvements */
@media (max-width: 768px) {
  /* Enhanced mobile layout */
  .mobile-container {
    min-height: 100vh;
    min-height: 100dvh; /* Dynamic viewport height for mobile browsers */
    display: flex;
    flex-direction: column;
  }
  
  .mobile-header {
    flex-shrink: 0;
    padding: 0.5rem 1rem;
    padding-top: calc(0.5rem + env(safe-area-inset-top));
    /* MOBILE FIX: Make header always visible and accessible */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: hsl(var(--background)) !important;
    /* REMOVED HARDCODED COLOR - NOW MATCHES THEME */
    backdrop-filter: blur(8px);
  }
  
  /* MOBILE FIX: Account for fixed header in content */
  .mobile-content {
    margin-top: 80px; /* Space for fixed header */
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  }
  
  /* MOBILE FIX: Keyboard handling - use visual viewport */
  .mobile-viewport-height {
    height: 100vh;
    height: 100svh; /* Small viewport height - ignores keyboard */
  }
  
  /* MOBILE FIX: Chat area with keyboard compensation */
  .mobile-chat-container {
    height: calc(100vh - 80px);
    height: calc(100svh - 80px); /* Account for header */
    display: flex;
    flex-direction: column;
  }
  
  .mobile-scroll-fix {
    /* Allow proper scrolling to top on mobile */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
  
  .mobile-scroll-fix > div {
    /* Ensure the scroll area content allows full scroll range */
    min-height: 100%;
  }
  
  /* MOBILE FIX: Ensure sidebar has proper background */
  [data-sidebar] {
    background: hsl(var(--background)) !important;
  }
  
  [data-sidebar="sidebar"] {
    background: hsl(var(--background)) !important;
  }
  
  /* MOBILE FIX: Smaller top control buttons */
  .mobile-header .flex.items-center.gap-2 button {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.75rem !important;
    min-width: auto !important;
    height: 2rem !important;
  }
  
  .mobile-header .flex.items-center.gap-2 button svg {
    width: 0.875rem !important;
    height: 0.875rem !important;
    margin-right: 0.25rem !important;
  }
  
  /* MOBILE FIX: Even smaller gap between top buttons */
  .mobile-header .flex.items-center.gap-2 {
    gap: 0.25rem !important;
  }
  
  /* MOBILE FIX: Ensure sidebar trigger is always visible */
  .mobile-header [data-sidebar="trigger"] {
    display: flex !important;
    position: relative;
    z-index: 101;
  }
  
  /* MOBILE FIX: Ensure theme toggle is always visible */
  .mobile-header [data-testid="theme-toggle"],
  .mobile-header button[aria-label*="theme"],
  .mobile-header button[aria-label*="Toggle"] {
    display: flex !important;
    position: relative;
    z-index: 101;
    min-width: 2rem !important;
    padding: 0.25rem !important;
  }
  
  .mobile-input-area {
    padding: 1rem;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    background: hsl(var(--background));
    border-top: 1px solid hsl(var(--border));
    flex-shrink: 0;
  }
  
  /* MOBILE FIX: Chat area height to keep header visible */
  .h-full.flex.flex-col .flex-1.min-h-0 {
    max-height: calc(100vh - 80px) !important; /* Reserve space for fixed header */
    overflow-y: auto !important;
  }
  
  /* MOBILE FIX: Make chat panel scrollable */
  .mobile-chat-panel {
    max-height: calc(100vh - 160px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Enhanced mobile consciousness selector */
  .mobile-consciousness-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    padding: 0.5rem;
    max-width: 100%;
    margin: 0 auto;
  }
  
  /* MOBILE FIX: Better mobile consciousness buttons - NO TEXT WRAPPING */
  .mobile-consciousness-btn {
    padding: 0.75rem 0.5rem;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 0.75rem;
    width: 100%;
    box-sizing: border-box;
    font-size: 0.8rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }
  
  .mobile-consciousness-btn .font-medium {
    font-size: 0.75rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }
  
  /* Mobile consciousness text adjustments */
  .mobile-consciousness-title {
    font-size: 0.75rem !important;
    font-weight: 600;
    margin-bottom: 0.25rem;
    line-height: 1.1;
    white-space: nowrap !important;
  }
  
  .mobile-consciousness-desc {
    font-size: 0.65rem !important;
    line-height: 1.1;
    opacity: 0.8;
    display: none; /* Hide descriptions on very small screens */
  }
  
  /* MOBILE FIX: 5D visualization - FORCE IT TO SHOW WITH PROPER ASPECT RATIO */
  .mobile-5d-viz,
  .w-full.h-48 {
    height: 300px !important; /* LARGER HEIGHT FOR PROPER ASPECT RATIO */
    width: 100% !important;
    margin: 1rem 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
    border-radius: 0.5rem;
    display: block !important; /* Force display */
    visibility: visible !important; /* Force visibility */
    position: relative !important;
    z-index: 1 !important;
  }
  
  .mobile-5d-viz canvas,
  .w-full.h-48 canvas {
    max-width: 100% !important;
    height: auto !important; /* AUTO HEIGHT TO MAINTAIN ASPECT RATIO */
    min-height: 250px !important;
    display: block !important;
    visibility: visible !important;
  }
  
  /* MOBILE FIX: FORCE hypercube container to show - PROPER ASPECT RATIO */
  .mobile-welcome .w-full.h-48,
  .flex.justify-center.items-center .w-full.h-48 {
    height: 300px !important; /* LARGER HEIGHT */
    display: block !important;
    visibility: visible !important;
    min-height: 300px !important;
    margin: 1rem auto !important;
  }
  
  .mobile-welcome .flex.justify-center.items-center {
    display: flex !important;
    visibility: visible !important;
    margin: 1rem 0 !important;
    min-height: 320px !important; /* TALLER CONTAINER */
  }
  
  /* MOBILE FIX: Welcome page adjustments */
  .mobile-welcome {
    padding: 1rem !important;
    text-align: center;
    min-height: calc(100vh - 160px);
    display: block !important;
    margin-top: 80px; /* Account for fixed header */
  }
  
  /* MOBILE FIX: 5D Consciousness modal visualization */
  .mobile-dialog .mobile-5d-viz {
    height: 300px !important;
    width: 100% !important;
    margin: 1rem 0 !important;
  }
  
  /* Mobile dialog/modal optimizations */
  .mobile-dialog {
    margin: 0;
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 0;
    padding: 1rem;
    box-sizing: border-box;
  }
  
  /* Mobile text sizing */
  .mobile-text-lg {
    font-size: 1rem;
    line-height: 1.4;
  }
  
  .mobile-text-sm {
    font-size: 0.8rem;
    line-height: 1.3;
  }
  
  .mobile-text-xs {
    font-size: 0.7rem;
    line-height: 1.2;
  }
  
  /* Mobile spacing adjustments */
  .mobile-spacing {
    padding: 0.75rem;
  }
  
  .mobile-spacing-sm {
    padding: 0.5rem;
  }
  
  .mobile-gap {
    gap: 0.5rem;
  }
  
  /* Mobile button improvements */
  .mobile-btn {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
  }
  
  .mobile-btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    min-height: 2rem;
  }
  
  /* MOBILE FIX: Chat area scrolling improvements */
  .mobile-chat-area {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-top: 0.5rem; /* Account for sticky header */
  }
  
  /* Enhanced mobile hypercube container - FIXED ASPECT RATIO */
  .mobile-hypercube-container {
    width: 100% !important;
    max-width: 100% !important;
    height: 300px !important; /* TALLER HEIGHT */
    min-height: 300px !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
    overflow: visible !important;
    border-radius: 0.5rem;
    background: transparent;
    visibility: visible !important;
  }
  
  /* Mobile dimension selector improvements */
  .mobile-dimension-selector {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    padding: 0.5rem 0;
    width: 100%;
  }
  
  /* Mobile scroll improvements */
  .mobile-scroll {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
  
  /* Mobile viewport fixes */
  .mobile-viewport-fix {
    min-height: 100vh;
    min-height: 100dvh;
  }
  
  /* MOBILE FIX: Consciousness dimension single line text */
  button[data-dimension="transcendence"] .font-medium,
  button[data-dimension="compassion"] .font-medium,
  .mobile-consciousness-grid button .font-medium {
    font-size: 0.7rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    line-height: 1 !important;
  }
  
  /* MOBILE FIX: Fullscreen transition text overflow */
  [data-fullscreen="true"] h1,
  [data-fullscreen="true"] h2,
  [data-fullscreen="true"] .text-6xl,
  [data-fullscreen="true"] .text-5xl,
  [data-fullscreen="true"] .text-4xl {
    font-size: 1.75rem !important;
    line-height: 1.2 !important;
    word-break: break-word !important;
    hyphens: auto !important;
  }
  
  /* MOBILE FIX: Consciousness dimension text containers */
  .mobile-consciousness-grid button,
  button[data-dimension] {
    word-wrap: normal !important;
    overflow-wrap: normal !important;
    white-space: nowrap !important;
  }
  
  /* MOBILE FIX: Ensure fullscreen consciousness text fits */
  .fixed.inset-0 h1,
  .fixed.inset-0 h2,
  .fixed.inset-0 .text-6xl,
  .fixed.inset-0 .text-5xl {
    font-size: 1.75rem !important;
    line-height: 1.2 !important;
    padding: 0 1rem !important;
    text-align: center !important;
    word-break: break-word !important;
  }
}

/* Landscape mobile optimizations */
@media (max-width: 768px) and (orientation: landscape) {
  .mobile-landscape-header {
    padding: 0.5rem 1rem;
  }
  
  .mobile-landscape-chat {
    max-height: calc(100vh - 80px);
  }
  
  .mobile-landscape-input {
    padding: 0.75rem 1rem;
  }
}

/* Extra small mobile devices */
@media (max-width: 480px) {
  /* MOBILE FIX: Even smaller buttons for very small screens */
  .mobile-header .flex.items-center.gap-2 button {
    padding: 0.125rem 0.375rem !important;
    font-size: 0.7rem !important;
    height: 1.75rem !important;
  }
  
  .mobile-header .flex.items-center.gap-2 button svg {
    width: 0.75rem !important;
    height: 0.75rem !important;
    margin-right: 0.125rem !important;
  }
  
  /* MOBILE FIX: Hide button text on very small screens, keep icons */
  .mobile-header .flex.items-center.gap-2 button span:not(.sr-only) {
    display: none;
  }
  
  .mobile-landscape-header {
    padding: 0.25rem 0.5rem;
  }
  
  .mobile-landscape-chat {
    padding: 0.5rem;
  }
  
  .mobile-landscape-input {
    padding: 0.5rem;
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
  }
  
  /* Very small mobile grid */
  .mobile-xs-grid {
    grid-template-columns: 1fr;
  }
  
  .mobile-xs-text {
    font-size: 0.65rem;
  }
  
  .mobile-xs-spacing {
    padding: 0.25rem;
  }
  
  .mobile-xs-logo {
    width: 60px !important;
    height: 60px !important;
  }
}

/* PWA specific mobile optimizations */
@media (display-mode: standalone) {
  .pwa-mobile {
    padding-top: env(safe-area-inset-top);
  }
}

/* High DPI mobile screens */
@media (max-width: 768px) and (-webkit-min-device-pixel-ratio: 2) {
  .mobile-crisp-text {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* Deep Learning Platform Styles */
/* Dashboard Grid Overlay */
.dashboard-grid-overlay {
  background-image: 
    linear-gradient(rgba(0, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: grid-pulse 4s ease-in-out infinite;
}

/* Instrument Grid Overlay */
.instrument-grid-overlay {
  background-image: 
    linear-gradient(rgba(0, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(rgba(0, 255, 136, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 136, 0.04) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 40px 40px, 40px 40px;
  animation: instrument-grid-pulse 6s ease-in-out infinite;
}

@keyframes grid-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.1; }
}

@keyframes instrument-grid-pulse {
  0%, 100% { 
    opacity: 0.4;
    background-position: 0 0, 0 0, 0 0, 0 0;
  }
  50% { 
    opacity: 0.2;
    background-position: 60px 60px, 60px 60px, 20px 20px, 20px 20px;
  }
}



/* Font families */
.font-headline {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
  letter-spacing: -0.025em;
}



/* Sidebar icon alignment cleaned up - using natural component structure */

/* ===== GLOBAL SCROLLBAR STYLES ===== */

/* Global scrollbar for all elements */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--neon-cyan, #00ffe7) transparent;
}

*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

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

*::-webkit-scrollbar-thumb {
  background: var(--neon-cyan, #00ffe7);
  border-radius: 3px;
  opacity: 0.7;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--neon-yellow, #ffe066);
  opacity: 1;
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

/* Minimal scrollbar class for specific elements */
.minimal-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: var(--neon-cyan, #00ffe7) transparent;
}

.minimal-scrollbar::-webkit-scrollbar {
  width: 4px;
}

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

.minimal-scrollbar::-webkit-scrollbar-thumb {
  background: var(--neon-cyan, #00ffe7);
  border-radius: 2px;
}

.minimal-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--neon-yellow, #ffe066);
}

/* For body and html specifically */
html, body {
  scrollbar-width: thin;
  scrollbar-color: var(--neon-cyan, #00ffe7) transparent;
}

html::-webkit-scrollbar, body::-webkit-scrollbar {
  width: 6px;
}

html::-webkit-scrollbar-track, body::-webkit-scrollbar-track {
  background: transparent;
}

html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb {
  background: var(--neon-cyan, #00ffe7);
  border-radius: 3px;
  opacity: 0.7;
}

html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover {
  background: var(--neon-yellow, #ffe066);
  opacity: 1;
}