:root {
            /* Same Palette as Login */
            --bg-deep: #090a0c;
            --bg-sidebar: #111214;
            --bg-server-rail: #050505;
            --bg-chat: #16181d;
            --bg-header: #111214;
            
            --text-main: #f2f3f5;
            --text-muted: #949ba4;
            
            --brand: #5865F2;
            --accent-green: #23a559;
            --danger: #da373c;
            
            --border: rgba(255, 255, 255, 0.05);
            --hover: rgba(255, 255, 255, 0.04);
            --active: rgba(255, 255, 255, 0.08);
        }

        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; outline: none; }
        
        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 8px; height: 8px; }
        ::-webkit-scrollbar-track { background: #1a1a1a; }
        ::-webkit-scrollbar-thumb { background: #000; border-radius: 4px; }

        body {
            background-color: var(--bg-deep);
            color: var(--text-main);
            height: 100vh;
            width: 100vw;
            overflow: hidden;
            display: flex;
        }

        /* --- 1. SERVER RAIL (Left) --- */
        .server-rail {
            width: 72px;
            background-color: var(--bg-server-rail);
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 12px 0;
            overflow-y: auto;
            z-index: 20;
        }

        .server-icon {
            width: 48px; height: 48px;
            border-radius: 50%;
            background-color: #313338;
            margin-bottom: 8px;
            cursor: pointer;
            display: flex; justify-content: center; align-items: center;
            transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            position: relative;
            color: var(--text-main);
            font-weight: 600;
                background-size: cover;          /* Ensure image fills the circle */
    background-position: center;     /* Center the image */
    background-repeat: no-repeat;
        }

        .server-icon:hover { border-radius: 16px; background-color: var(--brand); }
        .server-icon.active { border-radius: 16px; background-color: var(--brand); }

        /* The white pill indicator */
        .pill {
            position: absolute; left: -16px; top: 10px;
            width: 4px; height: 0px;
            background: white;
            border-radius: 0 4px 4px 0;
            transition: 0.2s;
        }
        .server-icon:hover .pill { height: 20px; top: 14px; left: -12px; }
        .server-icon.active .pill { height: 36px; top: 6px; left: -12px; }

        /* Create Server Button */
        .create-btn { background: #313338; color: var(--accent-green); transition: 0.2s; }
        .create-btn:hover { background: var(--accent-green); color: white; border-radius: 50% !important; }

        /* --- 2. SIDEBAR (Channels) --- */
        .sidebar {
            width: 240px;
            background-color: var(--bg-sidebar);
            display: flex;
            flex-direction: column;
            border-radius: 20px 0 0 0; /* Modern touch */
        }

        .server-header {
            height: 48px;
            padding: 0 16px;
            display: flex; align-items: center; justify-content: space-between;
            font-weight: 700;
            box-shadow: 0 1px 0 var(--border);
            cursor: pointer;
            transition: 0.2s;
        }
        .server-header:hover { background: var(--hover); }

        .channel-list { flex: 1; padding: 10px 8px; overflow-y: auto; }

        .category {
            font-size: 11px; font-weight: 700; color: var(--text-muted);
            text-transform: uppercase; margin: 16px 0 6px 8px;
            display: flex; justify-content: space-between; align-items: center;
            padding-right: 8px;
        }
        .category i { cursor: pointer; opacity: 0; transition: 0.2s; }
        .category:hover i { opacity: 1; }

        .channel {
            display: flex; align-items: center;
            padding: 6px 8px;
            margin-bottom: 2px;
            border-radius: 4px;
            color: var(--text-muted);
            cursor: pointer;
            font-weight: 500;
        }
        .channel:hover { background-color: var(--hover); color: var(--text-main); }
        .channel.active { background-color: var(--active); color: white; }
        .channel i { margin-right: 6px; font-size: 18px; color: #80848e; }

        /* User Footer */
        .user-footer {
            background-color: #0b0c0e;
            height: 52px;
            display: flex; align-items: center;
            padding: 0 8px;
        }
        .avatar {
            width: 32px; height: 32px; border-radius: 50%;
            background-size: cover; margin-right: 8px; position: relative;
        }
        .status-dot {
            width: 10px; height: 10px; border-radius: 50%;
            background: var(--accent-green); border: 2px solid #0b0c0e;
            position: absolute; bottom: -2px; right: -2px;
        }

        /* --- 3. MAIN CHAT AREA --- */
        .chat-main {
            flex: 1;
            background-color: var(--bg-chat);
            display: flex; flex-direction: column;
            position: relative;
        }

        .chat-header {
            height: 48px;
            padding: 0 16px;
            display: flex; align-items: center;
            box-shadow: 0 1px 0 var(--border);
            background: var(--bg-header);
        }
        .chat-header-title { font-weight: 700; display: flex; align-items: center; gap: 8px; }

        .messages-wrapper {
            flex: 1;
            overflow-y: auto;
            padding: 20px;
            display: flex; flex-direction: column;
            gap: 16px;
        }

        /* Message Styling */
        .msg { display: flex; gap: 16px;  } /* Opacity 0 for GSAP */
        .msg-avatar { 
            width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; 
            background-color: #333; background-size: cover; 
            cursor: pointer; transition: 0.2s;
        }
        .msg-avatar:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.5); }
        
        .msg-content h4 { font-size: 15px; font-weight: 500; margin-bottom: 2px; }
        .msg-content h4 span { font-size: 11px; color: var(--text-muted); margin-left: 8px; font-weight: 400; }
        .msg-text { color: #dcddde; font-size: 15px; line-height: 1.4; white-space: pre-wrap; word-break: break-word;}

        /* Input Area */
        .input-area { padding: 0 16px 24px 16px; }
        .input-box {
            background-color: #383a40;
            border-radius: 8px;
            padding: 12px 16px;
            display: flex; align-items: center; gap: 12px;
        }
        .input-box input {
            flex: 1; background: transparent; border: none; color: white; font-size: 15px;
        }
        .input-icons i {
            color: #b9bbbe; cursor: pointer; margin-left: 12px; font-size: 20px; transition: 0.2s;
        }
        .input-icons i:hover { color: var(--text-main); }

        /* --- 4. RIGHT MEMBER LIST --- */
        .members-sidebar {
            width: 240px;
            background-color: var(--bg-sidebar);
            padding: 24px 16px;
            display: none; /* Hidden on small screens */
        }
        @media (min-width: 1200px) { .members-sidebar { display: block; } }

        .member-group {
            margin-bottom: 24px;
        }
        .group-title {
            color: var(--text-muted); font-size: 12px; font-weight: 700;
            text-transform: uppercase; margin-bottom: 10px;
        }
        .member-item {
            display: flex; align-items: center; padding: 6px 8px;
            border-radius: 4px; cursor: pointer; opacity: 0.6; transition: 0.2s;
        }
        .member-item:hover { background: var(--hover); opacity: 1; }
        .member-item.online { opacity: 1; }
        .member-avatar {
            width: 32px; height: 32px; border-radius: 50%;
            background-size: cover; margin-right: 10px; position: relative;
        }

        /* --- 5. MODALS --- */
/* --- 5. MODALS --- */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(5px);
    
    /* CHANGE THIS FROM 100 TO 300 */
    z-index: 300; 
    
    display: none; justify-content: center; align-items: center;
}
        .modal {
            background: #313338; width: 440px; border-radius: 5px; overflow: hidden;
            box-shadow: 0 0 20px rgba(0,0,0,0.5); transform: scale(0.8); opacity: 0;
        }
        .modal-header { padding: 24px; text-align: center; }
        .modal-header h2 { font-size: 24px; font-weight: 700; margin-bottom: 8px; }
        .modal-body { padding: 0 24px 24px 24px; }
        .modal-label { display: block; font-size: 12px; font-weight: 700; color: var(--text-muted); margin-bottom: 8px; text-transform: uppercase; }
        .modal-input {
            width: 100%; padding: 10px; background: #1e1f22; border: none; border-radius: 3px; color: white; font-size: 16px;
        }
        .modal-footer {
            background: #2b2d31; padding: 16px; display: flex; justify-content: flex-end; gap: 10px;
        }
        .btn { padding: 10px 24px; border-radius: 3px; border: none; font-weight: 500; cursor: pointer; color: white; }
        .btn-cancel { background: transparent; }
        .btn-cancel:hover { text-decoration: underline; }
        .btn-primary { background: var(--brand); }
        .btn-primary:hover { background: #4752c4; }
.member-status-dot {
    width: 10px;
    height: 10px;
    background-color: #23a559; /* Green */
    border-radius: 50%;
    position: absolute;
    bottom: -2px;
    right: -2px;
    border: 3px solid #2b2d31; /* Matches sidebar background */
}

.member-item:hover {
    background-color: #35373c;
}

/* Dropdown Container */
.server-dropdown {
    display: none; /* Hidden by default */
    position: absolute;
    top: 55px;
    left: 10px;
    width: 220px;
    background-color: #111214;
    border-radius: 4px;
    padding: 6px 8px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.4);
    z-index: 100;
}

/* Active State (Visible) */
.server-dropdown.show {
    display: block;
}

/* Header Chevron Rotation */
.server-header.open i {
    transform: rotate(180deg);
}

/* Menu Items */
.dropdown-item {
    padding: 8px 8px;
    border-radius: 2px;
    font-size: 14px;
    font-weight: 500;
    color: #b5bac1;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
}

.dropdown-item:hover {
    background-color: #4752c4; /* Blurple hover */
    color: white;
}

/* Separator Line */
.dropdown-sep {
    height: 1px;
    background-color: #1e1f22;
    margin: 4px 0;
}

/* Danger Item (Leave Server) */
.dropdown-item.danger {
    color: #f23f42;
}

.dropdown-item.danger:hover {
    background-color: #f23f42;
    color: white;
}


/* SETTINGS OVERLAY */
.settings-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: #313338;
    z-index: 200;
    display: flex;
    font-family: 'Inter', sans-serif;
}

/* Sidebar */
.settings-sidebar {
    width: 280px;
    background: #2b2d31;
    display: flex;
    flex-direction: column;
    padding: 60px 20px 20px 40px; /* High padding top */
}

.settings-header { margin-bottom: 20px; }

.settings-nav-item {
    padding: 10px;
    margin-bottom: 2px;
    border-radius: 4px;
    cursor: pointer;
    color: #b5bac1;
    font-weight: 500;
}

.settings-nav-item:hover { background: #35373c; color: #dbdee1; }
.settings-nav-item.active { background: #404249; color: white; }
.settings-nav-item.danger { color: #f23f42; margin-top: auto; }
.settings-sep { height: 1px; background: #3f4147; margin: 10px 0; }

/* Content */
.settings-content {
    flex: 1;
    padding: 60px 40px;
    overflow-y: auto;
}

.settings-card {
    background: transparent;
    border-radius: 8px;
    margin-top: 20px;
}

/* Member List Item in Settings */
.set-member-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px; border-bottom: 1px solid #3f4147;
}

/* Audit Log Item */
.audit-item {
    display: flex;
    padding: 12px 16px;
    border-bottom: 1px solid #3f4147;
    font-size: 14px;
}
.audit-action { font-weight: 700; color: white; width: 150px; }
.audit-detail { color: #b5bac1; flex: 1; }
.audit-time { color: #787f87; font-size: 12px; }

/* Ensure cropper image fits */
.cropper-container {
    width: 100%;
    max-height: 400px;
}
/* --- USER FOOTER ENHANCEMENTS --- */
.user-footer {
    background-color: #232428; /* Slightly darker than sidebar */
    height: 52px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0; /* Prevent shrinking */
}

/* Profile Info Area */
.user-info-container {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    flex: 1;
    margin-right: 8px;
    transition: 0.2s;
}

.user-info-container:hover {
    background-color: rgba(255, 255, 255, 0.06);
}

.user-text {
    margin-left: 8px;
    overflow: hidden;
}

.username {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: white;
}

.user-status {
    font-size: 11px;
    color: #b5bac1;
}

/* Control Buttons */
.user-controls {
    display: flex;
}

.control-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    cursor: pointer;
    color: #b5bac1;
    transition: 0.2s;
    position: relative;
}

.control-btn:hover {
    background-color: rgba(255, 255, 255, 0.06);
    color: #dbdee1;
}

/* Mic Toggle Logic */
.control-btn .fa-microphone-slash { display: none; color: #f23f42; }
.control-btn.off .fa-microphone { display: none; }
.control-btn.off .fa-microphone-slash { display: block; }

/* Avatar Upload Overlay in Modal */
.profile-avatar-upload {
    position: relative;
    cursor: pointer;
    border-radius: 50%;
    overflow: hidden;
}
.profile-avatar-upload:hover .avatar-overlay { opacity: 1; }
.avatar-overlay {
    position: absolute; top:0; left:0; width:100%; height:100%;
    background: rgba(0,0,0,0.5);
    display: flex; justify-content: center; align-items: center;
    color: white; opacity: 0; transition: 0.2s;
}.ctx-divider {
    height: 1px;
    background-color: #3f4147;
    margin: 15px 0;
}/* --- DISCORD STYLE MINI PROFILE --- */

/* The dark background overlay */
.profile-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 500;
    display: none; /* Hidden by default */
    justify-content: center;
    align-items: center;
}

/* The Card Itself */
.profile-card {
    width: 340px;
    background-color: #111214; /* Deep dark background */
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 16px rgba(0,0,0,0.24);
    position: relative;
    animation: popIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

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

/* Colored Banner */
.profile-banner {
    height: 60px;
    background-color: var(--brand); /* Default color, changed by JS */
}

/* Avatar Container (Overlaps banner) */
.profile-avatar-wrapper {
    position: absolute;
    top: 16px; 
    left: 16px;
}

.profile-avatar-img {
    width: 80px; height: 80px;
    border-radius: 50%;
    background-size: cover;
    border: 6px solid #111214; /* Matches card bg to create 'cutout' look */
    background-color: #111214;
    position: relative;
}

.profile-status-indicator {
    width: 20px; height: 20px;
    background: #23a559; /* Online Green */
    border: 4px solid #111214;
    border-radius: 50%;
    position: absolute;
    bottom: 0; right: 0;
}

/* Content Body */
.profile-body {
    padding: 50px 16px 16px 16px; /* Top padding clears the avatar */
    background-color: #111214;
}

.profile-username {
    font-size: 20px; font-weight: 700; color: white;
    line-height: 1.2;
}

.profile-tag {
    font-size: 14px; color: #b5bac1; font-weight: 400;
}

.profile-divider {
    height: 1px; background: #2f3136; margin: 12px 0;
}

/* Section Headers */
.profile-section-title {
    font-size: 12px; font-weight: 700; color: #b5bac1;
    text-transform: uppercase; margin-bottom: 8px;
}

/* Role Pill */
.profile-role-pill {
    display: inline-flex; align-items: center;
    background: #2b2d31;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    color: #dbdee1;
    margin-right: 4px;
    margin-bottom: 4px;
}
.role-circle {
    width: 10px; height: 10px; border-radius: 50%; margin-right: 6px;
}

/* Message Input */
.profile-input {
    width: 100%;
    background: #1e1f22;
    border: 1px solid #1e1f22;
    color: #dbdee1;
    padding: 10px;
    border-radius: 3px;
    font-size: 14px;
    outline: none;
    transition: 0.2s;
}
.profile-input:focus { border-color: #00a8fc; }

/* Admin Controls */
.profile-admin-box {
    background: #2b2d31;
    padding: 8px;
    border-radius: 4px;
    margin-bottom: 10px;
}/* --- MESSAGE GROUPING (Discord Style) --- */

/* Standard message spacing */
.msg { 
    margin-top: 6px !important; 
    display: flex; 
    gap: 16px; 
    position: relative; /* For positioning hover elements later if needed */

} 

/* Continued message (Same user) */
.msg.msg-continued {
        margin-top: -14px !important; 

}

/* Hide the avatar image but keep the spacing */
.msg.msg-continued .msg-avatar {
    background-image: none !important;
    background-color: transparent !important;
    cursor: default;
    height: 22px; /* Smaller height so it doesn't push text down */
    border: none;
    pointer-events: none;
}

/* Hide the Name/Time header completely */
.msg.msg-continued h4 {
    display: none;
}

/* Hover effect: Discord shows the timestamp on the left on hover. 
   We will keep it simple for now: just text alignment. */
.msg.msg-continued .msg-content {
    padding-top: 0;
}div#form-create {
    padding: 10px;
}



/* --- HOME / DM SIDEBAR --- */
.home-search-bar {
    margin: 10px;
    background: #1e1f22;
    padding: 6px;
    border-radius: 4px;
    font-size: 13px;
    color: #949ba4;
    cursor: text;
}

.nav-item {
    display: flex; align-items: center;
    padding: 10px 12px;
    margin: 2px 8px;
    border-radius: 4px;
    cursor: pointer;
    color: #949ba4;
    font-weight: 500;
}
.nav-item:hover, .nav-item.active {
    background-color: #35373c;
    color: white;
}
.nav-item i { margin-right: 12px; font-size: 18px; }

.dm-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 18px 18px 8px 18px;
    font-size: 11px; font-weight: 700; color: #949ba4;
    text-transform: uppercase;
}
.dm-user {
    display: flex; align-items: center;
    padding: 8px 12px; margin: 1px 8px;
    border-radius: 4px; color: #949ba4; cursor: pointer;
}
.dm-user:hover { background-color: #35373c; color: #dbdee1; }
.dm-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background-size: cover; margin-right: 12px; position: relative;
}

/* --- FRIENDS DASHBOARD (Center Area) --- */
.friends-top-bar {
    display: flex; align-items: center;
    height: 48px; padding: 0 16px;
    border-bottom: 1px solid #1f2023;
    background-color: #313338;
}
.ft-icon { margin-right: 8px; color: #949ba4; }
.ft-title { font-weight: 700; margin-right: 16px; color: white; }
.ft-divider { width: 1px; height: 24px; background: #3f4147; margin-right: 16px; }

.ft-tab {
    padding: 2px 8px; margin-right: 8px;
    border-radius: 4px; cursor: pointer;
    font-weight: 500; color: #b5bac1; font-size: 14px;
}
.ft-tab:hover { background-color: #3f4147; color: #dbdee1; }
.ft-tab.active { background-color: #404249; color: white; }

.btn-add-friend {
    background-color: #23a559; color: white;
    padding: 2px 8px; border-radius: 4px; font-size: 13px; font-weight: 600;
    margin-left: auto; cursor: pointer;
}

/* Friends List Rows */
.friends-list-container {
    padding: 16px 20px;
    overflow-y: auto; flex: 1;
}
.friend-label {
    font-size: 12px; font-weight: 700; color: #b5bac1;
    text-transform: uppercase; margin-bottom: 16px;
}

.friend-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px; border-top: 1px solid #3f4147;
    cursor: pointer;
}
.friend-row:hover { background-color: #3f4147; border-radius: 8px; border-top-color: transparent; }

.fr-info { display: flex; align-items: center; }
.fr-text { margin-left: 12px; }
.fr-name { font-weight: 600; color: white; }
.fr-status { font-size: 12px; color: #b5bac1; }

.fr-actions { display: flex; gap: 10px; }
.fr-btn {
    width: 32px; height: 32px; border-radius: 50%;
    background-color: #2b2d31; color: #b5bac1;
    display: flex; justify-content: center; align-items: center;
}
.fr-btn:hover { background-color: #1e1f22; color: white; }
/* ADD FRIEND TAB STYLES */
.add-friend-header {
    margin-bottom: 20px;
}
.add-friend-header h3 { color: white; margin-bottom: 8px; }
.add-friend-header p { color: #b5bac1; font-size: 13px; margin-bottom: 16px; }

.big-search-box {
    width: 100%;
    background-color: #1e1f22;
    border: 1px solid #1e1f22;
    padding: 12px;
    border-radius: 8px;
    color: white;
    font-size: 16px;
    outline: none;
    transition: 0.2s;
}
.big-search-box:focus { border-color: #00a8fc; }

/* Empty State */
.empty-state-img {
    width: 100%; height: 200px;
    background-image: url('https://discord.com/assets/a188414ce83f2454b9d71a47c3d95909.svg'); /* Generic placeholder */
    background-size: contain; background-repeat: no-repeat; background-position: center;
    opacity: 0.5;
}

/* Action Buttons (Accept/Reject/Send) */
.action-btn {
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    cursor: pointer;
    background-color: #2b2d31;
    margin-left: 10px;
    transition: 0.2s;
}
.btn-accept { color: #23a559; }
.btn-accept:hover { background-color: #23a559; color: white; }

.btn-reject { color: #f23f42; }
.btn-reject:hover { background-color: #f23f42; color: white; }

.btn-send-req { 
    background-color: #248046; color: white; width: auto; padding: 0 16px; border-radius: 4px; font-size: 13px; font-weight: 600;
}
.btn-send-req:hover { background-color: #1a6334; }
.btn-send-req.disabled { background-color: #3b3d44; cursor: not-allowed; opacity: 0.7; }
:root {
    /* --- NEW COLOR PALETTE (Glassy Purple) --- */
    --bg-body: #000000;
    --glass-dark: rgba(10, 10, 10, 0.7);       /* Main panels */
    --glass-light: rgba(20, 20, 20, 0.6);      /* Secondary panels */
    --glass-lighter: rgba(255, 255, 255, 0.05); /* Buttons/Inputs */
    
    --border-glass: rgba(255, 255, 255, 0.08); /* Subtle borders */
    
    --text-main: #ffffff;
    --text-muted: #a1a1aa;
    
    --brand: #a855f7;          /* Neon Purple */
    --brand-glow: rgba(168, 85, 247, 0.5); /* Glow effect */
    --brand-hover: #9333ea;
    
    --accent-green: #10b981;
    --danger: #ef4444;
    
    --shadow-glass: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; outline: none; }

/* --- 1. BODY & BACKGROUND --- */
body {
    background-color: var(--bg-body);
    /* The requested deep purple/black radial gradient */
    background-image: 
        radial-gradient(circle at 0% 0%, #1a0b2e 0%, transparent 50%), 
        radial-gradient(circle at 100% 100%, #2e0b2e 0%, transparent 50%);
    background-attachment: fixed;
    color: var(--text-main);
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    display: flex;
}

/* Custom Scrollbar (Thinner & Darker) */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

/* --- 2. SERVER RAIL (Left) --- */
.server-rail {
    width: 72px;
    background: rgba(0, 0, 0, 0.3); /* Very subtle dark overlay */
    backdrop-filter: blur(10px);    /* Glass effect */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 0;
    overflow-y: auto;
    z-index: 20;
    border-right: 1px solid var(--border-glass);
}

.server-icon {
    width: 48px; height: 48px;
    border-radius: 50%;
    background-color: var(--glass-lighter);
    margin-bottom: 8px;
    cursor: pointer;
    display: flex; justify-content: center; align-items: center;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    color: var(--text-main);
    font-weight: 600;
    background-size: cover;
    background-position: center;
    border: 1px solid transparent;
}

.server-icon:hover { 
    border-radius: 16px; 
    background-color: var(--brand);
    box-shadow: 0 0 15px var(--brand-glow); /* Glow on hover */
    border-color: rgba(255,255,255,0.2);
}

.server-icon.active { 
    border-radius: 16px; 
    background-color: var(--brand);
    box-shadow: 0 0 15px var(--brand-glow);
}

/* Pill Indicator */
.pill {
    position: absolute; left: -16px; top: 20px;
    width: 4px; height: 8px;
    background: white;
    border-radius: 0 4px 4px 0;
    transition: 0.2s ease-in-out;
    opacity: 0;
}
.server-icon:hover .pill { height: 20px; top: 14px; left: -12px; opacity: 1; }
.server-icon.active .pill { height: 36px; top: 6px; left: -12px; opacity: 1; }

/* Create Button */
.create-btn { background: rgba(16, 185, 129, 0.1); color: var(--accent-green); border: 1px dashed var(--accent-green); }
.create-btn:hover { background: var(--accent-green); color: white; border-style: solid; box-shadow: 0 0 10px rgba(16, 185, 129, 0.4); }

/* --- 3. SIDEBAR (Glass Panel) --- */
.sidebar {
    width: 240px;
    background: var(--glass-dark);
    backdrop-filter: blur(20px);
    border-right: 1px solid var(--border-glass);
    display: flex;
    flex-direction: column;
}

.server-header {
    height: 48px;
    padding: 0 16px;
    display: flex; align-items: center; justify-content: space-between;
    font-weight: 700;
    border-bottom: 1px solid var(--border-glass);
    cursor: pointer;
    transition: 0.2s;
    text-shadow: 0 0 10px rgba(168, 85, 247, 0.3); /* Subtle text glow */
}
.server-header:hover { background: var(--glass-lighter); }

.channel-list { flex: 1; padding: 10px 8px; overflow-y: auto; }

.category {
    font-size: 11px; font-weight: 700; color: var(--text-muted);
    text-transform: uppercase; margin: 16px 0 6px 8px;
    display: flex; justify-content: space-between; align-items: center;
    letter-spacing: 0.5px;
}
.category i { cursor: pointer; opacity: 0; transition: 0.2s; }
.category:hover i { opacity: 1; }

.channel {
    display: flex; align-items: center;
    padding: 8px 10px;
    margin-bottom: 2px;
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s;
}

.channel:hover { 
    background-color: var(--glass-lighter); 
    color: var(--text-main); 
}

.channel.active { 
    background: rgba(168, 85, 247, 0.15); /* Purple tint */
    color: #fff; 
    border-left: 3px solid var(--brand);
}

.channel i { margin-right: 8px; font-size: 16px; opacity: 0.7; }
.channel.active i { color: var(--brand); opacity: 1; text-shadow: 0 0 5px var(--brand-glow); }

/* User Footer (Glassy) */
.user-footer {
    background: rgba(0, 0, 0, 0.4); /* Darker bottom */
    height: 56px;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 8px;
    border-top: 1px solid var(--border-glass);
}

.user-info-container {
    display: flex; align-items: center; padding: 4px 8px; border-radius: 4px;
    cursor: pointer; transition: 0.2s; flex: 1;
}
.user-info-container:hover { background: var(--glass-lighter); }

.avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background-size: cover; margin-right: 8px; position: relative;
    border: 2px solid rgba(255,255,255,0.1);
}
.status-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--accent-green); border: 2px solid #000;
    position: absolute; bottom: -2px; right: -2px;
    box-shadow: 0 0 5px rgba(16, 185, 129, 0.5);
}

.user-controls { display: flex; }
.control-btn {
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    border-radius: 6px; cursor: pointer; color: #b5bac1; transition: 0.2s;
}
.control-btn:hover { background: var(--glass-lighter); color: #fff; }

/* --- 4. MAIN CHAT AREA (Transparent Background) --- */
.chat-main {
    flex: 1;
    background: transparent; /* Let body gradient show through */
    display: flex; flex-direction: column;
    position: relative;
}

.chat-header {
    height: 48px;
    padding: 0 16px;
    display: flex; align-items: center;
    border-bottom: 1px solid var(--border-glass);
    background: rgba(10, 10, 10, 0.4); /* Very light overlay */
    backdrop-filter: blur(10px);
}
.chat-header-title { 
    font-weight: 700; display: flex; align-items: center; gap: 8px; 
    text-shadow: 0 0 10px rgba(0,0,0,0.5);
}

.messages-wrapper {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex; flex-direction: column;
    gap: 16px;
    /* subtle gradient overlay to make text readable */
    background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0));
}

/* Message Styling */
.msg { display: flex; gap: 16px;  margin-top: 6px !important; position: relative; }
.msg.msg-continued { margin-top: -14px !important; }

.msg-avatar { 
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; 
    background-color: #333; background-size: cover; 
    cursor: pointer; transition: 0.2s;
    border: 2px solid rgba(255,255,255,0.1);
}
.msg-avatar:hover { transform: scale(1.05); box-shadow: 0 0 10px rgba(255,255,255,0.2); }

.msg-content h4 { font-size: 15px; font-weight: 500; margin-bottom: 2px; color: var(--brand); }
.msg-content h4 span { font-size: 11px; color: var(--text-muted); margin-left: 8px; font-weight: 400; }
.msg-text { color: #eee; font-size: 15px; line-height: 1.5; white-space: pre-wrap; word-break: break-word;}

/* Input Area (Floating Glass Pill) */
.input-area { padding: 0 20px 24px 20px; }
.input-box {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-glass);
    border-radius: 12px;
    padding: 12px 16px;
    display: flex; align-items: center; gap: 12px;
    transition: all 0.2s;
}
.input-box:focus-within {
    border-color: var(--brand);
    box-shadow: 0 0 15px var(--brand-glow);
    background: rgba(0, 0, 0, 0.7);
}

.input-box input {
    flex: 1; background: transparent; border: none; color: white; font-size: 15px;
}
.input-icons i {
    color: #b9bbbe; cursor: pointer; margin-left: 12px; font-size: 20px; transition: 0.2s;
}
.input-icons i:hover { color: var(--brand); transform: scale(1.1); text-shadow: 0 0 8px var(--brand-glow); }

/* --- 5. RIGHT MEMBER LIST (Glass Panel) --- */
.members-sidebar {
    width: 240px;
    background: var(--glass-dark);
    backdrop-filter: blur(20px);
    border-left: 1px solid var(--border-glass);
    padding: 24px 16px;
    display: none;
}
@media (min-width: 1200px) { .members-sidebar { display: block; } }

.group-title {
    color: var(--text-muted); font-size: 12px; font-weight: 700;
    text-transform: uppercase; margin-bottom: 10px; letter-spacing: 0.5px;
}
.member-item {
    display: flex; align-items: center; padding: 6px 8px;
    border-radius: 6px; cursor: pointer; opacity: 0.7; transition: 0.2s;
}
.member-item:hover { 
    background: var(--glass-lighter); 
    opacity: 1; 
    transform: translateX(4px);
}
.member-status-dot { border-color: rgba(30, 30, 30, 1); }

/* --- 6. MODALS (Heavy Glass) --- */
.modal-overlay {
    background: rgba(0, 0, 0, 0.6); /* Darker dim */
    backdrop-filter: blur(8px);    /* Heavy blur on background */
    z-index: 300; 
}

.modal {
    background: rgba(15, 15, 20, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 50px rgba(0,0,0,0.8), 0 0 30px rgba(168, 85, 247, 0.1); /* Subtle purple glow */
    border-radius: 12px;
}

.modal-header h2 { color: #fff; text-shadow: 0 0 10px rgba(255,255,255,0.1); }

.modal-input {
    background: rgba(0,0,0,0.4);
    border: 1px solid var(--border-glass);
    color: white;
    border-radius: 6px;
}
.modal-input:focus { border-color: var(--brand); box-shadow: 0 0 8px var(--brand-glow); }

/* Radio Buttons in Modal (Custom Style) */
input[type="radio"] {
    accent-color: var(--brand);
    width: 16px; height: 16px;
    cursor: pointer;
}

/* Buttons */
.btn {
    border-radius: 6px; font-weight: 600; transition: all 0.2s;
    text-transform: uppercase; font-size: 12px; letter-spacing: 0.5px;
}
.btn-primary { 
    background: var(--brand); 
    box-shadow: 0 0 15px var(--brand-glow);
    border: 1px solid transparent;
}
.btn-primary:hover { 
    background: var(--brand-hover); 
    box-shadow: 0 0 25px var(--brand-glow);
    transform: translateY(-1px);
}

/* --- 7. MENUS & DROPDOWNS --- */
.server-dropdown, .profile-card {
    background: rgba(15, 15, 20, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-glass);
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    border-radius: 8px;
}

.dropdown-item:hover {
    background-color: var(--brand);
    color: white;
    box-shadow: 0 0 10px var(--brand-glow);
}

.profile-banner { background-color: var(--brand); }
.profile-avatar-img { border-color: #111; }

/* --- 8. HOME / DM SPECIFICS --- */
.home-search-bar {
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--border-glass);
    transition: 0.2s;
}
.home-search-bar:hover { border-color: #555; }

.nav-item.active, .dm-user:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
}
.nav-item.active { background: rgba(168, 85, 247, 0.15); color: #fff; border-left: 3px solid var(--brand); }

.ft-tab.active {
    background: rgba(255,255,255,0.1);
    color: white;
    border-bottom: 2px solid var(--brand);
}

.big-search-box {
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--border-glass);
}
.big-search-box:focus { border-color: var(--brand); box-shadow: 0 0 10px var(--brand-glow); }

/* --- 9. SETTINGS OVERLAY --- */
.settings-overlay { background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(10px); }
.settings-sidebar { background: rgba(10, 10, 10, 0.9); }
.settings-nav-item.active { background: var(--brand); box-shadow: 0 0 10px var(--brand-glow); }

/* --- 10. ANIMATIONS --- */
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(168, 85, 247, 0); }
    100% { box-shadow: 0 0 0 0 rgba(168, 85, 247, 0); }
}

.server-icon.active { animation: pulse 2s infinite; }



/* --- MODAL STRUCTURE --- */
.modal.glass-panel {
    background: rgba(15, 15, 20, 0.85);
    backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 30px rgba(168, 85, 247, 0.1);
    width: 460px;
    padding: 0;
    overflow: hidden;
    transform: scale(1);
    animation: modalPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.modal-header {
    text-align: center;
    padding: 24px 24px 10px;
}
.modal-header h2 {
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 8px;
    letter-spacing: -0.5px;
}
.modal-header p {
    color: var(--text-muted);
    font-size: 14px;
}

/* --- SEGMENTED TABS --- */
.server-tabs {
    display: flex;
    background: rgba(0, 0, 0, 0.4);
    margin: 0 24px 20px;
    padding: 4px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.05);
}

.tab-btn {
    flex: 1;
    padding: 10px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.tab-btn:hover {
    color: #fff;
    background: rgba(255,255,255,0.05);
}

.tab-btn.active {
    background: var(--brand);
    color: white;
    box-shadow: 0 0 15px var(--brand-glow);
}

/* --- FORM SECTIONS --- */
.modal-body { padding: 0 24px 10px; }

/* Show/Hide Logic based on ID or Class */
#form-create, #form-join {
    padding: 0 24px 10px;
    /* We handle display in JS, but let's add animation */
    animation: fadeIn 0.3s ease;
}

/* Visual: Server Icon Placeholder */
.server-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
}
.preview-icon {
    width: 80px; height: 80px;
    border-radius: 50%;
    border: 2px dashed rgba(255,255,255,0.2);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 8px;
    font-size: 24px;
    color: rgba(255,255,255,0.2);
    transition: 0.3s;
    cursor: pointer;
}
.preview-icon:hover {
    border-color: var(--brand);
    color: var(--brand);
    box-shadow: 0 0 20px var(--brand-glow);
    background: rgba(168, 85, 247, 0.1);
}

/* Visual: Join Ticket */
.join-visual {
    text-align: center;
    margin-bottom: 20px;
}
.join-visual i {
    font-size: 40px;
    color: var(--accent-green);
    filter: drop-shadow(0 0 10px rgba(16, 185, 129, 0.4));
}

/* --- INPUTS --- */
.input-wrapper {
    position: relative;
    margin-bottom: 8px;
}
.modal-input {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px 12px 12px 40px; /* Space for icon */
    border-radius: 8px;
    color: white;
    font-size: 15px;
    transition: 0.2s;
}
.input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}
.modal-input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.2);
    background: rgba(0, 0, 0, 0.5);
}
.modal-input:focus + .input-icon { color: var(--brand); }

.input-hint {
    font-size: 11px;
    color: #71717a;
    margin-top: 6px;
}
.highlight { color: var(--brand); font-weight: 600; }

/* --- FOOTER --- */
.modal-footer {
    background: rgba(0, 0, 0, 0.2);
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.btn-ghost {
    background: transparent;
    color: var(--text-muted);
    padding: 10px 20px;
}
.btn-ghost:hover { color: #fff; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes modalPop {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}/* --- SETTINGS SPECIFIC STYLES --- */

.settings-header-group {
    margin-bottom: 24px;
}
.settings-header-group h2 { font-size: 20px; color: #fff; margin-bottom: 4px; }
.settings-header-group p { font-size: 13px; color: var(--text-muted); }

/* Glass Card Container */
.glass-panel-padded {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-glass);
    border-radius: 8px;
    padding: 32px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

/* Layout Grid */
.overview-layout {
    display: flex;
    gap: 32px;
    align-items: flex-start;
}

/* Avatar Column */
.avatar-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 120px;
    flex-shrink: 0;
}

.avatar-uploader {
    position: relative;
    width: 100px; height: 100px;
    cursor: pointer;
    group: hover;
}

/* The actual avatar preview */
.settings-avatar-preview {
    width: 100%; height: 100%;
    background-color: var(--brand); /* Fallback */
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    font-size: 32px; font-weight: 700; color: white;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    border: 3px solid rgba(255,255,255,0.05);
    transition: 0.3s;
}

/* Hover Overlay ("CHANGE") */
.avatar-overlay {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    opacity: 0;
    transition: 0.2s;
    backdrop-filter: blur(2px);
    border: 2px dashed rgba(255,255,255,0.3);
}
.avatar-overlay i { font-size: 24px; margin-bottom: 4px; color: #fff; }
.avatar-overlay span { font-size: 10px; font-weight: 800; color: #fff; }

.avatar-uploader:hover .avatar-overlay { opacity: 1; }
.avatar-hint { margin-top: 10px; font-size: 10px; color: var(--text-muted); text-align: center; line-height: 1.4; }

/* Fields Column */
.fields-column { flex: 1; }

.field-group { margin-bottom: 24px; }

.input-group-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Secondary Button (Upload Icon) */
.btn-secondary {
    background: rgba(255,255,255,0.1);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.1);
    height: 42px; width: 42px; /* Square button */
    display: flex; align-items: center; justify-content: center;
    padding: 0;
}
.btn-secondary:hover { background: rgba(255,255,255,0.2); }

/* Footer */
.settings-footer {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--border-glass);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    /* Optional: Sticky footer effect */
    background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.2));
}/* --- MEMBERS TAB STYLES --- */

/* Search Row */
.search-header-row {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: 20px;
}
.search-wrapper { flex: 1; margin-bottom: 0; }

.member-count-badge {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-glass);
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}

/* List Headers */
.member-list-header {
    display: flex;
    padding: 0 16px 10px;
    border-bottom: 1px solid var(--border-glass);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.5px;
}

/* Scroll Area for List */
.custom-scroll-area {
    max-height: 400px; /* Limits height, adds scroll */
    overflow-y: auto;
    padding-top: 8px;
}

/* Member Row Item */
.member-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-radius: 8px;
    transition: 0.2s;
    border-bottom: 1px solid transparent;
}
.member-row:hover {
    background: rgba(255,255,255,0.03);
}
.member-row:not(:last-child) {
    border-bottom-color: rgba(255,255,255,0.02);
}

/* User Info Section */
.member-info { display: flex; align-items: center; flex: 1; }
.member-avatar-lg {
    width: 40px; height: 40px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    margin-right: 12px;
    border: 2px solid rgba(255,255,255,0.1);
}
.member-name { font-weight: 700; font-size: 15px; color: #fff; }
.member-meta { margin-top: 2px; }

/* Role Badge (Small Text) */
.role-badge-small {
    font-size: 10px;
    padding: 2px 6px;
    border: 1px solid;
    border-radius: 4px;
    font-weight: 600;
    text-transform: uppercase;
}

/* Action Column (Dropdown) */
.member-action { width: 150px; }

/* Glass Select Dropdown */
.select-wrapper { position: relative; }
.glass-select {
    width: 100%;
    appearance: none;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--border-glass);
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: 0.2s;
}
.glass-select:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}
.glass-select:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.2);
}
.select-icon {
    position: absolute; right: 12px; top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 10px; color: var(--text-muted);
}/* --- ROLE LIST STYLES --- */

.roles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.role-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-glass);
    border-radius: 8px;
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: 0.2s;
}
.role-card:hover {
    background: rgba(255, 255, 255, 0.06);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.role-card-left { display: flex; align-items: center; gap: 12px; }

.role-circle-lg {
    width: 16px; height: 16px; border-radius: 50%;
    box-shadow: 0 0 8px rgba(0,0,0,0.2);
}

.role-name { font-weight: 700; font-size: 15px; }
.role-perms-count { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

.icon-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 8px;
    border-radius: 4px;
    transition: 0.2s;
}
.icon-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
.icon-btn.danger:hover { background: rgba(242, 63, 66, 0.1); color: #f23f42; }

/* --- ROLE EDITOR FORM --- */

/* Badge Preview */
.role-preview-badge {
    background: rgba(0,0,0,0.3);
    padding: 6px 12px;
    border-radius: 20px;
    display: flex; align-items: center; gap: 8px;
    border: 1px solid var(--border-glass);
    font-weight: 700; font-size: 13px;
}

/* Custom Color Picker */
.color-picker-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-glass);
    padding: 8px;
    border-radius: 6px;
    width: fit-content;
}

input[type="color"] {
    -webkit-appearance: none;
    border: none;
    width: 40px; height: 30px;
    background: none;
    cursor: pointer;
}
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: none; border-radius: 4px; }

.color-hex { font-family: monospace; color: #fff; font-size: 14px; }

/* --- TOGGLE SWITCHES --- */
.permissions-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.perm-switch-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid transparent;
    transition: 0.2s;
}
.perm-switch-row:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255,255,255,0.05);
}

.perm-title { font-weight: 600; color: #fff; font-size: 14px; margin-bottom: 2px; }
.perm-desc { font-size: 12px; color: var(--text-muted); }

/* The Toggle Switch CSS */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 40px; height: 24px;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #4e5058;
    transition: .4s;
    border-radius: 24px;
}
.slider:before {
    position: absolute;
    content: "";
    height: 18px; width: 18px;
    left: 3px; bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

input:checked + .slider { background-color: #23a559; }
input:checked + .slider:before { transform: translateX(16px); }

/* --- AUDIT LOG STYLES --- */

.audit-filter-bar {
    margin-bottom: 20px;
}

.audit-scroll-area {
    max-height: 500px;
    overflow-y: auto;
}

.audit-list-header {
    display: flex;
    padding: 12px 24px;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid var(--border-glass);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.5px;
}

.audit-row {
    display: flex;
    align-items: center;
    padding: 12px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    transition: 0.2s;
    font-size: 14px;
}
.audit-row:hover {
    background: rgba(255, 255, 255, 0.03);
}

/* Column 1: Action Type */
.audit-col-action {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
}

.audit-icon {
    width: 28px; height: 28px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
}
/* Color Variants */
.audit-green { background: rgba(16, 185, 129, 0.15); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.3); }
.audit-red { background: rgba(239, 68, 68, 0.15); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.3); }
.audit-blue { background: rgba(59, 130, 246, 0.15); color: #3b82f6; border: 1px solid rgba(59, 130, 246, 0.3); }
.audit-neutral { background: rgba(107, 114, 128, 0.15); color: #9ca3af; border: 1px solid rgba(107, 114, 128, 0.3); }

.audit-type {
    font-weight: 700;
    font-size: 12px;
    color: #fff;
    letter-spacing: 0.5px;
}

/* Column 2: Details */
.audit-col-detail {
    flex: 2;
    color: var(--text-muted);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.audit-user {
    color: #fff;
    font-weight: 600;
    margin-right: 4px;
}
.audit-text {
    font-size: 13px;
}

/* Column 3: Time */
.audit-col-time {
    width: 140px;
    text-align: right;
    font-size: 12px;
    color: #52525b; /* Zinc-600 */
}

/* Empty State */
.empty-state {
    padding: 40px;
    text-align: center;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
}/* --- SETTINGS SIDEBAR STYLES --- */

/* Sidebar Container */
.settings-sidebar {
    width: 260px;
    background: rgba(10, 10, 12, 0.95); /* Deep dark background */
    border-right: 1px solid var(--border-glass);
    display: flex;
    flex-direction: column;
    padding: 40px 16px 20px; /* Top padding for breathing room */
    height: 100%;
}

/* Header Section */
.settings-header {
    margin-bottom: 24px;
    padding-left: 12px;
}
.settings-category-label {
    font-size: 11px;
    font-weight: 800;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    text-transform: uppercase;
}
.settings-header h3 {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Navigation List */
.settings-nav-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Nav Items */
.settings-nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #b5bac1;
    cursor: pointer;
    transition: all 0.2s ease;
}

.settings-nav-item:hover {
    background: rgba(255, 255, 255, 0.04);
    color: #dbdee1;
}

/* Active State */
.settings-nav-item.active {
    background: rgba(168, 85, 247, 0.15); /* Purple tint */
    color: #fff;
    /* Neon glow effect on left border */
    box-shadow: inset 4px 0 0 var(--brand); 
    border-radius: 4px; /* Slightly sharper on left to match border */
}

/* Danger Button (Exit) */
.settings-nav-item.danger {
    margin-top: 8px;
    color: #f23f42; /* Red */
}
.settings-nav-item.danger:hover {
    background: rgba(242, 63, 66, 0.1);
    color: #f23f42;
}

/* Separator */
.settings-sep {
    height: 1px;
    background: var(--border-glass);
    margin: 12px 0;
    width: 100%;
}/* --- PROFILE MODAL STYLES --- */

.profile-modal {
    width: 440px;
    overflow: hidden;
    padding: 0; /* Remove default padding to let banner stretch */
}

/* The Colored Banner */
.profile-modal-banner {
    height: 120px;
    background: linear-gradient(135deg, var(--brand), #7c3aed);
    width: 100%;
    position: relative;
}

/* Centered Header with Avatar */
.profile-header-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -50px; /* Pulls avatar up into banner */
    position: relative;
    z-index: 2;
    margin-bottom: 24px;
}

/* Avatar Wrapper */
.avatar-upload-wrapper {
    position: relative;
    width: 100px; height: 100px;
    border-radius: 50%;
    cursor: pointer;
    background: #111; /* Fallback */
    padding: 6px; /* Creates the gap between banner and avatar */
    background-clip: content-box; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

/* The Actual Image Div */
.avatar-preview-xl {
    width: 100%; height: 100%;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: #222;
    border: 4px solid #18181b; /* Matches modal bg to look 'cut out' */
}

/* Hover Overlay */
.avatar-edit-overlay {
    position: absolute; top: 6px; left: 6px; right: 6px; bottom: 6px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    color: white;
    opacity: 0;
    transition: 0.2s;
    border: 2px dashed rgba(255,255,255,0.4);
}
.avatar-edit-overlay i { font-size: 20px; margin-bottom: 2px; }
.avatar-edit-overlay span { font-size: 10px; font-weight: 800; }

.avatar-upload-wrapper:hover .avatar-edit-overlay { opacity: 1; }

/* Status Dot (Decoration) */
.status-dot-xl {
    width: 24px; height: 24px;
    background: #23a559;
    border: 4px solid #18181b;
    border-radius: 50%;
    position: absolute;
    bottom: 2px; right: 2px;
}

/* Form Layout */
.profile-fields {
    padding: 0 12px;
}

/* Disabled Input Styling */
.input-wrapper.disabled {
    opacity: 0.7;
    pointer-events: none;
}
.input-wrapper.disabled input {
    background: rgba(255, 255, 255, 0.05);
    border-color: transparent;
    color: #aaa;
}/* --- FRIENDS TOP BAR --- */

.friends-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    padding: 0 16px;
    border-bottom: 1px solid var(--border-glass);
    background: rgba(10, 10, 10, 0.6); /* Slightly darker */
    backdrop-filter: blur(10px);
}

.ft-section-left, .ft-section-right {
    display: flex; align-items: center; height: 100%;
}

.ft-icon {
    color: var(--text-muted);
    margin-right: 8px;
    font-size: 14px;
}

.ft-title {
    font-weight: 700;
    margin-right: 16px;
    color: #fff;
    font-size: 15px;
}

.ft-divider {
    width: 1px;
    height: 20px;
    background: var(--border-glass);
    margin: 0 16px;
}

/* Tabs */
.ft-nav { display: flex; gap: 4px; }

.ft-tab {
    background: transparent;
    border: none;
    padding: 4px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    color: var(--text-muted);
    font-size: 14px;
    transition: all 0.2s;
}

.ft-tab:hover {
    background: rgba(255,255,255,0.05);
    color: #dbdee1;
}

.ft-tab.active {
    background: rgba(255,255,255,0.1);
    color: #fff;
    text-shadow: 0 0 10px rgba(255,255,255,0.3);
}

/* Badge (Optional) */
.tab-badge {
    background: #f23f42;
    color: white;
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 10px;
    margin-left: 6px;
}

/* Add Friend Button */
.btn-add-friend {
    background-color: var(--accent-green);
    color: white;
    border: none;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.2);
}
.btn-add-friend:hover {
    background-color: #0fa170; /* slightly darker green */
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.4);
    transform: translateY(-1px);
}
.btn-add-friend.active {
    background: transparent;
    color: var(--accent-green);
}

/* Extra Icons */
.ft-action-icon {
    color: var(--text-muted);
    cursor: pointer;
    font-size: 18px;
    padding: 4px;
    transition: 0.2s;
}
.ft-action-icon:hover { color: #fff; }/* Badge Style */
.tab-badge {
    background: #f23f42;
    color: white;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 10px;
    margin-left: 6px;
    font-weight: 700;
}/* --- ADD FRIEND TAB STYLES --- */

.add-friend-hero {
    padding: 20px 0 30px 0;
    border-bottom: 1px solid var(--border-glass);
    margin-bottom: 20px;
}

.hero-header h3 {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.hero-header p {
    color: var(--text-muted);
    font-size: 13px;
    margin-bottom: 20px;
}

/* Large Glass Input */
.search-wrapper-lg {
    position: relative;
    width: 100%;
}

.glass-input-lg {
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--border-glass);
    padding: 16px 20px;
    border-radius: 12px;
    font-size: 16px;
    color: white;
    transition: all 0.3s ease;
    padding-right: 50px; /* Space for icon */
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

.glass-input-lg:focus {
    background: rgba(0, 0, 0, 0.6);
    border-color: var(--brand); /* Neon Purple */
    box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.25), 0 0 15px rgba(168, 85, 247, 0.1);
}

.search-icon-lg {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 18px;
    pointer-events: none;
    transition: 0.3s;
}

.glass-input-lg:focus + .search-icon-lg {
    color: var(--brand);
    transform: translateY(-50%) scale(1.1);
}

/* Empty State Visuals */
.empty-search-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 40px;
    text-align: center;
    opacity: 0.7;
}

.empty-icon-circle {
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    border: 1px dashed rgba(255,255,255,0.1);
}

.empty-icon-circle i {
    font-size: 40px;
    color: var(--text-muted);
}

.empty-search-state h3 {
    font-size: 16px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.empty-search-state p {
    font-size: 13px;
    color: #555;
}/* --- FRIEND SEARCH RESULT CARD --- */

.friend-result-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.03); /* Subtle glass */
    border: 1px solid var(--border-glass);
    padding: 12px 16px;
    border-radius: 12px;
    margin-bottom: 8px;
    transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    cursor: default;
}

.friend-result-card:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* Avatar & Text Group */
.fr-info-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.result-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.result-name {
    font-weight: 700;
    color: #fff;
    font-size: 15px;
    line-height: 1.2;
}

.result-sub {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
}

/* Action Button */
.btn-action-add {
    background: transparent;
    border: 1px solid var(--accent-green);
    color: var(--accent-green);
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.btn-action-add:hover {
    background: var(--accent-green);
    color: #fff; /* Black text on green usually has better contrast, but white fits dark mode */
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
}

/* Disabled State (After sending) */
.btn-action-add.disabled {
    border-color: transparent;
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}/* --- FRIEND LIST ITEM STYLES --- */

.list-section-header {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 16px;
    padding-left: 8px;
    letter-spacing: 0.5px;
}

.friend-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-top: 1px solid var(--border-glass);
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 2px;
}

.friend-list-item:hover {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    border-top-color: transparent;
    transform: translateX(4px);
}

/* Left Group */
.friend-item-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.friend-avatar-wrapper {
    position: relative;
    width: 40px; height: 40px;
}

.friend-avatar-img {
    width: 100%; height: 100%;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
}

.friend-status-indicator {
    width: 14px; height: 14px;
    border-radius: 50%;
    position: absolute;
    bottom: -2px; right: -2px;
    border: 3px solid #18181b; /* Matches dark background to create 'cutout' look */
}

.friend-text-group {
    display: flex;
    flex-direction: column;
}

.friend-name {
    font-weight: 700;
    color: #fff;
    font-size: 15px;
    margin-bottom: 2px;
}

.friend-status-text {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
}

/* Action Buttons */
.friend-item-actions {
    display: flex;
    gap: 10px;
    opacity: 0.6; /* Dimmed until hover */
    transition: 0.2s;
}

.friend-list-item:hover .friend-item-actions {
    opacity: 1;
}

.action-icon-btn {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--border-glass);
    color: var(--text-muted);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.action-icon-btn:hover {
    background: var(--glass-lighter);
    color: #fff;
    border-color: rgba(255,255,255,0.2);
    box-shadow: 0 0 10px rgba(255,255,255,0.1);
    transform: scale(1.1);
}/* --- PROFILE CARD STYLES --- */

.profile-card.glass-panel {
    width: 320px;
    background: rgba(15, 15, 20, 0.95);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
    border: 1px solid var(--border-glass);
    animation: scaleIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

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

/* Banner */
.profile-banner {
    height: 80px;
    background-color: var(--brand); /* Default fallback */
    transition: background-color 0.3s;
}

/* Avatar Positioning */
.profile-avatar-wrapper {
    position: absolute;
    top: 40px; /* (80px banner / 2) */
    left: 20px;
}

.profile-avatar-img {
    width: 80px; height: 80px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    border: 6px solid #0f0f14; /* Matches card bg to look 'cut out' */
    position: relative;
    background-color: #111;
}

.profile-status-indicator {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: #23a559;
    border: 4px solid #0f0f14;
    position: absolute;
    bottom: 0; right: 0;
}

/* Body Content */
.profile-body {
    padding: 50px 20px 20px 20px; /* Top padding clears avatar */
}

.profile-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.profile-username {
    font-size: 20px; font-weight: 800; color: #fff;
    line-height: 1.1;
}

.profile-tag {
    font-size: 14px; font-weight: 500; color: var(--text-muted);
}

/* Edit Button */
.icon-btn-sm {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 14px;
    padding: 6px;
    border-radius: 4px;
    transition: 0.2s;
}
.icon-btn-sm:hover { color: #fff; background: rgba(255,255,255,0.1); }

/* Role Pills */
.roles-flex-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.profile-role-pill {
    display: flex; align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-glass);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    color: #dbdee1;
    font-weight: 500;
}

.role-circle {
    width: 8px; height: 8px; border-radius: 50%; margin-right: 6px;
}

/* Action Buttons */
.profile-actions {
    display: flex;
    gap: 10px;
}

.btn-full-width { flex: 1; justify-content: center; display: flex; align-items: center; gap: 8px; }

.btn-danger-ghost {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
    width: 40px; /* Square button */
    display: flex; justify-content: center; align-items: center;
}
.btn-danger-ghost:hover {
    background: rgba(239, 68, 68, 0.2);
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.2);
}

.btn-danger {
    background: #da373c;
    color: white;
    border: none;
    box-shadow: 0 4px 15px rgba(218, 55, 60, 0.3);
}
.btn-danger:hover { background: #b91c1c; }

/* Admin Section */
.danger-text { color: #f23f42; }

.admin-control-box {
    background: rgba(0, 0, 0, 0.3);
    padding: 10px;
    border-radius: 6px;
    margin-bottom: 12px;
    border: 1px solid var(--border-glass);
}

.tiny-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 4px;
    display: block;
}

.glass-select-sm {
    width: 100%;
    background: transparent;
    border: none;
    color: white;
    font-size: 13px;
    cursor: pointer;
    appearance: none;
}
.select-icon-sm {
    position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    font-size: 10px; color: #aaa; pointer-events: none;
}/* --- EDIT CHANNEL MODAL STYLES --- */

/* Footer Layout: Pushes Delete btn to left, others to right */
.footer-distributed {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.footer-right-group {
    display: flex;
    gap: 10px;
}

/* Danger Ghost Button (Transparent with Red text/border) */
.btn-danger-ghost {
    background: transparent;
    color: var(--danger); /* #ef4444 */
    border: 1px solid rgba(239, 68, 68, 0.3);
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: 0.2s;
    width: auto;
}

.btn-danger-ghost:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: var(--danger);
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.2);
}

/* Ensure the modal doesn't get too wide */
#modal-channel-edit .modal {
    max-width: 440px;
}/* --- RADIO CARD STYLES --- */

.radio-card-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.radio-card {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid transparent;
    padding: 12px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.radio-card:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* Selected State logic via :has() or sibling selector */
.radio-card:has(input:checked) {
    background: rgba(168, 85, 247, 0.1); /* Purple Tint */
    border-color: var(--brand);
}

/* Icon */
.radio-icon {
    font-size: 24px;
    color: var(--text-muted);
    margin-right: 16px;
    width: 24px;
    display: flex; justify-content: center;
}

/* Text Content */
.radio-content { flex: 1; }

.radio-title {
    font-weight: 600;
    color: #fff;
    font-size: 15px;
    margin-bottom: 2px;
}

.radio-desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.3;
}

/* Hide Default Radio */
.radio-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0; width: 0;
}

/* Custom Check Circle */
.radio-check {
    width: 20px; height: 20px;
    border-radius: 50%;
    border: 2px solid var(--text-muted);
    background: transparent;
    position: relative;
    transition: 0.2s;
}

/* Checked State */
.radio-card input:checked ~ .radio-check {
    border-color: var(--brand); /* Neon Purple */
    background: var(--brand);
    box-shadow: 0 0 10px var(--brand-glow);
}

/* Inner White Dot */
.radio-check::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 8px; height: 8px;
    background: #fff;
    border-radius: 50%;
    transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.radio-card input:checked ~ .radio-check::after {
    transform: translate(-50%, -50%) scale(1);
}/* --- FORM TABS LOGIC --- */

/* 1. Hide all form sections by default */
.form-section {
    display: none;
    animation: fadeIn 0.3s ease;
}

/* 2. Only show the section that has the 'active' class */
.form-section.active {
    display: block;
}/* --- 1. OVERLAY & CARD CONTAINER --- */
.profile-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    z-index: 500;
    display: none; justify-content: center; align-items: center;
    opacity: 0;
    animation: fadeInOverlay 0.2s forwards;
}

.profile-card {
    width: 340px;
    background: rgba(12, 12, 14, 0.95);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6), 0 0 1px rgba(255,255,255,0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transform: scale(0.95);
    animation: popInCard 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    position: relative;
}

/* --- 2. BANNER & AVATAR --- */
.profile-banner {
    height: 120px;
    width: 100%;
    position: relative;
    /* Gradient overlay to make any color look better */
    background-image: linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(12, 12, 14, 1));
}

.banner-overlay {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background-image: radial-gradient(circle at top right, rgba(255,255,255,0.1), transparent);
}

.profile-avatar-wrapper {
    position: absolute;
    top: 70px; left: 22px;
    z-index: 2;
}

.profile-avatar-img {
    width: 92px; height: 92px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    border: 6px solid #0c0c0e; /* Matches card bg */
    background-color: #1e1f22;
    position: relative;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.profile-status-indicator {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: #23a559; /* Online Green */
    border: 4px solid #0c0c0e;
    position: absolute; bottom: 2px; right: 2px;
}

/* Floating Edit Pencil */
.avatar-edit-btn {
    position: absolute; top: 0; right: -10px;
    width: 28px; height: 28px;
    background: #2b2d31;
    border-radius: 50%;
    color: #fff;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
    transition: 0.2s;
}
.avatar-edit-btn:hover { background: var(--brand); transform: scale(1.1); }

/* --- 3. BODY & TYPOGRAPHY --- */
.profile-body {
    padding: 50px 20px 20px; /* Top padding clears avatar */
    background: #0c0c0e;
}

.profile-header-group {
    margin-bottom: 16px;
    display: flex; justify-content: space-between; align-items: center;
}

.profile-name-row { display: flex; flex-direction: column; }

.profile-username {
    font-size: 22px; font-weight: 800; color: #fff;
    line-height: 1.1; letter-spacing: -0.5px;
}

.profile-tag {
    font-size: 14px; font-weight: 500; color: #949ba4;
    font-family: monospace; letter-spacing: -0.5px;
}

.user-badge {
    background: rgba(255,255,255,0.1);
    width: 28px; height: 28px;
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    color: #f0b232; /* Gold */
}

.profile-divider {
    height: 1px; background: rgba(255,255,255,0.08);
    margin: 16px 0; width: 100%;
}

/* --- 4. ROLES --- */
.profile-section-label {
    font-size: 11px; font-weight: 800; color: #949ba4;
    text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.5px;
}

.roles-grid {
    display: flex; flex-wrap: wrap; gap: 6px;
    min-height: 30px;
}

.profile-role-pill {
    display: flex; align-items: center;
    background: rgba(43, 45, 49, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    color: #dbdee1;
    font-weight: 600;
    transition: 0.2s;
}
.profile-role-pill:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.1); }

.role-circle {
    width: 8px; height: 8px; border-radius: 50%; margin-right: 6px;
    box-shadow: 0 0 5px currentColor; /* Glow effect */
}

/* --- 5. ACTIONS --- */
.profile-actions {
    display: flex; gap: 10px; margin-top: 20px;
}

.btn-shine {
    position: relative; overflow: hidden;
    width: 100%;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--brand);
    border: none; border-radius: 4px; padding: 10px;
    color: white; font-weight: 600; cursor: pointer;
    transition: 0.2s;
}
.btn-shine:hover { background: #4752c4; transform: translateY(-1px); }

/* Secondary Glass Button */
.btn-secondary-glass {
    background: rgba(255,255,255,0.05);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.1);
    width: 42px; border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: 0.2s;
}
.btn-secondary-glass:hover { background: rgba(242, 63, 66, 0.2); color: #f23f42; border-color: #f23f42; }

/* --- 6. ADMIN PANEL --- */
.admin-panel {
    margin-top: 16px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(242, 63, 66, 0.3); /* Subtle Red Border */
    border-radius: 8px;
    padding: 12px;
    position: relative;
    overflow: hidden;
}

/* Subtle striped background for admin area */
.admin-panel::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0,0,0,0.2) 10px, rgba(0,0,0,0.2) 20px);
    pointer-events: none;
}

.admin-header {
    font-size: 10px; font-weight: 800; color: #f23f42;
    margin-bottom: 12px; text-align: center; letter-spacing: 1px;
}

.admin-input-group label {
    font-size: 10px; font-weight: 700; color: #949ba4; display: block; margin-bottom: 4px;
}

/* Custom Select Styling */
.custom-select-wrapper { position: relative; width: 100%; margin-bottom: 12px; }

.custom-select {
    width: 100%;
    appearance: none;
    background: #1e1f22;
    border: 1px solid #111;
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
}
.custom-select:focus { border-color: var(--brand); outline: none; }

.custom-select-wrapper i {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    font-size: 12px; color: #949ba4; pointer-events: none;
}

.btn-danger-glow {
    width: 100%;
    background: transparent;
    border: 1px solid #f23f42;
    color: #f23f42;
    padding: 8px;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-danger-glow:hover {
    background: #f23f42; color: white;
    box-shadow: 0 0 15px rgba(242, 63, 66, 0.4);
}

/* --- ANIMATIONS --- */
@keyframes fadeInOverlay { to { opacity: 1; } }
@keyframes popInCard { to { transform: scale(1); } }
.home-search-bar {
    width: calc(100% - 20px); /* Fit within padding */
    margin: 10px;
    background-color: #1e1f22;
    color: #949ba4;
    border: none;
    border-radius: 4px;
    padding: 7px 10px;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    font-family: 'Inter', sans-serif;
}

.home-search-bar:hover {
    background-color: #2b2d31; /* Lighter on hover */
    color: #dbdee1;
}

.home-search-bar:active {
    background-color: #3f4147;
    transform: translateY(1px);
}/* Message Button (Neutral Gray) */
.btn-action-neutral {
    background: transparent;
    border: 1px solid var(--text-muted);
    color: var(--text-muted);
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: flex; align-items: center; gap: 6px;
    transition: 0.2s;
}
.btn-action-neutral:hover {
    background: rgba(255,255,255,0.1);
    color: white;
    border-color: white;
}

/* Cancel Button (Red Ghost) */
.btn-action-cancel {
    background: transparent;
    border: 1px solid #f23f42;
    color: #f23f42;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: flex; align-items: center; gap: 6px;
    transition: 0.2s;
}
.btn-action-cancel:hover {
    background: #f23f42;
    color: white;
}

/* Accept Button (Green) */
.btn-action-accept {
    background: #23a559;
    border: 1px solid #23a559;
    color: white;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: flex; align-items: center; gap: 6px;
    transition: 0.2s;
}
.btn-action-accept:hover {
    background: #1a8c48;
}/* Empty State Container */
.empty-search-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 40px;
    text-align: center;
    opacity: 0.8;
}

/* The Circle Wrapper */
.empty-icon-circle {
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    border: 2px dashed rgba(255,255,255,0.1);
    transition: 0.3s;
}

.empty-icon-circle i {
    font-size: 40px;
    color: #b5bac1; /* Default, overridden in JS for green */
}

/* Typography */
.empty-search-state h3 {
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
}

.empty-search-state p {
    font-size: 14px;
    color: #b5bac1;
}/* --- CHAT HEADER TOOLBAR --- */
.chat-header {
    /* Ensure header uses Flexbox to space items */
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    padding: 0 16px;
}

.chat-header-toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative; /* For dropdown positioning */
}

.header-icon {
    font-size: 20px;
    color: #b5bac1;
    cursor: pointer;
    transition: 0.2s;
}

.header-icon:hover {
    color: #fff;
}

/* Call Icon specific hover */
.header-icon.call:hover {
    color: #23a559; /* Green */
}

/* Three Dots Menu Dropdown */
.dm-dropdown-menu {
    position: absolute;
    top: 30px;
    right: 0;
    width: 180px;
    background: #111214;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px;
    padding: 6px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.5);
    z-index: 100;
    display: none; /* Hidden by default */
}

.dm-dropdown-menu.show {
    display: block;
    animation: fadeIn 0.2s ease;
}

.dm-menu-item {
    padding: 8px 12px;
    font-size: 14px;
    color: #b5bac1;
    cursor: pointer;
    border-radius: 2px;
    display: flex; align-items: center; gap: 8px;
}

.dm-menu-item:hover {
    background: #4752c4;
    color: white;
}

.dm-menu-item.danger { color: #f23f42; }
.dm-menu-item.danger:hover { background: #f23f42; color: white; }

/* Call UI Overlay (Inside Chat Main) */
.call-overlay {
    width: 100%;
    height: 100%;
    background-color: #000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
}

.call-avatar-pulse {
    width: 100px;
    height: 100px;
    background: #1e1f22;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40px;
    color: #b5bac1;
    margin-bottom: 24px;
    position: relative;
}

.call-avatar-pulse::after {
    content: '';
    position: absolute;
    width: 100%; height: 100%;
    border-radius: 50%;
    border: 2px solid #23a559;
    animation: pulse-ring 2s infinite;
}

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

@keyframes shake {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(10deg); }
    75% { transform: rotate(-10deg); }
    100% { transform: rotate(0deg); }
}

.btn-hangup {
    margin-top: 40px;
    background: #f23f42;
    color: white;
    border: none;
    padding: 12px 32px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}
.btn-hangup:hover { background: #c03539; }/* FORCE the call modal to stay on top */
#incoming-call-modal {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.85); /* Darker background */
    backdrop-filter: blur(5px);
    z-index: 99999 !important; /* Highest priority */
    display: flex !important;
    justify-content: center;
    align-items: center;
    opacity: 1 !important;
    visibility: visible !important;
}/* --- FIX: Force Call Modal Visibility --- */
#incoming-call-modal .modal {
    opacity: 1 !important;        /* Override default hidden state */
    transform: scale(1) !important; /* Override default shrunk state */
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Add pop animation */
}

/* Ensure the Pop Animation exists */
@keyframes popIn {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}
/* --- CHAT HEADER LAYOUT --- */
.chat-header {
    height: 48px;
    padding: 0 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-glass);
    background: rgba(10, 10, 10, 0.4);
    backdrop-filter: blur(10px);
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    z-index: 10;
}

/* --- LEFT SIDE: USER INFO --- */
.chat-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-at-icon {
    color: #80848e;
    font-size: 20px;
    display: flex; align-items: center;
}

.header-user-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-username {
    font-size: 16px;
    font-weight: 700;
    color: #f2f3f5;
    letter-spacing: 0.2px;
}

/* Status Dot with Glow */
.header-status-badge {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #23a559;
    box-shadow: 0 0 8px rgba(35, 165, 89, 0.6);
}

/* --- RIGHT SIDE: TOOLBAR --- */
.chat-header-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
}

.toolbar-separator {
    width: 1px;
    height: 20px;
    background: rgba(255,255,255,0.1);
    margin: 0 4px;
}

.relative-container { position: relative; }

/* Toolbar Buttons */
.header-icon-btn {
    background: transparent;
    border: none;
    color: #b5bac1;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 4px; /* Slightly rounded square */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: all 0.2s ease;
}

.header-icon-btn:hover {
    background-color: rgba(255, 255, 255, 0.06);
    color: #dbdee1;
}

/* Specific Call Button Style */
.header-icon-btn.call-btn:hover {
    color: #23a559; /* Green on hover */
    background-color: rgba(35, 165, 89, 0.1);
}

/* --- DROPDOWN MENU --- */
.dm-dropdown-menu {
    position: absolute;
    top: 40px; /* Below the button */
    right: 0;
    width: 220px;
    background: #111214;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 8px 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    z-index: 100;
    display: none; /* Controlled by JS */
    animation: fadeInMenu 0.15s ease-out;
}

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

.dropdown-header {
    font-size: 11px;
    font-weight: 800;
    color: #5c5e66;
    padding: 6px 8px;
    margin-bottom: 4px;
}

.dm-menu-item {
    display: flex;
    align-items: center;
    padding: 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #b5bac1;
    transition: 0.1s;
    gap: 10px;
}

.menu-icon-wrapper {
    width: 20px;
    text-align: center;
}

.dm-menu-item:hover {
    background-color: #4752c4;
    color: white;
}

/* Danger Item Styling */
.dm-menu-item.danger {
    color: #f23f42;
}

.dm-menu-item.danger:hover {
    background-color: #f23f42;
    color: white;
}/* --- CUSTOM TOAST NOTIFICATIONS --- */
.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 100000; /* Above everything, even modals */
    pointer-events: none; /* Let clicks pass through if not on a toast */
}

.toast {
    display: flex;
    align-items: center;
    background: rgba(18, 18, 20, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 4px solid var(--toast-color, #5865F2);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    padding: 16px 20px;
    border-radius: 8px;
    color: white;
    min-width: 300px;
    max-width: 400px;
    pointer-events: auto;
    animation: toastSlideIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

/* Icons */
.toast-icon {
    font-size: 20px;
    margin-right: 14px;
    color: var(--toast-color);
}

.toast-content {
    flex: 1;
}

.toast-title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 2px;
    line-height: 1.2;
}

.toast-msg {
    font-size: 13px;
    color: #b5bac1;
    line-height: 1.4;
}

/* Close Button */
.toast-close {
    margin-left: 12px;
    color: #72767d;
    cursor: pointer;
    transition: 0.2s;
}
.toast-close:hover { color: white; }

/* Progress Bar (Time left) */
.toast-progress {
    position: absolute;
    bottom: 0; left: 0;
    height: 3px;
    background: var(--toast-color);
    width: 100%;
    animation: toastProgress 4s linear forwards;
}

/* Animations */
@keyframes toastSlideIn {
    from { opacity: 0; transform: translateX(50px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes toastFadeOut {
    to { opacity: 0; transform: translateX(50px); }
}

@keyframes toastProgress {
    from { width: 100%; }
    to { width: 0%; }
}

/* Variants */
.toast.success { --toast-color: #23a559; }
.toast.error   { --toast-color: #f23f42; }
.toast.info    { --toast-color: #5865F2; }

/* --- CONFIRMATION DIALOG STYLES --- */
.confirm-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(4px);
    z-index: 2000; /* Highest priority */
    display: flex; justify-content: center; align-items: center;
    animation: fadeIn 0.2s ease;
}

.confirm-card {
    width: 400px;
    background: #1e1f22; /* Solid dark or glass */
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.08);
    text-align: center;
    transform: scale(0.95);
    animation: popIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.confirm-visual-danger {
    width: 70px; height: 70px;
    background: rgba(242, 63, 66, 0.1);
    color: #f23f42;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px auto;
    font-size: 32px;
    border: 1px solid rgba(242, 63, 66, 0.2);
}

.confirm-title {
    font-size: 20px; font-weight: 700; color: white; margin-bottom: 8px;
}

.confirm-desc {
    font-size: 14px; color: #b5bac1; margin-bottom: 24px; line-height: 1.5;
}

.confirm-actions {
    display: flex; gap: 12px; justify-content: flex-end;
    background: #2b2d31;
    margin: -24px; /* Pull to edges */
    margin-top: 0;
    padding: 16px 24px;
    border-top: 1px solid rgba(255,255,255,0.05);
    border-radius: 0 0 8px 8px;
}

/* Button variants for this modal */
.btn-dim {
    background: transparent; color: white; border: none; padding: 10px 20px;
    font-weight: 500; cursor: pointer; border-radius: 4px; transition: 0.2s;
}
.btn-dim:hover { text-decoration: underline; }

.btn-danger-solid {
    background: #da373c; color: white; border: none; padding: 10px 24px;
    font-weight: 600; cursor: pointer; border-radius: 4px; transition: 0.2s;
}
.btn-danger-solid:hover { background: #a1282c; }/* Success Item (Green) */
.dm-menu-item.success {
    color: #23a559;
}
.dm-menu-item.success:hover {
    background-color: #23a559;
    color: white;
}

/* Disabled Item (Gray) */
.dm-menu-item.disabled {
    color: #80848e;
    cursor: default;
    pointer-events: none;
}/* Attachments */
.msg-attachment {
    margin-top: 5px;
    max-width: 300px;
    border-radius: 4px;
    overflow: hidden;
}
.msg-attachment img, .msg-attachment video {
    max-width: 100%;
    max-height: 300px;
    border-radius: 4px;
    display: block;
}
.file-attachment-card {
    background: #2b2d31;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #1e1f22;
    display: flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
}
.file-attachment-card a { color: #00a8fc; text-decoration: none; font-weight: 500; }
.file-attachment-card i { font-size: 24px; color: #b5bac1; }

/* Edited Tag */
.edited-tag {
    font-size: 10px;
    color: #949ba4;
    margin-left: 4px;
    user-select: none;
}

/* Message Hover Tools (Edit/Delete) */
.msg { position: relative; } /* Ensure msg has relative positioning */

.msg-tools {
    position: absolute;
    top: -10px;
    right: 10px;
    background: #313338;
    border: 1px solid #2b2d31;
    border-radius: 4px;
    display: none; /* Hidden by default */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 10;
}

.msg:hover .msg-tools { display: flex; } /* Show on hover */

.msg-tool-btn {
    padding: 6px;
    cursor: pointer;
    color: #b5bac1;
    font-size: 14px;
    transition: 0.2s;
}
.msg-tool-btn:hover { background: #404249; color: white; }
.msg-tool-btn.danger:hover { color: #f23f42; }

/* Edit Mode Input */
.msg-edit-input {
    background: #2b2d31;
    color: white;
    border: none;
    padding: 8px;
    border-radius: 4px;
    width: 100%;
    font-family: inherit;
}/* --- NEW CSS --- */

/* Message Tools (Hover to see) */
.msg { position: relative; }
.msg:hover .msg-tools { display: flex; }

.msg-tools {
    display: none;
    position: absolute;
    top: -10px; right: 10px;
    background: #313338;
    border: 1px solid #2b2d31;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.msg-tools div {
    padding: 6px 10px;
    cursor: pointer;
    color: #b5bac1;
    font-size: 12px;
}
.msg-tools div:hover { background: #404249; color: white; }
.msg-tools .danger:hover { color: #f23f42; }

/* Attachments */
.msg-attachment img, .msg-attachment video {
    max-width: 300px;
    max-height: 300px;
    border-radius: 8px;
    margin-top: 5px;
    cursor: zoom-in;
}

.msg-file a {
    display: inline-block;
    background: #2b2d31;
    padding: 10px;
    border-radius: 4px;
    color: #00a8fc;
    text-decoration: none;
    margin-top: 5px;
    border: 1px solid #1e1f22;
}

/* Upload Preview Area */
.preview-item {
    width: 60px; height: 60px;
    border-radius: 4px;
    background: #333;
    margin-right: 8px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    border: 2px solid #23a559;
}
.preview-item img { width: 100%; height: 100%; object-fit: cover; }
.preview-item:hover::after {
    content: '\f00d'; /* FontAwesome X */
    font-family: "Font Awesome 6 Free"; font-weight: 900;
    position: absolute; top:0; left:0; width:100%; height:100%;
    background: rgba(0,0,0,0.7);
    color: white;
    display: flex; justify-content: center; align-items: center;
}

.edited-tag {
    font-size: 10px; color: #72767d; margin-left: 4px;
}/* main.css */
.msg {
    display: flex;
    gap: 16px;
    /* REMOVE THIS LINE: opacity: 0; */
    position: relative;
    margin-top: 6px !important;
}/* --- MESSAGE GROUPING STYLES --- */

/* 1. Reduce spacing between grouped messages */
.msg.msg-continued {
    margin-top: 2px !important; 
    padding-top: 0;
}

/* 2. Hide the Avatar Image (But keep the space so text aligns) */
.msg.msg-continued .msg-avatar {
    opacity: 0; /* Invisible */
    cursor: default;
    pointer-events: none; /* No hover effects */
    height: 0; /* Optional: Shrink height if you want tighter vertical spacing */
}

/* 3. Hide the Header (Username & Time) */
.msg.msg-continued .msg-content h4 {
    display: none;
}

/* 4. Ensure hover tools still work */
.msg.msg-continued:hover {
    background-color: rgba(255,255,255,0.02); /* Slight highlight on hover */
}/* --- DANGER MODAL STYLES --- */
.modal-danger-visual {
    background: rgba(239, 68, 68, 0.1);
    width: 100%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-bottom: 1px solid rgba(239, 68, 68, 0.2);
}

.danger-icon-circle {
    width: 60px; height: 60px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.2);
    display: flex; align-items: center; justify-content: center;
    color: #ef4444;
    font-size: 28px;
    margin-bottom: 10px;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.2);
}

.modal-danger-content {
    padding: 20px 24px;
    text-align: center;
}

.modal-danger-title {
    font-size: 20px; font-weight: 700; color: white; margin-bottom: 8px;
}

.modal-danger-desc {
    color: #b5bac1; font-size: 14px; line-height: 1.5;
}

/* Button override for danger */
.btn-delete-confirm {
    background-color: #da373c;
    color: white;
    width: 100%;
    padding: 10px;
    border-radius: 4px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: 0.2s;
}
.btn-delete-confirm:hover { background-color: #a1282c; }/* --- BAN MODAL STYLES --- */

/* Distinct Header for Ban */
.ban-header {
    padding: 24px 24px 0 24px;
}
.ban-header h2 {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
}

.ban-body {
    padding: 16px 24px;
}

.ban-warning-text {
    font-size: 14px;
    color: #dbdee1;
    margin-bottom: 20px;
    line-height: 1.4;
}

/* User Preview Box */
.ban-user-preview {
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.ban-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background-size: cover;
    margin-right: 12px;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
}

.ban-username {
    font-weight: 700;
    color: #fff;
    font-size: 15px;
}

/* Reason Input */
.ban-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #b5bac1;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.ban-input {
    width: 100%;
    background: #1e1f22;
    border: 1px solid transparent;
    padding: 10px;
    border-radius: 4px;
    color: #dbdee1;
    font-size: 14px;
    resize: none;
    height: 80px;
    font-family: inherit;
    transition: 0.2s;
}
.ban-input:focus {
    border-color: #f23f42; /* Red border on focus */
    outline: none;
}

/* Custom Radio/Checkbox for "Delete History" */
.ban-options {
    margin-top: 16px;
}
.ban-option-row {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    color: #b5bac1;
}
.ban-option-row input {
    accent-color: #f23f42;
    width: 16px; height: 16px;
}

/* Footer Buttons */
.btn-cancel-gray {
    background: transparent;
    color: #fff;
    font-weight: 500;
    padding: 10px 24px;
    cursor: pointer;
    border: none;
}
.btn-cancel-gray:hover { text-decoration: underline; }

.btn-ban-solid {
    background-color: #da373c;
    color: white;
    border: none;
    padding: 10px 28px;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}
.btn-ban-solid:hover { background-color: #a1282c; }/* --- COPY BUTTON ANIMATION --- */

/* The success state for the copy button */
.btn-copy-success {
    background-color: #23a559 !important; /* Green */
    color: white !important;
    border-color: #23a559 !important;
    pointer-events: none; /* Prevent double clicking */
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(35, 165, 89, 0.4);
}

/* Specific styling for the Invite Banner button */
#invite-banner button {
    transition: all 0.2s;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
}







/* --- FIX: Channel Item Alignment --- */
.channel {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Pushes gear to the far right */
    padding: 6px 8px;
    margin-bottom: 2px;
    border-radius: 4px;
    color: var(--text-muted);
    cursor: pointer;
    font-weight: 500;
    width: 100%; /* Ensure it fills width */
}

/* Container for Icon + Name to keep them together */
.channel span {
    display: flex;
    align-items: center;
    gap: 6px; /* Space between hashtag and name */
    flex: 1; /* Takes available space */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The Gear Icon */
.channel-gear {
    margin-left: 8px;
    font-size: 12px;
    color: #b5bac1;
    opacity: 0; /* Hidden by default */
    transition: opacity 0.2s;
    padding: 4px; /* Larger click area */
}

/* Show Gear on Hover */
.channel:hover .channel-gear {
    opacity: 1;
    display: block;
}

.channel-gear:hover {
    color: var(--text-main);
    transform: rotate(90deg); /* Nice effect */
}

/* --- Control Buttons --- */
.control-btn {
    /* Existing styles... */
    transition: all 0.2s ease;
}

/* Specific style for End Call to make it look distinct */
#end-call-btn:hover {
    background-color: rgba(242, 63, 66, 0.2);
}
/* --- PERSISTENT VOICE CONTAINER --- */
#voice-container {
    position: relative;
    flex: 1;
    z-index: 250; /* Above chat-main, below modals */
    background: #111;
}

#voice-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* --- ACTIVE CALL BANNER --- */
.active-call-banner {
    background: #1e1f22; /* Dark bg */
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: 10px 16px;
    margin: 0 8px 8px 8px; /* Spacing */
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: background-color 0.2s;
}

.active-call-banner:hover {
    background-color: #2b2d31;
}

.voice-status-light {
    width: 8px;
    height: 8px;
    background-color: var(--accent-green);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--accent-green);
    animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

.call-info {
    flex: 1;
}

.call-status-text {
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-green);
}

.call-channel-name {
    font-size: 12px;
    color: var(--text-muted);
}

.return-icon {
    color: var(--text-muted);
    font-size: 14px;
}