/* --- 1. Global Setup --- */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Plus Jakarta Sans', sans-serif; cursor: none; -webkit-tap-highlight-color: transparent; }
html, body { overflow-x: hidden; width: 100%; background: #050505; color: white; }
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }

/* Cinematic Overlays */
.noise { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: url('https://grainy-gradients.vercel.app/noise.svg'); opacity: 0.04; pointer-events: none; z-index: 9999; }
.cursor { width: 10px; height: 10px; background: white; border-radius: 50%; position: fixed; pointer-events: none; z-index: 10000; mix-blend-mode: difference; transition: transform 0.15s; }
::-webkit-scrollbar { display: none; } /* Main site scrollbar hide */

/* --- 2. Desktop UI Components --- */
.hero-title, .hero-sub { transform: translateY(100px); opacity: 0; }
.glass-card { background: rgba(255, 255, 255, 0.02); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.05); transition: 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.glass-dock { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.magnetic { display: inline-block; }

/* Easy Pay Badge */
.easy-pay-badge { display: inline-block; padding: 4px 12px; background: rgba(37, 99, 235, 0.1); border: 1px solid rgba(37, 99, 235, 0.3); color: #60a5fa; border-radius: 8px; font-size: 11px; font-weight: 800; text-transform: uppercase; margin-bottom: 15px; }

/* 🚀 Ticker */
@keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.ticker-content { display: inline-block; animation: ticker 40s linear infinite; white-space: nowrap; }

/* --- 3. Advanced Chat Scrolling Logic --- */
#chat-content {
    overflow-y: auto !important; 
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    scrollbar-width: thin;
    scrollbar-color: rgba(37, 99, 235, 0.3) transparent;
}

/* Chat scrollbar style */
#chat-content::-webkit-scrollbar { display: block !important; width: 4px; }
#chat-content::-webkit-scrollbar-thumb { background: rgba(37, 99, 235, 0.3); border-radius: 10px; }

/* Message Bubbles */
.bot-msg { background: rgba(255, 255, 255, 0.05); padding: 12px 16px; border-radius: 18px; border-top-left-radius: 0; max-width: 85%; color: #e4e4e7; line-height: 1.5; font-size: 13px; margin-bottom: 10px; }
.user-msg { background: #2563eb; padding: 12px 16px; border-radius: 18px; border-top-right-radius: 0; max-width: 85%; color: white; line-height: 1.5; font-size: 13px; margin-left: auto; margin-bottom: 10px; }
.suggestion-chip { background: rgba(37, 99, 235, 0.1); border: 1px solid rgba(37, 99, 235, 0.2); padding: 8px 14px; border-radius: 50px; font-size: 10px; color: #60a5fa; font-weight: 700; cursor: pointer; transition: 0.3s; margin-bottom: 5px; white-space: nowrap; }

/* --- 4. 📱 THE MASTER MOBILE FIX (Safari/Chrome/iOS/Android) --- */
@media (max-width: 768px) {
    /* Nav Protection */
    nav { background: rgba(5, 5, 5, 0.9) !important; backdrop-filter: blur(20px) !important; height: 70px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }

    /* Hero Text Scaling */
    .hero-title { font-size: 12vw !important; line-height: 1 !important; text-align: center !important; width: 100% !important; transform: none !important; opacity: 1 !important; }
    .hero-sub { font-size: 8px !important; letter-spacing: 0.15em !important; opacity: 1 !important; transform: none !important; }

    /* CHAT WINDOW - Full width on mobile */
    #chat-window {
        position: fixed !important;
        left: 15px !important;
        right: 15px !important;
        width: auto !important;
        bottom: 85px !important;
        height: 60vh !important;
        max-height: 500px !important;
        z-index: 9999 !important;
    }

    /* SOCIAL DOCK - Bottom Left Pill */
    .glass-dock {
        position: fixed !important;
        top: auto !important;
        bottom: 20px !important; 
        left: 15px !important;
        right: auto !important;
        transform: none !important;
        flex-direction: row !important;
        display: flex !important;
        padding: 8px 15px !important;
        border-radius: 100px !important;
        z-index: 1500 !important;
    }
    .glass-dock a { width: 30px !important; height: 30px !important; margin: 0 !important; }

    /* Chat Button Size */
    #chat-btn { width: 55px !important; height: 55px !important; bottom: 20px !important; right: 15px !important; z-index: 1600 !important; }

    /* Animation reveal override */
    .reveal-up { opacity: 1 !important; transform: none !important; }
}