/**
 * Christmas Branding Styles for EVE AI
 * Active from December 15 - January 1
 * Subtle festive decorations for both dark and light themes
 *
 * Christmas theme variables (--christmas-*) are defined in
 * /static/css/theme-variables.css for centralized management.
 */

/* Import centralized theme variables (includes Christmas theme) */
@import url('/static/css/theme-variables.css');

/* ============================================
   Santa Hat on Logo
   ============================================ */
body.christmas-mode .logo {
    position: relative;
}

body.christmas-mode .logo-img {
    position: relative;
}

/* Santa hat container positioned over logo */
body.christmas-mode .logo::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 2px;
    width: 22px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24'%3E%3C!-- Hat body --%3E%3Cpath d='M4 20 Q2 18 4 14 L12 8 Q16 4 20 6 L26 12 Q30 16 28 20 Z' fill='%23C0392B'/%3E%3C!-- Hat fur trim --%3E%3Cellipse cx='16' cy='21' rx='14' ry='3' fill='%23ECF0F1'/%3E%3C!-- Hat tip curl --%3E%3Cpath d='M20 6 Q24 2 28 6 Q30 10 26 12' fill='%23C0392B' stroke='none'/%3E%3C!-- Pompom --%3E%3Ccircle cx='28' cy='8' r='4' fill='%23ECF0F1'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 10;
    pointer-events: none;
}

/* ============================================
   Snowfall - Disabled
   ============================================ */
body.christmas-mode .snowfall {
    display: none;
}

/* ============================================
   Festive Welcome Message Enhancement
   ============================================ */
/* Welcome title keeps original styling - no gradient override */

/* ============================================
   Subtle Christmas Accents
   ============================================ */

/* Eve badge with festive touch */
body.christmas-mode .eve-badge {
    border-color: var(--christmas-red-light);
}

/* Feature cards with subtle festive border glow on hover */
body.christmas-mode .feature-card:hover {
    border-color: var(--christmas-gold-light);
    box-shadow: 0 0 20px var(--christmas-gold-light);
}

/* New chat button with subtle festive gold glow on hover */
body.christmas-mode .new-chat-btn:hover {
    box-shadow: 0 0 15px var(--christmas-gold-light);
}

/* Primary buttons with Christmas colors */
body.christmas-mode .primary-btn:hover,
body.christmas-mode .send-btn:hover {
    box-shadow: 0 0 15px var(--christmas-red-light);
}

/* ============================================
   Login Page Christmas Styling
   ============================================ */
body.christmas-mode .login-card {
    border-color: var(--christmas-red-light);
}

body.christmas-mode .login-title::after {
    content: ' ';
    display: inline-block;
    margin-left: 8px;
}

/* Social button festive hover */
body.christmas-mode .social-button:hover {
    border-color: var(--christmas-gold-light);
    box-shadow: 0 4px 20px var(--christmas-gold-light);
}

/* ============================================
   Agent Selector Christmas Theme
   ============================================ */
/* Agent button keeps original styling - no gradient override */

/* ============================================
   Sidebar Christmas Decorations
   ============================================ */

/* Christmas tree decoration removed */

/* ============================================
   Chat Message Christmas Styling
   ============================================ */

/* Assistant message with subtle festive glow */
body.christmas-mode .assistant-message {
    border-left: 2px solid var(--christmas-green);
}

/* ============================================
   Christmas Footer Note
   ============================================ */
body.christmas-mode .footer::after {
    content: ' 🎄 | Happy Holidays from ev.energy!';
    color: var(--christmas-gold);
    font-size: 0.85em;
}

/* Light mode footer adjustment */
body.christmas-mode.light-mode .footer::after {
    color: var(--christmas-red);
}

/* ============================================
   Mobile Adjustments
   ============================================ */
@media (max-width: 768px) {
    body.christmas-mode .logo::before {
        width: 18px;
        height: 14px;
        top: -10px;
    }
}