/* Header */
@media (max-width: 521px) {
    header {
        height: 70px;
        flex-wrap: wrap;
        padding: 0;
    }
    .logo-area { 
        order: 1; 
        flex: 1; 
        font-size: 23px;
        gap: 1px;
    }
    .logo-area img{
        width: 28px;
        height: 28px;
    }
    .header-actions { 
        order: 2; 
    }
    .search-container { 
        order: 3; 
        height: 31px; 
        margin-top:-2px;
        width: 100%;  
    }
    nav { display: none; }
       .btn {
           padding: 7px 15px;
           border-radius: 3px;
           font-size: 13px;
}
.search-container{
    border-radius: 0;
}
}
@media (min-width:400px) {
    header {
        height: 78px !important;
        flex-wrap: wrap;
        padding: 0;
    }

    .logo-area{
        padding-bottom: 2px;
        padding: 5px;
    }
    .header-actions{
        padding: 5px;
        padding-bottom: 2px;
    }
}
@media (min-width:761px) {
    header{
        height: 80px !important;
    }
    .logo-area{
        font-size: 25px !important;
    }
    .logo-area img{
        width: 27px !important;
        height: 27px !important;
    }
} 
@media (min-width: 522px) and (max-width: 768px) {
    header {
        padding: 0 !important; 
        flex-wrap: wrap;
        display: flex;
        align-items: center;
        height: 84px !important;
    } 
    .logo-area { 
        order: 1; 
        flex: 0 0 auto; 
        display: flex;
        align-items: center;
        gap: 1px;
        font-size: 24px;
    }
.logo-area img{
    width: 25px;
    height: 25px;
}

    nav { 
        order: 2; 
        display: flex; 
        gap: 12px;
         margin-left: auto;
        align-items: center;
    }

    nav a {
        font-size: 18px;
        white-space: nowrap;
    }
 
    .search-container { 
        border-radius: 0 6px 6px 0;
        order: 3; 
        flex: 1; 
        min-width: 250px; ;
    }

    .header-actions { 
        order: 4; 
        display: flex;
        align-items: center;
        gap: 12px; 
        margin-left: 15px; 
    }
}
@media (min-width: 769px) {
    header {
        flex-wrap: nowrap; 
        height: 55px !important; 
        padding: 5px;
        justify-content: space-between;
    } 
    .logo-area { order: 1; font-size: 22px !important; gap: 2px !important;} 
    nav { display: none; }
    .search-container { 
        order: 3; 
        border-radius: 5px;
        flex: 0.6;
        width: 100%;
    }
    .header-actions { order: 4; }
}
@media (min-width:1001px) {
    header {
        flex-wrap: nowrap; 
        height: 55px !important; 
        padding: 5px;
        align-items: center;
        justify-content: space-between;
    } 
    .logo-area { order: 1; font-size: 23px !important; gap: 2px !important;
    align-self: flex-start; padding: 0 !important;} 
    .logo-area img{
        width: 29px !important;
        height: 29px !important;
    }
    nav { display: block; order: 2; display: flex;
    align-items: end; }
    .search-container { 
        order: 3; 
        border-radius: 20px;
        flex: 0.6; 
        width: 100%;
    }
    .header-actions { order: 4; }
}

 
 
@media (min-width: 522px) and (max-width: 768px) {
    main { 
        margin-top: 84px !important;
        height: calc(100vh - 84px) !important; 
    }
    .right-panel { height: calc(100vh - 84px) !important; }
}
@media (max-width: 425px) {
    main {
        margin-top: 70px !important;
        height: calc(100vh - 70px) !important;
    }
    .editor-header{
        padding:0 !important;
    }
    .tab {
    padding: 0px; 
    gap: 0px; 
}
    /* Right Side Actions Panel (Buttons) */
.actions {
    display: flex;
    gap: 5px;
    padding: 0 0px; 
}
    .right-panel { height: calc(100vh - 70px) !important; }
}
@media (min-width: 400px) and (max-width: 521px) {
    main {
        margin-top: 78px !important;
        height: calc(100vh - 78px) !important;
    }
    .right-panel { height: calc(100vh - 78px) !important; }
}

/* Floating Sidebar Top Positions */
@media (min-width: 769px) and (max-width: 900px) { body .left-panel { top: 58px !important; } }
@media (max-width: 521px) { body .left-panel { top: 80px !important; } }
@media (max-width: 399px) { body .left-panel { top: 72px !important; } }


@media (max-width: 900px) {
    .pra-container {
        flex-direction: column;
        height: 100%; 
    }

    /* राइट पैनल अब बिना किसी एब्सोल्यूट पोज़ीशन के 100% फिट रहेगा */
    .right-panel { 
        width: 100% !important;
        height: 100% !important;
        display: flex;
        flex-direction: column;
        overflow: hidden; 
        position: relative !important; /* 👈 इसे वापस रिलेटिव किया */
    }

    #googleToggle {
        display: block !important; 
    }

    /* फ्लोटिंग साइडबार पोजीशन */
    body .left-panel {
        display: flex !important;        
        position: fixed !important;     
        width: 320px !important;         
        min-width: 320px !important;
        z-index: 99999 !important;       
        bottom: 0 !important;
        height: auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch; 
        transform: translateX(-100%) !important; 
        opacity: 0 !important;
        box-shadow: none;
        transition: transform 0.3s ease-out, opacity 0.3s ease-out !important; 
    }

    body .left-panel.active {
        transform: translateX(0) !important; 
        opacity: 1 !important; 
    }

    main {
        margin-left: 0 !important;
        margin-top: 0 !important; /* मार्जिन हटाकर सिर्फ top का इस्तेमाल करेंगे */
        width: 100% !important;
    }
}
  

/* ==========================================================================
   अलग-अलग मोबाइल स्क्रीन के हिसाब से TOP (Header Height) सेट करना
   ========================================================================== */

/* 1. MAIN टैग के लिए टॉप पोजीशन */
@media (min-width: 522px) and (max-width: 768px) {
    main { top: 84px !important; }
}
@media (max-width: 399px) {
    main { top: 70px !important; }
} 
@media (min-width: 400px) and (max-width: 521px) {
    main { top: 78px !important; }
}

/* 2. LEFT PANEL (Sidebar) के लिए टॉप पोजीशन */
@media (min-width: 769px) and (max-width: 900px) { body .left-panel { top: 58px !important; } }
@media (max-width: 521px) { body .left-panel { top: 80px !important; } }
@media (max-width: 399px) { body .left-panel { top: 72px !important; } }