/**
 * Fullscreen Minimal Image Generator - Frontend Styles
 * Beautiful, Modern Design - Isolated from Theme Conflicts
 */

/* ========================================
   CSS VARIABLES
======================================== */
:root {
  /* Primary Colors */
  --aig-primary: #9147ff;
  --aig-primary-hover: #772ce8;
  --aig-accent: #00f2ea;

  /* Neutrals */
  --aig-bg: #0a0a0a;
  --aig-surface: #141414;
  --aig-surface-light: #1f1f1f;
  --aig-border: #2d2d2d;
  --aig-text: #ffffff;
  --aig-text-muted: #adadb8;
  --aig-text-dim: #6b6b6b;

  /* Background Overlays */
  --aig-overlay-dark: rgba(0, 0, 0, 0.9);
  --aig-overlay-darker: rgba(0, 0, 0, 0.97);
  --aig-overlay-medium: rgba(10, 10, 10, 0.95);
  --aig-overlay-light: rgba(20, 20, 20, 0.9);
  --aig-overlay-lighter: rgba(20, 20, 20, 0.95);
  --aig-overlay-subtle: rgba(0, 0, 0, 0.2);

  /* Tinted Backgrounds */
  --aig-bg-primary-subtle: rgba(145, 71, 255, 0.05);
  --aig-bg-primary-light: rgba(145, 71, 255, 0.1);
  --aig-bg-accent-subtle: rgba(0, 242, 234, 0.05);
  --aig-bg-accent-light: rgba(0, 242, 234, 0.1);
  --aig-bg-success-light: rgba(0, 245, 147, 0.1);
  --aig-bg-error-light: rgba(255, 71, 87, 0.1);
  --aig-bg-white-subtle: rgba(255, 255, 255, 0.05);

  /* Status Colors */
  --aig-success: #00f593;
  --aig-error: #f04747;
  --aig-warning: #ffa500;

  /* Shadows & Effects */
  --aig-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --aig-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.6);
  --aig-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.8);
  --aig-shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.8);

  /* Glows */
  --aig-glow-primary: 0 0 30px rgba(145, 71, 255, 0.5);
  --aig-glow-primary-sm: 0 0 15px rgba(145, 71, 255, 0.5);
  --aig-glow-primary-md: 0 0 20px rgba(145, 71, 255, 0.4);
  --aig-glow-primary-lg: 0 0 40px rgba(145, 71, 255, 0.7);
  --aig-glow-accent: 0 0 20px rgba(0, 242, 234, 0.4);
  --aig-glow-accent-md: 0 0 30px rgba(0, 242, 234, 0.4);
  --aig-glow-success: 0 0 15px rgba(0, 245, 147, 0.5);

  /* Button Shadows */
  --aig-btn-shadow: 0 4px 12px rgba(145, 71, 255, 0.3);
  --aig-btn-shadow-hover: 0 10px 30px rgba(145, 71, 255, 0.4);
  --aig-btn-shadow-active: 0 0 20px rgba(145, 71, 255, 0.5);

  /* Border Radius */
  --aig-radius-sm: 6px;
  --aig-radius-md: 8px;
  --aig-radius-lg: 12px;
  --aig-radius-xl: 16px;
  --aig-radius-full: 9999px;

  /* Typography - Font Sizes */
  --aig-text-xs: 0.75rem;      /* 12px - Very small text, badges, counters */
  --aig-text-sm: 0.875rem;     /* 14px - Small text, captions, helper text */
  --aig-text-base: 1rem;       /* 16px - Base body text */
  --aig-text-lg: 1.125rem;     /* 18px - Slightly larger text */
  --aig-text-xl: 1.25rem;      /* 20px - Large text */
  --aig-text-2xl: 1.5rem;      /* 24px - Heading level 3 */
  --aig-text-3xl: 1.75rem;     /* 28px - Heading level 2 */
  --aig-text-4xl: 2rem;        /* 32px - Heading level 1 */
  --aig-text-5xl: 2.5rem;      /* 40px - Extra large headings */
  --aig-text-6xl: 3rem;        /* 48px - Hero headings */

  /* Typography - Font Weights */
  --aig-font-normal: 400;
  --aig-font-medium: 500;
  --aig-font-semibold: 600;
  --aig-font-bold: 700;
  --aig-font-black: 900;

  /* Gradients - Primary & Accent */
  --aig-gradient-primary: linear-gradient(135deg, var(--aig-primary), var(--aig-primary-hover));
  --aig-gradient-primary-accent: linear-gradient(135deg, var(--aig-primary), var(--aig-accent));
  --aig-gradient-accent-primary: linear-gradient(135deg, var(--aig-accent), var(--aig-primary));
  --aig-gradient-primary-success: linear-gradient(90deg, var(--aig-primary), var(--aig-success));
  --aig-gradient-text: linear-gradient(135deg, #9147ff, #00f593);

  /* Gradients - Surface */
  --aig-gradient-surface: linear-gradient(135deg, var(--aig-surface), var(--aig-surface-light));
  --aig-gradient-dark: linear-gradient(135deg, #1a1a1a, #2d2d2d);

  /* Gradients - Special Effects */
  --aig-gradient-gold: linear-gradient(135deg, #ffd93d, #ffaa00);
  --aig-gradient-silver: linear-gradient(135deg, #C0C0C0, #808080);
  --aig-gradient-bronze: linear-gradient(135deg, #CD7F32, #8B4513);
  --aig-gradient-error: linear-gradient(135deg, #ff6b6b, #ff8e53);

  /* Gradients - Subtle Tints */
  --aig-gradient-primary-subtle: linear-gradient(135deg, transparent, rgba(145, 71, 255, 0.1));
  --aig-gradient-success-subtle: linear-gradient(135deg, var(--aig-surface), rgba(0, 245, 147, 0.05));
  --aig-gradient-mixed-subtle: linear-gradient(135deg, rgba(145, 71, 255, 0.1), rgba(0, 242, 234, 0.1));
  --aig-gradient-accent-mixed: linear-gradient(135deg, rgba(0, 242, 234, 0.15), rgba(145, 71, 255, 0.15));

  /* Radial Gradients */
  --aig-radial-gold: radial-gradient(circle, rgba(255, 215, 0, 0.4) 0%, rgba(255, 215, 0, 0.2) 30%, transparent 50%);

  /* Transitions */
  --aig-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --aig-transition-fast: all 0.2s ease;
}

/* ========================================
   CSS ISOLATION - Complete Theme Override
======================================== */
.aig-fullscreen-container {
  /* Reset critical properties only */
  line-height: 1.5 !important;
  font-size: 16px !important;
}

.aig-fullscreen-container,
.aig-fullscreen-container * {
  box-sizing: border-box !important;
}

/* ========================================
   FULLSCREEN CONTAINER
======================================== */
.aig-fullscreen-container {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  /* Use dynamic viewport height on iOS to account for Safari's URL bar */
  height: 100dvh !important;
  background: var(--aig-bg) !important;
  color: var(--aig-text) !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  z-index: 999999 !important;
}

/* ========================================
   TOP BAR
======================================== */
.aig-top-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: var(--aig-overlay-lighter);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--aig-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2rem;
  z-index: 100;
}

.aig-top-bar-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.aig-top-bar-left svg {
  color: var(--aig-primary);
  flex-shrink: 0;
}

/* Logo Nebula Animation */
#aig-logo-nebula {
  flex-shrink: 0 !important;
  filter: drop-shadow(0 0 10px rgba(145, 71, 255, 0.5)) !important;
}

#aig-logo-nebula svg {
  width: 100% !important;
  height: 100% !important;
}

.aig-brand-minimal {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--aig-text);
  display: inline-block;
  background: var(--aig-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.aig-top-bar-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Buttons in Top Bar - Must override theme completely */
.aig-webcam-toggle,
.aig-history-toggle {
  position: relative !important;
  background: var(--aig-surface) !important;
  border: 1px solid var(--aig-border) !important;
  border-radius: 0.5rem !important;
  padding: 0.5rem 1rem !important;
  color: var(--aig-text) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  transition: var(--aig-transition) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  font-weight: 600 !important;
  text-shadow: none !important;
  box-shadow: none !important;
  width: auto !important;
  height: auto !important;
}

.aig-webcam-toggle svg,
.aig-history-toggle svg {
  flex-shrink: 0;
}

.aig-webcam-toggle:hover {
  background: var(--aig-accent) !important;
  border: 1px solid var(--aig-accent) !important;
  border-color: var(--aig-accent) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 0 20px rgba(0, 242, 234, 0.4) !important;
  text-decoration: none !important;
}

.aig-webcam-toggle.active {
  background: var(--aig-success) !important;
  border: 1px solid var(--aig-success) !important;
  border-color: var(--aig-success) !important;
  color: white !important;
  box-shadow: none !important;
}

.aig-webcam-toggle.active svg,
.aig-webcam-toggle.active .aig-btn-label {
  color: white !important;
}

.aig-history-toggle:hover {
  background: var(--aig-primary) !important;
  border: 1px solid var(--aig-primary) !important;
  border-color: var(--aig-primary) !important;
  color: white !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--aig-glow-primary-md) !important;
  text-decoration: none !important;
}

.aig-history-toggle:hover svg,
.aig-history-toggle:hover .aig-btn-label {
  color: white !important;
}

.aig-btn-label {
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  color: inherit;
  display: inline-block;
}

.aig-history-count {
  background: var(--aig-primary);
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 1rem;
  min-width: 1.5rem;
  text-align: center;
  display: inline-block;
}

.aig-tokens-minimal {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--aig-gradient-primary);
  padding: 0.5rem 1rem;
  border-radius: 0.75rem;
  font-weight: 700;
  box-shadow: var(--aig-glow-primary);
  color: white;
}

.aig-token-count {
  font-size: 1.1rem;
  color: white;
  display: inline-block;
}

.aig-buy-btn-minimal {
  background: var(--aig-surface);
  border: 1px solid var(--aig-border);
  color: var(--aig-text);
  padding: 0.5rem 1rem;
  border-radius: var(--aig-radius-md);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.25rem;
  transition: var(--aig-transition);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  cursor: pointer;
}

.aig-buy-btn-minimal:hover {
  background: var(--aig-success);
  border-color: var(--aig-success);
  transform: translateY(-2px);
  color: white;
}

/* ========================================
   DISPLAY AREA (Main Image)
======================================== */
.aig-display-area {
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  bottom: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  overflow: hidden;
}

.aig-main-image-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Empty State - Animated and Engaging */
.aig-empty-state {
  display: flex;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 3rem !important;
  color: var(--aig-text-muted) !important;
  animation: fadeInScale 0.6s ease-out !important;
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Animation Container */
.aig-empty-state-animation {
  position: relative !important;
  width: 200px !important;
  height: 200px !important;
  margin-bottom: 2rem !important;
}

.aig-empty-icon-container {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  animation: floatIcon 3s ease-in-out infinite !important;
  width: 200px !important;
  height: 200px !important;
}

.aig-empty-icon-container svg[data-lucide] {
  color: var(--aig-primary) !important;
  filter: drop-shadow(0 0 20px rgba(145, 71, 255, 0.6)) !important;
}

/* Lottie Animation Container */
#aig-lottie-warlock {
  width: 200px !important;
  height: 200px !important;
  filter: drop-shadow(0 0 30px rgba(145, 71, 255, 0.6)) !important;
}

#aig-lottie-warlock svg {
  width: 100% !important;
  height: 100% !important;
}

@keyframes floatIcon {
  0%, 100% {
    transform: translate(-50%, -50%) translateY(0);
  }
  50% {
    transform: translate(-50%, -50%) translateY(-10px);
  }
}

/* Magic Wand */
.aig-magic-wand {
  position: absolute !important;
  font-size: 2.5rem !important;
  animation: wandOrbit 4s linear infinite !important;
  transform-origin: 100px 100px !important;
}

@keyframes wandOrbit {
  0% {
    transform: rotate(0deg) translateX(80px) rotate(0deg);
  }
  100% {
    transform: rotate(360deg) translateX(80px) rotate(-360deg);
  }
}

/* Sparkles */
.aig-sparkle {
  position: absolute !important;
  font-size: 1.5rem !important;
  animation: sparkleFloat 2s ease-in-out infinite !important;
}

.aig-sparkle-1 {
  top: 20% !important;
  left: 10% !important;
  animation-delay: 0s !important;
}

.aig-sparkle-2 {
  top: 70% !important;
  right: 15% !important;
  animation-delay: 0.7s !important;
}

.aig-sparkle-3 {
  top: 40% !important;
  right: 5% !important;
  animation-delay: 1.4s !important;
}

@keyframes sparkleFloat {
  0%, 100% {
    transform: translateY(0) scale(1);
    opacity: 0.4;
  }
  50% {
    transform: translateY(-20px) scale(1.2);
    opacity: 1;
  }
}

/* Empty State Text */
.aig-empty-title {
  font-size: 2.5rem !important;
  font-weight: 900 !important;
  margin-bottom: 1rem !important;
  background: var(--aig-gradient-text) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: gradientShift 3s ease-in-out infinite !important;
}

@keyframes gradientShift {
  0%, 100% {
    filter: hue-rotate(0deg);
  }
  50% {
    filter: hue-rotate(20deg);
  }
}

.aig-empty-subtitle {
  font-size: 1.2rem !important;
  opacity: 0.8 !important;
  margin-bottom: 2.5rem !important;
  color: var(--aig-text-muted) !important;
}

/* Prompt Suggestions */
.aig-empty-suggestions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
  justify-content: center !important;
  max-width: 600px !important;
  margin-top: 1rem !important;
}

.aig-suggestion-btn {
  background: var(--aig-surface) !important;
  border: 2px solid var(--aig-border) !important;
  color: var(--aig-text) !important;
  padding: 0.75rem 1.25rem !important;
  border-radius: var(--aig-radius-full) !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: var(--aig-transition) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  text-shadow: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

.aig-suggestion-btn:hover {
  background: var(--aig-primary) !important;
  border-color: var(--aig-primary) !important;
  border: 2px solid var(--aig-primary) !important;
  color: white !important;
  transform: translateY(-3px) scale(1.05) !important;
  box-shadow: var(--aig-btn-shadow-hover) !important;
  text-decoration: none !important;
}

.aig-suggestion-btn:active {
  transform: translateY(-1px) scale(1.02) !important;
}

/* Responsive Empty State */
@media (max-width: 768px) {
  .aig-empty-state {
    padding: 2rem 1rem !important;
  }

  .aig-empty-state-animation {
    width: 150px !important;
    height: 150px !important;
  }

  .aig-empty-icon-container svg[data-lucide] {
    width: 70px !important;
    height: 70px !important;
  }

  .aig-empty-title {
    font-size: 1.75rem !important;
  }

  .aig-empty-subtitle {
    font-size: 1rem !important;
  }

  .aig-empty-suggestions {
    flex-direction: column !important;
    width: 100% !important;
  }

  .aig-suggestion-btn {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* Main Image Wrapper */
.aig-main-image-wrapper {
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.8s ease;
  overflow: hidden;
}

.aig-main-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 1rem;
  box-shadow: var(--aig-shadow-lg);
  transition: transform 0.3s ease;
  display: block;
}

.aig-main-image:hover {
  transform: scale(1.02);
}

/* Image Actions */
.aig-image-actions {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: flex;
  gap: 0.5rem;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 10;
}

.aig-main-image-wrapper:hover .aig-image-actions {
  opacity: 1;
}

.aig-action-btn {
  background: var(--aig-overlay-light) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid var(--aig-border) !important;
  color: var(--aig-text) !important;
  width: 6rem !important;
  height: 6rem !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: var(--aig-transition) !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: inherit !important;
  line-height: 1 !important;
  font-weight: normal !important;
  text-shadow: none !important;
  text-decoration: none !important;
  position: relative !important;
  opacity: 1 !important;
}

.aig-action-btn svg {
  flex-shrink: 0 !important;
  pointer-events: none !important;
  color: inherit !important;
  stroke: currentColor !important;
}

.aig-action-btn:hover {
  background: var(--aig-primary) !important;
  border-color: var(--aig-primary) !important;
  border: 1px solid var(--aig-primary) !important;
  color: white !important;
  transform: scale(1.1) !important;
  box-shadow: var(--aig-glow-primary) !important;
  text-decoration: none !important;
}

.aig-action-btn:hover svg {
  color: white !important;
  stroke: white !important;
}

.aig-action-btn:active,
.aig-action-btn:focus {
  outline: none !important;
  text-decoration: none !important;
}

/* Current Prompt Display - Subtle but Visible */
.aig-current-prompt {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  max-width: 80%;
  background: linear-gradient(135deg, rgba(20, 20, 20, 0.85), rgba(30, 30, 30, 0.9));
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  padding: 0.875rem 1.75rem;
  border-radius: 2rem;
  border: 1px solid rgba(145, 71, 255, 0.3);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5),
              0 0 0 1px rgba(255, 255, 255, 0.05),
              inset 0 1px 0 rgba(255, 255, 255, 0.1);
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(173, 173, 184, 0.95);
  text-align: center;
  opacity: 0.85;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 5;
  letter-spacing: 0.3px;
  line-height: 1.5;
}

.aig-main-image-wrapper:hover .aig-current-prompt {
  opacity: 1;
  transform: translateX(-50%) translateY(-3px);
  border-color: rgba(145, 71, 255, 0.5);
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.6),
              0 0 0 1px rgba(145, 71, 255, 0.2),
              0 0 20px rgba(145, 71, 255, 0.15),
              inset 0 1px 0 rgba(255, 255, 255, 0.15);
  color: var(--aig-text);
}

/* Icon before prompt text for visual hint */
.aig-current-prompt::before {
  content: "✨";
  margin-right: 0.5rem;
  opacity: 0.7;
  font-size: 0.9rem;
}

/* ========================================
   WEBCAM OVERLAY
======================================== */
.aig-webcam-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  z-index: 30;
  pointer-events: none;
}

.aig-webcam-overlay.active {
  display: block;
}

#aig-webcam-video {
  display: none !important;
}

.aig-webcam-canvas {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: transparent;
  border-radius: 1rem;
  box-shadow: var(--aig-shadow-lg);
  display: block;
}

/* Webcam Controls */
.aig-webcam-controls {
  position: absolute !important;
  bottom: 20px !important;
  right: 20px !important;
  display: flex !important;
  gap: 0.75rem !important;
  background: var(--aig-overlay-light) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid var(--aig-border) !important;
  border-radius: 2rem !important;
  padding: 0.6rem 1rem !important;
  pointer-events: auto !important;
  z-index: 35 !important;
  align-items: center !important;
  box-shadow: var(--aig-shadow-md) !important;
}

.aig-webcam-control-btn {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 1px solid var(--aig-border) !important;
  color: var(--aig-text) !important;
  width: 2.5rem !important;
  height: 2.5rem !important;
  min-width: 2.5rem !important;
  min-height: 2.5rem !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: var(--aig-transition) !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: inherit !important;
  line-height: 1 !important;
  font-weight: normal !important;
  text-shadow: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
  position: relative !important;
  pointer-events: auto !important;
  opacity: 1 !important;
}

.aig-webcam-control-btn svg {
  flex-shrink: 0 !important;
  pointer-events: none !important;
  color: inherit !important;
  stroke: currentColor !important;
}

.aig-webcam-control-btn:hover {
  background: var(--aig-primary) !important;
  border-color: var(--aig-primary) !important;
  border: 1px solid var(--aig-primary) !important;
  color: white !important;
  transform: scale(1.1) !important;
  box-shadow: var(--aig-glow-primary-sm) !important;
  text-decoration: none !important;
}

.aig-webcam-control-btn:hover svg {
  color: white !important;
  stroke: white !important;
}

.aig-webcam-control-btn:active,
.aig-webcam-control-btn:focus {
  outline: none !important;
  text-decoration: none !important;
}

.aig-webcam-control-btn.active {
  background: var(--aig-success) !important;
  border-color: var(--aig-success) !important;
  color: white !important;
  box-shadow: var(--aig-glow-success) !important;
}

.aig-webcam-control-btn.active svg {
  color: white !important;
  stroke: white !important;
}

.aig-webcam-status {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--aig-text-muted);
  padding-left: 0.75rem;
  border-left: 1px solid var(--aig-border);
}

.aig-status-indicator {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--aig-text-dim);
  display: block;
}

.aig-status-indicator.active {
  background: var(--aig-success);
  box-shadow: 0 0 8px var(--aig-success);
}

.aig-status-indicator.loading {
  background: var(--aig-warning);
  box-shadow: 0 0 8px var(--aig-warning);
}

.aig-status-indicator.error {
  background: var(--aig-error);
  box-shadow: 0 0 8px var(--aig-error);
}

.aig-status-text {
  font-size: 0.85rem;
  color: var(--aig-text-muted);
  white-space: nowrap;
  display: inline-block;
}

/* Progress Overlay */
.aig-progress-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--aig-overlay-medium);
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1.5rem;
  z-index: 50;
}

.aig-progress-overlay.visible {
  display: flex;
}

.aig-spinner {
  width: 60px;
  height: 60px;
  border: 4px solid var(--aig-surface);
  border-top-color: var(--aig-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.aig-progress-text {
  font-size: 1.1rem;
  color: var(--aig-text-muted);
  animation: pulse 2s ease-in-out infinite;
}

/* ========================================
   BOTTOM BAR (Prompt Input)
======================================== */
.aig-bottom-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--aig-overlay-lighter);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--aig-border);
  padding: 1.5rem 2rem;
  /* Safe area for iOS Safari (bottom notch/home indicator) */
  padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  z-index: 100;
}

.aig-prompt-form {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.aig-prompt-input-wrapper {
  display: flex;
  gap: 1rem;
  align-items: flex-end;
  position: relative !important;
}

/* Preprompt Selector */
.aig-preprompt-selector {
  position: absolute !important;
  left: 1rem !important;
  bottom: calc(100% + 0.5rem) !important;
  display: flex !important;
  gap: 0.5rem !important;
  z-index: 10 !important;
}

.aig-preprompt-btn {
  background: var(--aig-surface) !important;
  border: 2px solid var(--aig-border) !important;
  color: var(--aig-text-muted) !important;
  padding: 0.5rem 0.75rem !important;
  border-radius: var(--aig-radius-lg) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: var(--aig-transition) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  text-shadow: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  opacity: 0.7 !important;
}

.aig-preprompt-btn svg {
  flex-shrink: 0 !important;
  width: 16px !important;
  height: 16px !important;
  color: inherit !important;
  stroke: currentColor !important;
}

.aig-preprompt-btn:hover {
  background: var(--aig-surface-light) !important;
  border-color: var(--aig-primary) !important;
  border: 2px solid var(--aig-primary) !important;
  color: var(--aig-text) !important;
  opacity: 1 !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--aig-btn-shadow) !important;
  text-decoration: none !important;
}

.aig-preprompt-btn.active {
  background: var(--aig-primary) !important;
  border-color: var(--aig-primary) !important;
  border: 2px solid var(--aig-primary) !important;
  color: white !important;
  opacity: 1 !important;
  box-shadow: var(--aig-btn-shadow-active) !important;
}

.aig-preprompt-btn.active svg {
  color: white !important;
  stroke: white !important;
}

.aig-preprompt-btn:active,
.aig-preprompt-btn:focus {
  outline: none !important;
  text-decoration: none !important;
}

/* Desktop: Remove relative positioning to fix action buttons visibility */
@media (min-width: 769px) {
  .aig-main-image-wrapper {
    position: static;
  }
}

/* Mobile Preprompt */
@media (max-width: 768px) {
  .aig-preprompt-selector {
    left: 0.5rem !important;
    bottom: calc(100% + 0.35rem) !important;
    gap: 0.35rem !important;
  }

  .aig-preprompt-btn {
    padding: 0.4rem 0.6rem !important;
    font-size: 0.75rem !important;
  }

  .aig-preprompt-btn svg {
    width: 14px !important;
    height: 14px !important;
  }

  .aig-preprompt-btn span {
    display: none !important;
  }
}

.aig-prompt-input-minimal {
  flex: 1 !important;
  background: var(--aig-surface) !important;
  border: 2px solid var(--aig-border) !important;
  border-radius: var(--aig-radius-xl) !important;
  padding: 1rem 1.5rem !important;
  font-size: 1.1rem !important;
  color: var(--aig-text) !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  resize: none !important;
  min-height: 60px !important;
  max-height: 200px !important;
  transition: var(--aig-transition) !important;
  overflow-y: auto !important;
  line-height: 1.5 !important;
  width: 100% !important;
  display: block !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.aig-prompt-input-minimal:focus {
  outline: none !important;
  border: 2px solid var(--aig-primary) !important;
  border-color: var(--aig-primary) !important;
  box-shadow: var(--aig-glow-primary) !important;
  background: var(--aig-surface) !important;
  color: var(--aig-text) !important;
}

.aig-prompt-input-minimal::placeholder {
  color: var(--aig-text-dim) !important;
  opacity: 1 !important;
}

.aig-prompt-input-minimal::-webkit-input-placeholder {
  color: var(--aig-text-dim) !important;
  opacity: 1 !important;
}

.aig-prompt-input-minimal:-moz-placeholder {
  color: var(--aig-text-dim) !important;
  opacity: 1 !important;
}

.aig-prompt-input-minimal::-moz-placeholder {
  color: var(--aig-text-dim) !important;
  opacity: 1 !important;
}

.aig-generate-btn-minimal {
  background: var(--aig-gradient-primary) !important;
  background-image: var(--aig-gradient-primary) !important;
  border: none !important;
  color: white !important;
  width: 60px !important;
  height: 60px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: var(--aig-transition) !important;
  box-shadow: var(--aig-glow-primary) !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: inherit !important;
  line-height: 1 !important;
  font-weight: normal !important;
  text-shadow: none !important;
  text-decoration: none !important;
  position: relative !important;
}

.aig-generate-btn-minimal:hover:not(:disabled) {
  transform: translateY(-4px) scale(1.05) !important;
  box-shadow: var(--aig-glow-primary-lg) !important;
  background: var(--aig-gradient-primary) !important;
  border: none !important;
  color: white !important;
  text-decoration: none !important;
}

.aig-generate-btn-minimal:active {
  transform: translateY(-2px) scale(1.02) !important;
  background: var(--aig-gradient-primary) !important;
  border: none !important;
  outline: none !important;
}

.aig-generate-btn-minimal:focus {
  background: var(--aig-gradient-primary) !important;
  border: none !important;
  outline: none !important;
}

.aig-generate-btn-minimal:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  background: var(--aig-gradient-primary) !important;
  border: none !important;
}

.aig-char-counter-minimal {
  position: absolute;
  bottom: -1.5rem;
  right: 0;
  font-size: 0.85rem;
  color: var(--aig-text-dim);
}

.aig-char-current,
.aig-char-max {
  color: var(--aig-text-dim);
}

/* ========================================
   HISTORY SIDEBAR
======================================== */
.aig-history-sidebar {
  position: fixed;
  top: 0;
  right: -400px;
  width: 400px;
  height: 100vh;
  background: var(--aig-surface);
  border-left: 1px solid var(--aig-border);
  z-index: 200;
  display: flex;
  flex-direction: column;
  transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--aig-shadow-lg);
}

.aig-history-sidebar.open {
  right: 0;
}

.aig-history-header {
  padding: 1.5rem;
  border-bottom: 1px solid var(--aig-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.aig-history-header h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--aig-text);
}

.aig-history-close {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 1px solid var(--aig-border) !important;
  color: var(--aig-text) !important;
  width: 2.5rem !important;
  height: 2.5rem !important;
  min-width: 2.5rem !important;
  min-height: 2.5rem !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: var(--aig-transition) !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: inherit !important;
  line-height: 1 !important;
  font-weight: normal !important;
  text-shadow: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

.aig-history-close svg {
  flex-shrink: 0 !important;
  pointer-events: none !important;
  color: inherit !important;
  stroke: currentColor !important;
}

.aig-history-close:hover {
  background: var(--aig-error) !important;
  border-color: var(--aig-error) !important;
  border: 1px solid var(--aig-error) !important;
  color: white !important;
  transform: rotate(90deg) !important;
  text-decoration: none !important;
}

.aig-history-close:hover svg {
  color: white !important;
  stroke: white !important;
}

.aig-history-close:active,
.aig-history-close:focus {
  outline: none !important;
  text-decoration: none !important;
}

.aig-history-content {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
}

.aig-history-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--aig-text-dim);
}

.aig-history-empty p {
  color: var(--aig-text-dim);
}

/* History Item */
.aig-history-item {
  background: var(--aig-bg);
  border: 1px solid var(--aig-border);
  border-radius: 0.75rem;
  margin-bottom: 1rem;
  overflow: hidden;
  cursor: pointer;
  transition: var(--aig-transition);
}

.aig-history-item:hover {
  border-color: var(--aig-primary);
  transform: translateX(-5px);
  box-shadow: var(--aig-shadow-md);
}

.aig-history-item-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.aig-history-item-info {
  padding: 0.75rem;
}

.aig-history-item-prompt {
  font-size: 0.85rem;
  color: var(--aig-text-muted);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.aig-history-item-time {
  font-size: 0.75rem;
  color: var(--aig-text-dim);
  margin-top: 0.5rem;
  display: block;
}

.aig-history-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--aig-border);
}

.aig-clear-history {
  width: 100% !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 1px solid var(--aig-border) !important;
  color: var(--aig-text-muted) !important;
  padding: 0.75rem !important;
  border-radius: 0.5rem !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  font-weight: 600 !important;
  transition: var(--aig-transition) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  text-shadow: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

.aig-clear-history svg {
  flex-shrink: 0 !important;
  pointer-events: none !important;
  color: inherit !important;
  stroke: currentColor !important;
}

.aig-clear-history:hover {
  background: var(--aig-error) !important;
  border-color: var(--aig-error) !important;
  border: 1px solid var(--aig-error) !important;
  color: white !important;
  text-decoration: none !important;
}

.aig-clear-history:hover svg {
  color: white !important;
  stroke: white !important;
}

.aig-clear-history:active,
.aig-clear-history:focus {
  outline: none !important;
  text-decoration: none !important;
}

/* ========================================
   MODAL
======================================== */
.aig-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--aig-overlay-darker);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999999 !important; /* CORRECTION: Higher than all other elements */
  opacity: 0;
  visibility: hidden;
  transition: var(--aig-transition);
  padding: 2rem;
}

.aig-modal.active {
  opacity: 1;
  visibility: visible;
}

.aig-modal-close {
  position: absolute !important;
  top: 2rem !important;
  right: 2rem !important;
  background: var(--aig-overlay-light) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid var(--aig-border) !important;
  color: white !important;
  width: 3.5rem !important;
  height: 3.5rem !important;
  min-width: 3.5rem !important;
  min-height: 3.5rem !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: var(--aig-transition) !important;
  z-index: 99999999 !important; /* CORRECTION: Above modal */
  padding: 0 !important;
  margin: 0 !important;
  font-size: inherit !important;
  line-height: 1 !important;
  font-weight: normal !important;
  text-shadow: none !important;
  box-shadow: var(--aig-shadow-md) !important;
  text-decoration: none !important;
}

.aig-modal-close svg {
  flex-shrink: 0 !important;
  pointer-events: none !important;
  color: inherit !important;
  stroke: currentColor !important;
}

.aig-modal-close:hover {
  background: var(--aig-error) !important;
  border-color: var(--aig-error) !important;
  border: 1px solid var(--aig-error) !important;
  color: white !important;
  transform: rotate(90deg) scale(1.1) !important;
  text-decoration: none !important;
}

.aig-modal-close:hover svg {
  color: white !important;
  stroke: white !important;
}

.aig-modal-close:active,
.aig-modal-close:focus {
  outline: none !important;
  text-decoration: none !important;
}

.aig-modal-content {
  max-width: 95vw;
  max-height: 95vh;
  position: relative;
}

.aig-modal-content img {
  max-width: 100%;
  max-height: 95vh;
  border-radius: 1rem;
  box-shadow: var(--aig-shadow-lg);
  display: block;
}

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

/* ========================================
   ANIMATIONS
======================================== */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

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

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ========================================
   RESPONSIVE
======================================== */
@media (max-width: 768px) {
  .aig-top-bar {
    padding: 0.75rem 1rem;
    height: auto;
    min-height: 50px;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .aig-top-bar-left {
    flex: 0 0 auto;
    order: 1;
  }

  .aig-top-bar-left img {
    height: 32px !important;
  }

  .aig-top-bar-right {
    flex: 1 1 100%;
    order: 2;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .aig-brand-minimal {
    font-size: 0.95rem;
  }

  .aig-btn-label {
    display: none;
  }



  .aig-bottom-bar {
    padding: 1rem;
    /* Safe area for iOS Safari (bottom notch/home indicator) */
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  }

  .aig-prompt-input-minimal {
    font-size: 1rem;
    padding: 0.875rem 1rem;
  }

  .aig-generate-btn-minimal {
    width: 50px;
    height: 50px;
  }

  .aig-history-sidebar {
    width: 100vw;
    right: -100vw;
  }

  .aig-current-prompt {
    font-size: 0.8rem;
    padding: 0.65rem 1.25rem;
    max-width: 90%;
    bottom: 1rem;
    opacity: 0.9;
  }

  .aig-current-prompt::before {
    font-size: 0.8rem;
  }

  .aig-image-actions {
    opacity: 1;
  }
}

@media (max-width: 480px) {
  .aig-top-bar-right {
    gap: 0.5rem;
  }

  .aig-tokens-minimal {
    padding: 0.4rem 0.75rem;
    font-size: 0.9rem;
  }

  .aig-display-area {
    padding: 0.5rem;
  }

  .aig-main-image {
    border-radius: 0.5rem;
  }
}

/* ========================================
   GAMIFICATION SYSTEM
======================================== */

/* Gamification UI Container */
.aig-gamification-ui {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  padding-right: 1rem !important;
  border-right: 1px solid var(--aig-border) !important;
  margin-right: 0.5rem !important;
}

/* Level Badge */
.aig-level-badge {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: var(--aig-gradient-gold) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 900 !important;
  font-size: 1.1rem !important;
  color: #0a0a0a !important;
  box-shadow: 0 0 20px rgba(255, 217, 61, 0.6), inset 0 2px 10px rgba(255, 255, 255, 0.3) !important;
  position: relative !important;
  transition: transform 0.3s ease !important;
}

.aig-level-badge:hover {
  transform: scale(1.1) rotate(5deg) !important;
}

.aig-level-badge::before {
  content: '' !important;
  position: absolute !important;
  inset: -2px !important;
  border-radius: 50% !important;
  background: linear-gradient(45deg, #ffd93d, #ffaa00, #ffd93d) !important;
  z-index: -1 !important;
  animation: rotateBorder 3s linear infinite !important;
}

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

.aig-level-number {
  position: relative !important;
  z-index: 1 !important;
}

/* XP Bar Container */
.aig-xp-bar-container {
  position: relative !important;
  width: 180px !important;
  height: 30px !important;
  background: var(--aig-surface) !important;
  border: 2px solid var(--aig-border) !important;
  border-radius: 15px !important;
  overflow: hidden !important;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5) !important;
}

.aig-xp-bar {
  height: 100% !important;
  background: linear-gradient(90deg, #9147ff, #00f593) !important;
  width: 0%;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  box-shadow: 0 0 10px rgba(145, 71, 255, 0.8) !important;
}

.aig-xp-bar::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 50% !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), transparent) !important;
}

.aig-xp-text {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  color: white !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
  z-index: 2 !important;
  white-space: nowrap !important;
}

/* Streak Badge */
.aig-streak-badge {
  background: var(--aig-gradient-error) !important;
  padding: 0.4rem 0.8rem !important;
  border-radius: 1rem !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  color: white !important;
  box-shadow: 0 0 20px rgba(255, 107, 107, 0.6) !important;
  animation: flameFlicker 2s ease-in-out infinite !important;
}

@keyframes flameFlicker {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.05); filter: brightness(1.1); }
}

/* Achievement Notification Styles */
.aig-achievement-notification .aig-achievement-icon {
  font-size: 3rem !important;
  width: 60px !important;
  height: 60px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--aig-gradient-gold) !important;
  border-radius: 50% !important;
  box-shadow: 0 0 20px rgba(255, 217, 61, 0.6) !important;
  animation: achievementIconPulse 2s ease-in-out infinite !important;
}

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

.aig-achievement-content {
  flex: 1 !important;
}

.aig-achievement-title {
  font-size: 0.75rem !important;
  font-weight: 900 !important;
  color: #ffd93d !important;
  letter-spacing: 1px !important;
  margin-bottom: 0.3rem !important;
}

.aig-achievement-name {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: white !important;
  margin-bottom: 0.3rem !important;
}

.aig-achievement-desc {
  font-size: 0.85rem !important;
  color: rgba(173, 173, 184, 0.9) !important;
  margin-bottom: 0.5rem !important;
}

.aig-achievement-xp {
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  color: #00f593 !important;
}

/* Level Up Modal Styles */
.aig-levelup-content {
  background: var(--aig-gradient-dark) !important;
  border: 3px solid #ffd93d !important;
  border-radius: 1.5rem !important;
  padding: 3rem !important;
  text-align: center !important;
  animation: levelUpBounce 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
  box-shadow: 0 0 60px rgba(255, 217, 61, 0.8), inset 0 0 30px rgba(255, 217, 61, 0.2) !important;
}

@keyframes levelUpBounce {
  0% { transform: scale(0) rotate(-180deg); }
  60% { transform: scale(1.1) rotate(10deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.aig-levelup-star {
  font-size: 5rem !important;
  margin-bottom: 1rem !important;
  animation: levelUpStarSpin 1s ease-in-out infinite alternate !important;
}

@keyframes levelUpStarSpin {
  0% { transform: rotate(-10deg) scale(1); }
  100% { transform: rotate(10deg) scale(1.2); }
}

.aig-levelup-title {
  font-size: 3rem !important;
  font-weight: 900 !important;
  background: var(--aig-gradient-gold) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  margin-bottom: 1rem !important;
  text-shadow: 0 0 30px rgba(255, 217, 61, 0.6) !important;
}

.aig-levelup-subtitle {
  font-size: 1.2rem !important;
  color: var(--aig-text-muted) !important;
  margin-bottom: 2rem !important;
}

.aig-levelup-close {
  background: linear-gradient(135deg, #9147ff, #772ce8) !important;
  border: none !important;
  color: white !important;
  padding: 1rem 2.5rem !important;
  border-radius: 2rem !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 0 20px rgba(145, 71, 255, 0.6) !important;
}

.aig-levelup-close:hover {
  transform: translateY(-3px) scale(1.05) !important;
  box-shadow: 0 0 30px rgba(145, 71, 255, 0.8) !important;
}

/* Combo Notification Styles */
.aig-combo-text {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.aig-combo-number {
  font-size: 3rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.aig-combo-label {
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  margin-top: 0.5rem !important;
}

/* Responsive Gamification */
@media (max-width: 768px) {
  .aig-gamification-ui {
    display: none !important;
  }

  .aig-level-badge {
    width: 35px !important;
    height: 35px !important;
    font-size: 0.95rem !important;
  }

  .aig-xp-bar-container {
    width: 120px !important;
    height: 25px !important;
  }

  .aig-xp-text {
    font-size: 0.65rem !important;
  }

  .aig-streak-badge {
    padding: 0.3rem 0.6rem !important;
    font-size: 0.8rem !important;
  }
}

/* ========================================
   CUSTOM TOOLTIPS
======================================== */
.aig-tooltip-container {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  pointer-events: none !important;
  z-index: 999999 !important;
}

.aig-tooltip {
  position: fixed !important;
  background: var(--aig-overlay-lighter) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  color: white !important;
  padding: 0.75rem 1rem !important;
  border-radius: 0.5rem !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  max-width: 250px !important;
  word-wrap: break-word !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(145, 71, 255, 0.3) !important;
  pointer-events: none !important;
  z-index: 999999 !important;
  opacity: 0 !important;
  transform: scale(0.9) !important;
  transition: opacity 0.2s ease, transform 0.2s ease !important;
}

.aig-tooltip-visible {
  opacity: 1 !important;
  transform: scale(1) !important;
}

.aig-tooltip::before {
  content: '' !important;
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  border: 6px solid transparent !important;
}

/* Arrow positions */
.aig-tooltip[style*="--arrow-position: bottom"]::before {
  bottom: -12px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  border-top-color: rgba(20, 20, 20, 0.95) !important;
}

.aig-tooltip[style*="--arrow-position: top"]::before {
  top: -12px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  border-bottom-color: rgba(20, 20, 20, 0.95) !important;
}

.aig-tooltip[style*="--arrow-position: left"]::before {
  left: -12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  border-right-color: rgba(20, 20, 20, 0.95) !important;
}

.aig-tooltip[style*="--arrow-position: right"]::before {
  right: -12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  border-left-color: rgba(20, 20, 20, 0.95) !important;
}

/* Fix textarea required tooltip position */
.aig-prompt-input-minimal:invalid {
  box-shadow: none !important;
}

.aig-prompt-input-minimal:required:invalid:focus {
  border-color: var(--aig-primary) !important;
}

/* Override browser's default validation tooltip */
.aig-prompt-form {
  position: relative !important;
}

/* ========================================
   REDUCED MOTION
======================================== */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
/* ========================================
   TREASURE CHEST OVERLAY
======================================== */
.aig-treasure-chest-overlay {
  position: fixed !important;
  bottom: 2rem !important;
  left: 2rem !important;
  z-index: 9999 !important;
  pointer-events: auto !important;
  animation: slideInFromBottom 0.6s ease-out !important;
}

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

.aig-treasure-chest-container {
  position: relative !important;
  cursor: pointer !important;
  transition: transform 0.3s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.aig-treasure-chest-container:hover {
  transform: scale(1.1) !important;
}

@keyframes pulseGlow {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.6;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 1;
  }
}

#aig-lottie-chest {
  width: 150px !important;
  height: 150px !important;
  position: relative !important;
  z-index: 2 !important;
}

#aig-lottie-chest svg {
  width: 100% !important;
  height: 100% !important;
  filter: drop-shadow(0 4px 20px rgba(255, 215, 0, 0.6)) !important;
}

@keyframes chestExplode {
  to {
    transform: scale(2);
    opacity: 0;
  }
}

@media (max-width: 768px) {
  .aig-treasure-chest-overlay {
    bottom: 1rem !important;
    left: 1rem !important;
  }

  #aig-lottie-chest {
    width: 100px !important;
    height: 100px !important;
  }

  .aig-chest-glow {
    width: 120px !important;
    height: 120px !important;
  }
}

/* Shaking Animation for Chest */
.aig-treasure-chest-container.shaking {
  animation: chestShakeLoop 2s ease-in-out infinite !important;
}

@keyframes chestShakeLoop {
  0%, 100% { transform: rotate(0deg); }
  10%, 30% { transform: rotate(-3deg); }
  20%, 40% { transform: rotate(3deg); }
  50%, 90% { transform: rotate(0deg); }
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Lottie chest sizing */
#aig-lottie-chest {
  width: 150px !important;
  height: 150px !important;
  display: block !important;
}

#aig-lottie-chest svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* CRITICAL FIX: Container must have size! */
.aig-treasure-chest-container {
  width: 200px !important;
  height: 200px !important;
}

/* Chest shaking animation while waiting for click */
.chest-shaking {
  animation: chestWiggle 2.5s ease-in-out infinite !important;
}

@keyframes chestWiggle {
  0%, 100% { 
    transform: rotate(0deg) translateY(0px); 
  }
  10% { 
    transform: rotate(-2deg) translateY(-3px); 
  }
  20% { 
    transform: rotate(2deg) translateY(-5px); 
  }
  30% { 
    transform: rotate(-2deg) translateY(-3px); 
  }
  40% { 
    transform: rotate(0deg) translateY(0px); 
  }
}

/* Enhanced glow effect */
.aig-treasure-chest-overlay::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 220px;
  height: 220px;
  background: var(--aig-radial-gold);
  border-radius: 50%;
  animation: pulseGlowGold 2s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}

@keyframes pulseGlowGold {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.6;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.15);
    opacity: 1;
  }
}

/* ========================================
   SOCIAL PROOF NOTIFICATIONS
======================================== */
.aig-social-notification {
  position: fixed !important;
  bottom: 20px !important;
  left: 20px !important;
  background: var(--aig-overlay-lighter) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  padding: 0.75rem 1rem !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
  z-index: 999998 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  max-width: 350px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  transition: left 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}

.aig-social-notification-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.3rem !important;
  flex-shrink: 0 !important;
  box-shadow: 0 0 15px currentColor !important;
}

.aig-social-notification-content {
  flex: 1 !important;
  min-width: 0 !important;
}

.aig-social-notification-text {
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: white !important;
  line-height: 1.4 !important;
  word-wrap: break-word !important;
}

@media (max-width: 768px) {
  .aig-social-notification {
    max-width: calc(100vw - 40px) !important;
    bottom: 15px !important;
    left: 15px !important;
  }

  .aig-social-notification-icon {
    width: 35px !important;
    height: 35px !important;
    font-size: 1.1rem !important;
  }

  .aig-social-notification-text {
    font-size: 0.85rem !important;
  }
}

/* ========================================
   ACHIEVEMENTS MODAL
======================================== */
.aig-achievements-modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 999999 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 2rem !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

.aig-achievements-modal.active {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.aig-achievements-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: var(--aig-overlay-dark) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.aig-achievements-container {
  position: relative !important;
  background: var(--aig-gradient-surface) !important;
  border: 2px solid var(--aig-border) !important;
  border-radius: 1.5rem !important;
  max-width: 900px !important;
  width: 100% !important;
  max-height: 90vh !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(145, 71, 255, 0.2) !important;
  animation: modalSlideIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}

@keyframes modalSlideIn {
  from {
    transform: scale(0.8) translateY(30px);
    opacity: 0;
  }
  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

/* Header */
.aig-achievements-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 1.5rem 2rem !important;
  border-bottom: 1px solid var(--aig-border) !important;
  background: var(--aig-bg-primary-subtle) !important;
}

.aig-achievements-title {
  font-size: 1.75rem !important;
  font-weight: 900 !important;
  color: var(--aig-text) !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  margin: 0 !important;
}

.aig-achievements-title svg {
  color: var(--aig-primary) !important;
  filter: drop-shadow(0 0 10px rgba(145, 71, 255, 0.6)) !important;
}

.aig-achievements-close {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 1px solid var(--aig-border) !important;
  color: var(--aig-text) !important;
  width: 2.5rem !important;
  height: 2.5rem !important;
  min-width: 2.5rem !important;
  min-height: 2.5rem !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: var(--aig-transition) !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: inherit !important;
  line-height: 1 !important;
  font-weight: normal !important;
  text-shadow: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

.aig-achievements-close svg {
  flex-shrink: 0 !important;
  pointer-events: none !important;
  color: inherit !important;
  stroke: currentColor !important;
}

.aig-achievements-close:hover {
  background: var(--aig-error) !important;
  border-color: var(--aig-error) !important;
  color: white !important;
  transform: rotate(90deg) !important;
  text-decoration: none !important;
}

.aig-achievements-close:hover svg {
  color: white !important;
  stroke: white !important;
}

/* Stats Section */
.aig-achievements-stats {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1rem !important;
  padding: 1.5rem 2rem !important;
  border-bottom: 1px solid var(--aig-border) !important;
  background: var(--aig-overlay-subtle) !important;
}

.aig-stat-card {
  background: var(--aig-surface) !important;
  border: 1px solid var(--aig-border) !important;
  border-radius: 0.75rem !important;
  padding: 1rem !important;
  text-align: center !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

.aig-stat-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: var(--aig-gradient-primary-accent) !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
}

.aig-stat-card:hover {
  transform: translateY(-3px) !important;
  border-color: var(--aig-primary) !important;
  box-shadow: 0 8px 20px rgba(145, 71, 255, 0.3) !important;
}

.aig-stat-card:hover::before {
  opacity: 1 !important;
}

.aig-stat-icon {
  font-size: 1.75rem !important;
  margin-bottom: 0.5rem !important;
  display: block !important;
}

.aig-stat-value {
  font-size: 1.75rem !important;
  font-weight: 900 !important;
  color: var(--aig-text) !important;
  margin-bottom: 0.25rem !important;
  display: block !important;
  background: var(--aig-gradient-primary-accent) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.aig-stat-label {
  font-size: 0.85rem !important;
  color: var(--aig-text-muted) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  display: block !important;
}

/* Achievements Grid */
.aig-achievements-grid {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 2rem !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 1.25rem !important;
  align-content: flex-start !important;
}

.aig-achievements-loading {
  grid-column: 1 / -1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 3rem !important;
  color: var(--aig-text-muted) !important;
}

.aig-achievements-loading .aig-spinner {
  margin-bottom: 1rem !important;
}

.aig-achievements-loading p {
  color: var(--aig-text-muted) !important;
  font-size: 1rem !important;
}

/* Achievement Card */
.aig-achievement-card {
  background: var(--aig-surface) !important;
  border: 2px solid var(--aig-border) !important;
  border-radius: 1rem !important;
  padding: 1.25rem !important;
  display: flex !important;
  gap: 1rem !important;
  transition: all 0.3s ease !important;
  position: relative !important;
}

.aig-achievement-card::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: var(--aig-gradient-primary-subtle) !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
}

.aig-achievement-card:hover::before {
  opacity: 1 !important;
}

/* Locked State */
.aig-achievement-card.locked {
  opacity: 0.5 !important;
  filter: grayscale(0.8) !important;
}

.aig-achievement-card.locked:hover {
  opacity: 0.65 !important;
  transform: translateY(-2px) !important;
}

/* Unlocked State */
.aig-achievement-card.unlocked {
  border-color: var(--aig-success) !important;
  background: var(--aig-gradient-success-subtle) !important;
}

.aig-achievement-card.unlocked:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 25px rgba(0, 245, 147, 0.3) !important;
  border-color: var(--aig-success) !important;
}

.aig-achievement-card.unlocked::after {
  content: '✓' !important;
  position: absolute !important;
  top: 0.75rem !important;
  right: 0.75rem !important;
  width: 1.5rem !important;
  height: 1.5rem !important;
  background: var(--aig-success) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: white !important;
  font-size: 0.875rem !important;
  font-weight: 900 !important;
}

.aig-achievement-card-icon {
  font-size: 2.5rem !important;
  width: 3.5rem !important;
  height: 3.5rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, rgba(145, 71, 255, 0.2), rgba(0, 242, 234, 0.2)) !important;
  border-radius: 0.75rem !important;
  flex-shrink: 0 !important;
  transition: all 0.3s ease !important;
}

.aig-achievement-card.unlocked .aig-achievement-card-icon {
  background: linear-gradient(135deg, rgba(0, 245, 147, 0.3), rgba(0, 242, 234, 0.3)) !important;
  animation: iconPulse 2s ease-in-out infinite !important;
}

@keyframes iconPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.aig-achievement-card-content {
  flex: 1 !important;
  min-width: 0 !important;
}

.aig-achievement-card-name {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--aig-text) !important;
  margin-bottom: 0.375rem !important;
  line-height: 1.3 !important;
}

.aig-achievement-card-desc {
  font-size: 0.875rem !important;
  color: var(--aig-text-muted) !important;
  line-height: 1.4 !important;
  margin-bottom: 0.5rem !important;
}

.aig-achievement-card-xp {
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  color: var(--aig-primary) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
  background: var(--aig-bg-primary-light) !important;
  padding: 0.25rem 0.5rem !important;
  border-radius: 0.375rem !important;
}

.aig-achievement-card.unlocked .aig-achievement-card-xp {
  color: var(--aig-success) !important;
  background: var(--aig-bg-success-light) !important;
}

.aig-achievement-card-date {
  font-size: 0.75rem !important;
  color: var(--aig-text-dim) !important;
  margin-top: 0.5rem !important;
  display: block !important;
  font-style: italic !important;
}

/* Achievements Toggle Button (Top Bar) */
.aig-achievements-toggle {
  position: relative !important;
  background: var(--aig-surface) !important;
  border: 1px solid var(--aig-border) !important;
  border-radius: 0.5rem !important;
  padding: 0.5rem 1rem !important;
  color: var(--aig-text) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  transition: var(--aig-transition) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  font-weight: 600 !important;
  text-shadow: none !important;
  box-shadow: none !important;
  width: auto !important;
  height: auto !important;
  text-decoration: none !important;
}

.aig-achievements-toggle svg {
  flex-shrink: 0 !important;
  color: inherit !important;
}

.aig-achievements-toggle:hover {
  background: var(--aig-primary) !important;
  border-color: var(--aig-primary) !important;
  color: white !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 0 20px rgba(145, 71, 255, 0.4) !important;
  text-decoration: none !important;
}

.aig-achievements-toggle:hover svg,
.aig-achievements-toggle:hover .aig-btn-label {
  color: white !important;
}

/* Responsive Achievements Modal */
@media (max-width: 768px) {
  .aig-achievements-modal {
    padding: 0 !important;
  }

  .aig-achievements-container {
    max-width: 100% !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    border: none !important;
  }

  .aig-achievements-header {
    padding: 1rem 1.25rem !important;
  }

  .aig-achievements-title {
    font-size: 1.35rem !important;
  }

  .aig-achievements-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
    padding: 1rem 1.25rem !important;
  }

  .aig-stat-card {
    padding: 0.875rem !important;
  }

  .aig-stat-icon {
    font-size: 1.5rem !important;
  }

  .aig-stat-value {
    font-size: 1.5rem !important;
  }

  .aig-stat-label {
    font-size: 0.75rem !important;
  }

  .aig-achievements-grid {
    grid-template-columns: 1fr !important;
    padding: 1.25rem !important;
    gap: 1rem !important;
  }

  .aig-achievement-card {
    padding: 1rem !important;
  }

  .aig-achievement-card-icon {
    font-size: 2rem !important;
    width: 3rem !important;
    height: 3rem !important;
  }

  .aig-achievement-card-name {
    font-size: 0.95rem !important;
  }

  .aig-achievement-card-desc {
    font-size: 0.8rem !important;
  }
}

/* ========================================
   LEADERBOARD MODAL
======================================== */
.aig-leaderboard-modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 999999 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 2rem !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

.aig-leaderboard-modal.active {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.aig-leaderboard-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: var(--aig-overlay-dark) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.aig-leaderboard-container {
  position: relative !important;
  background: var(--aig-gradient-surface) !important;
  border: 2px solid var(--aig-border) !important;
  border-radius: 1.5rem !important;
  max-width: 800px !important;
  width: 100% !important;
  max-height: 90vh !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(0, 242, 234, 0.2) !important;
  animation: modalSlideIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}

/* Header */
.aig-leaderboard-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 1.5rem 2rem !important;
  border-bottom: 1px solid var(--aig-border) !important;
  background: var(--aig-bg-accent-subtle) !important;
}

.aig-leaderboard-title {
  font-size: 1.75rem !important;
  font-weight: 900 !important;
  color: var(--aig-text) !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  margin: 0 !important;
}

.aig-leaderboard-title svg {
  color: var(--aig-accent) !important;
  filter: drop-shadow(0 0 10px rgba(0, 242, 234, 0.6)) !important;
}

.aig-leaderboard-close {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 1px solid var(--aig-border) !important;
  color: var(--aig-text) !important;
  width: 2.5rem !important;
  height: 2.5rem !important;
  min-width: 2.5rem !important;
  min-height: 2.5rem !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: var(--aig-transition) !important;
  padding: 0 !important;
  margin: 0 !important;
}

.aig-leaderboard-close:hover {
  background: var(--aig-error) !important;
  border-color: var(--aig-error) !important;
  color: white !important;
  transform: rotate(90deg) !important;
}

/* Tabs */
.aig-leaderboard-tabs {
  display: flex !important;
  gap: 0.5rem !important;
  padding: 1rem 2rem !important;
  border-bottom: 1px solid var(--aig-border) !important;
  background: var(--aig-overlay-subtle) !important;
}

.aig-leaderboard-tab {
  background: transparent !important;
  border: 1px solid var(--aig-border) !important;
  border-radius: 0.5rem !important;
  padding: 0.625rem 1rem !important;
  color: var(--aig-text-muted) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  transition: all 0.3s ease !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}

.aig-leaderboard-tab svg {
  flex-shrink: 0 !important;
}

.aig-leaderboard-tab:hover {
  background: var(--aig-bg-accent-light) !important;
  border-color: var(--aig-accent) !important;
  color: var(--aig-text) !important;
}

.aig-leaderboard-tab.active {
  background: linear-gradient(135deg, var(--aig-accent), rgba(0, 242, 234, 0.7)) !important;
  border-color: var(--aig-accent) !important;
  color: white !important;
  box-shadow: 0 4px 15px rgba(0, 242, 234, 0.3) !important;
}

.aig-leaderboard-tab.active svg {
  color: white !important;
}

/* User Rank Card */
.aig-user-rank-card {
  margin: 1rem 2rem !important;
  padding: 1rem !important;
  background: linear-gradient(135deg, rgba(0, 242, 234, 0.1), rgba(145, 71, 255, 0.1)) !important;
  border: 2px solid var(--aig-accent) !important;
  border-radius: 0.75rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  animation: pulseGlow 2s ease-in-out infinite !important;
}

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(0, 242, 234, 0.2);
  }
  50% {
    box-shadow: 0 0 30px rgba(0, 242, 234, 0.4);
  }
}

.aig-user-rank-loading {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  color: var(--aig-text-muted) !important;
  font-size: 0.9rem !important;
}

.aig-spinner-small {
  width: 20px !important;
  height: 20px !important;
  border: 2px solid rgba(0, 242, 234, 0.2) !important;
  border-top-color: var(--aig-accent) !important;
  border-radius: 50% !important;
  animation: spin 0.8s linear infinite !important;
}

.aig-user-rank-info {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  flex: 1 !important;
}

.aig-user-rank-position {
  font-size: 2rem !important;
  font-weight: 900 !important;
  background: var(--aig-gradient-accent-primary) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  min-width: 3rem !important;
  text-align: center !important;
}

.aig-user-rank-details {
  flex: 1 !important;
}

.aig-user-rank-name {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--aig-text) !important;
  margin-bottom: 0.25rem !important;
}

.aig-user-rank-stats {
  font-size: 0.875rem !important;
  color: var(--aig-text-muted) !important;
}

.aig-user-rank-percentile {
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  color: var(--aig-success) !important;
  padding: 0.25rem 0.5rem !important;
  background: var(--aig-bg-success-light) !important;
  border-radius: 0.375rem !important;
}

/* Leaderboard List */
.aig-leaderboard-list {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 1rem 2rem !important;
}

.aig-leaderboard-loading {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 3rem !important;
  color: var(--aig-text-muted) !important;
}

.aig-leaderboard-loading .aig-spinner {
  margin-bottom: 1rem !important;
}

.aig-leaderboard-loading p {
  color: var(--aig-text-muted) !important;
  font-size: 1rem !important;
}

/* Leaderboard Entry */
.aig-leaderboard-entry {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  padding: 0.875rem !important;
  margin-bottom: 0.5rem !important;
  background: var(--aig-surface) !important;
  border: 1px solid var(--aig-border) !important;
  border-radius: 0.75rem !important;
  transition: all 0.3s ease !important;
}

.aig-leaderboard-entry:hover {
  transform: translateX(5px) !important;
  border-color: var(--aig-accent) !important;
  box-shadow: 0 4px 15px rgba(0, 242, 234, 0.2) !important;
}

.aig-leaderboard-entry.current-user {
  background: var(--aig-gradient-accent-mixed) !important;
  border-color: var(--aig-accent) !important;
  border-width: 2px !important;
}

/* Rank Badge */
.aig-leaderboard-rank {
  min-width: 2.5rem !important;
  height: 2.5rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
  border-radius: 0.5rem !important;
  flex-shrink: 0 !important;
}

.aig-leaderboard-entry:nth-child(1) .aig-leaderboard-rank {
  background: linear-gradient(135deg, #FFD700, #FFA500) !important;
  color: #000 !important;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.5) !important;
}

.aig-leaderboard-entry:nth-child(2) .aig-leaderboard-rank {
  background: var(--aig-gradient-silver) !important;
  color: #000 !important;
  box-shadow: 0 0 15px rgba(192, 192, 192, 0.5) !important;
}

.aig-leaderboard-entry:nth-child(3) .aig-leaderboard-rank {
  background: var(--aig-gradient-bronze) !important;
  color: #fff !important;
  box-shadow: 0 0 15px rgba(205, 127, 50, 0.5) !important;
}

.aig-leaderboard-entry:nth-child(n+4) .aig-leaderboard-rank {
  background: var(--aig-bg-white-subtle) !important;
  color: var(--aig-text-muted) !important;
  border: 1px solid var(--aig-border) !important;
}

/* Avatar */
.aig-leaderboard-avatar {
  width: 2.5rem !important;
  height: 2.5rem !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid var(--aig-border) !important;
  flex-shrink: 0 !important;
}

/* User Info */
.aig-leaderboard-user {
  flex: 1 !important;
  min-width: 0 !important;
}

.aig-leaderboard-username {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: var(--aig-text) !important;
  margin-bottom: 0.125rem !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.aig-leaderboard-meta {
  font-size: 0.75rem !important;
  color: var(--aig-text-dim) !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

.aig-leaderboard-meta-item {
  display: flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
}

/* Value Display */
.aig-leaderboard-value {
  font-size: 1.125rem !important;
  font-weight: 900 !important;
  color: var(--aig-text) !important;
  min-width: 4rem !important;
  text-align: right !important;
  background: var(--aig-gradient-accent-primary) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Footer Stats */
.aig-leaderboard-footer {
  display: flex !important;
  justify-content: space-around !important;
  padding: 1rem 2rem !important;
  border-top: 1px solid var(--aig-border) !important;
  background: var(--aig-overlay-subtle) !important;
}

.aig-leaderboard-stat {
  text-align: center !important;
}

.aig-leaderboard-stat .aig-stat-label {
  display: block !important;
  font-size: 0.75rem !important;
  color: var(--aig-text-muted) !important;
  margin-bottom: 0.25rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  font-weight: 600 !important;
}

.aig-leaderboard-stat .aig-stat-value {
  display: block !important;
  font-size: 1.25rem !important;
  font-weight: 900 !important;
  color: var(--aig-text) !important;
  background: var(--aig-gradient-accent-primary) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Leaderboard Toggle Button */
.aig-leaderboard-toggle {
  position: relative !important;
  background: var(--aig-surface) !important;
  border: 1px solid var(--aig-border) !important;
  border-radius: 0.5rem !important;
  padding: 0.5rem 1rem !important;
  color: var(--aig-text) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  transition: var(--aig-transition) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  font-weight: 600 !important;
  text-shadow: none !important;
  box-shadow: none !important;
  width: auto !important;
  height: auto !important;
  text-decoration: none !important;
}

.aig-leaderboard-toggle svg {
  flex-shrink: 0 !important;
  color: inherit !important;
}

.aig-leaderboard-toggle:hover {
  background: var(--aig-accent) !important;
  border-color: var(--aig-accent) !important;
  color: white !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 0 20px rgba(0, 242, 234, 0.4) !important;
  text-decoration: none !important;
}

.aig-leaderboard-toggle:hover svg,
.aig-leaderboard-toggle:hover .aig-btn-label {
  color: white !important;
}

/* Responsive Leaderboard Modal */
@media (max-width: 768px) {
  .aig-leaderboard-modal {
    padding: 0 !important;
  }

  .aig-leaderboard-container {
    max-width: 100% !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    border: none !important;
  }

  .aig-leaderboard-header {
    padding: 1rem 1.25rem !important;
  }

  .aig-leaderboard-title {
    font-size: 1.35rem !important;
  }

  .aig-leaderboard-tabs {
    padding: 0.75rem 1.25rem !important;
    gap: 0.375rem !important;
  }

  .aig-leaderboard-tab {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.8rem !important;
  }

  .aig-user-rank-card {
    margin: 0.75rem 1.25rem !important;
    padding: 0.875rem !important;
  }

  .aig-user-rank-position {
    font-size: 1.5rem !important;
    min-width: 2.5rem !important;
  }

  .aig-leaderboard-list {
    padding: 0.75rem 1.25rem !important;
  }

  .aig-leaderboard-entry {
    padding: 0.75rem !important;
    gap: 0.75rem !important;
  }

  .aig-leaderboard-rank {
    min-width: 2rem !important;
    height: 2rem !important;
    font-size: 0.875rem !important;
  }

  .aig-leaderboard-avatar {
    width: 2rem !important;
    height: 2rem !important;
  }

  .aig-leaderboard-username {
    font-size: 0.875rem !important;
  }

  .aig-leaderboard-value {
    font-size: 1rem !important;
    min-width: 3rem !important;
  }

  .aig-leaderboard-footer {
    padding: 0.875rem 1.25rem !important;
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
  }

  .aig-leaderboard-stat {
    flex: 1 !important;
    min-width: calc(33.333% - 0.5rem) !important;
  }
}

/* ========================================
   PROFILE MODAL
======================================== */
.aig-profile-toggle {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  border: 2px solid var(--aig-border) !important;
  background: transparent !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  overflow: hidden !important;
}

.aig-profile-toggle:hover {
  border-color: var(--aig-primary) !important;
  box-shadow: 0 0 15px rgba(145, 71, 255, 0.4) !important;
  transform: scale(1.05) !important;
}

.aig-profile-avatar {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.aig-login-btn {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0.5rem 1rem !important;
  background: var(--aig-primary) !important;
  border: 1px solid var(--aig-primary) !important;
  border-radius: 0.5rem !important;
  color: white !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
}

.aig-login-btn:hover {
  background: var(--aig-primary-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 15px rgba(145, 71, 255, 0.4) !important;
}

.aig-profile-modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 999999 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 2rem !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

.aig-profile-modal.active {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.aig-profile-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: var(--aig-overlay-dark) !important;
  backdrop-filter: blur(8px) !important;
}

.aig-profile-container {
  position: relative !important;
  background: var(--aig-gradient-surface) !important;
  border: 2px solid var(--aig-border) !important;
  border-radius: 1.5rem !important;
  max-width: 500px !important;
  width: 100% !important;
  max-height: 90vh !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8) !important;
  animation: modalSlideIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}

.aig-profile-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 1.5rem 2rem !important;
  border-bottom: 1px solid var(--aig-border) !important;
  background: var(--aig-bg-primary-subtle) !important;
}

.aig-profile-title {
  font-size: 1.5rem !important;
  font-weight: 900 !important;
  color: var(--aig-text) !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  margin: 0 !important;
}

.aig-profile-close {
  background: transparent !important;
  border: 1px solid var(--aig-border) !important;
  color: var(--aig-text) !important;
  width: 2.5rem !important;
  height: 2.5rem !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: var(--aig-transition) !important;
  padding: 0 !important;
}

.aig-profile-close:hover {
  background: var(--aig-error) !important;
  border-color: var(--aig-error) !important;
  color: white !important;
  transform: rotate(90deg) !important;
}

.aig-profile-content {
  padding: 2rem !important;
  overflow-y: auto !important;
}

.aig-profile-avatar-section {
  text-align: center !important;
  margin-bottom: 2rem !important;
}

.aig-profile-avatar-wrapper {
  position: relative !important;
  width: 150px !important;
  height: 150px !important;
  margin: 0 auto 1rem !important;
}

.aig-profile-avatar-large {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 4px solid var(--aig-border) !important;
}

.aig-avatar-upload-btn {
  position: absolute !important;
  bottom: 5px !important;
  right: 5px !important;
  width: 40px !important;
  height: 40px !important;
  background: var(--aig-primary) !important;
  border: 2px solid var(--aig-surface) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

.aig-avatar-upload-btn:hover {
  background: var(--aig-primary-hover) !important;
  transform: scale(1.1) !important;
  box-shadow: 0 4px 15px rgba(145, 71, 255, 0.5) !important;
}

.aig-avatar-upload-btn svg {
  color: white !important;
}

.aig-avatar-upload-progress {
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.75rem !important;
  color: var(--aig-text-muted) !important;
}

.aig-avatar-upload-progress[style*="display: flex"],
.aig-avatar-upload-progress.active {
  display: flex !important;
}

.aig-profile-form .aig-form-group {
  margin-bottom: 1.5rem !important;
}

.aig-profile-form label {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  font-weight: 600 !important;
  color: var(--aig-text) !important;
  margin-bottom: 0.5rem !important;
  font-size: 0.9rem !important;
}

.aig-profile-form input {
  width: 100% !important;
  padding: 0.75rem 1rem !important;
  background: var(--aig-surface) !important;
  border: 1px solid var(--aig-border) !important;
  border-radius: 0.5rem !important;
  color: var(--aig-text) !important;
  font-size: 1rem !important;
  transition: all 0.3s ease !important;
}

.aig-profile-form input:focus {
  outline: none !important;
  border-color: var(--aig-primary) !important;
  box-shadow: 0 0 0 3px rgba(145, 71, 255, 0.1) !important;
}

.aig-profile-form input:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

.aig-profile-form small {
  display: block !important;
  margin-top: 0.375rem !important;
  color: var(--aig-text-dim) !important;
  font-size: 0.8rem !important;
}

.aig-profile-actions {
  display: flex !important;
  gap: 1rem !important;
  margin-top: 2rem !important;
}

.aig-profile-save-btn,
.aig-profile-logout-btn {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  padding: 0.875rem 1.5rem !important;
  border-radius: 0.5rem !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  border: none !important;
  text-decoration: none !important;
}

.aig-profile-save-btn {
  background: var(--aig-primary) !important;
  color: white !important;
}

.aig-profile-save-btn:hover {
  background: var(--aig-primary-hover) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 15px rgba(145, 71, 255, 0.4) !important;
}

.aig-profile-logout-btn {
  background: transparent !important;
  border: 1px solid var(--aig-border) !important;
  color: var(--aig-text) !important;
}

.aig-profile-logout-btn:hover {
  background: var(--aig-error) !important;
  border-color: var(--aig-error) !important;
  color: white !important;
}

.aig-profile-message {
  margin-top: 1rem !important;
  padding: 1rem !important;
  border-radius: 0.5rem !important;
  font-size: 0.9rem !important;
  display: none !important;
}

.aig-profile-message.success {
  display: block !important;
  background: var(--aig-bg-success-light) !important;
  color: var(--aig-success) !important;
  border: 1px solid var(--aig-success) !important;
}

.aig-profile-message.error {
  display: block !important;
  background: var(--aig-bg-error-light) !important;
  color: var(--aig-error) !important;
  border: 1px solid var(--aig-error) !important;
}

/* ========================================
   AUTH PAGE
======================================== */
.aig-auth-page {
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 2rem !important;
  position: relative !important;
  overflow: hidden !important;
  background: var(--aig-bg) !important;
}

.aig-auth-background {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
}

.aig-auth-gradient {
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(circle at 30% 50%, rgba(145, 71, 255, 0.15), transparent 50%),
              radial-gradient(circle at 70% 50%, rgba(0, 242, 234, 0.15), transparent 50%) !important;
  animation: gradientShift 10s ease-in-out infinite !important;
}

@keyframes gradientShift {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.1) rotate(5deg); }
}

.aig-auth-container {
  position: relative !important;
  z-index: 1 !important;
  background: var(--aig-gradient-surface) !important;
  border: 2px solid var(--aig-border) !important;
  border-radius: var(--aig-radius-xl) !important;
  max-width: 450px !important;
  width: 100% !important;
  padding: 3rem 2.5rem !important;
  box-shadow: var(--aig-shadow-xl) !important;
}

.aig-auth-logo {
  text-align: center !important;
  margin-bottom: 2rem !important;
}

.aig-auth-logo h1 {
  font-size: var(--aig-text-3xl) !important;
  font-weight: var(--aig-font-black) !important;
  background: var(--aig-gradient-primary-accent) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  margin: 1rem 0 0 !important;
}

.aig-auth-tabs {
  display: flex !important;
  gap: 0.5rem !important;
  margin-bottom: 2rem !important;
  background: var(--aig-overlay-subtle) !important;
  padding: 0.375rem !important;
  border-radius: var(--aig-radius-lg) !important;
}

.aig-auth-tab {
  flex: 1 !important;
  padding: 0.75rem !important;
  background: transparent !important;
  border: none !important;
  border-radius: var(--aig-radius-md) !important;
  color: var(--aig-text-muted) !important;
  font-weight: var(--aig-font-semibold) !important;
  cursor: pointer !important;
  transition: var(--aig-transition) !important;
}

.aig-auth-tab.active {
  background: var(--aig-primary) !important;
  color: white !important;
  box-shadow: var(--aig-btn-shadow) !important;
}

.aig-auth-form-container {
  display: none !important;
}

.aig-auth-form-container.active {
  display: block !important;
}

.aig-auth-form-container h2 {
  font-size: var(--aig-text-2xl) !important;
  font-weight: var(--aig-font-black) !important;
  color: var(--aig-text) !important;
  margin-bottom: 0.5rem !important;
}

.aig-auth-subtitle {
  color: var(--aig-text-muted) !important;
  margin-bottom: 2rem !important;
  font-size: var(--aig-text-sm) !important;
}

.aig-auth-form .aig-form-group {
  margin-bottom: 1.5rem !important;
}

.aig-auth-form label {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  font-weight: var(--aig-font-semibold) !important;
  color: var(--aig-text) !important;
  margin-bottom: 0.5rem !important;
  font-size: var(--aig-text-sm) !important;
}

.aig-auth-form input[type="text"],
.aig-auth-form input[type="email"],
.aig-auth-form input[type="password"] {
  width: 100% !important;
  padding: 0.875rem 1rem !important;
  background: var(--aig-surface) !important;
  border: 1px solid var(--aig-border) !important;
  border-radius: var(--aig-radius-md) !important;
  color: var(--aig-text) !important;
  font-size: var(--aig-text-base) !important;
  transition: var(--aig-transition) !important;
}

.aig-auth-form input:focus {
  outline: none !important;
  border-color: var(--aig-primary) !important;
  box-shadow: 0 0 0 3px rgba(145, 71, 255, 0.1) !important;
}

.aig-auth-form small {
  display: block !important;
  margin-top: 0.375rem !important;
  color: var(--aig-text-dim) !important;
  font-size: 0.8rem !important;
}

.aig-form-actions {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 1.5rem !important;
}

.aig-checkbox {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  cursor: pointer !important;
  font-size: 0.9rem !important;
  color: var(--aig-text) !important;
}

.aig-forgot-password {
  color: var(--aig-primary) !important;
  font-size: 0.9rem !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

.aig-forgot-password:hover {
  text-decoration: underline !important;
}

.aig-auth-submit {
  width: 100% !important;
  padding: 1rem !important;
  background: var(--aig-primary) !important;
  border: none !important;
  border-radius: var(--aig-radius-md) !important;
  color: white !important;
  font-weight: var(--aig-font-bold) !important;
  font-size: var(--aig-text-base) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  transition: var(--aig-transition) !important;
}

.aig-auth-submit:hover {
  background: var(--aig-primary-hover) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--aig-btn-shadow) !important;
}

.aig-auth-message {
  margin-top: 1rem !important;
  padding: 1rem !important;
  border-radius: var(--aig-radius-md) !important;
  font-size: var(--aig-text-sm) !important;
  display: none !important;
}

.aig-auth-message.success {
  display: block !important;
  background: var(--aig-bg-success-light) !important;
  color: var(--aig-success) !important;
  border: 1px solid var(--aig-success) !important;
}

.aig-auth-message.error {
  display: block !important;
  background: var(--aig-bg-error-light) !important;
  color: var(--aig-error) !important;
  border: 1px solid var(--aig-error) !important;
}

/* Google OAuth Button */
.aig-auth-divider {
  display: flex !important;
  align-items: center !important;
  text-align: center !important;
  margin: 1.5rem 0 !important;
}

.aig-auth-divider::before,
.aig-auth-divider::after {
  content: '' !important;
  flex: 1 !important;
  border-bottom: 1px solid var(--aig-border) !important;
}

.aig-auth-divider span {
  padding: 0 1rem !important;
  color: var(--aig-text-muted) !important;
  font-size: 0.875rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

.aig-auth-google {
  width: 100% !important;
  padding: 0.875rem 1rem !important;
  background: white !important;
  background-color: white !important;
  background-image: none !important;
  border: 1px solid #dadce0 !important;
  border-radius: 0.5rem !important;
  color: #3c4043 !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.75rem !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
  text-decoration: none !important;
  outline: none !important;
}

.aig-auth-google svg {
  flex-shrink: 0 !important;
  width: 18px !important;
  height: 18px !important;
}

.aig-auth-google:hover {
  background: #f8f9fa !important;
  background-color: #f8f9fa !important;
  border-color: #c6c8ca !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
  transform: translateY(-1px) !important;
}

.aig-auth-google:active {
  background: #f1f3f4 !important;
  background-color: #f1f3f4 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
  transform: translateY(0) !important;
}

.aig-auth-resend-section {
  margin-top: 2rem !important;
  padding: 2rem !important;
  background: var(--aig-surface-light) !important;
  border-radius: var(--aig-radius-lg) !important;
  border: 1px solid var(--aig-border) !important;
}

.aig-auth-resend-section .aig-auth-subtitle {
  margin-bottom: 1.5rem !important;
  color: var(--aig-text-muted) !important;
  text-align: center !important;
}

.aig-resend-form {
  max-width: 400px !important;
  margin: 0 auto !important;
}

.aig-auth-footer {
  text-align: center !important;
  margin-top: 2rem !important;
  padding-top: 2rem !important;
  border-top: 1px solid var(--aig-border) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
}

.aig-auth-footer a,
.aig-auth-footer button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  color: var(--aig-text-muted) !important;
  text-decoration: none !important;
  font-size: 0.9rem !important;
  transition: color 0.3s ease !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  padding: 0.5rem !important;
}

.aig-auth-footer a:hover,
.aig-auth-footer button:hover {
  color: var(--aig-primary) !important;
}

.aig-resend-toggle {
  font-weight: 500 !important;
}

@media (max-width: 768px) {
  .aig-profile-modal {
    padding: 0 !important;
  }

  .aig-profile-container {
    max-width: 100% !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    border: none !important;
  }

  .aig-auth-page {
    padding: 1rem !important;
  }

  .aig-auth-container {
    padding: 2rem 1.5rem !important;
  }
}

/* Access Denied Message Styles */
.aig-access-denied {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 70vh;
  padding: 3rem 2rem;
  text-align: center;
}

.aig-access-denied h3 {
  font-size: var(--aig-text-4xl);
  font-weight: var(--aig-font-semibold);
  color: var(--aig-text);
  margin: 0 0 1rem 0;
}

.aig-access-denied p {
  font-size: var(--aig-text-lg);
  color: var(--aig-text-muted);
  margin: 0 0 2rem 0;
  line-height: 1.6;
}

.aig-login-btn {
  display: inline-block;
  padding: 12px 32px;
  font-size: var(--aig-text-base);
  font-weight: var(--aig-font-medium);
  color: var(--aig-text);
  background: var(--aig-primary);
  border: none;
  border-radius: var(--aig-radius-md);
  text-decoration: none;
  transition: var(--aig-transition-fast);
}

.aig-login-btn:hover {
  background: var(--aig-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--aig-shadow-md);
  text-decoration: none;
  color: var(--aig-text);
}

@media (max-width: 768px) {
  .aig-access-denied {
    min-height: 60vh;
    padding: 2rem 1.5rem;
  }

  .aig-access-denied h3 {
    font-size: var(--aig-text-2xl);
  }

  .aig-access-denied p {
    font-size: var(--aig-text-base);
  }

  /* Webcam mobile fixes */
  .aig-webcam-overlay {
    padding: 1rem !important;
  }

  .aig-webcam-canvas {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;
    border-radius: 0.5rem !important;
  }

  .aig-webcam-controls {
    position: fixed !important;
    bottom: 130px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    padding: 0.5rem 0.75rem !important;
    gap: 0.5rem !important;
    z-index: 40 !important;
  }

  .aig-webcam-control-btn {
    width: 2rem !important;
    height: 2rem !important;
    min-width: 2rem !important;
    min-height: 2rem !important;
  }

  .aig-webcam-control-btn svg {
    width: 16px !important;
    height: 16px !important;
  }

  div#aig-current-prompt {
    width: 40ch;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

}

/* ========================================
   CUSTOM SCROLLBARS
======================================== */

/* Webkit browsers (Chrome, Safari, Edge) */
.aig-fullscreen-container *::-webkit-scrollbar,
.aig-history-sidebar::-webkit-scrollbar,
.aig-history-content::-webkit-scrollbar,
.aig-achievements-container::-webkit-scrollbar,
.aig-leaderboard-container::-webkit-scrollbar,
.aig-profile-container::-webkit-scrollbar,
.aig-auth-container::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.aig-fullscreen-container *::-webkit-scrollbar-track,
.aig-history-sidebar::-webkit-scrollbar-track,
.aig-history-content::-webkit-scrollbar-track,
.aig-achievements-container::-webkit-scrollbar-track,
.aig-leaderboard-container::-webkit-scrollbar-track,
.aig-profile-container::-webkit-scrollbar-track,
.aig-auth-container::-webkit-scrollbar-track {
  background: var(--aig-surface);
  border-radius: var(--aig-radius-full);
  margin: 2px;
}

.aig-fullscreen-container *::-webkit-scrollbar-thumb,
.aig-history-sidebar::-webkit-scrollbar-thumb,
.aig-history-content::-webkit-scrollbar-thumb,
.aig-achievements-container::-webkit-scrollbar-thumb,
.aig-leaderboard-container::-webkit-scrollbar-thumb,
.aig-profile-container::-webkit-scrollbar-thumb,
.aig-auth-container::-webkit-scrollbar-thumb {
  background: var(--aig-border);
  border-radius: var(--aig-radius-full);
  border: 2px solid var(--aig-surface);
  transition: var(--aig-transition-fast);
}

.aig-fullscreen-container *::-webkit-scrollbar-thumb:hover,
.aig-history-sidebar::-webkit-scrollbar-thumb:hover,
.aig-history-content::-webkit-scrollbar-thumb:hover,
.aig-achievements-container::-webkit-scrollbar-thumb:hover,
.aig-leaderboard-container::-webkit-scrollbar-thumb:hover,
.aig-profile-container::-webkit-scrollbar-thumb:hover,
.aig-auth-container::-webkit-scrollbar-thumb:hover {
  background: var(--aig-primary);
  border-color: var(--aig-surface);
}

.aig-fullscreen-container *::-webkit-scrollbar-thumb:active,
.aig-history-sidebar::-webkit-scrollbar-thumb:active,
.aig-history-content::-webkit-scrollbar-thumb:active,
.aig-achievements-container::-webkit-scrollbar-thumb:active,
.aig-leaderboard-container::-webkit-scrollbar-thumb:active,
.aig-profile-container::-webkit-scrollbar-thumb:active,
.aig-auth-container::-webkit-scrollbar-thumb:active {
  background: var(--aig-primary-hover);
}

/* Firefox */
.aig-fullscreen-container *,
.aig-history-sidebar,
.aig-history-content,
.aig-achievements-container,
.aig-leaderboard-container,
.aig-profile-container,
.aig-auth-container {
  scrollbar-width: thin;
  scrollbar-color: var(--aig-border) var(--aig-surface);
}

/* Scrollbar hover state for Firefox - using focus-within for interactive effect */
.aig-fullscreen-container:hover *,
.aig-history-sidebar:hover,
.aig-history-content:hover,
.aig-achievements-container:hover,
.aig-leaderboard-container:hover,
.aig-profile-container:hover,
.aig-auth-container:hover {
  scrollbar-color: var(--aig-primary) var(--aig-surface);
}