/* LIAnalyzer Responsive */

/* Home */
@media(max-width:800px){
    .profile-page.home-page{
        padding:105px 16px 35px !important;
    }

    .home-page .main-profile-card{
        flex-direction:column !important;
        text-align:center !important;
        padding:24px !important;
    }

    .home-page .main-profile-card h1{
        text-align:center !important;
        font-size:34px !important;
    }

    .home-page .profile-grid{
        grid-template-columns:1fr !important;
        gap:16px !important;
    }

    .home-page .profile-action-btn{
        width:100% !important;
    }
}
/* Games */
@media(max-width:800px){
    .game-card .profile-action-btn:nth-of-type(1),
    .game-card .profile-action-btn:nth-of-type(2),
    .game-card .profile-action-btn:nth-of-type(3){
        width:100%;
        display:flex;
        margin-right:0;
    }
}
/* Games */

@media(max-width:800px){

    .game-actions{
        flex-direction:column;
    }

}
/* Game Hub */
@media(max-width:800px){
    .profile-page.game-page{
        padding:105px 16px 35px !important;
    }

    .game-page .profile-grid{
        grid-template-columns:1fr !important;
    }

    .game-page .profile-row{
        flex-direction:column;
        gap:6px;
    }

    .game-page .profile-row strong{
        max-width:100%;
        text-align:left;
    }
}
/* Guides */

@media(max-width:800px){

    .profile-page.guides-page{
        padding:105px 16px 35px !important;
    }

    .guides-page .main-profile-card{
        flex-direction:column !important;
        text-align:center !important;
    }

    .guides-page .main-profile-card h1{
        text-align:center !important;
    }

    .guides-page .profile-grid{
        grid-template-columns:1fr !important;
        gap:16px !important;
    }

}
/* Analyzer */

@media(max-width:1000px){

    .app-wrapper{
        grid-template-columns:1fr !important;
        padding:105px 18px 40px !important;
        gap:28px !important;
    }

    .left-panel{
        padding-top:0 !important;
        text-align:center;
    }

    .left-panel h2{
        font-size:38px !important;
        max-width:100% !important;
    }

    .left-panel p{
        max-width:100% !important;
        margin:0 auto;
    }

    .stats{
        justify-content:center;
        flex-wrap:wrap;
    }

    .analyzer-card{
        max-width:100% !important;
        margin:0 auto !important;
    }

    .results-grid{
        grid-template-columns:1fr !important;
    }
}

/* =========================
   NAVBAR MOBILE FIX
========================= */

.mobile-menu-btn{
    display:none;
    color:#8b5cf6;
    font-size:26px;
    font-weight:900;
    text-decoration:none;
    cursor:pointer;
    z-index:9999;
}

@media(max-width:800px){
    .navbar{
        padding:18px 22px !important;
        position:fixed;
        top:0;
        left:0;
        width:100%;
        z-index:9999;
    }

    .mobile-menu-btn{
        display:block !important;
    }

    .nav-links{
        display:none !important;
        position:absolute;
        top:64px;
        right:18px;
        width:230px;
        padding:14px;
        border-radius:16px;
        background:#0f172a;
        border:1px solid rgba(139,92,246,.35);
        box-shadow:0 18px 45px rgba(0,0,0,.35);
        flex-direction:column;
        gap:8px;
    }

    .nav-links.mobile-open{
        display:flex !important;
    }

    .nav-links a{
        margin-left:0 !important;
        padding:10px 12px;
        border-radius:10px;
        display:block;
    }

    .user-menu{
    width:100%;
    display:flex;
    justify-content:flex-start;
}

.user-menu-btn{
    width:auto !important;
    min-width:120px;
    margin:0 !important;
    padding:10px 14px !important;
    text-align:center;
}
}

/* =========================
   ANALYZER MOBILE FIX
========================= */

@media(max-width:800px){
    .app-wrapper{
        display:block !important;
        width:100% !important;
        max-width:100% !important;
        padding:95px 14px 35px !important;
    }

    .left-panel,
    .analyzer-card{
        width:100% !important;
        max-width:100% !important;
        margin:0 0 20px 0 !important;
    }

    .left-panel{
        height:auto !important;
        padding:22px 16px !important;
        text-align:left !important;
    }

    .left-panel h2{
        font-size:32px !important;
        line-height:1.15 !important;
    }

    .left-panel p{
        font-size:14px !important;
    }

    .stats{
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        gap:12px !important;
    }

    .stats div{
        width:100% !important;
    }

    .analyzer-card{
        padding:20px 14px !important;
        overflow:visible !important;
    }

    .performance-row,
    .analysis-row,
    .optimizer-row,
    .dashboard-actions{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:14px !important;
    }

    .results-grid{
        display:block !important;
    }

    .dashboard-card,
    .system-score-card,
    .game-optimizer-card,
    .system-optimizer-card{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        height:auto !important;
        min-height:0 !important;
        max-height:none !important;
        overflow:visible !important;
        grid-column:auto !important;
    }

    .system-analysis-grid{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:14px !important;
        height:auto !important;
    }

    .system-score,
    .system-details{
        width:100% !important;
        height:auto !important;
        min-height:0 !important;
    }

    .system-optimizer-card{
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
    }

    .system-optimizer-card h3{
        grid-column:1 / -1 !important;
    }

    .dashboard-actions .ai-fix-link{
        width:100% !important;
    }

    body{
        overflow-x:hidden;
    }
}

@media(max-width:480px){
    .stats,
    .system-optimizer-card{
        grid-template-columns:1fr !important;
    }

    .left-panel h2{
        font-size:28px !important;
    }
}

/* =========================
   AI FIX MOBILE FIX
========================= */

@media(max-width:800px){

    .ai-home{
        padding:95px 14px 35px !important;
        min-height:100vh !important;
    }

    .ai-layout{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:18px !important;
        width:100% !important;
        max-width:100% !important;
        margin:0 auto !important;
    }

    .ai-sidebar{
        width:100% !important;
        min-height:0 !important;
        padding:16px !important;
        border-radius:20px !important;
    }

    .ai-main-content{
        width:100% !important;
        max-width:100% !important;
        margin:0 !important;
    }

    .ai-center{
        width:100% !important;
        max-width:100% !important;
        margin:0 !important;
        text-align:left !important;
    }

    .ai-center h1{
        font-size:30px !important;
        line-height:1.15 !important;
        text-align:left !important;
    }

    .ai-center p{
        font-size:14px !important;
        line-height:1.6 !important;
    }

    .ai-summary-grid{
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        gap:10px !important;
    }

    .ai-search-form{
        width:100% !important;
        max-width:100% !important;
        min-height:58px !important;
        border-radius:20px !important;
    }

    .ai-search-form.bottom{
        position:fixed !important;
        left:14px !important;
        right:14px !important;
        bottom:14px !important;
        transform:none !important;
        width:auto !important;
        max-width:none !important;
        z-index:999 !important;
    }

    .ai-chat-screen{
        width:100% !important;
        max-width:100% !important;
        padding-bottom:95px !important;
    }

    .chat-pair,
    .ai-bubble{
        width:100% !important;
        max-width:100% !important;
    }

    .user-bubble{
        max-width:85% !important;
    }

    .ai-bubble{
        padding:16px !important;
    }

    .ai-suggestions{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:10px !important;
    }

    .ai-suggestions button{
        width:100% !important;
        margin:0 !important;
    }

    .conversation-item{
        width:100% !important;
    }

    body.ai-page{
        overflow-x:hidden !important;
    }
}

@media(max-width:480px){

    .ai-summary-grid{
        grid-template-columns:1fr !important;
    }

    .ai-center h1{
        font-size:26px !important;
    }

    .ai-search-form textarea{
        font-size:14px !important;
    }
}

/* =========================
   AI FIX MOBILE REAL FIX
========================= */

@media(max-width:900px){

    body.ai-page{
        overflow-x:hidden !important;
    }

    body.ai-page .ai-home{
        width:100% !important;
        max-width:100% !important;
        padding:90px 14px 35px !important;
    }

    body.ai-page .ai-layout{
        display:flex !important;
        flex-direction:column !important;
        width:100% !important;
        max-width:100% !important;
        margin:0 !important;
        gap:18px !important;
        grid-template-columns:none !important;
    }

    body.ai-page .ai-sidebar{
        display:block !important;
        width:100% !important;
        max-width:100% !important;
        min-height:auto !important;
        margin:0 !important;
        padding:16px !important;
    }

    body.ai-page .ai-main-content{
        width:100% !important;
        max-width:100% !important;
        margin:0 !important;
    }

    body.ai-page .ai-center{
        width:100% !important;
        max-width:100% !important;
        margin:0 !important;
    }
}

/* AI FIX MOBILE SCALE FIX */

@media(max-width:900px){

    body.ai-page .ai-home{
        padding:80px 10px 28px !important;
    }

    body.ai-page .ai-sidebar,
    body.ai-page .ai-main-content,
    body.ai-page .ai-chat-screen,
    body.ai-page .chat-pair,
    body.ai-page .ai-bubble,
    body.ai-page .ai-summary-card{
        width:100% !important;
        max-width:100% !important;
        box-sizing:border-box !important;
    }

    body.ai-page .ai-sidebar{
        padding:14px !important;
        border-radius:18px !important;
    }

    body.ai-page .ai-bubble{
        padding:14px !important;
        border-radius:18px !important;
    }

    body.ai-page .ai-summary-grid{
        grid-template-columns:1fr !important;
    }

    body.ai-page .ai-summary-grid > div{
        padding:10px !important;
    }

    body.ai-page .conversation-item{
        padding:12px !important;
    }

    body.ai-page .new-chat-btn{
        height:46px !important;
        font-size:14px !important;
        margin-bottom:12px !important;
    }

    body.ai-page .ai-search-form.bottom{
        left:10px !important;
        right:10px !important;
        bottom:10px !important;
    }
}
/* AI FIX MOBILE NO HORIZONTAL SCROLL */

@media(max-width:900px){

    body.ai-page *{
        max-width:100% !important;
        box-sizing:border-box !important;
    }

    body.ai-page{
        
    }

    body.ai-page .ai-home{
        width:100% !important;
        padding:80px 10px 32px !important;
    }

    body.ai-page .ai-layout{
        width:100% !important;
        
    }

    body.ai-page .ai-sidebar{
        overflow:hidden !important;
    }

    body.ai-page .conversation-item{
        display:grid !important;
        grid-template-columns:1fr auto auto auto !important;
        gap:6px !important;
        align-items:center !important;
    }

    body.ai-page .conversation-link{
        min-width:0 !important;
        overflow:hidden !important;
    }

    body.ai-page .conversation-link,
    body.ai-page .conversation-link small{
        white-space:nowrap !important;
        overflow:hidden !important;
        text-overflow:ellipsis !important;
    }

    body.ai-page .conversation-pin,
    body.ai-page .conversation-edit,
    body.ai-page .conversation-delete{
        width:24px !important;
        height:24px !important;
        min-width:24px !important;
        padding:0 !important;
        font-size:12px !important;
    }

    body.ai-page .ai-bubble,
    body.ai-page .ai-summary-card{
        overflow:hidden !important;
    }
}

/* AI FIX MOBILE FIT SCREEN FINAL */

@media(max-width:900px){

    body.ai-page{
        overflow-x:auto !important;
    }

    body.ai-page .ai-home{
        width:100% !important;
        padding:80px 8px 30px !important;
    }

    body.ai-page .ai-layout{
        width:100% !important;
        max-width:100% !important;
        display:flex !important;
        flex-direction:column !important;
        gap:18px !important;
        margin:0 !important;
    }

    body.ai-page .ai-sidebar,
    body.ai-page .ai-main-content,
    body.ai-page .ai-chat-screen,
    body.ai-page .chat-pair,
    body.ai-page .ai-bubble,
    body.ai-page .ai-summary-card{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        box-sizing:border-box !important;
    }

    body.ai-page .ai-bubble{
        padding:12px !important;
    }

    body.ai-page .ai-summary-card{
        padding:12px !important;
    }

    body.ai-page .ai-summary-grid{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:8px !important;
    }

    body.ai-page .ai-summary-grid > div{
        width:100% !important;
        min-width:0 !important;
    }
}
/* =========================
   PRICING MOBILE FIX
========================= */

@media(max-width:800px){

    .profile-page{
        width:100% !important;
        max-width:100% !important;
        padding:95px 14px 35px !important;
    }

    .main-profile-card{
        flex-direction:column !important;
        align-items:flex-start !important;
        text-align:left !important;
        padding:22px 18px !important;
        gap:16px !important;
    }

    .main-profile-card h1{
        text-align:left !important;
        font-size:32px !important;
    }

    .profile-avatar{
        width:70px !important;
        height:70px !important;
        min-width:70px !important;
    }

    .profile-grid{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:16px !important;
    }

    .profile-card{
        width:100% !important;
        max-width:100% !important;
        padding:20px 16px !important;
    }

    .profile-row{
        gap:12px !important;
    }

    .profile-action-btn{
        width:100% !important;
    }
}


/* =========================
   SUBSCRIPTION MOBILE FIX
========================= */

@media(max-width:800px){

    .subscription-page{
        width:100% !important;
        max-width:100% !important;
        padding:95px 14px 35px !important;
    }

    .subscription-header h1{
        font-size:32px !important;
    }

    .subscription-grid{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:16px !important;
    }

    .sub-card{
        width:100% !important;
        max-width:100% !important;
        padding:20px 16px !important;
    }

    .wide-card{
        grid-column:auto !important;
    }

    .plan-name{
        flex-direction:column !important;
        align-items:flex-start !important;
        gap:8px !important;
    }

    .sub-info div,
    .usage-list div{
        flex-direction:column !important;
        align-items:flex-start !important;
        gap:5px !important;
    }

    .sub-info strong,
    .usage-list strong{
        text-align:left !important;
    }

    .roadmap-row{
        grid-template-columns:1fr !important;
    }
}
/* =========================
   GAMES + GUIDES MOBILE FIX
========================= */

@media(max-width:800px){

    .profile-page,
    .profile-page.guides-page{
        width:100% !important;
        max-width:100% !important;
        padding:95px 14px 35px !important;
    }

    .profile-page .main-profile-card{
        width:100% !important;
        max-width:100% !important;
        flex-direction:column !important;
        align-items:flex-start !important;
        text-align:left !important;
        padding:22px 18px !important;
        gap:16px !important;
    }

    .profile-page .main-profile-card h1{
        text-align:left !important;
        font-size:32px !important;
    }

    .profile-page .profile-avatar{
        width:70px !important;
        height:70px !important;
        min-width:70px !important;
    }

    #gameSearch,
    #guideSearch{
        width:100% !important;
        max-width:100% !important;
        margin:0 0 18px 0 !important;
    }

    .profile-page .profile-grid{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:16px !important;
        width:100% !important;
        max-width:100% !important;
    }

    .game-card,
    .guide-card{
        width:100% !important;
        max-width:100% !important;
        padding:20px 16px !important;
    }

    .game-card .profile-row,
    .guide-card .profile-row{
        flex-direction:column !important;
        align-items:flex-start !important;
        gap:5px !important;
    }

    .game-card .profile-row strong,
    .guide-card .profile-row strong{
        text-align:left !important;
    }

    .game-actions{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:10px !important;
    }

    .game-actions .profile-action-btn,
    .game-actions + .profile-action-btn,
    .guide-card .profile-action-btn{
        width:100% !important;
        margin:0 !important;
    }
}

/* PROFILE + SETTINGS MOBILE FIX */

@media(max-width:800px){

    .profile-page{
        width:100% !important;
        max-width:100% !important;
        padding:95px 14px 35px !important;
    }

    .profile-page .main-profile-card{
        flex-direction:column !important;
        align-items:flex-start !important;
        text-align:left !important;
        padding:22px 18px !important;
        gap:16px !important;
    }

    .profile-page .main-profile-card h1{
        text-align:left !important;
        font-size:32px !important;
    }

    .profile-page .profile-avatar{
        width:70px !important;
        height:70px !important;
        min-width:70px !important;
    }

    .profile-page .profile-grid{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:16px !important;
    }

    .profile-page .profile-card{
        width:100% !important;
        max-width:100% !important;
        padding:20px 16px !important;
    }

    .profile-page .profile-row{
        flex-direction:column !important;
        align-items:flex-start !important;
        gap:5px !important;
    }

    .profile-page .profile-row strong{
        max-width:100% !important;
        text-align:left !important;
        word-break:break-word !important;
    }

    .profile-page .profile-action-btn{
        width:100% !important;
        margin-top:12px !important;
    }

    .profile-page form button{
        width:100% !important;
    }
}