/* Smart Investor AI Overlay System CSS */
/* Version: 2.0.0 - Max Mega Menu Compatible */

/* === RESET & COMPATIBILITY === */
.si-overlay-system * {
    box-sizing: border-box !important;
    margin: 0;
    padding: 0;
}

/* Prevent conflicts with WordPress themes */
.si-overlay-system {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    line-height: 1.4 !important;
    color: #333 !important;
    text-align: left !important;
}

/* === OVERLAY CONTAINER === */
.si-overlay-system {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Show overlay when active */
.si-overlay-system.si-overlay-full {
    opacity: 1;
    visibility: visible;
}

/* === BACKDROP === */
.si-overlay-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
}

/* === MAIN OVERLAY CONTAINER === */
.si-overlay-container {
    position: relative;
    width: 100%;
    height: 100%;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.3);
}

/* === OVERLAY HEADER === */
.si-overlay-header {
    position: relative;
    padding: 15px 20px;
    background: linear-gradient(135deg, #2563eb 0%, #ea580c 100%);
    color: white;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

/* Hide top bar completely on desktop full mode */
@media (min-width: 1024px) {
    .si-overlay-system.si-overlay-full .si-overlay-header {
        display: none !important;
    }
    
    .si-overlay-system.si-overlay-full .si-overlay-content {
        height: 100vh !important;
    }
}

.si-overlay-controls {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.si-overlay-controls button {
    background: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: white !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    font-size: 0 !important; /* Hide any text */
    position: relative !important;
}

.si-overlay-controls button:hover {
    background: rgba(255, 255, 255, 0.3) !important;
    transform: scale(1.05) !important;
}

.si-overlay-controls button:active {
    transform: scale(0.95) !important;
}

.si-overlay-controls button svg {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 18px !important;
    height: 18px !important;
    height: 16px !important;
    fill: white !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

/* REMOVED: Old pseudo-element was conflicting with new SVG icon */

/* REMOVED: Old close pseudo-element - using SVG instead */

/* Hide fallback when SVG is confirmed present (via JavaScript class) */
.si-overlay-controls button.has-svg::before {
    display: none !important;
}

/* === OVERLAY CONTENT === */
.si-overlay-content {
    flex: 1;
    overflow: hidden;
    position: relative;
    padding: 0 !important;
    margin: 0 !important;
}

#overlay-react-root {
    width: 100%;
    height: 100%;
    overflow: auto;
    padding: 0 !important;
    margin: 0 !important;
}

/* Push React app to top - eliminate white space */
.si-overlay-content .App,
.si-overlay-content .banking-app,
.si-overlay-content .banking-ui-container {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Target mobile components specifically (used in sidebar) */
.si-overlay-system.si-overlay-minimized .si-overlay-content {
    padding: 0 !important;
}

.si-overlay-system.si-overlay-minimized #overlay-react-root > * {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Fix mobile component when displayed in desktop sidebar - eliminate gap */
.si-overlay-system.si-overlay-minimized .min-h-screen.bg-gray-50 {
    justify-content: flex-start !important; /* Stop vertical centering */
    min-height: auto !important; /* Remove full screen height */
    padding-top: 7px !important; /* Reduce top padding by 70% */
}



/* === MINIMIZED STATE === */
.si-overlay-system.si-overlay-minimized {
    width: 30% !important;
    right: 0;
    left: auto;
    opacity: 1;
    visibility: visible;
    box-shadow: -5px 0 25px rgba(0, 0, 0, 0.2);
}

/* Change overlay top bar background in minimize mode */
.si-overlay-system.si-overlay-minimized .si-overlay-header {
    background: #F6F7FA !important;
    color: #333 !important;
}

/* ===== DESKTOP MINIMIZE MODE BUTTON STYLES ===== */

/* BACK BUTTON - Rounded circle with light gray background */
.si-overlay-system.si-overlay-minimized .si-overlay-back {
    background: #F4F6F8 !important;
    border: none !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
}

.si-overlay-system.si-overlay-minimized .si-overlay-back:hover {
    background: #EAF1FF !important;
    box-shadow: 0 4px 12px rgba(58, 109, 255, 0.15) !important;
}

.si-overlay-system.si-overlay-minimized .si-overlay-back svg {
    stroke: #3A6DFF !important;
    stroke-width: 2.5 !important;
    width: 20px !important;
    height: 20px !important;
    fill: none !important;
    transition: stroke-width 0.3s ease !important;
}

.si-overlay-system.si-overlay-minimized .si-overlay-back:hover svg {
    stroke-width: 3 !important;
}

/* MINIMIZE BUTTON - Same circle design as back button */
.si-overlay-system.si-overlay-minimized .si-overlay-minimize {
    background: #F4F6F8 !important;
    border: none !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    color: #3A6DFF !important; /* For currentColor */
    fill: #3A6DFF !important; /* Direct fill */
}

.si-overlay-system.si-overlay-minimized .si-overlay-minimize:hover {
    background: #EAF1FF !important;
    box-shadow: 0 4px 12px rgba(58, 109, 255, 0.15) !important;
}

/* CLOSE BUTTON - Same circle design as back button */
.si-overlay-system.si-overlay-minimized .si-overlay-close {
    background: #F4F6F8 !important;
    border: none !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    position: relative !important;
}

.si-overlay-system.si-overlay-minimized .si-overlay-close:hover {
    background: #EAF1FF !important;
    box-shadow: 0 4px 12px rgba(58, 109, 255, 0.15) !important;
}

/* Hide React app exit buttons in minimize mode (we have overlay controls) */
.si-overlay-system.si-overlay-minimized .absolute.top-4.right-4 button,
.si-overlay-system.si-overlay-minimized button.absolute.top-4.right-4 {
    display: none !important;
}

/* Minimize button icon styling - TEST SIMPLE SVG */
.si-overlay-system.si-overlay-minimized .si-overlay-minimize svg {
    stroke: #3A6DFF !important;
    fill: none !important;
    width: 20px !important;
    height: 20px !important;
    transition: all 0.3s ease !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.si-overlay-system.si-overlay-minimized .si-overlay-minimize:hover svg {
    stroke: #2857E6 !important;
    transform: scale(1.1) !important;
}

/* Close button - X icon in blue - 18px SIZE with stroke */
.si-overlay-system.si-overlay-minimized .si-overlay-close svg {
    stroke: #3A6DFF !important;
    fill: none !important;
    width: 18px !important;
    height: 18px !important;
    transition: all 0.3s ease !important;
    display: block !important;
}

.si-overlay-system.si-overlay-minimized .si-overlay-close:hover svg {
    stroke: #2857E6 !important;
    stroke-width: 3 !important;
}

/* Minimized backdrop - completely hidden */
.si-overlay-system.si-overlay-minimized .si-overlay-backdrop {
    display: none !important; /* Hide backdrop completely in minimized mode */
}

/* === HIDDEN STATE === */
.si-overlay-system.si-overlay-hidden {
    opacity: 0;
    visibility: hidden;
}

/* === REOPEN BUTTON === */
.si-overlay-reopen {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 999998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.si-overlay-reopen.si-overlay-reopen-visible {
    opacity: 1;
    visibility: visible;
}

.si-overlay-reopen-btn {
    background: linear-gradient(135deg, #2563eb 0%, #10b981 100%) !important; /* Blue to green gradient */
    border: none !important;
    color: white !important;
    padding: 14px 18px 14px 22px !important; /* Adjusted padding to center text */
    border-radius: 30px !important; /* Rounded bubble shape */
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important; /* Center content */
    gap: 6px !important; /* Reduced gap */
    font-size: 15px !important;
    font-weight: 700 !important; /* More bold */
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.3) !important;
    transition: all 0.3s ease !important;
    font-family: inherit !important;
    position: relative !important;
    overflow: visible !important; /* Changed to visible to show hover text */
    min-width: 150px !important; /* Ensure button has minimum width */
}

.si-overlay-reopen-btn:hover {
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 8px 25px rgba(37, 99, 235, 0.4) !important;
    background: linear-gradient(135deg, #1e40af 0%, #059669 100%) !important; /* Darker gradient on hover */
}

/* Hover text tooltip - positioned below button */
.si-overlay-reopen-btn::after {
    content: "Smarter banking starts here" !important;
    position: absolute !important;
    left: 50% !important;
    top: 110% !important; /* Position below button */
    transform: translateX(-50%) !important;
    opacity: 0 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    transition: opacity 0.3s ease !important;
    pointer-events: none !important;
    background: rgba(0, 0, 0, 0.8) !important;
    color: white !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    z-index: 10 !important;
    margin-top: 5px !important;
}

.si-overlay-reopen-btn:hover::after {
    opacity: 1 !important;
}

/* Keep original text visible on hover */
.si-overlay-reopen-btn:hover .si-reopen-text {
    opacity: 1 !important; /* Keep text visible */
}

/* AI icon with spark - using CSS pseudo-element */
.si-overlay-reopen-btn::before {
    content: "✨" !important; /* Spark emoji as icon */
    font-size: 20px !important;
    margin-right: 0 !important; /* Remove extra margin */
    display: inline-block !important;
    animation: sparkle 2s ease-in-out infinite !important;
}

/* Sparkle animation for the icon */
@keyframes sparkle {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
    50% {
        transform: scale(1.1) rotate(5deg);
        opacity: 0.9;
    }
}

/* Hide default SVG icon if present */
.si-overlay-reopen-btn svg {
    display: none !important;
}

/* Text wrapper for fade effect */
.si-reopen-text {
    transition: opacity 0.3s ease !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Icon is now handled by the ::before pseudo-element above */

/* Hide fallback when SVG is confirmed present */
.si-overlay-reopen-btn.has-svg::before {
    display: none !important;
}

/* === BODY STATE MANAGEMENT === */
/* Max Mega Menu Compatible - No direct body overflow manipulation */
body.si-overlay-active {
    /* Don't set overflow: hidden on body - breaks Max Mega Menu */
}

body.si-overlay-mode-full {
    /* Full overlay mode - prevent page scroll via viewport lock */
}

body.si-overlay-mode-minimized {
    /* Minimized mode - allow page interaction */
}

/* Prevent page scroll when overlay is full (Max Mega Menu compatible) */
body.si-overlay-active.si-overlay-mode-full #page,
body.si-overlay-active.si-overlay-mode-full main,
body.si-overlay-active.si-overlay-mode-full .site-content {
    overflow: hidden !important;
    height: 100vh !important;
}

/* === MOBILE RESPONSIVE === */
@media (max-width: 768px) {
    /* Mobile: Only full overlay or hidden (no minimize) */
    .si-overlay-system.si-overlay-minimized {
        width: 100% !important;
        right: 0 !important;
        left: 0 !important;
    }

    /* Hide minimize button on mobile */
    .si-overlay-minimize {
        display: none !important;
    }

    /* Apply circular blue close button style to mobile view */
    .si-overlay-system.si-overlay-full .si-overlay-close {
        background: #F4F6F8 !important;
        border: none !important;
        border-radius: 50% !important;
        width: 40px !important;
        height: 40px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    }

    .si-overlay-system.si-overlay-full .si-overlay-close:hover {
        background: #EAF1FF !important;
        box-shadow: 0 4px 12px rgba(58, 109, 255, 0.15) !important;
    }

    /* Mobile back arrow icon */
    .si-overlay-system.si-overlay-full .si-overlay-close .mobile-back-icon {
        stroke: #3A6DFF !important;
        fill: none !important;
        width: 20px !important;
        height: 20px !important;
    }

    .si-overlay-system.si-overlay-full .si-overlay-close:hover .mobile-back-icon {
        stroke: #2857E6 !important;
        stroke-width: 3 !important;
    }

    /* Desktop close icon (hidden on mobile) */
    .si-overlay-system.si-overlay-full .si-overlay-close .desktop-close-icon {
        stroke: #3A6DFF !important;
        fill: none !important;
        width: 18px !important;
        height: 18px !important;
    }

    .si-overlay-system.si-overlay-full .si-overlay-close:hover .desktop-close-icon {
        stroke: #2857E6 !important;
        stroke-width: 3 !important;
    }

    /* Update mobile header to lighter background for better button visibility */
    .si-overlay-system.si-overlay-full .si-overlay-header {
        background: #FBFCFF !important;
        border-bottom: 1px solid #E5E7EB !important;
    }

    /* MOBILE SCROLL FIX: Prevent body scroll completely when overlay is active */
    body.si-overlay-active.si-overlay-mode-full {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
        top: 0 !important;
        left: 0 !important;
    }
    
    /* MOBILE VIEWPORT FIX: True full height overlay */
    .si-overlay-system.si-overlay-full {
        height: 100vh !important;
        height: -webkit-fill-available !important; /* Safari mobile fix */
        min-height: 100vh !important;
    }
    
    /* MOBILE REACT APP SCROLL: Contained scrolling within overlay */
    .si-overlay-content #overlay-react-root {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        height: calc(100vh - 70px) !important; /* Account for header */
        max-height: calc(100vh - 70px) !important;
        padding-bottom: 100px !important; /* Extra bottom space for comfortable scrolling */
    }
    

    
    /* Mobile header adjustments */
    .si-overlay-header {
        background: #FBFCFF !important; /* Light background */
        padding: 12px 15px !important;
    }
    
    /* Fix button visibility on light background */
    .si-overlay-controls button {
        background: rgba(29, 117, 188, 0.1) !important; /* Light blue background */
        border: 1px solid #1D75BC !important; /* Blue border */
        color: #1D75BC !important; /* Blue text */
    }
    
    .si-overlay-controls button svg {
        fill: #1D75BC !important; /* Blue SVG */
    }
    
    .si-overlay-controls button:hover {
        background: #1D75BC !important; /* Blue background on hover */
        color: white !important; /* White text on hover */
    }
    
    .si-overlay-controls button:hover svg {
        fill: white !important; /* White SVG on hover */
    }
    
    /* Hide minimize button on mobile - only show close button */
    .si-overlay-controls .si-overlay-minimize {
        display: none !important;
    }
    
    /* Center logo in mobile header */
    .si-overlay-header {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .si-overlay-controls {
        position: absolute !important;
        left: 15px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
    
    /* Add logo in center - using professional PNG from WordPress uploads */
    .si-overlay-header::before {
        content: "" !important;
        background-image: url("https://ai.thesmartinvestor.com/wp64/wp-content/uploads/2025/07/The-Smart-Investor-New-Logo-1.png") !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        width: 140px !important;
        height: 30px !important;
        flex-shrink: 0 !important;
    }
    
    .si-overlay-controls button {
        width: 36px !important;
        height: 36px !important; /* Larger touch targets */
    }
    
    /* Hide the exit button inside mobile React app interface */
    .si-overlay-content .bg-white.rounded-xl button.absolute.top-4.right-4 {
        display: none !important;
    }
    
    /* High-specificity mobile user message text color fix */
    .si-overlay-system .si-overlay-content .si-mobile-user-msg .si-mobile-user-text,
    .si-overlay-content .si-mobile-user-msg p.si-mobile-user-text,
    .si-overlay-content .si-mobile-user-msg p {
        color: white !important;
        background: transparent !important;
    }
    
    /* TEST 1: Move main title 4px up */
    .si-overlay-content h1.text-lg.font-bold {
        margin-top: -4px !important;
    }
    
    /* TEST 2: Tighten spacing between title and subtitle (2px tighter) */
    .si-overlay-content h1.text-lg.font-bold + p.text-blue-100 {
        margin-top: -2px !important; /* Reduces from mt-1 (4px) to 2px */
    }
    
    /* TEST 3: Disclosure spacing - 20px margin between subtitle and disclosure */
    .si-overlay-content .flex.items-center.pt-2.mb-3 {
        margin-bottom: 20px !important; /* Change from mb-3 (12px) to 20px */
    }
    
    /* Mobile reopen button */
    .si-overlay-reopen {
        top: 55px !important;
        right: 130px !important;
    }
    
    .si-overlay-reopen-btn {
        padding: 12px 16px !important;
        font-size: 14px !important;
    }

    /* Adjust hover text for mobile */
    .si-overlay-reopen-btn::after {
        font-size: 12px !important;
    }
}

@media (max-width: 480px) {
    /* Small mobile adjustments */
    .si-overlay-header {
        padding: 10px 12px !important;
    }
    
    .si-overlay-reopen {
        top: 50px !important;
        right: 120px !important;
    }
}

/* === TABLET RESPONSIVE === */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Tablet: Minimized mode takes more space */
    .si-overlay-system.si-overlay-minimized {
        width: 45% !important;
    }
}

/* === LAPTOP SCREENS (including 15.3" laptops) === */
@media screen and (min-width: 1025px) and (max-width: 1919px) {
    /* Laptop: Minimized mode takes 40% width (more space than desktop 35%) */
    body .si-overlay-system.si-overlay-minimized {
        width: 40% !important;
    }
    
    /* Laptop: Force 2-column layout for account buttons in sidebar (better fit) */
    .si-overlay-system.si-overlay-minimized .grid.grid-cols-2.md\\:grid-cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* === VERY LARGE DESKTOP SCREENS === */
@media (min-width: 1920px) {
    /* Very large desktop: 30% width for more workspace */
    .si-overlay-system.si-overlay-minimized {
        width: 30% !important;
    }
    
    /* Very large desktop: Keep 4-column layout for account buttons in sidebar */
    .si-overlay-system.si-overlay-minimized .grid.grid-cols-2.md\\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

/* === ACCESSIBILITY === */
@media (prefers-reduced-motion: reduce) {
    .si-overlay-system,
    .si-overlay-reopen,
    .si-overlay-controls button,
    .si-overlay-reopen-btn {
        transition: none !important;
    }
}

/* Focus states for accessibility */
.si-overlay-controls button:focus,
.si-overlay-reopen-btn:focus {
    outline: 2px solid #ffffff !important;
    outline-offset: 2px !important;
}

/* === HIGH CONTRAST MODE === */
@media (prefers-contrast: high) {
    .si-overlay-header {
        background: #000000 !important;
        border-bottom: 2px solid #ffffff !important;
    }
    
    .si-overlay-controls button {
        background: #000000 !important;
        border: 2px solid #ffffff !important;
    }
    
    .si-overlay-reopen-btn {
        background: #000000 !important;
        border: 2px solid #ffffff !important;
    }
}

/* === PERFORMANCE OPTIMIZATIONS === */
.si-overlay-system {
    will-change: opacity, transform;
    transform: translateZ(0); /* Hardware acceleration */
}

.si-overlay-container {
    will-change: transform;
    transform: translateZ(0);
}

/* === PRINT STYLES === */
@media print {
    .si-overlay-system,
    .si-overlay-reopen {
        display: none !important;
    }
}

/* === SIDEBAR MOBILE LAYOUT (ONLY IN MINIMIZED MODE) === */
/* Force mobile layout ONLY when actually minimized */
.si-overlay-system.si-overlay-minimized .banking-app {
    padding: 15px !important;
}

.si-overlay-system.si-overlay-minimized .layout-mode-mobile {
    max-width: 100% !important;
    width: 100% !important;
}

/* Mobile component optimizations for sidebar */
.si-overlay-system.si-overlay-minimized .banking-ui-container {
    /* Ensure mobile interface fits sidebar width */
    max-width: 100% !important;
    width: 100% !important;
    padding: 8px !important;
}

/* Optimize mobile buttons and forms for sidebar */
.si-overlay-system.si-overlay-minimized .MainBankingInterfaceMobile,
.si-overlay-system.si-overlay-minimized .ChatView {
    /* Remove any fixed widths that might break in sidebar */
    max-width: 100% !important;
    width: 100% !important;
}

/* Mobile grid layouts for account type buttons in sidebar */
.si-overlay-system.si-overlay-minimized .grid-cols-2 {
    /* Ensure 2-column grid fits in sidebar */
    gap: 8px !important;
}

/* Mobile text inputs and textareas in sidebar */
.si-overlay-system.si-overlay-minimized textarea,
.si-overlay-system.si-overlay-minimized input[type="text"] {
    font-size: 14px !important;
    padding: 8px !important;
}

/* Mobile chat messages in sidebar */
.si-overlay-system.si-overlay-minimized .space-y-3 {
    /* Tighter spacing for chat messages */
    gap: 12px !important;
}

/* Mobile suggested terms in sidebar */
.si-overlay-system.si-overlay-minimized .grid-cols-2 button {
    /* Compact suggested terms buttons */
    font-size: 12px !important;
    padding: 6px 8px !important;
    min-height: 40px !important;
}

/* Mobile headers and titles in sidebar */
.si-overlay-system.si-overlay-minimized h1 {
    font-size: 18px !important;
}

.si-overlay-system.si-overlay-minimized h2 {
    font-size: 16px !important;
}

/* Mobile account type icons and buttons in sidebar */
.si-overlay-system.si-overlay-minimized .bg-blue-100 {
    /* Smaller icon containers */
    padding: 8px !important;
}

/* Ensure mobile scrolling works in sidebar */
.si-overlay-system.si-overlay-minimized .overflow-y-auto {
    max-height: calc(100vh - 100px) !important;
}