@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700&family=Poppins:wght@400;500;600&display=swap');

:root {
  /* Paleta Adolescentes: Índigo y Menta */
  --primary: #4F46E5; /* Indigo 600 */
  --on-primary: #FFFFFF;
  --primary-container: #E0E7FF; /* Indigo 100 */
  --on-primary-container: #3730A3; /* Indigo 800 */
  
  --secondary: #0D9488; /* Teal/Mint 600 */
  --on-secondary: #FFFFFF;
  --secondary-container: #CCFBF1; /* Teal 100 */
  --on-secondary-container: #115E59; /* Teal 800 */

  --background: #F8FAFC; /* Slate 50 */
  --on-background: #0F172A; /* Slate 900 */
  
  --surface: #FFFFFF;
  --on-surface: #0F172A;
  --surface-variant: #F1F5F9; /* Slate 100 */
  --on-surface-variant: #475569; /* Slate 600 */
  
  --error: #E11D48; /* Rose 600 */
  --on-error: #FFFFFF;
  --error-container: #FFE4E6; /* Rose 100 */
  --on-error-container: #9F1239; /* Rose 800 */

  /* Dark mode */
  --dark-bg: #0F172A;
  --dark-surface: #1E293B;
  --dark-on-surface: #F8FAFC;
  --dark-surface-variant: #334155;
  --dark-on-surface-variant: #94A3B8;
  --dark-primary: #818CF8;
}

/* Base resets & typography */
body {
  font-family: 'Poppins', sans-serif;
  background-color: var(--background);
  color: var(--on-background);
  transition: background-color 0.3s, color 0.3s;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Outfit', sans-serif;
}

.dark body {
  background-color: var(--dark-bg);
  color: var(--dark-on-surface);
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Animations */
.breathing-circle {
  animation: breathe 8s ease-in-out infinite;
}

/* Accessibility */
body.reduce-motion .breathing-circle,
body.reduce-motion .avatar-breathe,
body.reduce-motion .manual-breathe,
body.reduce-motion .breathe-text-inhale,
body.reduce-motion .breathe-text-exhale {
  animation: none !important;
  transform: none !important;
  opacity: 1 !important;
}

#chat-messages.font-normal .chat-message-text {
  font-size: 0.875rem; /* 14px */
  line-height: 1.25rem;
}

#chat-messages.font-large .chat-message-text {
  font-size: 1.125rem; /* 18px */
  line-height: 1.75rem;
}

#chat-messages.font-xlarge .chat-message-text {
  font-size: 1.25rem; /* 20px */
  line-height: 1.875rem;
}
@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.5); opacity: 1; }
}

.manual-breathe {
  transition: transform 4s linear, opacity 4s linear;
}

.breathe-text-inhale {
  animation: showInhale 8s ease-in-out infinite;
}
.breathe-text-exhale {
  animation: showExhale 8s ease-in-out infinite;
}

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

@keyframes showExhale {
  0%, 45% { opacity: 0; transform: scale(0.9); }
  50%, 100% { opacity: 1; transform: scale(1); }
}

.chat-scroll::-webkit-scrollbar {
  width: 6px;
}
.chat-scroll::-webkit-scrollbar-thumb {
  background: var(--surface-variant);
  border-radius: 10px;
}
.dark .chat-scroll::-webkit-scrollbar-thumb {
  background: var(--dark-surface-variant);
}

.avatar-float {
  animation: float 3s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.avatar-breathe {
  animation: avatarBreathe 4s ease-in-out infinite;
}
@keyframes avatarBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

.speaking-indicator {
  animation: pulse 1.5s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.4); }
  70% { box-shadow: 0 0 0 10px rgba(79, 70, 229, 0); }
  100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0); }
}

/* ===== BREATHING OVERLAY ===== */
.breathing-overlay-panel {
  transition: opacity 0.4s ease;
}
.breathing-overlay-panel.breath-fade-in {
  animation: breathOverlayIn 0.4s ease forwards;
}
.breathing-overlay-panel.breath-fade-out {
  animation: breathOverlayOut 0.35s ease forwards;
}
@keyframes breathOverlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes breathOverlayOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* Phase label pulse on transition */
#breath-phase-label {
  transition: color 0.5s ease;
}
.breath-phase-change {
  animation: phaseFlash 0.5s ease;
}
@keyframes phaseFlash {
  0%   { transform: scale(1);    opacity: 1; }
  40%  { transform: scale(1.18); opacity: 0.5; }
  100% { transform: scale(1);    opacity: 1; }
}

/* Cycle dot */
.breath-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  transition: background 0.4s ease, transform 0.3s ease;
}
.breath-dot.active {
  background: #ffffff;
  transform: scale(1.35);
}
.breath-dot.done {
  background: rgba(255,255,255,0.55);
}

/* Accessibility */
body.reduce-motion .breathing-overlay-panel,
body.reduce-motion #breath-ring-progress {
  transition: none !important;
  animation: none !important;
}

/* ===== MOBILE TOOLS DRAWER ===== */
@media (max-width: 1023px) {
  .mobile-tools-drawer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 40;
    max-height: 55vh;
    border-radius: 20px 20px 0 0;
    border-top: 2px solid var(--surface-variant) !important;
    box-shadow: 0 -8px 32px rgba(0,0,0,0.12);
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    padding: 0;
  }

  .mobile-tools-drawer.drawer-open {
    transform: translateY(0);
  }

  /* Drag handle indicator */
  .mobile-tools-drawer::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: var(--surface-variant);
    border-radius: 2px;
    margin: 10px auto 0;
  }
}