/* ====================================
   Kaly4cid - Background Effects CSS
   ==================================== */

/* ============= GLOBAL BODY TRANSPARENCY ============= */
/* Required for negative z-index background effects to be visible */

html {
    background: #0a0a0f !important;
}

body {
    background: transparent !important;
}

/* Make all main containers transparent so background effects show through */
.app-container,
.auth-container,
.main-content,
.chat-container {
    background: transparent !important;
    position: relative;
    z-index: 1;
}

/* Splash screen needs solid background */
.splash-screen {
    background: #0a0a0f !important;
}

/* Cards and headers can keep their backgrounds */
.app-header,
.auth-card,
.product-card,
.bottom-nav {
    /* These keep their original backgrounds for readability */
}

/* ============= NIGHT CITY SKYLINE BACKGROUND ============= */

.night-sky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -10;
    background: linear-gradient(to bottom,
            #0a0a0f 0%,
            #0d0d1a 20%,
            #111122 40%,
            #151530 60%,
            #1a1a40 80%,
            #1f1f4a 100%);
}

/* City Skyline Silhouette */
.city-skyline {
    position: fixed;
    bottom: 60px;
    left: 0;
    width: 100%;
    height: 250px;
    z-index: -5;
    pointer-events: none;
}

.city-skyline::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        /* Building 1 - tall skyscraper left */
        linear-gradient(to bottom, #0a0a12 0%, #0a0a12 100%) no-repeat 2% 100% / 30px 200px,
        linear-gradient(to bottom, #0d0d15 0%, #0d0d15 100%) no-repeat 5% 100% / 25px 150px,
        /* Building 2 */
        linear-gradient(to bottom, #0a0a12 0%, #0a0a12 100%) no-repeat 8% 100% / 40px 180px,
        linear-gradient(to bottom, #0d0d15 0%, #0d0d15 100%) no-repeat 12% 100% / 20px 120px,
        /* Building 3 - wide building */
        linear-gradient(to bottom, #0a0a12 0%, #0a0a12 100%) no-repeat 15% 100% / 60px 140px,
        /* Building 4 - tallest tower */
        linear-gradient(to bottom, #080810 0%, #080810 100%) no-repeat 22% 100% / 35px 220px,
        linear-gradient(to bottom, #0a0a12 0%, #0a0a12 100%) no-repeat 25% 100% / 45px 160px,
        /* Building 5 */
        linear-gradient(to bottom, #0d0d15 0%, #0d0d15 100%) no-repeat 30% 100% / 50px 130px,
        linear-gradient(to bottom, #0a0a12 0%, #0a0a12 100%) no-repeat 35% 100% / 30px 170px,
        /* Building 6 - center buildings */
        linear-gradient(to bottom, #080810 0%, #080810 100%) no-repeat 40% 100% / 40px 190px,
        linear-gradient(to bottom, #0a0a12 0%, #0a0a12 100%) no-repeat 45% 100% / 55px 145px,
        linear-gradient(to bottom, #0d0d15 0%, #0d0d15 100%) no-repeat 50% 100% / 35px 165px,
        /* Building 7 */
        linear-gradient(to bottom, #0a0a12 0%, #0a0a12 100%) no-repeat 55% 100% / 45px 135px,
        linear-gradient(to bottom, #080810 0%, #080810 100%) no-repeat 60% 100% / 30px 200px,
        /* Building 8 */
        linear-gradient(to bottom, #0d0d15 0%, #0d0d15 100%) no-repeat 65% 100% / 50px 150px,
        linear-gradient(to bottom, #0a0a12 0%, #0a0a12 100%) no-repeat 70% 100% / 40px 180px,
        /* Building 9 */
        linear-gradient(to bottom, #080810 0%, #080810 100%) no-repeat 75% 100% / 35px 210px,
        linear-gradient(to bottom, #0a0a12 0%, #0a0a12 100%) no-repeat 80% 100% / 55px 140px,
        /* Building 10 - right side */
        linear-gradient(to bottom, #0d0d15 0%, #0d0d15 100%) no-repeat 85% 100% / 30px 160px,
        linear-gradient(to bottom, #0a0a12 0%, #0a0a12 100%) no-repeat 90% 100% / 45px 175px,
        linear-gradient(to bottom, #080810 0%, #080810 100%) no-repeat 95% 100% / 35px 130px;
}

/* City Window Lights */
.city-lights {
    position: fixed;
    bottom: 60px;
    left: 0;
    width: 100%;
    height: 250px;
    z-index: -4;
    pointer-events: none;
}

.city-light {
    position: absolute;
    width: 3px;
    height: 3px;
    background: rgba(255, 230, 150, 0.9);
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(255, 230, 150, 0.8);
    animation: windowFlicker 4s ease-in-out infinite;
}

/* Generate random window positions */
.city-light:nth-child(1) {
    bottom: 40px;
    left: 3%;
    animation-delay: 0s;
}

.city-light:nth-child(2) {
    bottom: 60px;
    left: 3.5%;
    animation-delay: 1s;
}

.city-light:nth-child(3) {
    bottom: 80px;
    left: 4%;
    animation-delay: 2s;
}

.city-light:nth-child(4) {
    bottom: 50px;
    left: 9%;
    animation-delay: 0.5s;
}

.city-light:nth-child(5) {
    bottom: 70px;
    left: 10%;
    animation-delay: 1.5s;
}

.city-light:nth-child(6) {
    bottom: 90px;
    left: 16%;
    animation-delay: 0.3s;
}

.city-light:nth-child(7) {
    bottom: 110px;
    left: 17%;
    animation-delay: 2.5s;
}

.city-light:nth-child(8) {
    bottom: 70px;
    left: 23%;
    animation-delay: 0.8s;
}

.city-light:nth-child(9) {
    bottom: 130px;
    left: 23%;
    animation-delay: 1.8s;
}

.city-light:nth-child(10) {
    bottom: 150px;
    left: 24%;
    animation-delay: 3s;
}

.city-light:nth-child(11) {
    bottom: 60px;
    left: 32%;
    animation-delay: 0.2s;
}

.city-light:nth-child(12) {
    bottom: 80px;
    left: 36%;
    animation-delay: 1.2s;
}

.city-light:nth-child(13) {
    bottom: 100px;
    left: 41%;
    animation-delay: 2.2s;
}

.city-light:nth-child(14) {
    bottom: 130px;
    left: 42%;
    animation-delay: 0.7s;
}

.city-light:nth-child(15) {
    bottom: 80px;
    left: 46%;
    animation-delay: 1.7s;
}

.city-light:nth-child(16) {
    bottom: 100px;
    left: 51%;
    animation-delay: 2.7s;
}

.city-light:nth-child(17) {
    bottom: 120px;
    left: 52%;
    animation-delay: 0.4s;
}

.city-light:nth-child(18) {
    bottom: 70px;
    left: 56%;
    animation-delay: 1.4s;
}

.city-light:nth-child(19) {
    bottom: 140px;
    left: 61%;
    animation-delay: 2.4s;
}

.city-light:nth-child(20) {
    bottom: 160px;
    left: 62%;
    animation-delay: 3.5s;
}

.city-light:nth-child(21) {
    bottom: 80px;
    left: 66%;
    animation-delay: 0.9s;
}

.city-light:nth-child(22) {
    bottom: 100px;
    left: 71%;
    animation-delay: 1.9s;
}

.city-light:nth-child(23) {
    bottom: 130px;
    left: 76%;
    animation-delay: 2.9s;
}

.city-light:nth-child(24) {
    bottom: 170px;
    left: 77%;
    animation-delay: 0.1s;
}

.city-light:nth-child(25) {
    bottom: 70px;
    left: 81%;
    animation-delay: 1.1s;
}

.city-light:nth-child(26) {
    bottom: 90px;
    left: 86%;
    animation-delay: 2.1s;
}

.city-light:nth-child(27) {
    bottom: 60px;
    left: 91%;
    animation-delay: 3.1s;
}

.city-light:nth-child(28) {
    bottom: 80px;
    left: 92%;
    animation-delay: 0.6s;
}

.city-light:nth-child(29) {
    bottom: 100px;
    left: 96%;
    animation-delay: 1.6s;
}

.city-light:nth-child(30) {
    bottom: 50px;
    left: 97%;
    animation-delay: 2.6s;
}

@keyframes windowFlicker {

    0%,
    100% {
        opacity: 0.9;
    }

    30% {
        opacity: 0.4;
    }

    50% {
        opacity: 1;
    }

    70% {
        opacity: 0.6;
    }
}

/* Enhanced Twinkling Stars */
.night-stars {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60%;
    pointer-events: none;
    z-index: -8;
}

.night-star {
    position: absolute;
    background: white;
    border-radius: 50%;
    animation: starTwinkle 3s ease-in-out infinite;
}

.night-star.small {
    width: 1px;
    height: 1px;
}

.night-star.medium {
    width: 2px;
    height: 2px;
}

.night-star.large {
    width: 3px;
    height: 3px;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
}

/* Star positions */
.night-star:nth-child(1) {
    top: 5%;
    left: 10%;
    animation-delay: 0s;
}

.night-star:nth-child(2) {
    top: 8%;
    left: 25%;
    animation-delay: 0.5s;
}

.night-star:nth-child(3) {
    top: 3%;
    left: 40%;
    animation-delay: 1s;
}

.night-star:nth-child(4) {
    top: 12%;
    left: 55%;
    animation-delay: 1.5s;
}

.night-star:nth-child(5) {
    top: 6%;
    left: 70%;
    animation-delay: 2s;
}

.night-star:nth-child(6) {
    top: 10%;
    left: 85%;
    animation-delay: 0.3s;
}

.night-star:nth-child(7) {
    top: 15%;
    left: 15%;
    animation-delay: 0.8s;
}

.night-star:nth-child(8) {
    top: 18%;
    left: 35%;
    animation-delay: 1.3s;
}

.night-star:nth-child(9) {
    top: 20%;
    left: 50%;
    animation-delay: 1.8s;
}

.night-star:nth-child(10) {
    top: 14%;
    left: 65%;
    animation-delay: 2.3s;
}

.night-star:nth-child(11) {
    top: 22%;
    left: 80%;
    animation-delay: 0.1s;
}

.night-star:nth-child(12) {
    top: 25%;
    left: 5%;
    animation-delay: 0.6s;
}

.night-star:nth-child(13) {
    top: 28%;
    left: 20%;
    animation-delay: 1.1s;
}

.night-star:nth-child(14) {
    top: 30%;
    left: 45%;
    animation-delay: 1.6s;
}

.night-star:nth-child(15) {
    top: 26%;
    left: 60%;
    animation-delay: 2.1s;
}

.night-star:nth-child(16) {
    top: 32%;
    left: 75%;
    animation-delay: 0.4s;
}

.night-star:nth-child(17) {
    top: 35%;
    left: 90%;
    animation-delay: 0.9s;
}

.night-star:nth-child(18) {
    top: 38%;
    left: 12%;
    animation-delay: 1.4s;
}

.night-star:nth-child(19) {
    top: 40%;
    left: 30%;
    animation-delay: 1.9s;
}

.night-star:nth-child(20) {
    top: 36%;
    left: 55%;
    animation-delay: 2.4s;
}

.night-star:nth-child(21) {
    top: 42%;
    left: 70%;
    animation-delay: 0.2s;
}

.night-star:nth-child(22) {
    top: 45%;
    left: 88%;
    animation-delay: 0.7s;
}

.night-star:nth-child(23) {
    top: 48%;
    left: 8%;
    animation-delay: 1.2s;
}

.night-star:nth-child(24) {
    top: 50%;
    left: 22%;
    animation-delay: 1.7s;
}

.night-star:nth-child(25) {
    top: 52%;
    left: 42%;
    animation-delay: 2.2s;
}

.night-star:nth-child(26) {
    top: 7%;
    left: 93%;
    animation-delay: 2.7s;
}

.night-star:nth-child(27) {
    top: 17%;
    left: 3%;
    animation-delay: 3s;
}

.night-star:nth-child(28) {
    top: 33%;
    left: 33%;
    animation-delay: 3.2s;
}

.night-star:nth-child(29) {
    top: 43%;
    left: 63%;
    animation-delay: 2.8s;
}

.night-star:nth-child(30) {
    top: 55%;
    left: 78%;
    animation-delay: 3.5s;
}

@keyframes starTwinkle {

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

    50% {
        opacity: 1;
        transform: scale(1.3);
    }
}

/* Shooting Star - Right to Left */
.shooting-star {
    position: fixed;
    width: 100px;
    height: 2px;
    background: linear-gradient(90deg, transparent, white);
    border-radius: 50%;
    animation: shootingStar 8s ease-in-out infinite;
    opacity: 0;
    z-index: -7;
    transform: rotate(45deg);
}

.shooting-star:nth-child(1) {
    top: 15%;
    right: 10%;
    animation-delay: 0s;
}

.shooting-star:nth-child(2) {
    top: 30%;
    right: 30%;
    animation-delay: 4s;
}

.shooting-star:nth-child(3) {
    top: 20%;
    right: 50%;
    animation-delay: 7s;
}

@keyframes shootingStar {
    0% {
        opacity: 0;
        transform: translateX(0) translateY(0) rotate(45deg);
    }

    5% {
        opacity: 1;
    }

    20% {
        opacity: 0;
        transform: translateX(-300px) translateY(300px) rotate(45deg);
    }

    100% {
        opacity: 0;
        transform: translateX(-300px) translateY(300px) rotate(45deg);
    }
}

/* Moon Glow */
.moon {
    position: fixed;
    top: 5%;
    right: 5%;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #fffaea, #f5f5dc);
    box-shadow:
        0 0 15px rgba(255, 250, 234, 0.4),
        0 0 30px rgba(255, 250, 234, 0.2);
    z-index: -6;
    animation: moonGlow 10s ease-in-out infinite;
}

@keyframes moonGlow {

    0%,
    100% {
        box-shadow:
            0 0 20px rgba(255, 250, 234, 0.5),
            0 0 40px rgba(255, 250, 234, 0.3),
            0 0 60px rgba(255, 250, 234, 0.2);
    }

    50% {
        box-shadow:
            0 0 30px rgba(255, 250, 234, 0.6),
            0 0 50px rgba(255, 250, 234, 0.4),
            0 0 80px rgba(255, 250, 234, 0.3);
    }
}

/* ============= ANIMATED SLASH LIGHTS ============= */

.slash-lights {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}

.slash-light {
    position: absolute;
    width: 2px;
    height: 200px;
    background: linear-gradient(180deg, transparent, rgba(99, 102, 241, 0.3), transparent);
    transform: rotate(45deg);
    animation: slashMove 8s linear infinite;
    opacity: 0;
}

.slash-light:nth-child(1) {
    left: 10%;
    animation-delay: 0s;
}

.slash-light:nth-child(2) {
    left: 30%;
    animation-delay: 2s;
}

.slash-light:nth-child(3) {
    left: 50%;
    animation-delay: 4s;
    background: linear-gradient(180deg, transparent, rgba(236, 72, 153, 0.3), transparent);
}

.slash-light:nth-child(4) {
    left: 70%;
    animation-delay: 6s;
}

.slash-light:nth-child(5) {
    left: 90%;
    animation-delay: 1s;
    background: linear-gradient(180deg, transparent, rgba(6, 182, 212, 0.3), transparent);
}

@keyframes slashMove {
    0% {
        top: -200px;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        top: 120%;
        opacity: 0;
    }
}

/* ============= GLASS REFLECTION EFFECT ============= */

.glass-reflection {
    position: fixed;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.03),
            rgba(255, 255, 255, 0.08),
            rgba(255, 255, 255, 0.03),
            transparent);
    transform: skewX(-20deg);
    animation: glassReflection 12s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes glassReflection {

    0%,
    100% {
        left: -100%;
    }

    50% {
        left: 150%;
    }
}

/* ============= MOVING LIGHT STREAKS ============= */

.light-streaks {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}

.light-streak {
    position: absolute;
    width: 150%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.2), rgba(236, 72, 153, 0.2), transparent);
    animation: streakMove 6s ease-in-out infinite;
}

.light-streak:nth-child(1) {
    top: 20%;
    animation-delay: 0s;
}

.light-streak:nth-child(2) {
    top: 40%;
    animation-delay: 2s;
    background: linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.15), rgba(99, 102, 241, 0.15), transparent);
}

.light-streak:nth-child(3) {
    top: 60%;
    animation-delay: 4s;
}

.light-streak:nth-child(4) {
    top: 80%;
    animation-delay: 1s;
}

@keyframes streakMove {
    0% {
        left: -150%;
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        left: 100%;
        opacity: 0;
    }
}

/* ============= SCAN LINE EFFECT ============= */

.scan-line {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.6), rgba(236, 72, 153, 0.6), transparent);
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.4), 0 0 40px rgba(99, 102, 241, 0.2);
    animation: scanLineMove 8s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes scanLineMove {

    0%,
    100% {
        top: -10px;
        opacity: 0;
    }

    5% {
        opacity: 1;
    }

    95% {
        opacity: 1;
    }

    50% {
        top: 100%;
    }
}

/* ============= HEXAGON GRID PATTERN ============= */

.hex-grid {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -2;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%236366f1' fill-opacity='1'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    animation: hexGridPulse 10s ease-in-out infinite;
}

@keyframes hexGridPulse {

    0%,
    100% {
        opacity: 0.03;
    }

    50% {
        opacity: 0.06;
    }
}

/* ============= FLOATING BUBBLES ============= */

.bubbles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}

.bubble {
    position: absolute;
    bottom: -100px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(99, 102, 241, 0.3), transparent);
    animation: bubbleRise 15s linear infinite;
}

.bubble:nth-child(1) {
    left: 5%;
    width: 40px;
    height: 40px;
    animation-delay: 0s;
    animation-duration: 12s;
}

.bubble:nth-child(2) {
    left: 15%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 18s;
}

.bubble:nth-child(3) {
    left: 25%;
    width: 50px;
    height: 50px;
    animation-delay: 4s;
    animation-duration: 14s;
}

.bubble:nth-child(4) {
    left: 40%;
    width: 30px;
    height: 30px;
    animation-delay: 1s;
    animation-duration: 16s;
}

.bubble:nth-child(5) {
    left: 55%;
    width: 25px;
    height: 25px;
    animation-delay: 6s;
    animation-duration: 20s;
}

.bubble:nth-child(6) {
    left: 70%;
    width: 45px;
    height: 45px;
    animation-delay: 3s;
    animation-duration: 13s;
}

.bubble:nth-child(7) {
    left: 85%;
    width: 35px;
    height: 35px;
    animation-delay: 5s;
    animation-duration: 17s;
}

.bubble:nth-child(8) {
    left: 95%;
    width: 20px;
    height: 20px;
    animation-delay: 7s;
    animation-duration: 15s;
}

@keyframes bubbleRise {
    0% {
        bottom: -100px;
        opacity: 0;
        transform: translateX(0) scale(0.5);
    }

    10% {
        opacity: 0.6;
    }

    50% {
        transform: translateX(50px) scale(1);
    }

    90% {
        opacity: 0.6;
    }

    100% {
        bottom: 120%;
        opacity: 0;
        transform: translateX(-30px) scale(0.8);
    }
}

/* ============= GLITCH LINES ============= */

.glitch-line {
    position: fixed;
    left: 0;
    width: 100%;
    height: 1px;
    background: rgba(99, 102, 241, 0.5);
    pointer-events: none;
    z-index: 0;
    animation: glitchLine 4s steps(50) infinite;
    opacity: 0;
}

@keyframes glitchLine {

    0%,
    90%,
    100% {
        opacity: 0;
        top: 0%;
    }

    92% {
        opacity: 0.8;
        top: 20%;
    }

    94% {
        opacity: 0;
        top: 40%;
    }

    96% {
        opacity: 0.5;
        top: 60%;
    }

    98% {
        opacity: 0;
        top: 80%;
    }
}

/* ============= STAR TWINKLE ============= */

.stars {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}

.star {
    position: absolute;
    width: 3px;
    height: 3px;
    background: white;
    border-radius: 50%;
    animation: twinkle 3s ease-in-out infinite;
}

.star:nth-child(1) {
    top: 10%;
    left: 20%;
    animation-delay: 0s;
}

.star:nth-child(2) {
    top: 25%;
    left: 45%;
    animation-delay: 0.5s;
}

.star:nth-child(3) {
    top: 15%;
    left: 70%;
    animation-delay: 1s;
}

.star:nth-child(4) {
    top: 35%;
    left: 85%;
    animation-delay: 1.5s;
}

.star:nth-child(5) {
    top: 50%;
    left: 10%;
    animation-delay: 2s;
}

.star:nth-child(6) {
    top: 45%;
    left: 55%;
    animation-delay: 0.3s;
}

.star:nth-child(7) {
    top: 65%;
    left: 35%;
    animation-delay: 1.2s;
}

.star:nth-child(8) {
    top: 80%;
    left: 75%;
    animation-delay: 0.8s;
}

.star:nth-child(9) {
    top: 70%;
    left: 90%;
    animation-delay: 1.8s;
}

.star:nth-child(10) {
    top: 85%;
    left: 25%;
    animation-delay: 2.5s;
}

@keyframes twinkle {

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

    50% {
        opacity: 1;
        transform: scale(1.5);
    }
}

/* ============= NOISE OVERLAY ============= */

.noise-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    opacity: 0.015;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* ============= ANIMATED GRADIENT BACKGROUND ============= */

.bg-gradient-animated {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: linear-gradient(-45deg, #0f0f1a, #1a1a2e, #16162a, #0f0f1a);
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* ============= FLOATING ORB EFFECTS ============= */

.glow-orb {
    position: fixed;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.4;
    pointer-events: none;
    z-index: -1;
    animation: orbFloat 8s ease-in-out infinite;
}

.glow-orb-1 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.5) 0%, transparent 70%);
    top: -100px;
    right: -100px;
    animation-delay: 0s;
}

.glow-orb-2 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(236, 72, 153, 0.5) 0%, transparent 70%);
    bottom: 20%;
    left: -100px;
    animation-delay: -4s;
}

.glow-orb-3 {
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.4) 0%, transparent 70%);
    top: 50%;
    right: -50px;
    animation-delay: -2s;
}

@keyframes orbFloat {

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

    25% {
        transform: translate(30px, -30px) scale(1.1);
    }

    50% {
        transform: translate(-20px, 20px) scale(0.95);
    }

    75% {
        transform: translate(20px, 10px) scale(1.05);
    }
}

/* ============= PARTICLE EFFECT ============= */

.particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(99, 102, 241, 0.6);
    border-radius: 50%;
    animation: particleRise 10s linear infinite;
}

@keyframes particleRise {
    0% {
        transform: translateY(100vh) scale(0);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

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

/* ============= MESH GRADIENT BACKGROUND ============= */

.mesh-gradient {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background:
        radial-gradient(at 40% 20%, rgba(99, 102, 241, 0.15) 0px, transparent 50%),
        radial-gradient(at 80% 0%, rgba(236, 72, 153, 0.1) 0px, transparent 50%),
        radial-gradient(at 0% 50%, rgba(6, 182, 212, 0.1) 0px, transparent 50%),
        radial-gradient(at 80% 50%, rgba(99, 102, 241, 0.1) 0px, transparent 50%),
        radial-gradient(at 0% 100%, rgba(236, 72, 153, 0.1) 0px, transparent 50%),
        radial-gradient(at 50% 100%, rgba(16, 185, 129, 0.1) 0px, transparent 50%);
    animation: meshPulse 20s ease-in-out infinite;
}

@keyframes meshPulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

/* ============= GLOW LINE ACCENT ============= */

.glow-line {
    position: absolute;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
    animation: glowLineScan 3s ease-in-out infinite;
}

@keyframes glowLineScan {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* ============= CARD GLOW EFFECTS ============= */

.card-glow {
    position: relative;
}

.card-glow::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, var(--primary), var(--secondary), var(--primary));
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
    filter: blur(15px);
}

.card-glow:hover::before {
    opacity: 0.5;
}

/* ============= AURORA EFFECT ============= */

.aurora {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    z-index: -1;
    background: linear-gradient(180deg,
            rgba(99, 102, 241, 0.1) 0%,
            rgba(236, 72, 153, 0.05) 50%,
            transparent 100%);
    animation: auroraPulse 8s ease-in-out infinite;
}

@keyframes auroraPulse {

    0%,
    100% {
        opacity: 0.5;
        transform: translateY(-10%);
    }

    50% {
        opacity: 0.8;
        transform: translateY(0);
    }
}

/* ============= NEON BORDER ============= */

.neon-border {
    position: relative;
    overflow: visible;
}

.neon-border::after {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border-radius: inherit;
    background: linear-gradient(45deg, #6366f1, #ec4899, #06b6d4, #6366f1);
    background-size: 300% 300%;
    z-index: -1;
    animation: neonRotate 3s linear infinite;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.neon-border:hover::after {
    opacity: 1;
}

@keyframes neonRotate {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* ============= SPOTLIGHT EFFECT ============= */

.spotlight {
    position: fixed;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.1) 0%, transparent 60%);
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
    transition: transform 0.2s ease-out;
}

/* ============= GLASSMORPHISM ENHANCE ============= */

.glass-effect {
    background: rgba(26, 26, 46, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.glass-effect-strong {
    background: rgba(15, 15, 26, 0.8);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* ============= STATIC BOTTOM NAV (ALWAYS VISIBLE) ============= */

.bottom-nav {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: none !important;
    pointer-events: auto !important;
}

.bottom-nav,
.bottom-nav *,
.bottom-nav .nav-content,
.bottom-nav .nav-item {
    animation: none !important;
    animation-name: none !important;
    animation-delay: 0s !important;
}

/* Ensure nav is always visible even during page transitions */
body.page-enter .bottom-nav,
body.page-exit .bottom-nav {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
}

/* Bottom nav items can still have hover effect */
.bottom-nav .nav-item {
    transition: color 0.2s ease, background 0.2s ease !important;
    transform: none !important;
    opacity: 1 !important;
}

.bottom-nav .nav-item:hover {
    transform: none !important;
}

.bottom-nav .nav-item i {
    transition: transform 0.2s ease !important;
}

.bottom-nav .nav-item:hover i,
.bottom-nav .nav-item.active i {
    transform: scale(1.15) !important;
}

/* ============= BUTTON GLOW EFFECTS ============= */

.btn-glow {
    position: relative;
    overflow: visible;
}

.btn-glow::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: inherit;
    filter: blur(15px);
    opacity: 0;
    transform: translate(-50%, -50%);
    z-index: -1;
    transition: opacity 0.3s ease;
}

.btn-glow:hover::before {
    opacity: 0.6;
}

/* ============= INPUT GLOW ============= */

.input-glow:focus {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2),
        0 0 20px rgba(99, 102, 241, 0.3);
}

/* ============= HEADER GLOW ============= */

.header-glow {
    position: relative;
}

.header-glow::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--primary), var(--secondary), transparent);
    opacity: 0.5;
}

/* ============= TEXT GLOW ============= */

.text-glow {
    text-shadow: 0 0 20px rgba(99, 102, 241, 0.5),
        0 0 40px rgba(99, 102, 241, 0.3);
}

.text-glow-pink {
    text-shadow: 0 0 20px rgba(236, 72, 153, 0.5),
        0 0 40px rgba(236, 72, 153, 0.3);
}

/* ============= ICON PULSE ============= */

.icon-pulse {
    animation: iconPulse 2s ease-in-out infinite;
}

@keyframes iconPulse {

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

    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

/* ============= GRADIENT TEXT ============= */

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

/* ============= BREATHING GLOW ============= */

.breathing-glow {
    animation: breathingGlow 4s ease-in-out infinite;
}

@keyframes breathingGlow {

    0%,
    100% {
        box-shadow: 0 0 10px rgba(99, 102, 241, 0.3);
    }

    50% {
        box-shadow: 0 0 30px rgba(99, 102, 241, 0.6),
            0 0 60px rgba(99, 102, 241, 0.3);
    }
}

/* ====================================
   LIGHT THEME - DAY MODE EFFECTS
   ==================================== */

/* Hide night elements in light mode */
body.light-theme .night-sky,
body.light-theme .moon,
body.light-theme .night-stars,
body.light-theme .city-skyline,
body.light-theme .city-lights {
    display: none !important;
}

/* Hide day elements in dark mode */
body.dark-theme .day-sky,
body.dark-theme .sun,
body.dark-theme .clouds,
body.dark-theme .birds {
    display: none !important;
}

/* ============= DAY SKY BACKGROUND ============= */

.day-sky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -10;
    background: linear-gradient(to bottom,
            #4aa3df 0%,
            #6bb9e8 20%,
            #87ceeb 40%,
            #a8ddf5 60%,
            #c5e8fa 80%,
            #e0f3ff 100%);
    transition: opacity 0.5s ease;
}

/* ============= SUN ============= */

.sun {
    position: fixed;
    top: 8%;
    right: 8%;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #fff5cc, #ffd700, #ff9500);
    box-shadow:
        0 0 30px rgba(255, 215, 0, 0.8),
        0 0 60px rgba(255, 200, 0, 0.6),
        0 0 100px rgba(255, 180, 0, 0.4),
        0 0 150px rgba(255, 150, 0, 0.2);
    z-index: -6;
    animation: sunGlow 4s ease-in-out infinite;
}

.sun-rays {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    transform: translate(-50%, -50%);
    background:
        linear-gradient(0deg, transparent 45%, rgba(255, 220, 100, 0.3) 50%, transparent 55%),
        linear-gradient(60deg, transparent 45%, rgba(255, 220, 100, 0.3) 50%, transparent 55%),
        linear-gradient(120deg, transparent 45%, rgba(255, 220, 100, 0.3) 50%, transparent 55%);
    animation: sunRaysRotate 20s linear infinite;
    border-radius: 50%;
}

@keyframes sunGlow {

    0%,
    100% {
        box-shadow:
            0 0 30px rgba(255, 215, 0, 0.8),
            0 0 60px rgba(255, 200, 0, 0.6),
            0 0 100px rgba(255, 180, 0, 0.4);
        transform: scale(1);
    }

    50% {
        box-shadow:
            0 0 40px rgba(255, 215, 0, 0.9),
            0 0 80px rgba(255, 200, 0, 0.7),
            0 0 120px rgba(255, 180, 0, 0.5);
        transform: scale(1.05);
    }
}

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

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* ============= CLOUDS ============= */

.clouds {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    z-index: -5;
    pointer-events: none;
    overflow: hidden;
}

.cloud {
    position: absolute;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 100px;
    filter: blur(2px);
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.1),
        inset 0 -5px 20px rgba(200, 220, 240, 0.5);
}

.cloud::before,
.cloud::after {
    content: '';
    position: absolute;
    background: inherit;
    border-radius: 50%;
}

.cloud-1 {
    width: 100px;
    height: 40px;
    top: 10%;
    left: -100px;
    animation: cloudMove 35s linear infinite;
}

.cloud-1::before {
    width: 50px;
    height: 50px;
    top: -25px;
    left: 15px;
}

.cloud-1::after {
    width: 60px;
    height: 60px;
    top: -30px;
    right: 15px;
}

.cloud-2 {
    width: 120px;
    height: 50px;
    top: 20%;
    left: -120px;
    animation: cloudMove 45s linear infinite;
    animation-delay: 5s;
}

.cloud-2::before {
    width: 60px;
    height: 60px;
    top: -30px;
    left: 20px;
}

.cloud-2::after {
    width: 70px;
    height: 70px;
    top: -35px;
    right: 20px;
}

.cloud-3 {
    width: 80px;
    height: 35px;
    top: 5%;
    left: -80px;
    animation: cloudMove 50s linear infinite;
    animation-delay: 15s;
    opacity: 0.8;
}

.cloud-3::before {
    width: 40px;
    height: 40px;
    top: -20px;
    left: 10px;
}

.cloud-3::after {
    width: 50px;
    height: 50px;
    top: -25px;
    right: 10px;
}

.cloud-4 {
    width: 90px;
    height: 38px;
    top: 30%;
    left: -90px;
    animation: cloudMove 40s linear infinite;
    animation-delay: 25s;
    opacity: 0.7;
}

.cloud-4::before {
    width: 45px;
    height: 45px;
    top: -22px;
    left: 12px;
}

.cloud-4::after {
    width: 55px;
    height: 55px;
    top: -27px;
    right: 12px;
}

.cloud-5 {
    width: 70px;
    height: 30px;
    top: 15%;
    left: -70px;
    animation: cloudMove 55s linear infinite;
    animation-delay: 10s;
    opacity: 0.6;
}

.cloud-5::before {
    width: 35px;
    height: 35px;
    top: -18px;
    left: 8px;
}

.cloud-5::after {
    width: 42px;
    height: 42px;
    top: -21px;
    right: 8px;
}

@keyframes cloudMove {
    0% {
        left: -150px;
    }

    100% {
        left: 110%;
    }
}

/* ============= BIRDS ============= */

.birds {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 40%;
    z-index: -4;
    pointer-events: none;
    overflow: hidden;
}

.bird {
    position: absolute;
    width: 8px;
    height: 3px;
    background: #333;
    border-radius: 50%;
}

.wing {
    position: absolute;
    width: 10px;
    height: 2px;
    background: #333;
    top: -2px;
    border-radius: 50% 50% 0 0;
    transform-origin: bottom center;
}

.wing-left {
    left: -8px;
    animation: flapLeft 0.3s ease-in-out infinite;
}

.wing-right {
    right: -8px;
    animation: flapRight 0.3s ease-in-out infinite;
}

@keyframes flapLeft {

    0%,
    100% {
        transform: rotate(-30deg);
    }

    50% {
        transform: rotate(30deg);
    }
}

@keyframes flapRight {

    0%,
    100% {
        transform: rotate(30deg);
    }

    50% {
        transform: rotate(-30deg);
    }
}

.bird-1 {
    top: 12%;
    left: -20px;
    animation: birdFly 18s linear infinite;
}

.bird-2 {
    top: 18%;
    left: -20px;
    animation: birdFly 22s linear infinite;
    animation-delay: 5s;
    transform: scale(0.8);
}

.bird-3 {
    top: 8%;
    left: -20px;
    animation: birdFly 20s linear infinite;
    animation-delay: 10s;
    transform: scale(0.6);
}

.bird-4 {
    top: 25%;
    left: -20px;
    animation: birdFly 25s linear infinite;
    animation-delay: 3s;
    transform: scale(0.7);
}

@keyframes birdFly {
    0% {
        left: -30px;
        transform: translateY(0);
    }

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

    50% {
        transform: translateY(10px);
    }

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

    100% {
        left: 110%;
        transform: translateY(0);
    }
}

/* ============= LIGHT THEME ADJUSTMENTS ============= */

/* Light theme background for html */
body.light-theme {
    --bg-dark: #e8f4fc;
    --bg-card: rgba(255, 255, 255, 0.7);
    --bg-card-hover: rgba(255, 255, 255, 0.85);
    --bg-input: rgba(255, 255, 255, 0.8);
    --text-primary: #1a1a2e;
    --text-secondary: #4a5568;
    --text-muted: #718096;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.15);
}

body.light-theme html,
html:has(body.light-theme) {
    background: #87ceeb !important;
}

/* Cards glassmorphism for light theme */
body.light-theme .app-header {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(240, 248, 255, 0.9)) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

body.light-theme .bottom-nav {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(240, 248, 255, 0.95)) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.1);
}

body.light-theme .product-card,
body.light-theme .auth-card,
body.light-theme .settings-section {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.5);
}

body.light-theme .form-input {
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid rgba(0, 0, 0, 0.1);
    color: #1a1a2e;
}

body.light-theme .form-input::placeholder {
    color: #a0aec0;
}

body.light-theme .header-logo {
    background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

body.light-theme .nav-item {
    color: #4a5568;
}

body.light-theme .nav-item.active {
    color: #6366f1;
    background: rgba(99, 102, 241, 0.15);
}

body.light-theme .splash-screen {
    background: linear-gradient(to bottom, #87ceeb, #e0f3ff) !important;
}

body.light-theme .category-chip {
    background: rgba(255, 255, 255, 0.8);
    color: #4a5568;
}

body.light-theme .category-chip:hover,
body.light-theme .category-chip.active {
    background: var(--primary);
    color: white;
}

/* Toggle switch styling for light theme */
body.light-theme .toggle-slider {
    background-color: rgba(0, 0, 0, 0.15);
}

body.light-theme .settings-item {
    border-bottom-color: rgba(0, 0, 0, 0.05);
}

body.light-theme .settings-label {
    color: #1a1a2e;
}

body.light-theme .settings-desc {
    color: #4a5568;
}

body.light-theme .settings-section-title {
    color: #4a5568;
}

/* ============= LIGHT THEME - FOOTER ============= */
body.light-theme .app-footer {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(240, 248, 255, 0.9)) !important;
    border-top: 1px solid rgba(99, 102, 241, 0.2);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.1);
}

body.light-theme .footer-section h3 {
    color: #1a1a2e;
}

body.light-theme .footer-links a {
    color: #4a5568;
}

body.light-theme .footer-links a:hover {
    color: var(--primary);
}

body.light-theme .footer-copyright {
    color: #718096;
    border-top-color: rgba(0, 0, 0, 0.1);
}

body.light-theme .social-btn {
    background: rgba(99, 102, 241, 0.1);
    color: #4a5568;
    border-color: rgba(99, 102, 241, 0.2);
}

body.light-theme .social-btn:hover {
    color: white;
}

/* ============= LIGHT THEME - CHAT PAGE ============= */
body.light-theme .chat-page {
    background: linear-gradient(135deg, #e0f2fe, #f0f9ff) !important;
}

body.light-theme .chat-header {
    background: rgba(255, 255, 255, 0.9) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(10px);
}

body.light-theme .chat-header .header-btn {
    color: #1a1a2e;
}

body.light-theme .chat-info h3 {
    color: #1a1a2e !important;
}

body.light-theme .chat-info span {
    color: #22c55e;
}

body.light-theme .chat-messages {
    background: transparent;
}

body.light-theme .message.received {
    background: rgba(255, 255, 255, 0.95) !important;
    color: #1a1a2e !important;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

body.light-theme .message.received p {
    color: #1a1a2e !important;
}

body.light-theme .message.received .message-time {
    color: #718096 !important;
}

body.light-theme .message.sent {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    color: white;
}

body.light-theme .message.sent p {
    color: white !important;
}

body.light-theme .message.sent .message-time {
    color: rgba(255, 255, 255, 0.8) !important;
}

body.light-theme .chat-input-wrapper {
    background: rgba(255, 255, 255, 0.95) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
}

body.light-theme .chat-input-wrapper input[type="text"] {
    background: rgba(0, 0, 0, 0.05) !important;
    color: #1a1a2e !important;
}

body.light-theme .chat-input-wrapper input[type="text"]::placeholder {
    color: #718096 !important;
}

body.light-theme .chat-input-wrapper button {
    background: rgba(0, 0, 0, 0.05);
    color: #4a5568;
}

body.light-theme .chat-input-wrapper button.send-btn {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    color: white;
}

body.light-theme .reply-preview-bar {
    background: rgba(255, 255, 255, 0.95) !important;
    border-top-color: rgba(0, 0, 0, 0.08);
    color: #4a5568;
}

body.light-theme .message-reply {
    background: rgba(0, 0, 0, 0.05);
    color: #4a5568;
}

body.light-theme .message-avatar {
    border-color: rgba(0, 0, 0, 0.1);
}

body.light-theme .reply-btn-mini {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
    color: #718096;
}

/* ============= LIGHT THEME - ORDER CARDS ============= */
body.light-theme .order-card {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

body.light-theme .order-card .order-id,
body.light-theme .order-product-name {
    color: #1a1a2e;
}

body.light-theme .order-card .order-date,
body.light-theme .order-product-variant {
    color: #718096;
}

/* ============= LIGHT THEME - PROFILE ITEMS ============= */
body.light-theme .profile-section {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

body.light-theme .profile-item-value {
    color: #1a1a2e;
}

body.light-theme .profile-item-label {
    color: #718096;
}

body.light-theme .profile-section-title {
    color: #4a5568;
}

/* ============= LIGHT THEME - MODALS ============= */
body.light-theme .modal {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

body.light-theme .modal h3 {
    color: #1a1a2e;
}

body.light-theme .modal p {
    color: #4a5568;
}

/* ============= LIGHT THEME - LOGIN/REGISTER PAGES ============= */
body.light-theme .auth-container {
    background: transparent;
}

body.light-theme .auth-card {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

body.light-theme .auth-logo {
    color: #1a1a2e !important;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

body.light-theme .auth-subtitle {
    color: #4a5568 !important;
}

body.light-theme .form-group label {
    color: #1a1a2e !important;
}

body.light-theme .auth-footer {
    color: #4a5568;
}

body.light-theme .auth-footer a {
    color: var(--primary);
}

body.light-theme .divider {
    color: #718096;
}

body.light-theme .divider::before,
body.light-theme .divider::after {
    background: rgba(0, 0, 0, 0.15);
}

body.light-theme .btn-google {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #1a1a2e !important;
}

body.light-theme .btn-google:hover {
    background: rgba(255, 255, 255, 1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

body.light-theme .password-toggle {
    color: #718096;
}

/* Terms checkbox text for light mode */
body.light-theme .form-group label[for="terms-check"] {
    color: #4a5568 !important;
}

body.light-theme .form-group label[for="terms-check"] a {
    color: var(--primary) !important;
}

/* ============= LIGHT THEME - SPLASH SCREEN ============= */
body.light-theme .splash-screen {
    background: linear-gradient(135deg, #87ceeb, #e0f2fe) !important;
}

body.light-theme .splash-content .logo-text {
    color: #1a1a2e;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

body.light-theme .splash-tagline {
    color: #4a5568 !important;
}

body.light-theme .splash-loader {
    background: rgba(0, 0, 0, 0.1);
}

body.light-theme .loader-bar {
    background: linear-gradient(90deg, #6366f1, #8b5cf6, #6366f1);
}

/* ============= LIGHT THEME - ADMIN PANEL ============= */
/* Admin layout container */
body.light-theme .admin-layout {
    background: linear-gradient(135deg, #e0f2fe, #f0f9ff) !important;
}

body.light-theme .admin-sidebar {
    background: rgba(255, 255, 255, 0.95) !important;
    border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
}

body.light-theme .admin-sidebar .sidebar-logo {
    color: #1a1a2e;
    border-bottom-color: rgba(0, 0, 0, 0.08);
}

body.light-theme .sidebar-nav-item {
    color: #4a5568;
}

body.light-theme .sidebar-nav-item:hover,
body.light-theme .sidebar-nav-item.active {
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary);
}

body.light-theme .admin-main {
    background: transparent;
}

body.light-theme .admin-header {
    background: transparent !important;
    border-bottom: none;
}

body.light-theme .admin-page-title {
    color: #1a1a2e;
}

body.light-theme .stat-card {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

body.light-theme .stat-card .stat-value {
    color: #1a1a2e;
}

body.light-theme .stat-card .stat-label {
    color: #718096;
}

/* Admin Chat List Light Theme */
body.light-theme .chat-users-panel {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

body.light-theme .chat-users-panel h3 {
    color: #1a1a2e !important;
}

body.light-theme .chat-user-item {
    color: #1a1a2e !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    background: transparent;
}

body.light-theme .chat-user-item:hover,
body.light-theme .chat-user-item.active {
    background: rgba(99, 102, 241, 0.08) !important;
}

body.light-theme .chat-user-name {
    color: #1a1a2e !important;
}

body.light-theme .chat-user-preview {
    color: #718096 !important;
}

body.light-theme .chat-user-time {
    color: #a0aec0 !important;
}

body.light-theme .chat-unread-badge {
    background: var(--primary);
    color: white;
}

/* Admin Chat Container Light Theme */
body.light-theme .chat-layout {
    background: transparent !important;
}

body.light-theme .chat-container {
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 16px !important;
}

body.light-theme .chat-header {
    background: rgba(255, 255, 255, 0.98) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

body.light-theme .chat-header h3 {
    color: #1a1a2e !important;
}

body.light-theme .chat-header span {
    color: #22c55e;
}

body.light-theme .chat-back-btn {
    color: #1a1a2e !important;
}

body.light-theme .chat-avatar {
    border-color: rgba(0, 0, 0, 0.1) !important;
}

body.light-theme .chat-info h3 {
    color: #1a1a2e !important;
}

body.light-theme .chat-messages {
    background: transparent !important;
}

/* Chat list header with inline styles override */
body.light-theme .chat-list-header {
    background: rgba(255, 255, 255, 0.98) !important;
    border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}

body.light-theme .chat-list-header h3 {
    color: #1a1a2e !important;
}

/* Admin Chat Messages Light Theme */
body.light-theme .message-group.received .message {
    background: rgba(255, 255, 255, 0.98) !important;
    color: #1a1a2e !important;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

body.light-theme .message-group.received .message p {
    color: #1a1a2e !important;
}

body.light-theme .message-group.received .message-time {
    color: #718096 !important;
}

body.light-theme .message-group.sent .message {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    color: white !important;
}

body.light-theme .message-group.sent .message p {
    color: white !important;
}

body.light-theme .message-group.sent .message-time {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Admin Chat Input Light Theme */
body.light-theme .chat-controls-container {
    background: rgba(255, 255, 255, 0.98) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

body.light-theme .chat-input {
    background: transparent !important;
}

body.light-theme .chat-input input {
    background: rgba(0, 0, 0, 0.05) !important;
    color: #1a1a2e !important;
}

body.light-theme .chat-input input::placeholder {
    color: #718096 !important;
}

body.light-theme .chat-input button {
    background: rgba(0, 0, 0, 0.05);
    color: #4a5568;
}

body.light-theme .chat-input button:last-child {
    background: var(--gradient-primary) !important;
    color: white;
}

body.light-theme .reply-preview-bar {
    background: rgba(255, 255, 255, 0.95) !important;
    color: #4a5568;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

body.light-theme .message-avatar {
    border-color: rgba(0, 0, 0, 0.1);
}

body.light-theme .reply-btn-mini {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
    color: #718096;
}

body.light-theme .message-reply {
    background: rgba(0, 0, 0, 0.05) !important;
    color: #4a5568;
}

body.light-theme .section-header h2 {
    color: #1a1a2e;
}

body.light-theme .admin-table {
    background: rgba(255, 255, 255, 0.9);
}

body.light-theme .admin-table thead {
    background: rgba(0, 0, 0, 0.03);
}

body.light-theme .admin-table th {
    color: #4a5568;
    border-bottom-color: rgba(0, 0, 0, 0.1);
}

body.light-theme .admin-table td {
    color: #1a1a2e;
    border-bottom-color: rgba(0, 0, 0, 0.05);
}

body.light-theme .filter-tab {
    background: rgba(255, 255, 255, 0.9);
    color: #4a5568;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

body.light-theme .filter-tab:hover,
body.light-theme .filter-tab.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

body.light-theme .mobile-nav {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(240, 248, 255, 0.95)) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
}

body.light-theme .mobile-nav-item {
    color: #4a5568;
}

body.light-theme .mobile-nav-item.active,
body.light-theme .mobile-nav-item:hover {
    color: var(--primary);
    background: rgba(99, 102, 241, 0.1);
}

body.light-theme .chat-users-panel {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

body.light-theme .chat-user-item {
    color: #1a1a2e;
    border-bottom-color: rgba(0, 0, 0, 0.05);
}

body.light-theme .chat-user-item:hover,
body.light-theme .chat-user-item.active {
    background: rgba(99, 102, 241, 0.1);
}

body.light-theme .chat-user-name {
    color: #1a1a2e;
}

body.light-theme .chat-user-preview {
    color: #718096;
}

body.light-theme .announcement-card {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

body.light-theme .announcement-card h3 {
    color: #1a1a2e;
}

body.light-theme .announcement-card p {
    color: #4a5568;
}

body.light-theme .admin-table-container,
body.light-theme .table-wrapper {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

body.light-theme .btn-add {
    background: var(--gradient-primary);
    color: white;
}

/* Admin order cards for mobile - light theme */
body.light-theme .order-card,
body.light-theme .product-card {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

body.light-theme .order-card-id,
body.light-theme .product-card-name {
    color: #1a1a2e;
}

body.light-theme .order-card-label,
body.light-theme .product-card-label {
    color: #718096;
}

body.light-theme .order-card-value,
body.light-theme .product-card-value {
    color: #1a1a2e;
}

/* ============= LIGHT THEME - ADMIN CHAT MODE MOBILE ============= */
body.light-theme .admin-main.chat-mode {
    background: linear-gradient(135deg, #e0f2fe, #f0f9ff) !important;
}

body.light-theme .chat-users-panel {
    background: rgba(255, 255, 255, 0.98) !important;
}

body.light-theme #chat-users-list {
    background: transparent !important;
}

body.light-theme .chat-user-item {
    background: transparent !important;
    color: #1a1a2e !important;
}

body.light-theme .chat-user-item * {
    color: inherit !important;
}

body.light-theme .chat-user-item .chat-user-name {
    color: #1a1a2e !important;
}

body.light-theme .chat-user-item .chat-user-preview {
    color: #718096 !important;
}

body.light-theme .chat-user-item .chat-user-time {
    color: #a0aec0 !important;
}

/* Mobile chat controls fix */
@media (max-width: 1024px) {
    body.light-theme .chat-controls-container {
        background: rgba(255, 255, 255, 0.98) !important;
        border-color: rgba(0, 0, 0, 0.08) !important;
    }

    body.light-theme .chat-users-panel {
        background: rgba(255, 255, 255, 0.98) !important;
    }
}

/* Ensure received messages are visible */
body.light-theme .message.received,
body.light-theme .message-group.received .message,
body.light-theme [class*="received"] .message {
    background: rgba(255, 255, 255, 0.98) !important;
    color: #1a1a2e !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

body.light-theme .message.received *,
body.light-theme .message-group.received .message * {
    color: #1a1a2e !important;
}

body.light-theme .message.received .message-time,
body.light-theme .message-group.received .message-time {
    color: #718096 !important;
}

/* ============= LIGHT THEME - CSS VARIABLE OVERRIDES ============= */
/* These override var(--card-bg) and other vars used in inline styles */
body.light-theme {
    --card-bg: rgba(255, 255, 255, 0.95);
    --bg-card: rgba(255, 255, 255, 0.95);
    --bg-input: rgba(255, 255, 255, 0.98);
    --text-primary: #1a1a2e;
    --text-secondary: #718096;
    --border-color: rgba(0, 0, 0, 0.08);
}

/* Force admin mobile chat to use light colors */
body.light-theme .admin-main.chat-mode,
body.light-theme .chat-users-panel,
body.light-theme #chat-users-list,
body.light-theme .chat-list-header {
    background: rgba(255, 255, 255, 0.98) !important;
    color: #1a1a2e !important;
}

body.light-theme .chat-users-panel *,
body.light-theme #chat-users-list *,
body.light-theme .chat-list-header * {
    color: inherit;
}

/* Chat user items - force light */
body.light-theme .chat-user-item,
body.light-theme [class*="chat-user"] {
    background: transparent !important;
}

body.light-theme .chat-user-item:hover {
    background: rgba(99, 102, 241, 0.08) !important;
}

/* User name in chat list */
body.light-theme .chat-user-item>div:first-child,
body.light-theme .chat-user-name,
body.light-theme .chat-user-item h4,
body.light-theme .chat-user-item strong {
    color: #1a1a2e !important;
}

/* Preview text in chat list */
body.light-theme .chat-user-preview,
body.light-theme .chat-user-item p,
body.light-theme .chat-user-item>div:nth-child(2) {
    color: #718096 !important;
}

/* Time in chat list */
body.light-theme .chat-user-time,
body.light-theme .chat-user-item span {
    color: #a0aec0 !important;
}

/* Mobile chat mode background */
@media (max-width: 1024px) {
    body.light-theme .admin-main.chat-mode {
        background: linear-gradient(135deg, #e0f2fe, #f0f9ff) !important;
    }

    body.light-theme .chat-users-panel {
        background: rgba(255, 255, 255, 0.98) !important;
        border-radius: 0 !important;
    }

    body.light-theme .chat-container {
        background: rgba(255, 255, 255, 0.98) !important;
    }

    body.light-theme .chat-header {
        background: rgba(255, 255, 255, 0.98) !important;
        color: #1a1a2e !important;
    }

    body.light-theme .chat-header * {
        color: #1a1a2e !important;
    }

    body.light-theme .chat-controls-container {
        background: rgba(255, 255, 255, 0.98) !important;
    }

    body.light-theme .mobile-nav {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(240, 248, 255, 0.98)) !important;
    }

    /* Mobile received messages - MUST be white with dark text */
    body.light-theme .message.received {
        background: rgba(255, 255, 255, 0.98) !important;
        color: #1a1a2e !important;
        border: 1px solid rgba(0, 0, 0, 0.1) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
    }

    body.light-theme .message.received p,
    body.light-theme .message.received span,
    body.light-theme .message.received div {
        color: #1a1a2e !important;
    }

    body.light-theme .message.received .message-time {
        color: #718096 !important;
        opacity: 1 !important;
    }

    body.light-theme .message-group.received .message {
        background: rgba(255, 255, 255, 0.98) !important;
        color: #1a1a2e !important;
        border: 1px solid rgba(0, 0, 0, 0.1) !important;
    }

    body.light-theme .message-group.received .message * {
        color: #1a1a2e !important;
    }

    body.light-theme .message-group.received .message-time {
        color: #718096 !important;
    }
}

/* Extra strong overrides for received messages in any context */
body.light-theme .message.received,
body.light-theme div.message.received,
body.light-theme .chat-messages .message.received {
    background: rgba(255, 255, 255, 0.98) !important;
    color: #1a1a2e !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

body.light-theme .message.received *:not(.fa):not([class*="fa-"]) {
    color: #1a1a2e !important;
}

body.light-theme .message.received .message-time {
    color: #718096 !important;
}

/* Message reply styling in light theme */
body.light-theme .message-reply {
    background: rgba(0, 0, 0, 0.05) !important;
    border-left-color: var(--primary) !important;
}

body.light-theme .message-reply .reply-sender {
    color: var(--primary) !important;
}

body.light-theme .message-reply .reply-text {
    color: #4a5568 !important;
}

/* ============= LIGHT THEME - MOBILE CHAT ROOM FIXES ============= */
/* Back button in header */
body.light-theme .chat-back-btn,
body.light-theme button.chat-back-btn,
body.light-theme .chat-header button {
    color: #1a1a2e !important;
}

body.light-theme .chat-back-btn i,
body.light-theme .chat-header button i {
    color: #1a1a2e !important;
}

/* Chat avatar in header */
body.light-theme .chat-header .chat-avatar {
    border: 2px solid rgba(0, 0, 0, 0.1) !important;
}

/* User name in chat header */
body.light-theme .chat-info h3,
body.light-theme #chat-user-name {
    color: #1a1a2e !important;
}

/* Chat input area - make it visible with contrast */
body.light-theme .chat-input {
    background: rgba(0, 0, 0, 0.03) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}

body.light-theme .chat-input input,
body.light-theme #admin-message-input {
    background: rgba(0, 0, 0, 0.06) !important;
    color: #1a1a2e !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

body.light-theme .chat-input input::placeholder {
    color: #718096 !important;
}

body.light-theme .chat-input button {
    background: rgba(0, 0, 0, 0.06) !important;
    color: #4a5568 !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

body.light-theme .chat-input button:last-child {
    background: var(--gradient-primary) !important;
    color: white !important;
    border: none !important;
}

/* Received message bubbles - light gray background for visibility */
body.light-theme .message.received {
    background: #f0f4f8 !important;
    color: #1a1a2e !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

body.light-theme .message.received p {
    color: #1a1a2e !important;
}

body.light-theme .message.received .message-time {
    color: #718096 !important;
    opacity: 1 !important;
}

body.light-theme .message-group.received .message {
    background: #f0f4f8 !important;
    color: #1a1a2e !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

body.light-theme .message-group.received .message p {
    color: #1a1a2e !important;
}

body.light-theme .message-group.received .message .message-time {
    color: #718096 !important;
}