/**
 * SOLIUS Overview Component - Mobile Layout
 * Based on Figma Design Specifications (October 2025)
 * 
 * Features:
 * - Single column vertical stacking
 * - Full width cards (328px with 16px padding)
 * - Balance, Portfolio, Crypto Call, Missions, Bot cards
 * - Figma-exact colors and spacing
 */

@media (max-width: 768px) {
    /* Overview Container */
    .overview-component {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0px;
        gap: 16px;
        
        width: 100%;
        min-height: calc(100vh - 48px - 98px); /* Full height minus header and nav */
    }
    
    /* Main Container - Single Column */
    .overview-content-container {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0;
        gap: 16px;
        
        width: 100%;
        max-width: 360px;
        min-height: auto;
        
        background: transparent;
        border-radius: 20px;
        
        flex: none;
        margin: 0 auto;
    }
    
    /* ============================================
       BALANCE CARD
       ============================================ */
    
    .overview-balance-card {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0px;
        
        width: 100%;
        min-height: auto;
        
        background: linear-gradient(304.41deg, #555DFF 9.18%, #303365 75.98%);
        border-radius: 20px;
        
        flex: none;
        order: 0;
        align-self: stretch;
    }
    
    /* Balance Header */
    .balance-header {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 16px 24px;
        gap: 8px;
        
        width: 100%;
        min-height: 60px;
        
        flex: none;
        order: 0;
        align-self: stretch;
    }
    
    .balance-header h2 {
        width: auto;
        height: auto;
        
        font-family: 'Montserrat', sans-serif;
        font-style: normal;
        font-weight: 600;
        font-size: 24px;
        line-height: 28px;
        
        background: linear-gradient(171.81deg, #FFFFFF 27.25%, #C6C1FF 78.81%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        
        margin: 0;
        flex: none;
        order: 0;
    }
    
    /* Balance Content */
    .balance-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 12px 24px 24px;
        gap: 16px;
        
        width: 100%;
        min-height: auto;
        
        flex: none;
        order: 1;
        align-self: stretch;
    }
    
    /* Wallet Address Row */
    .balance-wallet-row {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0px;
        gap: 8px;
        
        width: 100%;
        min-height: auto;
        
        flex: none;
        order: 0;
        align-self: stretch;
    }
    
    .balance-wallet-row-inner {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0px;
        gap: 15px;
        
        width: 100%;
        min-height: auto;
        
        flex: none;
        order: 0;
        align-self: stretch;
    }
    
    .balance-wallet-label {
        width: auto;
        height: auto;
        
        font-family: 'Montserrat', sans-serif;
        font-style: normal;
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
        color: #7589B9;
        
        flex: none;
        order: 0;
    }
    
    .balance-wallet-address-group {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0px;
        gap: 8px;
        
        width: auto;
        height: auto;
        
        flex: none;
        order: 1;
    }
    
    .balance-wallet-address {
        height: auto;
        
        font-family: 'Montserrat', sans-serif;
        font-style: normal;
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
        color: #FFFFFF;
        
        flex: none;
        order: 0;
    }
    
    .balance-copy-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        background: transparent;
        border: none;
        cursor: pointer;
        flex: none;
        order: 1;
        padding: 0;
        transition: opacity 0.2s ease;
    }
    
    .balance-copy-icon:active {
        opacity: 0.5;
    }
    
    .balance-copy-icon .copy-icon {
        width: 16px;
        height: 16px;
    }
    
    /* Balance Amount Row */
    .balance-amount-row {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0px;
        gap: 16px;
        
        width: 100%;
        min-height: auto;
        
        flex: none;
        order: 1;
    }
    
    .balance-amount {
        height: auto;
        
        font-family: 'Montserrat', sans-serif;
        font-style: normal;
        font-weight: 600;
        font-size: 32px;
        line-height: 36px;
        
        background: linear-gradient(144.96deg, #FFFFFF 25.84%, #A5A8DB 75.23%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        
        flex: none;
        order: 0;
    }
    
    .balance-change {
        height: auto;
        
        font-family: 'Montserrat', sans-serif;
        font-style: normal;
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
        color: #7BFFBF;
        
        flex: none;
        order: 1;
    }
    
    /* ============================================
       PORTFOLIO CARD
       ============================================ */
    
    .overview-portfolio-card {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0px;
        
        width: 100%;
        min-height: auto;
        
        background: linear-gradient(311.13deg, #00091E 22.82%, #303365 88.03%);
        border-radius: 20px;
        
        flex: none;
        order: 1;
        align-self: stretch;
        
        position: relative;
        overflow: hidden;
    }
    
    /* Coming Soon Blur Overlay */
    .portfolio-coming-soon-overlay {
        position: absolute;
        top: 60px; /* Below header */
        left: 0;
        right: 0;
        bottom: 0;
        
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        background: rgba(0, 9, 30, 0.6);
        
        display: flex;
        align-items: center;
        justify-content: center;
        
        z-index: 10;
    }
    
    .coming-soon-content {
        text-align: center;
    }
    
    .coming-soon-content h4 {
        font-family: 'Montserrat', sans-serif;
        font-weight: 600;
        font-size: 20px;
        line-height: 24px;
        color: rgba(255, 255, 255, 0.9);
        margin: 0;
    }
    
    /* Portfolio Header */
    .portfolio-header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 16px 24px;
        gap: 8px;
        
        width: 100%;
        min-height: 60px;
        
        flex: none;
        order: 0;
        align-self: stretch;
    }
    
    .portfolio-header h3 {
        height: auto;
        
        font-family: 'Montserrat', sans-serif;
        font-style: normal;
        font-weight: 600;
        font-size: 24px;
        line-height: 28px;
        
        background: linear-gradient(171.81deg, #FFFFFF 27.25%, #C6C1FF 78.81%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        
        margin: 0;
        flex: none;
        order: 0;
    }
    
    /* Time Filter Dropdown */
    .portfolio-time-filter {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 4px 12px;
        gap: 4px;
        
        width: auto;
        min-height: 26px;
        
        background: linear-gradient(180deg, #384665 0%, #28325D 100%);
        border-radius: 4px;
        border: none;
        cursor: pointer;
        
        flex: none;
        order: 1;
    }
    
    .portfolio-time-filter span {
        width: auto;
        height: auto;
        
        font-family: 'Montserrat', sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        line-height: 16px;
        color: #FFFFFF;
        
        flex: none;
        order: 0;
    }
    
    /* Portfolio Chart/Content */
    .portfolio-chart-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 12px 24px 24px;
        gap: 16px;
        
        width: 100%;
        min-height: auto;
        
        flex: none;
        order: 1;
        align-self: stretch;
        
        position: relative;
        z-index: 1;
    }
    
    /* Blue glow effect */
    .portfolio-glow {
        box-sizing: border-box;
        
        position: absolute;
        width: 98px;
        height: 53px;
        right: 14px;
        top: 386px;
        
        background: linear-gradient(266.42deg, #000DFF -21.15%, rgba(85, 93, 255, 0) 88.34%);
        border: 2px solid #969CFF;
        filter: blur(10px);
        border-radius: 40px;
        
        z-index: 0;
    }
    
    /* Top Assets Section */
    .top-assets-section {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0px;
        gap: 12px;
        
        width: 100%;
        height: auto;
        
        flex: none;
        order: 1;
        align-self: stretch;
        z-index: 1;
    }
    
    .top-assets-header {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0px;
        gap: 8px;
        
        width: 100%;
        min-height: auto;
        
        flex: none;
        order: 0;
    }
    
    .top-assets-header h4 {
        width: auto;
        height: auto;
        
        font-family: 'Montserrat', sans-serif;
        font-style: normal;
        font-weight: 500;
        font-size: 20px;
        line-height: 28px;
        color: #FFFFFF;
        
        margin: 0;
        flex: none;
        order: 0;
    }
    
    .top-assets-list {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0px;
        gap: 8px;
        
        width: 100%;
        height: auto;
        
        flex: none;
        order: 1;
        align-self: stretch;
    }
    
    /* Asset Item */
    .asset-item {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 0px;
        gap: 15px;
        
        width: 100%;
        min-height: 20px;
        
        flex: none;
        align-self: stretch;
    }
    
    .asset-name {
        height: 20px;
        
        font-family: 'Montserrat', sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        color: #FFFFFF;
        
        flex: none;
        order: 0;
    }
    
    .asset-progress-bar {
        width: 96px;
        height: 12px;
        background: rgba(83, 98, 133, 0.5);
        border-radius: 2px;
        
        position: relative;
        flex: none;
        order: 1;
    }
    
    .asset-progress-fill {
        position: absolute;
        height: 12px;
        left: 0px;
        top: 0;
        border-radius: 2px;
    }
    
    /* ROI Chart Section */
    .roi-chart-section {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0px;
        gap: 12px;
        
        width: 100%;
        min-height: auto;
        
        flex: none;
        order: 2;
        z-index: 2;
    }
    
    .roi-chart-header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 0px;
        gap: 8px;
        
        width: 100%;
        min-height: auto;
        
        flex: none;
        order: 0;
        align-self: stretch;
    }
    
    .roi-chart-header h4 {
        width: auto;
        height: auto;
        
        font-family: 'Montserrat', sans-serif;
        font-style: normal;
        font-weight: 500;
        font-size: 20px;
        line-height: 28px;
        color: #FFFFFF;
        
        margin: 0;
        flex: none;
        order: 0;
    }
    
    /* Set Button with Glow */
    .overview-set-button {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 12px 32px;
        gap: 8px;
        
        width: 100%;
        min-height: 48px;
        
        background: rgba(255, 255, 255, 0.2);
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 40px;
        cursor: pointer;
        
        flex: none;
        order: 3;
        align-self: stretch;
        z-index: 3;
        
        position: relative;
        overflow: visible;
        isolation: isolate;
        
        /* Glossy effect */
        box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.3);
        
        transition: all 0.2s;
    }
    
    .overview-set-button-glow {
        position: absolute;
        width: 100px;
        height: 50px;
        right: -5px;
        top: 50%;
        transform: translateY(-50%);
        background: linear-gradient(266.42deg, #000DFF -21.15%, rgba(85, 93, 255, 0) 88.34%);
        border: 2px solid #969CFF;
        filter: blur(10px);
        border-radius: 40px;
        z-index: -1;
        pointer-events: none;
    }
    
    .overview-set-button:active {
        transform: scale(0.98);
        background: rgba(255, 255, 255, 0.15);
    }
    
    .overview-set-button:hover {
        background: rgba(255, 255, 255, 0.3);
        border: 1px solid rgba(255, 255, 255, 0.5);
        box-shadow: 
            inset 0 1px 0 0 rgba(255, 255, 255, 0.6),
            0 6px 16px rgba(0, 13, 255, 0.4);
    }
    
    .overview-set-button span {
        width: auto;
        height: auto;
        position: relative;
        z-index: 1;
        
        font-family: 'Montserrat', sans-serif;
        font-style: normal;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
        color: #FFFFFF;
        
        flex: none;
        order: 0;
    }
    
    /* ============================================
       CRYPTO CALL CARD
       ============================================ */
    
    .overview-crypto-call-card {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0px;
        
        width: 100%;
        min-height: auto;
        
        background: linear-gradient(311.13deg, #00091E 22.82%, #303365 88.03%);
        border-radius: 20px;
        
        flex: none;
        order: 2;
        position: relative;
        overflow: hidden;
    }
    
    /* Crypto Call Glow */
    .crypto-call-glow {
        box-sizing: border-box;
        
        position: absolute;
        width: 98px;
        height: 53px;
        right: 8px;
        top: 286px;
        
        background: linear-gradient(266.42deg, #000DFF -21.15%, rgba(85, 93, 255, 0) 88.34%);
        border: 2px solid #969CFF;
        filter: blur(10px);
        border-radius: 40px;
        
        z-index: 0;
    }
    
    .crypto-call-header {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 16px 24px;
        gap: 8px;
        
        width: 100%;
        min-height: 60px;
        
        flex: none;
        order: 0;
        align-self: stretch;
        z-index: 1;
    }
    
    .crypto-call-header h3 {
        width: auto;
        height: auto;
        
        font-family: 'Montserrat', sans-serif;
        font-style: normal;
        font-weight: 600;
        font-size: 24px;
        line-height: 28px;
        
        background: linear-gradient(171.81deg, #FFFFFF 27.25%, #C6C1FF 78.81%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        
        margin: 0;
        flex: none;
        order: 0;
    }
    
    .crypto-call-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 12px 24px 24px;
        gap: 16px;
        
        width: 100%;
        min-height: auto;
        
        flex: none;
        order: 1;
        align-self: stretch;
        z-index: 2;
    }
    
    /* Call Details */
    .call-details {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0px;
        gap: 8px;
        
        width: 100%;
        height: auto;
        
        flex: none;
        order: 0;
        align-self: stretch;
    }
    
    .call-detail-row {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0px;
        gap: 15px;
        
        width: 100%;
        min-height: 20px;
        
        flex: none;
        align-self: stretch;
    }
    
    .call-detail-label {
        width: 61px;
        height: 20px;
        
        font-family: 'Montserrat', sans-serif;
        font-style: normal;
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
        color: #536285;
        
        flex: none;
        order: 0;
    }
    
    .call-detail-value {
        height: 20px;
        
        font-family: 'Montserrat', sans-serif;
        font-style: normal;
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
        color: #FFFFFF;
        
        flex: none;
        order: 1;
    }
    
    /* ============================================
       MISSIONS CARD
       ============================================ */
    
    .overview-missions-card {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0px;
        
        width: 100%;
        min-height: auto;
        
        background: linear-gradient(311.13deg, #00091E 22.82%, #303365 88.03%);
        border-radius: 20px;
        
        flex: none;
        order: 3;
        
        position: relative; /* 🔥 FIX: Needed for Coming Soon overlay positioning! */
        overflow: hidden; /* 🔥 FIX: Contain the overlay within card */
    }
    
    .missions-header {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 16px 24px;
        gap: 8px;
        
        width: 100%;
        min-height: 60px;
        
        flex: none;
        order: 0;
        align-self: stretch;
    }
    
    .missions-header h3 {
        width: auto;
        height: auto;
        
        font-family: 'Montserrat', sans-serif;
        font-style: normal;
        font-weight: 600;
        font-size: 24px;
        line-height: 28px;
        
        background: linear-gradient(171.81deg, #FFFFFF 27.25%, #C6C1FF 78.81%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        
        margin: 0;
        flex: none;
        order: 0;
    }
    
    .missions-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 12px 24px 24px;
        gap: 16px;
        
        width: 100%;
        min-height: auto;
        
        flex: none;
        order: 1;
        align-self: stretch;
    }
    
    /* Mission Item */
    .mission-item-card {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 12px 16px;
        gap: 16px;
        
        width: 100%;
        min-height: 88px;
        
        background: rgba(0, 9, 30, 0.2);
        border-radius: 20px;
        
        flex: none;
        order: 0;
        align-self: stretch;
        
        box-sizing: border-box;
        overflow: hidden;
    }
    
    .mission-text {
        width: 100%;
        min-height: auto;
        flex: 1;
        min-width: 0;
        
        font-family: 'Montserrat', sans-serif;
        font-style: normal;
        font-weight: 500;
        font-size: 12px;
        
        /* Allow text wrapping */
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
        line-height: 16px;
        color: #FFFFFF;
        
        flex: none;
        order: 0;
        flex-grow: 1;
    }
    
    .mission-badge {
        width: 40px;
        min-width: 40px;
        height: 40px;
        background: linear-gradient(360deg, rgba(153, 153, 153, 0) 0%, #5585FF 100%);
        border-radius: 100px;
        flex-shrink: 0;
        
        flex: none;
        order: 1;
    }
    
    /* Mission List Item (smaller) */
    .mission-list-item {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 8px;
        gap: 16px;
        
        width: 100%;
        min-height: 40px;
        
        flex: none;
        align-self: stretch;
        box-sizing: border-box;
        overflow: hidden;
    }
    
    .mission-list-item-inner {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0px;
        gap: 8px;
        
        width: 100%;
        min-height: auto;
        
        flex: 1;
        order: 0;
        min-width: 0;
        overflow: hidden;
    }
    
    .mission-number-badge {
        width: 24px;
        height: 24px;
        background: linear-gradient(360deg, #E5A5FF 0%, #22079C 100%);
        border-radius: 100px;
        
        display: flex;
        align-items: center;
        justify-content: center;
        
        flex: none;
        order: 0;
    }
    
    .mission-number-badge.inactive {
        background: #536285;
    }
    
    .mission-number-badge span {
        font-family: 'Montserrat', sans-serif;
        font-style: normal;
        font-weight: 700;
        font-size: 14px;
        line-height: 20px;
        color: #FFFFFF;
    }
    
    .mission-number-badge.inactive span {
        color: #00091E;
    }
    
    .mission-title {
        width: 100%;
        min-height: auto;
        
        font-family: 'Montserrat', sans-serif;
        font-style: normal;
        font-weight: 500;
        font-size: 16px;
        line-height: 20px;
        color: #FFFFFF;
        
        flex: 1;
        order: 1;
        min-width: 0;
        
        /* Allow text wrapping */
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    .mission-title.completed {
        text-decoration-line: line-through;
        color: #536285;
    }
    
    .mission-start-button {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 4px 12px;
        gap: 4px;
        
        min-width: 54px;
        min-height: 24px;
        
        background: linear-gradient(180deg, #384665 0%, #28325D 100%);
        border-radius: 4px;
        border: none;
        cursor: pointer;
        
        flex-shrink: 0;
        order: 1;
    }
    
    .mission-start-button span {
        width: auto;
        height: auto;
        
        font-family: 'Montserrat', sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        line-height: 16px;
        color: #FFFFFF;
        
        flex: none;
        order: 0;
    }
    
    /* ============================================
       BOT CARD
       ============================================ */
    
    .overview-bot-card {
        width: 100%;
        min-height: auto;
        border-radius: 20px;
        
        background: linear-gradient(311.13deg, #00091E 22.82%, #303365 88.03%);
        
        flex: none;
        order: 4;
        
        position: relative;
        overflow: hidden;
    }
    
    /* Bot glows */
    .bot-glow-top {
        position: absolute;
        width: 192px;
        height: 117px;
        right: -40px;
        top: -66px;
        
        background: #4A6591;
        filter: blur(100px);
        transform: rotate(-37.35deg);
    }
    
    .bot-glow-bottom {
        position: absolute;
        width: 192px;
        height: 188.53px;
        left: -96px;
        bottom: -60px;
        
        background: #4A6591;
        filter: blur(200px);
        transform: rotate(-37.35deg);
    }
    
    .bot-header {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 16px 24px;
        gap: 8px;
        
        position: absolute;
        width: 100%;
        min-height: 60px;
        left: 0px;
        top: 0px;
    }
    
    .bot-header h3 {
        width: auto;
        height: auto;
        
        font-family: 'Montserrat', sans-serif;
        font-style: normal;
        font-weight: 600;
        font-size: 24px;
        line-height: 28px;
        
        background: linear-gradient(171.81deg, #FFFFFF 27.25%, #C6C1FF 78.81%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        
        margin: 0;
        flex: none;
        order: 0;
    }
    
    .bot-details {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0px;
        gap: 8px;
        
        position: absolute;
        width: 161px;
        height: 104px;
        left: 24px;
        top: 68px;
    }
    
    .bot-detail-row {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0px;
        gap: 15px;
        
        width: 161px;
        height: 20px;
        
        flex: none;
        align-self: stretch;
    }
    
    .bot-detail-label {
        width: 64px;
        height: 20px;
        
        font-family: 'Montserrat', sans-serif;
        font-style: normal;
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
        color: #536285;
        
        flex: none;
        order: 0;
    }
    
    .bot-detail-value {
        height: 20px;
        
        font-family: 'Montserrat', sans-serif;
        font-style: normal;
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
        color: #FFFFFF;
        
        flex: none;
        order: 1;
    }
    
    .bot-detail-value.success {
        color: #7BFFBF;
    }
    
    .bot-detail-value.warning {
        color: #FED589;
    }
    
    .bot-test-button {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 12px 32px;
        gap: 8px;
        
        position: absolute;
        width: 272px;
        height: 48px;
        left: 14px;
        bottom: 24px;
        
        background: linear-gradient(94.22deg, #555DFF 27.35%, #333899 69.19%);
        border-radius: 40px;
        border: none;
        cursor: pointer;
        
        transition: all 0.2s;
    }
    
    .bot-test-button:active {
        transform: scale(0.98);
    }
    
    .bot-test-button span {
        width: auto;
        height: 24px;
        
        font-family: 'Montserrat', sans-serif;
        font-style: normal;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
        color: #FFFFFF;
        
        flex: none;
        order: 0;
    }
}

/* ============================================
   HIDE DESKTOP OVERVIEW LAYOUT ON MOBILE
   ============================================ */

@media (max-width: 768px) {
    /* Hide desktop 2-column grid */
    .overview-content.desktop-layout {
        display: none !important;
    }
    
    /* Show mobile single-column layout */
    .overview-content.mobile-layout {
        display: flex !important;
    }
}

@media (min-width: 769px) {
    /* Hide mobile layout on desktop */
    .overview-content.mobile-layout {
        display: none !important;
    }
    
    /* Show desktop layout */
    .overview-content.desktop-layout {
        display: flex !important;
    }
}