/* ========================================  
   QUANTUM ACADEMIC ULTRA PREMIUM CSS v11.1  
   EDIFY · FUTURISTIC LEARNING ENVIRONMENT  
   ======================================== */  

/* ========================================  
   ADVANCED RESET WITH QUANTUM VARIABLES  
   ======================================== */  
* {  
    margin: 0;  
    padding: 0;  
    box-sizing: border-box;  
}  

:root {  
    /* --- Master Color Palette (More Vibrant & Complex) --- */  
    --hue-primary: 230;  
    --hue-secondary: 270;  
    --hue-accent: 190;  
    --hue-warm: 35;  
    --hue-rose: 340;  
    --hue-indigo: 250;  
    --hue-teal: 170;  
    --hue-coral: 15;  
    --hue-mint: 150;  
    --hue-lavender: 260;  
      
    /* --- Primary Quantum Gradients (Multi-stop, Rich) --- */  
    --gradient-primary: linear-gradient(135deg,   
        hsl(230, 85%, 65%) 0%,   
        hsl(250, 80%, 62%) 20%,  
        hsl(260, 75%, 58%) 40%,  
        hsl(270, 70%, 54%) 60%,  
        hsl(280, 65%, 50%) 80%,  
        hsl(290, 60%, 46%) 100%  
    );  
      
    --gradient-secondary: linear-gradient(135deg,   
        hsl(340, 85%, 65%) 0%,   
        hsl(345, 80%, 60%) 20%,  
        hsl(350, 75%, 55%) 40%,  
        hsl(355, 70%, 50%) 60%,  
        hsl(360, 65%, 45%) 80%,  
        hsl(5, 60%, 40%) 100%  
    );  
      
    --gradient-accent: linear-gradient(135deg,   
        hsl(190, 85%, 55%) 0%,   
        hsl(185, 80%, 52%) 20%,  
        hsl(180, 75%, 48%) 40%,  
        hsl(175, 70%, 44%) 60%,  
        hsl(170, 65%, 40%) 80%,  
        hsl(165, 60%, 36%) 100%  
    );  
      
    --gradient-gold: linear-gradient(135deg,   
        hsl(45, 95%, 60%) 0%,   
        hsl(40, 90%, 55%) 20%,  
        hsl(35, 85%, 50%) 40%,  
        hsl(30, 80%, 45%) 60%,  
        hsl(25, 75%, 40%) 80%,  
        hsl(20, 70%, 35%) 100%  
    );  
      
    --gradient-neon: linear-gradient(135deg,   
        hsl(160, 85%, 65%) 0%,   
        hsl(170, 80%, 60%) 20%,  
        hsl(180, 75%, 55%) 40%,  
        hsl(190, 70%, 50%) 60%,  
        hsl(200, 65%, 45%) 80%,  
        hsl(210, 60%, 40%) 100%  
    );  
      
    --gradient-cosmic: linear-gradient(135deg,   
        hsl(220, 80%, 20%) 0%,   
        hsl(230, 75%, 22%) 20%,  
        hsl(240, 70%, 25%) 40%,  
        hsl(250, 65%, 28%) 60%,  
        hsl(260, 60%, 30%) 80%,  
        hsl(270, 55%, 32%) 100%  
    );  
      
    --gradient-aurora: linear-gradient(135deg,   
        hsl(180, 85%, 45%) 0%,   
        hsl(190, 80%, 48%) 20%,  
        hsl(200, 75%, 52%) 40%,  
        hsl(210, 70%, 55%) 60%,  
        hsl(220, 65%, 58%) 80%,  
        hsl(230, 60%, 60%) 100%  
    );  
      
    --gradient-sunset: linear-gradient(135deg,   
        hsl(340, 85%, 60%) 0%,   
        hsl(350, 80%, 55%) 20%,  
        hsl(5, 75%, 50%) 40%,  
        hsl(15, 70%, 45%) 60%,  
        hsl(25, 65%, 40%) 80%,  
        hsl(35, 60%, 35%) 100%  
    );  
      
    --gradient-ocean: linear-gradient(135deg,   
        hsl(200, 85%, 45%) 0%,   
        hsl(205, 80%, 48%) 20%,  
        hsl(210, 75%, 52%) 40%,  
        hsl(215, 70%, 55%) 60%,  
        hsl(220, 65%, 58%) 80%,  
        hsl(225, 60%, 60%) 100%  
    );  
      
    --gradient-forest: linear-gradient(135deg,   
        hsl(140, 75%, 35%) 0%,   
        hsl(145, 70%, 38%) 20%,  
        hsl(150, 65%, 42%) 40%,  
        hsl(155, 60%, 46%) 60%,  
        hsl(160, 55%, 50%) 80%,  
        hsl(165, 50%, 54%) 100%  
    );  
      
    --gradient-lavender: linear-gradient(135deg,   
        hsl(260, 75%, 70%) 0%,   
        hsl(265, 70%, 65%) 20%,  
        hsl(270, 65%, 60%) 40%,  
        hsl(275, 60%, 55%) 60%,  
        hsl(280, 55%, 50%) 80%,  
        hsl(285, 50%, 45%) 100%  
    );  
      
    --gradient-peach: linear-gradient(135deg,   
        hsl(20, 85%, 65%) 0%,   
        hsl(25, 80%, 60%) 20%,  
        hsl(30, 75%, 55%) 40%,  
        hsl(35, 70%, 50%) 60%,  
        hsl(40, 65%, 45%) 80%,  
        hsl(45, 60%, 40%) 100%  
    );  
      
    --gradient-mint: linear-gradient(135deg,   
        hsl(150, 75%, 55%) 0%,   
        hsl(155, 70%, 50%) 20%,  
        hsl(160, 65%, 45%) 40%,  
        hsl(165, 60%, 40%) 60%,  
        hsl(170, 55%, 35%) 80%,  
        hsl(175, 50%, 30%) 100%  
    );  
      
    --gradient-twilight: linear-gradient(135deg,   
        hsl(260, 80%, 45%) 0%,  
        hsl(270, 75%, 42%) 25%,  
        hsl(280, 70%, 38%) 50%,  
        hsl(290, 65%, 34%) 75%,  
        hsl(300, 60%, 30%) 100%  
    );  

    --gradient-dawn: linear-gradient(135deg,   
        hsl(40, 90%, 70%) 0%,  
        hsl(35, 85%, 65%) 25%,  
        hsl(30, 80%, 60%) 50%,  
        hsl(25, 75%, 55%) 75%,  
        hsl(20, 70%, 50%) 100%  
    );  

    /* --- Animated Gradients (Shimmer Effects) --- */  
    --gradient-shimmer: linear-gradient(  
        135deg,  
        rgba(129, 140, 248, 0.4) 0%,  
        rgba(139, 92, 246, 0.3) 25%,  
        rgba(96, 165, 250, 0.4) 50%,  
        rgba(244, 114, 182, 0.3) 75%,  
        rgba(129, 140, 248, 0.4) 100%  
    );  
      
    --gradient-rainbow: linear-gradient(  
        135deg,  
        hsl(0, 85%, 60%) 0%,  
        hsl(30, 85%, 60%) 15%,  
        hsl(60, 85%, 60%) 30%,  
        hsl(120, 85%, 60%) 45%,  
        hsl(180, 85%, 60%) 60%,  
        hsl(240, 85%, 60%) 75%,  
        hsl(300, 85%, 60%) 90%,  
        hsl(360, 85%, 60%) 100%  
    );  

    /* --- Quantum Colors (Enhanced) --- */  
    --quantum-blue: hsl(220, 85%, 65%);  
    --quantum-purple: hsl(270, 80%, 60%);  
    --quantum-pink: hsl(340, 85%, 65%);  
    --quantum-gold: hsl(45, 95%, 60%);  
    --quantum-cyan: hsl(190, 85%, 55%);  
    --quantum-teal: hsl(170, 80%, 45%);  
    --quantum-violet: hsl(280, 75%, 65%);  
    --quantum-rose: hsl(350, 85%, 70%);  
    --quantum-indigo: hsl(250, 80%, 55%);  
    --quantum-coral: hsl(15, 85%, 60%);  
    --quantum-mint: hsl(150, 75%, 55%);  
    --quantum-lavender: hsl(260, 75%, 70%);  
    --quantum-sapphire: hsl(210, 85%, 55%);  
    --quantum-amethyst: hsl(280, 80%, 55%);  

    /* --- Gradients for Text (Always Visible) --- */  
    --text-gradient: linear-gradient(135deg,   
        #ffffff 0%,   
        rgba(255, 255, 255, 0.95) 30%,  
        rgba(255, 255, 255, 0.85) 60%,  
        rgba(255, 255, 255, 0.95) 80%,  
        #ffffff 100%  
    );  
      
    --text-gradient-primary: linear-gradient(135deg,   
        hsl(230, 85%, 70%) 0%,  
        hsl(250, 80%, 65%) 25%,  
        hsl(260, 75%, 60%) 50%,  
        hsl(270, 70%, 55%) 75%,  
        hsl(280, 65%, 50%) 100%  
    );  
      
    --text-gradient-shimmer: linear-gradient(  
        135deg,  
        #ffffff 0%,  
        rgba(129, 140, 248, 0.9) 20%,  
        rgba(139, 92, 246, 0.9) 40%,  
        rgba(96, 165, 250, 0.9) 60%,  
        rgba(244, 114, 182, 0.9) 80%,  
        #ffffff 100%  
    );  

    /* --- Glass Premium (More Refined) --- */  
    --glass-premium: rgba(255, 255, 255, 0.06);  
    --glass-border: rgba(255, 255, 255, 0.1);  
    --glass-shadow: rgba(0, 0, 0, 0.5);  
    --glass-blur: 100px;  
    --glass-saturate: 600%;  

    /* --- Background Deep (Richer, More Complex) --- */  
    --bg-deep: #05080f;  
    --bg-cosmic: #0a0f1a;  
    --bg-quantum: #0c1220;  
    --bg-void: #03050a;  
    --bg-stellar: #080d1a;  

    /* --- Text Colors (Ultra High Contrast for Maximum Visibility) --- */  
    --text-primary: rgba(255, 255, 255, 0.98);  
    --text-secondary: rgba(255, 255, 255, 0.75);  
    --text-muted: rgba(255, 255, 255, 0.35);  
    --text-dim: rgba(255, 255, 255, 0.15);  
}  

/* ========================================  
   GLOBAL TRANSITIONS & ANIMATIONS  
   ======================================== */  
* {  
    transition: background 0.7s cubic-bezier(0.16, 1, 0.3, 1),  
                color 0.7s cubic-bezier(0.16, 1, 0.3, 1),  
                border-color 0.7s cubic-bezier(0.16, 1, 0.3, 1),  
                box-shadow 0.7s cubic-bezier(0.16, 1, 0.3, 1),  
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),  
                opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),  
                filter 0.7s cubic-bezier(0.16, 1, 0.3, 1);  
}  

body {  
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;  
    background: var(--bg-deep);  
    min-height: 100vh;  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    padding: 1.5rem;  
    position: relative;  
    overflow-x: hidden;  
    transition: background 0.8s cubic-bezier(0.16, 1, 0.3, 1);  
}  

/* ========================================  
   ADVANCED BACKGROUND LAYERS (More Dynamic)  
   ======================================== */  
/* Layer 1: Quantum Mesh Gradient */  
body::before {  
    content: '';  
    position: fixed;  
    inset: 0;  
    background:  
        radial-gradient(ellipse at 10% 20%,   
            hsl(230, 85%, 65%, 0.18) 0%,   
            transparent 50%  
        ),  
        radial-gradient(ellipse at 90% 80%,   
            hsl(270, 80%, 60%, 0.18) 0%,   
            transparent 50%  
        ),  
        radial-gradient(ellipse at 50% 50%,   
            hsl(190, 85%, 55%, 0.10) 0%,   
            transparent 70%  
        ),  
        radial-gradient(ellipse at 30% 70%,   
            hsl(340, 85%, 65%, 0.08) 0%,   
            transparent 50%  
        ),  
        radial-gradient(ellipse at 70% 20%,   
            hsl(45, 95%, 60%, 0.07) 0%,   
            transparent 50%  
        ),  
        radial-gradient(ellipse at 50% 100%,   
            hsl(280, 75%, 65%, 0.06) 0%,   
            transparent 60%  
        ),  
        radial-gradient(ellipse at 85% 30%,   
            hsl(15, 85%, 60%, 0.05) 0%,   
            transparent 50%  
        ),  
        radial-gradient(ellipse at 15% 80%,   
            hsl(150, 75%, 55%, 0.05) 0%,   
            transparent 50%  
        );  
    z-index: 0;  
    pointer-events: none;  
    transition: opacity 0.8s ease;  
    animation: meshPulse 25s ease-in-out infinite alternate;  
}  

@keyframes meshPulse {  
    0% { opacity: 0.6; transform: scale(1); }  
    33% { opacity: 1; transform: scale(1.03); }  
    66% { opacity: 0.8; transform: scale(0.97); }  
    100% { opacity: 0.7; transform: scale(1.01); }  
}  

/* Layer 2: Advanced Grid with Gradient */  
body::after {  
    content: '';  
    position: fixed;  
    inset: 0;  
    background-image:  
        linear-gradient(rgba(255, 255, 255, 0.005) 1px, transparent 1px),  
        linear-gradient(90deg, rgba(255, 255, 255, 0.005) 1px, transparent 1px);  
    background-size: 80px 80px;  
    pointer-events: none;  
    z-index: 0;  
    animation: gridPulse 12s ease-in-out infinite alternate;  
}  

@keyframes gridPulse {  
    0% { opacity: 0.4; transform: scale(1); }  
    100% { opacity: 0.8; transform: scale(1.05); }  
}  

/* ========================================  
   QUANTUM PARTICLES SYSTEM (More Organic)  
   ======================================== */  
.particles-container {  
    position: fixed;  
    inset: 0;  
    z-index: 0;  
    pointer-events: none;  
    overflow: hidden;  
}  

.particle {  
    position: absolute;  
    width: 5px;  
    height: 5px;  
    background: linear-gradient(135deg,   
        hsl(230, 85%, 65%),   
        hsl(270, 80%, 60%),  
        hsl(340, 85%, 65%)  
    );  
    border-radius: 50%;  
    opacity: 0;  
    animation: particleFloat 30s infinite cubic-bezier(0.4, 0, 0.2, 1);  
    filter: blur(1px);  
    box-shadow: 0 0 20px rgba(129, 140, 248, 0.2);  
}  

.particle:nth-child(1) { left: 10%; animation-delay: 0s; }  
.particle:nth-child(2) { left: 20%; animation-delay: 2s; width: 7px; height: 7px; }  
.particle:nth-child(3) { left: 30%; animation-delay: 4s; }  
.particle:nth-child(4) { left: 40%; animation-delay: 1s; width: 3px; height: 3px; }  
.particle:nth-child(5) { left: 50%; animation-delay: 3s; }  
.particle:nth-child(6) { left: 60%; animation-delay: 5s; width: 6px; height: 6px; }  
.particle:nth-child(7) { left: 70%; animation-delay: 2.5s; }  
.particle:nth-child(8) { left: 80%; animation-delay: 4.5s; width: 3px; height: 3px; }  
.particle:nth-child(9) { left: 90%; animation-delay: 1.5s; }  
.particle:nth-child(10) { left: 15%; animation-delay: 3.5s; width: 6px; height: 6px; }  

@keyframes particleFloat {  
    0% { transform: translateY(100vh) scale(0) rotate(0deg); opacity: 0; }  
    10% { opacity: 0.9; }  
    90% { opacity: 0.9; }  
    100% { transform: translateY(-10vh) scale(1) rotate(720deg); opacity: 0; }  
}  

/* ========================================  
   ADVANCED STARRY BACKGROUND  
   ======================================== */  
.stars, .stars2, .stars3 {  
    position: fixed;  
    top: 0;  
    left: 0;  
    width: 100%;  
    height: 100%;  
    pointer-events: none;  
    z-index: 0;  
}  

.stars {  
    background-image:  
        radial-gradient(2px 2px at 15px 25px, #fff, transparent),  
        radial-gradient(2px 2px at 35px 65px, rgba(255,255,255,0.9), transparent),  
        radial-gradient(3px 3px at 55px 155px, #eee, transparent),  
        radial-gradient(2px 2px at 85px 35px, rgba(255,255,255,0.7), transparent),  
        radial-gradient(2px 2px at 125px 75px, #fff, transparent),  
        radial-gradient(3px 3px at 165px 25px, rgba(255,255,255,0.8), transparent),  
        radial-gradient(2px 2px at 205px 115px, #ddd, transparent),  
        radial-gradient(2px 2px at 245px 45px, rgba(255,255,255,0.6), transparent);  
    background-size: 300px 300px;  
    animation: twinkle 5s ease-in-out infinite alternate;  
}  

.stars2 {  
    background-image:  
        radial-gradient(1px 1px at 10px 10px, #fff, transparent),  
        radial-gradient(1px 1px at 60px 120px, rgba(255,255,255,0.8), transparent),  
        radial-gradient(2px 2px at 100px 50px, #eee, transparent),  
        radial-gradient(1px 1px at 140px 90px, rgba(255,255,255,0.5), transparent),  
        radial-gradient(1px 1px at 180px 20px, #fff, transparent),  
        radial-gradient(2px 2px at 220px 110px, rgba(255,255,255,0.7), transparent);  
    background-size: 300px 300px;  
    animation: twinkle 7s ease-in-out infinite alternate 1.5s;  
}  

.stars3 {  
    background-image:  
        radial-gradient(1.5px 1.5px at 30px 50px, #fff, transparent),  
        radial-gradient(1.5px 1.5px at 70px 20px, rgba(255,255,255,0.7), transparent),  
        radial-gradient(2px 2px at 110px 70px, #eee, transparent),  
        radial-gradient(1.5px 1.5px at 150px 40px, rgba(255,255,255,0.6), transparent),  
        radial-gradient(2px 2px at 190px 95px, #fff, transparent);  
    background-size: 300px 300px;  
    animation: twinkle 6s ease-in-out infinite alternate 2.5s;  
}  

@keyframes twinkle {  
    0% { opacity: 0.15; transform: scale(0.95); }  
    50% { opacity: 0.95; transform: scale(1.08); }  
    100% { opacity: 0.25; transform: scale(0.97); }  
}  

/* ========================================  
   COSMIC RINGS  
   ======================================== */  
.cosmic-ring {  
    position: fixed;  
    border-radius: 50%;  
    border: 1px solid rgba(129, 140, 248, 0.03);  
    pointer-events: none;  
    z-index: 0;  
    animation: rotateRing 60s linear infinite;  
    background: radial-gradient(circle, rgba(129, 140, 248, 0.01), transparent 70%);  
    box-shadow: 0 0 100px rgba(129, 140, 248, 0.01);  
}  

.cosmic-ring-1 {  
    width: 800px;  
    height: 800px;  
    top: 50%;  
    left: 50%;  
    transform: translate(-50%, -50%);  
    border-color: rgba(129, 140, 248, 0.08);  
    background: radial-gradient(circle, rgba(129, 140, 248, 0.04), transparent 70%);  
}  

.cosmic-ring-2 {  
    width: 1000px;  
    height: 1000px;  
    top: 50%;  
    left: 50%;  
    transform: translate(-50%, -50%);  
    animation-duration: 90s;  
    animation-direction: reverse;  
    border-color: rgba(139, 92, 246, 0.06);  
    background: radial-gradient(circle, rgba(139, 92, 246, 0.03), transparent 70%);  
}  

.cosmic-ring-3 {  
    width: 600px;  
    height: 600px;  
    top: 50%;  
    left: 50%;  
    transform: translate(-50%, -50%);  
    animation-duration: 120s;  
    border-color: rgba(96, 165, 250, 0.05);  
    background: radial-gradient(circle, rgba(96, 165, 250, 0.03), transparent 70%);  
}  

.cosmic-ring-4 {  
    width: 1200px;  
    height: 1200px;  
    top: 50%;  
    left: 50%;  
    transform: translate(-50%, -50%);  
    animation-duration: 150s;  
    border-color: rgba(244, 114, 182, 0.04);  
    background: radial-gradient(circle, rgba(244, 114, 182, 0.02), transparent 70%);  
}  

@keyframes rotateRing {  
    from { transform: translate(-50%, -50%) rotate(0deg); }  
    to { transform: translate(-50%, -50%) rotate(360deg); }  
}  

/* ========================================  
   QUANTUM ORB SYSTEM (More Luminous)  
   ======================================== */  
.orb {  
    position: fixed;  
    border-radius: 50%;  
    filter: blur(150px);  
    z-index: 0;  
    pointer-events: none;  
    opacity: 0.6;  
    animation: orbFloat 60s infinite alternate cubic-bezier(0.4, 0, 0.2, 1);  
    transition: opacity 0.5s ease;  
}  

.orb1 {  
    width: 1000px;  
    height: 1000px;  
    background: radial-gradient(circle, rgba(129, 140, 248, 0.25), rgba(139, 92, 246, 0.08));  
    top: -400px;  
    left: -350px;  
    animation-delay: 0s;  
}  

.orb2 {  
    width: 800px;  
    height: 800px;  
    background: radial-gradient(circle, rgba(96, 165, 250, 0.20), rgba(34, 211, 238, 0.07));  
    bottom: -300px;  
    right: -250px;  
    animation-delay: -15s;  
}  

.orb3 {  
    width: 700px;  
    height: 700px;  
    background: radial-gradient(circle, rgba(139, 92, 246, 0.18), rgba(244, 114, 182, 0.06));  
    top: 25%;  
    left: 65%;  
    animation-delay: -25s;  
}  

.orb4 {  
    width: 600px;  
    height: 600px;  
    background: radial-gradient(circle, rgba(251, 191, 36, 0.15), rgba(249, 115, 22, 0.05));  
    top: 55%;  
    right: 5%;  
    animation-delay: -10s;  
}  

.orb5 {  
    width: 500px;  
    height: 500px;  
    background: radial-gradient(circle, rgba(244, 114, 182, 0.12), rgba(239, 68, 68, 0.04));  
    bottom: 5%;  
    left: 15%;  
    animation-delay: -30s;  
}  

.orb6 {  
    width: 450px;  
    height: 450px;  
    background: radial-gradient(circle, rgba(96, 165, 250, 0.15), rgba(34, 211, 238, 0.05));  
    top: 10%;  
    right: 25%;  
    animation-delay: -20s;  
}  

.orb7 {  
    width: 400px;  
    height: 400px;  
    background: radial-gradient(circle, rgba(139, 92, 246, 0.14), rgba(129, 140, 248, 0.05));  
    bottom: 35%;  
    left: 2%;  
    animation-delay: -35s;  
}  

.orb8 {  
    width: 350px;  
    height: 350px;  
    background: radial-gradient(circle, rgba(251, 191, 36, 0.10), rgba(249, 115, 22, 0.04));  
    top: 45%;  
    left: 35%;  
    animation-delay: -5s;  
}  

@keyframes orbFloat {  
    0% { transform: translate(0, 0) scale(1) rotate(0deg); }  
    33% { transform: translate(120px, -90px) scale(1.25) rotate(5deg); }  
    66% { transform: translate(-70px, 70px) scale(0.80) rotate(-5deg); }  
    100% { transform: translate(40px, -40px) scale(1.15) rotate(0deg); }  
}  

/* ========================================  
   ULTRA GLASS APP WRAPPER (More Premium)  
   ======================================== */  
.app-wrapper {  
    display: flex;  
    max-width: 1500px;  
    width: 100%;  
    height: 92vh;  
    max-height: 920px;  
    background: rgba(5, 8, 15, 0.50);  
    -webkit-backdrop-filter: blur(80px) saturate(600%);  
    backdrop-filter: blur(80px) saturate(600%);  
    border-radius: 64px;  
    box-shadow:  
        0 60px 180px rgba(0, 0, 0, 0.9),  
        0 0 0 1px rgba(255, 255, 255, 0.05),  
        inset 0 1px 0 rgba(255, 255, 255, 0.08),  
        0 0 100px rgba(129, 140, 248, 0.04);  
    overflow: hidden;  
    position: relative;  
    z-index: 10;  
    border: 1px solid rgba(255, 255, 255, 0.05);  
    transition: background 0.7s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.7s ease;  
}  

/* Premium Gradient Border */  
.app-wrapper::before {  
    content: '';  
    position: absolute;  
    inset: -1px;  
    border-radius: 64px;  
    padding: 2px;  
    background: linear-gradient(135deg,  
        rgba(129, 140, 248, 0.35),  
        rgba(139, 92, 246, 0.20),  
        rgba(96, 165, 250, 0.35),  
        rgba(244, 114, 182, 0.12),  
        rgba(251, 191, 36, 0.08)  
    );  
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);  
    mask-composite: exclude;  
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);  
    -webkit-mask-composite: xor;  
    pointer-events: none;  
    z-index: 20;  
    transition: opacity 0.7s ease;  
}  

/* Inner Glow */  
.app-wrapper::after {  
    content: '';  
    position: absolute;  
    inset: 0;  
    border-radius: 64px;  
    background:   
        radial-gradient(ellipse at 20% 30%, rgba(129, 140, 248, 0.06), transparent 60%),  
        radial-gradient(ellipse at 80% 70%, rgba(139, 92, 246, 0.04), transparent 50%),  
        radial-gradient(ellipse at 50% 50%, rgba(96, 165, 250, 0.03), transparent 70%);  
    pointer-events: none;  
    z-index: 0;  
}  

/* ========================================  
   SIDEBAR - PREMIUM  
   ======================================== */  
.brand-panel {  
    width: 290px;  
    background: linear-gradient(180deg,  
        rgba(255, 255, 255, 0.02),  
        rgba(129, 140, 248, 0.03)  
    );  
    padding: 3rem 2.2rem;  
    display: flex;  
    flex-direction: column;  
    align-items: center;  
    text-align: center;  
    border-right: 1px solid rgba(255, 255, 255, 0.03);  
    flex-shrink: 0;  
    position: relative;  
    z-index: 1;  
    -webkit-backdrop-filter: blur(20px);  
    backdrop-filter: blur(20px);  
    transition: background 0.7s ease, border-color 0.7s ease;  
}  

.brand-glow {  
    position: absolute;  
    top: -50%;  
    left: -50%;  
    width: 200%;  
    height: 200%;  
    background: radial-gradient(circle at center,  
        rgba(129, 140, 248, 0.08),  
        transparent 70%  
    );  
    pointer-events: none;  
    z-index: 0;  
    animation: brandGlow 10s infinite alternate ease-in-out;  
}  

@keyframes brandGlow {  
    0% { opacity: 0.3; transform: scale(1) rotate(0deg); }  
    50% { opacity: 0.8; transform: scale(1.3) rotate(5deg); }  
    100% { opacity: 1; transform: scale(1.2) rotate(10deg); }  
}  

.brand-icon {  
    font-size: 3.2rem;  
    width: 110px;  
    height: 110px;  
    border-radius: 40px;  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    margin-bottom: 1.2rem;  
    position: relative;  
    z-index: 1;  
    background: linear-gradient(145deg,  
        rgba(129, 140, 248, 0.12),  
        rgba(139, 92, 246, 0.06)  
    );  
    border: 1px solid rgba(129, 140, 248, 0.12);  
    box-shadow:  
        0 20px 60px -10px rgba(129, 140, 248, 0.12),  
        inset 0 1px 0 rgba(255, 255, 255, 0.08);  
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);  
}  

.brand-icon i {  
    font-size: 3.2rem;  
    background: var(--gradient-primary);  
    -webkit-background-clip: text;  
    -webkit-text-fill-color: transparent;  
    background-clip: text;  
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);  
}  

.icon-pulse {  
    position: absolute;  
    width: 100%;  
    height: 100%;  
    border-radius: 40px;  
    border: 1px solid rgba(129, 140, 248, 0.10);  
    animation: pulseRing 4s ease-in-out infinite;  
}  

@keyframes pulseRing {  
    0% { transform: scale(1); opacity: 0.6; }  
    50% { transform: scale(1.25); opacity: 0; }  
    100% { transform: scale(1.5); opacity: 0; }  
}  

.brand-icon:hover {  
    transform: translateY(-4px) scale(1.04);  
    border-color: rgba(129, 140, 248, 0.25);  
    box-shadow:  
        0 40px 90px -10px rgba(129, 140, 248, 0.25),  
        inset 0 1px 0 rgba(255, 255, 255, 0.10);  
}  

.brand-icon:hover i {  
    transform: scale(1.12);  
    background: var(--gradient-secondary);  
    -webkit-background-clip: text;  
    -webkit-text-fill-color: transparent;  
    background-clip: text;  
}  

.brand-name {  
    font-size: 3.2rem;  
    font-weight: 800;  
    letter-spacing: -2.5px;  
    line-height: 1;  
    margin-bottom: 0.2rem;  
    position: relative;  
    z-index: 1;  
    background: linear-gradient(135deg, #ffffff 20%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.3) 80%);  
    -webkit-background-clip: text;  
    -webkit-text-fill-color: transparent;  
    background-clip: text;  
    text-shadow: 0 0 80px rgba(129, 140, 248, 0.15);  
    transition: background 0.5s ease;  
}  

.brand-tagline {  
    font-size: 0.65rem;  
    font-weight: 400;  
    text-transform: uppercase;  
    letter-spacing: 10px;  
    background: var(--gradient-primary);  
    -webkit-background-clip: text;  
    -webkit-text-fill-color: transparent;  
    background-clip: text;  
    margin-bottom: 1.8rem;  
    position: relative;  
    z-index: 1;  
}  

.divider {  
    width: 80px;  
    height: 2px;  
    background: linear-gradient(90deg, transparent, rgba(129, 140, 248, 0.4), transparent);  
    margin: 0.3rem 0 2rem 0;  
    position: relative;  
    z-index: 1;  
    border-radius: 2px;  
    transition: background 0.5s ease;  
}  

.feature-list {  
    display: flex;  
    flex-direction: column;  
    gap: 1.8rem;  
    width: 100%;  
    text-align: left;  
    margin-bottom: 2rem;  
    position: relative;  
    z-index: 1;  
}  

.feature-item {  
    display: flex;  
    align-items: center;  
    gap: 1.2rem;  
    color: var(--text-secondary);  
    font-size: 0.85rem;  
    font-weight: 400;  
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);  
    padding: 0.5rem 0.8rem;  
    border-radius: 14px;  
    cursor: default;  
    position: relative;  
    background: transparent;  
    border: 1px solid transparent;  
}  

.feature-item::before {  
    content: '';  
    position: absolute;  
    inset: -1px;  
    border-radius: 14px;  
    background: linear-gradient(135deg,  
        rgba(129, 140, 248, 0.10),  
        rgba(139, 92, 246, 0.05)  
    );  
    opacity: 0;  
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);  
}  

.feature-item:hover::before {  
    opacity: 1;  
}  

.feature-item:hover {  
    color: var(--text-primary);  
    transform: translateX(10px);  
    border-color: rgba(129, 140, 248, 0.08);  
}  

.feature-item i {  
    width: 28px;  
    font-size: 1.2rem;  
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);  
    position: relative;  
    z-index: 1;  
}  

.feature-item:nth-child(1) i {  
    background: var(--gradient-primary);  
    -webkit-background-clip: text;  
    -webkit-text-fill-color: transparent;  
    background-clip: text;  
}  

.feature-item:nth-child(2) i {  
    background: var(--gradient-accent);  
    -webkit-background-clip: text;  
    -webkit-text-fill-color: transparent;  
    background-clip: text;  
}  

.feature-item:nth-child(3) i {  
    background: var(--gradient-gold);  
    -webkit-background-clip: text;  
    -webkit-text-fill-color: transparent;  
    background-clip: text;  
}  

.feature-item:nth-child(4) i {  
    background: var(--gradient-secondary);  
    -webkit-background-clip: text;  
    -webkit-text-fill-color: transparent;  
    background-clip: text;  
}  

.feature-item span {  
    position: relative;  
    z-index: 1;  
}  

.feature-glow {  
    position: absolute;  
    top: 0;  
    left: 0;  
    width: 100%;  
    height: 100%;  
    background: radial-gradient(circle at 0% 50%,  
        rgba(129, 140, 248, 0.05),  
        transparent 70%  
    );  
    pointer-events: none;  
    border-radius: 14px;  
    opacity: 0;  
    transition: opacity 0.5s ease;  
}  

.feature-item:hover .feature-glow {  
    opacity: 1;  
}  

.brand-footer {  
    margin-top: auto;  
    font-size: 0.6rem;  
    color: var(--text-muted);  
    letter-spacing: 3px;  
    display: flex;  
    align-items: center;  
    gap: 12px;  
    padding: 0.5rem 1.5rem;  
    border-radius: 30px;  
    border: 1px solid rgba(255, 255, 255, 0.03);  
    position: relative;  
    z-index: 1;  
    background: rgba(255, 255, 255, 0.02);  
    -webkit-backdrop-filter: blur(10px);  
    backdrop-filter: blur(10px);  
    transition: background 0.7s ease, border-color 0.7s ease, color 0.7s ease;  
}  

.brand-footer i {  
    font-size: 0.75rem;  
    background: var(--gradient-accent);  
    -webkit-background-clip: text;  
    -webkit-text-fill-color: transparent;  
    background-clip: text;  
}  

.footer-dot {  
    width: 4px;  
    height: 4px;  
    border-radius: 50%;  
    background: var(--text-muted);  
}  

.footer-text {  
    background: linear-gradient(135deg, var(--text-secondary), var(--text-muted));  
    -webkit-background-clip: text;  
    -webkit-text-fill-color: transparent;  
    background-clip: text;  
}  

/* ========================================  
   CHAT MAIN  
   ======================================== */  
.chat-main {  
    flex: 1;  
    display: flex;  
    flex-direction: column;  
    min-width: 0;  
    position: relative;  
    z-index: 1;  
    background: linear-gradient(180deg,  
        rgba(255, 255, 255, 0.005),  
        transparent  
    );  
}  

/* ========================================  
   HEADER - PREMIUM  
   ======================================== */  
.chat-header {  
    padding: 1.2rem 2.4rem;  
    display: flex;  
    justify-content: space-between;  
    align-items: center;  
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);  
    background: linear-gradient(180deg,  
        rgba(255, 255, 255, 0.02),  
        transparent  
    );  
    position: relative;  
    -webkit-backdrop-filter: blur(10px);  
    backdrop-filter: blur(10px);  
    transition: background 0.7s ease, border-color 0.7s ease;  
}  

.chat-header::after {  
    content: '';  
    position: absolute;  
    bottom: 0;  
    left: 10%;  
    width: 80%;  
    height: 1px;  
    background: linear-gradient(90deg, transparent, rgba(129, 140, 248, 0.10), transparent);  
    transition: background 0.7s ease;  
}  

.header-left {  
    display: flex;  
    align-items: center;  
    gap: 16px;  
    color: var(--text-secondary);  
    font-weight: 400;  
    font-size: 0.95rem;  
    transition: color 0.7s ease;  
}  

.header-left i {  
    font-size: 1.4rem;  
    background: var(--gradient-primary);  
    -webkit-background-clip: text;  
    -webkit-text-fill-color: transparent;  
    background-clip: text;  
}  

.header-divider {  
    color: var(--text-muted);  
    opacity: 0.2;  
}  

.header-dev {  
    display: flex;  
    align-items: center;  
    gap: 10px;  
    color: var(--text-muted);  
    font-size: 0.75rem;  
    font-weight: 300;  
    letter-spacing: 0.5px;  
}  

.header-dev i {  
    font-size: 0.65rem;  
    background: var(--gradient-gold);  
    -webkit-background-clip: text;  
    -webkit-text-fill-color: transparent;  
    background-clip: text;  
}  

.header-right {  
    display: flex;  
    align-items: center;  
    gap: 14px;  
    color: var(--text-muted);  
    font-size: 0.65rem;  
    letter-spacing: 1px;  
    padding: 0.3rem 1.4rem 0.3rem 0.8rem;  
    border-radius: 30px;  
    border: 1px solid rgba(255, 255, 255, 0.04);  
    background: rgba(255, 255, 255, 0.02);  
    transition: background 0.7s ease, border-color 0.7s ease, color 0.7s ease;  
}  

.status-dot {  
    width: 8px;  
    height: 8px;  
    border-radius: 50%;  
    background: var(--gradient-accent);  
    box-shadow: 0 0 30px rgba(96, 165, 250, 0.4);  
    display: inline-block;  
    animation: statusPulse 2.5s ease-in-out infinite;  
}  

@keyframes statusPulse {  
    0%, 100% { opacity: 0.3; transform: scale(0.8); }  
    50% { opacity: 1; transform: scale(1.3); }  
}  

.status-text {  
    background: linear-gradient(135deg, var(--text-secondary), var(--text-muted));  
    -webkit-background-clip: text;  
    -webkit-text-fill-color: transparent;  
    background-clip: text;  
}  

.status-divider {  
    color: var(--text-muted);  
    opacity: 0.2;  
}  

/* ========================================  
   CLEAR CHAT BUTTON  
   ======================================== */  
.clear-chat-btn {  
    background: none;  
    border: none;  
    color: var(--text-muted);  
    cursor: pointer;  
    font-size: 0.85rem;  
    padding: 4px 10px;  
    border-radius: 8px;  
    transition: all 0.4s ease;  
    opacity: 0.5;  
}  

.clear-chat-btn:hover {  
    opacity: 1;  
    color: #f472b6;  
    background: rgba(244, 114, 182, 0.12);  
}  

/* ========================================  
   MESSAGES CONTAINER  
   ======================================== */  
.messages-container {  
    flex: 1;  
    padding: 2rem 2.4rem 1rem 2.4rem;  
    overflow-y: auto;  
    display: flex;  
    flex-direction: column;  
    gap: 2rem;  
    scroll-behavior: smooth;  
    background: radial-gradient(ellipse at 50% 0%, rgba(129, 140, 248, 0.03), transparent 60%);  
    transition: background 0.7s ease;  
}  

.messages-container::-webkit-scrollbar {  
    width: 5px;  
}  

.messages-container::-webkit-scrollbar-track {  
    background: transparent;  
}  

.messages-container::-webkit-scrollbar-thumb {  
    background: linear-gradient(180deg, var(--quantum-blue), var(--quantum-purple));  
    border-radius: 10px;  
}  

/* ========================================  
   MESSAGE - PREMIUM  
   ======================================== */  
.message {  
    display: flex;  
    align-items: flex-start;  
    gap: 18px;  
    max-width: 82%;  
    animation: messageIn 0.6s cubic-bezier(0.16, 1, 0.3, 1);  
}  

.message.user-message {  
    align-self: flex-end;  
    flex-direction: row-reverse;  
}  

@keyframes messageIn {  
    0% { opacity: 0; transform: translateY(25px) scale(0.94); }  
    100% { opacity: 1; transform: translateY(0) scale(1); }  
}  

.avatar {  
    width: 48px;  
    height: 48px;  
    border-radius: 24px;  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    flex-shrink: 0;  
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);  
    position: relative;  
}  

.bot-avatar {  
    background: linear-gradient(135deg,  
        rgba(129, 140, 248, 0.10),  
        rgba(139, 92, 246, 0.05)  
    );  
    border: 1px solid rgba(129, 140, 248, 0.08);  
}  

.user-avatar {  
    background: linear-gradient(135deg,  
        rgba(255, 255, 255, 0.05),  
        rgba(255, 255, 255, 0.02)  
    );  
    border: 1px solid rgba(255, 255, 255, 0.04);  
}  

.avatar i {  
    font-size: 1.4rem;  
}  

.bot-avatar i {  
    background: var(--gradient-primary);  
    -webkit-background-clip: text;  
    -webkit-text-fill-color: transparent;  
    background-clip: text;  
}  

.user-avatar i {  
    color: var(--text-secondary);  
}  

.avatar-glow {  
    position: absolute;  
    width: 100%;  
    height: 100%;  
    border-radius: 24px;  
    background: radial-gradient(circle at 30% 30%,  
        rgba(129, 140, 248, 0.10),  
        transparent 70%  
    );  
    pointer-events: none;  
}  

.bubble {  
    padding: 1.1rem 2rem;  
    border-radius: 30px;  
    border-top-left-radius: 4px;  
    border: 1px solid rgba(255, 255, 255, 0.02);  
    box-shadow:  
        0 10px 50px rgba(0, 0, 0, 0.30),  
        inset 0 1px 0 rgba(255, 255, 255, 0.04);  
    color: var(--text-primary);  
    font-size: 0.95rem;  
    line-height: 1.8;  
    word-break: break-word;  
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);  
    position: relative;  
    -webkit-backdrop-filter: blur(10px);  
    backdrop-filter: blur(10px);  
}  

.bot-bubble {  
    background: linear-gradient(135deg,  
        rgba(255, 255, 255, 0.04),  
        rgba(129, 140, 248, 0.04)  
    );  
    border: 1px solid rgba(129, 140, 248, 0.05);  
}  

.user-bubble {  
    background: linear-gradient(135deg,  
        rgba(129, 140, 248, 0.08),  
        rgba(139, 92, 246, 0.04)  
    );  
    border: 1px solid rgba(129, 140, 248, 0.06);  
    border-top-right-radius: 4px;  
    border-top-left-radius: 30px;  
}  

.bubble-shine {  
    position: absolute;  
    top: 0;  
    left: 0;  
    width: 100%;  
    height: 100%;  
    border-radius: 30px;  
    background: linear-gradient(135deg,  
        rgba(255, 255, 255, 0.04),  
        transparent 60%  
    );  
    pointer-events: none;  
}  

.bubble p {  
    position: relative;  
    z-index: 1;  
    color: var(--text-primary);  
}  

.bubble p strong {  
    background: var(--gradient-primary);  
    -webkit-background-clip: text;  
    -webkit-text-fill-color: transparent;  
    background-clip: text;  
}  

.bubble .timestamp {  
    display: block;  
    font-size: 0.55rem;  
    color: var(--text-muted);  
    margin-top: 12px;  
    letter-spacing: 0.5px;  
}  

.bubble-footer {  
    display: flex;  
    align-items: center;  
    gap: 10px;  
    margin-top: 10px;  
    padding-top: 8px;  
    border-top: 1px solid rgba(255, 255, 255, 0.03);  
}  

.bubble-footer .timestamp {  
    margin-top: 0;  
}  

.bubble-dot {  
    color: var(--text-muted);  
    font-size: 0.35rem;  
}  

.bubble-status {  
    font-size: 0.55rem;  
    background: var(--gradient-accent);  
    -webkit-background-clip: text;  
    -webkit-text-fill-color: transparent;  
    background-clip: text;  
    letter-spacing: 0.5px;  
}  

/* ========================================  
   INPUT - PREMIUM  
   ======================================== */  
.input-area {  
    padding: 1.2rem 2.4rem 1.8rem 2.4rem;  
    background: linear-gradient(180deg,  
        transparent,  
        rgba(0, 0, 0, 0.04)  
    );  
    border-top: 1px solid rgba(255, 255, 255, 0.03);  
    position: relative;  
    transition: background 0.7s ease, border-color 0.7s ease;  
}  

.upload-wrapper {  
    display: flex;  
    flex-direction: column;  
    gap: 10px;  
    margin-bottom: 18px;  
}  

.upload-row {  
    display: flex;  
    align-items: center;  
    gap: 14px;  
    flex-wrap: wrap;  
    width: 100%;  
}  

.upload-btn {  
    display: flex;  
    align-items: center;  
    gap: 14px;  
    background: linear-gradient(135deg,  
        rgba(129, 140, 248, 0.05),  
        rgba(139, 92, 246, 0.03)  
    );  
    padding: 0.7rem 2rem;  
    border-radius: 30px;  
    border: 1px solid rgba(129, 140, 248, 0.05);  
    color: var(--text-secondary);  
    font-size: 0.78rem;  
    font-weight: 400;  
    cursor: pointer;  
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);  
    letter-spacing: 0.3px;  
    position: relative;  
    overflow: hidden;  
}  

.upload-btn i {  
    font-size: 1.1rem;  
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);  
    background: var(--gradient-primary);  
    -webkit-background-clip: text;  
    -webkit-text-fill-color: transparent;  
    background-clip: text;  
}  

.btn-ripple {  
    position: absolute;  
    top: 50%;  
    left: 50%;  
    width: 0;  
    height: 0;  
    border-radius: 50%;  
    background: radial-gradient(circle, rgba(129, 140, 248, 0.10), transparent);  
    transform: translate(-50%, -50%);  
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);  
}  

.upload-btn:hover .btn-ripple {  
    width: 350px;  
    height: 350px;  
}  

.upload-btn:hover {  
    background: linear-gradient(135deg,  
        rgba(129, 140, 248, 0.10),  
        rgba(139, 92, 246, 0.05)  
    );  
    border-color: rgba(129, 140, 248, 0.12);  
    color: var(--text-primary);  
    transform: translateY(-2px);  
    box-shadow: 0 10px 40px -10px rgba(129, 140, 248, 0.10);  
}  

.upload-btn:hover i {  
    transform: translateY(-1px) scale(1.05);  
}  

.file-name {  
    font-size: 0.7rem;  
    color: var(--text-muted);  
    font-weight: 300;  
    max-width: 220px;  
    white-space: nowrap;  
    overflow: hidden;  
    text-overflow: ellipsis;  
    padding: 0.4rem 1.2rem;  
    border-radius: 16px;  
    border: 1px solid rgba(255, 255, 255, 0.03);  
    display: flex;  
    align-items: center;  
    gap: 8px;  
    background: rgba(255, 255, 255, 0.015);  
    transition: background 0.7s ease, border-color 0.7s ease, color 0.7s ease;  
}  

.file-name i {  
    background: var(--gradient-primary);  
    -webkit-background-clip: text;  
    -webkit-text-fill-color: transparent;  
    background-clip: text;  
}  

.question-count-wrapper {  
    display: flex;  
    align-items: center;  
    gap: 10px;  
    margin-left: auto;  
    padding: 0.3rem 1rem;  
    border-radius: 20px;  
    background: rgba(255, 255, 255, 0.02);  
    border: 1px solid rgba(255, 255, 255, 0.03);  
    transition: background 0.7s ease, border-color 0.7s ease;  
}  

.question-count-wrapper label {  
    color: var(--text-secondary);  
    font-size: 0.7rem;  
    font-weight: 400;  
    display: flex;  
    align-items: center;  
    gap: 6px;  
    transition: color 0.7s ease;  
}  

.question-count-wrapper label i {  
    background: var(--gradient-accent);  
    -webkit-background-clip: text;  
    -webkit-text-fill-color: transparent;  
    background-clip: text;  
    font-size: 0.85rem;  
}  

.question-count-wrapper input {  
    width: 65px;  
    padding: 6px 10px;  
    background: rgba(255, 255, 255, 0.04);  
    border: 1px solid rgba(129, 140, 248, 0.10);  
    border-radius: 6px;  
    color: var(--text-primary);  
    font-size: 0.9rem;  
    text-align: center;  
    outline: none;  
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);  
    font-family: 'Inter', sans-serif;  
    -webkit-appearance: none;  
    -moz-appearance: textfield;  
    appearance: none;  
}  

.question-count-wrapper input:focus {  
    border-color: rgba(129, 140, 248, 0.25);  
    background: rgba(255, 255, 255, 0.06);  
    box-shadow: 0 0 60px rgba(129, 140, 248, 0.05);  
}  

.question-count-wrapper input::-webkit-inner-spin-button,  
.question-count-wrapper input::-webkit-outer-spin-button {  
    -webkit-appearance: none;  
    margin: 0;  
}  

.question-count-wrapper .hint {  
    font-size: 0.6rem;  
    color: var(--text-muted);  
    font-weight: 300;  
}  

.upload-progress {  
    width: 100%;  
    height: 2px;  
    background: rgba(129, 140, 248, 0.05);  
    border-radius: 2px;  
    overflow: hidden;  
    opacity: 0;  
    transition: opacity 0.5s ease;  
}  

.upload-progress.active {  
    opacity: 1;  
}  

.progress-bar {  
    height: 100%;  
    width: 0%;  
    background: var(--gradient-primary);  
    border-radius: 2px;  
    transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);  
    box-shadow: 0 0 30px rgba(129, 140, 248, 0.20);  
}  

.upload-status {  
    display: none;  
}  

.input-row {  
    display: flex;  
    gap: 18px;  
    align-items: center;  
}  

.input-wrapper {  
    flex: 1;  
    position: relative;  
}  

.input-icon {  
    position: absolute;  
    left: 20px;  
    top: 50%;  
    transform: translateY(-50%);  
    font-size: 1rem;  
    opacity: 0.5;  
    pointer-events: none;  
    background: var(--gradient-primary);  
    -webkit-background-clip: text;  
    -webkit-text-fill-color: transparent;  
    background-clip: text;  
}  

.input-wrapper input {  
    width: 100%;  
    background: rgba(255, 255, 255, 0.02);  
    border: 1px solid rgba(255, 255, 255, 0.02);  
    border-radius: 40px;  
    padding: 1rem 2.2rem 1rem 3.5rem;  
    font-family: 'Inter', sans-serif;  
    font-size: 0.95rem;  
    color: var(--text-primary);  
    outline: none;  
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);  
    -webkit-backdrop-filter: blur(10px);  
    backdrop-filter: blur(10px);  
}  

.input-wrapper input::placeholder {  
    color: var(--text-muted);  
    font-weight: 300;  
    letter-spacing: 0.3px;  
}  

.input-wrapper input:focus {  
    border-color: rgba(129, 140, 248, 0.10);  
    background: rgba(255, 255, 255, 0.03);  
    box-shadow: 0 0 80px -15px rgba(129, 140, 248, 0.06);  
}  

.input-glow {  
    position: absolute;  
    inset: 0;  
    border-radius: 40px;  
    pointer-events: none;  
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);  
}  

.input-wrapper input:focus ~ .input-glow {  
    box-shadow: inset 0 0 80px rgba(129, 140, 248, 0.03);  
}  

#sendBtn {  
    width: 58px;  
    height: 58px;  
    border-radius: 40px;  
    border: none;  
    background: var(--gradient-primary);  
    color: #fff;  
    font-size: 1.3rem;  
    cursor: pointer;  
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);  
    box-shadow: 0 10px 50px -8px rgba(129, 140, 248, 0.30);  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    position: relative;  
    overflow: hidden;  
    border: 1px solid rgba(255, 255, 255, 0.08);  
}  

#sendBtn .btn-glow {  
    position: absolute;  
    inset: 0;  
    border-radius: 40px;  
    background: radial-gradient(circle at 30% 30%,  
        rgba(255, 255, 255, 0.12),  
        transparent 60%  
    );  
    pointer-events: none;  
}  

#sendBtn::after {  
    content: '';  
    position: absolute;  
    inset: 0;  
    border-radius: 40px;  
    background: var(--gradient-secondary);  
    opacity: 0;  
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);  
}  

#sendBtn:hover::after {  
    opacity: 1;  
}  

#sendBtn i {  
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);  
    position: relative;  
    z-index: 1;  
}  

#sendBtn:hover {  
    transform: scale(0.92);  
    box-shadow: 0 10px 60px -8px rgba(129, 140, 248, 0.40);  
}  

#sendBtn:hover i {  
    transform: rotate(25deg) translateX(3px);  
}  

#sendBtn:active {  
    transform: scale(0.82);  
}  

.input-hint {  
    margin-top: 16px;  
    display: flex;  
    align-items: center;  
    gap: 14px;  
    color: var(--text-muted);  
    font-size: 0.55rem;  
    letter-spacing: 1.5px;  
    text-transform: uppercase;  
    font-weight: 300;  
    transition: color 0.7s ease;  
}  

.input-hint i {  
    font-size: 0.75rem;  
    opacity: 0.5;  
    background: var(--gradient-accent);  
    -webkit-background-clip: text;  
    -webkit-text-fill-color: transparent;  
    background-clip: text;  
}  

.hint-dot {  
    color: var(--text-muted);  
    opacity: 0.15;  
}  

.hint-key {  
    padding: 0.2rem 0.8rem;  
    border-radius: 4px;  
    background: rgba(255, 255, 255, 0.02);  
    border: 1px solid rgba(255, 255, 255, 0.04);  
    font-family: 'Inter', sans-serif;  
    font-size: 0.5rem;  
    letter-spacing: 0.5px;  
}  

/* ========================================  
   THEME TOGGLE BUTTON  
   ======================================== */  
.theme-toggle {  
    position: fixed;  
    top: 24px;  
    right: 24px;  
    z-index: 1000;  
    background: rgba(255, 255, 255, 0.08);  
    border: 1px solid rgba(255, 255, 255, 0.12);  
    border-radius: 50px;  
    padding: 10px 20px;  
    cursor: pointer;  
    display: flex;  
    align-items: center;  
    gap: 12px;  
    -webkit-backdrop-filter: blur(20px);  
    backdrop-filter: blur(20px);  
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);  
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.40);  
}  

.theme-toggle:hover {  
    transform: scale(1.06);  
    border-color: rgba(129, 140, 248, 0.30);  
    box-shadow: 0 4px 40px rgba(129, 140, 248, 0.15);  
}  

.theme-toggle i {  
    font-size: 1.1rem;  
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);  
}  

.theme-toggle .fa-sun {  
    color: #fbbf24;  
}  

.theme-toggle .fa-moon {  
    color: #a78bfa;  
}  

.toggle-track {  
    width: 36px;  
    height: 20px;  
    background: rgba(255, 255, 255, 0.15);  
    border-radius: 20px;  
    position: relative;  
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);  
    border: 1px solid rgba(255, 255, 255, 0.08);  
}  

.toggle-track::after {  
    content: '';  
    position: absolute;  
    width: 16px;  
    height: 16px;  
    border-radius: 50%;  
    background: linear-gradient(135deg, #818cf8, #7c3aed);  
    top: 1px;  
    left: 1px;  
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);  
    box-shadow: 0 2px 12px rgba(129, 140, 248, 0.50);  
}  

/* Dark mode (default) */  
body.dark-mode .theme-toggle .fa-sun {  
    display: inline;  
}  

body.dark-mode .theme-toggle .fa-moon {  
    display: none;  
}  

/* Light mode */  
body.light-mode .theme-toggle .fa-sun {  
    display: none;  
}  

body.light-mode .theme-toggle .fa-moon {  
    display: inline;  
}  

body.light-mode .toggle-track::after {  
    transform: translateX(16px);  
    background: linear-gradient(135deg, #fbbf24, #f97316);  
}  

/* ========================================  
   LIGHT MODE VARIABLES (Perfect Readability - FIXED)  
   ======================================== */  
body.light-mode {  
    --bg-deep: #eef1f5;  
    --text-primary: rgba(10, 15, 30, 0.95);  
    --text-secondary: rgba(10, 15, 30, 0.70);  
    --text-muted: rgba(10, 15, 30, 0.40);  
    --text-dim: rgba(10, 15, 30, 0.15);  
    --glass-premium: rgba(255, 255, 255, 0.80);  
    --glass-border: rgba(0, 0, 0, 0.06);  
}  

body.light-mode .app-wrapper {  
    background: rgba(255, 255, 255, 0.85);  
    -webkit-backdrop-filter: blur(80px) saturate(600%);  
    backdrop-filter: blur(80px) saturate(600%);  
    border: 1px solid rgba(0, 0, 0, 0.06);  
    box-shadow:  
        0 60px 180px rgba(0, 0, 0, 0.08),  
        0 0 0 1px rgba(0, 0, 0, 0.04),  
        inset 0 1px 0 rgba(255, 255, 255, 0.80);  
}  

body.light-mode .brand-panel {  
    background: rgba(255, 255, 255, 0.70);  
    border-right: 1px solid rgba(0, 0, 0, 0.06);  
}  

body.light-mode .brand-name {  
    background: linear-gradient(135deg,   
        rgba(10, 15, 30, 0.95) 20%,   
        rgba(10, 15, 30, 0.70) 50%,   
        rgba(10, 15, 30, 0.40) 80%  
    );  
    -webkit-background-clip: text;  
    -webkit-text-fill-color: transparent;  
    background-clip: text;  
}  

body.light-mode .bubble {  
    border: 1px solid rgba(0, 0, 0, 0.06);  
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);  
}  

/* CRITICAL FIX: Bubble text in light mode */  
body.light-mode .bubble p {  
    color: rgba(10, 15, 30, 0.95) !important;  
}  

body.light-mode .bot-bubble {  
    background: rgba(255, 255, 255, 0.92);  
    border: 1px solid rgba(0, 0, 0, 0.06);  
}  

body.light-mode .user-bubble {  
    background: linear-gradient(135deg,   
        rgba(129, 140, 248, 0.12),   
        rgba(139, 92, 246, 0.06)  
    );  
    border: 1px solid rgba(129, 140, 248, 0.12);  
}  

body.light-mode .bubble p strong {  
    background: var(--gradient-primary);  
    -webkit-background-clip: text;  
    -webkit-text-fill-color: transparent;  
    background-clip: text;  
}  

body.light-mode .bubble .timestamp {  
    color: rgba(10, 15, 30, 0.35);  
}  

body.light-mode .bubble-footer {  
    border-top: 1px solid rgba(0, 0, 0, 0.04);  
}  

body.light-mode .bubble-status {  
    background: var(--gradient-accent);  
    -webkit-background-clip: text;  
    -webkit-text-fill-color: transparent;  
    background-clip: text;  
}  

/* CRITICAL FIX: Chat header text in light mode */  
body.light-mode .chat-header {  
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);  
    background: rgba(255, 255, 255, 0.50);  
}  

body.light-mode .header-left {  
    color: rgba(10, 15, 30, 0.70);  
}  

body.light-mode .header-left i {  
    background: var(--gradient-primary);  
    -webkit-background-clip: text;  
    -webkit-text-fill-color: transparent;  
    background-clip: text;  
}  

body.light-mode .header-right {  
    border: 1px solid rgba(0, 0, 0, 0.06);  
    background: rgba(255, 255, 255, 0.50);  
}  

body.light-mode .header-dev {  
    color: rgba(10, 15, 30, 0.35);  
}  

body.light-mode .status-text {  
    background: linear-gradient(135deg,   
        rgba(10, 15, 30, 0.70),   
        rgba(10, 15, 30, 0.35)  
    );  
    -webkit-background-clip: text;  
    -webkit-text-fill-color: transparent;  
    background-clip: text;  
}  

/* CRITICAL FIX: Input area text in light mode */  
body.light-mode .input-area {  
    border-top: 1px solid rgba(0, 0, 0, 0.06);  
    background: rgba(255, 255, 255, 0.20);  
}  

body.light-mode .input-wrapper input {  
    background: rgba(255, 255, 255, 0.80);  
    border: 1px solid rgba(0, 0, 0, 0.06);  
    color: rgba(10, 15, 30, 0.95);  
}  

body.light-mode .input-wrapper input::placeholder {  
    color: rgba(10, 15, 30, 0.35);  
}  

body.light-mode .input-icon {  
    background: var(--gradient-primary);  
    -webkit-background-clip: text;  
    -webkit-text-fill-color: transparent;  
    background-clip: text;  
}  

body.light-mode .upload-btn {  
    background: rgba(0, 0, 0, 0.02);  
    border: 1px solid rgba(0, 0, 0, 0.06);  
    color: rgba(10, 15, 30, 0.70);  
}  

body.light-mode .upload-btn:hover {  
    background: rgba(0, 0, 0, 0.04);  
    border-color: rgba(129, 140, 248, 0.20);  
    color: rgba(10, 15, 30, 0.95);  
}  

body.light-mode .upload-btn i {  
    background: var(--gradient-primary);  
    -webkit-background-clip: text;  
    -webkit-text-fill-color: transparent;  
    background-clip: text;  
}  

body.light-mode .file-name {  
    background: rgba(255, 255, 255, 0.50);  
    border: 1px solid rgba(0, 0, 0, 0.06);  
    color: rgba(10, 15, 30, 0.40);  
}  

body.light-mode .question-count-wrapper {  
    background: rgba(255, 255, 255, 0.50);  
    border: 1px solid rgba(0, 0, 0, 0.06);  
}  

body.light-mode .question-count-wrapper label {  
    color: rgba(10, 15, 30, 0.70);  
}  

body.light-mode .question-count-wrapper input {  
    background: rgba(255, 255, 255, 0.80);  
    border: 1px solid rgba(0, 0, 0, 0.06);  
    color: rgba(10, 15, 30, 0.95);  
}  

body.light-mode .input-hint {  
    color: rgba(10, 15, 30, 0.30);  
}  

body.light-mode .hint-key {  
    background: rgba(0, 0, 0, 0.02);  
    border: 1px solid rgba(0, 0, 0, 0.06);  
}  

/* CRITICAL FIX: Feature items in light mode */  
body.light-mode .feature-item {  
    color: rgba(10, 15, 30, 0.65);  
}  

body.light-mode .feature-item:hover {  
    color: rgba(10, 15, 30, 0.95);  
}  

body.light-mode .brand-footer {  
    border: 1px solid rgba(0, 0, 0, 0.06);  
    background: rgba(255, 255, 255, 0.20);  
}  

body.light-mode .footer-text {  
    background: linear-gradient(135deg,   
        rgba(10, 15, 30, 0.70),   
        rgba(10, 15, 30, 0.35)  
    );  
    -webkit-background-clip: text;  
    -webkit-text-fill-color: transparent;  
    background-clip: text;  
}  

body.light-mode .brand-footer i {  
    background: var(--gradient-accent);  
    -webkit-background-clip: text;  
    -webkit-text-fill-color: transparent;  
    background-clip: text;  
}  

/* CRITICAL FIX: Avatar icons in light mode */  
body.light-mode .user-avatar i {  
    color: rgba(10, 15, 30, 0.50);  
}  

body.light-mode .bot-avatar i {  
    background: var(--gradient-primary);  
    -webkit-background-clip: text;  
    -webkit-text-fill-color: transparent;  
    background-clip: text;  
}  

/* Divider in light mode */  
body.light-mode .divider {  
    background: linear-gradient(90deg, transparent, rgba(129, 140, 248, 0.40), transparent);  
}  

/* Chat header after in light mode */  
body.light-mode .chat-header::after {  
    background: linear-gradient(90deg, transparent, rgba(129, 140, 248, 0.15), transparent);  
}  

/* Upload progress in light mode */  
body.light-mode .upload-progress {  
    background: rgba(0, 0, 0, 0.04);  
}  

/* Progress bar in light mode */  
body.light-mode .progress-bar {  
    background: var(--gradient-primary);  
}  

/* Clear chat button in light mode */  
body.light-mode .clear-chat-btn:hover {  
    background: rgba(244, 114, 182, 0.08);  
}  

/* Messages container in light mode */  
body.light-mode .messages-container {  
    background: radial-gradient(ellipse at 50% 0%,   
        rgba(129, 140, 248, 0.04),   
        transparent 60%  
    );  
}  

/* Orbs in light mode */  
body.light-mode .orb1 {  
    background: radial-gradient(circle, rgba(129, 140, 248, 0.12), rgba(139, 92, 246, 0.05));  
}  
body.light-mode .orb2 {  
    background: radial-gradient(circle, rgba(96, 165, 250, 0.10), rgba(34, 211, 238, 0.04));  
}  
body.light-mode .orb3 {  
    background: radial-gradient(circle, rgba(139, 92, 246, 0.10), rgba(244, 114, 182, 0.04));  
}  
body.light-mode .orb4 {  
    background: radial-gradient(circle, rgba(251, 191, 36, 0.10), rgba(249, 115, 22, 0.04));  
}  
body.light-mode .orb5 {  
    background: radial-gradient(circle, rgba(244, 114, 182, 0.08), rgba(239, 68, 68, 0.03));  
}  
body.light-mode .orb6 {  
    background: radial-gradient(circle, rgba(96, 165, 250, 0.09), rgba(34, 211, 238, 0.04));  
}  
body.light-mode .orb7 {  
    background: radial-gradient(circle, rgba(139, 92, 246, 0.09), rgba(129, 140, 248, 0.04));  
}  
body.light-mode .orb8 {  
    background: radial-gradient(circle, rgba(251, 191, 36, 0.08), rgba(249, 115, 22, 0.03));  
}  

/* Stars in light mode */  
body.light-mode .stars,  
body.light-mode .stars2,  
body.light-mode .stars3 {  
    opacity: 0.15;  
}  

/* Cosmic rings in light mode */  
body.light-mode .cosmic-ring {  
    border-color: rgba(129, 140, 248, 0.08);  
}  

body.light-mode .cosmic-ring-1 {  
    border-color: rgba(129, 140, 248, 0.10);  
    background: radial-gradient(circle, rgba(129, 140, 248, 0.05), transparent 70%);  
}  

body.light-mode .cosmic-ring-2 {  
    border-color: rgba(139, 92, 246, 0.08);  
    background: radial-gradient(circle, rgba(139, 92, 246, 0.04), transparent 70%);  
}  

body.light-mode .cosmic-ring-3 {  
    border-color: rgba(96, 165, 250, 0.08);  
    background: radial-gradient(circle, rgba(96, 165, 250, 0.04), transparent 70%);  
}  

body.light-mode .cosmic-ring-4 {  
    border-color: rgba(244, 114, 182, 0.06);  
    background: radial-gradient(circle, rgba(244, 114, 182, 0.03), transparent 70%);  
}  

/* Brand glow in light mode */  
body.light-mode .brand-glow {  
    background: radial-gradient(circle at center,  
        rgba(129, 140, 248, 0.10),  
        transparent 70%  
    );  
}  

/* Brand icon in light mode */  
body.light-mode .brand-icon {  
    background: linear-gradient(145deg,  
        rgba(129, 140, 248, 0.12),  
        rgba(139, 92, 246, 0.06)  
    );  
    border: 1px solid rgba(129, 140, 248, 0.15);  
}  

body.light-mode .brand-icon i {  
    background: var(--gradient-primary);  
    -webkit-background-clip: text;  
    -webkit-text-fill-color: transparent;  
    background-clip: text;  
}  

/* Feature item before in light mode */  
body.light-mode .feature-item::before {  
    background: linear-gradient(135deg,  
        rgba(129, 140, 248, 0.12),  
        rgba(139, 92, 246, 0.06)  
    );  
}  

body.light-mode .feature-glow {  
    background: radial-gradient(circle at 0% 50%,  
        rgba(129, 140, 248, 0.06),  
        transparent 70%  
    );  
}  

/* App wrapper border in light mode */  
body.light-mode .app-wrapper::before {  
    background: linear-gradient(135deg,  
        rgba(129, 140, 248, 0.35),  
        rgba(139, 92, 246, 0.20),  
        rgba(96, 165, 250, 0.35),  
        rgba(244, 114, 182, 0.12),  
        rgba(251, 191, 36, 0.08)  
    );  
}  

body.light-mode .app-wrapper::after {  
    background:   
        radial-gradient(ellipse at 20% 30%,   
            rgba(129, 140, 248, 0.08),   
            transparent 60%  
        ),  
        radial-gradient(ellipse at 80% 70%,   
            rgba(139, 92, 246, 0.05),   
            transparent 50%  
        ),  
        radial-gradient(ellipse at 50% 50%,   
            rgba(96, 165, 250, 0.04),   
            transparent 70%  
        );  
}  

/* Button ripple in light mode */  
body.light-mode .btn-ripple {  
    background: radial-gradient(circle, rgba(129, 140, 248, 0.12), transparent);  
}  

/* Send button in light mode */  
body.light-mode #sendBtn {  
    background: var(--gradient-primary);  
    box-shadow: 0 10px 50px -8px rgba(129, 140, 248, 0.30);  
}  

body.light-mode #sendBtn::after {  
    background: var(--gradient-secondary);  
}  

/* Avatar glow in light mode */  
body.light-mode .avatar-glow {  
    background: radial-gradient(circle at 30% 30%,  
        rgba(129, 140, 248, 0.12),  
        transparent 70%  
    );  
}  

body.light-mode .bot-avatar {  
    background: linear-gradient(135deg,  
        rgba(129, 140, 248, 0.12),  
        rgba(139, 92, 246, 0.06)  
    );  
    border: 1px solid rgba(129, 140, 248, 0.10);  
}  

body.light-mode .user-avatar {  
    background: linear-gradient(135deg,  
        rgba(0, 0, 0, 0.04),  
        rgba(0, 0, 0, 0.02)  
    );  
    border: 1px solid rgba(0, 0, 0, 0.06);  
}  

body.light-mode .status-dot {  
    background: var(--gradient-accent);  
    box-shadow: 0 0 30px rgba(96, 165, 250, 0.30);  
}  

body.light-mode .icon-pulse {  
    border-color: rgba(129, 140, 248, 0.12);  
}  

/* ========================================  
   ========================================  
   CRITICAL FIX: FORCE ALL TEXT IN BOT MESSAGES TO BE READABLE IN LIGHT MODE  
   Developed by: Sohani Iftikhar ✨  
   This ensures all dynamically generated content, nested elements,  
   and inline-styled text in bot messages are visible in light mode.  
   ========================================  
   ======================================== */  

/* Force ALL text inside bot messages to be dark in light mode */  
body.light-mode .bot-bubble,  
body.light-mode .bot-bubble *,  
body.light-mode .bot-message .bubble,  
body.light-mode .bot-message .bubble *,  
body.light-mode .message.bot-message *,  
body.light-mode .bubble p,  
body.light-mode .bubble span,  
body.light-mode .bubble div,  
body.light-mode .bubble strong,  
body.light-mode .bubble em,  
body.light-mode .bubble i,  
body.light-mode .bubble b,  
body.light-mode .bubble code,  
body.light-mode .bubble pre,  
body.light-mode .bubble h1,  
body.light-mode .bubble h2,  
body.light-mode .bubble h3,  
body.light-mode .bubble h4,  
body.light-mode .bubble h5,  
body.light-mode .bubble h6,  
body.light-mode .bubble li,  
body.light-mode .bubble ul,  
body.light-mode .bubble ol,  
body.light-mode .bubble blockquote,  
body.light-mode .bubble a,  
body.light-mode .bubble small,  
body.light-mode .bubble sub,  
body.light-mode .bubble sup,  
body.light-mode .bubble mark,  
body.light-mode .bubble del,  
body.light-mode .bubble ins,  
body.light-mode .bubble u {  
    color: rgba(10, 15, 30, 0.95) !important;  
}  

/* Force any inline style="" text to be dark */  
body.light-mode .bot-bubble [style*="color"] {  
    color: rgba(10, 15, 30, 0.95) !important;  
}  

/* Force any inline style="" text to be dark (specific for white/black/hex codes) */  
body.light-mode .bot-bubble [style*="color: white"],  
body.light-mode .bot-bubble [style*="color:white"],  
body.light-mode .bot-bubble [style*="color: #fff"],  
body.light-mode .bot-bubble [style*="color:#fff"],  
body.light-mode .bot-bubble [style*="color: #ffffff"],  
body.light-mode .bot-bubble [style*="color:#ffffff"],  
body.light-mode .bot-bubble [style*="color: #000"],  
body.light-mode .bot-bubble [style*="color:#000"],  
body.light-mode .bot-bubble [style*="color: #000000"],  
body.light-mode .bot-bubble [style*="color:#000000"] {  
    color: rgba(10, 15, 30, 0.95) !important;  
}  

/* Force specific elements that might have white text from JavaScript rendering */  
body.light-mode .bot-bubble .message-content,  
body.light-mode .bot-bubble .answer-text,  
body.light-mode .bot-bubble .response-text,  
body.light-mode .bot-bubble .ai-response,  
body.light-mode .bot-bubble .bot-text,  
body.light-mode .bot-bubble .content,  
body.light-mode .bot-bubble .mcq-text,  
body.light-mode .bot-bubble .question-text,  
body.light-mode .bot-bubble .option-text,  
body.light-mode .bot-bubble .explanation-text,  
body.light-mode .bot-bubble .generated-content {  
    color: rgba(10, 15, 30, 0.95) !important;  
}  

/* Handle code blocks in light mode */  
body.light-mode .bot-bubble code,  
body.light-mode .bot-bubble pre,  
body.light-mode .bot-bubble .code-block,  
body.light-mode .bot-bubble .highlight,  
body.light-mode .bot-bubble .hljs {  
    color: rgba(10, 15, 30, 0.95) !important;  
    background: rgba(0, 0, 0, 0.06) !important;  
}  

/* Handle links in bot messages */  
body.light-mode .bot-bubble a,  
body.light-mode .bot-bubble .link,  
body.light-mode .bot-bubble [href] {  
    color: #4f46e5 !important;  
    text-decoration: underline !important;  
}  

/* Handle list items */  
body.light-mode .bot-bubble li,  
body.light-mode .bot-bubble .list-item {  
    color: rgba(10, 15, 30, 0.95) !important;  
}  

/* Handle blockquotes */  
body.light-mode .bot-bubble blockquote,  
body.light-mode .bot-bubble .quote {  
    color: rgba(10, 15, 30, 0.95) !important;  
    border-left-color: rgba(129, 140, 248, 0.30) !important;  
}  

/* Handle headings in bot messages */  
body.light-mode .bot-bubble h1,  
body.light-mode .bot-bubble h2,  
body.light-mode .bot-bubble h3,  
body.light-mode .bot-bubble h4,  
body.light-mode .bot-bubble h5,  
body.light-mode .bot-bubble h6 {  
    color: rgba(10, 15, 30, 0.98) !important;  
}  

/* Handle bold and strong text */  
body.light-mode .bot-bubble strong,  
body.light-mode .bot-bubble b,  
body.light-mode .bot-bubble .bold,  
body.light-mode .bot-bubble .strong {  
    color: rgba(10, 15, 30, 0.98) !important;  
    font-weight: 700 !important;  
}  

/* Handle italic text */  
body.light-mode .bot-bubble em,  
body.light-mode .bot-bubble i,  
body.light-mode .bot-bubble .italic {  
    color: rgba(10, 15, 30, 0.95) !important;  
}  

/* ========================================  
   END OF CRITICAL FIX - Sohani Iftikhar ✨  
   All bot message text now properly visible in light mode  
   ======================================== */  

/* ========================================  
   RESPONSIVE (Refined)  
   ======================================== */  
@media (max-width: 820px) {  
    .app-wrapper {  
        flex-direction: column;  
        height: 95vh;  
        max-height: none;  
        border-radius: 36px;  
    }  

    .brand-panel {  
        width: 100%;  
        flex-direction: row;  
        flex-wrap: wrap;  
        padding: 0.8rem 1.4rem;  
        border-right: none;  
        border-bottom: 1px solid rgba(255, 255, 255, 0.03);  
        gap: 0.4rem 1.2rem;  
        align-items: center;  
        justify-content: flex-start;  
    }  

    .brand-icon {  
        width: 48px;  
        height: 48px;  
        font-size: 1.5rem;  
        margin-bottom: 0;  
        border-radius: 16px;  
    }  

    .brand-icon i {  
        font-size: 1.5rem;  
    }  

    .brand-name {  
        font-size: 1.8rem;  
    }  

    .brand-tagline,  
    .brand-footer,  
    .divider,  
    .feature-list {  
        display: none;  
    }  

    .chat-header {  
        padding: 0.8rem 1.4rem;  
    }  

    .header-dev {  
        display: none;  
    }  

    .messages-container {  
        padding: 1rem 1.4rem 0.5rem 1.4rem;  
    }  

    .input-area {  
        padding: 0.8rem 1.4rem 1.2rem 1.4rem;  
    }  

    .message {  
        max-width: 95%;  
    }  

    .question-count-wrapper {  
        margin-left: 0;  
    }  

    .header-left span {  
        display: none;  
    }  

    .theme-toggle {  
        top: 14px;  
        right: 14px;  
        padding: 8px 16px;  
        font-size: 0.85rem;  
        gap: 10px;  
    }  
}  

@media (max-width: 480px) {  
    .upload-row {  
        flex-direction: column;  
        align-items: stretch;  
        gap: 10px;  
    }  

    .file-name {  
        max-width: 100%;  
        font-size: 0.6rem;  
    }  

    .upload-progress {  
        display: none;  
    }  

    #sendBtn {  
        width: 50px;  
        height: 50px;  
        font-size: 1.1rem;  
    }  

    .header-left {  
        font-size: 0.75rem;  
    }  

    .header-left i {  
        font-size: 1rem;  
    }  

    .avatar {  
        width: 40px;  
        height: 40px;  
        border-radius: 16px;  
    }  

    .avatar i {  
        font-size: 1.1rem;  
    }  

    .bubble {  
        padding: 0.8rem 1.2rem;  
        font-size: 0.85rem;  
        border-radius: 22px;  
    }  

    .input-wrapper input {  
        padding: 0.7rem 1.4rem 0.7rem 3rem;  
        font-size: 0.85rem;  
    }  

    .input-icon {  
        left: 14px;  
        font-size: 0.8rem;  
    }  

    .question-count-wrapper {  
        justify-content: center;  
        margin-left: 0;  
    }  

    .question-count-wrapper input {  
        width: 54px;  
        padding: 4px 8px;  
        font-size: 0.8rem;  
    }  

    .question-count-wrapper label {  
        font-size: 0.65rem;  
    }  

    .input-hint {  
        font-size: 0.45rem;  
        gap: 8px;  
        flex-wrap: wrap;  
        justify-content: center;  
    }  

    .input-hint span:not(:first-child):not(.hint-key) {  
        display: none;  
    }  

    .brand-icon {  
        width: 40px;  
        height: 40px;  
        border-radius: 14px;  
    }  

    .brand-icon i {  
        font-size: 1.2rem;  
    }  

    .brand-name {  
        font-size: 1.4rem;  
    }  

    .chat-header {  
        padding: 0.5rem 1rem;  
    }  

    .header-right {  
        padding: 0.15rem 0.8rem;  
        font-size: 0.55rem;  
    }  

    .status-dot {  
        width: 6px;  
        height: 6px;  
    }  

    .messages-container {  
        padding: 0.6rem 1rem 0.3rem 1rem;  
        gap: 1.2rem;  
    }  

    .message {  
        gap: 12px;  
    }  

    .bubble-footer {  
        flex-wrap: wrap;  
        gap: 6px;  
    }  

    .theme-toggle {  
        top: 10px;  
        right: 10px;  
        padding: 6px 12px;  
        font-size: 0.75rem;  
        gap: 8px;  
    }  

    .toggle-track {  
        width: 28px;  
        height: 16px;  
    }  

    .toggle-track::after {  
        width: 12px;  
        height: 12px;  
    }  

    body.light-mode .toggle-track::after {  
        transform: translateX(12px);  
    }  
}