:root {
    --bg-secondary: #f9fafb;
    --text-primary: #111827;
}
html { scroll-behavior: smooth; }
body {
    font-family: 'Cairo', sans-serif;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    overflow: hidden;
}

/* --- Sunny Egyptian Countryside Splash Screen --- */
#splash-screen {
    position: fixed;
    inset: 0;
    z-index: 100;
    overflow: hidden;
    background: linear-gradient(to bottom, #87CEEB, #B0E0E6); /* Bright Sky */
    transition: opacity 2s ease-in-out, visibility 2s;
}
.parallax-layer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 150%;
    height: 100%;
    background-repeat: repeat-x;
    background-position: bottom left;
    animation: pan-scene 15s linear infinite;
}

#sun-day {
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, #FFF7AD, #FFD700);
    border-radius: 50%;
    position: absolute;
    top: 15%;
    left: 75%;
    box-shadow: 0 0 60px #FFD700;
    animation: sun-glow 5s infinite alternate;
}

#clouds { 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200'%3E%3Ccircle cx='150' cy='100' r='50' fill='rgba(255,255,255,0.8)'/%3E%3Ccircle cx='220' cy='120' r='70' fill='rgba(255,255,255,0.8)'/%3E%3Ccircle cx='700' cy='80' r='60' fill='rgba(255,255,255,0.8)'/%3E%3Ccircle cx='780' cy='110' r='80' fill='rgba(255,255,255,0.8)'/%3E%3Ccircle cx='950' cy='90' r='40' fill='rgba(255,255,255,0.8)'/%3E%3C/svg%3E");
    z-index: 2;
    opacity: 0.7;
    animation-duration: 40s;
}
#hills {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 250'%3E%3Cpath d='M0 250 H 800 V 100 C 650 180, 500 50, 400 120 C 300 190, 150 80, 0 150 Z' fill='%236B8E23'/%3E%3C/svg%3E");
    z-index: 3;
    animation-duration: 25s;
}
#trees-and-house {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 300'%3E%3Cpath d='M0 300 H 800 V 200 C 600 280, 300 150, 0 250 Z' fill='%23228B22'/%3E%3Crect x='100' y='180' width='80' height='70' fill='%23F5DEB3'/%3E%3Cpolygon points='90,180 190,180 140,140' fill='%23A0522D'/%3E%3Cpath d='M600 220 L 605 120 A 30 30 0 0 1 665 120 L 670 220 Z' fill='%238B4513'/%3E%3Ccircle cx='635' cy='100' r='50' fill='%23006400'/%3E%3C/svg%3E");
    z-index: 4;
    animation-duration: 15s;
}

@keyframes pan-scene {
    from { transform: translateX(0); }
    to { transform: translateX(-33.33%); }
}
@keyframes sun-glow {
    from { transform: scale(1); box-shadow: 0 0 60px #FFD700; }
    to { transform: scale(1.05); box-shadow: 0 0 80px #FFFACD; }
}

.splash-text-container {
    position: relative;
    z-index: 10;
    text-align: center;
    color: white;
    transform: translateY(-50px);
}

#splash-title {
    font-family: 'Cairo', sans-serif;
    font-weight: 900;
    font-size: 5rem;
    color: #2c3e50;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
    opacity: 0;
    transform: translateY(30px);
    animation: text-fade-in 1.5s ease-out 0.5s forwards;
}

@keyframes text-fade-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#splash-subtitle {
    margin-top: 1rem;
    font-size: 1.25rem;
    border-right: 3px solid #2c3e50;
    white-space: nowrap;
    overflow: hidden;
    width: 0;
    animation: typewriter 3s steps(30) 2s forwards, blink 0.75s step-end infinite 2s;
    color: #34495e;
    font-weight: 600;
}

@keyframes typewriter {
    from { width: 0; }
    to { width: 300px; }
}
@keyframes blink {
    from, to { border-color: transparent; }
    50% { border-color: #2c3e50; }
}

/* Sidebar & Other Styles */
#sidebar { transition: transform 0.3s ease-in-out; transform: translateX(100%); }
#sidebar.open { transform: translateX(0); }
@media (min-width: 768px) {
    #sidebar { transform: translateX(0); }
    #main-content { margin-right: 320px; }
    #menu-button { display: none; }
}
.session-item .session-actions { opacity: 0; transition: opacity 0.2s ease-in-out; pointer-events: none; }
.session-item:hover .session-actions { opacity: 1; pointer-events: auto; }

/* Typing Indicator Animation */
.dot-pulse {
    animation: dot-pulse 1.4s infinite ease-in-out;
}
.dot-pulse:nth-child(2) {
    animation-delay: 0.2s;
}
.dot-pulse:nth-child(3) {
    animation-delay: 0.4s;
}
@keyframes dot-pulse {
    0%, 80%, 100% { transform: scale(0.5); opacity: 0.5; }
    40% { transform: scale(1); opacity: 1; }
}