/**
 * SUNNYBANK SOLO: THE PREMIUM DESIGN
 */
:root {
    --sb-gold: #d4af37;
    --sb-bg: rgba(5, 20, 17, 0.95);
    --sb-border: rgba(212, 175, 55, 0.3);
}

#sb-ai-trigger {
    position: fixed;
    bottom: 80px;
    right: 30px;
    width: 60px;
    height: 60px;
    background: var(--sb-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    cursor: pointer;
    z-index: 99999;
    transition: 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    border: 2px solid rgba(255,255,255,0.1);
}
#sb-ai-trigger:hover { transform: scale(1.1) rotate(5deg); box-shadow: 0 15px 40px rgba(212, 175, 55, 0.4); }
#sb-ai-trigger svg { color: #fff; width: 28px; height: 28px; }

#sb-ai-window {
    position: fixed;
    bottom: 90px;
    right: 30px;
    width: 500px;
    max-width: calc(100vw - 60px);
    height: calc(100vh - 150px);
    max-height: 90vh; /* Scalable safety cap */
    background: var(--sb-bg);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid var(--sb-border);
    border-radius: 20px;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    pointer-events: none;
    transition: 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    overflow: hidden; /* Prevent window-level scrolling */
    font-family: 'Inter', sans-serif;
}
#sb-ai-window.active { opacity: 1; transform: translateY(0) scale(1); pointer-events: all; }
#sb-ai-window.no-transition { transition: none !important; }

.sb-ai-header { padding: 20px 25px; border-bottom: 1px solid var(--sb-border); display: flex; justify-content: space-between; align-items: center; }
.sb-ai-header h3 { margin: 0; font-size: 1.1rem; color: var(--sb-gold); font-family: sans-serif; }
#sb-ai-close { border: none; background: none; color: white; font-size: 2rem; cursor: pointer; opacity: 0.6; transition: 0.3s; line-height: 1; }
#sb-ai-close:hover { opacity: 1; transform: rotate(90deg); }

#sb-ai-content { 
    flex: 1; 
    overflow-y: auto; 
    overflow-x: hidden; /* Kill horizontal scroll */
    padding: 20px; 
    display: flex; 
    flex-direction: column; 
    gap: 10px; 
    scroll-behavior: smooth; 
    scrollbar-width: thin;
    scrollbar-color: var(--sb-gold) transparent;
}

/* Chrome/Safari Scrollbar Styling */
#sb-ai-content::-webkit-scrollbar { width: 5px; }
#sb-ai-content::-webkit-scrollbar-track { background: transparent; }
#sb-ai-content::-webkit-scrollbar-thumb { background: var(--sb-gold); border-radius: 10px; }
.msg { max-width: 88%; padding: 8px 12px; border-radius: 12px; font-size: 0.82rem; line-height: 1.4; animation: msgIn 0.3s forwards; }
@keyframes msgIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.msg.user { align-self: flex-end; background: var(--sb-gold); color: white; border-bottom-right-radius: 2px; }
.msg.bot { align-self: flex-start; background: rgba(255,255,255,0.05); color: #ddd; border-bottom-left-radius: 2px; border: 1px solid rgba(255,255,255,0.05); }
.msg.bot a { color: var(--sb-gold); text-decoration: underline; font-weight: 600; }

.sb-ai-footer { padding: 10px 18px 18px 18px; }
.sb-ai-input-wrap { display: flex; gap: 10px; background: rgba(255,255,255,0.05); padding: 5px; border-radius: 12px; border: 1px solid var(--sb-border); }
#sb-ai-input { flex: 1; background: transparent; border: none; color: white; padding: 10px 15px; outline: none; font-size: 0.9rem; }
#sb-ai-send { background: var(--sb-gold); border: none; width: 40px; height: 40px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: white; }

#sb-ai-status { font-size: 0.8rem; color: var(--sb-gold); margin-bottom: 5px; opacity: 0; transition: 0.3s; }
#sb-ai-status.visible { opacity: 1; }

/* MOBILE ARTISAN OPTIMIZATION */
@media (max-width: 600px) {
    #sb-ai-trigger { bottom: 70px; right: 20px; width: 50px; height: 50px; }
    #sb-ai-window { 
        width: 100% !important; 
        height: 100dvh; /* Removed !important to allow JS control */
        max-height: 100dvh; 
        bottom: 0; 
        right: 0 !important; 
        border-radius: 0 !important; 
        left: 0 !important;
        top: 0 !important;
        z-index: 2147483647; /* Absolute top priority */
    }
    .sb-ai-header { padding: 12px 15px; }
    #sb-ai-content { padding: 12px; }
    .msg { max-width: 90%; font-size: 0.85rem; }
    .sb-ai-footer { padding: 8px 12px 12px 12px; }
}