/**
 * Youth UI/UX Modernization
 * Encouraging Messages System Styles
 * 
 * Styles for context-appropriate encouragement, personalized messages,
 * and motivational quotes.
 * 
 * Requirements: 23.1, 23.2, 23.3, 23.4
 */

/* ===================================
   Encouraging Message Base Styles
   =================================== */

.encouraging-message {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  line-height: var(--line-height-relaxed);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--color-primary-50), var(--color-secondary-50));
  border-left: 4px solid var(--color-primary-500);
  margin: var(--space-4) 0;
  animation: fadeIn var(--duration-base) var(--ease-out);
}

[data-theme="dark"] .encouraging-message {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
  border-left-color: var(--color-primary-400);
}

/* ===================================
   Motivational Quote Styles
   =================================== */

.motivational-quote {
  margin: var(--space-6) 0;
  padding: var(--space-6);
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  border: 2px solid var(--color-border);
  position: relative;
  box-shadow: var(--shadow-md);
  transition: all var(--duration-base) var(--ease-out);
}

.motivational-quote:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-primary-500);
}

.motivational-quote::before {
  content: '"';
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  font-size: var(--font-size-6xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary-200);
  line-height: 1;
  font-family: Georgia, serif;
}

[data-theme="dark"] .motivational-quote::before {
  color: var(--color-primary-800);
}

.quote-text {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  line-height: var(--line-height-relaxed);
  margin: 0 0 var(--space-3) 0;
  padding-left: var(--space-6);
  font-style: italic;
}

.quote-reference {
  display: block;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-600);
  text-align: right;
  font-style: normal;
}

[data-theme="dark"] .quote-reference {
  color: var(--color-primary-400);
}

/* ===================================
   Floating Encouragement
   =================================== */

.floating-encouragement {
  position: fixed;
  bottom: var(--space-20);
  right: var(--space-4);
  max-width: 320px;
  padding: var(--space-4);
  background: var(--color-background);
  border: 2px solid var(--color-primary-500);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  z-index: var(--z-index-notification);
  opacity: 0;
  transform: translateX(400px);
  transition: all var(--duration-base) var(--ease-out);
}

.floating-encouragement.show {
  opacity: 1;
  transform: translateX(0);
}

.floating-encouragement::before {
  content: '✨';
  font-size: var(--font-size-2xl);
  margin-right: var(--space-2);
}

.floating-encouragement.reduced-motion {
  transition: none;
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .floating-encouragement {
    transition: none;
  }
  .floating-encouragement.show {
    opacity: 1;
    transform: none;
  }
}

/* Mobile adjustments */
@media (max-width: 640px) {
  .floating-encouragement {
    bottom: var(--space-24);
    left: var(--space-4);
    right: var(--space-4);
    max-width: none;
  }
}

/* ===================================
   Welcome Message Styles
   =================================== */

.welcome-message {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: fadeInUp var(--duration-base) var(--ease-out);
}

/* ===================================
   Streak Message Styles
   =================================== */

.streak-message {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: linear-gradient(135deg, var(--color-warning-500), var(--color-error-500));
  color: white;
  border-radius: var(--radius-full);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  box-shadow: var(--shadow-md);
  animation: bounceIn var(--duration-base) var(--ease-bounce);
}

.streak-message::before {
  content: '🔥';
  font-size: var(--font-size-xl);
}

/* ===================================
   Completion Message Styles
   =================================== */

.completion-message {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: linear-gradient(135deg, var(--color-success-50), var(--color-primary-50));
  border: 2px solid var(--color-success-500);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-success-700);
  animation: scaleIn var(--duration-base) var(--ease-bounce);
}

[data-theme="dark"] .completion-message {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(99, 102, 241, 0.1));
  color: var(--color-success-400);
}

.completion-message::before {
  content: '✓';
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--color-success-500);
  color: white;
  border-radius: 50%;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  flex-shrink: 0;
}

/* ===================================
   Difficult Topic Message Styles
   =================================== */

.difficult-topic-message {
  padding: var(--space-4);
  background: var(--color-warning-50);
  border-left: 4px solid var(--color-warning-500);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  line-height: var(--line-height-relaxed);
  margin: var(--space-4) 0;
}

[data-theme="dark"] .difficult-topic-message {
  background: rgba(245, 158, 11, 0.1);
  border-left-color: var(--color-warning-400);
}

.difficult-topic-message::before {
  content: '💭';
  font-size: var(--font-size-2xl);
  margin-right: var(--space-2);
}

/* ===================================
   Reading Progress Message
   =================================== */

.reading-progress-message {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-primary-100);
  color: var(--color-primary-700);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  animation: fadeIn var(--duration-base) var(--ease-out);
}

[data-theme="dark"] .reading-progress-message {
  background: rgba(99, 102, 241, 0.2);
  color: var(--color-primary-300);
}

.reading-progress-message::before {
  content: '📖';
  font-size: var(--font-size-base);
}

/* ===================================
   Milestone Celebration Message
   =================================== */

.milestone-message {
  padding: var(--space-6);
  background: var(--gradient-primary);
  color: white;
  border-radius: var(--radius-xl);
  text-align: center;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  box-shadow: var(--shadow-xl);
  animation: celebrationPulse 1s var(--ease-bounce);
}

.milestone-message::before {
  content: '🎉';
  display: block;
  font-size: var(--font-size-6xl);
  margin-bottom: var(--space-3);
  animation: bounce 1s infinite;
}

/* ===================================
   Return Visit Message
   =================================== */

.return-visit-message {
  padding: var(--space-4);
  background: linear-gradient(135deg, var(--color-accent-50), var(--color-primary-50));
  border: 2px solid var(--color-accent-500);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  text-align: center;
  animation: fadeInDown var(--duration-base) var(--ease-out);
}

[data-theme="dark"] .return-visit-message {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.1), rgba(99, 102, 241, 0.1));
  border-color: var(--color-accent-400);
}

.return-visit-message::before {
  content: '👋';
  font-size: var(--font-size-3xl);
  display: block;
  margin-bottom: var(--space-2);
}

/* ===================================
   Message Container Variants
   =================================== */

.message-container {
  margin: var(--space-4) 0;
}

.message-container--centered {
  text-align: center;
}

.message-container--highlight {
  padding: var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 2px solid var(--color-border);
}

/* ===================================
   Animations
   =================================== */

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

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

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

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

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

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

/* ===================================
   Reduced Motion Support
   =================================== */

@media (prefers-reduced-motion: reduce) {
  .encouraging-message,
  .motivational-quote,
  .floating-encouragement,
  .welcome-message,
  .streak-message,
  .completion-message,
  .milestone-message,
  .return-visit-message {
    animation: none;
  }
  
  .floating-encouragement.show {
    opacity: 1;
    transform: translateX(0);
  }
  
  .milestone-message::before {
    animation: none;
  }
}

/* ===================================
   Responsive Adjustments
   =================================== */

@media (max-width: 640px) {
  .encouraging-message {
    font-size: var(--font-size-base);
    padding: var(--space-2);
  }
  
  .motivational-quote {
    padding: var(--space-4);
  }
  
  .quote-text {
    font-size: var(--font-size-lg);
    padding-left: var(--space-4);
  }
  
  .welcome-message {
    font-size: var(--font-size-xl);
  }
  
  .milestone-message {
    font-size: var(--font-size-xl);
    padding: var(--space-4);
  }
  
  .milestone-message::before {
    font-size: var(--font-size-4xl);
  }
}