/* 
   PLAYLIST VISION REWARD MODAL - COMPLETE SYSTEM
   Comprehensive CSS for playlist-modal-manager.js architecture
   Supports: vision content, gamification grids, responsive design, progress states
*/




/* 
   PLAYLIST VISION REWARD MODAL - Consolidated System
   All styles for playlist-specific vision rewards
*/

/* ========================================
   MODAL BASE STRUCTURE - ESSENTIAL
   ======================================== */

.modal-vision-card-container {
  position: relative;
  background: white;
  border-radius: 24px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.1);
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* FIX: Size to content instead of fixed width */
  max-width: min(95vw, 1200px);
  
  /* FIX: Center the container */
  margin: 0 auto;
  
  /* Dynamic border glow based on progress */
  border: 2px solid transparent;
}

.vision-reward-modal.show .modal-vision-card-container {
  transform: scale(1);
}

.modal-vision-content .quote-content {
  font-size: clamp(1.5rem, 4vw, 3rem);
  text-align: center;
  line-height: 1.4;
  padding: 2rem;
  color: var(--color-dark);
  font-weight: 600;
}

/* ========================================
   VISION REWARD MODAL BASE
   ======================================== */

.vision-reward-modal.show {
  opacity: 1;
}

.vision-reward-modal-content {
  background: white;
  border-radius: var(--modal-border-radius);
  box-shadow: var(--modal-shadow);
  width: auto;
  min-width: 400px;
  max-width: calc(100vw - 2rem);
  max-height: calc(100vh - 4rem);
  display: flex;
  flex-direction: column;
  transform: scale(0.9);
  transition: transform 0.3s ease;
  overflow: hidden;
}

.vision-reward-modal.show .vision-reward-modal-content {
  transform: scale(1);
}

/* ========================================
   MODAL HEADER
   ======================================== */

.vision-card-frame.modal-vision-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md);
  border-bottom: 1px solid var(--color-border-light);
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  white-space: nowrap;
  flex-shrink: 0;
}

.vision-card-frame.modal-vision-card h2 {
  margin: 0;
  color: var(--color-dark);
  font-size: var(--size-xl);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* ========================================
   MODAL BODY AND CONTENT WRAPPER
   ======================================== */

.vision-reward-modal-body {
  padding: var(--modal-padding);
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 0;
}

.modal-achieve-vision-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.modal-vision-content .reddit-image-container img,
.modal-vision-content .reddit-gallery-container img,
.modal-vision-content .reddit-post-container img {
  object-fit: cover;
}

.modal-vision-content .quote-content {
  font-size: clamp(1.5rem, 4vw, 3rem);
  text-align: center;
  line-height: 1.4;
  padding: 2rem;
  color: var(--color-dark);
  font-weight: 600;
}

/* ========================================
   CLOSE BUTTON - OVERLAY POSITIONING
   ======================================== */

/* Close button for composite modal */
.close-vision-modal {
  position: absolute !important;
  top: 15px !important;
  right: 15px !important;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  z-index: 4000;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  backdrop-filter: blur(4px);
}

.close-vision-modal:hover {
  background: rgba(0, 0, 0, 0.9);
  transform: scale(1.1);
}

/* Progress-based color classes - matching container glow */
.close-vision-modal.progress-low {
  background: linear-gradient(135deg, #3b82f6, #60a5fa);
  border: 2px solid transparent;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

.close-vision-modal.progress-medium {
  background: linear-gradient(135deg, #10b981, #34d399);
  border: 2px solid transparent;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
}

.close-vision-modal.progress-high {
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  border: 2px solid transparent;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
}

.close-vision-modal.progress-complete {
  background: linear-gradient(135deg, #f59e0b, #fbbf24, #f59e0b);
  border: 2px solid transparent;
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.6);
  animation: completionPulse 2s ease-in-out infinite;
}

.close-vision-modal.progress-low:hover {
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.7);
  transform: scale(1.1);
}

.close-vision-modal.progress-medium:hover {
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.7);
  transform: scale(1.1);
}

.close-vision-modal.progress-high:hover {
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.7);
  transform: scale(1.1);
}

.close-vision-modal.progress-complete:hover {
  box-shadow: 0 0 25px rgba(245, 158, 11, 0.8);
  transform: scale(1.1);
}

/* ========================================
   PROGRESS INDICATOR
   ======================================== */

.modal-progress-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-md);
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(8px);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  text-align: center;
  z-index: 300;
}

.modal-progress-text {
  font-size: var(--size-sm);
  color: white;
  font-weight: 600;
  margin-bottom: var(--space-sm);
}

.modal-progress-bar {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  overflow: hidden;
}

.modal-progress-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.8s ease, background 0.8s ease;
}

.modal-progress-fill.stage-blue {
  background: var(--progress-blue);
}

.modal-progress-fill.stage-blue-green {
  background: linear-gradient(90deg, var(--progress-blue) 0%, var(--progress-green) 100%);
}

.modal-progress-fill.stage-full {
  background: linear-gradient(90deg, var(--progress-blue) 0%, var(--progress-green) 50%, var(--progress-yellow) 100%);
}

/* ========================================
   STATUS GLOW BORDER SYSTEM
   ======================================== */

.modal-vision-card-container.progress-low {
  background: linear-gradient(white, white) padding-box, 
              linear-gradient(135deg, #3b82f6, #60a5fa) border-box;
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}

.modal-vision-card-container.progress-medium {
  background: linear-gradient(white, white) padding-box, 
              linear-gradient(135deg, #10b981, #34d399) border-box;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
}

.modal-vision-card-container.progress-high {
  background: linear-gradient(white, white) padding-box, 
              linear-gradient(135deg, #f59e0b, #fbbf24) border-box;
  box-shadow: 0 0 25px rgba(245, 158, 11, 0.4);
}

.modal-vision-card-container.progress-complete {
  background: linear-gradient(white, white) padding-box, 
              linear-gradient(135deg, #f59e0b, #fbbf24, #f59e0b) border-box;
  box-shadow: 0 0 30px rgba(245, 158, 11, 0.6), 
              0 0 60px rgba(245, 158, 11, 0.3);
  animation: completionPulse 2s ease-in-out infinite;
}

@keyframes completionPulse {
  0%, 100% { 
    box-shadow: 0 0 30px rgba(245, 158, 11, 0.6), 
                0 0 60px rgba(245, 158, 11, 0.3);
  }
  50% { 
    box-shadow: 0 0 40px rgba(245, 158, 11, 0.8), 
                0 0 80px rgba(245, 158, 11, 0.4);
  }
}

/* ========================================
   MOBILE RESPONSIVENESS
   ======================================== */

@media (max-width: 768px) {  
  .vision-reward-modal-content {
    width: calc(100vw - 1rem);
    max-height: calc(100vh - 2rem);
    min-width: 0;
  }
  
  .vision-reward-modal-body {
    padding: var(--modal-padding-mobile);
  }
  
  .modal-vision-content .quote-content {
    font-size: clamp(1.2rem, 6vw, 2rem);
    padding: 1rem;
  }

  .close-vision-modal {
    width: 28px;
    height: 28px;
    font-size: 16px;
    top: 8px;
    right: 8px;
  }
}

@media (max-width: 480px) {
  .vision-reward-modal-content {
    width: calc(100vw - 1rem);
    border-radius: var(--radius-sm);
  }

  .close-vision-modal {
    width: 24px;
    height: 24px;
    font-size: 14px;
    top: 6px;
    right: 6px;
  }
}

/* Modal vision content styling */
.modal-vision-image {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.modal-youtube-container {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.modal-youtube-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
}

.modal-youtube-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.modal-embed-container,
.reddit-gallery-container,
.reddit-image-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.modal-embed-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* Default 16:9, can be overridden */
  height: 0;
  overflow: hidden;
}

.modal-embed-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Clean Reddit image display in modal */
.modal-reddit-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.reddit-content-fallback {
  padding: 2rem;
  text-align: center;
  color: #666;
  font-style: italic;
}

.modal-reddit-image {
  height: auto;
  display: block;
  margin: 0 auto;
}

.modal-generic-content {
  margin: 0 auto;
}

.modal-media-element {
  height: auto;
  display: block;
}

/* ========================================
   COMPOSITE MODAL LAYOUT - SPRINT 1
   ======================================== */

/* Main Modal Overlay */
#visionRewardModal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.8);
  backdrop-filter: blur(8px);
  display: none; /* Changed by JS to 'flex' */
  align-items: center;
  justify-content: center;
  z-index: 3000;
  padding: 5vh 5vw; /* Responsive padding */
}

/* The existing modal card, adapted for the container */
.modal-vision-container .modal-vision-card-container {
  width: 100%;
  height: 100%;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

/* ========================================
   VISION CONTENT SIZING & LAYOUT FIXES
   ======================================== */

/* Ensure vision container fills its space properly */
.modal-vision-container {
  position: relative; /* For absolute positioned progress indicator */
  background: #f8f9fa;
}

.modal-vision-container .modal-vision-card-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

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

/* Image sizing in modal */
.modal-vision-content img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Quote content styling */
.modal-vision-content .quote-content {
  font-size: clamp(1.5rem, 4vw, 3rem);
  text-align: center;
  line-height: 1.4;
  color: var(--color-dark);
  font-weight: 600;
  width: 100%;
}

/* Reddit content styling */
.modal-reddit-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* YouTube container styling */
.modal-youtube-container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.modal-youtube-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
}

.modal-youtube-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* FLIP Animation Enhancement */
@keyframes modalReveal {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Enhanced backdrop animation */
.vision-reward-modal {
  animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
  from { 
    opacity: 0; 
    backdrop-filter: blur(0px);
  }
  to { 
    opacity: 1; 
    backdrop-filter: blur(12px);
  }
}

/* Vision Modal Close Button Overlay */
.close-vision-modal {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  backdrop-filter: blur(4px);
}

.close-vision-modal:hover {
  transform: scale(1.1);
  backdrop-filter: blur(6px);
}

/* Progress-based color classes */
.close-vision-modal.progress-low {
  background: rgba(0, 123, 255, 0.8); /* Blue */
  border: 2px solid rgba(0, 123, 255, 0.6);
}

.close-vision-modal.progress-medium {
  background: rgba(40, 167, 69, 0.8); /* Green */
  border: 2px solid rgba(40, 167, 69, 0.6);
}

.close-vision-modal.progress-high {
  background: rgba(255, 193, 7, 0.8); /* Gold */
  border: 2px solid rgba(255, 193, 7, 0.6);
}

.close-vision-modal.progress-low:hover {
  background: rgba(0, 123, 255, 0.9);
}

.close-vision-modal.progress-medium:hover {
  background: rgba(40, 167, 69, 0.9);
}

.close-vision-modal.progress-high:hover {
  background: rgba(255, 193, 7, 0.9);
}

/* ========================================
   VISION REWARD MODAL
   ======================================== */

.vision-reward-modal.show {
  opacity: 1;
}

.vision-reward-modal-content {
  background: white;
  border-radius: var(--modal-border-radius);
  box-shadow: var(--modal-shadow);
  width: auto; /* Changed from fixed width */
  min-width: 400px; /* Minimum for header readability */
  max-width: calc(100vw - 2rem); /* Constraint for large content */
  max-height: calc(100vh - 4rem);
  display: flex;
  flex-direction: column;
  transform: scale(0.9);
  transition: transform 0.3s ease;
  overflow: hidden;
}

.vision-reward-modal.show .vision-reward-modal-content {
  transform: scale(1);
}

.vision-card-frame.modal-vision-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md);
  border-bottom: 1px solid var(--color-border-light);
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  white-space: nowrap;
  flex-shrink: 0;
}

.vision-card-frame.modal-vision-card h2 {
  margin: 0;
  color: var(--color-dark);
  font-size: var(--size-xl);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.close-vision-modal {
  background: var(--close-btn-bg);
  border: none;
  width: var(--close-btn-size);
  height: var(--close-btn-size);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--close-btn-color);
  font-size: 1.2rem;
  transition: all 0.2s ease;
  margin: 0;
}

.close-vision-modal:hover {
  background: var(--close-btn-bg-hover);
  color: var(--close-btn-color-hover);
  transform: scale(1.1);
}

.vision-reward-modal-body {
  padding: var(--modal-padding);
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* Changed from center to flex-start */
  min-height: 0; /* Allow shrinking */
}

.modal-vision-content .quote-content {
  font-size: clamp(1.5rem, 4vw, 3rem);
  text-align: center;
  line-height: 1.4;
  padding: 2rem;
  color: var(--color-dark);
  font-weight: 600;
}





/* ========================================
   CSS CUSTOM PROPERTIES - DESIGN TOKENS
   ======================================== */

:root {
  /* Modal sizing and spacing */
  --modal-max-width: min(95vw, 1200px);
  --modal-max-height: min(90vh, 800px);
  --modal-gap: 2rem;
  --modal-border-radius: 24px;
  --modal-padding: 2rem;
  --modal-padding-mobile: 1rem;
  
  /* Z-index layers */
  --modal-backdrop-z: 3000;
  --modal-content-z: 3001;
  --modal-close-btn-z: 3002;
  --grid-overlay-z: 150;
  --grid-cells-z: 200;
  
  /* Animation timing */
  --modal-transition-duration: 300ms;
  --modal-transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
  --grid-transition-duration: 400ms;
  
  /* Progress state colors */
  --progress-blue: #3b82f6;
  --progress-blue-light: #60a5fa;
  --progress-green: #10b981;
  --progress-green-light: #34d399;
  --progress-yellow: #f59e0b;
  --progress-yellow-light: #fbbf24;
  
  /* Grid overlay colors */
  --grid-cell-bg: rgba(0, 0, 0, 0.85);
  --grid-cell-hover: rgba(0, 123, 255, 0.8);
  --grid-cell-border: rgba(0, 0, 0, 0.1);
  
  /* Vision content styling */
  --vision-text-color: var(--color-dark, #1a1a1a);
  --vision-bg: white;
  --vision-border-radius: 12px;
}

/* ========================================
   MODAL BACKDROP AND CONTAINER
   ======================================== */

.vision-reward-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.8);
  backdrop-filter: blur(12px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: var(--modal-backdrop-z);
  padding: 2rem;
  opacity: 0;
  transition: opacity var(--modal-transition-duration) ease;
}

.vision-reward-modal.show {
  display: flex;
  opacity: 1;
}

.vision-reward-modal.closing {
  opacity: 0;
  transition: opacity 200ms ease;
}

/* ========================================
   MODAL COMPOSITE CONTAINER
   ======================================== */

.modal-composite-container {
  display: flex;
  height: 95vh;
  flex-direction: row;
  background: var(--vision-bg);
  border-radius: var(--modal-border-radius);
  box-shadow: 
    0 25px 50px -12px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.1);
  overflow: hidden;
  position: relative;
  transform: scale(0.95);
  transition: transform var(--modal-transition-duration) var(--modal-transition-timing);
}

.vision-reward-modal.show .modal-composite-container {
  transform: scale(1);
}

/* ========================================
   CLOSE BUTTON
   ======================================== */

.close-vision-modal {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  z-index: var(--modal-close-btn-z);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--modal-transition-duration) ease;
  backdrop-filter: blur(4px);
  border: 2px solid transparent;
}

.close-vision-modal:hover {
  background: rgba(0, 0, 0, 0.9);
  transform: scale(1.1);
}

.close-vision-modal:focus {
  outline: 2px solid var(--progress-blue);
  outline-offset: 2px;
}

/* Progress state styling for close button */
.close-vision-modal.progress-low {
  background: linear-gradient(135deg, var(--progress-blue), var(--progress-blue-light));
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
}

.close-vision-modal.progress-medium {
  background: linear-gradient(135deg, var(--progress-green), var(--progress-green-light));
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.5);
}

.close-vision-modal.progress-high {
  background: linear-gradient(135deg, var(--progress-yellow), var(--progress-yellow-light));
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.5);
}

.close-vision-modal.progress-complete {
  background: linear-gradient(135deg, var(--progress-yellow), var(--progress-yellow-light), var(--progress-yellow));
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.6);
  animation: completionPulse 2s ease-in-out infinite;
}

/* ========================================
   VISION CONTAINER
   ======================================== */

.modal-vision-container {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  background: #f8f9fa;
  border-radius: var(--vision-border-radius) 0 0 var(--vision-border-radius);
}

.modal-vision-card-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  border-radius: var(--vision-border-radius);
  overflow: visible;
  background: var(--vision-bg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: 2px solid transparent;
  transition: 
    box-shadow var(--modal-transition-duration) ease,
    border-color var(--modal-transition-duration) ease;
}

/* Progress state border glow for vision container */
.modal-vision-card-container.progress-low {
  background: linear-gradient(var(--vision-bg), var(--vision-bg)) padding-box, 
              linear-gradient(135deg, var(--progress-blue), var(--progress-blue-light)) border-box;
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}

.modal-vision-card-container.progress-medium {
  background: linear-gradient(var(--vision-bg), var(--vision-bg)) padding-box, 
              linear-gradient(135deg, var(--progress-green), var(--progress-green-light)) border-box;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
}

.modal-vision-card-container.progress-high {
  background: linear-gradient(var(--vision-bg), var(--vision-bg)) padding-box, 
              linear-gradient(135deg, var(--progress-yellow), var(--progress-yellow-light)) border-box;
  box-shadow: 0 0 25px rgba(245, 158, 11, 0.4);
}

.modal-vision-card-container.progress-complete {
  background: linear-gradient(var(--vision-bg), var(--vision-bg)) padding-box, 
              linear-gradient(135deg, var(--progress-yellow), var(--progress-yellow-light), var(--progress-yellow)) border-box;
  box-shadow: 
    0 0 30px rgba(245, 158, 11, 0.6), 
    0 0 60px rgba(245, 158, 11, 0.3);
  animation: completionPulse 2s ease-in-out infinite;
}

/* ========================================
   VISION CONTENT DISPLAY
   ======================================== */

.modal-vision-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border-radius: var(--vision-border-radius);
  transition: filter 0.5s ease-in-out;
  padding: 0; /* Remove any padding */
}

/* Vision content filter states */
.modal-vision-content.greyscale {
  filter: grayscale(100%) contrast(33%) opacity(67%);
}

.modal-vision-content.complete {
  filter: none;
}

/* Text/Quote content */
.modal-vision-content .quote-content,
.modal-vision-text-content {
  font-size: clamp(1.5rem, 4vw, 3rem);
  text-align: center;
  line-height: 1.4;
  padding: 2rem;
  color: var(--vision-text-color);
  font-weight: 600;
  width: 100%;
  max-width: 800px;
}

/* Image content containers */
.modal-vision-image-content img,
.modal-vision-content img,
.modal-reddit-image {
  height: 100%;
  width: auto;  /* Let width adjust to maintain aspect ratio */
  min-width: 100%;  /* Ensure it's at least as wide as container */
  object-fit: none;  /* Maintain aspect ratio */
  border-radius: 8px;
  display: block;
  position: relative;
}

/* YouTube content */
.modal-youtube-container {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.modal-youtube-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  border-radius: 8px;
}

.modal-youtube-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 8px;
}

/* Reddit content */
.modal-reddit-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.modal-reddit-image {
  max-width: 100%;
  max-height: 70vh;
  height: auto;
  width: auto;
  object-fit: contain;
  border-radius: 8px;
}

/* Generic/Embed content */
.modal-generic-content {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 1rem;
}

.modal-embed-container {
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
}

.modal-embed-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 8px;
}

.modal-embed-iframe,
.modal-media-element {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 8px;
}

/* ========================================
   GAMIFICATION GRID OVERLAY
   ======================================== */

.gp-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--grid-overlay-z);
  pointer-events: auto;
  border-radius: var(--vision-border-radius);
}

.gp-filter {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: auto;
  z-index: var(--grid-overlay-z);
  background-image: 
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 1px,
      rgba(255,255,255,0.02) 1px,
      rgba(255,255,255,0.02) 2px
    );
  transition: 
    backdrop-filter var(--modal-transition-duration) ease-out, 
    opacity var(--modal-transition-duration) ease-out;
  opacity: 1;
  border-radius: var(--vision-border-radius);
}

.gp-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  pointer-events: auto;
  z-index: var(--grid-cells-z);
  gap: 0;
  border-radius: var(--vision-border-radius);
}

.gp-cell {
  background: var(--grid-cell-bg);
  border: 1px solid var(--grid-cell-border);
  opacity: 1;
  transition: all var(--grid-transition-duration) ease;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gp-cell:hover {
  background: var(--grid-cell-hover);
  box-shadow: inset 0 0 10px rgba(0, 123, 255, 0.3);
  transform: scale(0.95);
}

.gp-cell:active {
  transform: scale(0.9);
}

.gp-cell.cleared {
  opacity: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
}

/* Progress-based hover states */
.modal-vision-card-container.progress-low .gp-cell:hover {
  background: rgba(59, 130, 246, 0.8);
  box-shadow: inset 0 0 10px rgba(59, 130, 246, 0.3);
}

.modal-vision-card-container.progress-medium .gp-cell:hover {
  background: rgba(16, 185, 129, 0.8);
  box-shadow: inset 0 0 10px rgba(16, 185, 129, 0.3);
}

.modal-vision-card-container.progress-high .gp-cell:hover {
  background: rgba(245, 158, 11, 0.8);
  box-shadow: inset 0 0 10px rgba(245, 158, 11, 0.3);
}

.modal-vision-card-container.progress-complete .gp-cell:hover {
  background: rgba(245, 158, 11, 0.85);
  box-shadow: inset 0 0 15px rgba(245, 158, 11, 0.4);
}

/* ========================================
   PROGRESS INDICATOR
   ======================================== */

.modal-progress-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(8px);
  border-radius: 0 0 var(--vision-border-radius) var(--vision-border-radius);
  text-align: center;
  z-index: calc(var(--grid-cells-z) + 50);
}

.modal-progress-text {
  font-size: 0.9rem;
  color: white;
  font-weight: 600;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.modal-progress-bar {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  overflow: hidden;
}

.modal-progress-fill {
  height: 100%;
  border-radius: 4px;
  transition: 
    width 0.8s ease, 
    background 0.8s ease;
  width: 0%;
}

.modal-progress-fill.stage-blue {
  background: var(--progress-blue);
}

.modal-progress-fill.stage-blue-green {
  background: linear-gradient(90deg, var(--progress-blue) 0%, var(--progress-green) 100%);
}

.modal-progress-fill.stage-full {
  background: linear-gradient(90deg, var(--progress-blue) 0%, var(--progress-green) 50%, var(--progress-yellow) 100%);
}

/* ========================================
   PLAYLIST CONTAINER
   ======================================== */

.modal-playlist-container {
  flex: 1;
  height: 100%;
  overflow: hidden;
  display: flex;
  overflow: clip; /* Crucial for containing content */
  align-items: center;
  justify-content: center;
  position: relative;
  background: #f8f9fa;
  border-radius: 0 var(--vision-border-radius) var(--vision-border-radius) 0;
}

/* Composite Container for the two panels */
.modal-vision-container {
  flex: 1;
  height: 100%;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Playlist element when in modal */
.modal-playlist-container .playlist-item.in-modal,
.modal-playlist-container .trackable-item.in-modal {
  width: 100%;
  height: 100%;
  margin: 0;
  transform: none;
  font-size: 1.2rem;
  background: rgba(0, 123, 255, 0.05);
  transition: transform 0.6s var(--modal-transition-timing);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ========================================
   THUMBNAIL STYLES
   ======================================== */

.vision-thumbnail-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.vision-thumbnail-card {
  width: 100px;
  height: 100px;
  border-radius: 12px;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border: 2px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--modal-transition-duration) ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
}

.vision-thumbnail-card:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 25px rgba(0, 123, 255, 0.2);
  border-color: var(--progress-blue);
}

.vision-thumbnail-card:focus {
  outline: 2px solid var(--progress-blue);
  outline-offset: 2px;
}

/* Thumbnail content */
.thumbnail-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
}

.thumbnail-vision-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.thumbnail-vision-content img,
.thumbnail-vision-content iframe,
.thumbnail-vision-content video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.thumbnail-quote-content {
  font-size: 0.7rem;
  text-align: center;
  line-height: 1.2;
  padding: 0.5rem;
  color: var(--vision-text-color);
  font-weight: 600;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

/* Thumbnail progress states */
.vision-thumbnail-card.progress-low {
  filter: grayscale(80%) brightness(60%);
}

.vision-thumbnail-card.progress-medium {
  filter: grayscale(50%) brightness(80%);
}

.vision-thumbnail-card.progress-high {
  filter: grayscale(20%) brightness(90%);
}

.vision-thumbnail-card.progress-complete {
  filter: none;
  animation: thumbnailComplete 0.8s ease-out;
  border-color: var(--progress-green);
}

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

@media (max-width: 1024px) {
  .modal-composite-container {
    flex-direction: column;
  }
  
  /* Make playlist container only as tall as its content */
  .modal-playlist-container {
    flex: 0 0 auto; /* Don't grow, don't shrink, size to content */
    height: auto; /* Remove fixed height */
    min-height: fit-content;
    max-height: 40vh; /* Prevent it from taking too much space */
    overflow-y: auto; /* Allow scrolling if content is too tall */
  }
  
  /* Make vision container take remaining space */
  .modal-vision-container {
    flex: 1; /* Take all remaining space */
    height: auto;
    min-height: 0; /* Allow shrinking */
  }
  
  .modal-vision-container,
  .modal-playlist-container {
    border-radius: var(--vision-border-radius);
  }
}

@media (max-width: 768px) {
  :root {
    --modal-padding: var(--modal-padding-mobile);
    --modal-gap: 1rem;
  }
  
  .vision-reward-modal {
    padding: 1rem;
  }
  
  .modal-vision-content .quote-content,
  .modal-vision-text-content {
    font-size: clamp(1.2rem, 6vw, 2rem);
    padding: 1rem;
  }

  .close-vision-modal {
    width: 32px;
    height: 32px;
    font-size: 18px;
    top: 10px;
    right: 10px;
  }
  
  .vision-thumbnail-card {
    width: 80px;
    height: 80px;
  }
  
  .thumbnail-quote-content {
    font-size: 0.6rem;
    padding: 0.3rem;
  }
}

@media (max-width: 480px) {
  .vision-reward-modal {
    padding: 0.5rem;
  }
  
  .modal-composite-container {
    border-radius: 12px;
  }

  .close-vision-modal {
    width: 28px;
    height: 28px;
    font-size: 16px;
    top: 8px;
    right: 8px;
  }
  
  .vision-thumbnail-card {
    width: 70px;
    height: 70px;
  }
}

/* ========================================
   ANIMATIONS
   ======================================== */

@keyframes completionPulse {
  0%, 100% { 
    box-shadow: 
      0 0 30px rgba(245, 158, 11, 0.6), 
      0 0 60px rgba(245, 158, 11, 0.3);
  }
  50% { 
    box-shadow: 
      0 0 40px rgba(245, 158, 11, 0.8), 
      0 0 80px rgba(245, 158, 11, 0.4);
  }
}

@keyframes thumbnailComplete {
  0% { 
    transform: scale(1) rotate(0deg); 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
  25% { 
    transform: scale(1.1) rotate(2deg); 
    box-shadow: 0 8px 25px rgba(40, 167, 69, 0.3);
  }
  50% { 
    transform: scale(1.05) rotate(-1deg); 
    box-shadow: 0 12px 35px rgba(40, 167, 69, 0.4);
  }
  75% { 
    transform: scale(1.08) rotate(1deg); 
    box-shadow: 0 8px 25px rgba(40, 167, 69, 0.3);
  }
  100% { 
    transform: scale(1) rotate(0deg); 
    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.2);
  }
}

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

@keyframes fadeIn {
  from { 
    opacity: 0; 
    backdrop-filter: blur(0px);
  }
  to { 
    opacity: 1; 
    backdrop-filter: blur(12px);
  }
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  .vision-thumbnail-card,
  .close-vision-modal,
  .gp-cell,
  .modal-vision-card-container,
  .modal-composite-container {
    transition: none;
    animation: none;
  }
  
  @keyframes completionPulse {
    to { transform: none; }
  }
  
  @keyframes thumbnailComplete {
    to { transform: none; }
  }
  
  @keyframes modalReveal {
    to { transform: none; }
  }
  
  @keyframes fadeIn {
    to { transform: none; }
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --vision-bg: #1a1a1a;
    --vision-text-color: #f0f0f0;
  }
  
  .modal-composite-container {
    background: var(--vision-bg);
    box-shadow: 
      0 25px 50px -12px rgba(0, 0, 0, 0.5),
      0 0 0 1px rgba(255, 255, 255, 0.05);
  }
  
  .modal-vision-container,
  .modal-playlist-container {
    background: #2a2a2a;
  }
}

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

.modal-hidden {
  display: none !important;
}

.modal-visible {
  display: flex !important;
}

.no-scroll {
  overflow: hidden !important;
}

/* Hardware acceleration for smooth animations */
.gpu-accelerated {
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Remove will-change after animations complete */
.animation-complete {
  will-change: auto;
}