/* ==========================================================================
   1. COMPACT SETTINGS POPUP BASE STRUCTURE (LIGHT MODE BASELINE)
   ========================================================================== */
.compact-settings-popup {
    position: fixed;
    bottom: 80px;
    left: 20px;
    width: 580px;
    height: 360px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    z-index: 9999;
    font-family: 'Inter', sans-serif;
    animation: popupScaleIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes popupScaleIn {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.settings-title {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
    padding: 16px 20px 8px 20px;
    margin: 0;
}

/* === ULTIMATE FAIL-SAFE CLOSE BUTTON CONFIGURATION (LIGHT MODE) === */
/* Saare possible class names ko ek saath bind kar diya taaki HTML structural mismatch khatam ho sake */
.setting-close-button,
.settings-close-btn,
.close-settings-btn,
.compact-settings-popup .close-btn {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    background: #f3f4f6 !important;
    border: none !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    opacity: 0.8 !important;
    transition: all 0.2s ease !important;
    z-index: 10005 !important;
    padding: 0 !important;
    text-decoration: none !important;
}

.setting-close-button:hover,
.settings-close-btn:hover,
.compact-settings-popup .close-btn:hover {
    opacity: 1 !important;
    background: #e5e7eb !important;
}

/* Pure CSS Fail-safe Cross System: Agar andar HTML arrow icon crash ya miss bhi hoga, toh ye cross ensure karega visibility */
.setting-close-button::before, .setting-close-button::after,
.settings-close-btn::before, .settings-close-btn::after,
.compact-settings-popup .close-btn::before, .compact-settings-popup .close-btn::after {
    content: '' !important;
    position: absolute !important;
    width: 12px !important;
    height: 2px !important;
    background-color: #4b5563 !important; /* Premium Dark Grey Line */
    border-radius: 2px !important;
    display: block !important;
}
.setting-close-button::before, .settings-close-btn::before, .compact-settings-popup .close-btn::before {
    transform: rotate(45deg) !important;
}
.setting-close-button::after, .settings-close-btn::after, .compact-settings-popup .close-btn::after {
    transform: rotate(-45deg) !important;
}

/* Agar HTML ke andar font icon handle ho rha ho toh use hidden/clean backup balance rakhne ke liye settings */
.setting-close-button i, .setting-close-button svg,
.settings-close-btn i, .settings-close-btn svg {
    display: none !important; /* Pseudo-elements are handling cross now perfectly */
}

.settings-workspace {
    display: flex;
    flex: 1;
    overflow: hidden;
    padding: 0 8px 8px 20px;
}

.settings-menu-sidebar {
    width: 140px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 8px;
    border-right: 1px solid #f3f4f6;
    padding-right: 12px;
}

.menu-tab-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: none;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: #4b5563;
    text-align: left;
}
.menu-tab-btn:hover { background: #f9fafb; color: #111827; }
.menu-tab-btn.active { background: #f3f4f6; color: #4f46e5; font-weight: 600; }

.settings-content-display {
    flex: 1;
    padding: 8px 8px 8px 16px;
    overflow-y: auto;
}

.settings-panel { display: none; }
.settings-panel.active { display: block; }

.settings-panel h3 { font-size: 15px; font-weight: 600; color: #111827; margin: 0 0 2px 0; }
.panel-subtitle { font-size: 12px; color: #6b7280; margin: 0 0 16px 0; }

.setting-option-item { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; }
.option-text { display: flex; flex-direction: column; gap: 1px; }
.option-title { font-size: 13px; font-weight: 600; color: #111827; }
.option-desc { font-size: 11px; color: #6b7280; }

.theme-toggle-group { display: flex; background: #f3f4f6; padding: 3px; border-radius: 8px; border: 1px solid #e5e7eb; }
.theme-btn { display: flex; align-items: center; gap: 4px; border: none; background: transparent; padding: 5px 12px; border-radius: 6px; font-size: 12px; font-weight: 500; color: #4b5563; cursor: pointer; }
.theme-btn.active { background: #ffffff; color: #4f46e5; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05); font-weight: 600; }

.dropdown-wrapper { position: relative; width: 100%; }
.dropdown-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #4b5563; font-size: 16px; pointer-events: none; }
.custom-select { width: 100%; height: 38px; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 0 12px 0 36px; font-size: 13px; font-weight: 500; color: #111827; outline: none; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>"); background-repeat: no-repeat; background-position: right 12px center; background-size: 14px; }

.ios-toggle { position: relative; display: inline-block; width: 40px; height: 22px; }
.ios-toggle input { opacity: 0; width: 0; height: 0; }
.ios-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #e5e7eb; border-radius: 20px; transition: 0.2s; }
.ios-slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background-color: white; border-radius: 50%; transition: 0.2s; }
.ios-toggle input:checked + .ios-slider { background-color: #4f46e5; }
.ios-toggle input:checked + .ios-slider:before { transform: translateX(18px); }

.account-row { background: #f9fafb; padding: 12px; border-radius: 8px; border: 1px solid #f3f4f6; }
.settings-logout-btn { background: transparent; border: 1px solid #fee2e2; color: #ef4444; padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 4px; }

.settings-info-banner { background: #f4f5ff; padding: 10px 20px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #e0e4ff; margin-top: auto; border-bottom-left-radius: 11px; border-bottom-right-radius: 11px;}
.banner-left { display: flex; align-items: center; gap: 8px; color: #4f46e5; font-size: 12px; font-weight: 500; }
.banner-auth-btn { background: #4f46e5; color: #ffffff; border: none; padding: 6px 12px; border-radius: 6px; font-size: 11px; font-weight: 600; cursor: pointer; }


/* ==========================================================================
   2. PREMIUM ULTRA-DARK DASHBOARD THEME CONFIGURATIONS (EXACT LOOK)
   ========================================================================== */
body.dark-theme {
    background: #131722 !important;
    background-color: #131722 !important;
    color: #ffffff !important;
}

/* --- SIDEBAR SHADE SYSTEM --- */
body.dark-theme .sidebar,
body.dark-theme aside,
body.dark-theme [id*="sidebar"],
body.dark-theme [class*="sidebar"] {
    background: #0e1118 !important;
    background-color: #0e1118 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
}

body.dark-theme .sidebar div,
body.dark-theme [class*="recent"] {
    background-color: transparent !important;
}

/* Recent Block Background */
body.dark-theme .sidebar .border,
body.dark-theme [class*="recent-chats"],
body.dark-theme div[style*="border: 1px solid rgb(255, 255, 255)"],
body.dark-theme div[style*="border:1px solid white"] {
    background: #171d2c !important;
    background-color: #171d2c !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

body.dark-theme div[class*="upgrade"],
body.dark-theme .upgrade-box,
body.dark-theme [class*="pro-card"] {
    background: #141824 !important;
    background-color: #141824 !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* --- ULTIMATE NUCLEAR RESET FOR FLOATING WHITE BLURS & GRADIENT OVERLAYS --- */
body.dark-theme div[style*="position: absolute"], 
body.dark-theme div[style*="position: fixed"],
body.dark-theme div[style*="bottom:"], 
body.dark-theme .main-content div,
body.dark-theme [class*="bottom-container"], 
body.dark-theme [class*="input-wrapper"],
body.dark-theme [class*="prompt-box"],
body.dark-theme div[style*="background: linear-gradient"],
body.dark-theme div[style*="background-image: linear-gradient"],
body.dark-theme div[style*="background:linear-gradient"],
body.dark-theme div[style*="background-image:linear-gradient"] {
    background-image: none !important;
    background-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ==========================================================================
   LINKGPT PREMIUM PROMPT CAPSULE INTEGRATION (DARK THEME SPECIFIC)
   ========================================================================== */
body.dark-theme [class*="input-container"],
body.dark-theme [class*="search-box"],
body.dark-theme form[class*="input"],
body.dark-theme div[style*="border: 1px solid rgb(229, 231, 235)"],
body.dark-theme div[style*="border:1px solid #e5e7eb"],
body.dark-theme .input-container {
    background: #171c28 !important;
    background-color: #171c28 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
}

body.dark-theme [class*="input-container"] i[class*="link"],
body.dark-theme [class*="search-box"] i,
body.dark-theme form i[class*="link"],
body.dark-theme .input-container svg,
body.dark-theme .input-container i {
    color: #4f46e5 !important;
}

body.dark-theme input[type="text"],
body.dark-theme textarea,
body.dark-theme [class*="input-container"] input {
    background: transparent !important;
    background-color: transparent !important;
    color: #ffffff !important;
}

body.dark-theme input::placeholder,
body.dark-theme textarea::placeholder {
    color: #6b7280 !important;
}

/* --- SETTINGS POPUP DESIGN (DARK THEME SPECIFIC OVERRIDES) --- */
body.dark-theme .compact-settings-popup { 
    background: #16161e !important; 
    border-color: #23232f !important; 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important; 
}

/* === PERFECT CLOSE BUTTON CONFIGURATION (DARK MODE VARIATION) === */
body.dark-theme .setting-close-button,
body.dark-theme .settings-close-btn,
body.dark-theme .compact-settings-popup .close-btn { 
    background: #23232f !important; 
}
body.dark-theme .setting-close-button:hover,
body.dark-theme .settings-close-btn:hover,
body.dark-theme .compact-settings-popup .close-btn:hover { 
    background: #2e2e3f !important; 
}

/* Dark theme cross lines configuration */
body.dark-theme .setting-close-button::before, body.dark-theme .setting-close-button::after,
body.dark-theme .settings-close-btn::before, body.dark-theme .settings-close-btn::after,
body.dark-theme .compact-settings-popup .close-btn::before, body.dark-theme .compact-settings-popup .close-btn::after {
    background-color: #ffffff !important; /* Premium Clean White Arrow Lines for Dark Theme */
}

/* === BOTTOM BANNER AND TEXT INVISIBLE FIX (DARK MODE) === */
body.dark-theme .settings-info-banner {
    background: #1e1e2a !important;
    border-top: 1px solid #2d2d3f !important;
}
body.dark-theme .banner-left {
    color: #a5b4fc !important;
}
body.dark-theme .banner-left i,
body.dark-theme .banner-left svg {
    color: #a5b4fc !important;
}

body.dark-theme .settings-title, body.dark-theme .settings-panel h3, body.dark-theme .option-title, body.dark-theme .custom-select, body.dark-theme .menu-tab-btn:hover { color: #ffffff; }
body.dark-theme .panel-subtitle, body.dark-theme .option-desc, body.dark-theme .menu-tab-btn { color: #9ca3af; }
body.dark-theme .settings-menu-sidebar { border-color: #23232f; }
body.dark-theme .menu-tab-btn:hover { background: rgba(255, 255, 255, 0.05); }
body.dark-theme .menu-tab-btn.active { background: #23232f; color: #818cf8; }
body.dark-theme .theme-toggle-group { background: #1a1a24; border-color: #2b2b3a; }
body.dark-theme .theme-btn { color: #9ca3af; }
body.dark-theme .theme-btn.active { background: #2a2a36; color: #818cf8; }
body.dark-theme .custom-select { background-color: #1a1a24; border-color: #2b2b3a; }
body.dark-theme .account-row { background: #1a1a24; border-color: #2b2b3a; }

/* --- TYPOGRAPHY AND CORE ASSETS --- */
body.dark-theme h1, 
body.dark-theme h2, 
body.dark-theme h3, 
body.dark-theme p, 
body.dark-theme span, 
body.dark-theme label,
body.dark-theme .sidebar a {
    color: #ffffff !important;
}

/* PRESERVING BLUE COLOR FOR 'VIDEO' WORD TEXT */
body.dark-theme [class*="title"] span,
body.dark-theme h1 span,
body.dark-theme .blue-text,
body.dark-theme h1 [style*="color: rgb(56, 189, 248)"],
body.dark-theme h1 [style*="color:#38bdf8"] {
    color: #38bdf8 !important; 
}

body.dark-theme .panel-subtitle,
body.dark-theme .option-desc,
body.dark-theme [class*="subtitle"],
body.dark-theme [class*="muted"] {
    color: #9ca3af !important;
}

body.dark-theme i,
body.dark-theme svg {
    color: #e5e7eb !important;
}

/* ==========================================================================
   📱 LINKGPT SETTINGS POPUP MOBILE ENGINE (Claude AI Bottom-Sheet Style)
   ========================================================================== */
@media (max-width: 768px) {
    
    /* 1. Popup Container: Transformed into a Premium Bottom Sheet */
    .compact-settings-popup {
        top: auto !important;                     /* Kills absolute top locking */
        bottom: 0 !important;                    /* Locks to the bottom edge */
        left: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        
        /* 🔥 Oopar se thoda kam space binding (82% screen height) */
        height: 82vh !important;                 
        
        /* 🔥 Claude Style Curved Geometry */
        border-radius: 24px 24px 0 0 !important; /* Top left & right smooth rounded corners */
        
        border: none !important;
        border-top: 1px solid #e5e7eb !important;
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.12) !important; /* Elegant upward shadow */
        
        /* 🔥 Natural iOS/Premium Application Slide Up Animation */
        animation: popupSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    /* Adjust Title padding for the new layout frame */
    .settings-title {
        padding: 24px 16px 12px 16px !important;
        font-size: 17px !important;
    }

    /* Close Button safe re-positioning */
    .setting-close-button,
    .settings-close-btn,
    .close-settings-btn,
    .compact-settings-popup .close-btn {
        top: 20px !important;
        right: 16px !important;
    }

    /* 2. Workspace Layout Modification */
    .settings-workspace {
        flex-direction: column !important;
        padding: 0 16px 16px 16px !important;
    }

    /* 3. Horizontal Scrollable Tab Bar */
    .settings-menu-sidebar {
        width: 100% !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        border-right: none !important;
        border-bottom: 1px solid #f3f4f6 !important;
        padding-right: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 10px !important;
        gap: 6px !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .settings-menu-sidebar::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    .menu-tab-btn {
        padding: 8px 14px !important;
        font-size: 13px !important;
        flex-shrink: 0 !important;
        text-align: center !important;
    }

    /* 4. Options Content Spacing Display */
    .settings-content-display {
        padding: 16px 0 !important;
        width: 100% !important;
    }

    .setting-option-item {
        padding: 12px 0 !important;
    }

    .option-title {
        font-size: 14px !important;
    }

    .option-desc {
        font-size: 12px !important;
        max-width: 82% !important;
    }

    /* 5. Sticky Bottom Sync Banner Fit */
    .settings-info-banner {
        border-radius: 0 !important;
        padding: 14px 16px !important;
        margin-top: auto !important;
    }

    /* ==========================================================================
       🌙 DARK THEME TARGET INTEGRATION FOR THE BOTTOM SHEET
       ========================================================================== */
    body.dark-theme .compact-settings-popup {
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.4) !important;
    }
    body.dark-theme .settings-menu-sidebar {
        border-bottom-color: #23232f !important;
    }
}

/* ==========================================================================
   🚀 SMOOTH SLIDE UP ANIMATION KEYFRAME ENGINE
   ========================================================================== */
@keyframes popupSlideUp {
    from {
        transform: translateY(100%); /* Screen ke bahar se start hoga */
    }
    to {
        transform: translateY(0);    /* Smoothly apni resting position par lock hoga */
    }
}

/* ==========================================================================
   SETTINGS SIDEBAR FEEDBACK BUTTON CUSTOM HOVER TUNING
   ========================================================================== */
#sidebar-feedback-tab {
    margin-top: auto; /* Desktop par ise thoda baki options se balance rakhega */
}

#sidebar-feedback-tab:hover {
    color: #4f46e5 !important;
    background: #f3f4f6 !important;
}

/* Dark Theme Specific Balance */
body.dark-theme #sidebar-feedback-tab:hover {
    color: #818cf8 !important;
    background: #23232f !important;
}

/* Mobile Screen Engine Adjustments */
@media (max-width: 768px) {
    #sidebar-feedback-tab {
        margin-top: 0 !important; /* Mobile row responsive fluid grid adjustment */
    }

    /* 🔥 SETTING POPUP STABILITY FIX: Isse popup screen ke upar layers banayega, layout ko push nahi karega */
    .settings-popup-container, 
    [id*="settings-popup"], 
    .settings-modal { 
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-30%, -50%) !important; /* Center alignment without breaking layout */
        width: calc(100% - 32px) !important;
        max-width: 360px !important;
        z-index: 999999 !important;
        box-sizing: border-box !important;
    }

    /* 🔥 LOGIN/SIGNUP BUTTON ANCHOR: Isse buttons apni jagah par lock rahenge, upar-niche nahi bhagenge */
    .login-signup-btn-container,
    .auth-buttons-row,
    #login-signup-box {
        position: relative !important;
        bottom: 0 !important;
        clear: both !important;
        display: flex !important;
        gap: 10px !important;
        width: 100% !important;
        margin-top: auto !important; /* Flexbox safety push */
    }

    /* Prevent body reflow jumping when modal is active */
    body.modal-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
    }
}