/* 🌲 FOREST CAMPING THEME - Enhanced Color Palette */
:root {
    /* Wood tones */
    --dark-wood: #2d1b00;
    --medium-wood: #503628;
    --light-wood: #7a5a47;
    --wood-border: #2a1c14;
    --carved-wood: #3d2817;
    --weathered-wood: #8b7355;

    /* Fire colors - Enhanced */
    --fire-orange: #ff6b35;
    --fire-bright: #f77f00;
    --fire-deep: #d62828;
    --ember-yellow: #fca311;
    --fire-red: #ff5722;
    --fire-glow: #ffc107;

    /* Forest greens - Enhanced */
    --forest-dark: #1e3a2e;
    --forest-deep: #0f2419;
    --forest-medium: #2d4a3e;
    --forest-green: #4a7c59;
    --moss-green: #5f8a6a;
    --forest-light: #6b9e78;

    /* Leather & Earth */
    --leather-brown: #5d4037;
    --leather-dark: #3e2723;
    --earth-brown: #3d2817;
    --clay-brown: #6d4c41;

    /* Neutrals */
    --canvas-cream: #f5ebe0;
    --parchment: #f4e8d0;
    --smoke-white: #eceff1;
    --ash-gray: #78909c;
    --stone-gray: #546e7a;
    --night-black: #1c0a00;

    /* 🌲 NORDIC PINE - Scandinavian Forest Theme */

    /* Beige Tones (Own messages) - Warm & Light */
    --beige-light: #f5f5dc;         /* Beige - light base */
    --beige-tan: #e8d5b7;           /* Tan - deeper shade */
    --beige-highlight: #fffef7;     /* Cream white - highlights */
    --beige-shadow: #d4c4a8;        /* Shadow tone */

    /* Forest Green (Others' messages) - Deep & Rich */
    --forest-deep: #1e3a2e;         /* Deep forest green - primary */
    --forest-darker: #0f2419;       /* Darker forest - shadows */
    --forest-medium: #2d4a3e;       /* Medium forest - lighter shade */
    --forest-light: #3a5a4a;        /* Light forest - highlights */

    /* Accent Colors */
    --mint-accent: #a8d5ba;         /* Mint green - primary accent */
    --mint-light: #b5ddc4;          /* Light mint - hover states */
    --mint-dark: #95c9a7;           /* Dark mint - pressed states */

    /* Background & Base */
    --pine-dark: #0a1812;           /* Very dark pine - deep shadows */
    --cream: #f5f5dc;               /* Cream - same as beige-light */

    /* Contrast colors for text */
    --text-on-light: #1e3a2e;       /* Dark green - on light backgrounds */
    --text-on-dark: #f5f5dc;        /* Cream - on dark backgrounds */

    /* Chat specific colors */
    --own-message-primary: #f5f5dc;
    --own-message-secondary: #e8d5b7;
    --other-message-primary: #2d4a3e;
    --other-message-secondary: #1e3a2e;
}

body {
    font-family: Georgia, serif;
    /* EXACT LEGACY - Wood grain texture with dark forest background */
    background:
        /* Wood grain pattern */
        repeating-linear-gradient(
            90deg,
            rgba(80, 54, 40, 0.03) 0px,
            rgba(80, 54, 40, 0.03) 2px,
            transparent 2px,
            transparent 80px
        ),
        repeating-linear-gradient(
            0deg,
            rgba(42, 28, 20, 0.05) 0px,
            rgba(42, 28, 20, 0.05) 1px,
            transparent 1px,
            transparent 40px
        ),
        /* Dark forest gradient */
        linear-gradient(
            to bottom,
            #1c0a00 0%,
            #2d1b00 20%,
            #1a0f00 50%,
            #2d1b00 80%,
            #1c0a00 100%
        );
    background-attachment: fixed;
}

/* 🌲 NORDIC PINE - ФАЗА 1: Chat Container Background */
/* Override background ONLY when in chat view */
body[data-view="chat"] {
    background:
        /* Deep Forest Gradient - Top to Bottom */
        linear-gradient(
            to bottom,
            var(--forest-deep) 0%,             /* Deep forest at top */
            var(--forest-darker) 100%          /* Darker forest at bottom */
        ) !important;
    background-attachment: fixed;
    position: relative;
}

/* Subtle pine needle texture overlay */
body[data-view="chat"]::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        /* Very subtle diagonal lines mimicking pine needles */
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 3px,
            rgba(168, 213, 186, 0.015) 3px,
            rgba(168, 213, 186, 0.015) 4px
        ),
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 3px,
            rgba(168, 213, 186, 0.015) 3px,
            rgba(168, 213, 186, 0.015) 4px
        );
    pointer-events: none;
    z-index: 0;
}

/* Chat messages scrollable container - flex layout handles sizing */
#chatMessagesContainer {
    background: transparent;
    position: relative;
    z-index: 1;
}

/* ========================================
   STARRY NIGHT BACKGROUND - ULTIMATE EDITION
   Изолирани анимации - НЕ засягат чат съобщенията!
   ======================================== */

#chatMessagesContainer.chat-starry-night {
    overflow-x: hidden; /* Блокира horizontal overflow за shooting star */
    overflow-y: auto; /* Позволява vertical scrolling */
    position: relative; /* За positioning на ::before/::after */
    background: transparent; /* БЕЗ background на контейнера */
}

/* Background Layer - На ::before за изолация от съобщения */
#chatMessagesContainer.chat-starry-night::before {
    content: '';
    position: fixed; /* Fixed за да покрива целия scroll */
    top: 70px; /* След frosted glass header (70px padding-top) */
    bottom: 0; /* Продължава ДО КРАЯ - покрива и input area ✅ */
    left: 0;
    right: 0;
    z-index: -1; /* ЗАД съобщенията И ЗАД input */
    pointer-events: none;

    /* АБСОЛЮТНА СИГУРНОСТ - нищо не излиза от граници */
    clip-path: inset(0);
    overflow: hidden;

    /* Background градиенти - СТАТИЧНИ, БЕЗ анимации! */
    background:
        /* Nebula Clouds - Cosmic Dust */
        radial-gradient(ellipse at 20% 30%, rgba(147, 51, 234, 0.04) 0%, transparent 35%),
        radial-gradient(ellipse at 80% 60%, rgba(59, 130, 246, 0.05) 0%, transparent 40%),
        radial-gradient(ellipse at 45% 75%, rgba(168, 213, 186, 0.06) 0%, transparent 38%),
        /* Aurora Borealis Layer 1 - Purple/Violet Wave */
        linear-gradient(140deg,
            transparent 0%,
            transparent 25%,
            rgba(168, 85, 247, 0.08) 35%,
            rgba(147, 51, 234, 0.12) 45%,
            rgba(168, 85, 247, 0.1) 55%,
            transparent 65%,
            transparent 100%),
        /* Aurora Borealis Layer 2 - Pink/Magenta Accent */
        linear-gradient(-50deg,
            transparent 0%,
            transparent 30%,
            rgba(236, 72, 153, 0.06) 42%,
            rgba(219, 39, 119, 0.09) 50%,
            rgba(236, 72, 153, 0.07) 58%,
            transparent 70%,
            transparent 100%),
        /* Aurora Borealis Layer 3 - Mint Green Primary Wave */
        linear-gradient(135deg,
            transparent 0%,
            transparent 20%,
            rgba(168, 213, 186, 0.14) 32%,
            rgba(149, 201, 167, 0.22) 45%,
            rgba(134, 239, 172, 0.18) 52%,
            rgba(168, 213, 186, 0.16) 65%,
            transparent 78%,
            transparent 100%),
        /* Aurora Borealis Layer 4 - Blue/Cyan Accent */
        linear-gradient(-60deg,
            transparent 0%,
            transparent 35%,
            rgba(59, 130, 246, 0.07) 45%,
            rgba(96, 165, 250, 0.11) 55%,
            rgba(59, 130, 246, 0.08) 65%,
            transparent 75%,
            transparent 100%),
        /* Aurora Borealis Layer 5 - Teal Secondary Wave */
        linear-gradient(125deg,
            transparent 0%,
            transparent 28%,
            rgba(20, 184, 166, 0.09) 40%,
            rgba(45, 212, 191, 0.13) 50%,
            rgba(20, 184, 166, 0.1) 60%,
            transparent 72%,
            transparent 100%),
        /* Aurora Secondary Layer - Independent Animation */
        linear-gradient(165deg,
            transparent 0%,
            transparent 35%,
            rgba(134, 239, 172, 0.09) 45%,
            rgba(168, 213, 186, 0.14) 55%,
            rgba(149, 201, 167, 0.11) 65%,
            transparent 75%,
            transparent 100%),
        linear-gradient(-75deg,
            transparent 0%,
            transparent 25%,
            rgba(96, 165, 250, 0.08) 38%,
            rgba(59, 130, 246, 0.12) 50%,
            rgba(96, 165, 250, 0.09) 62%,
            transparent 75%,
            transparent 100%),
        /* Big Bright Stars with Realistic Glow */
        radial-gradient(circle at 50% 25%, rgba(255, 255, 255, 0.5) 0%, rgba(220, 240, 255, 0.2) 2px, rgba(168, 213, 186, 0.08) 4px, transparent 7px),
        radial-gradient(circle at 85% 30%, rgba(255, 255, 255, 0.45) 0%, rgba(220, 240, 255, 0.18) 1.8px, rgba(168, 213, 186, 0.07) 3.5px, transparent 6px),
        radial-gradient(circle at 15% 70%, rgba(255, 255, 255, 0.48) 0%, rgba(255, 240, 220, 0.19) 2.2px, rgba(168, 213, 186, 0.08) 4.2px, transparent 6.5px),
        radial-gradient(circle at 70% 80%, rgba(255, 255, 255, 0.42) 0%, rgba(220, 240, 255, 0.17) 2px, rgba(168, 213, 186, 0.06) 3.8px, transparent 5.8px),
        /* Medium Stars */
        radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.35) 1.9px, transparent 1.9px),
        radial-gradient(circle at 40% 15%, rgba(255, 255, 255, 0.31) 1.6px, transparent 1.6px),
        radial-gradient(circle at 90% 60%, rgba(255, 255, 255, 0.33) 1.7px, transparent 1.7px),
        radial-gradient(circle at 60% 50%, rgba(255, 255, 255, 0.30) 1.5px, transparent 1.5px),
        radial-gradient(circle at 25% 45%, rgba(255, 255, 255, 0.32) 1.8px, transparent 1.8px),
        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.34) 1.7px, transparent 1.7px),
        radial-gradient(circle at 35% 85%, rgba(255, 255, 255, 0.29) 1.4px, transparent 1.4px),
        radial-gradient(circle at 95% 45%, rgba(255, 255, 255, 0.31) 1.6px, transparent 1.6px),
        /* Small Stars */
        radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.27) 1.2px, transparent 1.2px),
        radial-gradient(circle at 60% 85%, rgba(255, 255, 255, 0.25) 1.05px, transparent 1.05px),
        radial-gradient(circle at 70% 15%, rgba(255, 255, 255, 0.28) 1.25px, transparent 1.25px),
        radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.24) 0.95px, transparent 0.95px),
        radial-gradient(circle at 10% 60%, rgba(255, 255, 255, 0.26) 1.05px, transparent 1.05px),
        radial-gradient(circle at 45% 65%, rgba(255, 255, 255, 0.23) 0.95px, transparent 0.95px),
        radial-gradient(circle at 75% 55%, rgba(255, 255, 255, 0.25) 1.05px, transparent 1.05px),
        radial-gradient(circle at 55% 10%, rgba(255, 255, 255, 0.27) 1.15px, transparent 1.15px),
        radial-gradient(circle at 88% 75%, rgba(255, 255, 255, 0.24) 1px, transparent 1px),
        radial-gradient(circle at 12% 35%, rgba(255, 255, 255, 0.26) 1.05px, transparent 1.05px),
        radial-gradient(circle at 65% 90%, rgba(255, 255, 255, 0.23) 0.95px, transparent 0.95px),
        radial-gradient(circle at 42% 28%, rgba(255, 255, 255, 0.25) 1.05px, transparent 1.05px),
        /* Tiny Stars (stardust) */
        radial-gradient(circle at 33% 55%, rgba(255, 255, 255, 0.21) 0.75px, transparent 0.75px),
        radial-gradient(circle at 77% 33%, rgba(255, 255, 255, 0.20) 0.7px, transparent 0.7px),
        radial-gradient(circle at 22% 92%, rgba(255, 255, 255, 0.19) 0.65px, transparent 0.65px),
        radial-gradient(circle at 92% 88%, rgba(255, 255, 255, 0.22) 0.8px, transparent 0.8px),
        radial-gradient(circle at 8% 12%, rgba(255, 255, 255, 0.20) 0.7px, transparent 0.7px),
        radial-gradient(circle at 58% 72%, rgba(255, 255, 255, 0.21) 0.75px, transparent 0.75px),
        radial-gradient(circle at 48% 38%, rgba(255, 255, 255, 0.19) 0.68px, transparent 0.68px),
        radial-gradient(circle at 82% 52%, rgba(255, 255, 255, 0.20) 0.72px, transparent 0.72px),
        /* Deep Night Sky with Multi-color Aurora Glow */
        radial-gradient(ellipse at 50% 0%, rgba(168, 213, 186, 0.08) 0%, rgba(168, 85, 247, 0.04) 30%, transparent 60%),
        radial-gradient(ellipse at 30% 0%, rgba(134, 239, 172, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 0%, rgba(236, 72, 153, 0.05) 0%, transparent 45%),
        linear-gradient(to bottom, rgba(10, 24, 18, 0.6) 0%, rgba(0, 0, 0, 0.8) 100%);

    /* БЕЗ АНИМАЦИИ - статичен background за 100% стабилност */
}

/* Shooting Star - Animated (fixed viewport, clipped to chat area) */
#chatMessagesContainer.chat-starry-night::after {
    content: '';
    position: fixed; /* Fixed спрямо viewport - като ::before */
    /* top/left са контролирани от keyframes animation */
    width: 2px;
    height: 2px;
    z-index: -1; /* ЗАД всичко, но ОТГОРЕ на ::before background */
    pointer-events: none;

    /* АБСОЛЮТНА СИГУРНОСТ - не излиза над header (70px) */
    clip-path: inset(70px 0 0 0); /* Top 70px clipped, bottom може да достигне края */
    background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 40%, transparent 100%);
    box-shadow:
        /* Shooting star core glow */
        0 0 6px 2px rgba(255, 255, 255, 0.8),
        0 0 12px 4px rgba(220, 240, 255, 0.6),
        0 0 20px 8px rgba(168, 213, 186, 0.3),
        /* Trail effect using multiple box-shadows */
        -30px -15px 0 -0.5px rgba(255, 255, 255, 0.4),
        -50px -25px 0 -0.8px rgba(255, 255, 255, 0.3),
        -70px -35px 0 -1px rgba(255, 255, 255, 0.2),
        -90px -45px 0 -1.2px rgba(255, 255, 255, 0.1),
        -110px -55px 0 -1.4px rgba(220, 240, 255, 0.08);
    border-radius: 50%;
    animation: shootingStar 12s ease-in-out infinite;
}

/* Keyframes - САМО за background animations */
@keyframes starryNightUltimate {
    0% {
        opacity: 1;
        filter: brightness(1) saturate(1.05) hue-rotate(0deg);
    }
    15% {
        opacity: 0.98;
        filter: brightness(1.01) saturate(1.06) hue-rotate(1deg);
    }
    30% {
        opacity: 0.96;
        filter: brightness(1.02) saturate(1.07) hue-rotate(2deg);
    }
    45% {
        opacity: 0.94;
        filter: brightness(0.99) saturate(1.05) hue-rotate(3deg);
    }
    60% {
        opacity: 0.93;
        filter: brightness(0.98) saturate(1.06) hue-rotate(4deg);
    }
    75% {
        opacity: 0.95;
        filter: brightness(1.01) saturate(1.06) hue-rotate(2deg);
    }
    90% {
        opacity: 0.98;
        filter: brightness(1.01) saturate(1.05) hue-rotate(1deg);
    }
    100% {
        opacity: 1;
        filter: brightness(1) saturate(1.05) hue-rotate(0deg);
    }
}

@keyframes starTwinkle {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.01); /* По-subtle от 1.02 */
    }
    100% {
        transform: scale(1);
    }
}

@keyframes shootingStar {
    0%, 70% {
        top: calc(70px + 10%); /* Започва от header + 10% */
        left: -10%;
        opacity: 0;
    }
    75% {
        opacity: 1;
    }
    85% {
        opacity: 0.8;
    }
    100% {
        top: calc(100vh - 50px); /* Завършва почти до края на viewport */
        left: 85%;
        opacity: 0;
    }
}

/* ========================================
   LOAD MORE BUTTON (Sticky at top)
   ======================================== */
.load-more-button-top {
    position: sticky;
    top: 0;
    z-index: 5; /* Над background (z-index: -1) и messages (z-index: 1) */
    display: block; /* Block за да работи margin: auto */
    width: fit-content; /* Заема само толкова място колкото бутона */
    margin: 0 auto 16px auto; /* Центриран хоризонтално + bottom margin */
    padding: 0;
    background: transparent;
    pointer-events: none; /* Clicks минават през контейнера към бутона */
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.load-more-button-top * {
    pointer-events: auto; /* Само children (бутона) имат pointer events */
}

/* Nordic Glass Premium Button - Load More */
.load-more-btn-premium {
    cursor: pointer;
    position: relative;
}

.load-more-btn-premium:hover {
    transform: translateY(-2px) scale(1.02);
    border-color: #b5ddc4 !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.6), 0 3px 10px rgba(0,0,0,0.4), inset 0 2px 8px rgba(0,0,0,0.3), 0 0 30px rgba(168,213,186,0.25) !important;
}

.load-more-btn-premium:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 2px 10px rgba(0,0,0,0.5), inset 0 2px 6px rgba(0,0,0,0.4) !important;
}

.load-more-btn-premium:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

/* ========================================
   📊 PROFILE HEADER - Compact (как Home view)
   ======================================== */

.profile-header {
    background: linear-gradient(145deg, #f5e6d3 0%, #ede0d4 50%, #f5e6d3 100%);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow:
        0 4px 12px rgba(0,0,0,0.15),
        inset 0 1px 0 rgba(255,255,255,0.3),
        inset 0 -2px 4px rgba(0,0,0,0.1);
    border: 3px solid #3d2f23;
    position: relative;
    overflow: hidden;
}

.profile-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #ff6f00, #ffa726, #ff6f00);
    opacity: 0.6;
}

.profile-content {
    position: relative;
    z-index: 1;
}

.profile-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff6f00, #ffa726);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    box-shadow:
        0 4px 12px rgba(255,111,0,0.4),
        inset 0 2px 4px rgba(0,0,0,0.2);
    border: 3px solid rgba(255,255,255,0.3);
}

.profile-name {
    font-size: 18px;
    font-weight: 700;
    color: #2c1810;
    text-shadow: 0 1px 2px rgba(255,255,255,0.5);
}

.profile-level {
    font-size: 12px;
    font-weight: 600;
    color: #ff6f00;
    background: rgba(255,111,0,0.1);
    padding: 2px 8px;
    border-radius: 6px;
    display: inline-block;
    margin-top: 2px;
}

.settings-btn {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #4a3728, #3d2f23);
    border: 2px solid #2c1810;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.settings-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

.settings-btn:active {
    transform: scale(0.95);
}

.profile-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 2px dashed rgba(61,47,35,0.2);
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.stat-icon {
    font-size: 20px;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
}

.stat-value {
    font-size: 16px;
    font-weight: 700;
    color: #2c1810;
    line-height: 1;
}

.stat-label {
    font-size: 9px;
    color: #7a5a47;
    font-weight: 600;
    line-height: 1;
}

/* ========================================
   🏕️ PROFILE TAB BUTTONS - 2 BIG TABS (Mobile Optimized)
   ======================================== */

.tab-button-big {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 12px;
    border-radius: 14px;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    font-family: inherit;
    min-height: 70px;

    /* Wood texture background */
    background:
        linear-gradient(135deg, rgba(0,0,0,0.1) 0%, transparent 50%, rgba(255,255,255,0.05) 100%),
        linear-gradient(to bottom, #4a3728, #3d2f23);

    /* Wood grain shadow */
    box-shadow:
        0 3px 10px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255,255,255,0.1),
        inset 0 -1px 0 rgba(0,0,0,0.3);
}

.tab-button-big.tab-button-active {
    /* Campfire glow for active tab */
    background:
        linear-gradient(135deg, rgba(255,111,0,0.25) 0%, transparent 50%, rgba(255,193,7,0.15) 100%),
        linear-gradient(to bottom, #ff6f00, #e65100);

    box-shadow:
        0 5px 20px rgba(255,111,0,0.5),
        0 0 25px rgba(255,111,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.25),
        inset 0 -2px 10px rgba(0,0,0,0.4);

    color: white;
    transform: translateY(-3px);
}

.tab-button-big.tab-button-inactive {
    color: rgba(255,255,255,0.7);
}

.tab-button-big.tab-button-inactive:hover {
    background:
        linear-gradient(135deg, rgba(255,193,7,0.15) 0%, transparent 50%, rgba(255,111,0,0.08) 100%),
        linear-gradient(to bottom, #5a4432, #4a3728);

    box-shadow:
        0 5px 15px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.15),
        inset 0 -1px 0 rgba(0,0,0,0.3);

    transform: translateY(-2px);
    color: white;
}

.tab-button-big.tab-button-inactive:active {
    transform: translateY(0);
    box-shadow:
        0 2px 8px rgba(0,0,0,0.3),
        inset 0 2px 4px rgba(0,0,0,0.3);
}

.tab-icon-big {
    font-size: 32px;
    margin-bottom: 6px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.tab-button-big.tab-button-active .tab-icon-big {
    animation: fire-pulse 2s ease-in-out infinite;
}

/* ========================================
   🏕️ OLD 4-TAB BUTTONS (deprecated, kept for compatibility)
   ======================================== */

.tab-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 8px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    font-family: inherit;
    font-weight: 600;
    text-transform: none;

    /* Wood texture background */
    background:
        linear-gradient(135deg, rgba(0,0,0,0.1) 0%, transparent 50%, rgba(255,255,255,0.05) 100%),
        linear-gradient(to bottom, #4a3728, #3d2f23);

    /* Wood grain shadow */
    box-shadow:
        0 2px 8px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255,255,255,0.1),
        inset 0 -1px 0 rgba(0,0,0,0.3);
}

.tab-button-active {
    /* Campfire glow for active tab */
    background:
        linear-gradient(135deg, rgba(255,111,0,0.2) 0%, transparent 50%, rgba(255,193,7,0.1) 100%),
        linear-gradient(to bottom, #ff6f00, #e65100);

    box-shadow:
        0 4px 16px rgba(255,111,0,0.4),
        0 0 20px rgba(255,111,0,0.3),
        inset 0 1px 0 rgba(255,255,255,0.2),
        inset 0 -2px 8px rgba(0,0,0,0.3);

    color: white;
    transform: translateY(-2px);
}

.tab-button-inactive {
    color: rgba(255,255,255,0.7);
}

.tab-button-inactive:hover {
    background:
        linear-gradient(135deg, rgba(255,193,7,0.1) 0%, transparent 50%, rgba(255,111,0,0.05) 100%),
        linear-gradient(to bottom, #5a4432, #4a3728);

    box-shadow:
        0 4px 12px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.15),
        inset 0 -1px 0 rgba(0,0,0,0.3);

    transform: translateY(-1px);
    color: white;
}

.tab-button-inactive:active {
    transform: translateY(0);
    box-shadow:
        0 2px 6px rgba(0,0,0,0.3),
        inset 0 2px 4px rgba(0,0,0,0.3);
}

.tab-button .tab-icon {
    font-size: 24px;
    margin-bottom: 4px;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}

.tab-button-active .tab-icon {
    animation: fire-pulse 2s ease-in-out infinite;
}

@keyframes fire-pulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 8px rgba(255,111,0,0.6));
    }
    50% {
        transform: scale(1.1);
        filter: drop-shadow(0 0 12px rgba(255,111,0,0.8));
    }
}

/* ========================================
   🏔️ TRAIL SIGNPOST - Profile Page Style
   ======================================== */

.trail-signpost {
    position: relative;
    padding: 0;
    margin-bottom: 24px;
}

/* Wooden post (vertical) */
.trail-post {
    width: 28px;
    background:
        /* Wood knots */
        radial-gradient(circle at 30% 20%, rgba(0,0,0,0.4) 2px, transparent 4px),
        radial-gradient(circle at 70% 60%, rgba(0,0,0,0.3) 3px, transparent 5px),
        radial-gradient(circle at 40% 80%, rgba(0,0,0,0.35) 2px, transparent 4px),
        /* Vertical grain */
        repeating-linear-gradient(0deg,
            rgba(0,0,0,0.1) 0px,
            transparent 1px,
            transparent 3px),
        /* Wood color */
        linear-gradient(to right,
            #3d2f23 0%,
            #6b4f3a 20%,
            #5a4432 50%,
            #6b4f3a 80%,
            #3d2f23 100%);
    position: absolute;
    left: 50%;
    top: 0;
    bottom: -40px;
    transform: translateX(-50%);
    border-radius: 8px;
    box-shadow:
        inset 3px 0 6px rgba(0,0,0,0.5),
        inset -3px 0 6px rgba(0,0,0,0.3),
        3px 0 12px rgba(0,0,0,0.4);
    z-index: 0;
}

/* Post ground base */
.trail-post::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: -6px;
    right: -6px;
    height: 12px;
    background: linear-gradient(to bottom,
        rgba(61,47,35,0.9) 0%,
        rgba(61,47,35,0.5) 100%);
    border-radius: 50%;
    filter: blur(3px);
}

/* Wooden sign (hanging) */
.wooden-sign {
    background:
        /* Wood knots - dark spots */
        radial-gradient(ellipse at 15% 25%, rgba(0,0,0,0.5) 8px, transparent 16px),
        radial-gradient(circle at 85% 45%, rgba(0,0,0,0.4) 6px, transparent 12px),
        radial-gradient(ellipse at 30% 75%, rgba(0,0,0,0.45) 10px, transparent 18px),
        radial-gradient(circle at 75% 15%, rgba(0,0,0,0.35) 5px, transparent 10px),
        /* Sun bleaching at top */
        linear-gradient(to bottom,
            rgba(255,255,255,0.08) 0%,
            transparent 30%),
        /* Weathering at edges */
        linear-gradient(to right,
            rgba(0,0,0,0.15) 0%,
            transparent 8%,
            transparent 92%,
            rgba(0,0,0,0.15) 100%),
        /* Fine wood grain texture */
        repeating-linear-gradient(90deg,
            rgba(0,0,0,0.12) 0px,
            rgba(0,0,0,0.08) 1px,
            transparent 2px,
            transparent 40px),
        repeating-linear-gradient(0deg,
            rgba(0,0,0,0.05) 0px,
            transparent 1px,
            transparent 5px),
        /* Wood planks */
        linear-gradient(90deg,
            #6b4f3a 0%,
            #5a4432 33%,
            #6b4f3a 33.5%,
            #5a4432 67%,
            #6b4f3a 67.5%,
            #5a4432 100%);

    border: 4px solid #2a1c14;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 32px;
    position: relative;
    z-index: 1;

    box-shadow:
        /* Sign shadow on post */
        0 8px 20px rgba(0,0,0,0.6),
        /* Inner depth */
        inset 0 3px 6px rgba(0,0,0,0.4),
        inset 0 -3px 6px rgba(255,255,255,0.06),
        /* Edge highlight */
        inset 0 1px 0 rgba(255,255,255,0.1);
}

/* Rope attachment - thicker twisted rope */
.wooden-sign::before {
    content: '';
    position: absolute;
    top: -24px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 28px;
    background:
        /* Rope twist texture */
        repeating-linear-gradient(135deg,
            #a0826d 0px,
            #8b7355 1px,
            #a0826d 2px,
            #6b5845 3px,
            #8b7355 4px),
        /* Base rope color */
        linear-gradient(to bottom,
            #a0826d 0%,
            #8b7355 50%,
            #6b5845 100%);
    border-radius: 3px;
    box-shadow:
        /* Rope depth */
        inset -1px 0 2px rgba(0,0,0,0.4),
        inset 1px 0 1px rgba(255,255,255,0.2),
        /* Shadow below */
        0 2px 4px rgba(0,0,0,0.5);
}

/* Rope knot at top of sign */
.wooden-sign::after {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    background:
        radial-gradient(circle,
            #a0826d 0%,
            #8b7355 50%,
            #6b5845 100%);
    border-radius: 50%;
    box-shadow:
        inset 0 1px 2px rgba(0,0,0,0.5),
        0 1px 2px rgba(0,0,0,0.4);
    z-index: 10;
}

/* Metal nails on header sign - bigger with rust */
.trail-sign-header::before,
.trail-sign-header::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    background:
        /* Rust ring around nail */
        radial-gradient(circle,
            transparent 5px,
            rgba(139,69,19,0.4) 6px,
            transparent 8px),
        /* Metal nail head */
        radial-gradient(circle,
            #9a9a9a 0%,
            #707070 40%,
            #4a4a4a 100%);
    border-radius: 50%;
    box-shadow:
        /* Inner metallic shine */
        inset -2px -2px 3px rgba(0,0,0,0.7),
        inset 2px 2px 2px rgba(255,255,255,0.4),
        /* Outer shadow */
        0 2px 4px rgba(0,0,0,0.6);
    z-index: 100;
}

.trail-sign-header::before {
    /* Nail top-left */
    top: 10px;
    left: 10px;
    transform: rotate(-5deg);
}

.trail-sign-header::after {
    /* Nail top-right */
    top: 10px;
    right: 10px;
    transform: rotate(3deg);
}

/* Header sign - larger and more prominent */
.trail-sign-header {
    transform: scale(1.08);
    margin-bottom: 40px;
    z-index: 10;
}

/* Directional arrow sign */
.direction-arrow {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background:
        /* Darker center area */
        radial-gradient(ellipse at center,
            rgba(0,0,0,0.15) 0%,
            transparent 60%),
        /* Edge highlights */
        linear-gradient(to right,
            rgba(0,0,0,0.12) 0%,
            transparent 20%,
            transparent 80%,
            rgba(255,255,255,0.08) 100%);
    border-radius: 10px;
    margin-bottom: 16px;
    position: relative;
}

.direction-arrow::before {
    content: '→';
    font-size: 40px;
    font-weight: 900;
    color: #2a1c14;
    text-shadow:
        /* Carved arrow effect */
        -1px -1px 0 rgba(0,0,0,0.8),
        1px 1px 0 rgba(255,255,255,0.3),
        2px 2px 3px rgba(0,0,0,0.5);
    line-height: 1;
}

/* Trail marker text - burned/branded into wood */
.trail-marker {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #f5e6d3;
    text-shadow:
        /* Strong shadow for depth */
        2px 2px 3px rgba(0,0,0,0.9),
        -1px -1px 1px rgba(255,255,255,0.15),
        /* Glow effect (like burned edges) */
        0 0 8px rgba(0,0,0,0.5);
}

.trail-distance {
    font-size: 12px;
    font-weight: 600;
    color: rgba(245,230,211,0.9); /* Increased from 0.75 to 0.9 for better readability */
    margin-top: 4px;
    letter-spacing: 0.5px;
    text-shadow:
        1px 1px 2px rgba(0,0,0,0.7);
}

/* Carved text effect - deeply etched into wood */
.carved-text {
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 1.5px;
    /* BRIGHT TEXT for readability on dark wood */
    color: #f5e6d3;
    text-shadow:
        /* Strong dark outline for contrast */
        -1px -1px 0 rgba(0,0,0,0.9),
        1px -1px 0 rgba(0,0,0,0.9),
        -1px 1px 0 rgba(0,0,0,0.9),
        1px 1px 0 rgba(0,0,0,0.9),
        /* Deep shadow for carved effect */
        0 3px 6px rgba(0,0,0,0.8),
        0 5px 12px rgba(0,0,0,0.6),
        /* Subtle warm highlight */
        0 -1px 0 rgba(255,255,255,0.15);
}

/* Mountain peak decoration - carved header */
.mountain-peaks {
    text-align: center;
    font-size: 11px;
    font-weight: 900;
    color: #2a1c14;
    letter-spacing: 3px;
    margin-bottom: 24px;
    text-transform: uppercase;
    text-shadow:
        -1px -1px 0 rgba(0,0,0,0.8),
        1px 1px 0 rgba(255,255,255,0.2),
        0 2px 4px rgba(0,0,0,0.5);
    opacity: 0.7;
}

/* Weathered wood crack texture */
.wood-crack {
    position: absolute;
    width: 2px;
    height: 40px;
    background: linear-gradient(to bottom,
        transparent 0%,
        rgba(0,0,0,0.3) 50%,
        transparent 100%);
    transform: rotate(-15deg);
    top: 20%;
    right: 15%;
    opacity: 0.5;
}

/* ===== MOBILE RESPONSIVE TRAIL SIGNPOST ===== */
@media (max-width: 640px) {
    .trail-post {
        width: 20px; /* Narrower post on mobile */
    }

    .wooden-sign {
        padding: 16px; /* Less padding on mobile */
        margin-bottom: 24px; /* Less spacing */
    }

    .trail-sign-header {
        transform: scale(1.05); /* Slightly less scale */
        margin-bottom: 32px;
    }

    .trail-sign-header::before,
    .trail-sign-header::after {
        width: 12px; /* Smaller nails */
        height: 12px;
    }

    .direction-arrow {
        padding: 14px 16px; /* Less padding */
        gap: 12px;
    }

    .direction-arrow::before {
        font-size: 32px; /* Smaller arrow */
    }

    .trail-marker {
        font-size: 16px; /* Smaller text */
    }

    .carved-text {
        font-size: 18px; /* Smaller carved numbers */
    }

    .trail-distance {
        font-size: 11px; /* Smaller labels */
    }

    .mountain-peaks {
        font-size: 10px; /* Smaller decoration text */
        margin-bottom: 20px;
    }
}


/* Minimal mint accent line at top */
body[data-view="chat"]::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--mint-accent) 50%,
        transparent 100%
    );
    opacity: 0.3;
    pointer-events: none;
    z-index: 1000;
}

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

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

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

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    75% { transform: translateX(2px); }
}

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

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

/* 📖 CAMP LOG BOOK - Decorative Elements */

/* Coffee stain variations */
.coffee-stain-1 {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50% 45% 48% 52%;
    background: radial-gradient(circle at 30% 30%, rgba(101, 67, 33, 0.15), rgba(139, 69, 19, 0.08));
    filter: blur(1px);
    opacity: 0.6;
    pointer-events: none;
}

.coffee-stain-2 {
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 48% 52% 50% 50%;
    background: radial-gradient(circle at 40% 40%, rgba(101, 67, 33, 0.12), rgba(139, 69, 19, 0.06));
    filter: blur(0.5px);
    opacity: 0.5;
    pointer-events: none;
}

/* Ink splatters */
.ink-splatter {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    opacity: 0.3;
    pointer-events: none;
}

/* Paper tear effect */
.torn-edge-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    background-image:
        linear-gradient(45deg, transparent 33%, #f4e8d0 33%, #f4e8d0 66%, transparent 66%),
        linear-gradient(-45deg, transparent 33%, #f4e8d0 33%, #f4e8d0 66%, transparent 66%);
    background-size: 6px 8px;
    background-position: 0 0, 3px 0;
    opacity: 0.4;
}

/* Vintage paper aging texture */
.aged-paper-texture {
    background-image:
        radial-gradient(circle at 20% 30%, rgba(139, 115, 85, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(101, 67, 33, 0.02) 0%, transparent 50%),
        radial-gradient(circle at 40% 80%, rgba(139, 115, 85, 0.025) 0%, transparent 50%);
}

/* Handwritten underline */
@keyframes handwrittenDraw {
    from {
        stroke-dashoffset: 100;
    }
    to {
        stroke-dashoffset: 0;
    }
}

/* Subtle paper curl on corners */
.paper-curl-corner::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, transparent 0%, transparent 45%, rgba(232, 220, 196, 0.6) 50%, rgba(244, 232, 208, 0.8) 100%);
    border-radius: 0 0 0 4px;
    opacity: 0.7;
    pointer-events: none;
}

/* Wax seal stamp effect */
.wax-seal {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #dc2626, #991b1b);
    box-shadow:
        inset 0 2px 4px rgba(0,0,0,0.3),
        inset 0 -2px 4px rgba(255,255,255,0.1),
        0 4px 8px rgba(0,0,0,0.3);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wax-seal::after {
    content: '⚔️';
    font-size: 20px;
    filter: brightness(1.2);
}

/* Pencil sketch lines */
.sketch-lines {
    position: absolute;
    inset: 0;
    opacity: 0.08;
    pointer-events: none;
    background-image:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(101, 67, 33, 0.15) 2px,
            rgba(101, 67, 33, 0.15) 3px
        );
}

/* 📖 DAILY CAMP LOG - Logbook styling */
.daily-camp-log-stamp {
    position: relative;
    animation: fadeInUp 0.4s ease-out;
}

@keyframes pulse-subtle {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
}

/* Mobile optimizations for camp log */
@media (max-width: 640px) {
    .daily-camp-log-stamp {
        font-size: 0.9em;
    }
}

/* 🌲 NORDIC PINE - Utility animation classes */
.animate-slide-down { animation: slideDown 0.4s ease-out; }
.animate-fade-in { animation: fadeIn 0.6s ease-out; }
.animate-fade-in-up { animation: fadeInUp 0.3s ease-out; }

/* 🥾 WALKING ICON ANIMATION */
@keyframes walk {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    25% { transform: translateX(-3px) rotate(-5deg); }
    75% { transform: translateX(3px) rotate(5deg); }
}

.icon-walk {
    display: inline-block;
}

.icon-walk:hover {
    animation: walk 0.6s ease-in-out infinite;
}

/* ⏰ PULSE ICON ANIMATION */
@keyframes iconPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

.icon-pulse {
    display: inline-block;
}

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

/* 🪵 CARVED WOOD BUTTON STYLE */
.forest-button {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    /* Carved wood effect */
    background: linear-gradient(145deg, var(--medium-wood), var(--dark-wood));
    box-shadow:
        inset 2px 2px 4px rgba(0, 0, 0, 0.4),
        inset -2px -2px 4px rgba(255, 255, 255, 0.1),
        0 6px 0 var(--dark-wood),
        0 8px 20px rgba(0, 0, 0, 0.5);
    border: 2px solid var(--wood-border);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

.forest-button:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 2px 2px 4px rgba(0, 0, 0, 0.4),
        inset -2px -2px 4px rgba(255, 255, 255, 0.1),
        0 8px 0 var(--dark-wood),
        0 12px 25px rgba(0, 0, 0, 0.6);
    filter: brightness(1.1);
}

.forest-button:active {
    transform: translateY(4px);
    box-shadow:
        inset 2px 2px 4px rgba(0, 0, 0, 0.4),
        inset -2px -2px 4px rgba(255, 255, 255, 0.1),
        0 2px 0 var(--dark-wood),
        0 4px 10px rgba(0, 0, 0, 0.5);
}

.forest-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 160, 0, 0.3), transparent);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.forest-button:hover::before {
    width: 400px;
    height: 400px;
}

.icon-float {
    animation: float 3s ease-in-out infinite;
}

/* 🌲 WOOD TEXTURE & CARVED CARD STYLES */
.wood-texture {
    background:
        /* Fine wood grain */
        repeating-linear-gradient(
            90deg,
            rgba(80, 54, 40, 0.1) 0px,
            rgba(80, 54, 40, 0.1) 2px,
            transparent 2px,
            transparent 60px
        ),
        repeating-linear-gradient(
            0deg,
            rgba(42, 28, 20, 0.08) 0px,
            rgba(42, 28, 20, 0.08) 1px,
            transparent 1px,
            transparent 30px
        ),
        linear-gradient(145deg, var(--medium-wood), var(--dark-wood));
}

.forest-card {
    background: linear-gradient(145deg, var(--medium-wood), rgba(45, 27, 0, 0.9));
    border: 3px solid var(--wood-border);
    box-shadow:
        inset 2px 2px 5px rgba(0, 0, 0, 0.3),
        inset -2px -2px 5px rgba(255, 255, 255, 0.05),
        0 8px 24px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
}

.campfire-glow {
    box-shadow:
        0 0 30px rgba(255, 111, 0, 0.4),
        0 0 60px rgba(255, 160, 0, 0.2),
        inset 0 0 20px rgba(255, 111, 0, 0.1);
}

/* Dashboard Header Styles */
.dashboard-header {
    background: linear-gradient(145deg, var(--medium-wood), var(--dark-wood));
    border: 3px solid var(--wood-border);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.6),
        inset 2px 2px 5px rgba(0, 0, 0, 0.3),
        inset -2px -2px 5px rgba(255, 255, 255, 0.05);
}

/* Hero Fire Counter Animation */
@keyframes pulseScale {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.hero-counter {
    animation: pulseScale 3s ease-in-out infinite;
}

/* Action Button Grid */
.action-button-grid button {
    min-height: 60px;
    transition: all 0.2s ease;
}

.action-button-grid button:active {
    transform: scale(0.95);
}

.border-3 {
    border-width: 3px;
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    body {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        -webkit-touch-callout: none;
        user-select: none;
    }

    input, textarea, button {
        -webkit-appearance: none;
        border-radius: 0;
        user-select: auto;
    }
}

/* Touch-friendly buttons */
.touch-action-manipulation {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Prevent text selection on buttons */
button {
    user-select: none;
    -webkit-user-select: none;
}

/* Input fields should allow selection */
input, textarea {
    user-select: text;
    -webkit-user-select: text;
}

/* Safe area for notch devices (iPhone X+) */
.pb-safe {
    padding-bottom: env(safe-area-inset-bottom);
}

/* Better scrolling on mobile */
* {
    -webkit-overflow-scrolling: touch;
}

/* Prevent double-tap zoom */
.forest-button, button {
    touch-action: manipulation;
}

/* Line clamp utility */
.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Active state for mobile */
.forest-button:active {
    transform: translateY(0px) scale(0.98);
}

/* Smooth transitions for mobile */
@media (prefers-reduced-motion: no-preference) {
    * {
        transition-duration: 0.15s;
    }
}

/* High contrast for better readability on mobile */
@media (max-width: 640px) {
    .text-xs {
        font-size: 0.8rem;
    }

    .text-sm {
        font-size: 0.9rem;
    }
}

/* Bottom Navigation Bar - EXACT LEGACY */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, #1c1917, #1c1917, rgba(28, 25, 23, 0.95));
    border-top: 2px solid rgba(180, 83, 9, 0.5);
    backdrop-filter: blur(12px);
    z-index: 40;
    padding-bottom: env(safe-area-inset-bottom);
}

/* Bottom nav button active state */
.bottom-nav button.active {
    color: #f59e0b;
    background: rgba(120, 53, 15, 0.3);
}

/* Bottom nav button hover state */
.bottom-nav button:not(.active):hover {
    color: #fbbf24;
}

/* Ensure content doesn't hide behind bottom nav */
.pb-nav {
    padding-bottom: calc(5rem + env(safe-area-inset-bottom));
}

/* Smooth transitions for bottom nav */
.bottom-nav button {
    transition: all 0.2s ease-in-out;
}

/* Active indicator animation */
@keyframes slideInBottom {
    from {
        width: 0;
        opacity: 0;
    }
    to {
        width: 2rem;
        opacity: 1;
    }
}

.bottom-nav .active-indicator {
    animation: slideInBottom 0.3s ease-out;
}

/* Chat action menu slide-up animation */
@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.animate-slide-up {
    animation: slideUp 0.3s ease-out;
}

/* Scale-in animation for emoji picker and tooltips */
@keyframes scaleIn {
    from {
        transform: translate(-50%, -50%) scale(0.7);
        opacity: 0;
    }
    to {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

.animate-scale-in {
    animation: scaleIn 0.2s ease-out;
}

/* Reaction pop animation */
@keyframes reactionPop {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.3);
    }
    100% {
        transform: scale(1);
    }
}

.reaction-emoji {
    display: inline-block;
}

.reaction-emoji.pop {
    animation: reactionPop 0.3s ease-out;
}

/* Active scale animation for buttons */
.active\:scale-98:active {
    transform: scale(0.98);
}

/* Chat reply hover button (desktop only) */
.message-bubble-container:hover .reply-hover-btn {
    opacity: 1 !important;
}

/* Hide reply hover button on touch devices */
@media (hover: none) {
    .reply-hover-btn {
        display: none !important;
    }
}

/* ========================================
   MOBILE FULL-SCREEN CHAT MODE
   ======================================== */

/* Desktop: Show desktop header, hide mobile header */
/* Mobile-only app - no desktop header */
.mobile-chat-header {
    display: flex !important;
}

/* Hide bottom nav when in chat view */
body[data-view="chat"] .bottom-nav {
    display: none !important;
}

/* Chat uses flex layout - no fixed positioning needed */
body[data-view="chat"] .chat-input-container {
    z-index: 10;
}

/* Mobile optimizations */
@media (max-width: 767px) {
    /* Remove padding from #app when in chat (flex container handles layout) */
    body[data-view="chat"] #app {
        padding-top: 0;
        padding-bottom: 0;
    }

    /* Remove bottom padding when bottom nav is hidden */
    body[data-view="chat"] .pb-nav {
        padding-bottom: 0 !important;
    }
}

/* ========================================
   MESSENGER-STYLE MESSAGE BUBBLES
   ======================================== */

/* Message bubble with tail (arrow) */
.message-bubble-with-tail {
    position: relative;
    --tail-color: #292524; /* Default tail color, can be overridden */
}

/* Tail for own messages (right side) - Beige tan */
.message-bubble-with-tail.own-message::after {
    content: '';
    position: absolute;
    bottom: 8px;
    right: -8px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 12px 12px;
    border-color: transparent transparent transparent var(--beige-tan);
    filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.12));
    z-index: 2;
}

/* Tail for others' messages (left side) - uses CSS variable */
.message-bubble-with-tail.other-message::after {
    content: '';
    position: absolute;
    bottom: 8px;
    left: -8px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 12px 0 0;
    border-color: var(--tail-color) transparent transparent transparent;
    filter: drop-shadow(-2px 2px 2px rgba(0, 0, 0, 0.4));
}

/* Avatar circle styling */
.message-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    background: linear-gradient(135deg, #78350f 0%, #92400e 100%);
    border: 2px solid #c2410c;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

/* Mobile-First: Better typography and spacing */
.chat-message-text {
    font-size: 16px !important; /* Up from 14px for better readability */
    line-height: 1.5 !important;
    word-wrap: break-word;
}

.chat-message-sender {
    font-size: 14px !important; /* Up from 12px */
    font-weight: 700;
    margin-bottom: 4px;
}

.chat-message-time {
    font-size: 11px !important; /* Up from 10px */
    opacity: 0.7;
}

/* Message spacing (more breathing room) */
.chat-message-wrapper {
    margin-bottom: 16px !important; /* Up from 12px */
}

/* Message grouping (same user, <2min apart) - no repeated name/avatar */
.chat-message-grouped {
    margin-top: 4px !important;
}

/* Touch targets minimum 44x44px */
.chat-button {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 12px !important;
}

/* Reaction buttons bigger touch area */
.reaction-button {
    min-width: 44px;
    min-height: 32px;
    padding: 6px 10px !important;
    font-size: 14px !important;
}

/* Input field better mobile styling */
#chatInput, #editMessageInput {
    font-size: 16px !important; /* Prevents iOS zoom on focus */
    padding: 14px 16px !important;
    line-height: 1.4;
}

/* Message bubble padding (more comfortable) */
.message-bubble-container {
    padding: 12px 16px !important; /* Up from 10px 16px */
    position: relative;
    z-index: 1; /* Отгоре на shooting star background */
}

/* ========================================
   MESSAGE ENTRANCE ANIMATIONS
   ======================================== */

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

@keyframes messagePop {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }
    50% {
        transform: scale(1.02);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.message-entrance-other {
    animation: messageSlideIn 0.2s ease-out;
}

.message-entrance-own {
    animation: messagePop 0.15s ease-out;
}

/* Active button press feedback */
.chat-button:active {
    transform: scale(0.95);
    transition: transform 0.1s ease;
}

/* Quoted message (reply) visual improvement */
.quoted-message-preview {
    border-left: 3px solid #fbbf24 !important;
    padding-left: 10px !important;
    margin-bottom: 8px !important;
    background: rgba(0, 0, 0, 0.25) !important;
    border-radius: 6px;
    padding: 8px 10px !important;
}

/* Read receipt indicators bigger */
.read-receipt-indicator {
    font-size: 12px !important;
}

/* ========================================
   🌲 NORDIC PINE LINK PREVIEWS
   ======================================== */

/* Base link preview card */
.link-preview {
    background: linear-gradient(135deg, var(--forest-medium) 0%, var(--forest-deep) 100%) !important;
    border: 1px solid rgba(168, 213, 186, 0.25) !important;
    border-radius: 12px !important;
    overflow: hidden;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(168, 213, 186, 0.12) !important;
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
}

/* Depth overlay for cards */
.link-preview::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
        rgba(168, 213, 186, 0.08) 0%,
        transparent 50%,
        rgba(0, 0, 0, 0.15) 100%
    );
    pointer-events: none;
    z-index: 1;
}

/* Hover - subtle lift and glow */
.link-preview:hover {
    transform: translateY(-2px);
    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(168, 213, 186, 0.35),
        inset 0 1px 0 rgba(168, 213, 186, 0.18) !important;
    border-color: rgba(168, 213, 186, 0.4) !important;
}

/* Links in preview - remove decoration */
.link-preview a {
    text-decoration: none;
    color: inherit;
}

/* Preview title styling */
.link-preview h3,
.link-preview .preview-title,
.link-preview [class*="title"] {
    color: var(--cream) !important;
    font-weight: 600;
    position: relative;
    z-index: 2;
}

/* Preview description/text */
.link-preview p,
.link-preview .preview-description,
.link-preview [class*="description"] {
    color: var(--cream) !important;
    opacity: 0.85;
    position: relative;
    z-index: 2;
}

/* Preview URL/domain */
.link-preview .preview-url,
.link-preview [class*="url"],
.link-preview [class*="domain"] {
    color: var(--mint-accent) !important;
    opacity: 0.9;
    font-size: 0.85em;
    position: relative;
    z-index: 2;
}

/* YouTube/Video play button animation */
.link-preview .absolute > div,
.link-preview [class*="play"] {
    transition: transform 0.2s ease;
    position: relative;
    z-index: 2;
}

.link-preview:hover .absolute > div,
.link-preview:hover [class*="play"] {
    transform: scale(1.1);
}

/* Embedded iframes - forest frame */
.link-preview iframe {
    display: block;
    border-radius: 8px;
    border: 2px solid rgba(0, 0, 0, 0.3);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Responsive embeds */
.link-preview iframe[src*="youtube.com"],
.link-preview iframe[src*="instagram.com"],
.link-preview iframe[src*="facebook.com"],
.link-preview iframe[src*="twitter.com"],
.link-preview iframe[src*="tiktok.com"],
.link-preview iframe[src*="spotify.com"] {
    max-width: 100%;
    position: relative;
    z-index: 2;
}

/* Preview thumbnail/image */
.link-preview img {
    border-radius: 8px;
    position: relative;
    z-index: 2;
}

/* Collapse/Expand button - mint accent */
.link-preview button {
    transition: all 0.2s ease;
    background: rgba(168, 213, 186, 0.15) !important;
    border: 1px solid rgba(168, 213, 186, 0.3) !important;
    color: var(--mint-accent) !important;
    border-radius: 6px !important;
    padding: 4px 12px !important;
    font-size: 0.85em !important;
    font-weight: 600 !important;
    position: relative;
    z-index: 2;
}

.link-preview button:hover {
    background: rgba(168, 213, 186, 0.25) !important;
    border-color: var(--mint-light) !important;
    color: var(--mint-light) !important;
    transform: translateY(-1px);
}

/* ========================================
   CHAT VISUAL OVERHAUL - NORDIC PINE THEME
   ======================================== */

/* 🌲 NORDIC PINE CHAT MESSAGES */

/* Own messages - NORDIC BEIGE (warm & light) */
.message-bubble-with-tail.own-message {
    background:
        linear-gradient(135deg,
            var(--beige-light) 0%,      /* #f5f5dc - Light beige */
            var(--beige-tan) 100%       /* #e8d5b7 - Deeper tan */
        ) !important;
    border: 1px solid rgba(168, 213, 186, 0.25) !important; /* Subtle mint border */
    box-shadow:
        /* Clean depth shadows - NO glow */
        0 3px 10px rgba(0, 0, 0, 0.12),
        0 1px 4px rgba(0, 0, 0, 0.08),
        /* Subtle mint accent glow */
        0 0 0 1px rgba(168, 213, 186, 0.15),
        /* Top highlight (light reflection) */
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        /* Bottom subtle depth */
        inset 0 -1px 2px rgba(30, 58, 46, 0.05) !important;
    position: relative;
    overflow: hidden;
}

/* Minimal depth overlay - subtle gradient for dimension */
.message-bubble-with-tail.own-message::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        /* Subtle light-to-dark for depth */
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.2) 0%,
            transparent 40%,
            rgba(30, 58, 46, 0.03) 100%
        );
    border-radius: inherit;
    pointer-events: none;
    opacity: 1;
    z-index: 1;
}

/* Others' messages - NORDIC FOREST (deep green) */
.message-bubble-with-tail.other-message {
    background:
        linear-gradient(135deg,
            var(--forest-medium) 0%,    /* #2d4a3e - Medium forest */
            var(--forest-deep) 100%     /* #1e3a2e - Deep forest */
        ) !important;
    border: 1px solid rgba(168, 213, 186, 0.2) !important; /* Subtle mint border */
    box-shadow:
        /* Clean depth shadows - NO glow */
        0 4px 14px rgba(0, 0, 0, 0.35),
        0 2px 6px rgba(0, 0, 0, 0.25),
        /* Subtle mint accent */
        0 0 0 1px rgba(168, 213, 186, 0.1),
        /* Top highlight (light reflection) */
        inset 0 1px 0 rgba(168, 213, 186, 0.15),
        /* Bottom subtle depth */
        inset 0 -2px 4px rgba(0, 0, 0, 0.2) !important;
    position: relative;
    overflow: hidden;
}

/* Minimal depth overlay - subtle gradient for dimension */
.message-bubble-with-tail.other-message::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        /* Subtle top-to-bottom for depth */
        linear-gradient(
            to bottom,
            rgba(168, 213, 186, 0.08) 0%,
            transparent 40%,
            rgba(0, 0, 0, 0.15) 100%
        );
    border-radius: inherit;
    pointer-events: none;
    opacity: 1;
    z-index: 1;
}

/* Hover effect - Gentle lift with mint accent */
.message-bubble-with-tail.own-message:hover {
    box-shadow:
        /* Slightly deeper shadows */
        0 5px 15px rgba(0, 0, 0, 0.16),
        0 2px 6px rgba(0, 0, 0, 0.12),
        /* Enhanced mint border glow */
        0 0 0 1px rgba(168, 213, 186, 0.35),
        /* Brighter top highlight */
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 -1px 2px rgba(30, 58, 46, 0.08) !important;
    transform: translateY(-1px);
    transition: all 0.2s ease;
    border-color: rgba(168, 213, 186, 0.4) !important;
}

/* Active/Click effect - Subtle press */
.message-bubble-with-tail.own-message:active {
    transform: translateY(0px) scale(0.995);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.1),
        0 1px 3px rgba(0, 0, 0, 0.08),
        0 0 0 1px rgba(168, 213, 186, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -1px 2px rgba(30, 58, 46, 0.06) !important;
}

/* Forest hover - Gentle lift with enhanced mint */
.message-bubble-with-tail.other-message:hover {
    box-shadow:
        /* Deeper shadows */
        0 6px 18px rgba(0, 0, 0, 0.4),
        0 3px 8px rgba(0, 0, 0, 0.3),
        /* Enhanced mint border */
        0 0 0 1px rgba(168, 213, 186, 0.3),
        /* Brighter top highlight */
        inset 0 1px 0 rgba(168, 213, 186, 0.25),
        inset 0 -2px 4px rgba(0, 0, 0, 0.25) !important;
    transform: translateY(-1px);
    transition: all 0.2s ease;
    border-color: rgba(168, 213, 186, 0.35) !important;
}

/* Active/Click effect - Subtle press */
.message-bubble-with-tail.other-message:active {
    transform: translateY(0px) scale(0.995);
    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.3),
        0 1px 4px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(168, 213, 186, 0.15),
        inset 0 1px 0 rgba(168, 213, 186, 0.1),
        inset 0 -2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* Tail - forest green color */
.message-bubble-with-tail.other-message::after {
    border-color: var(--forest-deep) transparent transparent transparent !important;
    filter: drop-shadow(-2px 2px 4px rgba(0, 0, 0, 0.35)) !important;
}

/* 🌲 TEXT STYLING - Nordic Pine perfect readability */

/* Beige messages - DARK GREEN text for maximum contrast */
.message-bubble-with-tail.own-message .chat-message-text,
.message-bubble-with-tail.own-message .chat-message-sender,
.message-bubble-with-tail.own-message .chat-message-time {
    color: var(--text-on-light) !important; /* #1e3a2e - Dark forest green */
    text-shadow: none !important;
    position: relative;
    z-index: 3;
}

/* Sender name on beige - bold dark green */
.message-bubble-with-tail.own-message .chat-message-sender {
    color: var(--forest-deep) !important; /* #1e3a2e */
    font-weight: 700 !important;
    text-shadow: none !important;
    opacity: 0.95;
}

/* Links on beige - forest green with subtle underline */
.message-bubble-with-tail.own-message a {
    color: var(--forest-medium) !important; /* #2d4a3e */
    text-shadow: none !important;
    position: relative;
    z-index: 3;
    transition: all 0.2s ease;
    text-decoration: underline;
    text-decoration-color: var(--mint-accent);
    font-weight: 600;
}

.message-bubble-with-tail.own-message a:hover {
    color: var(--forest-darker) !important;
    text-decoration-color: var(--mint-dark);
}

/* Forest green messages - LIGHT CREAM text for perfect contrast */
.message-bubble-with-tail.other-message .chat-message-text,
.message-bubble-with-tail.other-message .chat-message-sender,
.message-bubble-with-tail.other-message .chat-message-time {
    color: var(--text-on-dark) !important; /* #f5f5dc - Cream */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    position: relative;
    z-index: 3;
}

/* Sender name on forest - mint accent */
.message-bubble-with-tail.other-message .chat-message-sender {
    color: var(--mint-accent) !important; /* #a8d5ba - Mint green */
    font-weight: 700 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
    opacity: 0.95;
}

/* Links on forest - light mint with underline */
.message-bubble-with-tail.other-message a {
    color: var(--mint-light) !important; /* #b5ddc4 - Light mint */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    position: relative;
    z-index: 3;
    transition: all 0.2s ease;
    text-decoration: underline;
    text-decoration-color: var(--cream);
    font-weight: 600;
}

.message-bubble-with-tail.other-message a:hover {
    color: var(--beige-light) !important; /* Cream on hover */
    text-decoration-color: var(--mint-accent);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}

/* 🌲 NORDIC PINE BUTTONS - Secondary Actions */
.chat-button {
    background: linear-gradient(135deg, var(--forest-medium) 0%, var(--forest-deep) 100%) !important;
    border: 2px solid rgba(168, 213, 186, 0.2) !important;
    box-shadow:
        inset 1px 1px 2px rgba(0, 0, 0, 0.25),
        inset -1px -1px 1px rgba(168, 213, 186, 0.15),
        0 3px 8px rgba(0, 0, 0, 0.3),
        0 1px 3px rgba(0, 0, 0, 0.2) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    color: var(--cream) !important;
    transition: all 0.2s ease !important;
    position: relative;
    overflow: hidden;
}

/* Minimal depth overlay */
.chat-button::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            to bottom,
            rgba(168, 213, 186, 0.08) 0%,
            transparent 50%,
            rgba(0, 0, 0, 0.15) 100%
        );
    pointer-events: none;
    opacity: 1;
}

.chat-button:hover {
    transform: translateY(-1px) !important;
    box-shadow:
        inset 1px 1px 2px rgba(0, 0, 0, 0.2),
        inset -1px -1px 1px rgba(168, 213, 186, 0.2),
        0 4px 12px rgba(0, 0, 0, 0.35),
        0 2px 4px rgba(0, 0, 0, 0.25) !important;
    border-color: rgba(168, 213, 186, 0.35) !important;
}

.chat-button:active {
    transform: translateY(0px) scale(0.98) !important;
    box-shadow:
        inset 1px 1px 3px rgba(0, 0, 0, 0.3),
        inset -1px -1px 1px rgba(168, 213, 186, 0.1),
        0 2px 6px rgba(0, 0, 0, 0.25) !important;
}

/* 🌲 NORDIC MINT - Primary Action (Send Button) */
.chat-button.send,
.chat-button[type="submit"],
button.send,
button[onclick*="sendMessage"],
button[aria-label*="Send"],
button[title*="Send"] {
    background: linear-gradient(135deg, var(--mint-accent) 0%, var(--mint-dark) 100%) !important;
    border: 2px solid var(--mint-light) !important;
    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.3),
        inset -1px -1px 1px rgba(30, 58, 46, 0.15),
        0 3px 10px rgba(168, 213, 186, 0.4),
        0 1px 4px rgba(0, 0, 0, 0.2) !important;
    color: var(--forest-deep) !important; /* Dark green text */
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3);
    font-weight: 600;
}

/* Send button overlay - lighter top */
.chat-button.send::before,
.chat-button[type="submit"]::before,
button.send::before,
button[onclick*="sendMessage"]::before,
button[aria-label*="Send"]::before,
button[title*="Send"]::before {
    background:
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.2) 0%,
            transparent 50%,
            rgba(30, 58, 46, 0.05) 100%
        );
}

/* Send button hover - enhanced glow */
.chat-button.send:hover,
.chat-button[type="submit"]:hover,
button.send:hover,
button[onclick*="sendMessage"]:hover,
button[aria-label*="Send"]:hover,
button[title*="Send"]:hover {
    transform: translateY(-2px) !important;
    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.4),
        inset -1px -1px 1px rgba(30, 58, 46, 0.2),
        0 4px 14px rgba(168, 213, 186, 0.5),
        0 2px 6px rgba(0, 0, 0, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

/* Send button active - pressed */
.chat-button.send:active,
.chat-button[type="submit"]:active,
button.send:active,
button[onclick*="sendMessage"]:active,
button[aria-label*="Send"]:active,
button[title*="Send"]:active {
    transform: translateY(0px) scale(0.96) !important;
    box-shadow:
        inset 1px 1px 3px rgba(30, 58, 46, 0.2),
        inset -1px -1px 1px rgba(255, 255, 255, 0.2),
        0 2px 8px rgba(168, 213, 186, 0.3) !important;
}

/* 🌲 NORDIC BEIGE INPUT FIELD */
#chatInput, #editMessageInput {
    background:
        linear-gradient(135deg, var(--beige-light) 0%, var(--beige-tan) 100%) !important;
    border: 2px solid var(--mint-accent) !important;
    box-shadow:
        /* Subtle inset depth */
        inset 1px 1px 3px rgba(30, 58, 46, 0.12),
        inset -1px -1px 2px rgba(255, 255, 255, 0.5),
        /* Clean outer shadow */
        0 2px 8px rgba(0, 0, 0, 0.1),
        /* Subtle mint glow */
        0 0 0 1px rgba(168, 213, 186, 0.2) !important;
    color: var(--forest-deep) !important; /* Dark green text */
    position: relative;
}

/* Placeholder text styling */
#chatInput::placeholder, #editMessageInput::placeholder {
    color: var(--forest-deep) !important;
    opacity: 0.4;
}

/* Minimal depth overlay */
#chatInput::before, #editMessageInput::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.3) 0%,
            transparent 40%,
            rgba(30, 58, 46, 0.04) 100%
        );
    border-radius: inherit;
    pointer-events: none;
    opacity: 1;
}

/* Focus - Enhanced mint glow */
#chatInput:focus, #editMessageInput:focus {
    outline: none;
    border-color: var(--mint-light) !important;
    box-shadow:
        inset 1px 1px 3px rgba(30, 58, 46, 0.1),
        inset -1px -1px 2px rgba(255, 255, 255, 0.6),
        0 2px 8px rgba(0, 0, 0, 0.12),
        /* Enhanced mint glow on focus */
        0 0 0 3px rgba(168, 213, 186, 0.3) !important;
}

/* 🌲 NORDIC PINE REACTIONS */
.reaction-button {
    background: linear-gradient(135deg, var(--forest-medium) 0%, var(--forest-deep) 100%) !important;
    border: 1px solid rgba(168, 213, 186, 0.25) !important;
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(168, 213, 186, 0.12),
        inset 0 -1px 2px rgba(0, 0, 0, 0.2) !important;
    border-radius: 12px !important; /* Rounded corners instead of hexagon */
    position: relative;
    transition: all 0.2s ease !important;
}

/* Minimal depth overlay */
.reaction-button::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
        rgba(168, 213, 186, 0.05) 0%,
        transparent 40%,
        rgba(0, 0, 0, 0.1) 100%
    );
    border-radius: inherit;
    pointer-events: none;
}

/* Mint accent for active/selected reactions */
.reaction-button.bg-amber-800\/80,
.reaction-button.active,
.reaction-button[data-reacted="true"] {
    background: linear-gradient(135deg, var(--mint-accent) 0%, var(--mint-dark) 100%) !important;
    border: 1px solid var(--mint-light) !important;
    box-shadow:
        0 2px 8px rgba(168, 213, 186, 0.4),
        0 0 0 1px rgba(168, 213, 186, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        inset 0 -1px 2px rgba(30, 58, 46, 0.15) !important;
}

/* Active reaction overlay - lighter */
.reaction-button.bg-amber-800\/80::before,
.reaction-button.active::before,
.reaction-button[data-reacted="true"]::before {
    background: linear-gradient(to bottom,
        rgba(255, 255, 255, 0.15) 0%,
        transparent 40%,
        rgba(30, 58, 46, 0.05) 100%
    );
}

/* Hover - subtle scale, no rotation */
.reaction-button:hover {
    transform: scale(1.08) !important;
    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(168, 213, 186, 0.18),
        inset 0 -1px 2px rgba(0, 0, 0, 0.25) !important;
    border-color: rgba(168, 213, 186, 0.4) !important;
}

/* Active reaction hover - enhanced glow */
.reaction-button.bg-amber-800\/80:hover,
.reaction-button.active:hover,
.reaction-button[data-reacted="true"]:hover {
    box-shadow:
        0 3px 12px rgba(168, 213, 186, 0.5),
        0 0 0 1px rgba(168, 213, 186, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 2px rgba(30, 58, 46, 0.2) !important;
}

/* Active press feedback */
.reaction-button:active {
    transform: scale(1.0) !important;
    box-shadow:
        0 1px 4px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(168, 213, 186, 0.1),
        inset 0 -1px 2px rgba(0, 0, 0, 0.2) !important;
}

/* Reaction count text - Improved readability */
.reaction-count {
    /* For inactive reactions (forest green background) */
    color: #f5f5dc !important; /* Cream - excellent contrast */
    font-weight: 700 !important;
    font-size: 12px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
    letter-spacing: 0.3px !important;
}

.reaction-count-active {
    /* For active reactions (mint background) */
    color: #1e3a2e !important; /* Deep forest - excellent contrast */
    font-weight: 800 !important;
    font-size: 12px !important;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) !important;
    letter-spacing: 0.3px !important;
}

/* Reaction emoji - consistent sizing */
.reaction-emoji {
    font-size: 16px !important;
    line-height: 1 !important;
    display: inline-block;
}

/* Enhanced reaction button layout */
body[data-view="chat"] .reaction-button {
    padding: 6px 10px !important;
    min-width: 44px !important; /* Touch-friendly */
    gap: 6px !important;
}

/* 🌲 NORDIC PINE DATE DIVIDERS - Elegant Minimal */
.flex.items-center.justify-center.my-4 > div {
    background: rgba(168, 213, 186, 0.08) !important; /* Subtle mint tint */
    border: 1px solid rgba(168, 213, 186, 0.3) !important;
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(168, 213, 186, 0.15) !important;
    padding: 6px 18px !important;
    border-radius: 16px !important; /* More rounded for elegance */
    position: relative;
}

/* Subtle gradient overlay for depth */
.flex.items-center.justify-center.my-4 > div::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
        rgba(168, 213, 186, 0.1) 0%,
        transparent 50%,
        rgba(0, 0, 0, 0.05) 100%
    );
    border-radius: inherit;
    pointer-events: none;
}

/* Clean, elegant text */
.flex.items-center.justify-center.my-4 > div {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    letter-spacing: 0.5px; /* Subtle spacing */
    font-weight: 600 !important; /* Semibold, not extra bold */
    color: var(--mint-accent) !important; /* Mint accent color */
    font-size: 12px !important;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
}

/* 📝 QUOTED MESSAGE - NORDIC PINE STYLE */

/* Base quoted message - minimal */
.quoted-message-preview,
.reply-preview,
[class*="quoted"],
[class*="reply"] {
    background: rgba(0, 0, 0, 0.08) !important; /* Subtle darkening */
    border-left: 3px solid var(--mint-accent) !important;
    border-radius: 6px !important;
    box-shadow:
        inset 1px 0 0 rgba(168, 213, 186, 0.2),
        0 1px 3px rgba(0, 0, 0, 0.15) !important;
    padding: 8px 12px !important;
    margin: 4px 0 !important;
    position: relative;
}

/* Quoted in OWN messages (beige background) - darker overlay */
.message-bubble-with-tail.own-message .quoted-message-preview,
.message-bubble-with-tail.own-message .reply-preview,
.message-bubble-with-tail.own-message [class*="quoted"],
.message-bubble-with-tail.own-message [class*="reply"] {
    background: rgba(30, 58, 46, 0.12) !important; /* Dark green tint */
    border-left-color: var(--forest-deep) !important;
    box-shadow:
        inset 1px 0 0 rgba(30, 58, 46, 0.25),
        0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

/* Quoted in OTHER messages (forest green background) - lighter overlay */
.message-bubble-with-tail.other-message .quoted-message-preview,
.message-bubble-with-tail.other-message .reply-preview,
.message-bubble-with-tail.other-message [class*="quoted"],
.message-bubble-with-tail.other-message [class*="reply"] {
    background: rgba(168, 213, 186, 0.15) !important; /* Light mint tint */
    border-left-color: var(--mint-light) !important;
    box-shadow:
        inset 1px 0 0 rgba(168, 213, 186, 0.3),
        0 1px 2px rgba(0, 0, 0, 0.15) !important;
}

/* Quoted message text - subtle opacity */
.quoted-message-preview *,
.reply-preview *,
[class*="quoted"] *,
[class*="reply"] * {
    opacity: 0.85;
    font-size: 0.9em;
}

/* ✨ MICRO-ANIMATIONS - Nordic Pine Minimal */

/* Gentle wave motion - subtle movement */
@keyframes gentleWave {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-1px);
    }
}

/* Sparkle burst on reaction */
@keyframes sparkleBurst {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.3);
        opacity: 0.8;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.reaction-button:active .reaction-emoji {
    animation: sparkleBurst 0.3s ease-out;
}

/* Wood creak visual */
@keyframes woodCreak {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-1deg); }
    75% { transform: rotate(1deg); }
}

/* Ripple effect on send */
@keyframes ripple {
    0% {
        transform: scale(0.8);
        opacity: 1;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* 🌲 LOAD MORE BUTTON - Nordic Pine Mint Accent - CHAT ONLY */
button[onclick="loadMoreMessages()"],
#loadMoreBtn,
.load-more-button,
.load-more-btn-premium {
    background: linear-gradient(135deg, var(--mint-accent) 0%, var(--mint-dark) 100%) !important;
    border: 2px solid var(--mint-light) !important;
    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.3),
        inset -1px -1px 1px rgba(30, 58, 46, 0.15),
        0 3px 10px rgba(168, 213, 186, 0.4),
        0 1px 4px rgba(0, 0, 0, 0.2) !important;
    color: var(--forest-deep) !important;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3);
    font-weight: 600 !important;
    position: relative;
    overflow: hidden;
    transition: all 0.2s ease;
}

/* Depth overlay - matching Send button */
button[onclick="loadMoreMessages()"]::before,
#loadMoreBtn::before,
.load-more-button::before,
.load-more-btn-premium::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
        rgba(255, 255, 255, 0.2) 0%,
        transparent 50%,
        rgba(30, 58, 46, 0.05) 100%
    );
    border-radius: inherit;
    pointer-events: none;
}

/* Hover - enhanced glow */
button[onclick="loadMoreMessages()"]:hover,
#loadMoreBtn:hover,
.load-more-button:hover,
.load-more-btn-premium:hover {
    transform: translateY(-2px) !important;
    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.4),
        inset -1px -1px 1px rgba(30, 58, 46, 0.2),
        0 4px 14px rgba(168, 213, 186, 0.5),
        0 2px 6px rgba(0, 0, 0, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

/* Active - pressed */
button[onclick="loadMoreMessages()"]:active,
#loadMoreBtn:active,
.load-more-button:active,
.load-more-btn-premium:active {
    transform: translateY(0px) scale(0.96) !important;
    box-shadow:
        inset 1px 1px 3px rgba(30, 58, 46, 0.2),
        inset -1px -1px 1px rgba(255, 255, 255, 0.2),
        0 2px 8px rgba(168, 213, 186, 0.3) !important;
}

/* ========================================
   🌲 SCROLL TO BOTTOM BUTTON - NORDIC PINE
   ======================================== */

/* Floating action button - mint accent (matches Send + Load More) */
.scroll-to-bottom-btn,
#scrollToBottomBtn,
.chat-scroll-bottom,
[class*="scroll-bottom"],
[aria-label*="Scroll to bottom"],
button[onclick*="scrollToBottom"],
button[onclick*="scrollChatToBottom"] {
    position: fixed !important;
    bottom: 90px !important; /* Above input area */
    right: 20px !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important; /* Circular */
    z-index: 100 !important;

    /* 🎨 MINT ACCENT - Matches Send and Load More */
    background: linear-gradient(135deg,
        var(--mint-accent) 0%,      /* #a8d5ba */
        var(--mint-dark) 100%       /* #95c9a7 */
    ) !important;

    border: 2px solid var(--mint-light) !important;
    color: var(--forest-deep) !important; /* Dark text on light bg */

    /* Clean shadows - no glow */
    box-shadow:
        0 3px 12px rgba(0, 0, 0, 0.25),
        0 1px 4px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -2px 6px rgba(30, 58, 46, 0.1) !important;

    font-size: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;

    /* Hide by default - JS will show when scrolled up */
    opacity: 0 !important;
    pointer-events: none !important;
    transform: scale(0.8) !important;
}

/* Visible state (when scrolled up) - JS adds .visible class */
.scroll-to-bottom-btn.visible,
#scrollToBottomBtn.visible,
.chat-scroll-bottom.visible,
[class*="scroll-bottom"].visible {
    opacity: 1 !important;
    pointer-events: all !important;
    transform: scale(1) !important;
}

/* Depth overlay - subtle gradient */
.scroll-to-bottom-btn::before,
#scrollToBottomBtn::before,
.chat-scroll-bottom::before,
[class*="scroll-bottom"]::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.15) 0%,
        transparent 40%,
        rgba(0, 0, 0, 0.1) 100%
    );
    pointer-events: none;
    z-index: 1;
}

/* Icon/text above overlay */
.scroll-to-bottom-btn > *,
#scrollToBottomBtn > *,
.chat-scroll-bottom > * {
    position: relative;
    z-index: 2;
}

/* Hover state - lift up */
.scroll-to-bottom-btn:hover,
#scrollToBottomBtn:hover,
.chat-scroll-bottom:hover,
[class*="scroll-bottom"]:hover {
    transform: translateY(-3px) scale(1.05) !important;
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.3),
        0 2px 8px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -2px 6px rgba(30, 58, 46, 0.15) !important;
}

/* Active state - press down */
.scroll-to-bottom-btn:active,
#scrollToBottomBtn:active,
.chat-scroll-bottom:active,
[class*="scroll-bottom"]:active {
    transform: translateY(0) scale(0.95) !important;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.2),
        0 1px 3px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 2px 6px rgba(30, 58, 46, 0.2) !important;
}

/* Unread message badge (optional) - mint accent dot */
.scroll-to-bottom-btn::after,
#scrollToBottomBtn::after {
    content: attr(data-unread-count);
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--forest-deep);
    color: var(--mint-accent);
    font-size: 11px;
    font-weight: 800;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    border: 2px solid var(--mint-accent);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    z-index: 3;
    opacity: 0;
    pointer-events: none;
}

/* Show badge when data-unread-count exists and > 0 */
.scroll-to-bottom-btn[data-unread-count]:not([data-unread-count="0"])::after,
#scrollToBottomBtn[data-unread-count]:not([data-unread-count="0"])::after {
    opacity: 1;
}

/* ========================================
   ✨ NORDIC GLASS PREMIUM HEADER
   Frosted Glass + Glow + Status Badge
   ======================================== */

/* Mobile header container - Frosted glass effect */
.nordic-glass-header {
    /* Ensure header sticks to top */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 30 !important;

    /* Safe area support for notched devices */
    padding-top: max(12px, env(safe-area-inset-top)) !important;
    padding-left: max(16px, env(safe-area-inset-left)) !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;

    /* Ensure backdrop filter works */
    overflow: hidden;
}

/* Top glowing accent line */
.nordic-glass-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(168, 213, 186, 0.3) 10%,
        rgba(181, 221, 196, 0.6) 50%,
        rgba(168, 213, 186, 0.3) 90%,
        transparent 100%
    );
    box-shadow:
        0 0 10px rgba(168, 213, 186, 0.6),
        0 0 20px rgba(168, 213, 186, 0.3),
        0 0 30px rgba(168, 213, 186, 0.1);
    z-index: 1;
    pointer-events: none;
}

/* Shimmer sweep animation */
.nordic-glass-header::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 100%
    );
    animation: shimmerSweep 3s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes shimmerSweep {
    0% {
        left: -100%;
    }
    50%, 100% {
        left: 100%;
    }
}

/* Bottom glowing double lines */
.nordic-glass-header {
    border-bottom: none !important;
}

.mobile-chat-header.nordic-glass-header {
    position: relative;
}

/* Create bottom glow lines via pseudo-element on parent */
.nordic-glass-header > * {
    position: relative;
    z-index: 2;
}

/* Bottom accent lines - added via JS parent wrapper */
body[data-view="chat"] .mobile-chat-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background:
        linear-gradient(90deg, transparent 0%, rgba(168,213,186,0.6) 50%, transparent 100%),
        linear-gradient(90deg, transparent 20%, rgba(168,213,186,0.3) 80%);
    background-size: 100% 2px, 100% 1px;
    background-position: 0 0, 0 2px;
    background-repeat: no-repeat;
    box-shadow:
        0 0 8px rgba(168, 213, 186, 0.4),
        0 0 15px rgba(168, 213, 186, 0.2);
    z-index: 3;
}

/* Mobile header title animation */
.nordic-title-container {
    animation: fadeSlideDown 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* Enhanced title glow */
.nordic-title-glow {
    text-shadow:
        /* Mint glow layers */
        0 0 10px rgba(168, 213, 186, 0.4),
        0 0 20px rgba(168, 213, 186, 0.2),
        0 0 30px rgba(168, 213, 186, 0.1),
        /* Depth shadow */
        0 2px 4px rgba(0, 0, 0, 0.6),
        0 3px 8px rgba(0, 0, 0, 0.3);
}

/* Status badge - pulsing dot */
.status-badge {
    display: inline-block;
    animation: statusPulse 2s ease-in-out infinite;
    filter: drop-shadow(0 0 4px rgba(168, 213, 186, 0.8));
}

@keyframes statusPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.4);
    }
}

/* Nordic back button - enhanced with glow */
.nordic-back-btn {
    position: relative;
    z-index: 2;
}

.nordic-back-btn:hover {
    background: linear-gradient(135deg, #b5ddc4 0%, #a8d5ba 100%) !important;
    transform: translateY(-2px) scale(1.03) !important;
    box-shadow:
        0 3px 8px rgba(0,0,0,0.4),
        0 0 20px rgba(168,213,186,0.5),
        inset 0 1px 0 rgba(255,255,255,0.5) !important;
}

.nordic-back-btn:active {
    background: linear-gradient(135deg, #95c9a7 0%, #85b997 100%) !important;
    transform: translateY(0) scale(0.97) !important;
    box-shadow:
        inset 0 2px 4px rgba(0,0,0,0.3),
        0 1px 2px rgba(0,0,0,0.2),
        0 0 10px rgba(168,213,186,0.3) !important;
}

/* Nordic load more button in header - enhanced glow */
.nordic-load-more-btn {
    position: relative;
    z-index: 2;
    box-shadow:
        0 2px 6px rgba(0,0,0,0.3),
        0 0 15px rgba(168,213,186,0.4),
        inset 0 1px 0 rgba(255,255,255,0.3) !important;
}

.nordic-load-more-btn:hover {
    background: linear-gradient(135deg, #b5ddc4 0%, #a8d5ba 100%) !important;
    transform: translateY(-2px) scale(1.05) !important;
    box-shadow:
        0 3px 8px rgba(0,0,0,0.4),
        0 0 20px rgba(168,213,186,0.5),
        inset 0 1px 0 rgba(255,255,255,0.5) !important;
}

.nordic-load-more-btn:active {
    background: linear-gradient(135deg, #95c9a7 0%, #85b997 100%) !important;
    transform: translateY(0) scale(0.96) !important;
    box-shadow:
        inset 0 2px 4px rgba(0,0,0,0.3),
        0 1px 2px rgba(0,0,0,0.2),
        0 0 10px rgba(168,213,186,0.3) !important;
}

/* Subtitle enhanced pulse */
.nordic-subtitle {
    animation: subtleGlow 2.5s ease-in-out infinite;
    text-shadow: 0 0 10px rgba(168, 213, 186, 0.3);
}

@keyframes subtleGlow {
    0%, 100% {
        opacity: 0.9;
        text-shadow: 0 0 10px rgba(168, 213, 186, 0.3);
    }
    50% {
        opacity: 1;
        text-shadow: 0 0 15px rgba(168, 213, 186, 0.5);
    }
}

/* Fallback for browsers without backdrop-filter support */
@supports not (backdrop-filter: blur(20px)) {
    .nordic-glass-header {
        background: linear-gradient(135deg,
            rgba(45,74,62,0.95) 0%,
            rgba(30,58,46,0.98) 50%,
            rgba(15,36,25,1) 100%) !important;
    }
}

/* ========================================
   🌲 NORDIC PINE COMPACT INPUT BUTTONS
   ======================================== */

/* Base button styles - 36x36px compact */
body[data-view="chat"] .nordic-input-button {
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Primary button (Send - Mint accent) */
body[data-view="chat"] .nordic-primary-button:hover {
    background: linear-gradient(135deg, #b5ddc4 0%, #a8d5ba 100%) !important;
    transform: translateY(-2px) scale(1.05) !important;
    box-shadow:
        0 4px 12px rgba(168, 213, 186, 0.4),
        0 0 20px rgba(168, 213, 186, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

body[data-view="chat"] .nordic-primary-button:active {
    background: linear-gradient(135deg, #95c9a7 0%, #85b997 100%) !important;
    transform: translateY(0) scale(0.95) !important;
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.3),
        0 1px 3px rgba(0, 0, 0, 0.2),
        0 0 10px rgba(168, 213, 186, 0.2) !important;
}

/* Secondary button (Image - Forest green) */
body[data-view="chat"] .nordic-secondary-button:hover {
    background: linear-gradient(135deg, #4a6a5a 0%, #3a5a4a 100%) !important;
    transform: translateY(-2px) scale(1.05) !important;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.5),
        0 0 15px rgba(168, 213, 186, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

body[data-view="chat"] .nordic-secondary-button:active {
    background: linear-gradient(135deg, #2d4a3e 0%, #1e3a2e 100%) !important;
    transform: translateY(0) scale(0.95) !important;
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.4),
        0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* Input field focus state - Mint glow */
body[data-view="chat"] .nordic-input-field:focus {
    border-color: #a8d5ba !important;
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.1),
        0 2px 8px rgba(0, 0, 0, 0.2),
        0 0 20px rgba(168, 213, 186, 0.3),
        0 0 40px rgba(168, 213, 186, 0.15) !important;
}

/* Input placeholder color */
body[data-view="chat"] .nordic-input-field::placeholder {
    color: rgba(30, 58, 46, 0.5);
    opacity: 1;
}

/* Button ripple effect on click */
@keyframes buttonRipple {
    0% {
        box-shadow: 0 0 0 0 rgba(168, 213, 186, 0.4);
    }
    100% {
        box-shadow: 0 0 0 10px rgba(168, 213, 186, 0);
    }
}

/* ========================================
   💊 PILL-STYLE CHAT INPUT (Modern)
   ======================================== */

/* Unified pill container */
body[data-view="chat"] .chat-input-pill-wrapper {
    /* SOLID Background - БЛОКИРА starry night зад него (това е окей!) */
    background: linear-gradient(135deg, #f5f5dc 0%, #e8d5b7 100%);

    /* БЕЗ backdrop-filter - input си остава нормален! */

    /* Z-index fix - input НАД background-а */
    position: relative;
    z-index: 2;

    border: 2px solid #4a6a5a;
    border-radius: 20px;
    padding: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Pill container focus state - Mint glow */
body[data-view="chat"] .chat-input-pill-wrapper:focus-within {
    border-color: #a8d5ba !important;
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.6),
        0 0 0 3px rgba(168, 213, 186, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    transform: translateY(-1px);
}

/* Circular buttons inside pill */
body[data-view="chat"] .chat-input-pill-button {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

/* Attach button (secondary - forest green) */
body[data-view="chat"] .pill-attach-button {
    background: linear-gradient(135deg, #3a5a4a 0%, #2d4a3e 100%);
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Desktop hover for attach button */
@media (hover: hover) {
    body[data-view="chat"] .pill-attach-button:hover {
        background: linear-gradient(135deg, #4a6a5a 0%, #3a5a4a 100%);
        transform: scale(1.08);
        box-shadow:
            0 3px 10px rgba(0, 0, 0, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.15);
    }
}

body[data-view="chat"] .pill-attach-button:active {
    transform: scale(0.92);
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.3),
        inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Send button (primary - mint green) */
body[data-view="chat"] .pill-send-button {
    background: linear-gradient(135deg, #a8d5ba 0%, #95c9a7 100%);
    box-shadow:
        0 2px 8px rgba(168, 213, 186, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Desktop hover for send button */
@media (hover: hover) {
    body[data-view="chat"] .pill-send-button:hover {
        background: linear-gradient(135deg, #b5ddc4 0%, #a8d5ba 100%);
        transform: scale(1.08);
        box-shadow:
            0 3px 12px rgba(168, 213, 186, 0.5),
            0 0 15px rgba(168, 213, 186, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.4);
    }
}

body[data-view="chat"] .pill-send-button:active {
    transform: scale(0.92);
    box-shadow:
        0 1px 3px rgba(168, 213, 186, 0.3),
        inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Send button pulsing animation when has text */
body[data-view="chat"] .pill-send-button.has-text {
    animation: pillSendPulse 2s ease-in-out infinite;
}

@keyframes pillSendPulse {
    0%, 100% {
        box-shadow:
            0 2px 8px rgba(168, 213, 186, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }
    50% {
        box-shadow:
            0 4px 16px rgba(168, 213, 186, 0.6),
            0 0 20px rgba(168, 213, 186, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.4);
    }
}

/* Transparent input field inside pill */
body[data-view="chat"] .chat-input-pill-field {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #1e3a2e;
    font-size: 15px;
    font-weight: 600;
    padding: 8px 4px;
    min-width: 0; /* Prevents flex overflow */
}

body[data-view="chat"] .chat-input-pill-field::placeholder {
    color: rgba(30, 58, 46, 0.5);
    font-weight: 500;
}

/* ========================================
   🔴 NORDIC PINE @MENTION HIGHLIGHT
   ======================================== */

/* Red alert style for @mentions */
body[data-view="chat"] .mention-highlight {
    /* Bold red gradient background */
    background: linear-gradient(135deg,
        #dc2626 0%,      /* Red-600 */
        #b91c1c 50%,     /* Red-700 */
        #991b1b 100%     /* Red-800 */
    ) !important;

    /* White text for maximum contrast */
    color: #ffffff !important;

    /* Bold weight for emphasis */
    font-weight: 800 !important;

    /* Comfortable padding */
    padding: 3px 8px !important;

    /* Rounded corners */
    border-radius: 6px !important;

    /* Multi-layer red glow */
    box-shadow:
        0 0 10px rgba(220, 38, 38, 0.6),      /* Inner glow */
        0 0 20px rgba(220, 38, 38, 0.4),      /* Mid glow */
        0 0 30px rgba(220, 38, 38, 0.2),      /* Outer glow */
        0 2px 4px rgba(0, 0, 0, 0.3),         /* Depth shadow */
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; /* Top highlight */

    /* Subtle border for definition */
    border: 1px solid rgba(254, 202, 202, 0.3) !important;

    /* White text shadow for extra pop */
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.5),
        0 0 8px rgba(255, 255, 255, 0.3) !important;

    /* Smooth transitions */
    transition: all 0.3s ease !important;

    /* Inline display */
    display: inline-block !important;

    /* Letter spacing for readability */
    letter-spacing: 0.3px !important;

    /* Pulse animation */
    animation: mentionPulse 2s ease-in-out infinite !important;
}

/* Hover effect - Enhanced glow */
body[data-view="chat"] .mention-highlight:hover {
    /* Brighter background */
    background: linear-gradient(135deg,
        #ef4444 0%,      /* Red-500 */
        #dc2626 50%,     /* Red-600 */
        #b91c1c 100%     /* Red-700 */
    ) !important;

    /* Intensified glow */
    box-shadow:
        0 0 15px rgba(239, 68, 68, 0.8),
        0 0 30px rgba(239, 68, 68, 0.6),
        0 0 45px rgba(239, 68, 68, 0.4),
        0 3px 6px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;

    /* Slightly lift */
    transform: translateY(-1px) scale(1.02) !important;
}

/* Pulse animation - Breathing glow effect */
@keyframes mentionPulse {
    0%, 100% {
        box-shadow:
            0 0 10px rgba(220, 38, 38, 0.6),
            0 0 20px rgba(220, 38, 38, 0.4),
            0 0 30px rgba(220, 38, 38, 0.2),
            0 2px 4px rgba(0, 0, 0, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
    50% {
        box-shadow:
            0 0 15px rgba(239, 68, 68, 0.7),
            0 0 30px rgba(239, 68, 68, 0.5),
            0 0 45px rgba(239, 68, 68, 0.3),
            0 2px 4px rgba(0, 0, 0, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.25);
    }
}

/* High contrast mode - Ensure visibility */
@media (prefers-contrast: high) {
    body[data-view="chat"] .mention-highlight {
        background: #dc2626 !important;
        border: 2px solid #ffffff !important;
        box-shadow: none !important;
    }
}

/* Reduced motion - Disable pulse */
@media (prefers-reduced-motion: reduce) {
    body[data-view="chat"] .mention-highlight {
        animation: none !important;
    }
}

/* ========================================
   🎨 UNIQUE USER BUBBLE STYLES (11 styles)
   ======================================== */

/* Style 1: Mint Fresh - Bright mint green */
body[data-view="chat"] .bubble-style-mint {
    background: linear-gradient(135deg, #a8d5ba 0%, #95c9a7 100%) !important;
    color: #1e3a2e !important;
    border: 2px solid #b5ddc4 !important;
    box-shadow:
        0 4px 16px rgba(168, 213, 186, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -2px 4px rgba(30, 58, 46, 0.1) !important;
}

@media (hover: hover) {
    body[data-view="chat"] .bubble-style-mint:hover {
        background: linear-gradient(135deg, #b5ddc4 0%, #a8d5ba 100%) !important;
        transform: translateY(-2px) !important;
        box-shadow:
            0 6px 20px rgba(168, 213, 186, 0.5),
            0 0 30px rgba(168, 213, 186, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
    }
}

/* Style 2: Snow White - Pure white to cream */
body[data-view="chat"] .bubble-style-snow {
    background: linear-gradient(135deg, #f5f5dc 0%, #e8d5b7 100%) !important;
    color: #1e3a2e !important;
    border: 2px solid rgba(168, 213, 186, 0.4) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) !important;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(168, 213, 186, 0.2),
        inset 0 -1px 2px rgba(0, 0, 0, 0.05) !important;
}

@media (hover: hover) {
    body[data-view="chat"] .bubble-style-snow:hover {
        background: linear-gradient(135deg, #ffffff 0%, #f5f5dc 100%) !important;
        border-color: rgba(168, 213, 186, 0.6) !important;
        box-shadow:
            0 6px 18px rgba(0, 0, 0, 0.25),
            0 0 20px rgba(168, 213, 186, 0.2),
            inset 0 1px 0 rgba(168, 213, 186, 0.3) !important;
    }
}

/* Style 3: Midnight Black - Deep midnight black */
body[data-view="chat"] .bubble-style-midnight {
    background: linear-gradient(135deg, #0f2419 0%, #0a1812 100%) !important;
    color: #a8d5ba !important;
    border: 2px solid rgba(168, 213, 186, 0.3) !important;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.8),
        inset 0 0 30px rgba(168, 213, 186, 0.05) !important;
}

@media (hover: hover) {
    body[data-view="chat"] .bubble-style-midnight:hover {
        background: linear-gradient(135deg, #1e3a2e 0%, #0f2419 100%) !important;
        border-color: rgba(168, 213, 186, 0.5) !important;
        box-shadow:
            0 6px 20px rgba(0, 0, 0, 0.9),
            0 0 30px rgba(168, 213, 186, 0.2),
            inset 0 0 40px rgba(168, 213, 186, 0.08) !important;
    }
}

/* Style 4: Charcoal Stone - Gray charcoal stone */
body[data-view="chat"] .bubble-style-charcoal {
    background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%) !important;
    color: #f5f5dc !important;
    border: 2px solid #718096 !important;
    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

@media (hover: hover) {
    body[data-view="chat"] .bubble-style-charcoal:hover {
        background: linear-gradient(135deg, #5a6778 0%, #3d4858 100%) !important;
        border-color: #8a95a8 !important;
        box-shadow:
            0 5px 15px rgba(0, 0, 0, 0.6),
            inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    }
}

/* Style 5: Amber Warm - Warm amber/beige */
body[data-view="chat"] .bubble-style-amber {
    background: linear-gradient(135deg, #d4a373 0%, #b8936f 100%) !important;
    color: #1e3a2e !important;
    border: 2px solid #e5b88a !important;
    box-shadow:
        0 4px 14px rgba(212, 163, 115, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -2px 4px rgba(0, 0, 0, 0.15) !important;
}

@media (hover: hover) {
    body[data-view="chat"] .bubble-style-amber:hover {
        background: linear-gradient(135deg, #e5b88a 0%, #d4a373 100%) !important;
        box-shadow:
            0 6px 18px rgba(212, 163, 115, 0.5),
            0 0 25px rgba(212, 163, 115, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
    }
}

/* Style 6: Slate Blue - Nordic blue-gray slate */
body[data-view="chat"] .bubble-style-slate {
    background: linear-gradient(135deg, #607d8b 0%, #546e7a 100%) !important;
    color: #f5f5dc !important;
    border: 2px solid #78909c !important;
    box-shadow:
        0 4px 14px rgba(96, 125, 139, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

@media (hover: hover) {
    body[data-view="chat"] .bubble-style-slate:hover {
        background: linear-gradient(135deg, #78909c 0%, #607d8b 100%) !important;
        border-color: #90a4ae !important;
        box-shadow:
            0 6px 20px rgba(96, 125, 139, 0.5),
            0 0 25px rgba(120, 144, 156, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    }
}

/* Style 7: Moss Deep - Medium forest moss */
body[data-view="chat"] .bubble-style-moss {
    background: linear-gradient(135deg, #3a5a4a 0%, #2d4a3e 100%) !important;
    color: #f5f5dc !important;
    border: 2px solid #4a6a5a !important;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(168, 213, 186, 0.15) !important;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(168, 213, 186, 0.08) 0%, transparent 50%) !important;
}

@media (hover: hover) {
    body[data-view="chat"] .bubble-style-moss:hover {
        background: linear-gradient(135deg, #4a6a5a 0%, #3a5a4a 100%) !important;
        border-color: #5a7a6a !important;
        box-shadow:
            0 6px 18px rgba(0, 0, 0, 0.6),
            inset 0 1px 0 rgba(168, 213, 186, 0.2) !important;
    }
}

/* Style 8: Ice Blue Frost - Ice blue frost */
body[data-view="chat"] .bubble-style-ice {
    background: linear-gradient(135deg, #b2dfdb 0%, #80cbc4 100%) !important;
    color: #0f2419 !important;
    border: 2px solid #4db6ac !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
    box-shadow:
        0 4px 14px rgba(128, 203, 196, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

@media (hover: hover) {
    body[data-view="chat"] .bubble-style-ice:hover {
        background: linear-gradient(135deg, #e0f2f1 0%, #b2dfdb 100%) !important;
        border-color: #26a69a !important;
        box-shadow:
            0 6px 20px rgba(77, 182, 172, 0.5),
            0 0 30px rgba(77, 182, 172, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
    }
}

/* Style 9: Copper Metallic - Copper bronze metal */
body[data-view="chat"] .bubble-style-copper {
    background: linear-gradient(135deg, #cd7f32 0%, #b87333 100%) !important;
    color: #f5f5dc !important;
    border: 2px solid #e89f5a !important;
    box-shadow:
        0 4px 16px rgba(205, 127, 50, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -2px 4px rgba(0, 0, 0, 0.2) !important;
}

@media (hover: hover) {
    body[data-view="chat"] .bubble-style-copper:hover {
        background: linear-gradient(135deg, #e89f5a 0%, #cd7f32 100%) !important;
        box-shadow:
            0 6px 20px rgba(205, 127, 50, 0.6),
            0 0 30px rgba(232, 159, 90, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    }
}

/* Style 10: Lavender Mist - Soft lavender purple */
body[data-view="chat"] .bubble-style-lavender {
    background: linear-gradient(135deg, #d8bfd8 0%, #c8aac8 100%) !important;
    color: #2d4a3e !important;
    border: 2px solid #e0c0e0 !important;
    box-shadow:
        0 4px 14px rgba(216, 191, 216, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

@media (hover: hover) {
    body[data-view="chat"] .bubble-style-lavender:hover {
        background: linear-gradient(135deg, #e8d0e8 0%, #d8bfd8 100%) !important;
        border-color: #f0d0f0 !important;
        box-shadow:
            0 6px 20px rgba(216, 191, 216, 0.5),
            0 0 25px rgba(224, 192, 224, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
    }
}

/* Style 11: Emerald Rich - Vibrant emerald green */
body[data-view="chat"] .bubble-style-emerald {
    background: linear-gradient(135deg, #50c878 0%, #3cb371 100%) !important;
    color: #0f2419 !important;
    border: 2px solid #66d98a !important;
    box-shadow:
        0 4px 16px rgba(80, 200, 120, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

@media (hover: hover) {
    body[data-view="chat"] .bubble-style-emerald:hover {
        background: linear-gradient(135deg, #66d98a 0%, #50c878 100%) !important;
        box-shadow:
            0 6px 20px rgba(80, 200, 120, 0.6),
            0 0 30px rgba(102, 217, 138, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
    }
}

/* Style 12: Aurora Purple-Green - Northern lights gradient */
body[data-view="chat"] .bubble-style-aurora {
    background: linear-gradient(135deg,
        #a8d5ba 0%,
        #8b9dc3 50%,
        #a8d5ba 100%
    ) !important;
    background-size: 200% 200% !important;
    color: #1e3a2e !important;
    border: 2px solid rgba(168, 213, 186, 0.6) !important;
    box-shadow:
        0 4px 16px rgba(139, 157, 195, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    animation: auroraShift 6s ease-in-out infinite !important;
}

@keyframes auroraShift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

/* Hover effect - only on desktop */
@media (hover: hover) {
    body[data-view="chat"] .bubble-style-aurora:hover {
        animation-duration: 3s !important;
        box-shadow:
            0 6px 20px rgba(139, 157, 195, 0.5),
            0 0 30px rgba(168, 213, 186, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
    }
}

/* ========================================
   🌲 NORDIC FOREST HEADER - Desktop
   ======================================== */

.chat-header,
#chatHeader {
    background: linear-gradient(135deg,
        var(--forest-medium) 0%,      /* #2d4a3e - Medium forest */
        var(--forest-deep) 50%,       /* #1e3a2e - Deep forest */
        var(--forest-darker) 100%) !important; /* #0f2419 - Darker forest */
    border-bottom: 2px solid var(--mint-accent) !important;
    box-shadow:
        0 3px 12px rgba(0, 0, 0, 0.4),
        0 1px 4px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(168, 213, 186, 0.15),
        inset 0 -2px 6px rgba(0, 0, 0, 0.3) !important;
    position: relative;
    overflow: visible;
}

/* Mint accent line - elegant top highlight */
.chat-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--mint-accent) 50%,
        transparent 100%);
    opacity: 0.4;
}

/* Minimal depth overlay - subtle gradient */
.chat-header::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            to bottom,
            rgba(168, 213, 186, 0.05) 0%,
            transparent 50%,
            rgba(0, 0, 0, 0.15) 100%
        );
    pointer-events: none;
    opacity: 1;
}

/* Header title text - clean and readable */
.chat-header h1,
.chat-header h2,
.chat-header .text-xl,
.chat-header .font-bold {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
    color: var(--cream) !important; /* #f5f5dc - Cream */
    position: relative;
    z-index: 5;
}

/* ========================================
   🌲 SCROLLBAR - NORDIC PINE
   ======================================== */

/* Modern browsers (Firefox) - Two-color syntax */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--mint-accent) var(--forest-darker);
}

/* Chat view - explicit scrollbar colors */
body[data-view="chat"],
body[data-view="chat"] * {
    scrollbar-width: thin;
    scrollbar-color: var(--mint-accent) var(--forest-darker);
}

/* ========================================
   Webkit Browsers (Chrome, Safari, Edge)
   ======================================== */

/* Scrollbar track - dark forest background */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background: var(--forest-darker); /* #0f2419 - Darkest forest */
}

/* Chat messages container - custom width */
#chatMessagesContainer::-webkit-scrollbar {
    width: 8px; /* Slightly thinner for mobile feel */
}

/* Scrollbar track (gutter) */
::-webkit-scrollbar-track {
    background: linear-gradient(to right,
        var(--forest-darker) 0%,
        #0a1812 100%
    );
    border-radius: 10px;
    margin: 2px 0;
}

/* Chat view scrollbar track - deeper forest */
body[data-view="chat"] ::-webkit-scrollbar-track {
    background: linear-gradient(to right,
        var(--forest-darker) 0%,
        rgba(0, 0, 0, 0.6) 100%
    );
}

/* Scrollbar thumb - mint accent */
::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg,
        var(--mint-accent) 0%,      /* #a8d5ba */
        var(--mint-dark) 100%       /* #95c9a7 */
    );
    border-radius: 10px;
    border: 2px solid var(--forest-darker); /* Creates padding effect */

    /* Subtle shadow for depth */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 2px rgba(0, 0, 0, 0.2),
        0 2px 4px rgba(0, 0, 0, 0.3);

    transition: background 0.2s ease, box-shadow 0.2s ease;
}

/* Scrollbar thumb hover - lighter mint */
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg,
        var(--mint-light) 0%,       /* #b5ddc4 - Lighter mint */
        var(--mint-accent) 100%     /* #a8d5ba */
    );

    /* Enhanced shadow on hover */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -1px 2px rgba(0, 0, 0, 0.25),
        0 3px 6px rgba(0, 0, 0, 0.4);
}

/* Scrollbar thumb active (dragging) - slightly darker */
::-webkit-scrollbar-thumb:active {
    background: linear-gradient(135deg,
        var(--mint-dark) 0%,        /* #95c9a7 - Darker mint */
        #85b997 100%                /* Even darker */
    );

    /* Compressed shadow when pressed */
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.3),
        inset 0 -1px 1px rgba(255, 255, 255, 0.2),
        0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Scrollbar corner (where horizontal and vertical meet) */
::-webkit-scrollbar-corner {
    background: var(--forest-darker);
}

/* ========================================
   Chat-specific scrollbar refinements
   ======================================== */

/* Chat messages container - smoother scrolling */
#chatMessagesContainer {
    scroll-behavior: smooth;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Ensure scrollbar is always visible in chat for better UX */
#chatMessagesContainer::-webkit-scrollbar-thumb {
    /* Always show thumb, even when not scrolling */
    min-height: 40px;
}

/* Mobile - thinner scrollbar */
@media (max-width: 768px) {
    ::-webkit-scrollbar {
        width: 6px;
    }

    #chatMessagesContainer::-webkit-scrollbar {
        width: 5px;
    }

    /* Remove border on mobile for more space */
    ::-webkit-scrollbar-thumb {
        border-width: 1px;
    }
}

/* High contrast mode - ensure visibility */
@media (prefers-contrast: high) {
    ::-webkit-scrollbar-thumb {
        background: var(--mint-light);
        border-color: var(--forest-deep);
    }
}

/* Reduced motion - no transitions */
@media (prefers-reduced-motion: reduce) {
    ::-webkit-scrollbar-thumb {
        transition: none;
    }
}

/* ========================================
   🏔️ SCENIC STATUS BUTTONS - Style C (Corner Badge)
   Beautiful animated landscape buttons
   ======================================== */

.scene-status-btn {
    width: 100%;
    height: 88px;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    position: relative;
    overflow: visible;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    -webkit-tap-highlight-color: transparent;
}

.scene-status-btn:active {
    transform: scale(0.98);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Label style - CENTERED AND LARGER */
.scene-status-btn .label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    font-size: 18px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #ffffff;
    text-align: center;
    pointer-events: none;

    /* Strong text outline for readability */
    -webkit-text-stroke: 3px rgba(0, 0, 0, 0.95);
    paint-order: stroke fill;

    text-shadow:
        0 0 15px rgba(0, 0, 0, 1),
        0 0 30px rgba(0, 0, 0, 1),
        3px 3px 8px rgba(0, 0, 0, 1),
        0 3px 12px rgba(0, 0, 0, 0.9),
        0 0 40px rgba(0, 0, 0, 0.8);

    /* Subtle glow behind text */
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.3));
}

/* Sunset button - text positioned higher */
.sunset-scene-btn .label {
    top: 32%;
}

/* ========================================
   NIGHT MOUNTAIN SCENE - "НА ПЪТ"
   Multi-layered mountains with moon, stars, clouds
   ======================================== */
.night-mountain-btn {
    background: linear-gradient(to bottom,
        #0f172a 0%,
        #1e1b4b 8%,
        #312e81 15%,
        #3730a3 22%,
        #4338ca 30%,
        #4f46e5 38%,
        #3b82f6 45%,
        #1e3a8a 55%,
        #1e293b 68%,
        #0f172a 82%,
        #020617 100%
    );
    border: 4px solid #0f172a;
    position: relative;
}

/* Moon - enhanced with better glow */
.night-mountain-btn .moon {
    position: absolute;
    top: 12px;
    left: 18px;
    width: 32px;
    height: 32px;
    background: radial-gradient(circle at 30% 30%,
        #fef3c7 0%,
        #fde68a 20%,
        #fcd34d 40%,
        #f3f4f6 65%,
        #e5e7eb 85%,
        #d1d5db 100%
    );
    border-radius: 50%;
    box-shadow:
        0 0 20px rgba(254, 243, 199, 0.8),
        0 0 40px rgba(254, 243, 199, 0.5),
        0 0 60px rgba(254, 243, 199, 0.3),
        0 0 80px rgba(254, 243, 199, 0.15),
        inset -6px -6px 10px rgba(156, 163, 175, 0.25);
    z-index: 50;
    animation: moon-glow 4s ease-in-out infinite;
}

@keyframes moon-glow {
    0%, 100% {
        box-shadow:
            0 0 20px rgba(254, 243, 199, 0.8),
            0 0 40px rgba(254, 243, 199, 0.5),
            0 0 60px rgba(254, 243, 199, 0.3),
            0 0 80px rgba(254, 243, 199, 0.15),
            inset -6px -6px 10px rgba(156, 163, 175, 0.25);
    }
    50% {
        box-shadow:
            0 0 25px rgba(254, 243, 199, 0.9),
            0 0 50px rgba(254, 243, 199, 0.6),
            0 0 75px rgba(254, 243, 199, 0.4),
            0 0 100px rgba(254, 243, 199, 0.2),
            inset -6px -6px 10px rgba(156, 163, 175, 0.25);
    }
}

/* Moon craters - more realistic */
.night-mountain-btn .moon::before {
    content: '';
    position: absolute;
    top: 45%;
    left: 55%;
    width: 4px;
    height: 4px;
    background: rgba(156, 163, 175, 0.25);
    border-radius: 50%;
    box-shadow:
        -10px -7px 0 2px rgba(156, 163, 175, 0.18),
        7px 5px 0 1px rgba(156, 163, 175, 0.2),
        -4px 8px 0 1.5px rgba(156, 163, 175, 0.15);
}

/* Stars - multiple layers */
.night-mountain-btn .star {
    position: absolute;
    background: white;
    border-radius: 50%;
    z-index: 40;
}

/* Big stars with glow */
.night-mountain-btn .star-big {
    width: 3px;
    height: 3px;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.9);
    animation: twinkle 3s ease-in-out infinite;
}

/* Medium stars */
.night-mountain-btn .star-medium {
    width: 2px;
    height: 2px;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.7);
    animation: twinkle 4s ease-in-out infinite;
}

/* Small stars */
.night-mountain-btn .star-small {
    width: 1px;
    height: 1px;
    opacity: 0.8;
    animation: twinkle 5s ease-in-out infinite;
}

.night-mountain-btn .star:nth-child(2) { top: 18%; left: 60%; animation-delay: 0s; }
.night-mountain-btn .star:nth-child(3) { top: 25%; left: 75%; animation-delay: 1s; }
.night-mountain-btn .star:nth-child(4) { top: 30%; left: 85%; animation-delay: 0.5s; }
.night-mountain-btn .star:nth-child(5) { top: 22%; left: 90%; animation-delay: 1.5s; }
.night-mountain-btn .star:nth-child(6) { top: 35%; left: 65%; animation-delay: 2s; }
.night-mountain-btn .star:nth-child(7) { top: 28%; left: 55%; animation-delay: 1.2s; }
.night-mountain-btn .star:nth-child(8) { top: 38%; left: 80%; animation-delay: 0.8s; }
.night-mountain-btn .star:nth-child(9) { top: 32%; left: 70%; animation-delay: 2.5s; }

@keyframes twinkle {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}

/* Wispy clouds */
.night-mountain-btn .cloud {
    position: absolute;
    background: rgba(148, 163, 184, 0.12);
    border-radius: 50%;
    z-index: 45;
    filter: blur(8px);
}

.night-mountain-btn .cloud-1 {
    top: 25%;
    right: 15%;
    width: 60px;
    height: 20px;
}

.night-mountain-btn .cloud-2 {
    top: 40%;
    left: 35%;
    width: 45px;
    height: 15px;
}

/* Mountain Layer 1: Farthest (darkest) */
.night-mountain-btn .mountain-1 {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 48%;
    background: linear-gradient(to bottom,
        transparent 0%,
        rgba(15, 23, 42, 0.85) 30%,
        rgba(15, 23, 42, 0.95) 100%
    );
    clip-path: polygon(
        0% 100%,
        0% 62%,
        5% 58%,
        10% 52%,
        15% 48%,
        20% 45%,
        25% 50%,
        30% 48%,
        35% 42%,
        40% 46%,
        45% 38%,
        50% 42%,
        55% 35%,
        60% 40%,
        65% 36%,
        70% 42%,
        75% 38%,
        80% 45%,
        85% 42%,
        90% 48%,
        95% 52%,
        100% 55%,
        100% 100%
    );
    z-index: 10;
}

/* Mountain Layer 2: Middle */
.night-mountain-btn .mountain-2 {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 38%;
    background: linear-gradient(to bottom,
        transparent 0%,
        rgba(30, 41, 59, 0.9) 35%,
        rgba(30, 41, 59, 0.98) 100%
    );
    clip-path: polygon(
        0% 100%,
        0% 72%,
        8% 65%,
        15% 58%,
        20% 55%,
        25% 52%,
        30% 48%,
        35% 52%,
        40% 45%,
        45% 50%,
        50% 42%,
        55% 48%,
        60% 38%,
        65% 45%,
        70% 42%,
        75% 50%,
        80% 48%,
        85% 55%,
        90% 58%,
        95% 62%,
        100% 68%,
        100% 100%
    );
    z-index: 20;
}

/* Mountain Layer 3: Close (lightest) */
.night-mountain-btn .mountain-3 {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 28%;
    background: linear-gradient(to bottom,
        transparent 0%,
        rgba(51, 65, 85, 0.92) 40%,
        rgba(51, 65, 85, 1) 100%
    );
    clip-path: polygon(
        0% 100%,
        0% 82%,
        10% 72%,
        18% 68%,
        25% 65%,
        30% 62%,
        35% 58%,
        42% 62%,
        48% 55%,
        55% 60%,
        62% 52%,
        68% 58%,
        75% 55%,
        82% 62%,
        88% 68%,
        93% 72%,
        100% 78%,
        100% 100%
    );
    z-index: 30;
}

/* Snow caps on mountains */
.night-mountain-btn .mountain-2::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 20%;
    background: linear-gradient(to bottom,
        rgba(226, 232, 240, 0.3) 0%,
        transparent 100%
    );
    clip-path: polygon(
        0% 100%,
        0% 72%,
        8% 65%,
        15% 58%,
        20% 55%,
        25% 52%,
        30% 48%,
        35% 52%,
        40% 45%,
        45% 50%,
        50% 42%,
        55% 48%,
        60% 38%,
        65% 45%,
        70% 42%,
        75% 50%,
        80% 48%,
        85% 55%,
        90% 58%,
        95% 62%,
        100% 68%,
        100% 100%
    );
}

/* Flying birds */
.night-mountain-btn .bird {
    position: absolute;
    font-size: 11px;
    color: rgba(148, 163, 184, 0.6);
    z-index: 35;
    animation: fly 8s ease-in-out infinite;
}

.night-mountain-btn .bird:nth-of-type(10) {
    top: 45%;
    left: 18%;
    animation-delay: 0s;
}

.night-mountain-btn .bird:nth-of-type(11) {
    top: 50%;
    left: 28%;
    animation-delay: 1.5s;
}

.night-mountain-btn .bird:nth-of-type(12) {
    top: 42%;
    left: 72%;
    animation-delay: 3s;
}

@keyframes fly {
    0%, 100% { transform: translateY(0px) translateX(0px); opacity: 0.6; }
    25% { transform: translateY(-6px) translateX(3px); opacity: 0.8; }
    50% { transform: translateY(-10px) translateX(6px); opacity: 0.6; }
    75% { transform: translateY(-6px) translateX(3px); opacity: 0.8; }
}

/* ========================================
   CAMPFIRE SCENE - "НА НАВЕСА"
   Night camp with fire, tent, stars, smoke
   ======================================== */
.campfire-scene-btn {
    background: linear-gradient(to bottom,
        #1e1b4b 0%,
        #312e81 15%,
        #3730a3 30%,
        #1e3a8a 45%,
        #1e293b 60%,
        #0f172a 75%,
        #451a03 90%,
        #7c2d12 100%
    );
    border: 4px solid #451a03;
    position: relative;
}

/* Ground/Grass */
.campfire-scene-btn .ground {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20%;
    background: linear-gradient(to bottom,
        #166534 0%,
        #14532d 50%,
        #052e16 100%
    );
    z-index: 5;
}

/* Tent - enhanced with texture and details */
.campfire-scene-btn .tent {
    position: absolute;
    bottom: 15%;
    right: 20%;
    width: 0;
    height: 0;
    border-left: 26px solid transparent;
    border-right: 26px solid transparent;
    border-bottom: 36px solid #d97706;
    z-index: 10;
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.6))
            drop-shadow(0 0 8px rgba(217, 119, 6, 0.3));
}

/* Tent door - darker and more visible */
.campfire-scene-btn .tent::after {
    content: '';
    position: absolute;
    bottom: -36px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 22px solid #451a03;
}

/* Tent pole - thicker */
.campfire-scene-btn .tent::before {
    content: '';
    position: absolute;
    bottom: -36px;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 10px;
    background: linear-gradient(to bottom, #78350f 0%, #451a03 100%);
    border-radius: 2px;
}

/* Fire base - enhanced glow */
.campfire-scene-btn .fire {
    position: absolute;
    bottom: 18%;
    left: 30%;
    width: 32px;
    height: 32px;
    z-index: 15;
    filter: drop-shadow(0 0 12px rgba(249, 115, 22, 0.6))
            drop-shadow(0 0 20px rgba(251, 191, 36, 0.4));
}

/* Fire flames - more dynamic */
.campfire-scene-btn .fire::before {
    content: '🔥';
    position: absolute;
    font-size: 30px;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    animation: flicker 2s ease-in-out infinite;
}

@keyframes flicker {
    0%, 100% {
        opacity: 1;
        transform: translateX(-50%) scale(1) rotate(0deg);
        filter: brightness(1.2) saturate(1.5) hue-rotate(0deg);
    }
    25% {
        opacity: 0.95;
        transform: translateX(-52%) scale(0.96) rotate(-2deg);
        filter: brightness(1.1) saturate(1.4) hue-rotate(5deg);
    }
    50% {
        opacity: 1;
        transform: translateX(-50%) scale(1.08) rotate(0deg);
        filter: brightness(1.35) saturate(1.7) hue-rotate(0deg);
    }
    75% {
        opacity: 0.97;
        transform: translateX(-48%) scale(0.99) rotate(2deg);
        filter: brightness(1.18) saturate(1.45) hue-rotate(-5deg);
    }
}

/* Wood logs under fire */
.campfire-scene-btn .fire::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 35px;
    height: 6px;
    background: linear-gradient(90deg,
        #78350f 0%,
        #92400e 50%,
        #78350f 100%
    );
    border-radius: 3px;
    box-shadow:
        0 -2px 0 0 #451a03,
        0 2px 8px rgba(0, 0, 0, 0.6);
}

/* Smoke - enhanced with multiple layers */
.campfire-scene-btn .smoke {
    position: absolute;
    bottom: 48%;
    left: 30%;
    width: 28px;
    height: 45px;
    z-index: 12;
}

/* Smoke layer 1 - main */
.campfire-scene-btn .smoke::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 38px;
    background: linear-gradient(to top,
        rgba(148, 163, 184, 0.45) 0%,
        rgba(148, 163, 184, 0.3) 40%,
        rgba(148, 163, 184, 0.15) 70%,
        transparent 100%
    );
    border-radius: 50% 50% 20% 20%;
    filter: blur(10px);
    animation: smoke-rise 5s ease-in-out infinite;
}

/* Smoke layer 2 - secondary wisp */
.campfire-scene-btn .smoke::after {
    content: '';
    position: absolute;
    bottom: 15px;
    left: 45%;
    width: 18px;
    height: 30px;
    background: linear-gradient(to top,
        rgba(148, 163, 184, 0.3) 0%,
        rgba(148, 163, 184, 0.18) 50%,
        transparent 100%
    );
    border-radius: 50% 50% 20% 20%;
    filter: blur(8px);
    animation: smoke-rise-2 6s ease-in-out infinite;
    animation-delay: 1s;
}

@keyframes smoke-rise {
    0% {
        transform: translateX(-50%) translateY(0px) scaleX(1);
        opacity: 0.45;
    }
    50% {
        transform: translateX(-48%) translateY(-12px) scaleX(1.15);
        opacity: 0.3;
    }
    100% {
        transform: translateX(-52%) translateY(-22px) scaleX(1.3);
        opacity: 0.05;
    }
}

@keyframes smoke-rise-2 {
    0% {
        transform: translateY(0px) scaleX(1);
        opacity: 0.3;
    }
    50% {
        transform: translateY(-8px) scaleX(1.2);
        opacity: 0.2;
    }
    100% {
        transform: translateY(-18px) scaleX(1.4);
        opacity: 0;
    }
}

/* Stars for campfire scene */
.campfire-scene-btn .camp-star {
    position: absolute;
    background: white;
    border-radius: 50%;
    z-index: 8;
    animation: twinkle 3s ease-in-out infinite;
}

.campfire-scene-btn .camp-star:nth-child(2) {
    width: 2px;
    height: 2px;
    top: 15%;
    left: 20%;
    animation-delay: 0s;
}

.campfire-scene-btn .camp-star:nth-child(3) {
    width: 2px;
    height: 2px;
    top: 20%;
    left: 40%;
    animation-delay: 1s;
}

.campfire-scene-btn .camp-star:nth-child(4) {
    width: 3px;
    height: 3px;
    top: 25%;
    left: 65%;
    box-shadow: 0 0 6px white;
    animation-delay: 0.5s;
}

.campfire-scene-btn .camp-star:nth-child(5) {
    width: 2px;
    height: 2px;
    top: 18%;
    left: 80%;
    animation-delay: 1.5s;
}

.campfire-scene-btn .camp-star:nth-child(6) {
    width: 2px;
    height: 2px;
    top: 30%;
    left: 90%;
    animation-delay: 2s;
}

/* Trees silhouettes */
.campfire-scene-btn .tree {
    position: absolute;
    bottom: 20%;
    background: #052e16;
    z-index: 6;
}

.campfire-scene-btn .tree-left {
    left: 8%;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 30px solid #052e16;
}

.campfire-scene-btn .tree-right {
    right: 8%;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 35px solid #052e16;
}

/* ========================================
   SUNSET/GOLDEN HOUR SCENE - "ЗАДАЙ ЧАС"
   Golden sunset with sun and clock elements
   ======================================== */
.sunset-scene-btn {
    background: linear-gradient(to bottom,
        #fef3c7 0%,
        #fde68a 8%,
        #fbbf24 15%,
        #f59e0b 25%,
        #f97316 35%,
        #fb923c 45%,
        #dc2626 55%,
        #991b1b 65%,
        #7c2d12 75%,
        #78350f 85%,
        #451a03 100%
    );
    border: 4px solid #92400e;
    position: relative;
}

/* Sun - larger and positioned below text */
.sunset-scene-btn .sun {
    position: absolute;
    bottom: 18%;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 48px;
    background: radial-gradient(circle at 40% 40%,
        #fef3c7 0%,
        #fde68a 25%,
        #fbbf24 50%,
        #f59e0b 75%,
        #ea580c 100%
    );
    border-radius: 50%;
    box-shadow:
        0 0 30px rgba(251, 191, 36, 1),
        0 0 60px rgba(251, 191, 36, 0.7),
        0 0 90px rgba(251, 191, 36, 0.5),
        0 0 120px rgba(251, 191, 36, 0.3),
        inset -8px -8px 20px rgba(234, 88, 12, 0.2),
        inset 4px 4px 15px rgba(254, 243, 199, 0.4);
    z-index: 20;
    animation: sun-pulse 3s ease-in-out infinite;
}

@keyframes sun-pulse {
    0%, 100% {
        transform: translateX(-50%) scale(1);
        box-shadow:
            0 0 30px rgba(251, 191, 36, 1),
            0 0 60px rgba(251, 191, 36, 0.7),
            0 0 90px rgba(251, 191, 36, 0.5),
            0 0 120px rgba(251, 191, 36, 0.3),
            inset -8px -8px 20px rgba(234, 88, 12, 0.2),
            inset 4px 4px 15px rgba(254, 243, 199, 0.4);
    }
    50% {
        transform: translateX(-50%) scale(1.05);
        box-shadow:
            0 0 35px rgba(251, 191, 36, 1),
            0 0 70px rgba(251, 191, 36, 0.8),
            0 0 105px rgba(251, 191, 36, 0.6),
            0 0 140px rgba(251, 191, 36, 0.4),
            inset -8px -8px 20px rgba(234, 88, 12, 0.2),
            inset 4px 4px 15px rgba(254, 243, 199, 0.4);
    }
}

/* Sun rays - more prominent and beautiful */
.sunset-scene-btn .sun::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: conic-gradient(
        transparent 0deg,
        rgba(251, 191, 36, 0.4) 3deg,
        rgba(249, 115, 22, 0.3) 6deg,
        transparent 9deg,
        transparent 45deg,
        rgba(251, 191, 36, 0.4) 48deg,
        rgba(249, 115, 22, 0.3) 51deg,
        transparent 54deg,
        transparent 90deg,
        rgba(251, 191, 36, 0.4) 93deg,
        rgba(249, 115, 22, 0.3) 96deg,
        transparent 99deg,
        transparent 135deg,
        rgba(251, 191, 36, 0.4) 138deg,
        rgba(249, 115, 22, 0.3) 141deg,
        transparent 144deg,
        transparent 180deg,
        rgba(251, 191, 36, 0.4) 183deg,
        rgba(249, 115, 22, 0.3) 186deg,
        transparent 189deg,
        transparent 225deg,
        rgba(251, 191, 36, 0.4) 228deg,
        rgba(249, 115, 22, 0.3) 231deg,
        transparent 234deg,
        transparent 270deg,
        rgba(251, 191, 36, 0.4) 273deg,
        rgba(249, 115, 22, 0.3) 276deg,
        transparent 279deg,
        transparent 315deg,
        rgba(251, 191, 36, 0.4) 318deg,
        rgba(249, 115, 22, 0.3) 321deg,
        transparent 324deg
    );
    border-radius: 50%;
    animation: rotate-rays 25s linear infinite;
    filter: blur(1px);
}

/* Enhanced corona/halo effect */
.sunset-scene-btn .sun::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 65px;
    height: 65px;
    background: radial-gradient(circle,
        rgba(254, 243, 199, 0.5) 0%,
        rgba(251, 191, 36, 0.35) 30%,
        rgba(249, 115, 22, 0.2) 60%,
        transparent 80%
    );
    border-radius: 50%;
    z-index: -1;
}

@keyframes rotate-rays {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Horizon mountains */
.sunset-scene-btn .horizon {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 25%;
    background: linear-gradient(to bottom,
        rgba(69, 26, 3, 0.8) 0%,
        rgba(69, 26, 3, 0.95) 100%
    );
    clip-path: polygon(
        0% 100%,
        0% 60%,
        15% 50%,
        30% 55%,
        45% 45%,
        60% 52%,
        75% 48%,
        90% 55%,
        100% 60%,
        100% 100%
    );
    z-index: 15;
}

/* Decorative time icons - stylized */
.sunset-scene-btn .time-icon {
    position: absolute;
    font-size: 14px;
    opacity: 0.4;
    z-index: 18;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}

.sunset-scene-btn .time-icon:nth-of-type(2) {
    content: '⏰';
    top: 10px;
    left: 15px;
}

.sunset-scene-btn .time-icon:nth-of-type(3) {
    content: '🕐';
    top: 10px;
    right: 15px;
}

.sunset-scene-btn .time-icon:nth-of-type(4) {
    content: '⏱️';
    bottom: 8px;
    left: 20%;
}

.sunset-scene-btn .time-icon:nth-of-type(5) {
    content: '⏲️';
    bottom: 8px;
    right: 20%;
}

/* ========================================
   MOBILE OPTIMIZATIONS
   ======================================== */
@media (max-width: 640px) {
    .scene-status-btn {
        height: 82px;
    }

    /* Text smaller on mobile */
    .scene-status-btn .label {
        font-size: 15px;
        letter-spacing: 1.5px;
        -webkit-text-stroke: 2.5px rgba(0, 0, 0, 0.95);
    }

    /* ========================================
       MOBILE ANIMATIONS - ALL DISABLED
       ======================================== */

    /* Night Mountain - disable animations */
    .night-mountain-btn .moon {
        animation: none;
        width: 28px;
        height: 28px;
        top: 10px;
        left: 15px;
        box-shadow:
            0 0 20px rgba(254, 243, 199, 0.8),
            0 0 40px rgba(254, 243, 199, 0.5),
            0 0 60px rgba(254, 243, 199, 0.3),
            inset -6px -6px 10px rgba(156, 163, 175, 0.25);
    }

    .night-mountain-btn .star {
        animation: none;
    }

    .night-mountain-btn .bird {
        animation: none;
    }

    .night-mountain-btn .cloud {
        filter: blur(5px);
    }

    /* Campfire scene - disable animations */
    .campfire-scene-btn .fire {
        filter: drop-shadow(0 0 10px rgba(249, 115, 22, 0.5));
    }

    .campfire-scene-btn .fire::before {
        animation: none;
        font-size: 26px;
    }

    .campfire-scene-btn .smoke::before,
    .campfire-scene-btn .smoke::after {
        animation: none;
        opacity: 0.3;
    }

    .campfire-scene-btn .camp-star {
        animation: none;
    }

    /* Sunset scene - disable animations */
    .sunset-scene-btn .sun {
        animation: none;
        width: 42px;
        height: 42px;
        bottom: 15%;
        box-shadow:
            0 0 25px rgba(251, 191, 36, 0.9),
            0 0 50px rgba(251, 191, 36, 0.6),
            0 0 75px rgba(251, 191, 36, 0.4),
            inset -8px -8px 20px rgba(234, 88, 12, 0.2),
            inset 4px 4px 15px rgba(254, 243, 199, 0.4);
    }

    .sunset-scene-btn .sun::before {
        animation: none;
        width: 70px;
        height: 70px;
    }

    .sunset-scene-btn .sun::after {
        width: 60px;
        height: 60px;
    }

    .sunset-scene-btn .time-icon {
        font-size: 12px;
        opacity: 0.3;
    }
}

/* ========================================
   🔥 LIVING CAMPFIRE LOGO ANIMATIONS
   Mobile-Optimized Ultra Creative Effects
   ======================================== */

/* ============================================
   ENHANCED CAMPFIRE CONTAINER
   Wood Frame + Carved Header + 3D Depth
   ============================================ */

/* Main container - Wood frame with depth */
/* ================================================
   🪨 CAMPFIRE STONE CIRCLE - Natural Earthy Design
   Stone ring around fire pit with ash ground
   ================================================ */

.around-fire-enhanced {
    position: relative;
    padding: 0;
    overflow: visible;
    transform: translateZ(0);
    transition: transform 0.3s ease, box-shadow 0.3s ease;

    /* DARK NIGHT SKY background */
    background: radial-gradient(ellipse at center,
        #1a2332 0%,
        #0d1520 60%,
        #050a12 100%
    );

    /* STONE BORDER - Multiple layers for realistic rocks */
    border: 16px solid transparent;
    border-image:
        /* Stone texture gradient */
        linear-gradient(135deg,
            #6b5d52 0%,
            #847a6e 15%,
            #5a4d42 30%,
            #7d7267 45%,
            #63574d 60%,
            #8a7f73 75%,
            #6b5d52 100%
        ) 1;

    border-radius: 24px;

    /* STONE RING 3D DEPTH + ASH GLOW */
    box-shadow:
        /* Inner ash ring - dark burnt ground */
        inset 0 0 0 8px rgba(26, 15, 8, 0.9),
        inset 0 0 20px 8px rgba(42, 24, 16, 0.8),
        /* Inner fire glow from center */
        inset 0 0 60px rgba(252, 163, 17, 0.15),
        /* Outer stone shadows - 3D raised stones */
        0 0 0 4px rgba(90, 77, 66, 0.6),
        0 4px 8px rgba(0, 0, 0, 0.5),
        0 8px 20px rgba(0, 0, 0, 0.6),
        0 16px 40px rgba(0, 0, 0, 0.7),
        /* Warm campfire glow escaping */
        0 0 80px rgba(252, 163, 17, 0.25);
}

/* STONE TEXTURE OVERLAY - Individual stones effect */
.around-fire-enhanced::before {
    content: '';
    position: absolute;
    inset: -16px;

    /* Random stone pattern */
    background-image:
        /* Dark cracks between stones */
        radial-gradient(circle at 20% 30%, rgba(0, 0, 0, 0.5) 0%, transparent 8%),
        radial-gradient(circle at 80% 40%, rgba(0, 0, 0, 0.4) 0%, transparent 10%),
        radial-gradient(circle at 50% 70%, rgba(0, 0, 0, 0.45) 0%, transparent 9%),
        radial-gradient(circle at 15% 85%, rgba(0, 0, 0, 0.4) 0%, transparent 7%),
        radial-gradient(circle at 90% 80%, rgba(0, 0, 0, 0.5) 0%, transparent 8%),
        /* Stone highlights */
        radial-gradient(circle at 35% 25%, rgba(160, 145, 130, 0.3) 0%, transparent 12%),
        radial-gradient(circle at 70% 60%, rgba(140, 125, 110, 0.25) 0%, transparent 10%);

    pointer-events: none;
    z-index: 1;
    border-radius: 24px;
}

/* ================================================
   🍄 MOSS-COVERED WOOD LOG - Forest Floor Aesthetic
   Dark aged wood + vibrant moss patches + natural depth
   ================================================ */

.fire-header-enhanced {
    position: relative;

    /* DARK AGED WOOD BASE - Damp, rotting log */
    background:
        /* ===== VIBRANT MOSS PATCHES - Irregular organic shapes ===== */

        /* Large moss cluster - left side (bright green) */
        radial-gradient(ellipse 80px 45px at 15% 50%,
            rgba(74, 124, 89, 0.85) 0%,
            rgba(74, 124, 89, 0.75) 40%,
            rgba(93, 155, 109, 0.5) 65%,
            transparent 100%),

        /* Medium moss patch - top center (vibrant) */
        radial-gradient(ellipse 60px 40px at 45% 25%,
            rgba(93, 155, 109, 0.8) 0%,
            rgba(74, 124, 89, 0.6) 50%,
            transparent 100%),

        /* Small moss cluster - right side (dark green) */
        radial-gradient(ellipse 55px 38px at 82% 45%,
            rgba(45, 87, 56, 0.75) 0%,
            rgba(74, 124, 89, 0.55) 60%,
            transparent 100%),

        /* Tiny moss spot - bottom left (olive) */
        radial-gradient(circle 30px at 25% 80%,
            rgba(107, 124, 74, 0.7) 0%,
            rgba(93, 155, 109, 0.4) 50%,
            transparent 100%),

        /* Medium moss - top right corner (bright) */
        radial-gradient(ellipse 50px 35px at 88% 20%,
            rgba(93, 155, 109, 0.75) 0%,
            rgba(74, 124, 89, 0.5) 55%,
            transparent 100%),

        /* Small moss - center right (dark) */
        radial-gradient(circle 35px at 70% 65%,
            rgba(45, 87, 56, 0.7) 0%,
            rgba(74, 124, 89, 0.45) 60%,
            transparent 100%),

        /* Lichen patches - light grey-green accents */
        radial-gradient(circle 20px at 55% 75%,
            rgba(130, 150, 120, 0.5) 0%,
            transparent 70%),
        radial-gradient(circle 18px at 38% 60%,
            rgba(140, 160, 130, 0.45) 0%,
            transparent 65%),

        /* ===== WET/DAMP AREAS - Moisture shadows ===== */
        radial-gradient(ellipse 70px 40px at 30% 40%,
            rgba(0, 0, 0, 0.3) 0%,
            transparent 60%),
        radial-gradient(ellipse 60px 35px at 75% 55%,
            rgba(0, 0, 0, 0.25) 0%,
            transparent 55%),

        /* ===== DARK AGED WOOD GRAIN ===== */
        /* Horizontal wood grain - weathered */
        repeating-linear-gradient(90deg,
            rgba(0, 0, 0, 0.2) 0px,
            rgba(0, 0, 0, 0.2) 1px,
            transparent 1px,
            transparent 6px
        ),

        /* Vertical wood cracks */
        repeating-linear-gradient(0deg,
            rgba(0, 0, 0, 0.15) 0px,
            transparent 0.5px,
            transparent 3px
        ),

        /* BASE WOOD COLOR - Very dark damp wood */
        linear-gradient(135deg,
            #3a2f24 0%,
            #2a2118 30%,
            #1a1510 60%,
            #2a2118 100%
        );

    /* BARK BORDER - Rough aged bark edges */
    border: 4px solid #1a1510;
    border-radius: 18px;

    /* COMPACT PADDING */
    padding: 12px 16px;

    /* FOREST FLOOR DEPTH - Damp log shadows + subtle moss glow */
    box-shadow:
        /* INNER WOOD DEPTH - Rotting/damp cavities */
        inset 0 4px 12px rgba(0, 0, 0, 0.8),
        inset 0 2px 6px rgba(0, 0, 0, 0.6),
        inset 4px 0 10px rgba(0, 0, 0, 0.5),
        inset -4px 0 10px rgba(0, 0, 0, 0.5),

        /* SUBTLE GREEN MOSS GLOW - Bioluminescence effect */
        inset 0 0 30px rgba(74, 124, 89, 0.08),
        inset 0 -3px 15px rgba(93, 155, 109, 0.12),

        /* OUTER LOG SHADOW - Heavy forest floor shadow */
        0 6px 18px rgba(0, 0, 0, 0.7),
        0 3px 8px rgba(0, 0, 0, 0.5),

        /* SUBTLE MOSS AMBIENT GLOW */
        0 0 25px rgba(74, 124, 89, 0.15),
        0 0 40px rgba(93, 155, 109, 0.08);

    z-index: 2;
}

/* ORGANIC BARK & MOSS TEXTURE OVERLAY */
.fire-header-enhanced::after {
    content: '';
    position: absolute;
    inset: 0;

    /* Bark texture + moss detail overlay */
    background:
        /* Bark peeling/flaking texture */
        radial-gradient(ellipse at 20% 30%, rgba(60, 50, 40, 0.25) 0%, transparent 35%),
        radial-gradient(ellipse at 80% 70%, rgba(55, 45, 35, 0.2) 0%, transparent 30%),

        /* Fine moss texture - fuzzy organic pattern */
        repeating-radial-gradient(circle at 15% 50%,
            rgba(93, 155, 109, 0.12) 0px,
            transparent 3px,
            transparent 8px
        ),
        repeating-radial-gradient(circle at 82% 45%,
            rgba(74, 124, 89, 0.1) 0px,
            transparent 2.5px,
            transparent 7px
        ),

        /* Wood grain detail - Fine horizontal lines */
        repeating-linear-gradient(0deg,
            rgba(60, 50, 40, 0.15) 0px,
            transparent 0.5px,
            transparent 2px
        );

    pointer-events: none;
    border-radius: 15px;
    z-index: 1;

    /* Deep wood cavity shadows */
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5);
}

/* BURNT LOG HEADER LAYOUT */
.fire-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    position: relative;
    z-index: 3;
}

/* TOTEM ANIMALS - COMPACT asymmetric layout */
.totem-header-animals {
    display: flex;
    gap: 6px;
    align-items: center;
}

/* LEFT SIDE - varied sizes (bigger first) */
.totem-header-animals.left .totem-animal-icon:nth-child(1) {
    font-size: 1.5rem; /* Bigger - REDUCED */
    transform: rotate(-3deg);
}

.totem-header-animals.left .totem-animal-icon:nth-child(2) {
    font-size: 1.15rem; /* Smaller - REDUCED */
    transform: rotate(2deg) translateY(2px);
}

/* RIGHT SIDE - varied sizes (smaller first) */
.totem-header-animals.right .totem-animal-icon:nth-child(1) {
    font-size: 1.25rem; /* Smaller - REDUCED */
    transform: rotate(4deg) translateY(-1px);
}

.totem-header-animals.right .totem-animal-icon:nth-child(2) {
    font-size: 1.45rem; /* Bigger - REDUCED */
    transform: rotate(-2deg);
}

.totem-animal-icon {
    display: block;

    /* DEEP WOOD CARVING effect - hand-chiseled */
    filter:
        /* Deep carved shadow */
        drop-shadow(0 3px 6px rgba(0, 0, 0, 0.85))
        /* Carved depth layers */
        drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7))
        /* Subtle warm wood glow */
        drop-shadow(0 0 8px rgba(139, 111, 71, 0.35));

    opacity: 0.88;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);

    /* Carved edge outline */
    -webkit-text-stroke: 0.5px rgba(70, 50, 35, 0.4);
}

.totem-animal-icon:hover {
    opacity: 1;
    transform: scale(1.12) rotate(-4deg) !important;

    filter:
        /* Stronger carved depth on hover */
        drop-shadow(0 4px 8px rgba(0, 0, 0, 0.95))
        drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))
        /* Warm polished wood shine */
        drop-shadow(0 0 12px rgba(200, 160, 120, 0.5));
}

/* CENTER TITLE - ULTRA COMPACT */
.fire-title-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1;
}

/* Fire icon - TINY subtle ember */
.fire-icon-enhanced {
    font-size: 1.25rem; /* ULTRA COMPACT */
    filter:
        drop-shadow(0 2px 4px rgba(252, 163, 17, 0.6))
        drop-shadow(0 3px 8px rgba(255, 111, 0, 0.4));
    animation: iconFlicker 2.5s ease-in-out infinite;
}

@keyframes iconFlicker {
    0%, 100% {
        filter:
            drop-shadow(0 2px 4px rgba(252, 163, 17, 0.6))
            drop-shadow(0 3px 8px rgba(255, 111, 0, 0.4));
    }
    50% {
        filter:
            drop-shadow(0 2px 6px rgba(252, 163, 17, 0.8))
            drop-shadow(0 4px 12px rgba(255, 111, 0, 0.6));
    }
}

/* "ОКОЛО ОГЪНЯ" title - ULTRA COMPACT */
.fire-title-text {
    font-family: 'Georgia', serif;
    font-size: 1.15rem; /* ULTRA COMPACT */
    font-weight: 900;
    letter-spacing: 2.5px;
    margin: 0;
    line-height: 1;

    /* BRIGHT CARVED WOOD TEXT - High readability */
    color: #f5e6d3; /* Warm cream/parchment */
    text-shadow:
        /* Strong dark outline for contrast */
        -1px -1px 0 rgba(0, 0, 0, 0.9),
        1px -1px 0 rgba(0, 0, 0, 0.9),
        -1px 1px 0 rgba(0, 0, 0, 0.9),
        1px 1px 0 rgba(0, 0, 0, 0.9),
        /* Carved depth shadow */
        0 3px 6px rgba(0, 0, 0, 0.8),
        0 5px 12px rgba(0, 0, 0, 0.6),
        /* Warm glow */
        0 0 20px rgba(252, 163, 17, 0.3);

    position: relative;
    z-index: 1;
}

/* Alternative - Direct header h2 support */
.fire-header-enhanced h2 {
    font-family: 'Georgia', serif;
    font-size: 1.15rem;
    font-weight: 900;
    letter-spacing: 2.5px;
    margin: 0;
    line-height: 1;

    /* BRIGHT CARVED WOOD TEXT - High readability */
    color: #f5e6d3; /* Warm cream/parchment */
    text-shadow:
        /* Strong dark outline for contrast */
        -1px -1px 0 rgba(0, 0, 0, 0.9),
        1px -1px 0 rgba(0, 0, 0, 0.9),
        -1px 1px 0 rgba(0, 0, 0, 0.9),
        1px 1px 0 rgba(0, 0, 0, 0.9),
        /* Carved depth shadow */
        0 3px 6px rgba(0, 0, 0, 0.8),
        0 5px 12px rgba(0, 0, 0, 0.6),
        /* Warm glow */
        0 0 20px rgba(252, 163, 17, 0.3);

    position: relative;
    z-index: 1;
}

/* Scene wrapper integration */
.campfire-scene-wrapper-enhanced {
    margin: 0;
    border-radius: 0 0 14px 14px;
    box-shadow: none; /* Remove default shadow, use container's */
}

/* Content padding */
.fire-content-enhanced {
    padding: 0; /* Removed padding for full-width campfire scene */
    position: relative;
    z-index: 1;
}

/* Mobile responsive - Stone circle adjustments */
@media (max-width: 768px) {
    .around-fire-enhanced {
        /* Thinner stone border for mobile */
        border-width: 12px;
        border-radius: 20px;

        box-shadow:
            /* Inner ash ring */
            inset 0 0 0 6px rgba(26, 15, 8, 0.9),
            inset 0 0 15px 6px rgba(42, 24, 16, 0.8),
            inset 0 0 50px rgba(252, 163, 17, 0.15),
            /* Outer stone shadows */
            0 0 0 3px rgba(90, 77, 66, 0.6),
            0 3px 6px rgba(0, 0, 0, 0.5),
            0 6px 15px rgba(0, 0, 0, 0.6),
            0 12px 30px rgba(0, 0, 0, 0.7),
            0 0 60px rgba(252, 163, 17, 0.25);
    }

    .fire-header-enhanced {
        padding: 10px 14px;
        border-width: 2px;
        border-radius: 12px;
    }

    .fire-title-text,
    .fire-header-enhanced h2 {
        font-size: 1rem;
        letter-spacing: 2px;
    }

    .fire-icon-enhanced {
        font-size: 1.1rem;
    }

    /* Asymmetric totem mobile sizes */
    .totem-header-animals.left .totem-animal-icon:nth-child(1) {
        font-size: 1.3rem;
    }

    .totem-header-animals.left .totem-animal-icon:nth-child(2) {
        font-size: 1rem;
    }

    .totem-header-animals.right .totem-animal-icon:nth-child(1) {
        font-size: 1.1rem;
    }

    .totem-header-animals.right .totem-animal-icon:nth-child(2) {
        font-size: 1.25rem;
    }

    .fire-content-enhanced {
        padding: 0;
    }

    .campfire-scene-wrapper-enhanced {
        border-radius: 0 0 12px 12px;
    }
}

@media (max-width: 480px) {
    .around-fire-enhanced {
        /* Very thin stone border for small screens */
        border-width: 10px;
        border-radius: 18px;

        box-shadow:
            /* Inner ash ring */
            inset 0 0 0 5px rgba(26, 15, 8, 0.9),
            inset 0 0 12px 5px rgba(42, 24, 16, 0.8),
            inset 0 0 40px rgba(252, 163, 17, 0.15),
            /* Outer stone shadows */
            0 0 0 2px rgba(90, 77, 66, 0.6),
            0 2px 4px rgba(0, 0, 0, 0.5),
            0 4px 10px rgba(0, 0, 0, 0.6),
            0 8px 20px rgba(0, 0, 0, 0.7),
            0 0 50px rgba(252, 163, 17, 0.25);
    }

    .fire-header-enhanced {
        padding: 8px 12px;
        border-width: 2px;
        border-radius: 10px;
    }

    .fire-title-text,
    .fire-header-enhanced h2 {
        font-size: 0.95rem;
        letter-spacing: 1.5px;
    }

    .fire-icon-enhanced {
        font-size: 1rem;
    }

    /* Asymmetric totem small mobile sizes */
    .totem-header-animals.left .totem-animal-icon:nth-child(1) {
        font-size: 1.2rem;
    }

    .totem-header-animals.left .totem-animal-icon:nth-child(2) {
        font-size: 0.95rem;
    }

    .totem-header-animals.right .totem-animal-icon:nth-child(1) {
        font-size: 1rem;
    }

    .totem-header-animals.right .totem-animal-icon:nth-child(2) {
        font-size: 1.15rem;
    }

    .fire-header-content {
        gap: 8px;
    }

    .totem-header-animals {
        gap: 4px;
    }

    .fire-content-enhanced {
        padding: 0;
    }
}

/* ===================================
   RECENT TRAILS - ENHANCED MOBILE DESIGN
   =================================== */

/* Subtle pulse for active visits */
@keyframes pulse-subtle {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.85;
    }
}

.animate-pulse-subtle {
    animation: pulse-subtle 2s ease-in-out infinite;
}

/* Mobile touch feedback */
@media (hover: none) and (pointer: coarse) {
    .touch-action-manipulation {
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }
}

/* ================================================
   🪵 SIMPLIFIED WOODEN PLANK SIGN
   ================================================ */

.wooden-plank-sign {
    /* ULTRA-FAST: Image-based wood texture */
    background-image: url('../images/wood-plank.webp');
    /* CONTAIN to show full image without cropping */
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    /* NO background color - pure transparent behind PNG */

    /* NO BORDER - clean wooden plank */
    border: none;
    /* Sharp edges - authentic old wood plank */
    border-radius: 0;

    /* CLOSE to profile - висяща табела */
    margin: 0 auto 24px;
    /* Увеличен padding за да се побере цялото изображение */
    padding: 48px 32px 48px;
    position: relative;
    /* NO box-shadow - blend with site background */
}

/* Hanging rope (center top) - влиза малко в табелата */
.wooden-plank-sign::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 24px;
    background:
        /* Twisted rope texture */
        repeating-linear-gradient(135deg,
            #8B7355 0px,
            #7A6449 4px,
            #8B7355 8px),
        linear-gradient(to bottom, #8B7355, #6B5644);
    border-radius: 5px;
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.6),
        inset -1px 0 2px rgba(0, 0, 0, 0.4),
        inset 1px 0 2px rgba(255, 255, 255, 0.15);
    z-index: 15;
}

/* Metal hook at top of rope - над въжето */
.wooden-plank-sign::after {
    content: '';
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 12px;
    background:
        radial-gradient(circle at 35% 35%, #6a6a6a 0%, #2a2a2a 70%);
    border: 1px solid #1a1a1a;
    border-radius: 50%;
    box-shadow:
        0 3px 6px rgba(0, 0, 0, 0.8),
        inset -1px -1px 3px rgba(0, 0, 0, 0.6),
        inset 1px 1px 2px rgba(255, 255, 255, 0.3);
    z-index: 16;
}

/* 🔥 BRANDED TITLE "НАВЕСА" - Горещо желязо върху дърво */
.carved-camp-title {
    font-family: Georgia, serif;
    font-size: 2.2rem;
    font-weight: 900;
    letter-spacing: 10px;
    text-align: center;
    /* Тъмно изгорен от горещо желязо */
    color: #1a0f00;
    margin-bottom: 8px;
    /* SHARP BURNT BRAND - crisp readable */
    text-shadow:
        /* Subtle burnt glow - НЕ blurry */
        0 0 4px rgba(255, 69, 0, 0.5),
        0 0 8px rgba(255, 87, 34, 0.3),
        /* Дълбока изгорена вдлъбнатина - SHARP */
        0 2px 0 rgba(0, 0, 0, 1),
        0 3px 4px rgba(0, 0, 0, 0.9),
        0 4px 8px rgba(0, 0, 0, 0.6),
        /* Burnt edge highlight - crisp */
        0 -1px 0 rgba(139, 69, 19, 0.5);
}

/* 🏕️ BRANDED LOCATION "Баткунци" - По-subtle изгаряне */
.carved-location-text {
    font-family: Georgia, serif;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 4px;
    text-align: center;
    /* По-леко изгорен (не толкова дълбоко) */
    color: #2d1b00;
    margin-top: 12px;
    /* CRISP subtle burnt brand */
    text-shadow:
        /* По-слаб burnt glow - sharp */
        0 0 3px rgba(255, 87, 34, 0.4),
        0 0 6px rgba(255, 111, 0, 0.2),
        /* Shallow burnt depth - readable */
        0 1px 0 rgba(0, 0, 0, 0.95),
        0 2px 3px rgba(0, 0, 0, 0.8),
        /* Delicate burnt edge */
        0 -1px 0 rgba(139, 69, 19, 0.3);
}

/* Corner screws */
.wooden-plank-sign .campfire-container {
    /* Add subtle screws to visual context */
    position: relative;
}

/* NO decorative screws - clean plank */
[class*="wooden-plank-sign"] {
    background-image: url('../images/wood-plank.webp');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* 🔥 GPU-accelerated campfire zone with INTEGRATED FIRE EFFECTS */
.campfire-zone {
    position: relative;
    text-align: center;
    /* GPU layer promotion */
    transform: translateZ(0);
    will-change: transform;
    /* Reduce repaints */
    contain: layout style paint;

    /* BURNT CIRCLE - огънят е изгорил дървото под себе си */
    background: radial-gradient(
        circle at center,
        /* Центърът е почти черен (burnt) */
        rgba(26, 15, 0, 0.85) 0%,
        rgba(45, 27, 0, 0.6) 30%,
        rgba(61, 39, 23, 0.3) 50%,
        /* Fade to transparent - blends with wood */
        transparent 70%
    );

    /* WARM GLOW REFLECTION - огънят осветява дървото */
    box-shadow:
        /* Inner warm glow */
        inset 0 0 40px rgba(255, 111, 0, 0.15),
        inset 0 0 60px rgba(255, 87, 34, 0.1),
        /* Outer soft reflection на дървото */
        0 0 60px rgba(255, 111, 0, 0.1),
        0 0 100px rgba(255, 69, 0, 0.05);

    padding: 20px;
    border-radius: 50%;
}

/* 🌑 ASH & EMBER BASE - под wood logs */
#woodLogs {
    position: relative;
}

#woodLogs::before {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 140px;
    height: 20px;
    /* Ash gradient with ember glow */
    background: radial-gradient(
        ellipse at center,
        /* Hot ember center (оранжева жарава) */
        rgba(255, 111, 0, 0.3) 0%,
        rgba(139, 69, 19, 0.5) 20%,
        /* Ash (grey-black пепел) */
        rgba(60, 50, 40, 0.6) 40%,
        rgba(40, 30, 20, 0.5) 60%,
        transparent 80%
    );
    border-radius: 50%;
    /* Subtle glow from hot embers */
    box-shadow: 0 0 15px rgba(255, 111, 0, 0.2);
    pointer-events: none;
    z-index: -1;
}

/* Optimized sparks layer */
.sparks-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.sparks-layer .spark {
    position: absolute;
    top: 20px;
}

.sparks-layer .spark-1 {
    left: 48%;
}

.sparks-layer .spark-2 {
    left: 52%;
}

/* ===== RESPONSIVE DESIGN - Mobile Performance ===== */

@media (max-width: 640px) {
    .carved-camp-title {
        /* Mobile: УВЕЛИЧЕН за по-добра видимост (+15%) */
        font-size: 1.85rem;
        letter-spacing: 7px;
        margin-bottom: 12px;
        /* Mobile: SHARP readable burnt effect */
        text-shadow:
            0 0 3px rgba(255, 69, 0, 0.5),
            0 0 6px rgba(255, 87, 34, 0.3),
            0 1px 0 rgba(0, 0, 0, 1),
            0 2px 3px rgba(0, 0, 0, 0.9),
            0 3px 6px rgba(0, 0, 0, 0.6),
            0 -1px 0 rgba(139, 69, 19, 0.5);
    }

    .carved-location-text {
        /* Mobile: УВЕЛИЧЕН за readable (+15%) */
        font-size: 0.85rem;
        letter-spacing: 3.5px;
        margin-top: 14px;
        /* Mobile: CRISP subtle burnt */
        text-shadow:
            0 0 2px rgba(255, 87, 34, 0.4),
            0 0 4px rgba(255, 111, 0, 0.2),
            0 1px 0 rgba(0, 0, 0, 0.95),
            0 1px 2px rgba(0, 0, 0, 0.8),
            0 -1px 0 rgba(139, 69, 19, 0.3);
    }

    .wooden-plank-sign {
        /* Mobile: УВЕЛИЧЕН padding за larger feel */
        padding: 42px 28px 42px;
        /* CLOSE to profile on mobile */
        margin: 0 auto 20px;
        /* Mobile uses same image (already loaded, cached, fast) */
        background-image: url('../images/wood-plank.webp');
        /* CONTAIN to show full image on mobile */
        background-size: contain;
        background-position: center;
        /* NO background color - transparent */
    }

    /* Rope влиза малко в табелата на mobile */
    .wooden-plank-sign::before {
        top: -12px;
        height: 24px;
        width: 8px;
    }

    /* Hook над въжето на mobile */
    .wooden-plank-sign::after {
        top: -18px;
        width: 10px;
        height: 10px;
    }

    /* Mobile: NO screws - clean image */
    [class*="wooden-plank-sign"] {
        background-image: url('../images/wood-plank.webp');
        background-size: contain;
        background-position: center;
    }

    /* Mobile: LIGHTER burnt circle and glow for performance */
    .campfire-zone {
        /* УВЕЛИЧЕН padding за larger campfire (+20%) */
        padding: 18px;
        margin-top: 24px !important;
        /* Subtle burnt circle on mobile */
        background: radial-gradient(
            circle at center,
            rgba(26, 15, 0, 0.7) 0%,
            rgba(45, 27, 0, 0.4) 30%,
            transparent 60%
        );
        /* Lighter glow on mobile */
        box-shadow:
            inset 0 0 30px rgba(255, 111, 0, 0.1),
            0 0 40px rgba(255, 111, 0, 0.08);
    }

    /* Mobile: УВЕЛИЧЕН ash base (+15%) */
    #woodLogs::before {
        width: 115px;
        height: 18px;
        bottom: -7px;
        box-shadow: 0 0 12px rgba(255, 111, 0, 0.15);
    }

    /* Hide 1 spark on mobile for performance */
    .sparks-layer .spark-2 {
        display: none;
    }
}

/* ================================================
   🔥 CAMPFIRE EMBERS + LEATHER PATCHES BUTTONS
   Glowing embers on leather patches
   ================================================ */

/* Keyframe animation for ember pulsing */
@keyframes emberPulse {
    0%, 100% {
        box-shadow:
            /* Ember glow - base */
            0 0 15px rgba(255, 87, 34, 0.4),
            0 0 30px rgba(255, 111, 0, 0.2),
            0 0 45px rgba(255, 61, 0, 0.1),
            /* Depth shadow */
            0 6px 20px rgba(0, 0, 0, 0.6),
            0 3px 10px rgba(0, 0, 0, 0.4),
            /* Inner ember heat */
            inset 0 0 20px rgba(255, 87, 34, 0.15),
            inset 0 0 40px rgba(255, 61, 0, 0.08);
    }
    50% {
        box-shadow:
            /* Brighter ember pulse */
            0 0 20px rgba(255, 87, 34, 0.6),
            0 0 40px rgba(255, 111, 0, 0.3),
            0 0 60px rgba(255, 61, 0, 0.15),
            /* Depth shadow */
            0 6px 20px rgba(0, 0, 0, 0.6),
            0 3px 10px rgba(0, 0, 0, 0.4),
            /* Inner ember heat */
            inset 0 0 30px rgba(255, 87, 34, 0.25),
            inset 0 0 60px rgba(255, 61, 0, 0.12);
    }
}

.action-buttons {
    display: flex !important;
    gap: 16px !important;
    justify-content: center !important;
    margin: 0 auto 24px !important;
    max-width: 600px !important;
    padding: 0 16px !important;
}

.action-btn {
    flex: 1 !important;
    min-width: 120px !important;
    padding: 20px 24px !important;

    position: relative !important;
    cursor: pointer !important;
    overflow: visible !important;

    /* CHARCOAL/ASH BASE - burned wood */
    background:
        /* Subtle ash texture */
        radial-gradient(circle at 30% 40%, rgba(60, 35, 20, 0.4) 0%, transparent 50%),
        radial-gradient(circle at 70% 60%, rgba(80, 45, 25, 0.3) 0%, transparent 50%),
        /* Dark charcoal gradient */
        linear-gradient(
            135deg,
            #2a1810 0%,
            #1a0f08 50%,
            #2a1810 100%
        ) !important;

    /* LEATHER STITCHED BORDER */
    border: 4px solid #9b7653 !important;
    border-radius: 16px !important;

    /* EMBER GLOW + DEPTH */
    box-shadow:
        /* Ember glow - animated in keyframes */
        0 0 15px rgba(255, 87, 34, 0.4),
        0 0 30px rgba(255, 111, 0, 0.2),
        0 0 45px rgba(255, 61, 0, 0.1),
        /* Depth shadow */
        0 6px 20px rgba(0, 0, 0, 0.6),
        0 3px 10px rgba(0, 0, 0, 0.4),
        /* Inner ember heat */
        inset 0 0 20px rgba(255, 87, 34, 0.15),
        inset 0 0 40px rgba(255, 61, 0, 0.08) !important;

    /* Pulsing ember animation */
    animation: emberPulse 3s ease-in-out infinite !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;

    /* GPU acceleration */
    transform: translateZ(0) !important;
    backface-visibility: hidden !important;
}

/* LEATHER STITCH PATTERN (pseudo-element) */
.action-btn::before {
    content: '' !important;
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    border: 2px dashed rgba(139, 111, 71, 0.5) !important;
    border-radius: 12px !important;
    pointer-events: none !important;
}

.action-btn-icon {
    font-size: 2rem !important;
    display: block !important;
    position: relative !important;
    z-index: 1 !important;
    /* Ember glow on icon */
    filter:
        drop-shadow(0 0 8px rgba(255, 87, 34, 0.6))
        drop-shadow(0 0 12px rgba(255, 111, 0, 0.4))
        drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8)) !important;
}

.action-btn-label {
    font-family: 'Georgia', serif !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    position: relative !important;
    z-index: 1 !important;

    /* EMBOSSED LEATHER STAMP TEXT */
    color: #d4a574 !important;
    text-shadow:
        /* Pressed/stamped effect */
        0 2px 0 rgba(0, 0, 0, 0.9),
        0 3px 4px rgba(0, 0, 0, 0.8),
        /* Top highlight (leather shine) */
        0 -1px 0 rgba(255, 230, 200, 0.3),
        /* Ember glow from below */
        0 0 10px rgba(255, 87, 34, 0.3) !important;
}

/* HOVER - stronger ember glow + lift */
.action-btn:hover {
    transform: translateY(-4px) !important;

    /* Intensify ember glow */
    box-shadow:
        /* Stronger ember glow */
        0 0 25px rgba(255, 87, 34, 0.7),
        0 0 50px rgba(255, 111, 0, 0.4),
        0 0 75px rgba(255, 61, 0, 0.2),
        /* Stronger depth */
        0 8px 25px rgba(0, 0, 0, 0.7),
        0 4px 15px rgba(0, 0, 0, 0.5),
        /* Inner heat */
        inset 0 0 30px rgba(255, 87, 34, 0.25),
        inset 0 0 60px rgba(255, 61, 0, 0.15) !important;

    /* Pause animation on hover for stability */
    animation: none !important;
}

/* ACTIVE - press down, dim embers */
.action-btn:active {
    transform: translateY(1px) !important;

    box-shadow:
        /* Dimmed ember glow */
        0 0 10px rgba(255, 87, 34, 0.3),
        0 0 20px rgba(255, 111, 0, 0.15),
        /* Pressed shadow */
        0 3px 10px rgba(0, 0, 0, 0.5),
        inset 0 2px 8px rgba(0, 0, 0, 0.6) !important;
}

/* FOREST VARIANT (Admin) - green ember glow */
.action-btn-forest {
    border-color: #6b8e4e !important;

    box-shadow:
        /* Green mystical glow */
        0 0 15px rgba(168, 213, 186, 0.5),
        0 0 30px rgba(139, 195, 160, 0.3),
        0 0 45px rgba(107, 142, 78, 0.15),
        0 6px 20px rgba(0, 0, 0, 0.6),
        0 3px 10px rgba(0, 0, 0, 0.4),
        inset 0 0 20px rgba(168, 213, 186, 0.15) !important;

    animation: none !important; /* No pulse for admin button */
}

.action-btn-forest .action-btn-icon {
    filter:
        drop-shadow(0 0 10px rgba(168, 213, 186, 0.8))
        drop-shadow(0 0 15px rgba(139, 195, 160, 0.5))
        drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8)) !important;
}

.action-btn-forest:hover {
    box-shadow:
        0 0 25px rgba(168, 213, 186, 0.7),
        0 0 50px rgba(139, 195, 160, 0.4),
        0 0 75px rgba(107, 142, 78, 0.2),
        0 8px 25px rgba(0, 0, 0, 0.7),
        0 4px 15px rgba(0, 0, 0, 0.5),
        inset 0 0 30px rgba(168, 213, 186, 0.25) !important;
}

/* WOOD VARIANT (Logout) - warm amber embers */
.action-btn-wood {
    border-color: #b8956a !important;

    box-shadow:
        /* Warm amber glow */
        0 0 15px rgba(255, 178, 102, 0.5),
        0 0 30px rgba(255, 152, 51, 0.3),
        0 0 45px rgba(204, 119, 34, 0.15),
        0 6px 20px rgba(0, 0, 0, 0.6),
        0 3px 10px rgba(0, 0, 0, 0.4),
        inset 0 0 20px rgba(255, 178, 102, 0.15) !important;

    animation: none !important; /* No pulse for logout button */
}

.action-btn-wood .action-btn-icon {
    filter:
        drop-shadow(0 0 8px rgba(255, 178, 102, 0.6))
        drop-shadow(0 0 12px rgba(255, 152, 51, 0.4))
        drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8)) !important;
}

.action-btn-wood:hover {
    box-shadow:
        0 0 25px rgba(255, 178, 102, 0.7),
        0 0 50px rgba(255, 152, 51, 0.4),
        0 0 75px rgba(204, 119, 34, 0.2),
        0 8px 25px rgba(0, 0, 0, 0.7),
        0 4px 15px rgba(0, 0, 0, 0.5),
        inset 0 0 30px rgba(255, 178, 102, 0.25) !important;
}

/* MOBILE OPTIMIZATIONS */
@media (max-width: 640px) {
    .action-buttons {
        gap: 12px !important;
        padding: 0 12px !important;
    }

    .action-btn {
        min-width: 100px !important;
        padding: 14px 16px !important;
    }

    .action-btn-icon {
        font-size: 1.75rem !important;
    }

    .action-btn-label {
        font-size: 0.85rem !important;
        letter-spacing: 0.5px !important;
    }
}

/* Nail details */
.wood-plank::after {
    content: '⚫ ⚫';
    position: absolute;
    top: 8px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 0.5rem;
    color: #1c0a00;
    opacity: 0.6;
    letter-spacing: 120px;
}

/* Burnt wood text */
.burnt-text {
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: 4px;
    color: #2d1b00;
    text-shadow: 
        2px 2px 4px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(255, 111, 0, 0.3);
    margin-bottom: 2px;
    font-family: 'Arial Black', sans-serif;
}

.wood-subtitle {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 2px;
    color: #5d4037;
    text-transform: uppercase;
}

/* Gentle sway animation */
@keyframes rope-sway {
    0%, 100% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(3deg);
    }
}

@keyframes sign-sway {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-1deg);
    }
    75% {
        transform: rotate(1deg);
    }
}

/* Mobile responsive */
@media (max-width: 768px) {
    .burnt-text {
        font-size: 1.5rem;
        letter-spacing: 2px;
    }
    
    .wood-plank {
        padding: 12px 32px;
    }
    
    .wood-subtitle {
        font-size: 0.65rem;
    }
}

/* ================================================
   🎯 DAILY CHALLENGE PANEL - CARVED WOOD SIGN
   Hanging wooden sign with carved text effect
   Optimized for mobile devices
   ================================================ */

.daily-challenge-panel {
    /* Use CSS containment for better performance */
    contain: layout style paint;
    /* Use GPU acceleration for transforms */
    will-change: auto;
    /* Optimize rendering */
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    /* Font matching main app */
    font-family: Georgia, serif;
    /* Mobile optimization - reduce padding on container */
    padding: 0 8px;
}

/* Ensure smooth container rendering */
#dailyChallengeContainer {
    /* Prevent layout shift during async load */
    contain: layout;
    /* Smooth transition when content loads */
    transition: min-height 0.3s ease-out;
    /* NO min-height - prevents empty space when no challenge exists */
}

/* Mobile Responsive Optimizations */
@media (max-width: 640px) {
    #dailyChallengeContainer {
        /* NO min-height on mobile either */
    }

    .daily-challenge-panel {
        padding: 0 4px;
    }
}

/* Carved text effect helper class */
.carved-text {
    text-shadow:
        inset -1px -1px 0 rgba(0, 0, 0, 0.8),
        inset 1px 1px 0 rgba(0, 0, 0, 0.6),
        1px 1px 2px rgba(0, 0, 0, 0.9);
}

/* Burnt text effect helper class */
.burnt-text {
    color: #d4a574;
    text-shadow:
        inset -1px -1px 0 rgba(0, 0, 0, 0.8),
        inset 1px 1px 0 rgba(0, 0, 0, 0.6),
        1px 1px 2px rgba(0, 0, 0, 0.9);
}

/* 3D Wood depth effect */
.wood-depth {
    box-shadow:
        0 8px 16px rgba(0, 0, 0, 0.6),
        inset 0 2px 4px rgba(80, 54, 40, 0.3),
        inset 0 -2px 4px rgba(0, 0, 0, 0.8);
}

/* ============================================
   BOTTOM NAVIGATION - Main (Tailwind Replacement)
   ============================================ */
.bottom-nav--main {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, #1c1917, #1c1917, rgba(28, 25, 23, 0.95));
    border-top: 2px solid rgba(146, 64, 14, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 40;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.bottom-nav--main > div {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0.5rem;
    max-width: 28rem;
    margin: 0 auto;
}

.bottom-nav--main button {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.125rem;
    border-radius: 0.5rem;
    transition: all 150ms ease;
    touch-action: manipulation;
    position: relative;
    background: transparent;
    border: none;
    cursor: pointer;
}

.bottom-nav--main button.text-amber-500 {
    color: #f59e0b !important;
    background-color: rgba(120, 53, 15, 0.3) !important;
}

.bottom-nav--main button.text-stone-400 {
    color: #a8a29e !important;
}

.bottom-nav--main button:active {
    color: #fbbf24 !important;
}

/* ============================================
   🔥 ADMIN MINI PANEL - Forged Iron & Ember
   Dark fantasy command center aesthetic
   ============================================ */

/* --- Overlay & Panel Shell --- */
.adm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(5, 2, 0, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    z-index: 50;
    padding: 0.75rem;
    overflow-y: auto;
    animation: admFadeIn 0.25s ease-out;
}

.adm-panel {
    background:
        linear-gradient(168deg, #1a0e08 0%, #120b06 40%, #1a0e08 100%);
    border-radius: 1rem;
    box-shadow:
        0 0 0 1px rgba(220, 120, 40, 0.15),
        0 0 40px rgba(180, 60, 10, 0.08),
        0 20px 60px rgba(0, 0, 0, 0.7),
        inset 0 1px 0 rgba(255, 200, 120, 0.04);
    padding: 1.25rem;
    padding-bottom: 5rem;
    max-width: 38rem;
    width: 100%;
    position: relative;
    animation: admSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    margin: 1rem 0;
    border: 2px solid rgba(160, 60, 20, 0.35);
}

.adm-accent-bar {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    border-radius: 1rem 1rem 0 0;
    background: linear-gradient(90deg,
        #7c2d12 0%, #dc2626 25%, #f59e0b 50%, #dc2626 75%, #7c2d12 100%);
    opacity: 0.85;
}

/* --- Typography --- */
.adm-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: #fde4ce;
    letter-spacing: 0.03em;
    margin-bottom: 0.15rem;
}

.adm-subtitle {
    font-size: 0.7rem;
    color: #b8826a;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* --- Login Form --- */
.adm-password-input {
    width: 100%;
    padding: 0.85rem 1.1rem;
    font-size: 1rem;
    font-weight: 700;
    border: 2px solid #7c2d12;
    border-radius: 0.6rem;
    background: rgba(69, 10, 10, 0.35);
    color: #fde4ce;
    margin-bottom: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.adm-password-input::placeholder { color: #9a6050; }
.adm-password-input:focus {
    outline: none;
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.adm-btn-cancel,
.adm-btn-login {
    flex: 1;
    padding: 0.85rem 1rem;
    font-weight: 800;
    border-radius: 0.6rem;
    cursor: pointer;
    transition: all 0.2s;
    touch-action: manipulation;
    font-size: 0.9rem;
}

.adm-btn-cancel {
    background: linear-gradient(180deg, #3b3530 0%, #252220 100%);
    color: #c8c0b8;
    border: 2px solid #504840;
}
.adm-btn-cancel:hover { background: linear-gradient(180deg, #4a4540 0%, #352f2a 100%); }

.adm-btn-login {
    background: linear-gradient(180deg, #c53030 0%, #9b2020 100%);
    color: #fff;
    border: 2px solid #e53e3e;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.adm-btn-login:hover {
    background: linear-gradient(180deg, #d64040 0%, #b52828 100%);
    box-shadow: 0 0 16px rgba(220, 50, 50, 0.3);
}

/* --- Dashboard Card (Indigo/Purple) --- */
.adm-dashboard-card {
    background: linear-gradient(135deg, #1e1650 0%, #2d1560 60%, #1a1040 100%);
    border: 2px solid rgba(99, 80, 230, 0.4);
    border-radius: 0.85rem;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    overflow: hidden;
    box-shadow:
        0 0 20px rgba(99, 80, 230, 0.06),
        inset 0 1px 0 rgba(160, 140, 255, 0.06);
}

.adm-dashboard-title {
    font-size: 1.15rem;
    font-weight: 900;
    color: #e0e7ff;
    margin-bottom: 0.15rem;
}

.adm-dashboard-desc {
    font-size: 0.82rem;
    color: #a5b4fc;
}

.adm-dashboard-link {
    display: block;
    width: auto;
    margin: 0 -1.25rem -1.25rem;
    padding: 0.85rem 1rem;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    color: #fff;
    font-weight: 800;
    font-size: 0.95rem;
    text-align: center;
    text-decoration: none;
    border-radius: 0 0 0.65rem 0.65rem;
    transition: all 0.25s;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.25);
}
.adm-dashboard-link:hover {
    background: linear-gradient(135deg, #4338ca 0%, #6d28d9 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 22px rgba(79, 70, 229, 0.35);
}

/* --- Quick Access Label --- */
.adm-quick-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: #d4a888;
    margin-bottom: 0.5rem;
    letter-spacing: 0.02em;
}

/* --- Tabs Row --- */
.adm-tabs-row {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 1rem;
    overflow-x: auto;
    padding-bottom: 0.4rem;
    scrollbar-width: none;
}
.adm-tabs-row::-webkit-scrollbar { display: none; }

/* --- Tab Buttons --- */
.admin-tab-btn {
    flex: 1;
    min-width: 70px;
    padding: 0.55rem 0.45rem;
    border-radius: 0.5rem;
    font-weight: 700;
    font-size: 0.72rem;
    line-height: 1;
    transition: all 180ms ease;
    border: 1.5px solid rgba(120, 100, 80, 0.25);
    touch-action: manipulation;
    cursor: pointer;
    background: linear-gradient(180deg, #221c18 0%, #181410 100%);
    color: #8a7e74;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        0 2px 6px rgba(0, 0, 0, 0.35);
    white-space: nowrap;
}

.admin-tab-btn:hover {
    background: linear-gradient(180deg, #302820 0%, #221c18 100%);
    border-color: rgba(160, 130, 100, 0.3);
    color: #c8beb4;
}

.admin-tab-btn.admin-tab-active {
    background: linear-gradient(180deg, #b91c1c 0%, #8b1515 100%);
    color: #fff;
    border-color: rgba(239, 68, 68, 0.6);
    box-shadow:
        0 0 14px rgba(220, 38, 38, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 2px 6px rgba(0, 0, 0, 0.4);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* --- Close Button --- */
.admin-close-btn {
    width: 100%;
    padding: 0.75rem 1rem;
    font-weight: 700;
    font-size: 0.85rem;
    border-radius: 0.5rem;
    border: 1.5px solid rgba(120, 100, 80, 0.25);
    touch-action: manipulation;
    cursor: pointer;
    background: linear-gradient(180deg, #302a24 0%, #1c1814 100%);
    color: #b0a89e;
    transition: all 200ms ease;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.admin-close-btn:hover {
    background: linear-gradient(180deg, #40382e 0%, #2a241e 100%);
    color: #d8d0c8;
    border-color: rgba(160, 130, 100, 0.35);
}

.admin-close-btn:active { transform: translateY(1px); }

/* --- Section Cards (Users, Challenges, Actions) --- */
.adm-section {
    border-radius: 0.75rem;
    padding: 0.85rem;
    border: 1.5px solid rgba(160, 60, 20, 0.2);
    background: rgba(20, 14, 10, 0.6);
}

.adm-section--users {
    max-height: 60vh;
    overflow-y: auto;
    border-color: rgba(180, 80, 40, 0.25);
}

.adm-section--challenges {
    border-color: rgba(124, 58, 237, 0.25);
    background: rgba(30, 16, 50, 0.4);
}

.adm-section--actions {
    border-color: rgba(234, 88, 12, 0.25);
    background: rgba(40, 20, 8, 0.4);
}

.adm-section-header {
    font-size: 0.95rem;
    font-weight: 800;
    color: #fde4ce;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.adm-section-header--purple { color: #e8dff8; }
.adm-section-header--orange { color: #fde4ce; }

.adm-section-count {
    font-size: 0.78rem;
    color: #b8826a;
    font-weight: 600;
}

/* --- User List --- */
.adm-user-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.adm-user-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.65rem;
    border-radius: 0.5rem;
    background: rgba(28, 22, 18, 0.7);
    border: 1px solid rgba(120, 80, 50, 0.15);
    transition: background 0.15s;
}
.adm-user-row:hover { background: rgba(40, 30, 22, 0.8); }

.adm-user-row--self {
    background: rgba(22, 78, 40, 0.2);
    border-color: rgba(34, 197, 94, 0.25);
}

.adm-user-name {
    font-weight: 700;
    font-size: 0.78rem;
    color: #e8d8c8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.adm-user-name--self { color: #86efac; }

.adm-user-status {
    font-size: 0.68rem;
    color: #6ac88a;
}

.adm-user-age {
    font-size: 0.68rem;
    color: #b8826a;
}

.adm-age--fresh { color: #4ade80; }
.adm-age--mid   { color: #fb923c; }
.adm-age--old   { color: #f87171; }

.adm-btn-delete {
    background: linear-gradient(180deg, #991b1b 0%, #7f1d1d 100%);
    color: #fff;
    padding: 0.3rem 0.6rem;
    border-radius: 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    border: 1px solid rgba(239, 68, 68, 0.35);
    cursor: pointer;
    flex-shrink: 0;
    touch-action: manipulation;
    transition: all 0.15s;
}
.adm-btn-delete:hover {
    background: linear-gradient(180deg, #b91c1c 0%, #991b1b 100%);
    box-shadow: 0 0 10px rgba(220, 38, 38, 0.25);
}

/* --- Action Buttons --- */
.adm-actions-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.adm-btn-action {
    width: 100%;
    padding: 0.8rem 1rem;
    font-weight: 700;
    font-size: 0.82rem;
    border-radius: 0.5rem;
    cursor: pointer;
    touch-action: manipulation;
    transition: all 0.2s;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

.adm-btn-action--warning {
    background: linear-gradient(180deg, #c2410c 0%, #9a3412 100%);
    border: 2px solid rgba(234, 88, 12, 0.5);
}
.adm-btn-action--warning:hover {
    background: linear-gradient(180deg, #d84e14 0%, #b94518 100%);
    box-shadow: 0 0 14px rgba(234, 88, 12, 0.2);
}

.adm-btn-action--danger {
    background: linear-gradient(180deg, #b91c1c 0%, #7f1d1d 100%);
    border: 2px solid rgba(185, 28, 28, 0.5);
}
.adm-btn-action--danger:hover {
    background: linear-gradient(180deg, #d02828 0%, #991b1b 100%);
    box-shadow: 0 0 14px rgba(220, 38, 38, 0.2);
}

.adm-warning-banner {
    margin-top: 0.65rem;
    padding: 0.65rem;
    background: rgba(69, 10, 10, 0.25);
    border: 1px solid rgba(185, 28, 28, 0.25);
    border-radius: 0.5rem;
    font-size: 0.7rem;
    color: #f0a0a0;
}

/* --- Loading & Empty States --- */
.adm-loading-text {
    text-align: center;
    font-size: 0.82rem;
    color: #8a7e74;
    padding: 0.5rem 0;
}

.adm-empty-text {
    text-align: center;
    font-size: 0.82rem;
    color: #8a6e5a;
    padding: 1rem 0;
}

/* --- Animations --- */
@keyframes admFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes admSlideIn {
    from { opacity: 0; transform: translateY(-12px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- Theme Tab --- */
.adm-theme-card {
    background: linear-gradient(135deg, #1e1650 0%, #2d1560 60%, #1a1040 100%);
    border: 2px solid rgba(79, 70, 229, 0.4);
    border-radius: 0.75rem;
    padding: 1rem;
    margin-bottom: 0.75rem;
}

.adm-theme-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.adm-theme-label { font-size: 0.7rem; color: #a5b4fc; margin-bottom: 0.2rem; }
.adm-theme-name { font-size: 1.1rem; font-weight: 800; color: #e0e7ff; }

.adm-theme-mode-btn {
    padding: 0.45rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    border: 2px solid;
    cursor: pointer;
    transition: all 0.2s;
}

.adm-theme-mode-btn--auto {
    background: linear-gradient(180deg, #16a34a 0%, #15803d 100%);
    border-color: #14532d;
    color: #fff;
}

.adm-theme-mode-btn--manual {
    background: linear-gradient(180deg, #3b3530 0%, #252220 100%);
    border-color: #504840;
    color: #c8c0b8;
}

.adm-theme-sun-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    text-align: center;
    font-size: 0.72rem;
}

.adm-theme-sun-cell {
    padding: 0.5rem;
    border-radius: 0.4rem;
    border: 1px solid;
}

.adm-theme-sun-cell--sunrise {
    background: rgba(124, 45, 18, 0.25);
    border-color: rgba(194, 65, 12, 0.35);
}

.adm-theme-sun-cell--sunset {
    background: rgba(88, 28, 135, 0.25);
    border-color: rgba(124, 58, 237, 0.35);
}

.adm-theme-sun-label--sunrise { color: #fb923c; margin-bottom: 0.15rem; }
.adm-theme-sun-value--sunrise { font-weight: 700; color: #fed7aa; }
.adm-theme-sun-label--sunset  { color: #c084fc; margin-bottom: 0.15rem; }
.adm-theme-sun-value--sunset  { font-weight: 700; color: #e9d5ff; }

.adm-theme-location { margin-top: 0.5rem; font-size: 0.7rem; color: #a5b4fc; text-align: center; }

.adm-theme-info-box {
    border-radius: 0.5rem;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
    border: 1px solid rgba(37, 99, 235, 0.25);
    background: rgba(23, 37, 84, 0.25);
}

.adm-theme-info-text { font-size: 0.72rem; color: #bfdbfe; }

.adm-theme-grid {
    border-radius: 0.75rem;
    padding: 0.85rem;
    margin-bottom: 0.75rem;
    border: 1.5px solid rgba(120, 100, 80, 0.2);
    background: rgba(12, 10, 9, 0.5);
}

.adm-theme-grid-title { font-size: 0.82rem; font-weight: 700; color: #e8d8c8; margin-bottom: 0.65rem; }

.adm-theme-grid-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.adm-theme-option {
    padding: 0.75rem;
    border-radius: 0.5rem;
    border: 2px solid;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    touch-action: manipulation;
    background: none;
}

.adm-theme-option--active {
    background: linear-gradient(180deg, #4f46e5 0%, #4338ca 100%);
    border-color: rgba(99, 102, 241, 0.6);
    color: #fff;
    transform: scale(1.03);
    box-shadow: 0 0 12px rgba(79, 70, 229, 0.25);
}

.adm-theme-option--inactive {
    background: linear-gradient(180deg, #2a2520 0%, #1c1814 100%);
    border-color: rgba(120, 100, 80, 0.25);
    color: #b0a89e;
}

.adm-theme-option--inactive:hover {
    background: linear-gradient(180deg, #352f28 0%, #252018 100%);
    color: #d8d0c8;
}

.adm-theme-tip {
    border-radius: 0.5rem;
    padding: 0.75rem;
    border: 1px solid rgba(161, 98, 7, 0.25);
    background: rgba(66, 32, 6, 0.25);
}

.adm-theme-tip-text { font-size: 0.72rem; color: #fef08a; }

/* --- Stats Tab --- */
.adm-stats-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.adm-stats-title { font-size: 0.95rem; font-weight: 700; color: #bfdbfe; }

.adm-stats-refresh {
    background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
    color: #fff;
    padding: 0.3rem 0.75rem;
    border-radius: 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: all 0.15s;
}

.adm-stats-refresh:hover {
    background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
    box-shadow: 0 0 10px rgba(37, 99, 235, 0.25);
}

.adm-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.adm-stat-card { border-radius: 0.5rem; padding: 0.75rem; border: 2px solid; }
.adm-stat-card--blue   { background: linear-gradient(to bottom right, #1e3a5f, #172554); border-color: #1d4ed8; }
.adm-stat-card--green  { background: linear-gradient(to bottom right, #14532d, #052e16); border-color: #15803d; }
.adm-stat-card--purple { background: linear-gradient(to bottom right, #581c87, #2e1065); border-color: #7c3aed; }
.adm-stat-card--orange { background: linear-gradient(to bottom right, #7c2d12, #431407); border-color: #c2410c; }

.adm-stat-label { font-size: 0.7rem; margin-bottom: 0.2rem; }
.adm-stat-label--blue    { color: #93c5fd; }
.adm-stat-label--green   { color: #86efac; }
.adm-stat-label--purple  { color: #d8b4fe; }
.adm-stat-label--orange  { color: #fdba74; }

.adm-stat-value { font-size: 1.5rem; font-weight: 900; }
.adm-stat-value--blue    { color: #dbeafe; }
.adm-stat-value--green   { color: #dcfce7; }
.adm-stat-value--purple  { color: #f3e8ff; }
.adm-stat-value--orange  { color: #ffedd5; }

.adm-stats-section { border-radius: 0.5rem; padding: 0.75rem; border: 2px solid; margin-bottom: 0.75rem; }
.adm-stats-section--emerald { background: rgba(2, 44, 34, 0.4); border-color: rgba(4, 120, 87, 0.4); }
.adm-stats-section--yellow  { background: rgba(66, 32, 6, 0.4); border-color: rgba(161, 98, 7, 0.4); }
.adm-stats-section--purple  { background: rgba(46, 16, 74, 0.4); border-color: rgba(124, 58, 237, 0.4); }
.adm-stats-section--red     { background: rgba(69, 10, 10, 0.4); border-color: rgba(185, 28, 28, 0.4); }

.adm-stats-section-title { font-size: 0.82rem; font-weight: 700; margin-bottom: 0.5rem; }
.adm-stats-section-title--emerald { color: #d1fae5; }
.adm-stats-section-title--yellow  { color: #fef9c3; }
.adm-stats-section-title--purple  { color: #f3e8ff; }
.adm-stats-section-title--red     { color: #fde4ce; }

.adm-stats-mini-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.5rem; text-align: center; }

.adm-stats-mini-value { font-size: 1.05rem; font-weight: 700; }
.adm-stats-mini-label { font-size: 0.68rem; }

.adm-stats-mini-value--emerald { color: #a7f3d0; }
.adm-stats-mini-label--emerald { color: #34d399; }
.adm-stats-mini-value--yellow  { color: #fef08a; }
.adm-stats-mini-label--yellow  { color: #facc15; }

.adm-stats-challenge-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.75rem; padding: 0.15rem 0; }
.adm-stats-challenge-label { color: #d8b4fe; }
.adm-stats-challenge-value { font-weight: 700; color: #f3e8ff; }

.adm-stats-species-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0; font-size: 0.75rem; }
.adm-stats-species-rank { font-weight: 700; min-width: 1.5rem; color: #b8826a; }
.adm-stats-species-name { flex: 1; color: #fde4ce; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-stats-species-count { font-weight: 700; color: #86efac; }

/* --- Responsive --- */
@media (min-width: 768px) {
    .adm-overlay { padding: 1.25rem; }
    .adm-panel { padding: 1.75rem; border-radius: 1.25rem; }
    .adm-accent-bar { height: 4px; }
    .adm-title { font-size: 1.5rem; }
    .admin-close-btn { padding: 1rem; border-radius: 0.65rem; }
    .adm-section { padding: 1.1rem; }
    .adm-user-row { padding: 0.65rem 0.85rem; }
    .adm-btn-action { padding: 0.9rem 1rem; font-size: 0.88rem; }
}

/* ============================================
   Admin Card - Dark Glassmorphism
   ============================================ */
.admin-card {
    background: linear-gradient(145deg, rgba(25, 22, 20, 0.97), rgba(15, 12, 10, 0.99));
    border: 1px solid rgba(168, 162, 158, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

/* ============================================
   Custom Tailwind Opacity & Color Utilities
   (App-wide: weather, map, activity-feed, stats,
    backpack, admin, challenges, species, badges)
   DO NOT REMOVE - Tailwind build doesn't generate
   opacity variants like bg-*/30, border-*/50 etc.
   ============================================ */
.bg-red-950\/50   { background-color: rgba(69, 10, 10, 0.5); }
.bg-red-900\/20   { background-color: rgba(127, 29, 29, 0.2); }
.bg-stone-950\/50 { background-color: rgba(12, 10, 9, 0.5); }
.bg-stone-900\/50 { background-color: rgba(28, 25, 23, 0.5); }
.bg-green-900\/30 { background-color: rgba(20, 83, 45, 0.3); }
.bg-purple-950\/50 { background-color: rgba(46, 16, 74, 0.5); }
.bg-orange-950\/50 { background-color: rgba(67, 20, 7, 0.5); }
.bg-emerald-950\/50 { background-color: rgba(2, 44, 34, 0.5); }
.bg-yellow-950\/50 { background-color: rgba(66, 32, 6, 0.5); }
.bg-blue-950      { background-color: #172554; }
.bg-green-950     { background-color: #052e16; }
.bg-purple-950    { background-color: #2e1065; }
.bg-orange-950    { background-color: #431407; }

.border-red-800\/50   { border-color: rgba(153, 27, 27, 0.5); }
.border-red-700\/50   { border-color: rgba(185, 28, 28, 0.5); }
.border-red-700\/30   { border-color: rgba(185, 28, 28, 0.3); }
.border-green-600\/50 { border-color: rgba(22, 163, 74, 0.5); }
.border-purple-700\/50 { border-color: rgba(124, 58, 237, 0.5); }
.border-orange-700\/50 { border-color: rgba(194, 65, 12, 0.5); }
.border-emerald-700\/50 { border-color: rgba(4, 120, 87, 0.5); }
.border-yellow-700\/50 { border-color: rgba(161, 98, 7, 0.5); }

.from-blue-900  { --tw-gradient-from: #1e3a5f; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(30, 58, 95, 0)); }
.from-blue-950  { --tw-gradient-from: #172554; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(23, 37, 84, 0)); }
.to-blue-950    { --tw-gradient-to: #172554; }
.from-green-900 { --tw-gradient-from: #14532d; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(20, 83, 45, 0)); }
.from-green-950 { --tw-gradient-from: #052e16; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(5, 46, 22, 0)); }
.to-green-950   { --tw-gradient-to: #052e16; }
.from-purple-900 { --tw-gradient-from: #581c87; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(88, 28, 135, 0)); }
.from-purple-950 { --tw-gradient-from: #2e1065; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(46, 16, 74, 0)); }
.to-purple-950   { --tw-gradient-to: #2e1065; }
.from-orange-900 { --tw-gradient-from: #7c2d12; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(124, 45, 18, 0)); }
.from-orange-950 { --tw-gradient-from: #431407; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(67, 20, 7, 0)); }
.to-orange-950   { --tw-gradient-to: #431407; }

.from-orange-600 { --tw-gradient-from: #ea580c; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(234, 88, 12, 0)); }
.to-orange-700   { --tw-gradient-to: #c2410c; }
.from-orange-700 { --tw-gradient-from: #c2410c; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(194, 65, 12, 0)); }
.to-orange-800   { --tw-gradient-to: #9a3412; }
.from-red-700    { --tw-gradient-from: #b91c1c; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(185, 28, 28, 0)); }
.to-red-800      { --tw-gradient-to: #991b1b; }
.from-red-800    { --tw-gradient-from: #991b1b; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(153, 27, 27, 0)); }

.hover\:from-orange-700:hover { --tw-gradient-from: #c2410c; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(194, 65, 12, 0)); }
.hover\:to-orange-800:hover   { --tw-gradient-to: #9a3412; }
.hover\:from-red-800:hover    { --tw-gradient-from: #991b1b; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(153, 27, 27, 0)); }
.hover\:to-red-900:hover      { --tw-gradient-to: #7f1d1d; }

.border-orange-800 { border-color: #9a3412; }
.border-red-900    { border-color: #7f1d1d; }

.text-blue-100    { color: #dbeafe; }
.text-blue-300    { color: #93c5fd; }
.text-green-100   { color: #dcfce7; }
.text-green-300   { color: #86efac; }
.text-orange-100  { color: #ffedd5; }
.text-orange-300  { color: #fdba74; }
.text-emerald-100 { color: #d1fae5; }
.text-emerald-200 { color: #a7f3d0; }
.text-emerald-300 { color: #6ee7b7; }
.text-emerald-400 { color: #34d399; }
.text-yellow-100  { color: #fef9c3; }
.text-yellow-200  { color: #fef08a; }
.text-yellow-400  { color: #facc15; }

.border-blue-700    { border-color: #1d4ed8; }
.border-green-700   { border-color: #15803d; }
.border-emerald-700 { border-color: #047857; }
.border-yellow-700  { border-color: #a16207; }

/* ============================================
   Challenge Section - Purple Theme Override
   ============================================ */

/* Warning Banner (No active challenge) */
#adminChallengeSection .bg-orange-900\/20,
#adminChallengeSection [class*="bg-orange-900"] {
    background: linear-gradient(135deg, rgba(124, 45, 18, 0.25) 0%, rgba(80, 30, 12, 0.3) 100%) !important;
    border-color: #c2410c !important;
}

#adminChallengeSection .text-orange-300,
#adminChallengeSection [class*="text-orange-300"] {
    color: #fdba74 !important;
}

/* Active Challenge Card */
#adminChallengeSection .bg-purple-900\/30,
#adminChallengeSection [class*="bg-purple-900\/30"] {
    background: linear-gradient(135deg, rgba(88, 28, 135, 0.35) 0%, rgba(59, 22, 99, 0.4) 100%) !important;
}

/* Create Challenge Button */
#adminChallengeSection .bg-purple-900\/50,
#adminChallengeSection [class*="bg-purple-900\/50"],
#adminChallengeSection button[class*="bg-purple-900"] {
    background: linear-gradient(180deg, rgba(88, 28, 135, 0.6) 0%, rgba(59, 22, 99, 0.7) 100%) !important;
    border-color: #7c3aed !important;
}

#adminChallengeSection .bg-purple-900\/50:hover,
#adminChallengeSection button[class*="bg-purple-900"]:hover {
    background: linear-gradient(180deg, rgba(109, 40, 166, 0.7) 0%, rgba(76, 29, 128, 0.8) 100%) !important;
}

/* History Button */
#adminChallengeSection .bg-purple-900\/30[class*="hover"],
#adminChallengeSection [class*="bg-purple-900\/30"] {
    background: linear-gradient(180deg, rgba(88, 28, 135, 0.35) 0%, rgba(59, 22, 99, 0.4) 100%) !important;
    border-color: rgba(124, 58, 237, 0.5) !important;
}

/* Form Container */
#adminChallengeSection .bg-purple-950\/30,
#adminChallengeSection [class*="bg-purple-950"] {
    background: linear-gradient(135deg, rgba(46, 16, 74, 0.4) 0%, rgba(30, 10, 50, 0.5) 100%) !important;
    border-color: rgba(124, 58, 237, 0.4) !important;
}

/* Text Colors for Purple Theme */
#adminChallengeSection .text-purple-100,
#adminChallengeSection [class*="text-purple-100"] {
    color: #ede9fe !important;
}

#adminChallengeSection .text-purple-200,
#adminChallengeSection [class*="text-purple-200"] {
    color: #ddd6fe !important;
}

#adminChallengeSection .text-purple-300,
#adminChallengeSection [class*="text-purple-300"] {
    color: #c4b5fd !important;
}

#adminChallengeSection .text-purple-400,
#adminChallengeSection [class*="text-purple-400"] {
    color: #a78bfa !important;
}

/* Input Fields in Admin */
#adminChallengeSection input,
#adminChallengeSection textarea,
#adminChallengeSection select,
#adminTabContent input,
#adminTabContent textarea,
#adminTabContent select {
    background: linear-gradient(180deg, #1c1917 0%, #0f0d0c 100%) !important;
    color: #e7e5e4 !important;
    border: 2px solid #44403c !important;
}

#adminChallengeSection input:focus,
#adminChallengeSection textarea:focus,
#adminChallengeSection select:focus,
#adminTabContent input:focus,
#adminTabContent textarea:focus,
#adminTabContent select:focus {
    border-color: #7c3aed !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2) !important;
    outline: none !important;
}

#adminChallengeSection input::placeholder,
#adminChallengeSection textarea::placeholder {
    color: #78716c !important;
}

/* History Items */
#adminChallengeSection .bg-stone-900\/50,
#adminChallengeSection [class*="bg-stone-900"] {
    background: linear-gradient(135deg, rgba(28, 25, 23, 0.6) 0%, rgba(15, 13, 12, 0.7) 100%) !important;
}

/* Border Colors */
#adminChallengeSection .border-purple-600,
#adminChallengeSection [class*="border-purple-600"] {
    border-color: #9333ea !important;
}

#adminChallengeSection .border-purple-700,
#adminChallengeSection [class*="border-purple-700"] {
    border-color: #7c3aed !important;
}

#adminChallengeSection .border-purple-800\/50,
#adminChallengeSection [class*="border-purple-800"] {
    border-color: rgba(107, 33, 168, 0.6) !important;
}

#adminChallengeSection .border-purple-700\/50,
#adminChallengeSection [class*="border-purple-700\/50"] {
    border-color: rgba(124, 58, 237, 0.5) !important;
}

#adminChallengeSection .border-purple-700\/30,
#adminChallengeSection [class*="border-purple-700\/30"] {
    border-color: rgba(124, 58, 237, 0.3) !important;
}

/* ============================================
   Full Admin Dashboard Link (Indigo/Purple)
   ============================================ */
.bg-gradient-to-r.from-indigo-900.to-purple-900,
[class*="from-indigo-900"][class*="to-purple-900"] {
    background: linear-gradient(135deg, #312e81 0%, #581c87 100%) !important;
    border-color: #4f46e5 !important;
}

.bg-gradient-to-r.from-indigo-600.to-purple-600,
[class*="from-indigo-600"][class*="to-purple-600"] {
    background: linear-gradient(90deg, #4f46e5 0%, #9333ea 100%) !important;
}

.bg-gradient-to-r.from-indigo-600.to-purple-600:hover,
[class*="from-indigo-600"][class*="to-purple-600"]:hover {
    background: linear-gradient(90deg, #4338ca 0%, #7c3aed 100%) !important;
}

/* Indigo Text Colors */
.text-indigo-100,
[class*="text-indigo-100"] {
    color: #e0e7ff !important;
}

.text-indigo-300,
[class*="text-indigo-300"] {
    color: #a5b4fc !important;
}

/* ============================================
   Action Buttons in Admin
   ============================================ */
#adminTabContent .bg-red-600,
#adminTabContent [class*="bg-red-600"] {
    background: linear-gradient(180deg, #dc2626 0%, #b91c1c 100%) !important;
}

#adminTabContent .bg-green-600,
#adminTabContent [class*="bg-green-600"] {
    background: linear-gradient(180deg, #16a34a 0%, #15803d 100%) !important;
}

#adminTabContent .bg-blue-600,
#adminTabContent [class*="bg-blue-600"] {
    background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%) !important;
}

#adminTabContent .bg-purple-600,
#adminTabContent [class*="bg-purple-600"] {
    background: linear-gradient(180deg, #9333ea 0%, #7c3aed 100%) !important;
}

/* Close Button */
#app button.bg-stone-700,
button[class*="bg-stone-700"] {
    background: linear-gradient(180deg, #44403c 0%, #292524 100%) !important;
    border-color: #57534e !important;
    color: #d6d3d1 !important;
}

#app button.bg-stone-700:hover,
button[class*="bg-stone-700"]:hover {
    background: linear-gradient(180deg, #57534e 0%, #3d3630 100%) !important;
}

/* ============================================
   Slate Colors for Users Tab
   ============================================ */
.bg-slate-900,
[class*="bg-slate-900"] {
    background-color: #0f172a !important;
}

.bg-slate-900\/50,
[class*="bg-slate-900\/50"] {
    background-color: rgba(15, 23, 42, 0.5) !important;
}

.bg-slate-900\/30,
[class*="bg-slate-900\/30"] {
    background-color: rgba(15, 23, 42, 0.3) !important;
}

.bg-slate-800\/30,
[class*="bg-slate-800\/30"] {
    background-color: rgba(30, 41, 59, 0.3) !important;
}

.bg-slate-800\/10,
[class*="bg-slate-800\/10"] {
    background-color: rgba(30, 41, 59, 0.1) !important;
}

.bg-slate-700\/30,
[class*="bg-slate-700\/30"] {
    background-color: rgba(51, 65, 85, 0.3) !important;
}

.text-slate-100,
[class*="text-slate-100"] {
    color: #f1f5f9 !important;
}

.text-slate-200,
[class*="text-slate-200"] {
    color: #e2e8f0 !important;
}

.text-slate-300,
[class*="text-slate-300"] {
    color: #cbd5e1 !important;
}

.text-slate-400,
[class*="text-slate-400"] {
    color: #94a3b8 !important;
}

.border-slate-600,
[class*="border-slate-600"] {
    border-color: #475569 !important;
}

.border-slate-700,
[class*="border-slate-700"] {
    border-color: #334155 !important;
}