/*
 * Cocovox Theme - "Botanical Learning Garden"
 * Emotional Target: Growth, nurturing, educational warmth
 * A sophisticated learning environment inspired by nature's growth patterns
 */

/* Import enhanced base theme system */
@import url('base-theme-system.css');
/* Import base theme framework */
@import url('base-theme.css');
/* Import sidebar accessibility fixes */
@import url('sidebar-accessibility-fixes.css');

/* ===== THEME VARIABLES ===== */

:root {

    /* Logo color for light theme - dark for visibility */
    --color-logo: oklch(25% 0.03 264); /* Fallback: hsl(220, 26%, 14%) */;
    /*
     * Comprehensive color palette system with 7 tonal variations for each color
     * Using HSL for easier understanding of relationships between shades
     */

    /* Essential UI tokens for functional use */
    --botanical-radius-small: 8px;
    /* Buttons, inputs */
    --botanical-radius-medium: 12px;
    /* Cards, modals */
    --botanical-radius-large: 16px;
    /* Major containers */

    /* ===== UNIFIED ANIMATION SYSTEM INTEGRATION ===== */
    /* Mapping botanical motion variables to unified motion tokens */
    /* This provides theme-specific overrides while using the standardized system */

    /* Duration mappings (using unified motion tokens) */
    --botanical-transition-quick: var(--motion-instant, 100ms);
    /* Matches quick botanical interactions */
    --botanical-transition-standard: var(--motion-quick, 200ms);
    /* Slightly faster than unified standard */
    --botanical-transition-slow: var(--motion-standard, 300ms);
    /* Maps to unified standard duration */

    /* Easing mappings (botanical uses standard Material easing) */
    --botanical-easing: var(--ease-standard, cubic-bezier(0.4, 0.0, 0.2, 1));

    /* Enhanced message section styling */
    --cocovox-message-padding: 1rem;
    --cocovox-message-spacing: 0.75rem;
    --cocovox-list-spacing: 0.75rem;
    --cocovox-numbered-list-indent: 1.75rem;

    /* Interactive component states */
    --cocovox-hover-lift: translateY(-2px);
    --cocovox-active-press: translateY(1px) scale(0.98);
    --cocovox-touch-press: scale(0.98);

    /* Mobile breakpoints */
    --cocovox-breakpoint-sm: 640px;
    --cocovox-breakpoint-md: 768px;
    --cocovox-breakpoint-lg: 1024px;

    /* Consider consolidating similar variables with more intuitive naming */
    /* Currently there's redundancy between cocovox-specific and general variables */

    /* Recommend grouping by function rather than type */
    --cocovox-interactive-hover: translateY(-2px);
    /* More descriptive than 'hover-lift' */
    --cocovox-interactive-active: translateY(1px) scale(0.98);
    /* More descriptive */

    /* Add missing token documentation for better onboarding */
    /* Typography scale is referenced but not clearly defined */
}

/* ===== COCOVOX THEME CLASS ===== */
[data-theme="cocovox"],
.cocovox {
    /* ===== APPLE-STYLE BOTANICAL COLOR SYSTEM ===== */
    /* Clean, functional 6-color palette inspired by Apple's approach */

    /* Primary - Deep Forest Sage (Interactive Elements) */
    --botanical-primary: #2D5B3E;
    /* Main actions, buttons, links */
    --botanical-primary-rgb: 45, 91, 62;
    /* For transparency effects */

    /* Secondary - Golden Honey (Secondary Actions) */
    --botanical-secondary: #E4A853;
    /* Secondary buttons, highlights */
    --botanical-secondary-rgb: 228, 168, 83;

    /* Accent - Fresh Growth (Success, Progress) */
    --botanical-accent: #7FB069;
    /* Success states, progress indicators */
    --botanical-accent-rgb: 127, 176, 105;

    /* Background - Light Mode (Surfaces) - Clean, bright learning space */
    --botanical-background: #f8fafc;
    /* Main background - Very light slate */
    --botanical-surface: #ffffff;
    /* Cards, elevated surfaces - Pure white */

    /* Text - Dark Colors for Light Background (Content) - High contrast for readability */
    --botanical-text-primary: #1e293b;
    /* Main text, headings - Dark slate */
    --botanical-text-secondary: #475569;
    /* Supporting text, captions - Medium gray */

    /* System Colors - Apple Standard */
    --botanical-error: #FF3B30;
    /* Error states */
    --botanical-warning: #FF9500;
    /* Warning states */

    /* Optimized shadow system */
    --botanical-shadow-subtle: 0 1px 3px rgba(45, 91, 62, 0.1);
    --botanical-shadow-standard: 0 4px 12px rgba(45, 91, 62, 0.15);
    --botanical-shadow-elevated: 0 8px 24px rgba(45, 91, 62, 0.2);

    /* ===== SLIDESHOW QUEUE SYSTEM VARIABLES ===== */
    /* Centralized theming for queue preview and onboarding components */
    --slideshow-surface-elevated: var(--color-surface-1, var(--botanical-surface));
    --slideshow-surface-hover: var(--color-surface-2, color-mix(in srgb, var(--botanical-surface) 95%, var(--botanical-primary)));
    --slideshow-surface-active: var(--color-surface-3, color-mix(in srgb, var(--botanical-surface) 90%, var(--botanical-primary)));
    --slideshow-border: var(--color-border, rgba(45, 91, 62, 0.15));
    --slideshow-text-primary: var(--color-text, var(--botanical-text-primary));
    --slideshow-text-secondary: var(--color-text-secondary, var(--botanical-text-secondary));
    --slideshow-text-tertiary: color-mix(in srgb, var(--botanical-text-secondary) 70%, transparent);
    --slideshow-text-on-accent: var(--color-text-inverse, #ffffff);
    --slideshow-accent: var(--color-primary-500, var(--botanical-primary));
    --slideshow-radius-sm: var(--botanical-radius-small, 8px);
    --slideshow-radius-md: var(--botanical-radius-medium, 12px);
    --slideshow-radius-lg: var(--botanical-radius-large, 16px);
    --slideshow-shadow-sm: var(--botanical-shadow-subtle);
    --slideshow-shadow-md: var(--botanical-shadow-standard);
    --slideshow-shadow-lg: var(--botanical-shadow-elevated);
    --slideshow-shadow-xl: 0 12px 32px rgba(45, 91, 62, 0.25);
    --slideshow-text-xs: 0.75rem;
    --slideshow-text-sm: 0.875rem;
    --slideshow-text-base: 1rem;

    /* Color palette - mapping to botanical theme variables */
    --color-primary: var(--botanical-primary);
    --color-primary-light: color-mix(in srgb, var(--botanical-primary) 70%, white);
    --color-primary-dark: color-mix(in srgb, var(--botanical-primary) 80%, black);
    --color-primary-rgb: var(--botanical-primary-rgb);

    /* Primary scale - mapped from theme colors for button system compatibility */
    /* Base: #2D5B3E (Deep Forest Sage) */
    --color-primary-50: #e8f0eb;
    --color-primary-100: #d1e1d7;
    --color-primary-200: #a3c3af;
    --color-primary-300: #75a587;
    --color-primary-400: #47875f;
    --color-primary-500: #2D5B3E;
    /* Same as --botanical-primary */
    --color-primary-600: #254a33;
    --color-primary-700: #1d3928;
    --color-primary-800: #15281d;
    --color-primary-900: #0d1712;

    --color-secondary: var(--botanical-secondary);
    --color-secondary-light: color-mix(in srgb, var(--botanical-secondary) 70%, white);
    --color-secondary-dark: color-mix(in srgb, var(--botanical-secondary) 80%, black);
    --color-secondary-rgb: var(--botanical-secondary-rgb);

    --color-accent: var(--botanical-accent);
    --color-accent-light: #b8d4ac; /* color-mix(botanical-accent, 70%, white) - brighter green */
    --color-accent-dark: #3d6830; /* WCAG AA: 5.0:1 with white - darker green for buttons */
    --color-accent-rgb: var(--botanical-accent-rgb);
    /* Alpha variants for primary color */
    --color-primary-alpha-5: rgba(var(--botanical-primary-rgb), 0.05);
    --color-primary-alpha-10: rgba(var(--botanical-primary-rgb), 0.1);
    --color-primary-alpha-15: rgba(var(--botanical-primary-rgb), 0.15);
    --color-primary-alpha-20: rgba(var(--botanical-primary-rgb), 0.2);
    --color-primary-alpha-25: rgba(var(--botanical-primary-rgb), 0.25);
    --color-primary-alpha-30: rgba(var(--botanical-primary-rgb), 0.3);
    --color-primary-alpha-35: rgba(var(--botanical-primary-rgb), 0.35);
    --color-primary-alpha-40: rgba(var(--botanical-primary-rgb), 0.4);
    --color-primary-alpha-50: rgba(var(--botanical-primary-rgb), 0.5);

    /* Alpha variants for secondary color */
    --color-secondary-alpha-5: rgba(var(--botanical-secondary-rgb), 0.05);
    --color-secondary-alpha-10: rgba(var(--botanical-secondary-rgb), 0.1);
    --color-secondary-alpha-15: rgba(var(--botanical-secondary-rgb), 0.15);
    --color-secondary-alpha-20: rgba(var(--botanical-secondary-rgb), 0.2);
    --color-secondary-alpha-30: rgba(var(--botanical-secondary-rgb), 0.3);

    /* Alpha variants for accent color */
    --color-accent-alpha-5: rgba(var(--botanical-accent-rgb), 0.05);
    --color-accent-alpha-10: rgba(var(--botanical-accent-rgb), 0.1);
    --color-accent-alpha-15: rgba(var(--botanical-accent-rgb), 0.15);
    --color-accent-alpha-20: rgba(var(--botanical-accent-rgb), 0.2);
    --color-accent-alpha-30: rgba(var(--botanical-accent-rgb), 0.3);


    /* Status colors */
    --color-success: var(--botanical-accent);
    --color-warning: var(--botanical-warning);
    --color-error: var(--botanical-error);
    --color-info: var(--botanical-primary);

    /* Status color light variants - botanical palette */
    --color-success-light: color-mix(in srgb, var(--botanical-accent) 20%, white);
    --color-warning-light: color-mix(in srgb, var(--botanical-warning) 20%, white);
    --color-error-light: color-mix(in srgb, var(--botanical-error) 20%, white);
    --color-info-light: color-mix(in srgb, var(--botanical-primary) 20%, white);

    /* ===== COURSE CARD COLORS ===== */
    /* Semantic course colors for tier-aware course selector */
    /* Using existing botanical/theme colors for WCAG compliance and dark mode support */
    --course-color-1: var(--botanical-secondary);      /* Golden Honey - warm, inviting */
    --course-color-2: #3b82f6;                         /* Blue - info/learning */
    --course-color-3: var(--color-primary-400);        /* Primary lighter - growth */
    --course-color-4: var(--botanical-accent);         /* Fresh Growth - success */
    --course-color-5: #f59e0b;                         /* Amber - creative/warning */
    --course-color-6: var(--botanical-secondary);      /* Secondary - expression */
    --course-color-7: var(--botanical-primary);        /* Deep Forest Sage - technical */

    /* ===== SURFACES ===== */
    /* Background: Natural Light - Clean, nurturing */
    --theme-surface-background-light: var(--botanical-background);
    --theme-surface-background-dark: color-mix(in srgb, var(--botanical-text-primary) 90%, black);
    --theme-surface-background: var(--theme-surface-background-light);
    --surface-background: var(--botanical-background);

    /* Surface: Pure White - Clean learning space */
    --theme-surface-card-light: var(--botanical-surface);
    --theme-surface-card-dark: color-mix(in srgb, var(--botanical-text-primary) 85%, black);
    --theme-surface-card: var(--theme-surface-card-light);
    --surface-card: var(--botanical-surface);
    --surface-card-hover: color-mix(in srgb, var(--botanical-background) 95%, var(--botanical-text-secondary));
    --surface-input: var(--botanical-surface);

    /* ===== TEXT COLORS ===== */
    /* Text: Rich Earth - Natural, readable */
    --theme-text-primary-light: var(--botanical-text-primary);
    --theme-text-primary-dark: color-mix(in srgb, var(--botanical-background) 95%, var(--botanical-accent));
    --theme-text-primary: var(--theme-text-primary-light);
    --text-primary: var(--botanical-text-primary);
    --text-secondary: var(--botanical-text-secondary);
    --text-tertiary: color-mix(in srgb, var(--botanical-text-secondary) 70%, var(--botanical-background));
    --text-on-primary: white;
    --text-on-secondary: var(--botanical-text-primary);
    --text-inverse: #ffffff;
    /* High contrast white text for dark backgrounds - used in toasts and overlays */

    /* ===== BOTANICAL VISUAL LANGUAGE ===== */
    /* Organic shapes and natural patterns */
    --theme-border-radius-small: var(--botanical-radius-small);
    --theme-border-radius-medium: var(--botanical-radius-medium);
    --theme-border-radius-large: var(--botanical-radius-large);

    /* Animation: Growing, blooming, organic movement */
    --theme-animation-personality: cubic-bezier(0.34, 1.56, 0.64, 1);
    --theme-duration-quick: 150ms;
    --theme-duration-standard: 250ms;
    --theme-duration-slow: 400ms;

    /* Shadows: Diffused like natural sunlight */
    --theme-shadow-subtle: var(--botanical-shadow-subtle);
    --theme-shadow-standard: var(--botanical-shadow-standard);
    --theme-shadow-elevated: var(--botanical-shadow-elevated);

    /* Component customization */
    --button-border-radius: var(--botanical-radius-small);
    --card-radius: var(--botanical-radius-medium);
    --input-radius: var(--botanical-radius-small);

    /* Shadow system mapping */
    --shadow-sm: var(--botanical-shadow-subtle);
    --shadow-md: var(--botanical-shadow-standard);
    --shadow-lg: var(--botanical-shadow-elevated);

    /* Motion system mapping */
    --transition-fast: var(--botanical-transition-quick);
    --transition-standard: var(--botanical-transition-standard);
    --transition-slow: var(--botanical-transition-slow);

    --transition-timing-default: cubic-bezier(0.4, 0.0, 0.2, 1);
    --transition-timing-entrance: cubic-bezier(0.0, 0.0, 0.2, 1);
    --transition-timing-exit: cubic-bezier(0.4, 0.0, 1, 1);
    --transition-timing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Focus state */
    --focus-ring-color: var(--botanical-accent);
    --focus-ring-width: 3px;

    /* Additional component customization */
    --sidebar-item-radius: var(--botanical-radius-small);
    --menu-icon-color: var(--botanical-accent);

    /* Typography - Distinct font sets for headers and body */
    --font-family-heading: 'DM Serif Display', Georgia, serif;
    --font-family-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-family-mono: 'JetBrains Mono', 'Monaco', 'Consolas', 'Ubuntu Mono', monospace;

    /* Apply body font to root */
    font-family: var(--font-family-body);

    /* Background gradient */
    --content-bg-gradient: linear-gradient(135deg, var(--botanical-background), var(--botanical-surface));

    /* Apple-style radius system */
    --radius-xs: 4px;
    --radius-sm: var(--botanical-radius-small);
    --radius-md: var(--botanical-radius-medium);
    --radius-lg: var(--botanical-radius-large);
    --radius-xl: 20px;
    --radius-full: 9999px;

    /* Component radius mapping */
    --avatar-radius: var(--radius-full);

    /* Legacy color compatibility mapping */
    --primary: var(--color-primary);
    --primary-light: var(--color-primary-light);
    --primary-dark: var(--color-primary-dark);
    --secondary: var(--color-secondary);
    --secondary-light: var(--color-secondary-light);
    --secondary-dark: var(--color-secondary-dark);
    --accent: var(--color-accent);
    --accent-light: var(--color-accent-light);
    --accent-dark: var(--color-accent-dark);

    /* ===== AAC KEYBOARD - THREE ZONE LAYOUT ===== */
    /* Core Zone - Fixed essential words */
    --keyboard-core-bg: var(--botanical-background);
    --keyboard-core-border: var(--color-primary-200);
    --keyboard-core-word-bg: var(--botanical-surface);
    --keyboard-core-word-border: var(--color-primary-100);
    --keyboard-core-word-hover: var(--color-primary-50);
    --keyboard-core-word-border-hover: var(--color-primary);

    /* My Words Zone - Promoted personal vocabulary */
    --keyboard-mywords-bg: color-mix(in srgb, var(--botanical-background) 95%, var(--botanical-accent));
    --keyboard-myword-bg: var(--botanical-surface);
    --keyboard-myword-border: var(--color-accent-alpha-20);
    --keyboard-myword-hover: var(--color-accent-alpha-10);
    --keyboard-myword-starred-bg: var(--color-secondary-alpha-10);
    --keyboard-myword-starred-border: var(--botanical-secondary);

    /* Predictions Zone - AI-powered suggestions */
    --keyboard-predictions-bg: var(--botanical-surface);
    --keyboard-predictions-border: var(--color-primary-100);
    --keyboard-prediction-word-bg: var(--botanical-background);
    --keyboard-prediction-word-border: var(--color-primary-100);
    --keyboard-prediction-word-hover: var(--color-primary-alpha-10);
    --keyboard-web-word-bg: var(--color-accent-alpha-10);
    --keyboard-web-word-border: var(--color-accent-alpha-25);

    /* Mode Toggle */
    --keyboard-mode-toggle-bg: var(--botanical-background);
    --keyboard-mode-active-bg: var(--color-primary);
    --keyboard-mode-active-text: white;

    /* Current Class Indicator */
    --keyboard-current-class: var(--botanical-accent);

    /* Accessible icon colors - WCAG AA compliant */
    --color-sidebar-icon: color-mix(in srgb, var(--botanical-primary) 80%, black);
    --color-sidebar-icon-hover: color-mix(in srgb, var(--botanical-accent) 70%, white);
    --color-sidebar-icon-active: color-mix(in srgb, var(--botanical-primary) 90%, black);

    /* Code styling - high contrast for readability */
    --theme-surface-code: color-mix(in srgb, var(--botanical-background) 95%, var(--botanical-text-secondary));
    --theme-text-code: var(--botanical-text-primary);
    --code-background: color-mix(in srgb, var(--botanical-background) 95%, var(--botanical-text-secondary));
    --code-text: var(--botanical-text-primary);

    /* Additional code styling variables */
    --color-text-code: var(--botanical-text-primary);
    --color-surface-code: color-mix(in srgb, var(--botanical-background) 95%, var(--botanical-text-secondary));
    --color-text-code-block: var(--botanical-text-primary);
    --color-surface-code-block: color-mix(in srgb, var(--botanical-background) 95%, var(--botanical-text-secondary));

    /* ===== TOAST NOTIFICATION SYSTEM VARIABLES ===== */
    /* Generic toast variable mappings for component compatibility */
    /* These map botanical-specific colors to generic names expected by toast components */

    /* Text colors for toast content - ensuring WCAG AA contrast (4.5:1 minimum) */
    --color-text-primary: var(--botanical-text-primary);
    /* #f1f5f9 - High contrast on dark surfaces */
    --color-text-secondary: var(--botanical-text-secondary);
    /* #cbd5e1 - Medium contrast for secondary text */
    --color-text-tertiary: var(--botanical-text-secondary);
    /* Ensuring readable tertiary text */
    --text-primary: var(--botanical-text-primary);
    --text-tertiary: var(--botanical-text-secondary);

    /* Primary button colors for toast actions */
    --color-primary-hover: color-mix(in srgb, var(--botanical-primary) 90%, black);
    --color-primary-contrast: var(--text-on-primary);
    --color-text-on-primary: var(--text-on-primary);

    /* Accent colors for toast highlights */
    --color-accent-hover: color-mix(in srgb, var(--botanical-accent) 90%, black);

    /* WCAG AA compliant colors for toast action buttons */
    /* These darker variants ensure 4.5:1 contrast ratio with white text */
    --color-accent-dark: #3d6830;
    /* Darker green for default buttons - 5.0:1 with white */
    --color-success-dark: #3d6830;
    /* Darker green for success buttons - 4.5:1 with white */
    --color-error-dark: #d32f2f;
    /* Darker red for error buttons - 4.5:1 with white */
    --color-warning-dark: #a86300;
    /* Darker orange for warning buttons - 4.5:1+ with white */
    --color-info-dark: var(--botanical-primary);
    /* Primary already has good contrast */

    /* Surface and border colors for toast backgrounds */
    --color-border: var(--border-color-default);
    --color-surface-hover: var(--surface-interactive);
    --color-background: var(--botanical-background);
    --color-background-elevated: var(--surface-elevated);
    --color-background-hover: var(--surface-interactive);
}

/* ===== COMPONENT STYLES ===== */

/* General styling */
.cocovox .app,
[data-theme="cocovox"] .app {
    background-color: var(--surface-background);
    color: var(--text-primary);
    overflow-x: hidden;
    /* Prevent horizontal scrolling on mobile */
}

.cocovox .app>*,
[data-theme="cocovox"] .app>* {
    background-color: var(--surface-background);
}

/* Sidebar styling */
.cocovox .sidebar,
[data-theme="cocovox"] .sidebar {
    /* background: linear-gradient(135deg, color-mix(in srgb, var(--botanical-secondary) 20%, white), var(--botanical-background)); */
    box-shadow: 0 0 15px rgba(var(--botanical-accent-rgb), 0.1);
    transition: transform var(--transition-fast) var(--transition-timing-default);
}

.cocovox .sidebar a:hover svg,
[data-theme="cocovox"] .sidebar a:hover svg {
    transform: scale(1.15);
}

/* Sidebar items */
.cocovox .w-full.flex.justify-between.rounded-md.px-3.py-2.hover\:bg-gray-900.transition.whitespace-nowrap.text-ellipsis,
[data-theme="cocovox"] .w-full.flex.justify-between.rounded-md.px-3.py-2.hover\:bg-gray-900.transition.whitespace-nowrap.text-ellipsis {
    border-radius: var(--sidebar-item-radius);
    transition: background-color var(--botanical-transition-quick);
    color: var(--text-primary);
    font-weight: 500;
    margin-bottom: 0.25rem;
}

/* Active sidebar item */
.cocovox .bg-gray-900,
[data-theme="cocovox"] .bg-gray-900 {
    background-color: rgba(var(--color-accent-rgb), 0.15);
    border-left: 3px solid var(--color-accent);
}

/* Sidebar icons */
.cocovox .sidebar svg,
[data-theme="cocovox"] .sidebar svg {
    color: var(--menu-icon-color);
    transition: transform var(--botanical-transition-quick);
}

/* Typography */
.cocovox h1,
.cocovox h2,
.cocovox h3,
[data-theme="cocovox"] h1,
[data-theme="cocovox"] h2,
[data-theme="cocovox"] h3 {
    font-family: 'DM Serif Display', serif;
    color: var(--text-primary);
}

/* ===== BOTANICAL TYPOGRAPHY SYSTEM ===== */
/* Apple-quality 6-level hierarchy optimized for educational content */

:root {

    /* Logo color for light theme - dark for visibility */
    --color-logo: oklch(25% 0.03 264); /* Fallback: hsl(220, 26%, 14%) */;
    /* Typography Scale - Apple-inspired systematic approach */
    --botanical-text-3xl: 2.25rem;
    /* 36px - Major section titles */
    --botanical-text-2xl: 1.875rem;
    /* 30px - Lesson titles */
    --botanical-text-xl: 1.5rem;
    /* 24px - Module headings */
    --botanical-text-lg: 1.25rem;
    /* 20px - Section headings */
    --botanical-text-base: 1rem;
    /* 16px - Body text */
    --botanical-text-sm: 0.875rem;
    /* 14px - Supporting text */
    --botanical-text-xs: 0.75rem;
    /* 12px - Captions, metadata */

    /* Font weights - Educational content hierarchy */
    --botanical-weight-light: 300;
    --botanical-weight-regular: 400;
    --botanical-weight-medium: 500;
    --botanical-weight-semibold: 600;
    --botanical-weight-bold: 700;

    /* Line heights - Optimized for sustained reading */
    --botanical-leading-tight: 1.25;
    /* Headlines */
    --botanical-leading-snug: 1.375;
    /* Subheadings */
    --botanical-leading-normal: 1.5;
    /* Body text */
    --botanical-leading-relaxed: 1.625;
    /* Reading text */

    /* Letter spacing - Natural, readable flow */
    --botanical-tracking-tight: -0.025em;
    /* Large headings */
    --botanical-tracking-normal: 0em;
    /* Body text */
    --botanical-tracking-wide: 0.025em;
    /* Small text */
}

/* Complete heading hierarchy with educational purpose */
.cocovox h1,
[data-theme="cocovox"] h1 {
    font-family: var(--font-family-heading);
    font-size: var(--botanical-text-3xl);
    font-weight: var(--botanical-weight-bold);
    line-height: var(--botanical-leading-tight);
    letter-spacing: var(--botanical-tracking-tight);
    color: var(--text-primary);
    margin-bottom: 1.5rem;
    /* Course/major section titles */
}

.cocovox h2,
[data-theme="cocovox"] h2 {
    font-family: var(--font-family-heading);
    font-size: var(--botanical-text-2xl);
    font-weight: var(--botanical-weight-semibold);
    line-height: var(--botanical-leading-tight);
    letter-spacing: var(--botanical-tracking-tight);
    color: var(--text-primary);
    margin-bottom: 1.25rem;
    /* Lesson/chapter titles */
}

.cocovox h3,
[data-theme="cocovox"] h3 {
    font-family: var(--font-family-heading);
    font-size: var(--botanical-text-xl);
    font-weight: var(--botanical-weight-semibold);
    line-height: var(--botanical-leading-snug);
    letter-spacing: var(--botanical-tracking-normal);
    color: var(--text-primary);
    margin-bottom: 1rem;
    /* Module/section headings */
}

.cocovox h4,
[data-theme="cocovox"] h4 {
    font-family: var(--font-family-body);
    font-size: var(--botanical-text-lg);
    font-weight: var(--botanical-weight-semibold);
    line-height: var(--botanical-leading-snug);
    letter-spacing: var(--botanical-tracking-normal);
    color: var(--text-primary);
    margin-bottom: 0.875rem;
    /* Subsection headings */
}

.cocovox h5,
[data-theme="cocovox"] h5 {
    font-family: var(--font-family-body);
    font-size: var(--botanical-text-base);
    font-weight: var(--botanical-weight-semibold);
    line-height: var(--botanical-leading-normal);
    letter-spacing: var(--botanical-tracking-normal);
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    /* Question/exercise headings */
}

.cocovox h6,
[data-theme="cocovox"] h6 {
    font-family: var(--font-family-body);
    font-size: var(--botanical-text-sm);
    font-weight: var(--botanical-weight-medium);
    line-height: var(--botanical-leading-normal);
    letter-spacing: var(--botanical-tracking-wide);
    color: var(--text-secondary);
    margin-bottom: 0.625rem;
    text-transform: uppercase;
    /* Labels, categories */
}

/* Body text optimized for learning content */
.cocovox p,
[data-theme="cocovox"] p,
.cocovox .text-body,
[data-theme="cocovox"] .text-body {
    font-family: var(--font-family-body);
    font-size: var(--botanical-text-base);
    font-weight: var(--botanical-weight-regular);
    line-height: var(--botanical-leading-relaxed);
    color: var(--text-primary);
    margin-bottom: 1rem;
    max-width: 70ch;
    /* Optimal reading line length */
}

/* Educational text variations */
.cocovox .text-instruction,
[data-theme="cocovox"] .text-instruction {
    font-size: var(--botanical-text-lg);
    font-weight: var(--botanical-weight-medium);
    color: var(--color-secondary);
    line-height: var(--botanical-leading-normal);
}

.cocovox .text-caption,
[data-theme="cocovox"] .text-caption {
    font-size: var(--botanical-text-xs);
    font-weight: var(--botanical-weight-regular);
    color: var(--text-tertiary);
    line-height: var(--botanical-leading-normal);
}

.cocovox .text-emphasis,
[data-theme="cocovox"] .text-emphasis {
    font-weight: var(--botanical-weight-semibold);
    color: var(--color-primary);
}

/* ===== BUTTON STYLES ===== */

/*
 * Component class approach for button variants
 * This creates reusable button classes that can be applied consistently
 */

/* Base button styles */
.cocovox-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--button-border-radius);
    padding: 0.625rem 1.25rem;
    font-weight: 500;
    font-size: var(--font-size-base);
    min-height: var(--touch-target-size);
    position: relative;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;

    /* Consistent transition for all states */
    transition:
        transform var(--cocovox-duration-fast) var(--cocovox-ease-bounce),
        box-shadow var(--cocovox-duration-fast) var(--cocovox-ease-out),
        background-color var(--cocovox-duration-normal) var(--cocovox-ease-standard),
        border-color var(--cocovox-duration-normal) var(--cocovox-ease-standard),
        color var(--cocovox-duration-normal) var(--cocovox-ease-standard);
}

/* Button variants */
.cocovox-btn-primary {
    background-color: var(--botanical-primary);
    color: white;
    border: 1px solid var(--botanical-primary);
    box-shadow: var(--cocovox-shadow-sm);
}

.cocovox-btn-primary:hover,
.cocovox-btn-primary:focus {
    background-color: var(--botanical-primary);
    transform: var(--cocovox-hover-lift);
    box-shadow: var(--cocovox-shadow-md);
}

.cocovox-btn-primary:active {
    background-color: color-mix(in srgb, var(--botanical-primary) 80%, black);
    transform: var(--cocovox-active-press);
    box-shadow: var(--cocovox-shadow-sm);
}

.cocovox-btn-secondary {
    background-color: color-mix(in srgb, var(--botanical-background) 95%, var(--botanical-text-secondary));
    color: var(--botanical-text-primary);
    border: 1px solid color-mix(in srgb, var(--botanical-background) 90%, var(--botanical-text-secondary));
    box-shadow: var(--cocovox-shadow-xs);
}

.cocovox-btn-secondary:hover,
.cocovox-btn-secondary:focus {
    background-color: color-mix(in srgb, var(--botanical-background) 90%, var(--botanical-text-secondary));
    transform: var(--cocovox-hover-lift);
    box-shadow: var(--cocovox-shadow-sm);
}

.cocovox-btn-secondary:active {
    background-color: color-mix(in srgb, var(--botanical-background) 85%, var(--botanical-text-secondary));
    transform: var(--cocovox-active-press);
}

.cocovox-btn-accent {
    background-color: var(--botanical-accent);
    color: var(--botanical-text-primary);

    box-shadow: var(--cocovox-shadow-sm);
}

.cocovox-btn-accent:hover,
.cocovox-btn-accent:focus {
    background-color: color-mix(in srgb, var(--botanical-accent) 70%, white);
    transform: var(--cocovox-hover-lift);
    box-shadow: var(--cocovox-shadow-md);
}

.cocovox-btn-accent:active {
    background-color: var(--botanical-primary);
    transform: var(--cocovox-active-press);
    box-shadow: var(--cocovox-shadow-sm);
}

/* Size variants */
.cocovox-btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: var(--font-size-sm);
    min-height: 36px;
}

.cocovox-btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: var(--font-size-lg);
    min-height: 52px;
}

/* Icon button */
.cocovox-btn-icon {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cocovox-btn-icon.cocovox-btn-sm {
    width: 32px;
    height: 32px;
}

.cocovox-btn-icon.cocovox-btn-lg {
    width: 48px;
    height: 48px;
}

/* Apply to existing buttons */
.cocovox button:not(.no-theme):not([class*="cocovox-btn"]),
[data-theme="cocovox"] button:not(.no-theme):not([class*="cocovox-btn"]) {
    /* background-color: color-mix(in srgb, var(--botanical-accent) 20%, white); */

    border-radius: var(--button-border-radius);

    /* padding: 0.5rem 1rem; */
    font-weight: 500;
    min-height: var(--touch-target-size);

    transition:
        transform var(--cocovox-duration-fast) var(--cocovox-ease-bounce),
        box-shadow var(--cocovox-duration-fast) var(--cocovox-ease-out),
        background-color var(--cocovox-duration-normal) var(--cocovox-ease-standard);
}

/* Button hover state */
.cocovox button:not(.no-theme):not([class*="cocovox-btn"]):hover,
[data-theme="cocovox"] button:not(.no-theme):not([class*="cocovox-btn"]):hover {
    transform: var(--cocovox-hover-lift);
    box-shadow: var(--cocovox-shadow-md);

}

/* Button active state */
.cocovox button:not(.no-theme):not([class*="cocovox-btn"]):active,
[data-theme="cocovox"] button:not(.no-theme):not([class*="cocovox-btn"]):active {
    transform: var(--cocovox-active-press);
    box-shadow: var(--cocovox-shadow-sm);
    background-color: var(--botanical-primary);
}

/* Fix "teach me" button styling specifically */
.cocovox .px-4.py-2.bg-emerald-600.hover\:bg-emerald-700.text-gray-100.transition.rounded,
[data-theme="cocovox"] .px-4.py-2.bg-emerald-600.hover\:bg-emerald-700.text-gray-100.transition.rounded {
    background-color: var(--botanical-accent) !important;
    color: var(--botanical-text-primary) !important;
    border-radius: var(--button-border-radius) !important;
    border: 1px solid var(--botanical-primary) !important;
    box-shadow: var(--cocovox-shadow-sm) !important;
    transition:
        transform var(--cocovox-duration-fast) var(--cocovox-ease-bounce),
        box-shadow var(--cocovox-duration-fast) var(--cocovox-ease-out),
        background-color var(--cocovox-duration-normal) var(--cocovox-ease-standard) !important;
}

.cocovox .px-4.py-2.bg-emerald-600.hover\:bg-emerald-700.text-gray-100.transition.rounded:hover,
[data-theme="cocovox"] .px-4.py-2.bg-emerald-600.hover\:bg-emerald-700.text-gray-100.transition.rounded:hover {
    transform: var(--cocovox-hover-lift);
    box-shadow: var(--cocovox-shadow-md) !important;
    background-color: color-mix(in srgb, var(--botanical-accent) 70%, white) !important;
}

/* Send button in chat */
.cocovox .base.enter,
[data-theme="cocovox"] .base.enter {
    background-color: var(--botanical-accent) !important;
    color: var(--botanical-text-primary) !important;
    border-radius: var(--button-border-radius) !important;
    border: 1px solid var(--botanical-primary) !important;
    box-shadow: var(--cocovox-shadow-sm) !important;
    transition:
        transform var(--cocovox-duration-fast) var(--cocovox-ease-bounce),
        box-shadow var (--cocovox-duration-fast) var (--cocovox-ease-out),
        background-color var(--cocovox-duration-normal) var(--cocovox-ease-standard) !important;
}

.cocovox .base.enter:hover,
[data-theme="cocovox"] .base.enter:hover {
    transform: var(--cocovox-hover-lift);
    box-shadow: var(--cocovox-shadow-md) !important;
    background-color: color-mix(in srgb, var(--botanical-accent) 70%, white) !important;
}

.cocovox .base.enter:active,
[data-theme="cocovox"] .base.enter:active {
    transform: var(--cocovox-active-press);
    box-shadow: var(--cocovox-shadow-sm) !important;
    background-color: var(--botanical-primary) !important;
}

/* ===== FORM ELEMENTS ===== */

/* Component-based approach with clear class names */
.cocovox-form-control {
    width: 100%;
    background-color: var(--surface-input);
    border: 1px solid color-mix(in srgb, var(--botanical-background) 85%, var(--botanical-text-secondary));
    border-radius: var(--input-radius);
    color: var(--text-primary);
    padding: 0.625rem 1rem;
    min-height: var(--touch-target-size);
    font-size: var(--font-size-base);
    line-height: 1.5;
    transition:
        border-color var(--cocovox-duration-fast) var(--cocovox-ease-standard),
        box-shadow var(--cocovox-duration-fast) var(--cocovox-ease-standard);
}

.cocovox-form-control:focus {
    border-color: var(--botanical-accent);
    box-shadow: var(--cocovox-shadow-focus);
    outline: none;
}

.cocovox-form-control:disabled {
    background-color: color-mix(in srgb, var(--botanical-background) 95%, var(--botanical-text-secondary));
    color: color-mix(in srgb, var(--botanical-text-secondary) 80%, var(--botanical-background));
    cursor: not-allowed;
}

.cocovox-form-control::placeholder {
    color: var(--botanical-text-secondary);
}

/* Input variations */
.cocovox-form-control-sm {
    padding: 0.375rem 0.75rem;
    font-size: var(--font-size-sm);
    min-height: 36px;
}

.cocovox-form-control-lg {
    padding: 0.75rem 1.25rem;
    font-size: var(--font-size-lg);
    min-height: 52px;
}

/* Input group */
.cocovox-input-group {
    display: flex;
    position: relative;
    width: 100%;
}

.cocovox-input-group .cocovox-form-control {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
}

.cocovox-input-group-prepend,
.cocovox-input-group-append {
    display: flex;
}

.cocovox-input-group-text {
    display: flex;
    align-items: center;
    padding: 0.625rem 1rem;
    background-color: color-mix(in srgb, var(--botanical-background) 95%, var(--botanical-text-secondary));
    border: 1px solid color-mix(in srgb, var(--botanical-background) 85%, var(--botanical-text-secondary));
    color: var(--text-secondary);
}

.cocovox-input-group-prepend .cocovox-input-group-text {
    border-right: 0;
    border-top-left-radius: var(--input-radius);
    border-bottom-left-radius: var(--input-radius);
}

.cocovox-input-group-append .cocovox-input-group-text {
    border-left: 0;
    border-top-right-radius: var(--input-radius);
    border-bottom-right-radius: var(--input-radius);
}

/* Applying to existing elements */

/* Chat textarea with WCAG AA compliant contrast */
/* Transparent by default, background/border appear on focus */
.cocovox #chat-textarea,
[data-theme="cocovox"] #chat-textarea {
    background-color: transparent;
    border: none;
    border-radius: 16px;
    color: var(--text-primary) !important;
    /* Ensure proper text color */
    transition:
        background-color var(--cocovox-duration-fast) var(--cocovox-ease-standard),
        border-color var(--cocovox-duration-fast) var(--cocovox-ease-standard),
        box-shadow var(--cocovox-duration-fast) var(--cocovox-ease-standard);
    padding: 0.625rem;
    min-height: 2.75rem;
    /* 44px - fits one line (24px) + vertical padding (20px) without triggering scrollbar */
    max-height: 200px;
    /* Increased for more content */
    resize: none;
    height: auto;
    /* Let content drive height */
    overflow-y: hidden;
    /* Hide scrollbar - content clips at max-height */
    scrollbar-width: none;
    /* Firefox - hide scrollbar */
    -ms-overflow-style: none;
    /* IE/Edge - hide scrollbar */
}

/* Webkit scrollbar hiding for chat textarea */
.cocovox #chat-textarea::-webkit-scrollbar,
[data-theme="cocovox"] #chat-textarea::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari - hide scrollbar */
}

/* Focus state - show background and border */
.cocovox #chat-textarea:focus,
[data-theme="cocovox"] #chat-textarea:focus {
    background-color: var(--surface-input);
    border: 1px solid var(--botanical-accent);
    box-shadow: var(--cocovox-shadow-focus);
    outline: none;
    color: var(--text-primary) !important;
    /* Maintain text color on focus */
}

/* Chat textarea placeholder with proper contrast */
.cocovox #chat-textarea::placeholder,
[data-theme="cocovox"] #chat-textarea::placeholder {
    color: var(--text-secondary);
    opacity: 0.8;
    /* Ensure placeholder is visible but distinguishable */
}

/* Other input types */
.cocovox input:not([type="button"]):not([type="submit"]):not([type="reset"]):not(.no-theme):not([class*="cocovox-form-control"]),
.cocovox textarea:not(.no-theme):not([class*="cocovox-form-control"]),
.cocovox select:not(.no-theme):not([class*="cocovox-form-control"]),
[data-theme="cocovox"] input:not([type="button"]):not([type="submit"]):not([type="reset"]):not(.no-theme):not([class*="cocovox-form-control"]),
[data-theme="cocovox"] textarea:not(.no-theme):not([class*="cocovox-form-control"]),
[data-theme="cocovox"] select:not(.no-theme):not([class*="cocovox-form-control"]) {
    background-color: var(--surface-input);
    border: 1px solid color-mix(in srgb, var(--botanical-background) 85%, var(--botanical-text-secondary));
    border-radius: var(--input-radius);
    color: var(--text-primary);
    transition:
        border-color var(--cocovox-duration-fast) var(--cocovox-ease-standard),
        box-shadow var(--cocovox-duration-fast) var(--cocovox-ease-standard);
    padding: 0.625rem 1rem;
    min-height: var(--touch-target-size);
}

.cocovox input:not([type="button"]):not([type="submit"]):not([type="reset"]):not(.no-theme):not([class*="cocovox-form-control"]):focus,
.cocovox textarea:not(.no-theme):not([class*="cocovox-form-control"]):focus,
.cocovox select:not(.no-theme):not([class*="cocovox-form-control"]):focus,
[data-theme="cocovox"] input:not([type="button"]):not([type="submit"]):not([type="reset"]):not(.no-theme):not([class*="cocovox-form-control"]):focus,
[data-theme="cocovox"] textarea:not(.no-theme):not([class*="cocovox-form-control"]):focus,
[data-theme="cocovox"] select:not(.no-theme):not([class*="cocovox-form-control"]):focus {
    border-color: var(--botanical-accent);
    box-shadow: var(--cocovox-shadow-focus);
    outline: none;
}

/* ===== CARD COMPONENTS ===== */

/* Base card component */
.cocovox-card {
    background: var(--surface-card);
    border-radius: var(--card-radius);
    box-shadow: var(--cocovox-shadow-sm);
    border: 1px solid color-mix(in srgb, var(--botanical-background) 90%, var(--botanical-text-secondary));
    overflow: hidden;
    transition:
        transform var(--cocovox-duration-normal) var(--cocovox-ease-out),
        box-shadow var(--cocovox-duration-normal) var(--cocovox-ease-out);
    padding: 1.5rem;
}

/* Card variations */
.cocovox-card-interactive {
    cursor: pointer;
}

.cocovox-card-interactive:hover {
    transform: translateY(-3px);
    box-shadow: var(--cocovox-shadow-lg);
}

.cocovox-card-compact {
    padding: 1rem;
}

.cocovox-card-flat {
    box-shadow: none;
    border: 1px solid color-mix(in srgb, var(--botanical-background) 90%, var(--botanical-text-secondary));
}

.cocovox-card-elevated {
    box-shadow: var(--cocovox-shadow-md);
}

/* Card sections */
.cocovox-card-header {
    margin: -1.5rem -1.5rem 1.5rem -1.5rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid color-mix(in srgb, var(--botanical-background) 90%, var(--botanical-text-secondary));
    background-color: color-mix(in srgb, var(--botanical-background) 98%, var(--botanical-text-secondary));
}

.cocovox-card-footer {
    margin: 1.5rem -1.5rem -1.5rem -1.5rem;
    padding: 1.25rem 1.5rem;
    border-top: 1px solid color-mix(in srgb, var(--botanical-background) 90%, var(--botanical-text-secondary));
    background-color: color-mix(in srgb, var(--botanical-background) 98%, var(--botanical-text-secondary));
}

.cocovox-card-image {
    margin: -1.5rem -1.5rem 1.5rem -1.5rem;
    overflow: hidden;
}

.cocovox-card-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Course-specific card */
.cocovox-course-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.cocovox-course-card .cocovox-card-body {
    flex: 1 1 auto;
}

.cocovox-course-card .cocovox-course-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: 0.75rem;
    color: var(--text-primary);
}

.cocovox-course-card .cocovox-course-description {
    color: var (--text-secondary);
    margin-bottom: 1.5rem;
}

.cocovox-course-card .cocovox-course-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: auto;
    color: var(--text-tertiary);
    font-size: var(--font-size-sm);
}

/* Apply to existing elements */
.cocovox .course-card,
[data-theme="cocovox"] .course-card {
    background: var(--surface-card);
    border-radius: var(--card-radius);
    box-shadow: var(--cocovox-shadow-sm);
    border: 1px solid color-mix(in srgb, var(--botanical-background) 90%, var(--botanical-text-secondary));
    overflow: hidden;
    transition:
        transform var(--cocovox-duration-normal) var (--cocovox-ease-out),
        box-shadow var (--cocovox-duration-normal) var (--cocovox-ease-out);
}

.cocovox .course-card:hover,
[data-theme="cocovox"] .course-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--cocovox-shadow-lg);
    /* Add subtle scale for more polished effect */
    transform: translateY(-3px) scale(1.01);
    transition-timing-function: var(--cocovox-ease-bounce);
}

/* ===== MASCOT STYLING ===== */

.cocovox .mascot-container,
[data-theme="cocovox"] .mascot-container {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

.cocovox .mascot-image,
[data-theme="cocovox"] .mascot-image {
    width: 180px;
    height: 180px;
}

/* ===== MESSAGE COMPONENTS ===== */

/* Base message component */
.cocovox-message {
    position: relative;
    margin-bottom: 1.5rem;
}

.cocovox-message-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.cocovox-message-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cocovox-message-bubble {
    background-color: var(--surface-card);
    border-radius: var(--card-radius);
    box-shadow: var(--cocovox-shadow-sm);
    padding: 1.25rem;
    margin-bottom: 0.5rem;
    border: 1px solid color-mix(in srgb, var(--botanical-background) 90%, var(--botanical-text-secondary));
    transition: box-shadow var(--cocovox-duration-normal) var(--cocovox-ease-standard);
}

.cocovox-message-bubble:hover {
    box-shadow: var(--cocovox-shadow-md);
}

.cocovox-message-header {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
}

.cocovox-message-name {
    font-weight: 600;
    color: var(--text-primary);
    margin-right: 0.5rem;
}

.cocovox-message-time {
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
}

.cocovox-message-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
    opacity: 0.6;
    transition: opacity var(--cocovox-duration-fast) var(--cocovox-ease-standard);
}

.cocovox-message-actions:hover {
    opacity: 1;
}

.cocovox-message-action-btn {
    background: none;
    border: none;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    color: var(--text-tertiary);
    transition: color var(--cocovox-duration-fast) var(--cocovox-ease-standard);
    font-size: var(--font-size-sm);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.cocovox-message-action-btn:hover {
    color: var(--text-secondary);
}

/* Message content */
.cocovox-message-content {
    color: var(--text-primary);
    line-height: 1.6;
    font-size: var(--font-size-base);
}

/* Variants for user/ai */
.cocovox-message-user .cocovox-message-bubble {
    background-color: color-mix(in srgb, var(--botanical-primary) 10%, white);
    border-color: color-mix(in srgb, var(--botanical-primary) 30%, white);
}

.cocovox-message-ai .cocovox-message-bubble {
    background-color: var(--surface-card);
    border-color: color-mix(in srgb, var(--botanical-background) 90%, var(--botanical-text-secondary));
}

/* Typography within messages */

/* Headings */
.cocovox-message-content h1,
.cocovox-message-content h2,
.cocovox-message-content h3,
.cocovox-message-content h4,
.cocovox-message-content h5,
.cocovox-message-content h6 {
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
    line-height: 1.3;
}

.cocovox-message-content h1 {
    font-size: var(--font-size-3xl);
}

.cocovox-message-content h2 {
    font-size: var(--font-size-2xl);
}

.cocovox-message-content h3 {
    font-size: var(--font-size-xl);
}

.cocovox-message-content h4 {
    font-size: var(--font-size-lg);
}

.cocovox-message-content h5 {
    font-size: var(--font-size-base);
}

.cocovox-message-content h6 {
    font-size: var(--font-size-sm);
}

/* Paragraphs */
.cocovox-message-content p {
    margin-bottom: 1rem;
}

.cocovox-message-content p:last-child {
    margin-bottom: 0;
}

/* Lists */
.cocovox-message-content ul,
.cocovox-message-content ol {
    margin: 1rem 0;
    margin-inline-start: 0;
    padding-inline-start: 1rem;
}

.cocovox-message-content li {
    margin-bottom: 0.5rem;
}

/* Numbered lists with custom styling */
.cocovox-message-content ol {
    counter-reset: item;
    list-style: none;
    padding-inline-start: 0;
}

.cocovox-message-content ol>li {
    counter-increment: item;
    position: relative;
    padding-inline-start: 2rem;
    margin-bottom: 0.75rem;
}

.cocovox-message-content ol>li::before {
    content: counter(item) ".";
    font-weight: 600;
    color: var(--botanical-primary);
    position: absolute;
    left: 0;
    width: 2rem;
    text-align: right;
    padding-right: 0.75rem;
}

/* Links */
.cocovox-message-content a {
    color: var(--botanical-primary);
    text-decoration: underline;
    text-decoration-color: rgba(31, 138, 124, 0.4);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: color var(--cocovox-duration-fast) var(--cocovox-ease-standard),
        text-decoration-color var(--cocovox-duration-fast) var(--cocovox-ease-standard);
}

.cocovox-message-content a:hover {
    color: color-mix(in srgb, var(--botanical-primary) 80%, black);
    text-decoration-color: rgba(31, 138, 124, 1);
}

/* Code blocks */
.cocovox-message-content pre {
    background-color: color-mix(in srgb, var(--botanical-background) 95%, var(--botanical-text-secondary));
    /* Light gray background */
    color: var(--botanical-text-primary);
    /* Very dark text for high contrast */
    border: 1px solid color-mix(in srgb, var(--botanical-background) 85%, var(--botanical-text-secondary));
    border-radius: var(--radius-md);
    padding: 1rem;
    overflow-x: auto;
    margin: 1rem 0;
    font-family: var(--font-family-mono);
    font-size: 0.9rem;
}

.cocovox-message-content code {
    font-family: var(--font-family-mono);
    font-size: 0.9em;
    background-color: color-mix(in srgb, var(--botanical-background) 95%, var(--botanical-text-secondary));
    /* Light gray background */
    color: var(--botanical-text-primary);
    /* Very dark text for high contrast */
    padding: 0.15em 0.3em;
    border-radius: var(--radius-sm);
    border: 1px solid color-mix(in srgb, var(--botanical-background) 85%, var(--botanical-text-secondary));
}

.cocovox-message-content pre code {
    background-color: transparent;
    color: inherit;
    padding: 0;
    border: none;
    border-radius: 0;
}

/* Apply to existing elements */
.cocovox .message-content,
[data-theme="cocovox"] .message-content {
    color: var(--text-primary);
    line-height: 1.6;
    font-size: var(--font-size-base);
    padding: var(--cocovox-message-padding) 0;
}

/* Global code and pre styling for Cocovox theme - Maximum specificity */
.cocovox code,
[data-theme="cocovox"] code,
.cocovox code:not(pre code),
[data-theme="cocovox"] code:not(pre code),
.cocovox .markdown-prose code:not(pre code),
[data-theme="cocovox"] .markdown-prose code:not(pre code),
.cocovox .prose code:not(pre code),
[data-theme="cocovox"] .prose code:not(pre code),
.cocovox div code,
[data-theme="cocovox"] div code,
.cocovox ul code,
[data-theme="cocovox"] ul code,
.cocovox li code,
[data-theme="cocovox"] li code,
.cocovox div ul li code,
[data-theme="cocovox"] div ul li code {
    font-family: var(--font-family-mono, 'Monaco', 'Consolas', 'Ubuntu Mono', monospace) !important;
    font-size: 0.9em !important;
    background-color: color-mix(in srgb, var(--botanical-background) 95%, var(--botanical-text-secondary)) !important;
    /* Light gray background */
    color: var(--botanical-text-primary) !important;
    /* Very dark text for high contrast */
    padding: 0.15em 0.3em !important;
    border-radius: var(--radius-sm) !important;
    border: none !important;
}

.cocovox pre,
[data-theme="cocovox"] pre {
    background-color: transparent;
    /* Light gray background */
    color: var(--botanical-text-primary);
    /* Very dark text for high contrast */
    border: none;
    border-radius: var(--radius-md);
    padding: 1rem;
    overflow-x: auto;
    margin: 1rem 0;
    font-family: var(--font-family-mono, 'Monaco', 'Consolas', 'Ubuntu Mono', monospace);
    font-size: 0.9rem;
}

.cocovox pre code,
[data-theme="cocovox"] pre code {
    background-color: transparent;
    color: inherit;
    padding: 0;
    border: none;
    border-radius: 0;
    font-size: inherit;
}

/* Universal code styling override for Cocovox theme - Nuclear option */
.cocovox *:not(pre) code,
[data-theme="cocovox"] *:not(pre) code {
    background-color: color-mix(in srgb, var(--botanical-background) 95%, var(--botanical-text-secondary)) !important;
    color: var(--botanical-text-primary) !important;
    padding: 0.15em 0.3em !important;
    border-radius: var(--radius-sm) !important;
    border: none !important;
    font-family: var(--font-family-mono, 'Monaco', 'Consolas', 'Ubuntu Mono', monospace) !important;
    font-size: 0.9em !important;
}

/* Syntax highlighting for better contrast in light theme */
.cocovox .hljs,
[data-theme="cocovox"] .hljs {
    background-color: transparent !important;
    color: var(--botanical-text-primary) !important;
}

/* Ensure syntax highlighted elements have good contrast */
.cocovox .hljs-keyword,
[data-theme="cocovox"] .hljs-keyword,
.cocovox .hljs-selector-tag,
[data-theme="cocovox"] .hljs-selector-tag,
.cocovox .hljs-literal,
[data-theme="cocovox"] .hljs-literal,
.cocovox .hljs-section,
[data-theme="cocovox"] .hljs-section,
.cocovox .hljs-link,
[data-theme="cocovox"] .hljs-link {
    color: color-mix(in srgb, var(--botanical-primary) 80%, black);
    /* Dark primary color */
    font-weight: 600;
}

.cocovox .hljs-string,
[data-theme="cocovox"] .hljs-string,
.cocovox .hljs-title,
[data-theme="cocovox"] .hljs-title,
.cocovox .hljs-name,
[data-theme="cocovox"] .hljs-name,
.cocovox .hljs-type,
[data-theme="cocovox"] .hljs-type,
.cocovox .hljs-attribute,
[data-theme="cocovox"] .hljs-attribute,
.cocovox .hljs-symbol,
[data-theme="cocovox"] .hljs-symbol,
.cocovox .hljs-bullet,
[data-theme="cocovox"] .hljs-bullet,
.cocovox .hljs-addition,
[data-theme="cocovox"] .hljs-addition,
.cocovox .hljs-variable,
[data-theme="cocovox"] .hljs-variable,
.cocovox .hljs-template-tag,
[data-theme="cocovox"] .hljs-template-tag,
.cocovox .hljs-template-variable,
[data-theme="cocovox"] .hljs-template-variable {
    color: color-mix(in srgb, var(--botanical-accent) 80%, black);
    /* Dark accent color */
}

.cocovox .hljs-comment,
[data-theme="cocovox"] .hljs-comment,
.cocovox .hljs-quote,
[data-theme="cocovox"] .hljs-quote,
.cocovox .hljs-deletion,
[data-theme="cocovox"] .hljs-deletion,
.cocovox .hljs-meta,
[data-theme="cocovox"] .hljs-meta {
    color: var(--botanical-text-secondary);
    /* Medium gray for comments */
}

.cocovox .hljs-keyword,
[data-theme="cocovox"] .hljs-keyword,
.cocovox .hljs-selector-tag,
[data-theme="cocovox"] .hljs-selector-tag,
.cocovox .hljs-literal,
[data-theme="cocovox"] .hljs-literal,
.cocovox .hljs-title,
[data-theme="cocovox"] .hljs-title,
.cocovox .hljs-section,
[data-theme="cocovox"] .hljs-section,
.cocovox .hljs-doctag,
[data-theme="cocovox"] .hljs-doctag,
.cocovox .hljs-type,
[data-theme="cocovox"] .hljs-type,
.cocovox .hljs-name,
[data-theme="cocovox"] .hljs-name,
.cocovox .hljs-strong,
[data-theme="cocovox"] .hljs-strong {
    font-weight: 600;
}

.cocovox .hljs-emphasis,
[data-theme="cocovox"] .hljs-emphasis {
    font-style: italic;
}

/* Numbered lists in messages */
.cocovox .message-content ol,
[data-theme="cocovox"] .message-content ol {
    counter-reset: item;
    margin: var(--cocovox-list-spacing) 0;
    margin-inline-start: 0;
    padding-inline-start: 0;
}

.cocovox .message-content ol>li,
[data-theme="cocovox"] .message-content ol>li {
    counter-increment: item;
    display: list-item;
    margin-bottom: var(--cocovox-message-spacing);
    position: relative;
    padding-inline-start: var(--cocovox-numbered-list-indent);
}

.cocovox .message-content ol>li::before,
[data-theme="cocovox"] .message-content ol>li::before {
    content: none; /* Use native list-style instead */
}

/* Improve link styling in messages */
.cocovox .message-content a,
[data-theme="cocovox"] .message-content a {
    color: var(--botanical-primary);
    text-decoration: underline;
    text-decoration-color: rgba(31, 138, 124, 0.4);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: color var(--cocovox-duration-fast) var(--cocovox-ease-standard),
        text-decoration-color var(--cocovox-duration-fast) var(--cocovox-ease-standard);
}

.cocovox .message-content a:hover,
[data-theme="cocovox"] .message-content a:hover {
    color: color-mix(in srgb, var(--botanical-primary) 80%, black);
    text-decoration-color: rgba(31, 138, 124, 1);
}

/* Strong text styling */
.cocovox .message-content strong,
[data-theme="cocovox"] .message-content strong {
    font-weight: 600;
    color: var (--text-primary);
}

/* ===== CHAT INTERFACE ENHANCEMENTS ===== */

/* Chat container */
.cocovox .chat-container,
[data-theme="cocovox"] .chat-container {
    background-color: var(--surface-background);
    border-radius: var(--card-radius);
}

/* Chat input area */
.cocovox .chat-input-container,
[data-theme="cocovox"] .chat-input-container {
    background-color: var(--surface-background);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    padding: 0.5rem;
}

/* Microphone button */
.cocovox .microphone-button,
[data-theme="cocovox"] .microphone-button {
    color: var(--cocovox-accent) !important;
}

/* Send button container at bottom of chat */
.cocovox .send-button-container,
[data-theme="cocovox"] .send-button-container {
    display: flex;
    align-items: center;
}

/* Send message button styling */
.cocovox .send-button,
[data-theme="cocovox"] .send-button {
    background-color: var(--color-accent) !important;
    border-radius: var(--cocovox-btn-radius) !important;
    padding: 0.5rem 1rem !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Chat status indicator */
.cocovox .chat-status,
[data-theme="cocovox"] .chat-status {
    color: var(--text-tertiary);
    font-size: 0.875rem;
}

/* ===== LESSON CONTENT STYLING ===== */

/* Exercise type styling */
.cocovox .exercise-type,
[data-theme="cocovox"] .exercise-type {
    color: var(--color-accent-dark);
    font-weight: 600;
}

/* Exercise description styling */
.cocovox .exercise-description,
[data-theme="cocovox"] .exercise-description {
    color: var(--text-primary);
    margin-top: 0.25rem;
}

/* User and AI labels */
.cocovox .user-label,
[data-theme="cocovox"] .user-label,
.cocovox .ai-label,
[data-theme="cocovox"] .ai-label {
    font-weight: 600;
    margin-right: 0.5rem;
}

.cocovox .user-label,
[data-theme="cocovox"] .user-label {
    color: var(--color-primary);
}

.cocovox .ai-label,
[data-theme="cocovox"] .ai-label {
    color: var(--color-accent);
}

/* Bottom message controls */
.cocovox .message-controls,
[data-theme="cocovox"] .message-controls {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
    opacity: 0.7;
    transition: opacity var(--cocovox-transition-fast) var(--cocovox-ease-out);
}

.cocovox .message-controls:hover,
[data-theme="cocovox"] .message-controls:hover {
    opacity: 1;
}

/* ===== DARK MODE ===== */

.dark.cocovox,
.dark[data-theme="cocovox"],
[data-theme="cocovox"].dark {
    /* Dark mode backgrounds */
    --botanical-background: #0f172a;
    --botanical-surface: #1e293b;
    --surface-background: #0f172a;
    --surface-card: #1e293b;
    --surface-card-hover: #334155;
    --surface-input: #1e293b;

    /* Dark mode text - light colors for dark backgrounds */
    --botanical-text-primary: #f1f5f9;
    --botanical-text-secondary: #cbd5e1;
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-tertiary: #94a3b8;

    /* Map color-prefixed text variables to ensure consistent dark mode text visibility */
    --color-text-primary: var(--text-primary);
    --color-text-secondary: var(--text-secondary);
    --color-text-tertiary: var(--text-tertiary);

    /* Hover surface color for interactive elements in dark mode */
    --color-hover-surface: #334155;
    --color-surface-hover: #334155;

    /* Slideshow queue dark mode overrides */
    --slideshow-surface-elevated: color-mix(in srgb, var(--botanical-surface) 95%, white);
    --slideshow-surface-hover: #334155;
    --slideshow-surface-active: #475569;
    --slideshow-border: rgba(255, 255, 255, 0.1);
    --slideshow-text-tertiary: #94a3b8;
    --slideshow-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
    --slideshow-shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.5);

    /* Accessible icon colors for sidebar navigation in dark mode - WCAG AA compliant */
    --color-sidebar-icon: color-mix(in srgb, var(--botanical-accent) 50%, white);
    /* oklch(88% 0.09 180); /* Fallback: hsl(168, 70%, 75%) */ - 6.8:1 contrast on dark background */
    --color-sidebar-icon-hover: color-mix(in srgb, var(--botanical-primary) 30%, white);
    /* oklch(94% 0.05 184); /* Fallback: hsl(170, 75%, 87%) */ - Enhanced hover state */
    --color-sidebar-icon-active: color-mix(in srgb, var(--botanical-primary) 20%, white);
    /* oklch(97% 0.03 185); /* Fallback: hsl(170, 80%, 93%) */ - Strong active state */

    /* Preserve original greenish accent for dark theme */
    --color-accent: oklch(80% 0.14 184); /* Fallback: hsl(174, 70%, 50%) */;
    --color-accent-light: oklch(89% 0.12 187); /* Fallback: hsl(174, 85%, 70%) */;
    --color-accent-dark: oklch(57% 0.10 184); /* Fallback: hsl(174, 80%, 30%) */;
    --color-accent-rgb: 74, 211, 198;
    /* Alpha variants for primary color */
    --color-primary-alpha-5: rgba(var(--botanical-primary-rgb), 0.05);
    --color-primary-alpha-10: rgba(var(--botanical-primary-rgb), 0.1);
    --color-primary-alpha-15: rgba(var(--botanical-primary-rgb), 0.15);
    --color-primary-alpha-20: rgba(var(--botanical-primary-rgb), 0.2);
    --color-primary-alpha-25: rgba(var(--botanical-primary-rgb), 0.25);
    --color-primary-alpha-30: rgba(var(--botanical-primary-rgb), 0.3);
    --color-primary-alpha-35: rgba(var(--botanical-primary-rgb), 0.35);
    --color-primary-alpha-40: rgba(var(--botanical-primary-rgb), 0.4);
    --color-primary-alpha-50: rgba(var(--botanical-primary-rgb), 0.5);

    /* Alpha variants for secondary color */
    --color-secondary-alpha-5: rgba(var(--botanical-secondary-rgb), 0.05);
    --color-secondary-alpha-10: rgba(var(--botanical-secondary-rgb), 0.1);
    --color-secondary-alpha-15: rgba(var(--botanical-secondary-rgb), 0.15);
    --color-secondary-alpha-20: rgba(var(--botanical-secondary-rgb), 0.2);
    --color-secondary-alpha-30: rgba(var(--botanical-secondary-rgb), 0.3);

    /* Alpha variants for accent color */
    --color-accent-alpha-5: rgba(var(--botanical-accent-rgb), 0.05);
    --color-accent-alpha-10: rgba(var(--botanical-accent-rgb), 0.1);
    --color-accent-alpha-15: rgba(var(--botanical-accent-rgb), 0.15);
    --color-accent-alpha-20: rgba(var(--botanical-accent-rgb), 0.2);
    --color-accent-alpha-30: rgba(var(--botanical-accent-rgb), 0.3);


    --content-bg-gradient: linear-gradient(135deg, #2a2c35, #33353f);

    /* Dark mode code styling variables */
    --theme-surface-code: oklch(24% 0.01 264); /* Fallback: hsl(220, 15%, 13%) */;
    /* Dark background for inline code */
    --theme-text-code: oklch(96% 0.00 265); /* Fallback: hsl(220, 10%, 95%) */;
    /* Light text for high contrast on dark background */
    --code-background: oklch(24% 0.01 264); /* Fallback: hsl(220, 15%, 13%) */;
    /* Fallback for code background */
    --code-text: oklch(96% 0.00 265); /* Fallback: hsl(220, 10%, 95%) */;
    /* Fallback for code text */

    /* Additional dark mode code styling variables used by app.css */
    --color-text-code: oklch(96% 0.00 265); /* Fallback: hsl(220, 10%, 95%) */;
    /* For .markdown-prose code */
    --color-surface-code: oklch(24% 0.01 264); /* Fallback: hsl(220, 15%, 13%) */;
    /* For .markdown-prose code */
    --color-text-code-block: oklch(96% 0.00 265); /* Fallback: hsl(220, 10%, 95%) */;
    /* For .markdown-prose pre */
    --color-surface-code-block: oklch(24% 0.01 264); /* Fallback: hsl(220, 15%, 13%) */;
    /* For .markdown-prose pre */

    /* Learning material colors for dark mode - adjusted for better visibility */
    --cocovox-learning-quiz-50: oklch(26% 0.03 264); /* Fallback: hsl(220, 25%, 15%) */;
    --cocovox-learning-quiz-100: oklch(35% 0.05 264); /* Fallback: hsl(220, 30%, 25%) */;
    --cocovox-learning-quiz-500: oklch(67% 0.12 263); /* Fallback: hsl(220, 65%, 65%) */;
    --cocovox-learning-quiz-600: oklch(57% 0.17 262); /* Fallback: hsl(220, 70%, 55%) */;

    --cocovox-learning-flashcards-50: oklch(25% 0.04 314); /* Fallback: hsl(280, 25%, 15%) */;
    --cocovox-learning-flashcards-100: oklch(34% 0.07 314); /* Fallback: hsl(280, 30%, 25%) */;
    --cocovox-learning-flashcards-500: oklch(66% 0.18 313); /* Fallback: hsl(280, 65%, 65%) */;
    --cocovox-learning-flashcards-600: oklch(58% 0.24 312); /* Fallback: hsl(280, 70%, 55%) */;

    --cocovox-learning-test-50: oklch(29% 0.03 158); /* Fallback: hsl(145, 25%, 15%) */;
    --cocovox-learning-test-100: oklch(41% 0.06 157); /* Fallback: hsl(145, 30%, 25%) */;
    --cocovox-learning-test-500: oklch(82% 0.14 156); /* Fallback: hsl(145, 65%, 65%) */;
    --cocovox-learning-test-600: oklch(79% 0.19 153); /* Fallback: hsl(145, 70%, 55%) */;

    /* Learning material mastery levels for dark mode */
    --cocovox-mastery-beginner: var(--botanical-text-secondary);
    --cocovox-mastery-beginner-bg: color-mix(in srgb, var(--botanical-text-primary) 95%, black);
    --cocovox-mastery-intermediate: var(--botanical-secondary);
    --cocovox-mastery-intermediate-bg: color-mix(in srgb, var(--botanical-secondary) 20%, white);
    --cocovox-mastery-advanced: var(--botanical-accent);
    --cocovox-mastery-advanced-bg: color-mix(in srgb, var(--botanical-accent) 20%, white);
    --cocovox-mastery-master: var(--botanical-primary);
    --cocovox-mastery-master-bg: color-mix(in srgb, var(--botanical-primary) 20%, white);
}

/* Dark mode chat textarea - ensure proper contrast */
/* Transparent by default, background appears on focus */
.dark.cocovox #chat-textarea,
.dark[data-theme="cocovox"] #chat-textarea,
[data-theme="cocovox"].dark #chat-textarea {
    color: var(--text-primary) !important;
    /* Light text for dark background */
    background-color: transparent;
}

.dark.cocovox #chat-textarea:focus,
.dark[data-theme="cocovox"] #chat-textarea:focus,
[data-theme="cocovox"].dark #chat-textarea:focus {
    background-color: var(--surface-input);
}

.dark.cocovox #chat-textarea::placeholder,
.dark[data-theme="cocovox"] #chat-textarea::placeholder,
[data-theme="cocovox"].dark #chat-textarea::placeholder {
    color: var(--text-secondary);
    opacity: 0.7;
    /* Slightly dimmer in dark mode */
}

/* Dark mode code and pre styling - Maximum specificity */
.dark.cocovox code,
.dark[data-theme="cocovox"] code,
[data-theme="cocovox"].dark code,
.dark.cocovox code:not(pre code),
.dark[data-theme="cocovox"] code:not(pre code),
[data-theme="cocovox"].dark code:not(pre code),
.dark.cocovox .markdown-prose code:not(pre code),
.dark[data-theme="cocovox"] .markdown-prose code:not(pre code),
[data-theme="cocovox"].dark .markdown-prose code:not(pre code),
.dark.cocovox .prose code:not(pre code),
.dark[data-theme="cocovox"] .prose code:not(pre code),
[data-theme="cocovox"].dark .prose code:not(pre code),
.dark.cocovox div code,
.dark[data-theme="cocovox"] div code,
[data-theme="cocovox"].dark div code,
.dark.cocovox ul code,
.dark[data-theme="cocovox"] ul code,
[data-theme="cocovox"].dark ul code,
.dark.cocovox li code,
.dark[data-theme="cocovox"] li code,
[data-theme="cocovox"].dark li code,
.dark.cocovox div ul li code,
.dark[data-theme="cocovox"] div ul li code,
[data-theme="cocovox"].dark div ul li code {
    background-color: oklch(24% 0.01 264); /* Fallback: hsl(220, 15%, 13%) */ !important;
    /* Dark background */
    color: oklch(96% 0.00 265); /* Fallback: hsl(220, 10%, 95%) */ !important;
    /* Light text */
    border: none !important;
}

/* Dark mode universal code styling override - Nuclear option */
.dark.cocovox *:not(pre) code,
.dark[data-theme="cocovox"] *:not(pre) code,
[data-theme="cocovox"].dark *:not(pre) code {
    background-color: oklch(24% 0.01 264); /* Fallback: hsl(220, 15%, 13%) */ !important;
    color: oklch(96% 0.00 265); /* Fallback: hsl(220, 10%, 95%) */ !important;
    border: none !important;
}

.dark.cocovox pre,
.dark[data-theme="cocovox"] pre,
[data-theme="cocovox"].dark pre {
    background-color: transparent;
    /* Dark background */
    color: oklch(96% 0.00 265); /* Fallback: hsl(220, 10%, 95%) */;
    /* Light text */
    border: none;
}

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

/* High contrast mode */
.cocovox[data-high-contrast="true"],
[data-theme="cocovox"][data-high-contrast="true"] {
    --surface-background: black;
    --surface-card: black;
    --surface-input: black;

    --text-primary: white;
    --text-secondary: white;
    --text-tertiary: #dddddd;
}

.cocovox[data-high-contrast="true"] button:not(.no-theme),
[data-theme="cocovox"][data-high-contrast="true"] button:not(.no-theme) {
    background-color: white !important;
    color: black !important;
    border: 2px solid white !important;
    box-shadow: none !important;
}

/* ===== ACCESSIBILITY CONTRAST FIXES ===== */

/* Cocovox theme accessibility mode overrides for WCAG AA compliance */
[data-theme="cocovox"][data-color-blind="protanopia"] {
    --text-tertiary: #79667d !important;
    /* Improved contrast for protanopia */
}

[data-theme="cocovox"][data-color-blind="deuteranopia"] {
    --text-tertiary: #6e6b7a !important;
    /* Improved contrast for deuteranopia */
}

[data-theme="cocovox"][data-color-blind="achromatopsia"] {
    --text-tertiary: #6c6c6c !important;
    /* Improved contrast for achromatopsia */
}

/* High contrast mode improvements */
[data-theme="cocovox"][data-accessibility="high-contrast"] {
    --text-tertiary: #4a5568 !important;
    /* Even higher contrast for accessibility needs */
}

/* Motion-reduced preferences */
[data-theme="cocovox"][data-accessibility="motion-reduced"] {
    --transition-fast: 0ms;
    --transition-standard: 0ms;
    --transition-slow: 0ms;
    --cocovox-duration-fast: 0ms;
    --cocovox-duration-normal: 0ms;
    --cocovox-duration-slow: 0ms;
}

/* ===== MOBILE ADAPTATIONS ===== */

/* Mobile viewport sizes */
/* XS: 0 - 480px (portrait phones) */
/* SM: 481px - 640px (landscape phones) */
/* MD: 641px - 768px (tablets) */
/* LG: 769px - 1024px (landscape tablets/small laptops) */
/* XL: 1025px+ (large screens) */

/* Base mobile styles (0-640px) */
@media (max-width: 640px) {

    /* Reduce mascot size significantly on mobile */
    .cocovox .mascot-container,
    [data-theme="cocovox"] .mascot-container {
        margin-bottom: 0.5rem;
    }

    .cocovox .mascot-image,
    [data-theme="cocovox"] .mascot-image {
        width: 80px;
        height: 80px;
    }

    /* Adjust spacing for mobile layout */
    .cocovox-card {
        padding: 1.25rem;
    }

    .cocovox-card-header,
    .cocovox-card-footer {
        padding: 1rem 1.25rem;
    }

    /* Adjust typography for readability on small screens */
    .cocovox-message-content h1 {
        font-size: var(--font-size-2xl);
    }

    .cocovox-message-content h2 {
        font-size: var(--font-size-xl);
    }

    .cocovox-message-content h3 {
        font-size: var(--font-size-lg);
    }

    /* Enhance touch targets for mobile */
    .cocovox-btn,
    .cocovox button:not(.no-theme):not([class*="cocovox-btn"]),
    [data-theme="cocovox"] button:not(.no-theme):not([class*="cocovox-btn"]) {
        min-height: 48px;
        /* Larger touch target for better accessibility */
        padding: 0.75rem 1rem;
        font-size: calc(var(--font-size-base) + 0.05rem);
        /* Slightly larger text */
    }

    /* Adjust form controls for touch */
    .cocovox-form-control {
        min-height: 48px;
        padding: 0.75rem 1rem;
    }

    /* Disable hover effects that don't make sense on touch */
    .cocovox-card-interactive:hover,
    .cocovox-btn:hover,
    .cocovox button:not(.no-theme):not([class*="cocovox-btn"]):hover,
    [data-theme="cocovox"] button:not(.no-theme):not([class*="cocovox-btn"]):hover {
        transform: none;
        box-shadow: var(--cocovox-shadow-sm);
    }

    /* Replace hover with active states for touch */
    .cocovox-card-interactive:active,
    .cocovox-btn:active,
    .cocovox button:not(.no-theme):not([class*="cocovox-btn"]):active,
    [data-theme="cocovox"] button:not(.no-theme):not([class*="cocovox-btn"]):active {
        transform: var(--cocovox-touch-press);
        transition: transform var(--cocovox-duration-instant) var(--cocovox-ease-standard);
    }

    /* Bottom navigation adjustments */
    .cocovox-bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 64px;
        background-color: var(--surface-card);
        border-top: 1px solid color-mix(in srgb, var(--botanical-background) 90%, var(--botanical-text-secondary));
        padding: 0;
        display: flex;
        justify-content: space-around;
        align-items: center;
        z-index: var(--z-index-fixed);
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    .cocovox-bottom-nav-item {
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0.5rem;
        color: var(--text-tertiary);
        text-decoration: none;
        font-size: var(--font-size-xs);
    }

    .cocovox-bottom-nav-item.active {
        color: var(--botanical-accent);
    }

    /* Adjustments for different device orientations */
    @media (orientation: landscape) {
        .cocovox-bottom-nav {
            height: 48px;
            /* Smaller in landscape */
        }

        .cocovox-bottom-nav-item {
            flex-direction: row;
            gap: 0.5rem;
        }
    }

    /* More efficient layout on mobile */
    .cocovox .message.svelte-1nauejd,
    [data-theme="cocovox"] .message.svelte-1nauejd {
        padding: 0.75rem;
        margin-bottom: 0.5rem;
        border-radius: 0.75rem;
    }

    /* Optimize button sizing on mobile */
    .cocovox button:not(.no-theme),
    [data-theme="cocovox"] button:not(.no-theme) {
        min-height: 2.5rem;
        padding: 0.5rem 0.75rem;
        font-size: 0.9375rem;
    }

    /* Sidebar optimizations for mobile */
    .cocovox .sidebar,
    [data-theme="cocovox"] .sidebar {
        padding: 0.5rem;
    }

    /* Ensure text is readable on small screens */
    .cocovox .message-content,
    [data-theme="cocovox"] .message-content {
        font-size: 0.9375rem;
    }

    /* Ensure buttons don't overflow */
    .cocovox .px-4.py-2.bg-emerald-600.hover\:bg-emerald-700.text-gray-100.transition.rounded,
    [data-theme="cocovox"] .px-4.py-2.bg-emerald-600.hover\:bg-emerald-700.text-gray-100.transition.rounded {
        padding: 0.5rem 0.75rem !important;
        white-space: normal !important;
        text-align: center !important;
        height: auto !important;
    }

    /* Consolidate responsive typography */
    .cocovox,
    [data-theme="cocovox"] {
        --mobile-scale-factor: 0.95;
        /* Slightly smaller on mobile */
        --font-size-base: calc(1rem * var(--mobile-scale-factor));
        --font-size-sm: calc(0.875rem * var(--mobile-scale-factor));
        --font-size-xs: calc(0.75rem * var(--mobile-scale-factor));
        --font-size-lg: calc(1.125rem * var(--mobile-scale-factor));
    }

    /* Improve tap target spacing */
    .cocovox .message-content ol>li,
    [data-theme="cocovox"] .message-content ol>li {
        margin-bottom: 0.875rem;
        /* Slightly increase for touch targets */
    }
}

/* Extra small devices (portrait phones) */
@media (max-width: 480px) {

    /* Even larger touch targets on very small screens */
    .cocovox-btn,
    .cocovox button:not(.no-theme):not([class*="cocovox-btn"]),
    [data-theme="cocovox"] button:not(.no-theme):not([class*="cocovox-btn"]) {
        min-height: 52px;
        font-size: var(--font-size-base);
    }

    /* Single column layout for any multi-column content */
    .cocovox-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    /* Simplified message view */
    .cocovox-message-bubble {
        padding: 1rem;
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-radius: var(--radius-md);
    }

    /* Simplify UI to focus on content */
    .cocovox-message-actions {
        padding: 0.25rem 0;
    }
}

/* Tablets (641px to 768px) - Modern syntax: "641px <= width <= 768px" */
@media (641px <=width <=768px) {

    /* Hybrid touch and pointer experience */
    .cocovox-btn,
    .cocovox button:not(.no-theme):not([class*="cocovox-btn"]),
    [data-theme="cocovox"] button:not(.no-theme):not([class*="cocovox-btn"]) {
        min-height: 48px;
        /* Still touch friendly but not as large */
    }

    /* Some hover effects can return but with less dramatic transforms */
    .cocovox-card-interactive:hover,
    .cocovox button:not(.no-theme):hover,
    [data-theme="cocovox"] button:not(.no-theme):hover {
        transform: translateY(-1px);
        /* Subtler lift effect */
    }

    .cocovox .message.svelte-1nauejd,
    [data-theme="cocovox"] .message.svelte-1nauejd {
        padding: 0.875rem;
        margin-bottom: 0.625rem;
    }
}

/* Advanced touch detection rather than just screen size */
@media (hover: none) and (pointer: coarse) {
    /* These styles apply to any touch device regardless of size */

    /* Add feedback for touch actions */
    .cocovox-touch-feedback {
        position: relative;
        overflow: hidden;
    }

    /* Touch ripple effect */
    .cocovox-touch-feedback::after {
        content: "";
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        pointer-events: none;
        background-image: radial-gradient(circle, var(--botanical-text-secondary) 10%, transparent 10.01%);
        background-repeat: no-repeat;
        background-position: 50%;
        transform: scale(10, 10);
        opacity: 0;
        transition: transform var(--cocovox-duration-standard) var(--cocovox-ease-out),
            opacity var(--cocovox-duration-standard) var(--cocovox-ease-standard);
    }

    .cocovox-touch-feedback:active::after {
        transform: scale(0, 0);
        opacity: 0.2;
        transition: 0s;
    }

    /* Enhanced touch support for specific components */
    .cocovox-message-bubble,
    .cocovox-card,
    .cocovox-btn,
    .cocovox button:not(.no-theme) {
        -webkit-tap-highlight-color: transparent;
        /* Remove default touch highlight */
    }

    /* Apply consistent touch feedback */
    .cocovox-btn,
    .cocovox button:not(.no-theme),
    [data-theme="cocovox"] button:not(.no-theme) {
        /* Instant feedback on touch */
        transition: background-color var(--cocovox-duration-instant) var(--cocovox-ease-standard),
            transform var(--cocovox-duration-instant) var (--cocovox-ease-standard),
            box-shadow var(--cocovox-duration-instant) var(--cocovox-ease-standard);
    }

    /* Always restore to default state after touch to prevent stuck states */
    .cocovox-btn:active,
    .cocovox button:not(.no-theme):active,
    [data-theme="cocovox"] button:not(.no-theme):active {
        transition-delay: 0s;
        /* Using unified animation system - bounce-feedback provides press-and-release effect */
        animation: bounce-feedback var(--motion-quick) var(--ease-standard) forwards;
    }

    /* Legacy touch-restore kept for backwards compatibility, but now uses unified tokens */
    @keyframes touch-restore {
        0% {
            transform: var(--cocovox-touch-press);
        }

        100% {
            transform: translateY(0) scale(1);
        }
    }
}

/* High pixel density screens (for sharper edges) */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {

    .cocovox-card,
    .cocovox-message-bubble,
    .cocovox-btn,
    .cocovox-form-control {
        border-width: 0.5px;
        /* Thinner borders look better on high DPI screens */
    }
}

/* ===== REDUCED MOTION ADAPTATION ===== */
/* Now handled by unified animation system (motion-tokens.css) */
/* Theme-specific behavior only needs to override color feedback */

@media (prefers-reduced-motion: reduce) {

    /* Defer to unified system for duration/animation disabling */
    /* motion-tokens.css already sets --motion-* to 0ms and disables transforms */

    /* Theme-specific: Use color change instead of motion for active states */
    .cocovox-btn:active,
    .cocovox button:not(.no-theme):active,
    [data-theme="cocovox"] button:not(.no-theme):active {
        background-color: var(--botanical-primary) !important;
        /* Visual feedback without motion */
    }
}

/* ===== MESSAGE CONTENT STYLING ===== */

/* Message styling with refined padding */
.cocovox .message.svelte-1nauejd,
[data-theme="cocovox"] .message.svelte-1nauejd {
    padding: var(--cocovox-message-padding);
    margin-bottom: 0.75rem;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Message content with optimized spacing */
.cocovox .message-content,
[data-theme="cocovox"] .message-content {
    color: var(--text-primary) !important;
    line-height: 1.5;
    font-size: 1rem;
    padding: 0;
}

/* Numbered lists in messages - optimized spacing */
.cocovox .message-content ol,
[data-theme="cocovox"] .message-content ol {
    counter-reset: item;
    margin: var(--cocovox-list-spacing) 0;
    margin-inline-start: 0;
    padding-inline-start: 0;
}

.cocovox .message-content ol>li,
[data-theme="cocovox"] .message-content ol>li {
    display: list-item;
    margin-bottom: var(--cocovox-message-spacing);
    position: relative;
}

/* More compact layout for small screens */
@media (max-width: 640px) {

    .cocovox .message-content ol>li,
    [data-theme="cocovox"] .message-content ol>li {
        padding-inline-start: 1.5rem;
    }
}

/* ===== CHAT INTERFACE REFINEMENTS ===== */

/* Chat input area - more efficient use of space */
.cocovox .chat-input-container,
[data-theme="cocovox"] .chat-input-container {
    background-color: var(--surface-background);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    padding: 0.5rem;
}

/* Chat textarea with better responsiveness - WCAG AA compliant */
.cocovox #chat-textarea,
[data-theme="cocovox"] #chat-textarea {
    /* Ensure proper text color for WCAG AA compliance */
    color: var(--text-primary) !important;
    padding: 0.625rem;
    min-height: 2.5rem;
    /* 40px - compact initial height */
    max-height: 200px;
    /* Increased from 150px for more content */
    resize: none;
    height: auto;
    /* Let content drive height */
}

/* Optimized button sizing for mobile */
.cocovox .base.enter.svelte-ug60r4,
[data-theme="cocovox"] .base.enter.svelte-ug60r4 {
    /* ...existing code... */
    padding: 0.5rem;
    height: 2.5rem;
    width: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Landscape orientation fixes for mobile */
@media (max-width: 640px) and (orientation: landscape) {

    .cocovox .chat-input-container,
    [data-theme="cocovox"] .chat-input-container {
        padding: 0.375rem;
    }

    .cocovox #chat-textarea,
    [data-theme="cocovox"] #chat-textarea {
        max-height: 80px;
    }
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */

/* Use hardware acceleration for animations */
.cocovox button:not(.no-theme),
.cocovox .course-card,
[data-theme="cocovox"] button:not(.no-theme),
[data-theme="cocovox"] .course-card {
    will-change: transform;
    transform: translateZ(0);
}

/* ===== COCOVOX PERSONALITY SYSTEM ===== */

/* Contextual color temperature adaptation */
.cocovox-learning {
    --theme-color-primary: oklch(65% 0.14 251); /* Fallback: hsl(210, 75%, 58%) */;
    /* Warmer for learning */
    --theme-color-accent: oklch(82% 0.14 184); /* Fallback: hsl(174, 75%, 52%) */;
    /* Encouraging teal */
}

.cocovox-analysis {
    --theme-color-primary: oklch(61% 0.16 252); /* Fallback: hsl(210, 75%, 52%) */;
    /* Cooler for focus */
    --theme-color-accent: oklch(77% 0.13 184); /* Fallback: hsl(174, 70%, 48%) */;
    /* Precise teal */
}

/* Interaction personality modes */
.cocovox-playful {
    --cocovox-ease-primary: var(--cocovox-ease-playful);
    --cocovox-duration-primary: var(--cocovox-duration-slow);
}

.cocovox-playful button:hover,
.cocovox-playful .interactive:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: var(--cocovox-glow-confident);
}

.cocovox-focused {
    --cocovox-ease-primary: var(--cocovox-ease-signature);
    --cocovox-duration-primary: var(--cocovox-duration-smooth);
}

.cocovox-focused button:hover,
.cocovox-focused .interactive:hover {
    transform: translateY(-1px);
    box-shadow: var(--cocovox-glow-subtle);
    border-color: var(--theme-color-primary);
}

/* Enhanced micro-animations for Cocovox brand */
.cocovox button:not(.no-theme),
[data-theme="cocovox"] button:not(.no-theme) {
    transition: transform var(--cocovox-duration-normal) var(--cocovox-ease-signature),
        box-shadow var(--cocovox-duration-normal) var(--cocovox-ease-signature),
        background-color var(--cocovox-duration-normal) var(--cocovox-ease-signature),
        color var(--cocovox-duration-normal) var(--cocovox-ease-signature),
        border-color var(--cocovox-duration-normal) var(--cocovox-ease-signature);
    position: relative;
    overflow: hidden;
}

.cocovox button:not(.no-theme):hover,
[data-theme="cocovox"] button:not(.no-theme):hover {
    transform: translateY(-1px);
    box-shadow:
        var(--cocovox-shadow-md),
        0 0 20px rgba(var(--cocovox-primary-rgb), 0.2);
}

.cocovox button:not(.no-theme):active,
[data-theme="cocovox"] button:not(.no-theme):active {
    transform: translateY(0);
    transition-duration: var(--cocovox-duration-fast);
}

/* Ripple effect for enhanced feedback */
.cocovox button:not(.no-theme)::before,
[data-theme="cocovox"] button:not(.no-theme)::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.3s ease;
    pointer-events: none;
}

.cocovox button:not(.no-theme):active::before,
[data-theme="cocovox"] button:not(.no-theme):active::before {
    transform: translate(-50%, -50%) scale(1);
}

/* ===== COCOVOX ENHANCEMENT UTILITIES ===== */
/* Optional utility classes for enhanced botanical playfulness */

/* Growth animation effect */
[data-theme="cocovox"] .cocovox-growth {
    animation: cocovoxGrowth 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes cocovoxGrowth {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Playful bounce on hover */
[data-theme="cocovox"] .cocovox-bounce:hover {
    animation: cocovoxBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes cocovoxBounce {

    0%,
    100% {
        transform: translateY(0);
    }

    25% {
        transform: translateY(-8px);
    }

    50% {
        transform: translateY(-4px);
    }

    75% {
        transform: translateY(-2px);
    }
}

/* Success celebration pulse */
[data-theme="cocovox"] .cocovox-success-pulse {
    animation: cocovoxSuccessPulse 0.8s ease-out;
}

@keyframes cocovoxSuccessPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--botanical-accent-rgb), 0.7);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 0 10px rgba(var(--botanical-accent-rgb), 0);
        transform: scale(1.05);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(var(--botanical-accent-rgb), 0);
        transform: scale(1);
    }
}

/* Organic leaf-like border */
[data-theme="cocovox"] .cocovox-leaf-border {
    position: relative;
    border: 2px solid var(--botanical-primary);
    border-radius: var(--botanical-radius-organic);
}

[data-theme="cocovox"] .cocovox-leaf-border::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    background: linear-gradient(135deg,
            var(--botanical-primary) 0%,
            var(--botanical-accent) 50%,
            var(--botanical-secondary) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
    filter: blur(8px);
}

[data-theme="cocovox"] .cocovox-leaf-border:hover::before {
    opacity: 0.4;
}

/* Educational highlight effect */
[data-theme="cocovox"] .cocovox-highlight {
    position: relative;
    display: inline;
    background: linear-gradient(180deg,
            transparent 60%,
            rgba(var(--botanical-secondary-rgb), 0.3) 60%);
    padding: 0 0.25em;
    transition: background 0.3s ease;
}

[data-theme="cocovox"] .cocovox-highlight:hover {
    background: linear-gradient(180deg,
            transparent 50%,
            rgba(var(--botanical-accent-rgb), 0.4) 50%);
}

/* Progress seed sprout animation */
[data-theme="cocovox"] .cocovox-sprout {
    transform-origin: bottom center;
    animation: cocovoxSprout 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes cocovoxSprout {
    0% {
        transform: scaleY(0) rotate(-5deg);
        opacity: 0;
    }

    50% {
        transform: scaleY(0.7) rotate(2deg);
    }

    100% {
        transform: scaleY(1) rotate(0deg);
        opacity: 1;
    }
}

/* Nurturing glow effect */
[data-theme="cocovox"] .cocovox-nurture-glow {
    box-shadow:
        0 4px 12px rgba(var(--botanical-primary-rgb), 0.15),
        0 2px 6px rgba(var(--botanical-accent-rgb), 0.1);
    transition: box-shadow 0.3s ease;
}

[data-theme="cocovox"] .cocovox-nurture-glow:hover {
    box-shadow:
        0 6px 16px rgba(var(--botanical-primary-rgb), 0.25),
        0 3px 8px rgba(var(--botanical-accent-rgb), 0.15),
        0 0 24px rgba(var(--botanical-secondary-rgb), 0.1);
}

/* Reduced motion overrides */
@media (prefers-reduced-motion: reduce) {

    [data-theme="cocovox"] .cocovox-growth,
    [data-theme="cocovox"] .cocovox-bounce,
    [data-theme="cocovox"] .cocovox-success-pulse,
    [data-theme="cocovox"] .cocovox-sprout {
        animation: none;
    }
}