/* width */
::-webkit-scrollbar {
  max-width: 8px;
}

/* Track */
::-webkit-scrollbar-track {
  background: none;
  max-width: 5px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 5px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #0074dd;
}
/* Chrome, Safari, Edge */
.search::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}
/* Firefox (future compatibility) */
.search::-moz-search-clear {
  display: none;
}

    /* --- SITE PROTECTION & NO SELECT --- */
        body {
            -webkit-user-select: none; /* Safari */
            -ms-user-select: none; /* IE 10 and IE 11 */
            user-select: none; /* Standard syntax */
            -webkit-touch-callout: none; /* iOS Safari disable callout */
        }
        
        /* Input fields me text select karne ki permission dein */
        input, textarea {
            user-select: text;
            -webkit-user-select: text;
        }

        /* Images ko drag hone se rokein (Save as rokne ke liye) */
        img {
            -webkit-user-drag: none;
            -khtml-user-drag: none;
            -moz-user-drag: none;
            -o-user-drag: none;
            pointer-events: auto; /* Click allow karein par drag nahi */
        }
        /* --- 1. THEME VARIABLES --- */
        :root {
            /* UI Colors */
            --primary-color: #0074dd;
            --bg-body: #eef2f5;
            --bg-sidebar: #fafafa;
            --bg-header: #fafafa;
            --bg-input: #f0f2f5;
            --bg-menu: #fafafa;
            --text-main: #444;
            --text-main2: #fafafa;
            --text-sec: #777777;
            --border-light: 1px solid #e1e4e8;
            
            /* Chat Area Specifics */
            --chat-bg-source: url('https://user-images.githubusercontent.com/15075759/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png');
            --chat-opacity: 1;
            --chat-base-color: #efe7dd;

            /* Messages */
            --msg-my-bg: #0074dd; 
            --msg-their-bg: #fafafa;
            
            /* Icons & Status */
            --icon-filter: none;
            --green-active: #25D366;
            --badge-color: #0074dd;
            --shadow-menu: 0 10px 30px rgba(0,0,0,0.15); 
            --show-hr: rgba(0,0,0,0.05) ;
            --show-hr-active: rgba(0,0,0,0.03) ; 
            
            --sys-msg-bg: #ebf7ff;
            --sys-msg-text: #b45309;  
            --admin-pnl-bg: #e1f1ff92; 
            --scroll-btn-bg: #fff; 
            --header-glow: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.4));
        }

        /* --- DARK MODE --- */
        [data-theme="dark"] {
            --bg-body: #111b21;
            --bg-sidebar: #111111;
            --bg-header: #111111;
            --bg-input: #2a2a2a;
            --bg-menu: #1e1e1e;
            
            --text-main: #ccc;
            --text-main2: #ccc;
            --text-sec: #b0b0b0;
            --border-light: 1px solid #333333;
            
            --msg-their-bg: #1d2f3d; 
            --msg-my-bg: #1c3150;
            
            --chat-base-color: #000000; 
            
            --icon-filter: invert(1);
            --shadow-menu: 0 10px 30px rgba(0,0,0,0.5); 
            --show-hr: #39393980;
            --show-hr-active: #3232323b; 
            
            --chat-bg-source: url('/theme/bg_dark.png');
            --chat-opacity: 1;
            --chat-base-color: #111b21; 
            
            --sys-msg-bg: #334155;
            --sys-msg-text: #fbbf24; 
            --admin-pnl-bg: #2a2a2a; 
            --scroll-btn-bg: #334155; 
            
      }

        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; -webkit-tap-highlight-color: transparent; }
        html, body { height: 100%; width: 100%; overflow: hidden; position: fixed; background-color: var(--bg-header); display: flex; justify-content: center; }
        main { display: flex; width: 100%; max-width: 1600px; height: 100%; background: var(--bg-sidebar); position: relative; box-shadow: var(--shadow-soft); }
        .container-1 { width: 30%; height: 100%; background: var(--bg-sidebar); border-right: var(--border-light); display: flex; flex-direction: column; z-index: 10; position: relative; }
        header { height: 65px; display: flex; align-items: center; justify-content: space-between; padding: 0 15px; background: var(--bg-header); flex-shrink: 0; border-bottom: 1px solid rgba(0,0,0,0.05); }
        header h1 { color: var(--primary-color); font-size: 28px; font-weight: 700; letter-spacing: -0.5px; } 
       .header_icon { display: flex; align-items: center; gap: 12px; } 
       

.icon-btn {
    width: 36px;
    height: 36px; 
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    border-radius: 50%; 
    transition: 0.2s;
}

.nav-icon { width: 24px; height: 24px; opacity: 0.8; filter: var(--icon-filter); transition: transform 0.2s; }
.icon-btn:hover { background-color: rgba(0,0,0,0.05); }
.icon-btn:hover .nav-icon { transform: scale(1.1); opacity: 1; }


.vip-trigger { width: 30px; height: 30px; display: flex;align-items: center; justify-content: center; position: relative; cursor: pointer; 
border-radius: 50%; border: 1.5px solid #FFD700; box-shadow: 0 0 5px rgba(255, 215, 0, 0.3); overflow: visible; transition: 0.2s;
}

.vip-svg {
    width: 16px; height: 16px; z-index: 2;transition: 0.3s;
    filter: invert(81%) sepia(35%) saturate(960%) hue-rotate(359deg) brightness(103%) contrast(104%);
}

:root:not([data-theme="dark"]) .vip-trigger {
    border-color: #d4af37; 
    background: rgba(255, 215, 0, 0.05); 
}
:root:not([data-theme="dark"]) .vip-svg {
    filter: invert(72%) sepia(68%) saturate(464%) hue-rotate(3deg) brightness(90%) contrast(90%);
}

.vip-trigger::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 100%; height: 100%;
    border-radius: 50%;
    border: 1px solid #FFD700;
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
    pointer-events: none;
    animation: rippleGold 2s infinite;
} 

.vip-trigger.expiring-soon {
    border-color: #ff4757 !important;
    box-shadow: 0 0 10px rgba(255, 71, 87, 0.6) !important;
    background: rgba(255, 71, 87, 0.1) !important;
    animation: panicPulse 1s infinite alternate;
}

.vip-trigger.expiring-soon::before { border-color: #ff4757 !important; animation: rippleRed 1.5s infinite !important; }
.vip-trigger.expiring-soon .vip-svg { filter: invert(36%) sepia(68%) saturate(2768%) hue-rotate(339deg) brightness(100%) contrast(96%) !important; }

@keyframes rippleRed {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
    100% { transform: translate(-50%, -50%) scale(1.8); opacity: 0; }
}

@keyframes rippleGold {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
    100% { transform: translate(-50%, -50%) scale(1.8); opacity: 0; }
}

.vip-trigger:hover { transform: scale(1.05); box-shadow: 0 0 8px rgba(255, 215, 0, 0.6); }

.notif-badge-count { position: absolute; top: 4px; right: 4px; background: #ff3b30; color: white;
    font-size: 9px; font-weight: 800; height: 14px; width: 14px; display: flex; align-items: center;
    justify-content: center; border-radius: 50%;  border: 2px solid var(--bg-header);
}       
         .header_icon img:hover { opacity: 1; transform: scale(1.05); }

        /* --- ACCOUNT MENU --- */
        .account-menu { position: absolute; top: 60px; right: 15px; width: 260px; background: var(--bg-menu); border-radius: 12px; box-shadow: var(--shadow-menu); padding: 10px 0; display: none; z-index: 100; border: var(--border-light); animation: fadeIn 0.2s ease; }
        .account-menu.show { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

        .menu-item { display: flex; align-items: center; padding: 12px 20px; cursor: pointer; color: var(--text-main); font-size: 14px; transition: background 0.2s; }
        .menu-item:hover { background-color: rgba(0,0,0,0.05); }
        .menu-icon { width: 20px; margin-right: 15px; text-align: center; color: var(--text-sec); font-size: 16px; }
        .menu-text { flex: 1; font-weight: 500; }
        .vip-text { color: #ffb700; font-weight: 700; } 
        .notif-badge { background: #ff3b30; color: white; font-size: 10px; font-weight: bold; padding: 2px 6px; border-radius: 10px; margin-left: auto;}

        .toggle-switch { width: 34px; height: 18px; background: #ccc; border-radius: 20px; position: relative; transition: 0.3s; }
        .toggle-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; background: #fff; border-radius: 50%; transition: 0.3s; }
        .toggle-active { background: var(--green-active); }
        .toggle-active::after { left: 18px; }

        /* --- LIST STYLES --- */
        .main { flex: 1; overflow-y: auto; position: relative; }
        .tab-section { display: none; height: 100%; overflow-y: auto; }
        .tab-section.active { display: block; }
        
        .search-area { padding: 10px 15px; border-bottom: var(--border-light); flex-shrink: 0; }
        .search { width: 100%; background: var(--bg-input); border: none; padding: 10px 15px; border-radius: 12px; outline: none; font-size: 15px; color: var(--text-main); }

        .list-item { display: flex; align-items: center; padding: 12px 15px; cursor: pointer; transition: background 0.2s; border-bottom: 1px solid var(--show-hr); }
        .list-item:hover { background-color: var(--show-hr-active); }
        .item-pic-wrapper { position: relative; width: 50px; height: 50px; margin-right: 15px; flex-shrink: 0; }
        .item-pic { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; } 
        .active-dot { position: absolute; bottom: 2px; right: 2px; width: 12px; height: 12px; background-color: var(--green-active);  border: 2px solid var(--bg-sidebar); border-radius: 50%;  box-shadow: 0 1px 2px rgba(0,0,0,0.1); z-index: 2;  }
        .item-info { flex: 1; margin-left: 12px; overflow: hidden; }
        .item-name { font-size: 16px; font-weight: 600; color: var(--text-main); margin-bottom: 3px; }
        .item-preview { font-size: 13px; color: var(--text-sec); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: flex; align-items: center; }
        .list-tick { width: 25px; margin-right: 2px; }
        .item-meta { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; min-width: 50px; margin-left: 10px; }
        .item-time { font-size: 11px; color: var(--text-sec); margin-bottom: 5px; }
        .unread-badge { background-color: var(--badge-color); color: white; font-size: 10px; font-weight: bold; min-width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 0 5px; }
        .call-icon { font-size: 14px; margin-right: 5px; }
        .call-missed { color: #ff3b30; transform: rotate(135deg); }
        .video-action { color: var(--primary-color); font-size: 20px; padding: 10px; }

        /* Navbar */
        .navbar { height: 70px; background: var(--bg-header); border-top: var(--border-light); display: flex; justify-content: space-around; align-items: center; flex-shrink: 0;  }
        .footer_icon { position: relative; text-align: center; cursor: pointer; width: 100%; }
        .footer_icon img { width: 28px; height: 28px; opacity: 0.5; transition: 0.3s; filter: var(--icon-filter); }
        .footer_icon h4 { font-size: 11px; color: var(--text-sec); margin-top: 4px; }
        .footer_icon.active-tab img { opacity: 1; transform: scale(1.1); filter: var(--icon-filter) drop-shadow(0 2px 4px rgba(0,122,255,0.3)); }
        .footer_icon.active-tab h4 { color: var(--primary-color); font-weight: 600; }
        
@media screen and (orientation: landscape) and (max-height: 500px) {
    .navbar { height: 45px !important; min-height: 45px !important; padding: 0 10px; position: relative; z-index: 100; }
    .footer_icon h4 { display: none !important; }
    .footer_icon img { width: 24px; height: 24px; margin: 0; margin-top: 5px; }
    .footer_icon.active-tab img { transform: scale(1.1); margin-top: 5px;}
    .badge { top: 2px;left: 55%; width: 18px; height: 18px; font-size: 9px; line-height: 1.8; }
}
        
        
        .badge {
            position: absolute; top: -4px; left: 50%; margin-left: 6px;
            background-color: #ff3b30; color: white; font-size: 11px; font-weight: 700;
            width: 24px;height: 24px; border-radius: 50%; padding: 5px 4px; line-height: 8;
            display: flex; align-items: center; justify-content: center;
            border: 2px solid var(--bg-header); z-index: 5; box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .badge-people{ width: 28px; height: 28px; }

        .bg-red { background-color: #ff3b30; }  
        .bg-green { background-color: #25D366; }
        .bg-blue { background-color: #0074dd; }
        .bg-gold { background-color: #f59e0b; }

        .status-message { text-align: center; padding: 60px 20px; color: var(--text-sec); display: flex; flex-direction: column; align-items: center; gap: 15px; }
        .status-message i { font-size: 40px; opacity: 0.3; }
        .status-message p { font-size: 15px; margin: 0; font-weight: 500; }

        .vip-lock-row { display: flex; align-items: center; padding: 12px 15px; margin: 15px; background: rgba(255, 215, 0, 0.08); border: 1px solid rgba(255, 215, 0, 0.5);border-radius: 12px; cursor: pointer; }
        .lock-icon-box {
            width: 40px; height: 40px; background: #fff; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            color: #FFD700; margin-right: 12px; box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }
        .lock-text { flex: 1; }
        .lock-text h4 { margin: 0; font-size: 14px; color: #b48a00; font-weight: 700; }
        .lock-text p { margin: 2px 0 0 0; font-size: 11px; color: var(--text-sec); }
        .small-upgrade-btn {
            background: #FFD700; border: none; padding: 6px 12px;
            font-size: 11px; font-weight: 700; border-radius: 20px; color: #333;
        }

        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
  

        /* --- 4. CHAT WINDOW --- */
        .container-2 { width: 70%; height: 100%; background-color: var(--chat-base-color); position: relative; z-index: 5; overflow: hidden; display: flex; flex-direction: column; }
        
        .container-2::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--chat-bg-source); background-size: cover; background-position: center; opacity: var(--chat-opacity); pointer-events: none; z-index: -1; }

        .message-header { height: 70px; background: var(--bg-header); display: flex; align-items: center; padding: 0 15px; border-bottom: var(--border-light); box-shadow: 0 2px 5px rgba(0,0,0,0.02); flex-shrink: 0; }
        .back-btn { display: none; width: 28px; height: 28px; margin-right: 10px; cursor: pointer; filter: var(--icon-filter); }
        .sender-pic { width: 42px; height: 42px; border-radius: 50%; margin-right: 10px; object-fit: cover; }
        .sname { flex: 1; cursor: pointer; overflow: hidden;}
        .sender-name { font-size: 16px; font-weight: 600; color: var(--text-main); white-space: nowrap; }
        .sender-stat { font-size: 12px; color: var(--primary-color); white-space: nowrap; }
        .header-right { display: flex; align-items: center; margin-left: auto; }
        .action-icon { width: 26px; height: 26px; cursor: pointer; opacity: 0.6; transition: 0.2s; filter: var(--icon-filter); }
        .action-icon:hover { opacity: 1; transform: scale(1.1); }
        .active-users-btn { background-color: var(--green-active); color: #fff; width: 22px; height: 22px; border-radius: 50%; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 5px rgba(37, 211, 102, 0.4); cursor: default; margin-left: 6px; }
        .active-users-btn-red { background-color: #ff3b30; box-shadow: 0 2px 5px rgba(211,37,48,0.572);}
        #video-btn{ margin-right: 28px}
        #more-btn { margin-left: 10px; }
        .message-body { flex: 1; overflow-y: auto; padding: 15px 1.5%; display: flex; flex-direction: column; -webkit-overflow-scrolling: touch; }
       
.my-text, .their-text { 
    padding: 6px 10px 6px 10px; /* Padding adjust ki */
    border-radius: 10px; 
    font-size: 16px; 
    font-weight: 400; 
    max-width: 75%; 
    margin-bottom: 6px; 
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    word-wrap: break-word; 
    line-height: 1.4; 
    position: relative; 
    width: fit-content; 
    min-width: 80px;
}

/* --- MY MESSAGE (Right Side) --- */
.my-text { 
    align-self: flex-end; 
    background: var(--msg-my-bg);
    color: var(--text-main2); 
    border-top-right-radius: 0;
    margin-right: 8px; 
}

.my-text::before { 
    content: ""; 
    position: absolute; 
    top: 0; 
    right: -8px;
    width: 10px; 
    height: 10px; 
    background: var(--msg-my-bg); 
    clip-path: polygon(0 0, 100% 0, 0 100%); 
}

.their-text { 
    align-self: flex-start; 
    background: var(--msg-their-bg); 
    color: var(--text-main); 
    border-top-left-radius: 0;
    margin-left: 8px; 
}

.their-text::before { content: ""; position: absolute; top: 0; left: -8px;width: 10px; height: 10px; background: var(--msg-their-bg);
    clip-path: polygon(0 0, 100% 0, 100% 100%); 
}   
        .msg-time { 
            float: right;
            display: flex;
            align-items: center;
            gap: 2px;
            
            font-size: 11px; 
            opacity: 0.7; 
            
            margin-left: 12px;
            margin-top: 8px;
            margin-right: -5px;
            margin-bottom: -4px;
            
            line-height: 1;
            height: 16px;
            pointer-events: none;    
        }

        /* Tick Icon Fix (Size Reduced) */
        .tick_msg { 
            width: 26px;
            object-fit: contain;
            display: block; 
            margin-top: -3px;
        }
        
        .tick-seen { filter: brightness(98%); } 
        .tick-sent { filter: brightness(0) invert(.95); } 
        .tick-delivered { filter: brightness(0) invert(.95); }
        /* --- NEW: REPLY & CALL LOG STYLES --- */
        .reply-preview-bar {
            position: absolute; bottom: 70px; left: 0; width: 100%;
            background: var(--bg-input); border-top: 1px solid var(--border-light);
            padding: 8px 15px; display: none; border-left: 5px solid var(--primary-color);
            z-index: 90; animation: slideUp 0.2s ease;
        }
        .reply-content { flex: 1; font-size: 14px; color: var(--text-sec); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .reply-title { font-weight: 700; color: var(--primary-color); font-size: 12px; margin-bottom: 2px; }
        .close-reply { font-size: 20px; color: var(--text-sec); cursor: pointer; margin-left: 15px; }

        .msg-reply-container {
            background: rgba(0,0,0,0.1); border-radius: 5px; border-left: 4px solid var(--primary-color);
            padding: 5px 8px; margin-bottom: 5px; cursor: pointer; font-size: 13px; display: flex; flex-direction: column;
        }
        .msg-reply-sender { font-weight: 700; font-size: 11px; margin-bottom: 2px; opacity: 0.9; }
        .msg-reply-text { opacity: 0.8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

      
        /* --- SWIPE TO REPLY INDICATOR --- */
        .swipe-reply-icon {
            position: absolute; left: -40px; top: 50%; transform: translateY(-50%) scale(0.5);
            width: 30px; height: 30px; background: var(--bg-input); border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1); opacity: 0; transition: 0.1s;
            color: var(--text-sec); z-index: 5;
        }  
        
                /* --- ENCRYPTION MESSAGE STYLE (UPDATED) --- */
        .encryption-msg {
            text-align: center;
            font-size: 11px;
            color: var(--sys-msg-text);
            background: var(--sys-msg-bg);
            padding: 8px 16px;
            border-radius: 25px;
            margin: 10px auto 20px auto;
            width: fit-content;
            max-width: 85%;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
            line-height: 1.4;
            display: flex; align-items: center; justify-content: center; gap: 8px;
            font-weight: 500; border: 1px solid rgba(0,0,0,0.05);
        }
        .encryption-msg i { font-size: 10px; } 
        
        /* --- MESSAGE OPTIONS (Bottom Sheet) --- */
        .msg-options-overlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.6); z-index: 3000;
            display: none; align-items: flex-end;
            backdrop-filter: blur(2px);
            animation: fadeIn 0.2s;
        }
        .msg-options-overlay.active { display: flex; }
        
        .msg-options-sheet {
            width: 100%; background: var(--bg-sidebar);
            border-top-left-radius: 20px; border-top-right-radius: 20px;
            padding: 10px 20px 30px;
            transform: translateY(100%); transition: 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
        }
        .msg-options-overlay.active .msg-options-sheet { transform: translateY(0); }

        .sheet-handle { width: 40px; height: 5px; background: #cbd5e1; border-radius: 10px; margin: 10px auto 20px; }

        .msg-opt-row {
            display: flex; align-items: center; padding: 15px;
            font-size: 16px; font-weight: 600; color: var(--text-main);
            border-bottom: 1px solid var(--border-light); cursor: pointer;
        }
        .msg-opt-row:active { background: var(--bg-input); }
        .msg-opt-row i { width: 30px; font-size: 18px; color: var(--text-sec); }
        .msg-opt-danger { color: #ff3b30; }
        .msg-opt-danger i { color: #ff3b30; }

        /* Highlight Selected Message */
        .msg-highlight {
            position: relative; z-index: 3001;
            box-shadow: 0 0 0 100vmax rgba(0,0,0,0.6);
            border: 2px solid var(--primary-color);
            transform: scale(1.02);
        }

        /* --- CHAT HEADER MENU (Clear Chat) --- */
        .chat-menu-dropdown {
            position: absolute; top: 60px; right: 15px;
            width: 200px; background: var(--bg-menu);
            border-radius: 12px; box-shadow: 0 5px 20px rgba(0,0,0,0.15);
            display: none; z-index: 100; overflow: hidden;
            animation: fadeIn 0.2s;
        }
        .chat-menu-dropdown.show { display: block; }
        .chat-menu-item {
            padding: 12px 15px; font-size: 14px; font-weight: 500;
            color: var(--text-main); cursor: pointer; display: flex; align-items: center; gap: 10px;
        }
        .chat-menu-item:hover { background: var(--bg-input); } 
        
        /* --- CHAT DELETE MODAL CSS --- */
        
        /* 1. Dark Background Overlay */
        .msg-options-overlay {
            position: fixed; 
            top: 0; left: 0; 
            width: 100%; height: 100%;
            background: rgba(0,0,0,0.5); /* Kala transparent background */
            z-index: 3000; /* Sabse upar dikhe */
            display: none; 
            align-items: flex-end; /* Mobile me neeche chipka rahe */
            justify-content: center;
            backdrop-filter: blur(3px); /* Peeche ka content blur kare */
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        /* Jab active class lagegi tab dikhega */
        .msg-options-overlay.active { 
            display: flex; 
            opacity: 1; 
        }
        
        /* 2. White Sheet (Menu Box) */
        .msg-options-sheet {
            width: 100%; 
            max-width: 500px; /* Desktop par jyada chauda na ho */
            background: var(--bg-sidebar); /* Theme ke hisaab se color */
            border-top-left-radius: 24px; 
            border-top-right-radius: 24px;
            padding: 15px 20px 30px 20px;
            box-shadow: 0 -10px 40px rgba(0,0,0,0.1);
            transform: translateY(100%); /* Pehle neeche chhupa rahega */
            transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); /* Smooth Bounce effect */
        }

        /* Overlay active hone par sheet upar aayegi */
        .msg-options-overlay.active .msg-options-sheet { 
            transform: translateY(0); 
        }

        /* 3. Handle Bar (Chhota grey line upar) */
        .sheet-handle { 
            width: 45px; height: 5px; 
            background: #e2e8f0; 
            border-radius: 10px; 
            margin: 5px auto 20px auto; 
        }

        /* 4. Options Row Style */
        .msg-opt-row {
            display: flex; 
            align-items: center; 
            padding: 15px;
            font-size: 16px; 
            font-weight: 600; 
            cursor: pointer;
            transition: transform 0.1s, background 0.2s;
        }

        /* Press karne par effect */
        .msg-opt-row:active { 
            transform: scale(0.98); 
            opacity: 0.8;
        }

        /* Danger (Delete) Style specifically */
        .msg-opt-danger { 
            color: #dc2626; /* Red color */
            background-color: #fef2f2;
        }
        
                /* --- NEW: SEAMLESS CALL LOG BUBBLES --- */
        /* Using .call-log-content inside .my-text or .their-text divs */
        .call-log-content {
            display: flex; align-items: center; gap: 12px;
            min-width: 160px; padding: 4px 0; margin-bottom: -16px;
        }
        .call-log-icon-container {
            width: 42px; height: 42px;
            border-radius: 50%;
            background: rgba(0,0,0,0.15); /* Semi-transparent */
            display: flex; align-items: center; justify-content: center;
            font-size: 18px;
            flex-shrink: 0;
        }
        .call-log-text { display: flex; flex-direction: column; }
        .call-log-title { font-weight: 600; font-size: 16px; line-height: 1.2; }
        .call-log-sub { font-size: 12px; opacity: 0.8; margin-top: 1px; }
        
        /* Missed Call Style (Red) */
        .call-missed-title { color: #ff3b30 !important; }
        .call-missed-bg { background: rgba(255, 59, 48, 0.15) !important; color: #ff3b30 !important; }
        
        .image-msg-bubble {
            padding: 4px;
            border-radius: 12px;
            overflow: hidden;
            position: relative;
            display: inline-block;
            width: fit-content;
            max-width: 85%;
            flex-shrink: 0;
            box-shadow: 0 1px 2px rgba(0,0,0,0.15);
            margin-bottom: 8px !important;
            transition: transform 0.2s ease;
        }


        .image-msg-bubble.my-img {
            align-self: flex-end;
            background: var(--msg-my-bg);
            margin-right: 8px;

        }


        .image-msg-bubble.their-img {
            align-self: flex-start;
            background: var(--msg-their-bg);
            margin-left: 8px;
        }

        .chat-image-content {
            width: 260px; height: auto; max-height: 380px; object-fit: cover; object-position: top center; border-radius: 8px; display: block; cursor: pointer; transition: filter 0.3s ease; background-color: rgba(0,0,0,0.05);
        }

        .img-loading { filter: blur(5px) brightness(0.8); min-height: 200px; }
        
        .upload-spinner { 
            position: absolute; top: 50%; left: 50%; 
            transform: translate(-50%, -50%); 
            width: 34px; height: 34px; 
            border: 4px solid rgba(255,255,255,0.3); 
            border-top: 4px solid #fff; 
            border-radius: 50%; 
            animation: spin 0.8s linear infinite; 
            z-index: 10; display: none; 
        }
        .img-loading + .upload-spinner { display: block; }
        
        @keyframes spin { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } }
        
        .image-meta-overlay { 
            position: absolute; bottom: 8px; right: 8px; 
            background: rgba(0, 0, 0, 0.4); 
            padding: 2px 8px; border-radius: 12px; 
            color: #fff; font-size: 10px; 
            display: flex; align-items: center; 
            backdrop-filter: blur(3px); z-index: 5; 
            pointer-events: none; 
        }
        .image-meta-overlay .tick_msg { 
            width: 14px; height: 14px; margin-left: 4px; 
        }
        /* --- AUDIO RECORDING & SLIM PLAYER (20px Look) --- */
        .recording-panel {
            position: absolute; bottom: 0; left: 0; width: 100%; height: 70px;
            background: var(--bg-header); z-index: 100; 
            display: none; align-items: center; justify-content: space-between;
            padding: 0 15px; box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
            animation: slideUp 0.2s ease;
        }
        @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
        .rec-timer { display: flex; align-items: center; font-size: 18px; color: var(--text-main); font-weight: 500; font-variant-numeric: tabular-nums; }
        .rec-dot { width: 10px; height: 10px; background: #ff3b30; border-radius: 50%; margin-right: 10px; animation: blink 1s infinite; }
        @keyframes blink { 50% { opacity: 0; } }
        .rec-actions { display: flex; align-items: center; gap: 20px; }
        .btn-cancel-rec { color: #ff3b30; font-size: 14px; font-weight: 600; cursor: pointer; padding: 10px; }
        .btn-send-rec { width: 45px; height: 45px; background: var(--msg-my-bg); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; cursor: pointer; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }

        /* Compact Audio Bubble (Approx 20-25px) */
        .audio-msg-content { display: flex; align-items: center; width: 210px; padding: 0; margin-top: -2px; margin-bottom: -2px; touch-action: pan-y; }
        .audio-play-btn { width: 35px; height: 35px; background: rgba(0,0,0,0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; margin-right: 8px; flex-shrink: 0; color: inherit; font-size: 10px; }
        .audio-progress-container { flex: 1; display: flex; align-items: center; gap: 8px; }
        .audio-slider { -webkit-appearance: none; width: 100%; height: 3px; border-radius: 2px; background: rgba(0,0,0,0.2); outline: none; margin: 0; flex: 1; }
        .audio-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 10px; border-radius: 50%; background: #fff; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,0.3); }
        .audio-duration { font-size: 10px; opacity: 0.8; font-variant-numeric: tabular-nums; }
        .user-avatar-audio { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; margin-left: 8px; border: 1px solid rgba(255,255,255,0.3); }


        /* --- FULL SCREEN IMAGE VIEWER --- */
        .full-image-viewer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95); z-index: 6000; display: none; justify-content: center; align-items: center; animation: zoomIn 0.2s ease-out; } .full-image-viewer.active { display: flex; } .full-image-viewer img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 0 20px rgba(0,0,0,0.5); } .close-full-view { position: absolute; top: 20px; right: 20px; color: #fff; font-size: 30px; cursor: pointer; z-index: 6001; background: rgba(0,0,0,0.3); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } @keyframes zoomIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }

        .message-footer { min-height: 70px; background: var(--bg-header); padding: 10px 15px; display: flex; align-items: flex-end; box-shadow: 0 -2px 10px rgba(0,0,0,0.03); flex-shrink: 0; width: 100%; position: relative; }
        .footer-icons-left img { width: 28px; height: 28px; margin-right: 10px; opacity: 0.6; cursor: pointer; margin-bottom: 10px; filter: var(--icon-filter); }
        .input-wrapper { flex: 1; background: var(--bg-input); border-radius: 25px; padding: 10px 15px; display: flex; align-items: center; min-height: 45px; }
        .message-input { width: 100%; border: none; outline: none; background: transparent; font-size: 16px; resize: none; overflow: hidden; max-height: 120px; font-family: inherit; line-height: 20px; padding: 0; margin: 0; color: var(--text-main); }
        
        .div_send { width: 48px; height: 48px; border-radius: 50%; background: var(--msg-my-bg); display: flex; justify-content: center; align-items: center; margin-left: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.2); flex-shrink: 0; cursor: pointer; }
        .div_send img { width: 24px; height: 24px; filter: invert(1); }
        
        /* --- NEW ADDITIONS: SETTINGS, THEME MODAL, PROFILE VIEWER --- */
        /* (Kept existing CSS for Settings, Profile, Theme Modal to save space - it works with previous code) */
        /* ... [PASTE PREVIOUS CSS HERE IF NEEDED, BUT ABOVE IS SUFFICIENT] ... */
       
        /* SETTINGS PAGE */
        .settings-page { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--bg-sidebar); z-index: 2000; transform: translateX(100%); transition: transform 0.3s ease-in-out; display: flex; flex-direction: column; }
        .settings-page.active { transform: translateX(0); }
        .settings-header { height: 65px; display: flex; align-items: center; padding: 0 15px; background: var(--bg-header); border-bottom: var(--border-light); color: var(--text-main); font-weight: 600; font-size: 18px; flex-shrink: 0; }
        .settings-back { margin-right: 15px; cursor: pointer; font-size: 20px; color: var(--primary-color); }
        .settings-content { flex: 1; overflow-y: auto; padding: 20px; padding-bottom: 80px; }
        .profile-edit-section { display: flex; flex-direction: column; align-items: center; margin-bottom: 30px; }
        .profile-img-wrapper { position: relative; width: 110px; height: 110px; }
        .profile-large-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 4px solid var(--bg-input); cursor: pointer; padding: 3px; background: var(--bg-sidebar); }
        .change-photo-btn { position: absolute; bottom: 5px; right: -5px; width: 36px; height: 36px; background: var(--green-active); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; cursor: pointer; border: 3px solid var(--bg-sidebar); }
        .role-badge-setting { position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%); padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 800; letter-spacing: 0.5px; color: white; z-index: 5; box-shadow: 0 3px 6px rgba(0,0,0,0.2); border: 2px solid var(--bg-sidebar); white-space: nowrap; display: flex; align-items: center; gap: 4px; }
        .role-guest { background: #95a5a6; } 
        .role-user { background: var(--primary-color); } 
        .role-vip { background: linear-gradient(45deg, #FFD700, #FFA500); color: #000; } 
        .role-admin { background: #ff3b30; } 
        .role-moderator{ background: #2ecc71; border:none; } 
        .role-badge { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-left: 6px; border-radius: 50%; font-size: 8px; color: #fff; vertical-align: middle; box-shadow: 0 2px 4px rgba(0,0,0,0.15); }
        .badge-admin { background: linear-gradient(135deg, #ff3b30, #ff2d55); } .badge-vip { background: linear-gradient(135deg, #FFD700, #FFA500); color: #000; } .badge-mod { background: linear-gradient(135deg, #2ecc71, #27ae60); } .badge-user { background: linear-gradient(135deg, #007aff, #00c6ff); } .badge-guest { background: #95a5a6; color: #fff; }
        .setting-group { margin-bottom: 25px; } .setting-label { font-size: 13px; color: var(--primary-color); margin-bottom: 8px; font-weight: 600; } .setting-input-box { display: flex; align-items: center; border-bottom: 1px solid var(--border-light); padding-bottom: 8px; transition: border 0.3s; } .setting-input-box.editable { border-bottom: 2px solid var(--green-active); } .setting-input { flex: 1; border: none; background: transparent; font-size: 16px; color: var(--text-main); outline: none; padding: 5px 0; } .edit-icon { color: var(--text-sec); cursor: pointer; font-size: 14px; padding: 5px; } .lock-icon { color: #ccc; font-size: 14px; padding: 5px; cursor: default; }
        .vip-banner { background: linear-gradient(45deg, #FFD700, #FFA000); padding: 15px; border-radius: 12px; color: #fff; font-weight: bold; display: flex; align-items: center; justify-content: space-between; margin-bottom: 25px; cursor: pointer; box-shadow: 0 4px 10px rgba(255, 160, 0, 0.3); }
        .action-btn { width: 100%; padding: 15px; border-radius: 12px; border: none; font-size: 15px; font-weight: 600; margin-bottom: 12px; cursor: pointer; transition: 0.2s; } .btn-password { background: var(--bg-input); color: var(--text-main); border: 1px solid var(--border-light); } .btn-delete { background: rgba(255, 59, 48, 0.1); color: #ff3b30; }
        
        .settings-page-user { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--bg-body); z-index: 2000; transform: translateX(100%); transition: transform 0.3s ease-in-out; display: flex; flex-direction: column; } .settings-page-user.active { transform: translateX(0); } .settings-header-user { height: 60px; display: flex; align-items: center; padding: 0 15px; background: var(--bg-header); border-bottom: var(--border-light); color: var(--text-main); font-weight: 600; font-size: 18px; flex-shrink: 0; } .settings-back { margin-right: 15px; cursor: pointer; font-size: 20px; color: var(--primary-color); } .settings-content-user { flex: 1; overflow-y: auto; padding: 0; } .profile-card-user { background: var(--bg-header); padding: 10px 20px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; border-bottom: 1px solid var(--border-light); margin-bottom: 15px; } .profile-large-img-user { width: 130px; height: 130px; border-radius: 50%; object-fit: cover; border: 5px solid var(--bg-input); cursor: pointer; padding: 3px; background: var(--bg-sidebar); } .role-pill { position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); padding: 4px 14px; border-radius: 20px; font-size: 11px; font-weight: 800; color: white; z-index: 5; box-shadow: 0 3px 8px rgba(0,0,0,0.2); border: 3px solid var(--bg-header); white-space: nowrap; text-transform: uppercase; display: flex; align-items: center; gap: 4px; } .role-guest { background: #95a5a6; border-color: #95a5a6 !important; } .role-user { background: #007aff; border-color: #007aff !important; } 
        .role-vip { background: linear-gradient(45deg, #FFD700, #FFA500); color: #000; border-color: #FFD700 !important; } 
        .role-admin { background: #ff3b30; border-color: #ff3b30 !important; }
        .role-mod { background: #2ecc71; border-color: #2ecc71 !important; } 
        .action-bar { display: flex; justify-content: center; gap: 80px; width: 100%; margin-top: 20px; margin-bottom: 5px; } 
        .action-icon-box { display: flex; flex-direction: column; align-items: center; cursor: pointer; transition: 0.2s; color: var(--primary-color); }
        .action-icon-circle { width: 48px; height: 48px; border-radius: 50%; background: var(--bg-input); display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 6px; border: 1px solid var(--border-light); } 
        .action-text { font-size: 12px; font-weight: 600; color: var(--text-sec); }
        .btn-audio .action-icon-circle { background: rgba(37, 211, 102, 0.1); color: var(--green-active); }
        .btn-video .action-icon-circle { background: rgba(0, 122, 255, 0.1); color: var(--primary-color); }
        .btn-block .action-icon-circle { color: #ff3b30; background: rgba(255,59,48,0.05); } 
        .btn-message .action-icon-circle { background: rgba(248,194,125,0.2); color: orange; }
        .info-group { background: var(--bg-header); margin-bottom: 15px; border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); }
        .info-item-row { display: flex; align-items: center; padding: 15px 20px; border-bottom: 1px solid var(--border-light); } 
        .info-section-header { padding: 15px 20px 5px; font-size: 14px; font-weight: 700; color: var(--primary-color); text-transform: uppercase; letter-spacing: 0.5px; } 
        .info-row-label { font-size: 14px; color: var(--text-sec); width: 100px; flex-shrink: 0; }
        .info-row-value { font-size: 17px; color: var(--text-main); flex: 1; font-weight: 500; line-height: 1.4; }
        .info-row-icon { width: 36px; height: 36px; border-radius: 50%; background: var(--bg-input); color: var(--primary-color); margin-right: 15px; font-size: 16px; display: flex; align-items: center; justify-content: center; } 
        .user-name-display-user { margin-top: 15px; margin-bottom:5px; color: var(--text-main)} 
                /* --- ADMIN TOGGLE BUTTON --- */
        .admin-toggle-btn {
            width: 100%; padding: 15px 20px;
            background: var(--bg-header); border: 1px solid var(--border);
            border-radius: 12px; cursor: pointer;
            display: none; /* Hidden initially, JS shows it */
            align-items: center; justify-content: space-between;
            color: var(--text-main); font-weight: 600; font-size: 14px;
            margin-bottom: 10px; transition: 0.2s;
            box-shadow: 0 2px 5px rgba(0,0,0,0.03);
        }
        .admin-toggle-btn:active { transform: scale(0.98); }
        .rotate-icon { transform: rotate(180deg); transition: 0.3s; }

        /* --- ADMIN BOX --- */
        .admin-box { 
            background: var(--admin-pnl-bg); border: 1px solid #fcd34d; 
            border-radius: 16px; padding: 15px; display: none; 
            margin-bottom: 20px; animation: slideDown 0.3s ease;
        }
        @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
        .admin-box.visible { display: block; }

        .admin-title { font-size: 11px; font-weight: 800; color: #b45309; text-transform: uppercase; margin-bottom: 12px; letter-spacing: 0.5px; }
        
        /* GRID */
        .admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
        
            .adm-btn { 
            padding: 12px; border-radius: 10px; border: 1px solid rgba(0,0,0,0.05); 
            font-size: 13px; font-weight: 600; cursor: pointer; 
            display: flex; align-items: center; justify-content: center; gap: 6px; 
            transition: 0.2s; background: white; box-shadow: 0 1px 2px rgba(0,0,0,0.05); 
        }
        .adm-btn:active { transform: scale(0.98); }
        
        /* Colors */
        .btn-warn { color: #d97706; background: #fff7ed; border-color: #ffedd5; } 
        .btn-pic { color: #0891b2; background: #ecfeff; border-color: #cffafe; } 
        .btn-reset { color: #4f46e5; background: #eef2ff; border-color: #e0e7ff; } 
        .btn-vip { color: #ca8a04; background: #fefce8; border-color: #fef08a; } 
        .btn-mod { color: #059669; background: #ecfdf5; border-color: #d1fae5; } 
        .btn-ban { color: #dc2626; background: #fef2f2; border-color: #fee2e2; } /* Same Size now */

        
        /* --- MODAL POPUP (REASON) --- */
        .modal-wrap { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 5000; display: none; align-items: center; justify-content: center; backdrop-filter: blur(5px); }
        .modal { background: white; width: 85%; max-width: 340px; border-radius: 16px; padding: 20px; box-shadow: 0 10px 40px rgba(0,0,0,0.2); animation: scaleIn 0.2s ease; }
        .modal textarea { width: 100%; height: 70px; margin: 10px 0; padding: 8px; border: 1px solid #e2e8f0; border-radius: 6px; outline:none; display: none; background: #f9f9f9; }
        @keyframes scaleIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
        
        .profile-viewer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 5000; display: none; align-items: center; justify-content: center; animation: fadeIn 0.2s; } .profile-viewer.active { display: flex; } .profile-viewer img { width: 300px; height: 300px; border-radius: 50%; object-fit: cover; border: 5px solid white; box-shadow: 0 0 20px rgba(255,255,255,0.1); transition: transform 0.3s; } 
        
        /* --- MODAL OVERLAY --- */
.modal-overlay { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,0.6); /* Overlay hamesha dark hi achha lagta hai */
    z-index: 200; 
    display: none; 
    align-items: center; 
    justify-content: center; 
    backdrop-filter: blur(5px); 
} 
.modal-overlay.active { 
    display: flex; 
}

/* --- THEME MODAL (Updated) --- */
.theme-modal { 
    background: var(--bg-menu); /* Changed from #fff */
    width: 95%; 
    max-width: 420px; 
    border-radius: 20px; 
    overflow: hidden; 
    box-shadow: 0 10px 40px rgba(0,0,0,0.3); 
    max-height: 90vh; 
    display: flex; 
    flex-direction: column; 
    border: var(--border-light); /* Optional: Dark mode me border dikhane ke liye */
} 

.theme-header { 
    padding: 15px; 
    border-bottom: var(--border-light); /* Changed from 1px solid #eee */
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
} 

.theme-title { 
    font-size: 18px; 
    font-weight: 700; 
    color: var(--text-main); /* Changed from #333 */
}

/* --- TABS (Updated) --- */
.theme-tabs { 
    display: flex; 
    background: var(--bg-input); /* Changed from #f0f0f0 */
    padding: 5px; 
} 
.theme-tab { 
    flex: 1; 
    text-align: center; 
    padding: 10px; 
    cursor: pointer; 
    font-weight: 600; 
    color: var(--text-sec); /* Changed from #666 */
    font-size: 14px; 
    border-radius: 8px; 
    transition: 0.2s; 
} 
.theme-tab.active { 
    background: var(--bg-menu); /* Changed from #fff */
    color: var(--text-main); /* Changed from #000 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); 
} 

.theme-content { 
    padding: 15px; 
    overflow-y: auto; 
    flex: 1; 
} 
.tab-view { display: none; } 
.tab-view.active { display: block; }

/* --- SLIDERS & LABELS (Updated) --- */
.section-label { 
    font-size: 12px; 
    font-weight: bold; 
    color: var(--text-sec); /* Changed from #777 */
    margin: 15px 0 8px; 
    text-transform: uppercase; 
} 
.slider-container { 
    padding: 15px 0; 
    margin-bottom: 15px; 
    border-bottom: var(--border-light); /* Changed from 1px solid #eee */
} 
.slider-label { 
    display: flex; 
    justify-content: space-between; 
    font-size: 13px; 
    font-weight: 600; 
    color: var(--text-main); /* Changed from #555 */
    margin-bottom: 8px; 
} 
.slider { 
    -webkit-appearance: none; 
    width: 100%; 
    height: 6px; 
    border-radius: 5px; 
    background: var(--bg-input); /* Changed from #ddd */
    outline: none; 
} 
.slider::-webkit-slider-thumb { 
    -webkit-appearance: none; 
    appearance: none; 
    width: 18px; 
    height: 18px; 
    border-radius: 50%; 
    background: var(--primary-color); 
    cursor: pointer; 
}

/* --- COLORS & WALLPAPERS (Updated) --- */
.color-grid { 
    display: grid; 
    grid-template-columns: repeat(6, 1fr); 
    gap: 10px; 
    margin-bottom: 20px; 
} 
.color-dot { 
    width: 40px; 
    height: 40px; 
    border-radius: 50%; 
    cursor: pointer; 
    border: 2px solid var(--bg-input); /* Changed from #eee */
    transition: 0.2s; 
} 
.color-dot:hover { 
    transform: scale(1.15); 
    z-index: 2; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); 
}

.wallpaper-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } 
.wp-card { 
    height: 120px; 
    border-radius: 10px; 
    background-size: cover; 
    cursor: pointer; 
    border: 2px solid transparent; 
    position: relative; 
    overflow: hidden; 
} 
.wp-card:hover { border-color: var(--primary-color); } 
.wp-label { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    background: rgba(0,0,0,0.5); 
    color: white; 
    font-size: 10px; 
    padding: 5px; 
    text-align: center; 
}

/* --- UPLOAD & RESET BUTTONS (Updated) --- */
.upload-btn { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    height: 120px; 
    border: 2px dashed var(--text-sec); /* Changed from #ccc */
    border-radius: 10px; 
    cursor: pointer; 
    color: var(--text-sec); /* Changed from #666 */
} 
.upload-btn:hover { 
    background: var(--bg-input); /* Changed from #f9f9f9 */
    border-color: var(--text-main); 
}

.reset-btn { 
    width: 100%; 
    padding: 15px; 
    background: var(--bg-menu); /* Changed from #f8f9fa */
    border: none; 
    color: #ff3b30; 
    font-weight: 600; 
    cursor: pointer; 
    border-top: var(--border-light); /* Changed from 1px solid #eee */
    font-size: 14px; 
} 
.reset-btn:hover { 
    background: var(--bg-input); /* Changed from #f0f0f0 */
}

/* --- OPTION SHEET (Updated) --- */
.option-sheet { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    background: var(--bg-menu); /* Changed from white */
    border-top-left-radius: 20px; 
    border-top-right-radius: 20px; 
    padding: 20px; 
    transform: translateY(100%); 
    transition: 0.3s ease; 
    z-index: 210; 
    box-shadow: 0 -5px 20px rgba(0,0,0,0.2); 
    border-top: var(--border-light);
} 
.option-sheet.show { transform: translateY(0); } 

.option-btn { 
    display: block; 
    width: 100%; 
    padding: 15px; 
    margin-bottom: 10px; 
    border: none; 
    border-radius: 12px; 
    font-size: 16px; 
    font-weight: 600; 
    cursor: pointer; 
} 
.btn-bg { 
    background: var(--bg-input); /* Changed from #eef2f5 */
    color: var(--text-main); /* Changed from #333 */
} 
.btn-color { 
    background: var(--bg-input); /* Changed from #eef2f5 */
    color: var(--text-main); /* Changed from #333 */
} 
.btn-cancel { 
    background: transparent; 
    color: #ff3b30; 
}
       
        /* --- IMPROVED GROUP MODAL CSS --- */
        .fab-btn {
            position: fixed; bottom: 85px; left: 20%; transform: translateX(-50%);
            width: 55px; height: 55px;
            background: linear-gradient(135deg, var(--primary-color), #005ec4);
            border-radius: 50%; display: flex; align-items: center; justify-content: center;
            box-shadow: 0 4px 15px rgba(0, 118, 221, 0.4);
            color: white; font-size: 22px; cursor: pointer; z-index: 100; transition: transform 0.2s;
        }
        .fab-btn:active { transform: translateX(-50%) scale(0.9); }
        @media screen and (max-width: 1150px) { .fab-btn { left: auto; right: 20px; transform: none; } .fab-btn:active { transform: scale(0.9); } }

        /* Modern Modal Styling */
        .group-modal-card {
            background: var(--bg-header); width: 90%; max-width: 380px;
            border-radius: 24px; padding: 25px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.2);
            animation: slideUpFade 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
            position: relative; overflow: hidden;
        }
        @keyframes slideUpFade { from { transform: translateY(50px) scale(0.9); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }

        /* Header */
        .grp-modal-header { text-align: center; margin-bottom: 20px; }
        .grp-modal-title { font-size: 18px; font-weight: 700; color: var(--text-main); }
        .grp-modal-sub { font-size: 12px; color: var(--text-sec); }

        /* Avatar Upload - Modern */
        .group-avatar-upload {
            width: 90px; height: 90px; margin: 0 auto 20px;
            position: relative; cursor: pointer; group-align: center;
        }
        .grp-img-preview {
            width: 100%; height: 100%; border-radius: 50%;
            object-fit: cover; border: 3px dashed #cbd5e1;
            padding: 3px; transition: 0.3s;
        }
        .grp-img-preview.has-img { border: 3px solid var(--primary-color); padding: 0; }
        .camera-badge {
            position: absolute; bottom: 0; right: 0;
            background: var(--primary-color); color: white;
            width: 30px; height: 30px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            border: 3px solid white; font-size: 12px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.2);
        }

        /* Inputs & Textarea */
        .grp-input-group { margin-bottom: 15px; }
        .grp-label { font-size: 11px; font-weight: 700; color: var(--text-sec); text-transform: uppercase; margin-bottom: 6px; display: block; letter-spacing: 0.5px; }
        
        .grp-input, .grp-textarea, .grp-select {
            width: 100%; padding: 12px 15px;
            background: var(--bg-input); border: 2px solid transparent;
            border-radius: 12px; font-size: 14px; color: var(--text-main);
            outline: none; transition: 0.3s; font-family: inherit;
        }
        .grp-textarea { resize: none; height: 80px; } /* Textarea Height */
        
        .grp-input:focus, .grp-textarea:focus, .grp-select:focus {
            background: var(--bg-header); border-color: var(--primary-color);
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        }

        /* Buttons */
        .grp-actions { display: flex; gap: 12px; margin-top: 10px; }
        .grp-btn {
            flex: 1; padding: 14px; border-radius: 12px;
            font-weight: 600; font-size: 14px; cursor: pointer;
            border: none; transition: 0.2s;
        }
        .grp-btn-cancel { background: transparent; color: var(--text-sec); }
        .grp-btn-cancel:hover { background: var(--bg-input); color: var(--text-main); }
        .grp-btn-create { background: var(--primary-color); color: white; box-shadow: 0 4px 15px rgba(0, 118, 221, 0.3); }
        .grp-btn-create:active { transform: scale(0.96); }
        
        /* --- GROUP CHAT BUBBLE STYLES --- */
        .msg-sender-name {
            font-size: 12px;
            font-weight: 700;
            margin-bottom: 4px;
            display: block;
            line-height: 1;
        }
        /* Alag-alag colors user names ke liye */
        .color-1 { color: #e53935; } /* Red */
        .color-2 { color: #d81b60; } /* Pink */
        .color-3 { color: #8e24aa; } /* Purple */
        .color-4 { color: #1e88e5; } /* Blue */
        .color-5 { color: #00897b; } /* Teal */
        .color-6 { color: #fb8c00; } /* Orange */

        /* --- GROUP INFO VIEW (Header Click) --- */
        .group-desc-box {
            background: var(--bg-header);
            padding: 15px 20px;
            border-bottom: 1px solid var(--border-light);
            margin-bottom: 10px;
            font-size: 14px; color: var(--text-main);
            line-height: 1.5;
        }
        .group-desc-label { font-size: 11px; color: var(--primary-color); font-weight: 700; margin-bottom: 5px; text-transform: uppercase; }

        /* Member List Styling */
        .member-count-header {
            padding: 15px 20px 5px;
            font-size: 14px; font-weight: 700; color: var(--text-sec);
            display: flex; justify-content: space-between; align-items: center;
        }
        
        .member-list-item {
            display: flex; align-items: center;
            padding: 12px 20px;
            background: var(--bg-header);
            border-bottom: 1px solid var(--border-light);
            cursor: pointer;
            transition: 0.2s;
        }
        .member-list-item:active { background: var(--bg-input); }
        
        .member-pic { width: 42px; height: 42px; border-radius: 50%; margin-right: 15px; object-fit: cover; }
        .member-info { flex: 1; }
        .member-name { font-size: 16px; font-weight: 600; color: var(--text-main); display: flex; align-items: center; gap: 6px; }
        .member-status { font-size: 13px; color: var(--text-sec); margin-top: 2px; }
        
        .grp-admin-tag {
            background: #dcfce7; color: #166534;
            font-size: 10px; padding: 2px 8px; border-radius: 4px;
            font-weight: 700; border: 1px solid #bbf7d0;
        }
        .grp-you-tag {
            background: var(--bg-input); color: var(--text-sec);
            font-size: 10px; padding: 2px 6px; border-radius: 4px; font-weight: 600;
        }

        /* Add Member Button */
        .add-member-row {
            display: flex; align-items: center; padding: 15px 20px;
            background: var(--bg-header); cursor: pointer;
            border-bottom: 1px solid var(--border-light);
        }
        .add-icon-circle {
            width: 42px; height: 42px; border-radius: 50%;
            background: var(--green-active); color: white;
            display: flex; align-items: center; justify-content: center;
            font-size: 18px; margin-right: 15px;
        }

        /* Exit Group Button */
        .exit-group-box {
            margin-top: 20px; margin-bottom: 40px;
            background: var(--bg-header);
            color: #ff3b30; font-weight: 600;
            display: flex; align-items: center; gap: 15px;
            padding: 15px 20px; cursor: pointer;
            border-top: 1px solid var(--border-light);
            border-bottom: 1px solid var(--border-light);
        } 
        
        /* --- NOTIFICATION PANEL CSS (Safe Mode) --- */
        
        /* Notification List Item Container */
        .ntf-card {
            background: var(--bg-header);
            border-radius: 16px;
            padding: 15px;
            margin-bottom: 12px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
            border: 1px solid var(--border-light);
            transition: transform 0.2s, opacity 0.2s;
        }

        /* 1. Request Style */
        .ntf-req-header { display: flex; align-items: center; margin-bottom: 10px; }
        .ntf-img { width: 45px; height: 45px; border-radius: 50%; object-fit: cover; margin-right: 12px; border: 2px solid var(--bg-input); }
        .ntf-info { flex: 1; }
        .ntf-name { font-size: 15px; font-weight: 700; color: var(--text-main); }
        .ntf-sub { font-size: 12px; color: var(--text-sec); }
        .ntf-time { font-size: 10px; color: var(--text-sec); opacity: 0.8; margin-left: auto; align-self: flex-start; }
        
        .ntf-group-badge {
            display: inline-block; background: var(--bg-input); 
            padding: 4px 8px; border-radius: 6px; 
            font-size: 11px; font-weight: 600; color: var(--primary-color);
            margin-top: 4px;
        }

        /* Buttons */
        .ntf-actions { display: flex; gap: 10px; margin-top: 12px; }
        .ntf-btn {
            flex: 1; padding: 10px; border-radius: 10px; border: none;
            font-size: 13px; font-weight: 600; cursor: pointer;
            display: flex; align-items: center; justify-content: center; gap: 5px;
        }
        .ntf-btn-approve { background: var(--green-active); color: white; box-shadow: 0 4px 10px rgba(37, 211, 102, 0.2); }
        .ntf-btn-reject { background: #fee2e2; color: #dc2626; }

        /* 2. Warning Style */
        .ntf-warning { border-left: 4px solid #ef4444; background: #fff1f2; }
        [data-theme="dark"] .ntf-warning { background: #450a0a; border-color: #ef4444; } /* Dark mode fix */
        .ntf-warn-icon { color: #ef4444; font-size: 18px; margin-right: 10px; }
        .ntf-warn-title { color: #b91c1c; font-weight: 700; font-size: 14px; margin-bottom: 4px; }
        [data-theme="dark"] .ntf-warn-title { color: #fca5a5; }

        /* 3. System Msg Style */
        .ntf-system { border-left: 4px solid #3b82f6; }
        .ntf-sys-title { color: #1d4ed8; font-weight: 700; font-size: 14px; margin-bottom: 4px; }
        [data-theme="dark"] .ntf-sys-title { color: #93c5fd; }

        /* Section Title */
        .ntf-section-label {
            font-size: 12px; font-weight: 800; color: var(--text-sec);
            text-transform: uppercase; letter-spacing: 0.5px;
            margin: 20px 0 10px 5px;
        }
        
     
        /* --- MOBILE VIEW FIX (Z-INDEX BUG) --- */
        @media screen and (max-width: 1150px) {
            
            .container-1 { 
                width: 100%; 
                position: absolute; 
                left: 0; top: 0; 
                transition: transform 0.3s ease; 
                height: 100%; 
                z-index: 10; /* Default Sidebar High */
            }

            .container-2 { 
                width: 100%; 
                position: absolute; 
                right: 0; top: 0; 
                transform: translateX(100%); 
                transition: transform 0.3s ease; 
                height: 100%; 
                z-index: 5; /* Default Chat Low */
            }

            /* --- JAB CHAT OPEN HO TAB KYA KAREIN --- */
            
            .show-chat .container-1 { 
                transform: translateX(-30%); 
                opacity: 0; 
                pointer-events: none; /* Click disable karein */
                z-index: 1 !important; /* FIX: Sidebar ko neeche bhejein */
            }

            .show-chat .container-2 { 
                transform: translateX(0); 
                z-index: 20 !important; /* FIX: Chat ko sabse upar layein */
            }

            .back-btn { display: block; }
            #chat-btn { margin-left: 25px; } 
            #more-btn { margin-left: 10px; }
            #video-btn{ margin-right: 3px; } 
            
        }
        
        /* --- SYSTEM ALERT DIALOG (Block/Warning/Session) --- */
        .sys-alert-overlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.85); /* Darker background for focus */
            z-index: 9999; /* Sabse upar */
            display: none; align-items: center; justify-content: center;
            backdrop-filter: blur(8px);
            animation: fadeIn 0.3s ease;
        }
        .sys-alert-overlay.active { display: flex; }

        .sys-card {
            background: white; width: 85%; max-width: 320px;
            border-radius: 24px; padding: 30px 20px;
            text-align: center; position: relative;
            box-shadow: 0 20px 50px rgba(0,0,0,0.3);
            transform: scale(0.9); opacity: 0;
            transition: 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
        }
        .sys-alert-overlay.active .sys-card { transform: scale(1); opacity: 1; }

        /* Icon Animation Container */
        .sys-icon-box {
            width: 70px; height: 70px; border-radius: 50%;
            margin: 0 auto 15px; display: flex; align-items: center; justify-content: center;
            font-size: 30px; margin-top: -50px; /* Half outside */
            background: white; border: 4px solid white;
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }

        /* Text Styling */
        .sys-title { font-size: 20px; font-weight: 800; margin-bottom: 8px; color: #1e293b; }
        .sys-msg { font-size: 14px; color: #64748b; line-height: 1.5; margin-bottom: 25px; }

        /* Button */
        .sys-btn {
            width: 100%; padding: 14px; border-radius: 14px;
            border: none; font-weight: 700; font-size: 15px;
            cursor: pointer; color: white; transition: 0.2s;
            box-shadow: 0 5px 15px rgba(0,0,0,0.15);
        }
        .sys-btn:active { transform: scale(0.96); }

        /* --- THEMES (Colors) --- */
        
        /* 1. BLOCK (Red) */
        .type-block .sys-icon-box { background: #fee2e2; color: #dc2626; }
        .type-block .sys-btn { background: #dc2626; box-shadow: 0 5px 15px rgba(220, 38, 38, 0.3); }
        .type-block .sys-title { color: #dc2626; }

        /* 2. WARNING (Orange) */
        .type-warn .sys-icon-box { background: #ffedd5; color: #d97706; }
        .type-warn .sys-btn { background: #d97706; box-shadow: 0 5px 15px rgba(217, 119, 6, 0.3); }
        .type-warn .sys-title { color: #d97706; }

        /* 3. SESSION EXPIRED (Blue) */
        .type-session .sys-icon-box { background: #e0f2fe; color: #0284c7; }
        .type-session .sys-btn { background: #0284c7; box-shadow: 0 5px 15px rgba(2, 132, 199, 0.3); }
        .type-session .sys-title { color: #0284c7; } 
        
        /* =================================================
           DESKTOP VIEW FIX: SIDEBAR SLIDE-OVERS
           ================================================= */
        
        /* Sirf Desktop/Laptop ke liye (Jab screen 900px se badi ho) */
        @media screen and (min-width: 1151px) {
            
            /* 1. Settings, Profile, Group Info, Notifications ko restrict karein */
            .settings-page,
            .settings-page-user,
            #notification-view,
            #group-info-view,
            #account-settings-view,
            #user-info-view {
                width: 30% !important; /* Container-1 ke barabar width */
                border-right: 1px solid var(--border-light); /* Alag dikhane ke liye border */
                box-shadow: 5px 0 15px rgba(0,0,0,0.05); /* Shadow depth */
                
                /* Animation Fix: Desktop par Left side se andar/bahar slide ho */
                /* Default State (Hidden): Screen ke Left bahar */
                transform: translateX(-100%) !important; 
            }

            /* 2. Active State: Apni jagah par aa jaye */
            .settings-page.active,
            .settings-page-user.active,
            #notification-view.active,
            #group-info-view.active,
            #account-settings-view.active,
            #user-info-view.active {
                transform: translateX(0) !important;
            }
            
            /* 3. Create Group Modal ko thoda center karein Sidebar ke upar */
            .group-modal-card {
                /* Agar zaroorat ho to modal ka size adjust karein */
                max-width: 320px; 
            }
        } 
        
        
                
        
            .status-message {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 55vh;
            color: var(--text-sec, #8e8e93);
            text-align: center;
            animation: fadeIn 0.3s ease;
        }
        .status-message i {
            font-size: 40px;
            opacity: 0.3;
            margin-bottom: 15px;
        }
        .status-message p {
            font-size: 15px;
            margin: 0;
            font-weight: 500;
        }
        .vip-lock-row {
            display: flex;
            align-items: center;
            padding: 15px;
            margin: 15px 10px;
            background: rgba(255, 215, 0, 0.08);
            border: 1px solid rgba(255, 215, 0, 0.5);
            border-radius: 12px;
            cursor: pointer;
            animation: slideUp 0.3s ease;
        }

        .lock-icon-box {
            width: 40px; height: 40px;
            background: #fff;
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            color: #FFD700;
            margin-right: 12px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }

        .lock-text { flex: 1; }
        .lock-text h4 { margin: 0; font-size: 14px; color: #b48a00; font-weight: 700; } 
        .lock-text p { margin: 2px 0 0 0; font-size: 11px; color: var(--text-sec, #888); }

        .small-upgrade-btn {
            background: #FFD700;
            border: none;
            padding: 6px 14px;
            font-size: 11px;
            font-weight: 700;
            border-radius: 20px;
            color: #333;
            cursor: pointer;
        }

        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes slideUp { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } 

.msg-reply-preview {
    display: flex;
    background: rgba(0, 116, 221, 0.08); 
    border-radius: 12px;
    padding: 8px 12px;
    margin-bottom: 6px;
    cursor: pointer;
    position: relative;
    border: 1px solid rgba(0, 116, 221, 0.15);
    transition: all 0.2s ease;
    overflow: hidden;
}

.msg-reply-preview:active {
    opacity: 0.8;
    transform: scale(0.98);
}

.reply-bar {
    width: 4px;
    background: var(--primary-color);
    border-radius: 10px;
    margin-right: 12px;
    flex-shrink: 0;
}

.reply-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    width: 100%;
}

.reply-sender {
    font-size: 11px;
    font-weight: 800;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 3px;
}

.reply-text {
    font-size: 13px;
    color: var(--text-main); 
    opacity: 0.85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

[data-theme="dark"] .msg-reply-preview {
    background: rgba(255, 255, 255, 0.05); 
    border: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .reply-text {
    color: #e0e0e0; 
    opacity: 0.8;
}
.my-text .msg-reply-preview {
    background: rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0.1);
}
.my-text .reply-sender {
    color: #fff;
    opacity: 0.9;
}
.my-text .reply-bar {
    background: #fff;
    opacity: 0.8;
}
.my-text .reply-text {
    color: #fff;
    opacity: 0.9;
}

.blocked-state-panel {
    width: 100%;
    padding: 20px 15px;
    background-color: var(--bg-header); 
    border-top: 1px solid var(--border-light);
    color: var(--text-sec);
    
    text-align: center;
    position: relative;
    bottom: 0;
    left: 0;
    z-index: 100;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
}

.blocked-state-panel p {
    margin: 0 0 15px 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-sec);
}

.unblock-btn {
    background-color: var(--bg-input);
    color: var(--primary-color);
    border: 1px solid var(--border-light);
    padding: 10px 30px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    width: auto;
    min-width: 200px;
    transition: 0.2s;
}
.unblock-btn:active {
    transform: scale(0.95);
    background-color: rgba(0,0,0,0.05);
}

[data-theme="dark"] .blocked-state-panel {
    background-color: #182229;
    border-top: 1px solid #2a3942;
}

[data-theme="dark"] .unblock-btn {
    background-color: #2a3942;
    color: #53bdeb;
    border: none;
} 
.mute-footer-style {
    min-height: 70px;
    width: 100%;
    padding: 10px 15px;
    flex-shrink: 0; 
    position: relative;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.03);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #ffebee;
    color: #d32f2f;
    font-weight: 600;
    font-size: 16px;
    border-top: 1px solid #ffcdd2;
}

.mute-footer-style i {
    font-size: 20px;
}
.custom-alert-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.custom-alert-overlay.active {
    display: flex;
    opacity: 1;
}

.custom-alert-box {
    background: var(--bg-header);
    width: 90%;
    max-width: 400px;
    border-radius: 20px;
    padding: 25px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    border: 1px solid var(--border-light);
    transform: scale(0.8);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); /* पॉप-अप एनिमेशन */
}

.custom-alert-overlay.active .custom-alert-box {
    transform: scale(1);
    opacity: 1;
}

.alert-icon-box-new {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    background: var(--bg-input);
    color: var(--primary-color);
}

.alert-type-success .alert-icon-box-new { background: rgba(37, 211, 102, 0.15); color: var(--green-active); }
.alert-type-error .alert-icon-box-new { background: rgba(255, 59, 48, 0.15); color: #ff3b30; }
.alert-type-warn .alert-icon-box-new { background: rgba(255, 215, 0, 0.15); color: #FFD700; }

.alert-title-new {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 10px;
}

.alert-message-new {
    font-size: 15px;
    color: var(--text-sec);
    line-height: 1.5;
    margin-bottom: 25px;
}

.alert-buttons-new {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.alert-btn-new {
    flex: 1;
    padding: 12px 20px;
    border-radius: 12px;
    border: none;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}

.alert-btn-new:active { transform: scale(0.96); }

.btn-primary-new {
    background: var(--primary-color);
    color: white;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.btn-danger-new {
    background: #ff3b30;
    color: white;
}
.btn-cancel-new {
    background: var(--bg-input);
    color: var(--text-main);
}

.msg-content-blur {
    filter: blur(6px);
    user-select: none;
    pointer-events: none;
    transition: 0.3s;
}

.unhide-btn {
    position: absolute;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    backdrop-filter: blur(2px);
    animation: fadeIn 0.3s ease;
}

.unhide-media {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 45px;
    height: 45px;
}
.unhide-media i { font-size: 20px; }
.unhide-text {
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
}
.unhide-text i { font-size: 14px; } 
.action-sheet-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); z-index: 9999 !important;
    display: flex; flex-direction: column; justify-content: flex-end;
    opacity: 0; animation: fadeIn 0.2s forwards;
}
.action-sheet-box {
    background: var(--bg-header);
    border-top-left-radius: 20px; border-top-right-radius: 20px;
    padding: 20px; padding-bottom: 40px;
    transform: translateY(100%); animation: slideUp 0.3s forwards;
}
.sheet-header { display: flex; align-items: center; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid var(--border-light); }
.sheet-img { width: 40px; height: 40px; border-radius: 50%; margin-right: 15px; }
.sheet-title { font-size: 16px; font-weight: 700; color: var(--text-main); }

.sheet-options { display: flex; flex-direction: column; gap: 5px; }
.sheet-opt {
    padding: 15px; border-radius: 12px; background: var(--bg-input);
    color: var(--text-main); font-weight: 500; font-size: 15px;
    display: flex; align-items: center; gap: 15px; cursor: pointer;
}
.sheet-opt i { width: 20px; text-align: center; }
.sheet-opt.text-red { color: #ff3b30; background: rgba(255,59,48,0.1); }
.sheet-cancel {
    margin-top: 15px; padding: 15px; text-align: center;
    background: var(--bg-body); border-radius: 12px;
    font-weight: 700; color: var(--text-main); cursor: pointer;
}
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } } 
#bubble-container {
    z-index: 10000;
}
.chat-head {
    position: fixed;
    top: 100px;
    left: 20px;
    top: 12px;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    cursor: grab; 
    user-select: none;
    touch-action: none;
    transition: transform 0.1s;
    z-index: 10001;
}

.chat-head:hover{
    cursor: grabbing;
    transform: scale(1.2);
}
.chat-head:active {
    cursor: grabbing;
    transform: scale(1.1);
}
.head-avatar-wrapper {
    position: relative;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    background: #fff;
    padding: 2px;
}

.head-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.head-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background: #ff3b30;
    color: white;
    font-size: 11px;
    font-weight: bold;
    min-width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid white;
    transform: scale(0);
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.head-badge.show {
    transform: scale(1);
}

.head-message {
    background: var(--primary-color);
    backdrop-filter: blur(10px);
    padding: 10px 15px;
    border-radius: 20px;
    border-top-left-radius: 5px;
    margin-left: 2px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    font-size: 13px;
    color: #fafafa;
    font-weight: 500;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transform: translateX(20px) scale(0.8);
    transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    pointer-events: none;
}

.head-message.active {
    opacity: 1;
    transform: translateX(0) scale(1);
} 

.role-icon {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: white;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    z-index: 2;
}

.role-vip-ball { background: #FFD700;}
.head-badge {
    z-index: 3; 
} 

.call-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 20000;
    display: none;
    align-items: center; justify-content: center;
    flex-direction: column;
    backdrop-filter: blur(15px);
    opacity: 0; transition: opacity 0.3s ease;
}
.call-overlay.active { display: flex; opacity: 1; }
.call-card {
    width: 100%; max-width: 380px;
    text-align: center;
    padding: 40px 20px;
    position: relative;
    z-index: 2;
}
.avatar-ring {
    position: relative;
    width: 120px; height: 120px;
    margin: 0 auto 25px;
    display: flex; align-items: center; justify-content: center;
}

.call-avatar {
    width: 120px; height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    z-index: 2;
    position: relative;
}
.pulse-ring {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.5);
    animation: pulse 2s infinite;
    z-index: 1;
}
.pulse-ring.delay { animation-delay: 1s; }

@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(2); opacity: 0; }
}

#call-name {
    font-size: 24px; font-weight: 700; color: white;
    margin-bottom: 8px; letter-spacing: 0.5px;
}
#call-status {
    font-size: 14px; color: rgba(255, 255, 255, 0.7);
    font-weight: 500; letter-spacing: 1px; text-transform: uppercase;
}

.call-actions {
    display: flex; justify-content: center; gap: 40px;
    margin-top: 50px;
}
.call-actions.hidden { display: none; }

.call-btn {
    width: 65px; height: 65px;
    border-radius: 50%; border: none;
    font-size: 24px; color: white;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.2s, box-shadow 0.2s;
}
.call-btn:active { transform: scale(0.9); }
.btn-decline {
    background: #ff3b30;
    box-shadow: 0 5px 20px rgba(255, 59, 48, 0.4);
}
.btn-accept {
    background: #34c759;
    box-shadow: 0 5px 20px rgba(52, 199, 89, 0.4);
}
.btn-end {
    background: #ff3b30;
    box-shadow: 0 5px 20px rgba(255, 59, 48, 0.4);
}
.btn-control {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
}
.btn-control:hover { background: rgba(255, 255, 255, 0.3); }
#active-actions { gap: 20px; } 
#scroll-down-btn {
    position: fixed;
    bottom: 85px;
    right: 20px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: #ffffff;
    color: var(--text-sec);
    box-shadow: var(--shadow-menu); 
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1000;
    transition: transform 0.2s ease, opacity 0.2s, background-color 0.3s, color 0.3s;
}
#scroll-down-btn:hover {
    background-color: #f5f5f5;
    color: var(--text-main);
}

[data-theme="dark"] #scroll-down-btn {
    background-color: var(--scroll-btn-bg); 
    color: var(--text-main);
    border: 1px solid var(--border-light); 
}

[data-theme="dark"] #scroll-down-btn:hover {
    background-color: #333;
}

.hide-btn {
    transform: scale(0);
    opacity: 0;
    pointer-events: none;
}

#new-msg-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: var(--green-active); 
    color: #ffffff; 
    font-size: 11px;
    font-weight: 700;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffffff; 
}
[data-theme="dark"] #new-msg-badge {
    border-color: var(--bg-input); 
} 
.account-icon-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.header-red-dot {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 10px;
    height: 10px;
    background-color: #ff3b30;
    border-radius: 50%;
    border: 2px solid #fff;
    display: none;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
[data-theme="dark"] .header-red-dot {
    border-color: var(--bg-header);
}  
.search-area {
    position: relative; 
    width: 100%;
    display: flex;
    align-items: center;
}
.search {
    width: 100%;
    padding-right: 45px !important;
    box-sizing: border-box;
}

.search-icon-btn {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-sec, #888); 
    font-size: 18px;
    cursor: pointer;
    z-index: 10;
    padding: 8px;
    transition: color 0.2s ease;
}

.search-icon-btn:active, 
.search-icon-btn:hover {
    color: var(--primary-color, #007aff);
    transform: translateY(-50%) scale(1.1);
} 
.verify-compact-card {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 12px;
    border-radius: 12px;
    margin-bottom: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    border-left: 4px solid #e91e63;
    transition: all 0.3s ease;
    animation: slideIn 0.3s ease;
}

.verify-compact-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(233, 30, 99, 0.15);
}

.verify-img-wrapper img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fce4ec;
}

.verify-info {
    flex: 1;
    margin-left: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.verify-name {
    font-weight: 700;
    font-size: 14px;
    color: #333;
}

.verify-sub {
    font-size: 11px;
    color: #888;
    margin-bottom: 4px;
}

.verify-proof-btn {
    display: inline-block;
    background: #f0f2f5;
    color: #e91e63;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    cursor: pointer;
    width: fit-content;
    transition: 0.2s;
}

.verify-proof-btn:hover {
    background: #e91e63;
    color: #fff;
}

.verify-actions {
    display: flex;
    gap: 8px;
}

.v-btn {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: 0.2s;
}

.v-reject {
    background: #ffebee;
    color: #d32f2f;
}
.v-reject:hover { background: #d32f2f; color: #fff; }

.v-approve {
    background: #e8f5e9;
    color: #2e7d32;
}
.v-approve:hover { background: #2e7d32; color: #fff; }

@keyframes slideIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
} 

.verify-banner {
    background: linear-gradient(135deg, #007aff, #00c6ff);
    color: white;
    padding: 12px 15px;
    border-radius: 12px;
    margin-top: 15px; 
    margin-bottom: 15px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(0, 122, 255, 0.3);
    transition: transform 0.2s;
}

.verify-banner:active {
    transform: scale(0.98);
}

.verify-info-icon {
    background: rgba(255, 255, 255, 0.2);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 12px;
    margin-left: 10px;
    transition: 0.2s;
}

.verify-info-icon:hover {
    background: rgba(255, 255, 255, 0.4);
    transform: scale(1.1);
}

.proof-modal-container {
    width: 100%;
    text-align: center;
}

.proof-instruction {
    font-size: 13px;
    color: var(--text-sec);
    margin-bottom: 10px;
}

.proof-img-wrapper {
    background: var(--bg-input);
    padding: 5px;
    border-radius: 8px;
    border: var(--border-light);
    display: inline-block;
    max-width: 100%;
}

.proof-img {
    display: block;
    max-width: 100%;
    max-height: 350px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 4px;
}

.proof-link-wrapper {
    margin-top: 12px;
}

.proof-link {
    font-size: 12px;
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.proof-link:hover {
    text-decoration: underline;
} 

.verify-compact-card {
    background: var(--bg-menu);
    border-top: var(--border-light);
    border-right: var(--border-light);
    border-bottom: var(--border-light);
    color: var(--text-main);
}

.type-badge {
    background: var(--bg-input);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 9px;
    margin-left: 5px;
    font-weight: bold;
    border: var(--border-light);
    position: relative;
    bottom: 1px;
}
.badge-voice { color: var(--primary-color); }
.badge-photo { color: #e91e63; }

.verify-audio-pill {
    display: flex;
    align-items: center;
    background: var(--bg-input);
    border: var(--border-light);
    border-radius: 50px;
    padding: 0 8px;
    height: 26px;
    width: 100%;
    max-width: 180px;
    margin-top: 5px;
}

.audio-play-btn {
    width: 18px; 
    height: 18px; 
    background: var(--primary-color); 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: #fff; 
    cursor: pointer; 
    font-size: 8px; 
    margin-right: 5px; 
    flex-shrink: 0;
}

.audio-slider {
    flex: 1; 
    height: 3px; 
    background: var(--text-sec); 
    border-radius: 2px; 
    outline: none; 
    cursor: pointer; 
    margin: 0; 
    opacity: 0.3;
}

.audio-duration {
    font-size: 9px; 
    color: var(--text-main); 
    font-weight: 700; 
    margin-left: 6px; 
    min-width: 20px; 
    text-align: right;
}

.verify-proof-btn {
    margin-top: 4px; 
    display: inline-block; 
    background: var(--bg-input); 
    color: var(--text-main); 
    padding: 2px 10px; 
    border-radius: 20px; 
    font-size: 10px; 
    cursor: pointer; 
    border: var(--border-light);
}
.v-btn {
    background: var(--bg-input); 
    border: var(--border-light);
} 


.verify-border-voice { border-left: 3px solid var(--primary-color); }
.verify-border-photo { border-left: 3px solid #e91e63; }
.verify-img-wrapper {
    border-color: var(--border-light);
}

.verify-name {
    color: var(--text-main);
    display: flex;
    align-items: center;
    cursor: pointer;
}

.verified-icon {
    color: var(--primary-color);
    font-size: 12px;
    margin-left: 3px;
}

.verify-sub {
    color: var(--text-sec);
}

.icon-reject { color: #d32f2f; }
.icon-approve { color: var(--green-active); } 

.vip-page-container {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 9999;
    background: var(--bg-body); 
    color: var(--text-main);
    
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 0;
    visibility: hidden;
}

.vip-page-container.active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.vip-close-btn {
    position: fixed;
    top: 20px; right: 20px;
    width: 40px; height: 40px;
    background: rgba(125, 125, 125, 0.1); 
    backdrop-filter: blur(5px);
    border-radius: 50%;
    
    color: var(--text-main);
    border: var(--border-light);
    
    font-size: 20px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 10000;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.vip-hero {
    text-align: center;
    padding: 60px 20px 40px;
    background: var(--bg-header);
    border-bottom: var(--border-light);
    position: relative;
}

.vip-hero::after {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at top, rgba(255, 215, 0, 0.05), transparent 70%);
    pointer-events: none;
}

.crown-glow {
    width: 80px; height: 80px; margin: 0 auto 10px;
    background: var(--bg-input);
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.2);
    animation: pulseGlow 2s infinite;
}
.hero-crown { width: 50px; }
.royal-title {
    font-size: 32px; font-weight: 900; margin: 0;
    text-transform: uppercase; letter-spacing: 1px;
    background: linear-gradient(to right, #b8860b, #d4af37, #b8860b);
    -webkit-background-clip: text; color: transparent;
}

[data-theme="dark"] .royal-title {
    background: linear-gradient(to right, #FDB931, #FFFFAC, #FDB931);
    -webkit-background-clip: text; color: transparent;
}

.royal-subtitle { color: var(--text-sec); margin-top: 5px; font-size: 14px; }

.trial-banner {
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid #FFD700;
    color: #b8860b;
    display: inline-block; padding: 8px 16px; border-radius: 20px;
    margin-top: 15px; font-size: 14px; font-weight: bold;
    animation: bounce 2s infinite;
}
[data-theme="dark"] .trial-banner { color: #FFD700; } /* Dark mode me Bright Yellow */


.features-section { padding: 25px 15px; }

.section-title {
    text-align: center; color: var(--text-main); margin-bottom: 20px;
    font-size: 18px; text-transform: uppercase; letter-spacing: 1px;
    border-bottom: 2px solid var(--border-light); 
    display: inline-block; padding-bottom: 5px;
}

.feat-grid { display: grid; gap: 15px; }

.feat-card {
    background: var(--bg-menu);
    border: var(--border-light);
    padding: 15px; border-radius: 12px;
    display: flex; align-items: flex-start;
    box-shadow: var(--shadow-soft);
}

.feat-card.highlight {
    border: 1px solid #FFD700;
    background: linear-gradient(135deg, rgba(255,215,0,0.05), var(--bg-menu));
}

.feat-icon { font-size: 24px; margin-right: 15px; min-width: 30px; }

.feat-info h4 { margin: 0 0 5px; font-size: 16px; color: var(--text-main); font-weight: bold; }
.feat-info h4 { color: #b8860b; } 
[data-theme="dark"] .feat-info h4 { color: #FFD700; }

.feat-info p { margin: 0; color: var(--text-sec); font-size: 13px; line-height: 1.4; }

.reviews-section { 
    padding: 20px; 
    background: var(--bg-input);
    text-align: center; 
}
.review-scroller {
    display: flex; gap: 15px; overflow-x: auto; padding-bottom: 10px;
    scroll-snap-type: x mandatory;
}
.review-card {
    background: var(--bg-sidebar); 
    min-width: 250px; padding: 15px;
    border-radius: 10px; 
    border-left: 3px solid #FFD700;
    border-top: var(--border-light); border-right: var(--border-light); border-bottom: var(--border-light);
    text-align: left; scroll-snap-align: center;
    box-shadow: var(--shadow-soft);
}
.stars { color: #FFA500; font-size: 12px; margin-bottom: 5px; }
.review-card p { font-size: 13px; color: var(--text-main); margin-bottom: 10px; font-style: italic; }
.review-card small { color: var(--text-sec); font-size: 11px; }

.see-plans-btn {
    display: block;
    margin-top: 15px;
    color: var(--text-sec);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0.8;
}

.see-plans-btn:hover {
    color: #FFD700;
    opacity: 1;
    transform: translateY(2px);
}

.see-plans-btn i {
    margin-left: 5px;
    animation: bounceDown 2s infinite;
}

@keyframes bounceDown {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(3px); }
    60% { transform: translateY(1.5px); }
}
.pricing-section { padding: 25px 15px; display: flex; flex-direction: column; gap: 15px; padding-bottom: 50px; }

.plan-card {
    background: var(--bg-menu); 
    border-radius: 16px; padding: 20px;
    text-align: center; position: relative; 
    border: var(--border-light);
    box-shadow: var(--shadow-soft);
}

.plan-card.gold {
    border: 2px solid #FFD700;
    background: linear-gradient(180deg, var(--bg-menu), rgba(255, 215, 0, 0.05));
}
[data-theme="dark"] .plan-card.gold {
    background: linear-gradient(180deg, var(--bg-menu), rgba(42, 32, 0, 0.5));
}

.plan-card .badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    min-width: 120px;
    white-space: nowrap;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    background: #FFD700;
    color: #000;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
    border: 2px solid #1a1a1a;
    z-index: 10;
}

.plan-card:nth-child(1) .badge {
    background: #444; 
    color: #fff;
    border-color: #444;
}

.plan-card:nth-child(2) .badge {
    background: #0074dd; 
    color: #fff;
    border-color: #0074dd;
}

.plan-card:nth-child(3) .badge {
    background: #00b894; 
    color: #fff;
    border-color: #00b894;
}

.plan-card.gold .badge {
    background: linear-gradient(45deg, #FFD700, #FFC107);
    color: #000;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
}
.plan-card.trial .badge { background: #444 !important; color: #fff !important; }
.plan-card.gold .badge { background: #FFD700 !important; color: #000 !important; }

.plan-card h3 { margin: 10px 0; color: var(--text-main); }
.plan-card .price { font-size: 28px; font-weight: 900; color: #b8860b; margin-bottom: 5px; }
[data-theme="dark"] .plan-card .price { color: #FFD700; }

.cut { text-decoration: line-through; color: var(--text-sec); font-size: 14px; margin-left: 5px; }

.buy-btn {
    width: 100%; padding: 14px; border: none; border-radius: 30px;
    background: linear-gradient(45deg, #FFB300, #FFD700);
    color: #000; font-weight: 800; font-size: 16px; cursor: pointer;
    margin-top: 15px; box-shadow: 0 5px 15px rgba(255, 179, 0, 0.4);
    transition: 0.2s;
}
.buy-btn:active { transform: scale(0.95); }

.secure-footer { text-align: center; color: var(--text-sec); font-size: 11px; margin-top: 20px; margin-bottom: 40px; }

@keyframes pulseGlow { 0% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.4); } 70% { box-shadow: 0 0 0 15px rgba(255, 215, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0); } }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }   

.vip-dashboard-container {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 9999;
    overflow-y: auto;
    transform: translateY(100%);
    opacity: 0; visibility: hidden;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.3s;

    background: var(--bg-body);
    color: var(--text-main);
    padding-bottom: 50px;
    font-family: 'Poppins', sans-serif;
}

.vip-dashboard-container.active {
    transform: translateY(0);
    opacity: 1; visibility: visible;
}

.vip-close-btn {
    position: absolute;
    top: 20px; right: 20px;
    width: 40px; height: 40px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    color: #fff;
    font-size: 18px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    z-index: 10001;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.dash-header {
    position: relative;
    text-align: center;
    padding: 60px 20px 30px;
    background: radial-gradient(circle at 50% 30%, rgba(255, 223, 0, 0.15) 0%, rgba(255, 255, 255, 0) 70%), var(--bg-body);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .dash-header {
    background: radial-gradient(circle at 50% 30%, rgba(255, 215, 0, 0.1) 0%, var(--bg-body) 80%);
    border-bottom: 1px solid rgba(255, 215, 0, 0.1);
}

.crown-anim-box {
    position: relative;
    width: 100px; height: 100px;
    margin: 0 auto 15px;
    display: flex; align-items: center; justify-content: center;
}

.crown-anim-box::before {
    content: '';
    position: absolute;
    width: 100%; height: 100%;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent, rgba(184, 134, 11, 0.3), transparent);
    animation: rotateAura 4s linear infinite;
}

[data-theme="dark"] .crown-anim-box::before {
    background: conic-gradient(from 0deg, transparent, rgba(255, 215, 0, 0.4), transparent);
}

.dash-crown {
    width: 70px;
    z-index: 2;
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.1));
    animation: floatCrown 3s infinite ease-in-out;
}
[data-theme="dark"] .dash-crown {
    filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.5)); /* Dark mode me glow karega */
}

.dash-header h2 {
    font-size: 26px;
    font-weight: 900;
    margin: 5px 0 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    
    background: -webkit-linear-gradient(45deg, #b8860b, #d4af37, #8a6e03); /* Light mode: Bronze Gold */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

[data-theme="dark"] .dash-header h2 {
    background: -webkit-linear-gradient(45deg, #FFD700, #ffecb3, #FFD700);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}


.status-active {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    margin-top: 5px;
    
    background: rgba(46, 204, 113, 0.1);
    color: #27ae60;
    border: 1px solid rgba(46, 204, 113, 0.2);
}
[data-theme="dark"] .status-active {
    background: rgba(46, 204, 113, 0.15);
    color: #2ecc71;
    border: 1px solid rgba(46, 204, 113, 0.4);
    box-shadow: 0 0 10px rgba(46, 204, 113, 0.2);
}

.vip-close-btn {
    position: absolute;
    top: 20px; right: 20px;
    width: 40px; height: 40px;
    background: rgba(128, 128, 128, 0.1);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(128, 128, 128, 0.2);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    color: var(--text-sec);
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
}
.vip-close-btn:hover {
    background: #ff4757;
    color: white;
    transform: rotate(90deg);
    border-color: #ff4757;
    box-shadow: 0 5px 15px rgba(255, 71, 87, 0.4);
}


@keyframes floatCrown { 
    0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} 
}
@keyframes rotateAura {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.dash-card { background: var(--bg-menu); border: var(--border-light); border-radius: 16px; margin: 20px; padding: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); position: relative; overflow: hidden; }
.dash-card.main-card { border: 1px solid #FFD700; background: linear-gradient(160deg, var(--bg-menu) 0%, rgba(255, 215, 0, 0.05) 100%); }
[data-theme="dark"] .dash-card.main-card { background: linear-gradient(160deg, #1a1a1a 0%, #000 100%); }

.card-top-label { font-size: 11px; font-weight: bold; color: var(--text-sec); letter-spacing: 1px; }
#dash-plan-name { font-size: 26px; color: #FFD700; margin: 5px 0 20px; text-transform: uppercase; text-shadow: 0 2px 10px rgba(255, 215, 0, 0.2); }
.expiry-row { display: flex; align-items: center; gap: 15px; }
.days-box { background: rgba(255, 215, 0, 0.1); border: 1px solid #FFD700; border-radius: 10px; padding: 8px 15px; text-align: center; min-width: 80px; }
#dash-days-left { display: block; font-size: 22px; font-weight: 900; color: var(--text-main); line-height: 1; }
[data-theme="dark"] #dash-days-left { color: #fff; }
.days-box small { font-size: 10px; color: #baa00e; font-weight: 600; }
.date-box { font-size: 13px; color: var(--text-sec); display: flex; flex-direction: column; }
.date-box strong { color: var(--text-main); font-size: 15px; }

#dash-renewal-box { margin-top: 20px; border-top: 1px dashed var(--text-sec); padding-top: 15px; text-align: center; }
.renew-alert { color: #ff4757; font-weight: bold; margin-bottom: 10px; font-size: 13px; animation: blinkText 2s infinite; }
.renew-btn { width: 100%; padding: 12px; border-radius: 50px; border: none; background: #FFD700; color: #000; font-weight: 800; cursor: pointer; box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4); }
@keyframes blinkText { 0%,100%{opacity:1} 50%{opacity:0.6} }
.card-heading { font-size: 16px; margin-bottom: 15px; color: var(--text-main); border-left: 3px solid #FFD700; padding-left: 10px; }

.proof-viewer.vertical-mode {
    width: 100%;
    height: 450px;
    overflow-y: auto;
    overflow-x: hidden;
    background: #000;
    border-radius: 12px;
    display: block;
    padding: 0;
    position: relative;
}
.proof-image { 
    width: 100%;
    height: auto;
    display: block;
    object-fit: unset;
}

.proof-viewer.vertical-mode::-webkit-scrollbar {
    width: 6px;
}
.proof-viewer.vertical-mode::-webkit-scrollbar-thumb {
    background: #333; 
    border-radius: 10px;
}
.proof-viewer.vertical-mode::-webkit-scrollbar-track {
    background: #000; 
}

.verified-badge {
    position: absolute; bottom: 10px; right: 10px;
    background: rgba(46, 204, 113, 0.9); color: #fff;
    padding: 6px 12px; border-radius: 20px; font-size: 12px; font-weight: bold;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}

/* 3. Feedback */
.star-rating-box { display: flex; flex-direction: row-reverse; justify-content: center; gap: 8px; margin-bottom: 15px; }
.star-rating-box input { display: none; }
.star-rating-box label { font-size: 30px; color: var(--text-sec); cursor: pointer; transition: 0.2s; }
.star-rating-box input:checked ~ label, .star-rating-box label:hover, .star-rating-box label:hover ~ label { color: #FFD700; }
#dash-feedback-text { width: 100%; height: 80px; padding: 10px; border-radius: 8px; background: var(--bg-input); border: var(--border-light); color: var(--text-main); resize: none; font-family: inherit; margin-bottom: 10px; }
.submit-btn { width: 100%; padding: 12px; background: var(--primary-color); color: #fff; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; }