/**
 * 📱💻 WikiLive Responsive Design System
 * Mobile-first responsive CSS with device-specific optimizations
 */

/* 🎯 RESPONSIVE BREAKPOINTS */
:root {
  /* Breakpoint variables */
  --breakpoint-xs: 480px;   /* Mobile portrait */
  --breakpoint-sm: 768px;   /* Mobile landscape */
  --breakpoint-md: 1024px;  /* Tablet */
  --breakpoint-lg: 1440px;  /* Desktop */
  --breakpoint-xl: 1920px;  /* Wide desktop */
  
  /* Device-specific spacing */
  --spacing-mobile: 12px;
  --spacing-tablet: 16px;
  --spacing-desktop: 20px;
  
  /* Device-specific font sizes */
  --font-size-mobile: 16px;
  --font-size-tablet: 15px;
  --font-size-desktop: 14px;
  
  /* Touch-friendly sizes */
  --touch-target-size: 44px;
  --button-height-mobile: 48px;
  --button-height-desktop: 40px;
}

/* 📱 MOBILE-FIRST BASE STYLES */
/* Default styles optimized for mobile devices */

.container {
  padding: var(--spacing-mobile);
  max-width: 100%;
  margin: 0 auto;
}

/* Mobile-optimized chat container */
.chat-container {
  padding: var(--spacing-mobile);
  margin-bottom: var(--spacing-mobile);
  border-radius: 8px;
  /* Ensure proper touch scrolling on mobile */
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
}

/* Mobile-friendly input container */
.input-container {
  padding: var(--spacing-mobile);
  gap: var(--spacing-mobile);
  /* Sticky positioning for mobile keyboards */
  position: sticky;
  bottom: 0;
  background: white;
  border-top: 1px solid var(--border-color);
}

/* Touch-friendly buttons */
button, .button {
  min-height: var(--button-height-mobile);
  padding: 12px 16px;
  font-size: var(--font-size-mobile);
  border-radius: 8px;
  /* Ensure buttons are touch-friendly */
  min-width: var(--touch-target-size);
  cursor: pointer;
  transition: all 0.2s ease;
}

/* Mobile-optimized text input */
input[type="text"], textarea {
  font-size: var(--font-size-mobile);
  padding: 12px 16px;
  border-radius: 8px;
  min-height: var(--touch-target-size);
  /* Prevent zoom on iOS */
  -webkit-appearance: none;
  appearance: none;
}

/* 🎨 DEVICE-SPECIFIC STYLES */

/* Mobile device styles */
.device-mobile {
  /* Optimize for mobile performance */
  --animation-duration: 0.2s;
  --shadow-intensity: 0.05;
}

.device-mobile .brain-portal {
  /* Smaller brain portal on mobile */
  max-width: 90vw;
  max-height: 70vh;
}

.device-mobile .infobox-container {
  /* Single column layout on mobile */
  grid-template-columns: 1fr;
  gap: var(--spacing-mobile);
}

.device-mobile .image-gallery {
  /* Smaller images on mobile */
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}

/* Tablet device styles */
.device-tablet {
  --animation-duration: 0.25s;
  --shadow-intensity: 0.08;
}

.device-tablet .container {
  padding: var(--spacing-tablet);
  max-width: 90%;
}

.device-tablet .infobox-container {
  /* Two column layout on tablet */
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-tablet);
}

/* Desktop device styles */
.device-desktop {
  --animation-duration: 0.3s;
  --shadow-intensity: 0.1;
}

.device-desktop .container {
  padding: var(--spacing-desktop);
  max-width: 1200px;
}

.device-desktop button, .device-desktop .button {
  min-height: var(--button-height-desktop);
  font-size: var(--font-size-desktop);
}

.device-desktop .infobox-container {
  /* Multi-column layout on desktop */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-desktop);
}

/* 🎯 PLATFORM-SPECIFIC STYLES */

/* iOS specific styles */
.platform-ios {
  /* iOS-specific styling */
  -webkit-appearance: none;
  appearance: none;
}

.platform-ios input, .platform-ios textarea {
  /* Prevent iOS zoom on input focus */
  font-size: 16px !important;
}

.platform-ios .button {
  /* iOS-style buttons */
  border-radius: 10px;
}

/* Android specific styles */
.platform-android {
  /* Android Material Design influences */
  font-family: 'Roboto', sans-serif;
}

.platform-android .button {
  /* Material Design button style */
  border-radius: 4px;
  text-transform: uppercase;
  font-weight: 500;
}

/* macOS specific styles */
.platform-mac .container {
  /* macOS-style spacing */
  padding: 24px;
}

/* Windows specific styles */
.platform-windows .button {
  /* Windows-style buttons */
  border-radius: 2px;
}

/* 📐 RESPONSIVE BREAKPOINTS */

/* Extra Small (Mobile Portrait) - Default styles above */
@media (max-width: 479px) {
  .breakpoint-xs .container {
    padding: 8px;
  }
  
  .breakpoint-xs .chat-container {
    padding: 12px;
    margin-bottom: 8px;
  }
  
  .breakpoint-xs .input-container {
    padding: 8px;
    gap: 8px;
  }
  
  .breakpoint-xs .brain-portal {
    max-width: 95vw;
    max-height: 75vh;
  }
}

/* Small (Mobile Landscape) */
@media (min-width: 480px) and (max-width: 767px) {
  .breakpoint-sm .container {
    padding: var(--spacing-mobile);
    max-width: 95%;
  }
  
  .breakpoint-sm .infobox-container {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .breakpoint-sm .image-gallery {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}

/* Medium (Tablet) */
@media (min-width: 768px) and (max-width: 1023px) {
  .breakpoint-md .container {
    padding: var(--spacing-tablet);
    max-width: 90%;
  }
  
  .breakpoint-md .chat-container {
    padding: var(--spacing-tablet);
    margin-bottom: var(--spacing-tablet);
  }
  
  .breakpoint-md .input-container {
    padding: var(--spacing-tablet);
    gap: var(--spacing-tablet);
  }
  
  .breakpoint-md button, .breakpoint-md .button {
    min-height: 44px;
    font-size: 15px;
  }
  
  .breakpoint-md .brain-portal {
    max-width: 80vw;
    max-height: 80vh;
  }
  
  .breakpoint-md .infobox-container {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-tablet);
  }
}

/* Large (Desktop) */
@media (min-width: 1024px) and (max-width: 1439px) {
  .breakpoint-lg .container {
    padding: var(--spacing-desktop);
    max-width: 1200px;
  }
  
  .breakpoint-lg .chat-container {
    padding: var(--spacing-desktop);
    margin-bottom: var(--spacing-desktop);
  }
  
  .breakpoint-lg .input-container {
    padding: var(--spacing-desktop);
    gap: var(--spacing-desktop);
  }
  
  .breakpoint-lg button, .breakpoint-lg .button {
    min-height: var(--button-height-desktop);
    font-size: var(--font-size-desktop);
  }
  
  .breakpoint-lg .brain-portal {
    max-width: 70vw;
    max-height: 85vh;
  }
  
  .breakpoint-lg .infobox-container {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-desktop);
  }
  
  .breakpoint-lg .image-gallery {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

/* Extra Large (Wide Desktop) */
@media (min-width: 1440px) {
  .breakpoint-xl .container {
    padding: 24px;
    max-width: 1400px;
  }
  
  .breakpoint-xl .brain-portal {
    max-width: 60vw;
    max-height: 90vh;
  }
  
  .breakpoint-xl .infobox-container {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
  
  .breakpoint-xl .image-gallery {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
}

/* 👆 TOUCH-SPECIFIC STYLES */
.touch-enabled {
  /* Enhanced touch targets */
  cursor: pointer;
}

.touch-enabled button, .touch-enabled .button {
  /* Larger touch targets */
  min-height: var(--touch-target-size);
  min-width: var(--touch-target-size);
}

.touch-enabled .clickable {
  /* Ensure all clickable elements are touch-friendly */
  min-height: var(--touch-target-size);
  min-width: var(--touch-target-size);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 🖥️ FULLSCREEN-CAPABLE STYLES */
.fullscreen-capable {
  /* Styles for devices that support fullscreen */
  position: relative;
}

.fullscreen-capable .fullscreen-toggle {
  display: block;
}

/* Hide fullscreen toggle on non-capable devices */
.fullscreen-toggle {
  display: none;
}

/* 🎨 ORIENTATION-SPECIFIC STYLES */
@media (orientation: portrait) {
  .portrait-only {
    display: block;
  }
  
  .landscape-only {
    display: none;
  }
  
  /* Optimize for portrait orientation */
  .brain-portal {
    max-width: 90vw;
    max-height: 70vh;
  }
}

@media (orientation: landscape) {
  .portrait-only {
    display: none;
  }
  
  .landscape-only {
    display: block;
  }
  
  /* Optimize for landscape orientation */
  .brain-portal {
    max-width: 80vw;
    max-height: 85vh;
  }
  
  /* Side-by-side layout in landscape */
  .landscape-split {
    display: flex;
    gap: var(--spacing-desktop);
  }
  
  .landscape-split > * {
    flex: 1;
  }
}

/* 🔧 UTILITY CLASSES */

/* Show/hide based on device type */
.mobile-only { display: none; }
.tablet-only { display: none; }
.desktop-only { display: none; }

.device-mobile .mobile-only { display: block; }
.device-tablet .tablet-only { display: block; }
.device-desktop .desktop-only { display: block; }

/* Responsive spacing utilities */
.spacing-mobile { padding: var(--spacing-mobile); }
.spacing-tablet { padding: var(--spacing-tablet); }
.spacing-desktop { padding: var(--spacing-desktop); }

/* Responsive text sizes */
.text-mobile { font-size: var(--font-size-mobile); }
.text-tablet { font-size: var(--font-size-tablet); }
.text-desktop { font-size: var(--font-size-desktop); }

/* 🎭 ANIMATION PREFERENCES */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Reduce animations on mobile for better performance */
.device-mobile * {
  animation-duration: 0.2s;
  transition-duration: 0.2s;
}

/* 🎨 HIGH CONTRAST MODE */
@media (prefers-contrast: high) {
  :root {
    --border-color: #000;
    --shadow-color: rgba(0, 0, 0, 0.3);
  }
}

/* 🌙 DARK MODE PREPARATION */
@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #1a1a1a;
    --text-color: #ffffff;
    --border-color: #333;
  }
}