/* ===== CSS VARIABLES ===== */
:root {
    --primary: #5865F2;
    --primary-hover: #4752C4;
    --danger: #ED4245;
    --danger-hover: #C03537;
    --success: #3BA55D;
    --success-hover: #2D7D46;
    --warning: #FAA61A;
    
    --bg-primary: #36393F;
    --bg-secondary: #2F3136;
    --bg-tertiary: #202225;
    --bg-quaternary: #18191C;
    
    --text-primary: #FFFFFF;
    --text-secondary: #B9BBBE;
    --text-muted: #72767D;
    --text-link: #00AFF4;
    
    --channel-hover: #34373C;
    --channel-active: #393C43;
    
    --interactive-hover: #DCDDDE;
    --interactive-active: #FFFFFF;
    
    --chatplus-start: #FF73FA;
    --chatplus-end: #B845C9;
    
    --online: #3BA55D;
    --idle: #FAA61A;
    --dnd: #ED4245;
    --offline: #747F8D;
    
    --font-primary: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    
    --transition-fast: 0.1s ease;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.3s ease;
    
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.2);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.3);
    
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-full: 50%;
    
    --font-size-base: 16px;
    
    /* UI Theme Variables */
    --ui-glass-opacity: 0;
    --ui-glass-blur: 0px;
    --ui-border-opacity: 0;
    --ui-gloss-opacity: 0;
    --ui-border-width: 0px;
    --ui-border-light: rgba(255,255,255,0);
    --ui-border-dark: rgba(0,0,0,0);
    --ui-inner-glow: rgba(255,255,255,0);
    --ui-shadow-opacity: 0.2;
}

/* ===== UI THEME PRESETS ===== */

/* Glassmorphism Theme */
.theme-glassmorphism {
    --ui-glass-opacity: 0.7;
    --ui-glass-blur: 20px;
    --ui-border-opacity: 0.2;
    --ui-border-width: 1px;
    --ui-border-light: rgba(255,255,255,0.15);
    --ui-border-dark: rgba(0,0,0,0.2);
    --ui-inner-glow: rgba(255,255,255,0.05);
    --ui-shadow-opacity: 0.3;
}

.theme-glassmorphism .server-icon,
.theme-glassmorphism .channel-item,
.theme-glassmorphism .dm-item,
.theme-glassmorphism .friend-item,
.theme-glassmorphism .message,
.theme-glassmorphism .settings-section,
.theme-glassmorphism .modal-content,
.theme-glassmorphism .panel {
    background: rgba(var(--bg-secondary-rgb, 47, 49, 54), var(--ui-glass-opacity));
    backdrop-filter: blur(var(--ui-glass-blur));
    -webkit-backdrop-filter: blur(var(--ui-glass-blur));
    border: var(--ui-border-width) solid var(--ui-border-light);
    box-shadow: 
        inset 0 1px 0 var(--ui-inner-glow),
        0 4px 16px rgba(0,0,0,var(--ui-shadow-opacity));
}

.theme-glassmorphism .sidebar,
.theme-glassmorphism .member-list-panel,
.theme-glassmorphism .friends-sidebar {
    background: rgba(var(--bg-tertiary-rgb, 32, 34, 37), calc(var(--ui-glass-opacity) * 0.8));
    backdrop-filter: blur(var(--ui-glass-blur));
    -webkit-backdrop-filter: blur(var(--ui-glass-blur));
}

/* Glossy Theme */
.theme-glossy {
    --ui-gloss-opacity: 1;
    --ui-border-width: 2px;
    --ui-border-light: rgba(255,255,255,0.25);
    --ui-border-dark: rgba(0,0,0,0.3);
    --ui-shadow-opacity: 0.4;
}

.theme-glossy .server-icon,
.theme-glossy .channel-item,
.theme-glossy .dm-item {
    background: linear-gradient(180deg, 
        rgba(255,255,255,0.15) 0%,
        rgba(255,255,255,0.05) 50%,
        rgba(0,0,0,0.05) 50%,
        rgba(0,0,0,0.1) 100%
    );
    border: var(--ui-border-width) solid;
    border-color: var(--ui-border-light) var(--ui-border-dark) var(--ui-border-dark) var(--ui-border-light);
    box-shadow: 
        inset 0 1px 0 rgba(255,255,255,0.2),
        0 4px 12px rgba(0,0,0,var(--ui-shadow-opacity));
}

/* Don't apply glossy effect to friend items - they look weird */
.theme-glossy .friend-item,
.theme-glossy .online-user-item {
    background: transparent;
    border: none;
    box-shadow: none;
}

.theme-glossy .server-icon.active,
.theme-glossy .channel-item.active,
.theme-glossy .dm-item.active {
    background: linear-gradient(180deg, 
        rgba(88,101,242,0.4) 0%,
        rgba(88,101,242,0.2) 50%,
        rgba(71,82,196,0.2) 50%,
        rgba(71,82,196,0.3) 100%
    );
    box-shadow: 
        inset 0 1px 0 rgba(255,255,255,0.3),
        0 4px 16px rgba(88,101,242,0.4);
}

/* Minimal Theme */
.theme-minimal {
    --ui-border-width: 0px;
    --ui-shadow-opacity: 0.05;
    --radius-md: 4px;
    --radius-lg: 8px;
}

.theme-minimal .server-icon,
.theme-minimal .channel-item,
.theme-minimal .dm-item,
.theme-minimal .friend-item,
.theme-minimal .message,
.theme-minimal .btn {
    border-radius: var(--radius-sm);
    box-shadow: none;
}

.theme-minimal .sidebar,
.theme-minimal .member-list-panel {
    border-right: 1px solid var(--channel-hover);
}

/* Neon Theme */
.theme-neon {
    --primary: #00D9FF;
    --primary-hover: #00B8D9;
    --ui-border-width: 1px;
    --ui-border-light: rgba(0,217,255,0.5);
    --ui-shadow-opacity: 0.5;
}

.theme-neon .server-icon.active,
.theme-neon .channel-item.active,
.theme-neon .dm-item.active,
.theme-neon .btn-primary {
    box-shadow: 
        0 0 10px rgba(0,217,255,0.5),
        0 0 20px rgba(0,217,255,0.3),
        0 0 30px rgba(0,217,255,0.1);
}

.theme-neon .message-avatar {
    box-shadow: 0 0 10px rgba(0,217,255,0.3);
}

/* RGB Theme - Smooth rainbow color cycling using hue-rotate */
.theme-rgb {
    --primary: #ff4444;
    --primary-hover: #cc0000;
}

.theme-rgb #app {
    animation: rgbHueRotate 10s linear infinite;
    will-change: filter;
}

@keyframes rgbHueRotate {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

/* Ensure images don't get hue-rotated */
.theme-rgb img,
.theme-rgb .avatar,
.theme-rgb .server-icon img {
    animation: rgbHueRotate 10s linear infinite reverse;
}

/* Pause RGB animation when tab is not focused to save GPU for video playback */
body:not(:focus-within) .theme-rgb #app,
body:not(:focus-within) .theme-rgb img,
body:not(:focus-within) .theme-rgb .avatar,
body:not(:focus-within) .theme-rgb .server-icon img {
    animation-play-state: paused;
}

/* Custom Background Gradients */
/* ===== BACKGROUND GRADIENTS & THEMES ===== */

/* Base gradient variables - more subtle and multi-toned */
.bg-gradient-purple {
    --bg-gradient: linear-gradient(160deg, #1a1b2f 0%, #252442 25%, #2d2654 50%, #1e1b3a 75%, #151428 100%);
    --gradient-overlay: rgba(102, 126, 234, 0.08);
}

.bg-gradient-blue {
    --bg-gradient: linear-gradient(160deg, #0f1720 0%, #162635 25%, #1c3048 50%, #142232 75%, #0d1825 100%);
    --gradient-overlay: rgba(79, 172, 254, 0.08);
}

.bg-gradient-sunset {
    --bg-gradient: linear-gradient(160deg, #231620 0%, #321e26 25%, #3d242e 50%, #2a1a22 75%, #1d131a 100%);
    --gradient-overlay: rgba(240, 147, 251, 0.06);
}

.bg-gradient-ocean {
    --bg-gradient: linear-gradient(160deg, #0a1f2e 0%, #0f2d42 25%, #143a54 50%, #0e2840 75%, #091f30 100%);
    --gradient-overlay: rgba(0, 242, 254, 0.06);
}

.bg-gradient-forest {
    --bg-gradient: linear-gradient(160deg, #0f1f17 0%, #152a1f 25%, #1a3526 50%, #13261d 75%, #0e1b15 100%);
    --gradient-overlay: rgba(56, 239, 125, 0.06);
}

.bg-gradient-midnight {
    --bg-gradient: linear-gradient(160deg, #0d0d10 0%, #12121a 25%, #181824 50%, #111118 75%, #0a0a0f 100%);
    --gradient-overlay: rgba(100, 100, 120, 0.05);
}

.bg-gradient-candy {
    --bg-gradient: linear-gradient(160deg, #1f1720 0%, #2e1f28 25%, #382630 50%, #281d24 75%, #1d151a 100%);
    --gradient-overlay: rgba(255, 154, 158, 0.06);
}

/* Custom image background */
.bg-gradient-custom {
    --bg-gradient: var(--custom-bg-image, linear-gradient(160deg, #1a1b2f 0%, #252442 100%));
    --gradient-overlay: rgba(0, 0, 0, 0.4);
}

/* One big fixed background image across the entire app */
.bg-gradient-custom {
    position: relative;
}

.bg-gradient-custom::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--custom-bg-image);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    opacity: var(--custom-bg-opacity, 0.3);
    z-index: 0;
    pointer-events: none;
}

/* Custom background - outer containers transparent to show image */
.bg-gradient-custom .content-area,
.bg-gradient-custom .friends-container,
.bg-gradient-custom .chat-container {
    background: transparent;
    position: relative;
    z-index: 1;
}

/* Keep headers solid over custom background */
.bg-gradient-custom .friends-header,
.bg-gradient-custom .chat-header {
    background: rgba(47, 49, 54, 0.95) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--bg-tertiary);
    position: relative;
    z-index: 2;
}

/* Keep chat input solid over custom background - both selectors for compatibility */
.bg-gradient-custom .chat-input-container,
.bg-gradient-custom .input-container {
    background: rgba(47, 49, 54, 0.95) !important;
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--bg-tertiary);
    position: relative;
    z-index: 2;
}

/* Gradient themes - input container with blur */
.bg-gradient-purple .input-container,
.bg-gradient-blue .input-container,
.bg-gradient-sunset .input-container,
.bg-gradient-ocean .input-container,
.bg-gradient-forest .input-container,
.bg-gradient-midnight .input-container,
.bg-gradient-candy .input-container {
    background: rgba(47, 49, 54, 0.95);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--bg-tertiary);
}

/* Main containers should be transparent so inner content gradient shows */
.bg-gradient-purple .content-area,
.bg-gradient-blue .content-area,
.bg-gradient-sunset .content-area,
.bg-gradient-ocean .content-area,
.bg-gradient-forest .content-area,
.bg-gradient-midnight .content-area,
.bg-gradient-candy .content-area {
    background: transparent;
    position: relative;
}

.bg-gradient-purple .friends-container,
.bg-gradient-blue .friends-container,
.bg-gradient-sunset .friends-container,
.bg-gradient-ocean .friends-container,
.bg-gradient-forest .friends-container,
.bg-gradient-midnight .friends-container,
.bg-gradient-candy .friends-container {
    background: transparent;
    position: relative;
}

.bg-gradient-purple .chat-container,
.bg-gradient-blue .chat-container,
.bg-gradient-sunset .chat-container,
.bg-gradient-ocean .chat-container,
.bg-gradient-forest .chat-container,
.bg-gradient-midnight .chat-container,
.bg-gradient-candy .chat-container {
    background: transparent;
    position: relative;
}

.bg-gradient-purple .about-container,
.bg-gradient-blue .about-container,
.bg-gradient-sunset .about-container,
.bg-gradient-ocean .about-container,
.bg-gradient-forest .about-container,
.bg-gradient-midnight .about-container,
.bg-gradient-candy .about-container {
    background: var(--bg-secondary);
}

/* Headers should have solid bg */
.bg-gradient-purple .friends-header,
.bg-gradient-blue .friends-header,
.bg-gradient-sunset .friends-header,
.bg-gradient-ocean .friends-header,
.bg-gradient-forest .friends-header,
.bg-gradient-midnight .friends-header,
.bg-gradient-candy .friends-header,
.bg-gradient-purple .chat-header,
.bg-gradient-blue .chat-header,
.bg-gradient-sunset .chat-header,
.bg-gradient-ocean .chat-header,
.bg-gradient-forest .chat-header,
.bg-gradient-midnight .chat-header,
.bg-gradient-candy .chat-header {
    background: var(--bg-secondary) !important;
    border-bottom: 1px solid var(--bg-tertiary);
}

/* Chat input should be solid like header */
.bg-gradient-purple .chat-input-container,
.bg-gradient-blue .chat-input-container,
.bg-gradient-sunset .chat-input-container,
.bg-gradient-ocean .chat-input-container,
.bg-gradient-forest .chat-input-container,
.bg-gradient-midnight .chat-input-container,
.bg-gradient-candy .chat-input-container {
    background: var(--bg-secondary) !important;
    border-top: 1px solid var(--bg-tertiary);
}

/* Custom image - chat input with backdrop blur like header */
.bg-gradient-custom .chat-input-container {
    background: rgba(47, 49, 54, 0.95) !important;
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--bg-tertiary);
    position: relative;
    z-index: 2;
}

/* INNER content areas get the gradient with blur - main chat/messages area */
.bg-gradient-purple #messagesContainer,
.bg-gradient-blue #messagesContainer,
.bg-gradient-sunset #messagesContainer,
.bg-gradient-ocean #messagesContainer,
.bg-gradient-forest #messagesContainer,
.bg-gradient-midnight #messagesContainer,
.bg-gradient-candy #messagesContainer {
    background: var(--bg-gradient);
    backdrop-filter: blur(5px);
}

/* Friends content area gets the gradient with blur */
.bg-gradient-purple .friends-content,
.bg-gradient-blue .friends-content,
.bg-gradient-sunset .friends-content,
.bg-gradient-ocean .friends-content,
.bg-gradient-forest .friends-content,
.bg-gradient-midnight .friends-content,
.bg-gradient-candy .friends-content {
    background: var(--bg-gradient);
    backdrop-filter: blur(5px);
    margin: 0;
    border-radius: 0;
}

/* Search containers get solid bg matching headers - for all states */
#friendsSearchContainer,
#serverMembersSearchContainer {
    background: var(--bg-secondary);
    padding: 8px 16px;
}

/* Gradient themes - keep solid bg */
.bg-gradient-purple #friendsSearchContainer,
.bg-gradient-blue #friendsSearchContainer,
.bg-gradient-sunset #friendsSearchContainer,
.bg-gradient-ocean #friendsSearchContainer,
.bg-gradient-forest #friendsSearchContainer,
.bg-gradient-midnight #friendsSearchContainer,
.bg-gradient-candy #friendsSearchContainer,
.bg-gradient-purple #serverMembersSearchContainer,
.bg-gradient-blue #serverMembersSearchContainer,
.bg-gradient-sunset #serverMembersSearchContainer,
.bg-gradient-ocean #serverMembersSearchContainer,
.bg-gradient-forest #serverMembersSearchContainer,
.bg-gradient-midnight #serverMembersSearchContainer,
.bg-gradient-candy #serverMembersSearchContainer {
    background: var(--bg-secondary);
}

/* Search inputs stay solid */
.bg-gradient-purple #friendsSearchContainer input,
.bg-gradient-blue #friendsSearchContainer input,
.bg-gradient-sunset #friendsSearchContainer input,
.bg-gradient-ocean #friendsSearchContainer input,
.bg-gradient-forest #friendsSearchContainer input,
.bg-gradient-midnight #friendsSearchContainer input,
.bg-gradient-candy #friendsSearchContainer input,
.bg-gradient-purple #serverMembersSearchContainer input,
.bg-gradient-blue #serverMembersSearchContainer input,
.bg-gradient-sunset #serverMembersSearchContainer input,
.bg-gradient-ocean #serverMembersSearchContainer input,
.bg-gradient-forest #serverMembersSearchContainer input,
.bg-gradient-midnight #serverMembersSearchContainer input,
.bg-gradient-candy #serverMembersSearchContainer input {
    background: var(--bg-tertiary);
}

/* ===== SIDEBAR BACKGROUND TOGGLE ===== */
/* When sidebar background is enabled, apply theme to sidebar */
.bg-gradient-purple.sidebar-theme .channel-sidebar,
.bg-gradient-blue.sidebar-theme .channel-sidebar,
.bg-gradient-sunset.sidebar-theme .channel-sidebar,
.bg-gradient-ocean.sidebar-theme .channel-sidebar,
.bg-gradient-forest.sidebar-theme .channel-sidebar,
.bg-gradient-midnight.sidebar-theme .channel-sidebar,
.bg-gradient-candy.sidebar-theme .channel-sidebar,
.bg-gradient-purple.sidebar-theme .friends-sidebar,
.bg-gradient-blue.sidebar-theme .friends-sidebar,
.bg-gradient-sunset.sidebar-theme .friends-sidebar,
.bg-gradient-ocean.sidebar-theme .friends-sidebar,
.bg-gradient-forest.sidebar-theme .friends-sidebar,
.bg-gradient-midnight.sidebar-theme .friends-sidebar,
.bg-gradient-candy.sidebar-theme .friends-sidebar {
    background: var(--bg-gradient);
}

/* ===== SIDEBAR BLUR ===== */
/* When sidebar blur is enabled, apply blur to sidebar */
.sidebar-blur .channel-sidebar,
.sidebar-blur .friends-sidebar {
    backdrop-filter: blur(10px);
}

/* Gradient themes with sidebar blur - use gradient with transparency */
.bg-gradient-purple.sidebar-blur .channel-sidebar,
.bg-gradient-blue.sidebar-blur .channel-sidebar,
.bg-gradient-sunset.sidebar-blur .channel-sidebar,
.bg-gradient-ocean.sidebar-blur .channel-sidebar,
.bg-gradient-forest.sidebar-blur .channel-sidebar,
.bg-gradient-midnight.sidebar-blur .channel-sidebar,
.bg-gradient-candy.sidebar-blur .channel-sidebar,
.bg-gradient-purple.sidebar-blur .friends-sidebar,
.bg-gradient-blue.sidebar-blur .friends-sidebar,
.bg-gradient-sunset.sidebar-blur .friends-sidebar,
.bg-gradient-ocean.sidebar-blur .friends-sidebar,
.bg-gradient-forest.sidebar-blur .friends-sidebar,
.bg-gradient-midnight.sidebar-blur .friends-sidebar,
.bg-gradient-candy.sidebar-blur .friends-sidebar {
    background: var(--bg-gradient);
    backdrop-filter: blur(10px);
}

/* Gradient themes with sidebar blur AND sidebar theme - gradient with opacity */
.bg-gradient-purple.sidebar-theme.sidebar-blur .channel-sidebar,
.bg-gradient-blue.sidebar-theme.sidebar-blur .channel-sidebar,
.bg-gradient-sunset.sidebar-theme.sidebar-blur .channel-sidebar,
.bg-gradient-ocean.sidebar-theme.sidebar-blur .channel-sidebar,
.bg-gradient-forest.sidebar-theme.sidebar-blur .channel-sidebar,
.bg-gradient-midnight.sidebar-theme.sidebar-blur .channel-sidebar,
.bg-gradient-candy.sidebar-theme.sidebar-blur .channel-sidebar,
.bg-gradient-purple.sidebar-theme.sidebar-blur .friends-sidebar,
.bg-gradient-blue.sidebar-theme.sidebar-blur .friends-sidebar,
.bg-gradient-sunset.sidebar-theme.sidebar-blur .friends-sidebar,
.bg-gradient-ocean.sidebar-theme.sidebar-blur .friends-sidebar,
.bg-gradient-forest.sidebar-theme.sidebar-blur .friends-sidebar,
.bg-gradient-midnight.sidebar-theme.sidebar-blur .friends-sidebar,
.bg-gradient-candy.sidebar-theme.sidebar-blur .friends-sidebar {
    background: linear-gradient(160deg, rgba(26, 27, 47, 0.85) 0%, rgba(37, 36, 66, 0.85) 25%, rgba(45, 38, 84, 0.85) 50%, rgba(30, 27, 58, 0.85) 75%, rgba(21, 20, 40, 0.85) 100%) !important;
    backdrop-filter: blur(10px) !important;
}

/* Custom image with sidebar blur (without sidebar theme) */
.bg-gradient-custom.sidebar-blur .channel-sidebar,
.bg-gradient-custom.sidebar-blur .friends-sidebar {
    background: rgba(32, 34, 37, 0.6);
    backdrop-filter: blur(10px);
}

/* Custom image on sidebar - use one big image fixed to viewport */
.bg-gradient-custom.sidebar-theme .channel-sidebar,
.bg-gradient-custom.sidebar-theme .friends-sidebar {
    background: rgba(32, 34, 37, 0.7);
    position: relative;
}

.bg-gradient-custom.sidebar-theme .channel-sidebar::before,
.bg-gradient-custom.sidebar-theme .friends-sidebar::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--custom-bg-image);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    opacity: var(--custom-bg-opacity, 0.3);
    z-index: 0;
    pointer-events: none;
}

/* Sidebar blur with custom image AND sidebar theme */
.bg-gradient-custom.sidebar-theme.sidebar-blur .channel-sidebar,
.bg-gradient-custom.sidebar-theme.sidebar-blur .friends-sidebar {
    background: rgba(32, 34, 37, 0.5) !important;
    backdrop-filter: blur(15px) !important;
    position: relative;
    z-index: 1;
}

/* Inner content areas for custom images - semi-transparent with blur */
.bg-gradient-custom #messagesContainer,
.bg-gradient-custom .friends-content {
    background: rgba(32, 34, 37, 0.6);
    backdrop-filter: blur(10px);
    position: relative;
    z-index: 1;
}

/* Search containers for custom images - solid matching headers */
.bg-gradient-custom #friendsSearchContainer,
.bg-gradient-custom #serverMembersSearchContainer {
    background: var(--bg-secondary);
    position: relative;
    z-index: 1;
}

/* Sidebar channel header stays solid like serverbar - for ALL themes */
.bg-gradient-custom.sidebar-theme .channel-header,
.bg-gradient-custom.sidebar-theme .friends-header,
.bg-gradient-purple.sidebar-theme .channel-header,
.bg-gradient-blue.sidebar-theme .channel-header,
.bg-gradient-sunset.sidebar-theme .channel-header,
.bg-gradient-ocean.sidebar-theme .channel-header,
.bg-gradient-forest.sidebar-theme .channel-header,
.bg-gradient-midnight.sidebar-theme .channel-header,
.bg-gradient-candy.sidebar-theme .channel-header,
.bg-gradient-purple.sidebar-theme .friends-header,
.bg-gradient-blue.sidebar-theme .friends-header,
.bg-gradient-sunset.sidebar-theme .friends-header,
.bg-gradient-ocean.sidebar-theme .friends-header,
.bg-gradient-forest.sidebar-theme .friends-header,
.bg-gradient-midnight.sidebar-theme .friends-header,
.bg-gradient-candy.sidebar-theme .friends-header {
    background: var(--bg-secondary) !important;
    backdrop-filter: none !important;
    position: relative;
    z-index: 2;
}

/* Ensure sidebar content is above background */
.bg-gradient-custom.sidebar-theme .channel-sidebar > *,
.bg-gradient-custom.sidebar-theme .friends-sidebar > * {
    position: relative;
    z-index: 1;
}

/* Sidebar fade when theme is applied */
.bg-gradient-purple.sidebar-theme .channel-sidebar,
.bg-gradient-blue.sidebar-theme .channel-sidebar,
.bg-gradient-sunset.sidebar-theme .channel-sidebar,
.bg-gradient-ocean.sidebar-theme .channel-sidebar,
.bg-gradient-forest.sidebar-theme .channel-sidebar,
.bg-gradient-midnight.sidebar-theme .channel-sidebar,
.bg-gradient-candy.sidebar-theme .channel-sidebar,
.bg-gradient-purple.sidebar-theme .friends-sidebar,
.bg-gradient-blue.sidebar-theme .friends-sidebar,
.bg-gradient-sunset.sidebar-theme .friends-sidebar,
.bg-gradient-ocean.sidebar-theme .friends-sidebar,
.bg-gradient-forest.sidebar-theme .friends-sidebar,
.bg-gradient-midnight.sidebar-theme .friends-sidebar,
.bg-gradient-candy.sidebar-theme .friends-sidebar {
    position: relative;
}

/* Remove glossy effect from online users in gradient themes */
.bg-gradient-purple .online-user-item,
.bg-gradient-blue .online-user-item,
.bg-gradient-sunset .online-user-item,
.bg-gradient-ocean .online-user-item,
.bg-gradient-forest .online-user-item,
.bg-gradient-midnight .online-user-item,
.bg-gradient-candy .online-user-item,
.bg-gradient-purple .friend-item,
.bg-gradient-blue .friend-item,
.bg-gradient-sunset .friend-item,
.bg-gradient-ocean .friend-item,
.bg-gradient-forest .friend-item,
.bg-gradient-midnight .friend-item,
.bg-gradient-candy .friend-item {
    background: transparent !important;
    border: none !important;
}

/* Theme brightness overlay */
.theme-brightness-dim {
    --brightness-overlay: rgba(0, 0, 0, 0.3);
}

.theme-brightness-normal {
    --brightness-overlay: rgba(0, 0, 0, 0);
}

.theme-brightness-bright {
    --brightness-overlay: rgba(255, 255, 255, 0.05);
}

.theme-brightness-dim .content-area::after,
.theme-brightness-normal .content-area::after,
.theme-brightness-bright .content-area::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--brightness-overlay);
    pointer-events: none;
    z-index: 0;
}

/* ===== SPLASH SCREEN ===== */
.splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #5865F2 0%, #7289DA 50%, #4752C4 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    overflow: hidden;
}

/* Themed background support */
.splash-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.splash-bg-overlay.active {
    opacity: 1;
}

.splash-bg-overlay::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, var(--splash-overlay-opacity, 0.15));
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.splash-screen.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.splash-content {
    text-align: center;
    animation: splashPulse 2s ease-in-out infinite;
}

.splash-logo {
    margin-bottom: 24px;
}

.splash-logo-img {
    width: 120px;
    height: 120px;
    border-radius: 30px;
    margin: 0 auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    animation: splashFloat 3s ease-in-out infinite;
    object-fit: cover;
}

.splash-logo-icon {
    width: 120px;
    height: 120px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    animation: splashFloat 3s ease-in-out infinite;
}

.splash-logo-icon .material-icons-round {
    font-size: 64px;
    color: white;
}

.splash-text h1 {
    font-size: 48px;
    font-weight: 800;
    color: white;
    margin: 0 0 4px 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.splash-tagline {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 12px 0;
    font-style: italic;
    letter-spacing: 1px;
}

.splash-loading-text {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    min-height: 24px;
}

.splash-loading-text::after {
    content: '';
    animation: splashDots 1.5s steps(4, end) infinite;
}

/* Did You Know section */
.splash-did-you-know {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 16px 24px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    max-width: 500px;
    width: 90%;
    z-index: 10;
    opacity: 0;
    animation: splashDykFadeIn 0.5s ease 1s forwards;
}

.splash-dyk-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.splash-dyk-icon .material-icons-round {
    font-size: 24px;
    color: white;
}

.splash-dyk-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.splash-dyk-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.7);
}

.splash-dyk-text {
    font-size: 14px;
    color: white;
    line-height: 1.4;
    transition: opacity 0.3s ease;
}

@keyframes splashDykFadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes splashPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
}

@keyframes splashFloat {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    25% {
        transform: translateY(-10px) rotate(2deg);
    }
    75% {
        transform: translateY(-5px) rotate(-2deg);
    }
}

@keyframes splashDots {
    0% { content: ''; }
    25% { content: '.'; }
    50% { content: '..'; }
    75% { content: '...'; }
    100% { content: ''; }
}

/* Light Theme */
.theme-light {
    --bg-primary: #FFFFFF;
    --bg-secondary: #F2F3F5;
    --bg-tertiary: #E3E5E8;
    --bg-quaternary: #C9CCD0;
    
    --text-primary: #2E3338;
    --text-secondary: #4F5660;
    --text-muted: #747F8D;
    
    --channel-hover: #D4D7DD;
    --channel-active: #E4E6E9;
    
    --interactive-hover: #4F5660;
    --interactive-active: #2E3338;
}

/* AMOLED Black Theme */
.theme-amoled {
    --bg-primary: #000000;
    --bg-secondary: #0A0A0A;
    --bg-tertiary: #111111;
    --bg-quaternary: #161616;
    
    --text-primary: #FFFFFF;
    --text-secondary: #B9BBBE;
    --text-muted: #72767D;
    
    --channel-hover: #1A1A1A;
    --channel-active: #222222;
}

/* Compact Messages */
.compact-messages .message {
    padding: 4px 16px;
    margin: 0;
}

.compact-messages .message-body {
    display: inline;
}

.compact-messages .message-avatar {
    display: none;
}

.compact-messages .message-header {
    display: inline;
    margin-right: 8px;
}

.compact-messages .message-author {
    font-size: 14px;
}

.compact-messages .message-time {
    font-size: 11px;
}

.compact-messages .message-text {
    display: inline;
}

/* Reduced Motion */
.reduced-motion *,
.reduced-motion *::before,
.reduced-motion *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
}

/* ===== RESET & BASE ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    font-family: var(--font-primary);
    background: var(--bg-quaternary);
    color: var(--text-primary);
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    font-size: var(--font-size-base);
}

/* Ensure consistent font sizing throughout the app */
.app-container {
    font-size: 1rem;
}

.message-text {
    font-size: 1rem;
    line-height: 1.5;
}

.channel-name, .dm-name {
    font-size: 0.9375rem;
}

.friend-name, .member-name, .online-user-name {
    font-size: 0.9375rem;
}

.settings-title {
    font-size: 1.25rem;
}

.settings-subtitle {
    font-size: 0.75rem;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--bg-secondary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #202225;
}

/* ===== SPOILER ===== */
.spoiler {
    background-color: #202225;
    color: transparent;
    border-radius: 3px;
    padding: 0 4px;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}

.spoiler:hover {
    background-color: #2f3136;
}

.spoiler.revealed {
    background-color: rgba(255, 255, 255, 0.1);
    color: inherit;
    user-select: text;
}

.spoiler.revealed:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

/* Content Filter Spoiler Styles */
.spoiler-hidden {
    background-color: #202225;
    color: #72767d;
    border-radius: 3px;
    padding: 2px 6px;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.9em;
}

.spoiler-hidden:hover {
    background-color: #2f3136;
    color: #b9bbbe;
}

.spoiler-revealed {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    border-radius: 3px;
    padding: 2px 6px;
    cursor: default;
    user-select: text;
    font-family: inherit;
    font-size: inherit;
}

.spoiler-revealed:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

/* ===== ANIMATIONS ===== */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Typing indicator animation for AI */
.typing-indicator {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}

.typing-indicator span {
    width: 6px;
    height: 6px;
    background: var(--text-muted);
    border-radius: 50%;
    animation: typingBounce 1.4s infinite ease-in-out both;
}

.typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
.typing-indicator span:nth-child(2) { animation-delay: -0.16s; }
.typing-indicator span:nth-child(3) { animation-delay: 0s; }

@keyframes typingBounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
    40% { transform: scale(1); opacity: 1; }
}

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

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

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

@keyframes typingBounce {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-4px); }
}

@keyframes newMessagePulse {
    0% { background: rgba(88, 101, 242, 0.2); }
    100% { background: transparent; }
}

/* ===== DASHBOARD ANIMATIONS ===== */
@keyframes tabSwitch {
    0% { opacity: 0; transform: translateX(-10px) scale(0.98); }
    50% { opacity: 0.5; }
    100% { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes contentSlideIn {
    0% { opacity: 0; transform: translateY(15px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes serverSwitch {
    0% { opacity: 0; transform: scale(0.95) translateX(-20px); }
    50% { opacity: 0.7; transform: scale(0.98) translateX(-5px); }
    100% { opacity: 1; transform: scale(1) translateX(0); }
}

@keyframes channelSlide {
    0% { opacity: 0; transform: translateX(-30px); }
    100% { opacity: 1; transform: translateX(0); }
}

@keyframes friendItemStagger {
    0% { opacity: 0; transform: translateX(-20px) scale(0.95); }
    100% { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes headerSlide {
    0% { opacity: 0; transform: translateY(-10px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes pageTransition {
    0% { opacity: 0; transform: scale(0.98); filter: blur(4px); }
    100% { opacity: 1; transform: scale(1); filter: blur(0); }
}

@keyframes bounceIn {
    0% { opacity: 0; transform: scale(0.3); }
    50% { transform: scale(1.05); }
    70% { transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes zoomIn {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes flipIn {
    from { opacity: 0; transform: perspective(400px) rotateY(-90deg); }
    to { opacity: 1; transform: perspective(400px) rotateY(0); }
}

@keyframes elastic {
    0% { transform: scale(0); }
    50% { transform: scale(1.1); }
    70% { transform: scale(0.95); }
    100% { transform: scale(1); }
}

@keyframes swing {
    0% { transform: rotate(0deg); }
    20% { transform: rotate(15deg); }
    40% { transform: rotate(-10deg); }
    60% { transform: rotate(5deg); }
    80% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}

/* Apply animations to elements */
.friends-content.switching {
    animation: tabSwitch 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.server-transition .content-area {
    animation: serverSwitch 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.channel-item {
    animation: channelSlide 0.2s ease backwards;
}

.channel-item:nth-child(1) { animation-delay: 0.02s; }
.channel-item:nth-child(2) { animation-delay: 0.04s; }
.channel-item:nth-child(3) { animation-delay: 0.06s; }
.channel-item:nth-child(4) { animation-delay: 0.08s; }
.channel-item:nth-child(5) { animation-delay: 0.10s; }
.channel-item:nth-child(6) { animation-delay: 0.12s; }
.channel-item:nth-child(7) { animation-delay: 0.14s; }
.channel-item:nth-child(8) { animation-delay: 0.16s; }

.friend-item {
    animation: friendItemStagger 0.3s ease backwards;
}

.friend-item:nth-child(1) { animation-delay: 0.02s; }
.friend-item:nth-child(2) { animation-delay: 0.04s; }
.friend-item:nth-child(3) { animation-delay: 0.06s; }
.friend-item:nth-child(4) { animation-delay: 0.08s; }
.friend-item:nth-child(5) { animation-delay: 0.10s; }
.friend-item:nth-child(6) { animation-delay: 0.12s; }
.friend-item:nth-child(7) { animation-delay: 0.14s; }
.friend-item:nth-child(8) { animation-delay: 0.16s; }
.friend-item:nth-child(9) { animation-delay: 0.18s; }
.friend-item:nth-child(10) { animation-delay: 0.20s; }

.friends-header {
    animation: headerSlide 0.3s ease;
}

.dm-item {
    animation: slideInLeft 0.25s ease backwards;
}

.dm-item:nth-child(1) { animation-delay: 0.02s; }
.dm-item:nth-child(2) { animation-delay: 0.04s; }
.dm-item:nth-child(3) { animation-delay: 0.06s; }
.dm-item:nth-child(4) { animation-delay: 0.08s; }

.tab-switching .friends-content {
    animation: pageTransition 0.2s ease;
}

/* Server icon animations */
.server-icon {
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.server-icon:active {
    transform: scale(0.9);
}

.server-icon.active {
    animation: bounceIn 0.4s ease;
}

/* Hover lift effect for interactive elements */
.friend-item:hover,
.dm-item:hover,
.channel-item:hover {
    transform: translateX(4px) translateY(-1px);
    transition: transform 0.2s ease, background-color 0.2s ease;
}

/* Button press animation */
.btn:active {
    transform: scale(0.96);
    transition: transform 0.1s ease;
}

/* Modal animations */
.modal.active .modal-content {
    animation: zoomIn 0.2s ease;
}

/* Notification badge pulse */
.server-notification-badge,
.home-badge,
.dm-badge,
.inbox-badge {
    animation: pulse 2s ease-in-out infinite;
}

/* ===== AUTH SCREEN ===== */
.auth-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary) 0%, #7289DA 50%, var(--chatplus-start) 100%);
    position: relative;
    overflow: hidden;
    padding: 20px;
}

.auth-container::before {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    animation: pulse 15s ease-in-out infinite;
}

.auth-box {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 480px;
    padding: 40px;
    position: relative;
    z-index: 1;
    animation: slideUp 0.5s ease;
}

.logo {
    text-align: center;
    margin-bottom: 32px;
}

.auth-logo-img {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-lg);
    margin: 0 auto 16px;
    box-shadow: var(--shadow-md);
    object-fit: cover;
    display: block;
}

.logo-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary), var(--chatplus-start));
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    box-shadow: var(--shadow-md);
}

.logo-icon .material-icons-round {
    font-size: 40px;
    color: white;
}

.logo h1 {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.tagline {
    color: var(--text-secondary);
    font-size: 16px;
}

.input-group {
    margin-bottom: 20px;
}

.input-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.input-group input {
    width: 100%;
    padding: 12px 16px;
    background: var(--bg-quaternary);
    border: 1px solid rgba(0,0,0,0.3);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 16px;
    transition: var(--transition-normal);
}

.input-group input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.3);
}

.input-hint {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 6px;
    display: flex;
    align-items: flex-start;
    gap: 4px;
    line-height: 1.4;
}

.input-hint .material-icons-round {
    font-size: 14px;
    flex-shrink: 0;
    margin-top: 1px;
}

.error-msg {
    color: var(--danger);
    font-size: 14px;
    margin-top: 8px;
    display: none;
}

.btn {
    width: 100%;
    padding: 12px 16px;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.btn-primary {
    background: var(--primary);
    color: white;
}

.btn-primary:hover {
    background: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(88, 101, 242, 0.4);
}

.btn-secondary {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid rgba(255,255,255,0.1);
}

.btn-secondary:hover {
    background: rgba(255,255,255,0.05);
    color: var(--text-primary);
}

.btn-danger {
    background: var(--danger);
    color: white;
}

.btn-danger:hover {
    background: var(--danger-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(237, 66, 69, 0.4);
}

.btn-success {
    background: var(--success);
    color: white;
}

.btn-success:hover {
    background: var(--success-hover);
    box-shadow: 0 4px 12px rgba(59, 165, 93, 0.4);
}

.divider {
    display: flex;
    align-items: center;
    margin: 24px 0;
    color: var(--text-muted);
    font-size: 14px;
}

.divider::before,
.divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,0.1);
}

.divider span {
    padding: 0 16px;
}

.footer-credits {
    text-align: center;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.1);
    color: var(--text-muted);
    font-size: 13px;
}

.footer-credits strong {
    color: var(--text-secondary);
}

/* ===== APP CONTAINER ===== */
.app-container {
    display: flex;
    height: 100vh;
    min-height: 100vh;
    overflow: hidden; /* Prevent content from spilling out */
    animation: fadeIn 0.3s ease;
}

/* ===== BAN SCREEN ===== */
.ban-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-quaternary);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
}

.ban-container {
    text-align: center;
    max-width: 480px;
    padding: 40px;
}

.ban-container h1 {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 24px 0 16px;
}

.ban-reason {
    font-size: 16px;
    color: var(--text-secondary);
    margin-bottom: 24px;
    line-height: 1.5;
}

.ban-details {
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: 20px;
    margin-bottom: 24px;
    text-align: left;
}

.ban-details p {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.ban-details p:last-child {
    margin-bottom: 0;
}

/* Deleted Account Screen */
.deleted-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-quaternary);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
}

.deleted-container {
    text-align: center;
    max-width: 480px;
    padding: 40px;
}

.deleted-container h1 {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 24px 0 16px;
}

.deleted-reason {
    font-size: 16px;
    color: var(--text-secondary);
    margin-bottom: 24px;
    line-height: 1.5;
}

.deleted-details {
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: 20px;
    margin-bottom: 24px;
    text-align: left;
}

.deleted-details p {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.deleted-details p:last-child {
    margin-bottom: 0;
}

.deleted-info {
    font-size: 14px;
    color: var(--text-muted);
    margin-top: 16px;
}

/* ===== DEV MENU ===== */
.dev-menu-modal {
    max-width: 800px;
    width: 90%;
    max-height: 80vh;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2000;
}

.dev-menu-modal .modal-content {
    padding: 0;
    display: flex;
    flex-direction: column;
    max-height: 600px;
}

.dev-menu-tabs {
    display: flex;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border);
    padding: 8px;
    gap: 4px;
    overflow-x: auto;
}

.dev-tab {
    padding: 8px 16px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: all 0.2s;
}

.dev-tab:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.dev-tab.active {
    background: var(--primary);
    color: white;
}

.dev-tab .material-icons-round {
    font-size: 18px;
}

.dev-tab-content {
    display: none;
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.dev-tab-content.active {
    display: block;
}

.dev-search-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.dev-search-bar input {
    flex: 1;
    padding: 10px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 14px;
}

.dev-users-list,
.dev-bans-list,
.dev-servers-list {
    max-height: 400px;
    overflow-y: auto;
}

.dev-user-item {
    display: flex;
    align-items: center;
    padding: 12px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    margin-bottom: 8px;
    gap: 12px;
}

.dev-user-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    flex-shrink: 0;
}

.dev-user-avatar img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

.dev-user-info {
    flex: 1;
    min-width: 0;
}

.dev-user-name {
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.dev-user-tag {
    font-size: 12px;
    color: var(--text-muted);
}

.dev-user-actions {
    display: flex;
    gap: 6px;
}

.dev-user-actions button {
    padding: 6px 10px;
    font-size: 12px;
}

.dev-actions {
    margin-bottom: 16px;
}

.dev-system-stats {
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: 16px;
}

.dev-system-stats h4 {
    margin-bottom: 16px;
    color: var(--text-primary);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.stat-item {
    background: var(--bg-secondary);
    padding: 16px;
    border-radius: var(--radius-md);
    text-align: center;
}

.stat-value {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 4px;
}

.stat-label {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
}

.dev-action-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Ban/Delete Modal Styles */
.ban-modal,
.delete-modal {
    max-width: 480px;
}

.ban-user-info,
.delete-user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    margin-bottom: 20px;
}

.ban-user-info img,
.delete-user-info img {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    object-fit: cover;
}

.ban-user-info .user-avatar,
.delete-user-info .user-avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 600;
}

.ban-form,
.delete-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ban-form .form-group,
.delete-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ban-form label,
.delete-form label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
}

.ban-form textarea,
.ban-form input,
.ban-form select,
.delete-form textarea,
.delete-form input {
    padding: 10px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
}

.ban-form textarea:focus,
.ban-form input:focus,
.ban-form select:focus,
.delete-form textarea:focus,
.delete-form input:focus {
    outline: none;
    border-color: var(--primary);
}

.delete-warning {
    text-align: center;
    padding: 20px;
    background: rgba(237, 66, 69, 0.1);
    border-radius: var(--radius-md);
    margin-bottom: 20px;
}

/* Status badges for dev list */
.dev-user-status {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    text-transform: uppercase;
}

.dev-user-status.banned {
    background: rgba(237, 66, 69, 0.2);
    color: var(--danger);
}

.dev-user-status.deleted {
    background: rgba(237, 66, 69, 0.3);
    color: var(--danger);
}

.dev-user-status.dev {
    background: rgba(88, 101, 242, 0.2);
    color: var(--primary);
}

/* Dev Admin Modals */
.dev-ban-modal,
.dev-unban-modal,
.dev-delete-modal {
    max-width: 480px;
}

.dev-ban-modal .form-group,
.dev-delete-modal .form-group {
    margin-top: 16px;
}

.dev-ban-modal label,
.dev-delete-modal label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 6px;
}

.dev-ban-modal textarea,
.dev-ban-modal input,
.dev-ban-modal select,
.dev-delete-modal textarea,
.dev-delete-modal input {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
}

.dev-ban-modal textarea:focus,
.dev-ban-modal input:focus,
.dev-ban-modal select:focus,
.dev-delete-modal textarea:focus,
.dev-delete-modal input:focus {
    outline: none;
    border-color: var(--primary);
}

.dev-ban-modal textarea {
    resize: vertical;
    min-height: 80px;
}

.ban-appeal {
    font-size: 13px;
    color: var(--text-muted);
}

.ban-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin: 24px 0;
    flex-wrap: wrap;
}

.ban-actions .btn {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Ban Appeal Modal */
.ban-appeal-modal,
.feedback-modal {
    max-width: 480px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100002;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}

.ban-appeal-modal .form-group,
.feedback-modal .form-group {
    margin-top: 16px;
}

.ban-appeal-modal label,
.feedback-modal label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 6px;
}

.ban-appeal-modal textarea,
.ban-appeal-modal input,
.feedback-modal textarea,
.feedback-modal select {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
}

.ban-appeal-modal textarea:focus,
.ban-appeal-modal input:focus,
.feedback-modal textarea:focus,
.feedback-modal select:focus {
    outline: none;
    border-color: var(--primary);
}

.ban-appeal-modal textarea {
    resize: vertical;
    min-height: 120px;
}

/* Unban Welcome Modal */
.unban-welcome-modal {
    max-width: 480px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100002;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    overflow: hidden;
}

.unban-welcome-modal .modal-header {
    padding: 20px;
    color: white;
}

.unban-welcome-modal .modal-header h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

/* Broadcast Modal */
.broadcast-modal {
    max-width: 500px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2000;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    overflow: hidden;
}

.broadcast-modal .modal-header {
    padding: 20px;
    color: white;
}

.broadcast-modal .modal-header h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.broadcast-modal .form-group input[type="checkbox"] {
    width: auto;
    margin-right: 8px;
}

/* System Section for Profile */
.system-section {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(217, 119, 6, 0.1)) !important;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

/* ===== SERVER LIST ===== */
.server-list {
    width: 72px;
    min-width: 72px; /* Prevent shrinking */
    max-width: 72px; /* Prevent expanding */
    background: var(--bg-tertiary);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 0;
    overflow-y: auto;
    overflow-x: hidden;
    flex-shrink: 0;
    flex-grow: 0;
    position: relative;
    z-index: 100;
    height: 100vh;
    max-height: 100vh;
    box-sizing: border-box;
}

.server-list::-webkit-scrollbar {
    width: 4px;
}

.server-list::-webkit-scrollbar-track {
    background: transparent;
}

.server-list::-webkit-scrollbar-thumb {
    background: var(--bg-secondary);
    border-radius: 2px;
}

.server-list::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

.server-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    background: var(--bg-secondary);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    color: var(--text-secondary);
    flex-shrink: 0;
    z-index: 101;
}

.server-icon:hover {
    border-radius: var(--radius-md);
    background: var(--primary);
    color: white;
    transform: translateY(-2px) scale(1.05);
}

.server-icon.active {
    border-radius: var(--radius-md);
    background: var(--primary);
    color: white;
}

.server-icon.active .pill {
    height: 40px;
}

.server-icon .material-icons-round {
    font-size: 24px;
}

.server-icon.home {
    color: var(--text-primary);
    position: relative;
}

.home-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--danger);
    color: white;
    font-size: 11px;
    font-weight: 700;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg-primary);
    box-sizing: border-box;
}

.server-icon.official {
    background: linear-gradient(135deg, var(--primary), var(--chatplus-start));
    color: white;
    animation: pulse 3s infinite;
}

.server-icon.add {
    color: var(--success);
    font-size: 28px;
}

.server-icon.add:hover {
    background: var(--success);
    color: white;
    transform: scale(1.15);
    box-shadow: 0 4px 12px rgba(35, 165, 90, 0.4);
}

.server-icon.explore {
    color: var(--success);
}

.server-icon.explore:hover {
    background: var(--success);
}

.server-icon.share {
    color: var(--primary);
}

.server-icon.share:hover {
    background: var(--primary);
    color: white;
    transform: scale(1.15);
    box-shadow: 0 4px 12px rgba(88, 101, 242, 0.4);
}

/* Chatter AI Button */
.server-icon.ai-tooltip {
    position: relative;
    background: linear-gradient(135deg, #5865F2 0%, #7289DA 100%);
    color: white;
    animation: aiPulse 2s infinite;
}

.server-icon.ai-tooltip:hover {
    background: linear-gradient(135deg, #4752C4 0%, #5B6DAE 100%);
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(88, 101, 242, 0.5);
}

.ai-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    background: var(--accent);
    color: white;
    font-size: 8px;
    font-weight: bold;
    padding: 2px 4px;
    border-radius: 4px;
    border: 2px solid var(--bg-primary);
}

@keyframes aiPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(88, 101, 242, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(88, 101, 242, 0); }
}

/* Games Button - Dark Blue Steam Style */
.server-icon.games-tooltip {
    position: relative;
    background: linear-gradient(135deg, #1b2838 0%, #2a475e 100%);
    color: #66c0f4;
    box-shadow: 0 0 15px rgba(102, 192, 244, 0.4), 0 0 30px rgba(102, 192, 244, 0.2);
    border: 1px solid rgba(102, 192, 244, 0.3);
}

.server-icon.games-tooltip:hover {
    background: linear-gradient(135deg, #2a475e 0%, #3d6b8f 100%);
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(102, 192, 244, 0.6), 0 0 40px rgba(102, 192, 244, 0.3);
    border-color: rgba(102, 192, 244, 0.5);
}

.server-icon.games-tooltip .material-icons-round {
    color: #66c0f4;
    filter: drop-shadow(0 0 5px rgba(102, 192, 244, 0.8));
}

.server-icon.games-tooltip img {
    width: 28px;
    height: 28px;
    filter: drop-shadow(0 0 5px rgba(102, 192, 244, 0.8));
}

.pill {
    position: absolute;
    left: -16px;
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 0 4px 4px 0;
    transition: height 0.2s;
}

.server-icon:hover .pill {
    height: 20px;
}

.server-divider {
    width: 32px;
    height: 2px;
    background: #35363C;
    margin: 8px 0;
    border-radius: 1px;
}

/* Server Notification Badge */
.server-notification-badge {
    position: absolute;
    bottom: -4px;
    right: -4px;
    background: var(--danger);
    color: white;
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    z-index: 10;
    border: 2px solid var(--bg-tertiary);
}

.server-notification-badge:empty {
    display: none;
}

/* ===== SERVER FOLDERS ===== */
.server-folder {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 8px;
    width: 100%;
}

.server-folder-header {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    color: var(--text-secondary);
    flex-shrink: 0;
    border: 2px dashed var(--text-muted);
}

.server-folder-header:hover {
    border-radius: var(--radius-md);
    background: var(--channel-hover);
    border-style: solid;
    border-color: var(--primary);
}

.server-folder-header.expanded {
    border-radius: var(--radius-md);
    background: var(--primary);
    color: white;
    border-style: solid;
    border-color: var(--primary);
}

.server-folder-header .material-icons-round {
    font-size: 24px;
    transition: transform 0.3s;
}

.server-folder-header.expanded .material-icons-round {
    transform: rotate(-90deg);
}

.server-folder-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-top: 4px;
    gap: 4px;
    animation: slideDown 0.2s ease;
}

.server-folder-content.collapsed {
    display: none;
}

.server-folder .server-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 0;
}

.server-folder .server-icon .pill {
    left: -12px;
    width: 6px;
}

.server-folder-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--danger);
    color: white;
    font-size: 9px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    z-index: 10;
    border: 2px solid var(--bg-tertiary);
}

/* Drag and drop styles */
.server-icon.dragging {
    opacity: 0.5;
    transform: scale(0.9);
}

.server-icon.drag-over {
    transform: scale(1.1);
    box-shadow: 0 0 0 3px var(--primary), 0 4px 16px rgba(88, 101, 242, 0.4);
}

.server-folder-header.drag-over {
    background: var(--primary);
    color: white;
    border-style: solid;
    border-color: var(--primary);
    transform: scale(1.1);
}

.server-item-wrapper.dragging {
    opacity: 0.5;
}

/* Server list drop zone */
#dynamicServers {
    transition: background 0.2s;
    min-height: 20px;
}

/* Folder creation hint */
.folder-drop-hint {
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-quaternary);
    color: var(--text-primary);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    z-index: 100;
}

.server-icon.drag-over .folder-drop-hint {
    opacity: 1;
}

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

.tooltip {
    position: relative;
}

.tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    padding: 8px 12px;
    background: var(--bg-quaternary);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s;
    z-index: 10002;
    z-index: 10000;
    box-shadow: var(--shadow-md);
    display: block;
}

.tooltip:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(4px);
}

/* Server icon specific tooltip styling - position above to avoid overflow clipping */
/* Server icon hover state only - actual tooltip is separate element */
.server-icon.tooltip {
    cursor: pointer;
}

/* Ensure tooltips can escape server-list container */
.app-layout {
    contain: layout;
}

.server-list {
    contain: none;
}

/* ===== CHANNEL SIDEBAR ===== */
.channel-sidebar {
    width: 240px;
    min-width: 200px;
    max-width: 400px;
    background: var(--bg-secondary);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    flex-grow: 0;
    position: relative;
}

/* Resize handle for channel sidebar */
.channel-sidebar::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    cursor: col-resize;
    background: transparent;
    transition: background 0.15s;
    z-index: 10;
}

.channel-sidebar:hover::after {
    background: var(--border);
}

.channel-sidebar.resizing::after,
.channel-sidebar:active::after {
    background: var(--primary);
}

.channel-header {
    height: 48px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: none;
    box-shadow: none;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
    color: var(--text-primary);
    position: relative;
}

.channel-header:hover {
    background: rgba(255,255,255,0.02);
}

.dropdown-arrow {
    font-size: 20px;
    color: var(--text-muted);
    transition: transform 0.2s;
}

.channel-header:hover .dropdown-arrow {
    transform: rotate(180deg);
}

.channel-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: visible;
    padding: 16px 0;
    position: relative;
    z-index: 1;
}

.category {
    padding: 16px 16px 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: color 0.2s;
    user-select: none;
}

.category:hover {
    color: var(--text-secondary);
}

.category .material-icons-round {
    font-size: 12px;
}

/* Section collapse/expand toggle icon */
.category .section-toggle-icon {
    font-size: 18px;
    transition: transform 0.2s ease;
    margin-right: 2px;
}

.category:hover .section-toggle-icon {
    color: var(--text-secondary);
}

/* Collapsed channel list */
.channel-list.collapsed {
    display: none;
}

.channel, .dm-item {
    padding: 6px 8px;
    margin: 2px 8px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 16px;
    transition: all 0.2s;
    position: relative;
}

.channel:hover, .dm-item:hover {
    background: var(--channel-hover);
    color: var(--interactive-hover);
    transform: translateX(4px);
}

.channel.active, .dm-item.active {
    background: var(--channel-active);
    color: var(--text-primary);
}

.channel.unread::before {
    content: '';
    position: absolute;
    left: -4px;
    width: 4px;
    height: 4px;
    background: var(--text-primary);
    border-radius: 50%;
}

.channel-icon {
    font-size: 20px;
    width: 20px;
    text-align: center;
    transition: transform 0.2s;
}

.channel:hover .channel-icon {
    transform: scale(1.2);
}

.channel-name, .dm-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 16px;
}

.dm-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.dm-preview {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dm-item.unread .dm-preview {
    color: var(--text-primary);
    font-weight: 500;
}

.dm-item.unread .dm-name {
    color: var(--text-primary);
    font-weight: 600;
}

.dm-unread-badge {
    background: var(--danger);
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
    margin-left: auto;
}

.channel-unread-badge {
    background: var(--danger);
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 8px;
    min-width: 16px;
    text-align: center;
    margin-left: auto;
    animation: pulse 2s ease-in-out infinite;
}

.channel.unread .channel-name {
    color: var(--text-primary);
    font-weight: 600;
}

.channel.unread .channel-icon {
    color: var(--text-primary);
}

.channel.unread {
    background: rgba(237, 66, 69, 0.1);
}

.dm-avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: white;
    position: relative;
    position: relative;
    flex-shrink: 0;
}

.dm-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-full);
}

.dm-avatar.group {
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--primary), var(--chatplus-start));
}

.dm-avatar.group img {
    border-radius: var(--radius-md);
}

.dm-section {
    margin-bottom: 16px;
}

.channels-section {
    margin-top: 16px;
}

/* ===== USER PANEL ===== */
.user-panel {
    height: 52px;
    background: var(--bg-tertiary);
    padding: 0 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: var(--transition-fast);
    margin-top: auto;
}

.user-panel:hover {
    background: rgba(255,255,255,0.05);
}

.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: white;
    position: relative;
    flex-shrink: 0;
    transition: transform 0.2s;
}

.user-avatar:hover {
    transform: scale(1.1);
}

.user-avatar img {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-full);
    object-fit: cover;
}

.user-avatar-wrapper {
    position: relative;
    display: inline-block;
}

.user-avatar-decoration {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 130%;
    height: 130%;
    pointer-events: none;
    object-fit: contain;
    z-index: 2;
}

.status-indicator {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 14px;
    height: 14px;
    border-radius: var(--radius-full);
    border: 3px solid var(--bg-tertiary);
    transition: transform 0.2s;
    z-index: 5;
}

.status-indicator.online { background: var(--online); }
.status-indicator.idle { background: var(--idle); }
.status-indicator.dnd { background: var(--dnd); }
.status-indicator.offline { background: var(--offline); }

/* ===== STATUS PICKER MODAL ===== */
.status-picker-modal {
    max-width: 320px;
}

.status-picker-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.status-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
    border-left: 3px solid transparent;
    margin: 0 -4px;
    padding-left: 15px;
}

.status-option:hover {
    background: var(--channel-hover);
}

.status-option:active {
    transform: scale(0.98);
}

.status-option-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.status-option:hover .status-option-icon {
    transform: scale(1.15);
}

.status-option-icon.online {
    background: rgba(59, 165, 93, 0.15);
    color: var(--online);
}

.status-option-icon.idle {
    background: rgba(250, 166, 26, 0.15);
    color: var(--idle);
}

.status-option-icon.dnd {
    background: rgba(237, 66, 69, 0.15);
    color: var(--dnd);
}

.status-option-icon.offline {
    background: rgba(116, 127, 141, 0.15);
    color: var(--offline);
}

.status-option-icon .material-icons-round {
    font-size: 18px;
}

.status-option-icon.online .material-icons-round {
    font-size: 14px;
}

.status-option-icon.offline .material-icons-round {
    font-size: 14px;
}

.status-option-info {
    flex: 1;
    min-width: 0;
}

.status-option-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
    margin-bottom: 1px;
}

.status-option-desc {
    font-size: 12px;
    color: var(--text-muted);
}

/* Current status highlight */
.status-option.current-status {
    background: rgba(88, 101, 242, 0.1);
    border-left-color: var(--primary);
}

.status-option.current-status .status-option-name {
    color: var(--primary);
}

/* User panel status indicator */
.user-avatar {
    position: relative;
}

.user-avatar .status-indicator {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 14px;
    height: 14px;
    border-radius: var(--radius-full);
    border: 3px solid var(--bg-tertiary);
    transition: transform 0.2s;
}

.user-panel:hover .user-avatar .status-indicator {
    transform: scale(1.1);
}

/* Status indicator variations for different states */
.user-panel .status-indicator.online { 
    background: var(--online); 
}

.user-panel .status-indicator.idle { 
    background: var(--idle); 
}

.user-panel .status-indicator.dnd { 
    background: var(--dnd); 
}

.user-panel .status-indicator.offline { 
    background: var(--offline); 
}

/* Profile preview avatar status */
.profile-preview-avatar {
    position: relative;
    z-index: 1;
}

.profile-preview-avatar .status-indicator {
    width: 24px !important;
    height: 24px !important;
    border-width: 4px !important;
}

.user-info {
    flex: 1;
    overflow: hidden;
}

.user-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: visible;
    text-overflow: ellipsis;
    line-height: 1.4;
    min-height: 20px;
    display: flex;
    align-items: center;
}

/* Fix for animated fonts in user panel */
.user-name.font-wave,
.user-name.font-glitch,
.user-name.font-particle,
.user-name.font-explosion,
.user-name.font-ufo,
.user-name.font-cloudy,
.user-name.font-neon {
    overflow: visible;
    min-height: 24px;
    padding: 2px 0;
}

.user-tag {
    font-size: 12px;
    color: var(--text-muted);
}

.user-actions {
    display: flex;
    gap: 4px;
}

.icon-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    position: relative;
}

.icon-btn:hover {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    transform: translateY(-2px);
}

.icon-btn .material-icons-round {
    font-size: 20px;
}

/* Colored icon buttons */
.icon-btn-success {
    color: var(--success);
}

.icon-btn-success:hover {
    background: var(--success);
    color: white;
}

.icon-btn-primary {
    color: var(--primary);
}

.icon-btn-primary:hover {
    background: var(--primary);
    color: white;
}

.icon-btn-warning {
    color: var(--warning);
}

.icon-btn-warning:hover {
    background: var(--warning);
    color: white;
}

.icon-btn-danger {
    color: var(--danger);
}

.icon-btn-danger:hover {
    background: var(--danger);
    color: white;
}

/* ===== CONTENT AREA ===== */
/* ===== CONTENT AREA WITH MEMBERS PANEL ===== */
.content-area {
    flex: 1;
    display: flex;
    flex-direction: row;
    background: var(--bg-primary);
    min-width: 0;
    position: relative;
    overflow: hidden;
}

/* Main content containers share flex space */
.chat-container,
.friends-container {
    flex: 1;
    min-width: 0;
}

/* Persistent Members Panel - positioned after main content */
.members-panel-persistent {
    width: 240px;
    min-width: 200px;
    max-width: 400px;
    background: var(--bg-secondary);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    transition: width 0.3s ease;
    overflow: hidden;
    position: relative;
}

/* Resize handle for members panel */
.members-panel-persistent::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    cursor: col-resize;
    background: transparent;
    transition: background 0.15s;
    z-index: 10;
}

.members-panel-persistent:hover::before {
    background: var(--border);
}

.members-panel-persistent.resizing::before,
.members-panel-persistent:active::before {
    background: var(--primary);
}

.members-panel-persistent.collapsed {
    width: 0;
    min-width: 0;
    border-left: none;
    display: none;
}

.members-header-persistent {
    height: 48px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.members-header-persistent h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.members-content-persistent {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

/* ===== CHAT CONTAINER ===== */
.chat-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    height: 100%;
    animation: fadeIn 0.3s ease;
}

.chat-header {
    height: 48px;
    padding: 0 16px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.chat-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.chat-header-left > .material-icons-round,
.chat-header-icon .material-icons-round {
    color: var(--text-muted);
    font-size: 24px;
}

.chat-header-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.chat-header-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mobile-menu-btn {
    display: none;
}

.chat-header-info {
    display: flex;
    flex-direction: column;
}

.chat-header-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.chat-header-desc {
    font-size: 12px;
    color: var(--text-muted);
}

/* Server Banner */
.server-banner {
    width: 100%;
    height: 135px;
    background: linear-gradient(135deg, var(--primary), var(--bg-teriery));
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.server-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Server Banner in Sidebar */
.server-banner-sidebar {
    width: 100%;
    height: 135px;
    background: linear-gradient(135deg, var(--primary), var(--bg-tertiary));
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.server-banner-sidebar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Server Events Section in Sidebar */
.server-events-section {
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
}

.server-events-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.2s;
}

.server-events-header:hover {
    color: var(--text-primary);
}

.server-events-header .material-icons-round {
    font-size: 16px;
}

.server-events-list {
    padding: 0 8px;
}

.server-event-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin: 4px 0;
    border-radius: var(--radius-md);
    background: var(--bg-tertiary);
    cursor: pointer;
    transition: background 0.2s;
}

.server-event-item:hover {
    background: var(--channel-hover);
}

.server-event-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--primary);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.server-event-date .day {
    font-size: 18px;
    font-weight: 700;
    color: white;
    line-height: 1;
}

.server-event-date .month {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
    text-transform: uppercase;
}

.server-event-info {
    flex: 1;
    min-width: 0;
}

.server-event-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.server-event-time {
    font-size: 12px;
    color: var(--text-muted);
}

.server-event-item.ongoing .server-event-date {
    background: var(--success);
}

.server-event-item.ongoing .server-event-name::after {
    content: 'LIVE';
    display: inline-block;
    margin-left: 8px;
    padding: 2px 6px;
    background: var(--success);
    color: white;
    font-size: 9px;
    font-weight: 700;
    border-radius: 4px;
    vertical-align: middle;
}

/* Server Dropdown Menu */
.server-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 60px;
    width: 280px;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(255,255,255,0.1);
    z-index: 100;
    animation: dropdownSlide 0.15s ease;
}

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

.server-dropdown-section {
    padding: 8px 0;
}

.server-dropdown-header {
    padding: 16px;
    background: linear-gradient(135deg, var(--primary), var(--primary-hover));
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    margin: -1px -1px 0 -1px;
    width: calc(100% + 2px);
}

.server-dropdown-server-name {
    font-weight: 700;
    font-size: 18px;
    color: white;
    margin-bottom: 8px;
}

.server-dropdown-server-boost {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: rgba(255,255,255,0.8);
    cursor: pointer;
    transition: color 0.2s;
}

.server-dropdown-server-boost:hover {
    color: white;
}

.server-dropdown-server-boost .material-icons-round {
    font-size: 16px;
    color: #FF73FA;
}

.server-dropdown-divider {
    height: 1px;
    background: var(--bg-tertiary);
    margin: 0 12px;
}

.server-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    color: var(--text-secondary);
    font-size: 14px;
}

.server-dropdown-item:hover {
    background: var(--channel-hover);
    color: var(--text-primary);
}

.server-dropdown-item .material-icons-round {
    font-size: 20px;
    color: var(--text-muted);
}

.server-dropdown-item:hover .material-icons-round {
    color: var(--text-primary);
}

.server-dropdown-item.danger {
    color: var(--danger);
}

.server-dropdown-item.danger:hover {
    background: rgba(237, 66, 69, 0.1);
    color: var(--danger);
}

.server-dropdown-item.danger .material-icons-round {
    color: var(--danger);
}

/* Sidebar dropdown menu */
.server-dropdown-sidebar {
    position: fixed;
    top: 52px; /* Position below channel header (48px height + 4px gap) */
    left: 72px; /* After server list (72px) */
    width: 224px; /* Same as channel sidebar width (240px) - margins (16px) */
    z-index: 10000; /* High z-index to stay above all other elements */
    max-height: calc(100vh - 60px);
    overflow-y: auto;
}

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

.chat-header-actions .icon-btn {
    width: 36px;
    height: 36px;
}

.messages-wrapper {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    scroll-behavior: smooth;
}

.message {
    display: flex;
    flex-direction: column;
    padding: 2px 0;
    margin-bottom: 16px;
    animation: messageSlide 0.3s ease;
    position: relative;
}

.message-body {
    display: flex;
    gap: 16px;
    width: 100%;
}

.message.new {
    animation: newMessagePulse 1s ease;
}

.message-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: white;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.2s;
    position: relative;
}

/* Allow decorations to overflow */
.message-avatar[style*="overflow: visible"],
.message-avatar.has-decoration {
    overflow: visible;
    background: transparent !important;
}

/* Keep background for letter avatars (no decoration) */
.message-avatar:not([style*="overflow: visible"]):not(.has-decoration) {
    background: var(--primary);
}

/* Ensure decoration images are transparent */
.message-avatar img[src*="Avatar Decorations"] {
    background: transparent !important;
    mix-blend-mode: normal;
}

.message-avatar:hover {
    transform: scale(1.1);
}

.message-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: var(--primary);
}

.message-content {
    flex: 1;
    min-width: 0;
}

.message-header {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
}

.message-author {
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    transition: color 0.2s;
}

.message-author:hover {
    color: var(--primary);
    text-decoration: underline;
}

.message-time {
    font-size: 12px;
    color: var(--text-muted);
}

.message-date-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 16px 0;
    position: relative;
}

.message-date-separator::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--bg-tertiary);
}

.message-date-label {
    background: var(--bg-secondary);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 12px;
    position: relative;
    z-index: 1;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.message-text {
    color: var(--text-secondary);
    line-height: 1.375;
    word-wrap: break-word;
}

.message-text .mention {
    background: rgba(88, 101, 242, 0.3);
    color: #C9CDFB;
    padding: 0 4px;
    border-radius: 3px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s;
}

.message-text .mention:hover {
    background: var(--primary);
    color: white;
}

.typing-indicator {
    display: none;
    padding: 8px 16px;
    color: var(--text-muted);
    font-size: 14px;
    font-style: italic;
    align-items: center;
    gap: 4px;
}

.typing-indicator.active {
    display: flex;
}

.typing-dots {
    display: flex;
    gap: 4px;
}

.typing-dot {
    width: 6px;
    height: 6px;
    background: var(--text-muted);
    border-radius: 50%;
    animation: typingBounce 1.4s infinite;
}

.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }

/* ===== FAILED MESSAGES ===== */
.message-failed {
    opacity: 0.7;
}

.message-failed .message-text {
    color: var(--danger) !important;
}

.message-failed .message-time {
    color: var(--danger);
}

.message-error-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding: 4px 8px;
    background: rgba(237, 66, 69, 0.1);
    border-radius: 4px;
    font-size: 12px;
    color: var(--danger);
}

.message-error-text {
    font-style: italic;
    flex: 1;
}

.message-retry-btn {
    background: transparent;
    border: 1px solid var(--danger);
    color: var(--danger);
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s;
}

.message-retry-btn:hover {
    background: var(--danger);
    color: white;
}

/* ===== INPUT CONTAINER ===== */
.input-container {
    padding: 0 16px 24px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: rgba(47, 49, 54, 0.8);
    backdrop-filter: blur(10px);
}

.input-wrapper {
    background: var(--bg-quaternary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    padding: 0 12px;
    min-height: 44px;
    transition: all 0.2s;
    box-shadow: var(--shadow-sm);
    margin-top: auto;
    margin-bottom: auto;
    position: relative;
}

.input-wrapper:focus-within {
    box-shadow: 0 0 0 2px rgba(88, 101, 242, 0.3);
}

/* Reply Preview */
.reply-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    padding: 8px 12px;
    margin-bottom: -4px;
    border-left: 3px solid var(--accent);
}

.reply-preview-content {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.reply-icon {
    color: var(--accent);
    font-size: 18px;
}

.reply-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.reply-author {
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
}

.reply-text {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reply-cancel {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: all 0.2s;
}

.reply-cancel:hover {
    background: rgba(255,255,255,0.1);
    color: var(--text-primary);
}

.input-action {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    border-radius: var(--radius-sm);
}

.input-action:hover {
    color: var(--text-secondary);
    background: rgba(255,255,255,0.05);
    transform: scale(1.1);
}

.input-action .material-icons-round {
    font-size: 24px;
}

.message-input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 16px;
    padding: 10px 80px 10px 12px;
    outline: none;
    resize: none;
    min-height: 44px;
    max-height: 200px;
    overflow-y: auto;
    line-height: 1.4;
    font-family: inherit;
    display: flex;
    align-items: center;
}

.message-input::placeholder {
    color: var(--text-muted);
}

.send-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    opacity: 0.5;
}

.send-btn.active {
    opacity: 1;
    color: var(--primary);
}

.send-btn:hover.active {
    color: var(--primary-hover);
    transform: scale(1.1);
}

.send-btn .material-icons-round {
    font-size: 20px;
}

/* ===== FILE UPLOAD ===== */
.file-preview {
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: 12px;
    margin-bottom: 8px;
    border: 1px solid rgba(255,255,255,0.1);
}

.file-preview-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.file-preview img {
    max-height: 100px;
    max-width: 150px;
    border-radius: var(--radius-sm);
    object-fit: cover;
}

.file-preview-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    color: var(--text-secondary);
    font-size: 14px;
}

.file-preview-info .material-icons-round {
    color: var(--primary);
    font-size: 24px;
}

.file-preview-remove {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: var(--radius-sm);
    transition: all 0.2s;
}

.file-preview-remove:hover {
    color: var(--danger);
    background: rgba(237, 66, 69, 0.1);
}

.file-preview-spoiler {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 13px;
    user-select: none;
    padding: 6px 10px;
    background: var(--bg-quaternary);
    border-radius: var(--radius-sm);
    transition: all 0.2s;
}

.file-preview-spoiler:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.file-preview-spoiler input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--primary);
    margin: 0;
}

.file-preview-spoiler .spoiler-label {
    font-weight: 500;
    white-space: nowrap;
}

/* ===== MESSAGE ATTACHMENTS ===== */
.message-attachments {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.message-attachment-image {
    max-width: 400px;
    max-height: 300px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: transform 0.2s;
}

.message-attachment-image:hover {
    transform: scale(1.02);
}

/* Spoiler Images */
.message-attachment-spoiler {
    position: relative;
    display: inline-block;
    cursor: pointer;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.message-attachment-spoiler .spoiler-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-tertiary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    z-index: 2;
    transition: opacity 0.2s;
}

.message-attachment-spoiler:hover .spoiler-overlay {
    background: var(--bg-quaternary);
}

.message-attachment-spoiler .spoiler-overlay .material-icons-round {
    font-size: 32px;
    color: var(--text-muted);
}

.message-attachment-spoiler .spoiler-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.message-attachment-image.spoiler-blur {
    filter: blur(20px);
    transform: none;
}

.message-attachment-spoiler.revealed .spoiler-overlay {
    opacity: 0;
    pointer-events: none;
}

.message-attachment-spoiler.revealed .message-attachment-image.spoiler-blur {
    filter: none;
    cursor: pointer;
}

.message-attachment-file {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-tertiary);
    padding: 12px;
    border-radius: var(--radius-md);
    max-width: 400px;
    text-decoration: none;
    color: var(--text-secondary);
    transition: all 0.2s;
}

.message-attachment-file:hover {
    background: var(--bg-quaternary);
    color: var(--text-primary);
}

.message-attachment-file .material-icons-round {
    font-size: 32px;
    color: var(--primary);
}

.message-attachment-info {
    flex: 1;
    min-width: 0;
}

.message-attachment-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.message-attachment-size {
    font-size: 12px;
    color: var(--text-muted);
}

/* ===== PICKER CONTAINER ===== */
.picker-container {
    position: absolute;
    bottom: 80px;
    right: 16px;
    width: 400px;
    height: 400px;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    display: none;
    flex-direction: column;
    z-index: 100;
    border: 1px solid rgba(255,255,255,0.1);
    animation: slideUp 0.2s ease;
}

.picker-container.active {
    display: flex;
}

.picker-header {
    padding: 16px;
    border-bottom: 1px solid var(--bg-tertiary);
    display: flex;
    gap: 24px;
}

.picker-tab {
    color: var(--text-muted);
    cursor: pointer;
    font-weight: 500;
    padding-bottom: 4px;
    border-bottom: 2px solid transparent;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.picker-tab:hover {
    color: var(--text-secondary);
}

.picker-tab.active {
    color: var(--text-primary);
    border-bottom-color: var(--primary);
}

.picker-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    max-height: 320px;
    display: flex;
    flex-direction: column;
}

.emoji-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
}

.emoji-item {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all 0.2s;
}

.emoji-item:hover {
    background: var(--channel-hover);
    transform: scale(1.2);
}

.emoji-section {
    margin-bottom: 16px;
}

.emoji-section-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    padding: 8px 16px;
    letter-spacing: 0.5px;
}

.emoji-item.custom-emoji {
    padding: 4px;
}

.emoji-item.custom-emoji img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.custom-emoji-inline {
    vertical-align: middle;
    display: inline-block;
    margin: 0 2px;
    transition: transform 0.1s ease;
}

.custom-emoji-inline:hover {
    transform: scale(1.1);
}

/* ===== GIF PICKER (Discord Style) ===== */
.gif-picker-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    position: relative;
}

/* Search Header */
.gif-picker-search {
    padding: 12px 12px 8px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--bg-tertiary);
    flex-shrink: 0;
}

.gif-search-input-wrapper {
    display: flex;
    align-items: center;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: 0 12px;
    transition: all 0.2s;
}

.gif-search-input-wrapper:focus-within {
    box-shadow: 0 0 0 2px rgba(88, 101, 242, 0.3);
}

.gif-search-icon {
    color: var(--text-muted);
    font-size: 20px;
    margin-right: 8px;
}

.gif-search-input-wrapper input {
    flex: 1;
    padding: 10px 0;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
}

.gif-search-input-wrapper input::placeholder {
    color: var(--text-muted);
}

.gif-search-clear {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
}

.gif-search-clear:hover {
    background: rgba(255,255,255,0.1);
    color: var(--text-primary);
}

.gif-search-clear .material-icons-round {
    font-size: 16px;
}

/* Categories */
.gif-categories-wrapper {
    padding: 8px 12px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--bg-tertiary);
    flex-shrink: 0;
    min-width: 0;
    overflow: hidden;
}

.gif-categories-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 2px;
    padding-right: 40px;
    scroll-padding-right: 40px;
    -webkit-overflow-scrolling: touch;
}

.gif-categories-scroll::-webkit-scrollbar {
    display: none;
}

.gif-category-btn {
    flex-shrink: 0;
    padding: 6px 14px;
    background: var(--bg-tertiary);
    border: none;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
}

.gif-category-btn:hover {
    background: var(--channel-hover);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.gif-category-btn.active {
    background: var(--primary);
    color: white;
}

.gif-category-btn .material-icons-round {
    font-size: 14px;
}

/* Results Header */
.gif-results-header {
    padding: 12px 12px 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--bg-secondary);
    flex-shrink: 0;
}

.gif-results-header .material-icons-round {
    vertical-align: middle;
}

/* Results Grid */
.gif-results-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 0 12px 12px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    position: relative;
    align-content: start;
}

.gif-result-item {
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    position: relative;
    transition: all 0.15s ease;
    border: 2px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4/3;
    min-height: 120px;
    max-height: 150px;
}

.gif-result-item:hover {
    transform: scale(1.02);
    box-shadow: var(--shadow-md);
    border-color: var(--primary);
}

.gif-result-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gif-hover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 8px;
    opacity: 0;
    transition: opacity 0.15s ease;
    gap: 6px;
}

.gif-result-item:hover .gif-hover-overlay {
    opacity: 1;
}

.gif-hover-overlay.saved-gif-overlay {
    gap: 6px;
}

.gif-action-btn {
    background: rgba(255, 255, 255, 0.95);
    border: none;
    border-radius: 6px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.gif-action-btn:hover {
    background: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.gif-action-btn .material-icons-round {
    font-size: 16px;
    background: transparent;
    padding: 0;
    color: var(--text-primary);
}

.gif-action-btn.send-btn:hover {
    background: var(--primary);
}

.gif-action-btn.send-btn:hover .material-icons-round {
    color: white;
}

.gif-action-btn.danger:hover {
    background: var(--danger);
}

.gif-action-btn.danger:hover .material-icons-round {
    color: white;
}

.gif-action-btn.saved {
    background: #FFD700;
}

.gif-action-btn.saved .material-icons-round {
    color: #333;
}

.saved-gif-count {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

/* Saved GIFs specific styling - ensure proper separation */
.gif-results-grid .saved-gif-item {
    margin-bottom: 4px;
    background: var(--bg-tertiary);
    border: 2px solid var(--bg-tertiary);
}

.gif-results-grid .saved-gif-item:hover {
    border-color: var(--primary);
}

.gif-results-grid .saved-gif-item img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

/* My GIFs - Display at natural/original sizes like Discord */
.my-gifs-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    max-height: 350px;
    padding-right: 4px;
    align-items: flex-start;
}

.my-gif-item {
    width: auto;
    max-width: 100%;
    height: auto;
    background: transparent;
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.15s ease;
    display: block;
}

.my-gif-item:hover {
    border-color: var(--primary);
}

.my-gif-item img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 300px;
    object-fit: contain;
    display: block;
}

/* Empty State */
.gif-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--text-muted);
    text-align: center;
    flex: 1;
}

.gif-empty-state .material-icons-round {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.gif-empty-state p {
    font-size: 14px;
    margin-bottom: 8px;
}

/* ===== GIF PICKER AD SLOT ===== */
.gif-picker-ad-slot {
    flex-shrink: 0;
    padding: 8px 12px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--bg-tertiary);
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gif-ad-container {
    width: 100%;
    max-width: 320px;
    min-height: 50px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 12px;
}

/* ===== SEARCH MODAL ===== */
.search-modal {
    max-width: 600px;
    width: 100%;
}

.search-modal .search-input-wrapper {
    position: relative;
    margin-bottom: 16px;
}

.search-modal #searchInput {
    width: 100%;
    padding: 12px 12px 12px 44px;
    background: var(--bg-tertiary);
    border: 1px solid var(--bg-quaternary);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 15px;
    outline: none;
    transition: all 0.2s;
}

.search-modal #searchInput:focus {
    border-color: var(--primary);
    background: var(--bg-secondary);
}

.search-modal #searchInput::placeholder {
    color: var(--text-muted);
}

.search-modal .search-input-wrapper .material-icons-round {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 20px;
    pointer-events: none;
}

.search-modal .search-filters {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.search-modal .search-results {
    max-height: 400px;
    overflow-y: auto;
}

.search-filter-btn {
    padding: 6px 12px;
    border: 1px solid var(--bg-tertiary);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border-radius: 16px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.search-filter-btn:hover {
    background: var(--bg-quaternary);
    color: var(--text-primary);
}

.search-filter-btn.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.search-result-item:hover {
    background: var(--bg-quaternary) !important;
}

@keyframes highlightMessage {
    0% { background: transparent; }
    50% { background: rgba(88, 101, 242, 0.3); }
    100% { background: transparent; }
}

/* ===== SERVER TOOLTIP - Separate element outside server list ===== */
#serverTooltip {
    position: fixed;
    left: 80px;
    padding: 8px 12px;
    background: var(--bg-quaternary);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    z-index: 2147483647;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    display: none;
}

#serverTooltip.visible {
    display: block;
}

#serverTooltip::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-right-color: var(--bg-quaternary);
}

/* ===== SCROLL TO BOTTOM BUTTON ===== */
.scroll-to-bottom-btn {
    position: absolute;
    bottom: 80px;
    right: 24px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: 1px solid var(--bg-tertiary);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    transition: all 0.2s;
    z-index: 10;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
}

.scroll-to-bottom-btn.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.scroll-to-bottom-btn:hover {
    background: var(--bg-tertiary);
    transform: scale(1.1);
}

.scroll-to-bottom-btn .material-icons-round {
    font-size: 20px;
}

.scroll-to-bottom-btn.has-new {
    background: var(--primary);
    color: white;
}

/* Error State */
.gif-error-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--text-muted);
    text-align: center;
    flex: 1;
}

.gif-error-state .material-icons-round {
    font-size: 48px;
    margin-bottom: 12px;
    color: var(--danger);
}

/* Loading State */
.gif-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--text-muted);
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

.gif-loading .spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--bg-tertiary);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Legacy styles for compatibility */
.gif-search {
    padding: 0 0 12px;
    position: sticky;
    top: 0;
    background: var(--bg-secondary);
    z-index: 10;
}

.gif-search input {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-tertiary);
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 14px;
    transition: all 0.2s;
}

.gif-search input:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(88, 101, 242, 0.3);
}

.gif-search input::placeholder {
    color: var(--text-muted);
}

.gif-categories {
    display: flex;
    gap: 8px;
    padding: 0 0 12px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.gif-categories::-webkit-scrollbar {
    display: none;
}

.gif-category {
    flex-shrink: 0;
    padding: 8px 16px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.gif-category:hover {
    background: var(--channel-hover);
    color: var(--text-primary);
}

.gif-category.active {
    background: var(--primary);
    color: white;
}

.gif-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.gif-item {
    aspect-ratio: 16/10;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    position: relative;
    transition: all 0.2s;
}

.gif-item:hover {
    transform: scale(1.02);
    box-shadow: var(--shadow-md);
}

.gif-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gif-item .gif-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px 8px 8px;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    font-size: 12px;
    color: white;
    opacity: 0;
    transition: opacity 0.2s;
}

.gif-item:hover .gif-overlay {
    opacity: 1;
}

.gif-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
}

.gif-empty .material-icons-round {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.gif-setup {
    text-align: center;
    padding: 40px 20px;
}

.gif-setup h4 {
    color: var(--text-primary);
    margin-bottom: 12px;
    font-size: 16px;
}

.gif-setup p {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 16px;
}

.gif-setup .btn {
    width: auto;
    padding: 10px 20px;
    margin: 0 auto;
    font-size: 14px;
}

.gif-setup code {
    background: var(--bg-tertiary);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-family: monospace;
    font-size: 12px;
    color: var(--text-secondary);
}

.gif-sent {
    max-width: 300px;
    border-radius: var(--radius-md);
    overflow: hidden;
    margin: 4px 0;
}

.gif-sent img {
    width: 100%;
    display: block;
    border-radius: var(--radius-md);
}

/* ===== FRIENDS CONTAINER ===== */
.friends-container {
    display: none;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    height: 100%;
    animation: fadeIn 0.3s ease;
}

.friends-container.active {
    display: flex;
}

.friends-header {
    height: 48px;
    padding: 0 16px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--bg-tertiary);
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.friends-actions {
    margin-left: auto;
    display: flex;
    gap: 8px;
    align-items: center;
}

.friends-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
}

.friends-header-left .material-icons-round {
    font-size: 24px;
}

.friends-title {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 16px;
}

.friends-tabs {
    display: flex;
    gap: 8px;
}

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

.friends-tab:hover {
    color: var(--text-secondary);
    background: rgba(255,255,255,0.05);
}

.friends-tab.active {
    color: var(--text-primary);
    background: rgba(255,255,255,0.1);
}

.friends-tab .tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--danger);
    color: white;
    font-size: 11px;
    font-weight: 700;
    border-radius: 9px;
    margin-left: 6px;
}

/* Inbox Button */
.inbox-btn {
    position: relative;
}

.inbox-badge {
    position: absolute;
    bottom: -4px;
    right: -4px;
    background: var(--danger);
    color: white;
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    z-index: 10;
    border: 2px solid var(--bg-tertiary);
}

.inbox-badge:empty {
    display: none;
}

/* Inbox Panel */
.inbox-panel {
    position: fixed;
    top: 0;
    right: -400px;
    width: 400px;
    height: 100vh;
    background: var(--bg-secondary);
    border-left: 1px solid var(--border);
    z-index: 1000;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
}

.inbox-panel.active {
    right: 0;
}

.inbox-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid var(--border);
}

.inbox-header h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.inbox-tabs {
    display: flex;
    padding: 8px;
    gap: 8px;
    border-bottom: 1px solid var(--border);
}

.inbox-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.inbox-tab:hover {
    background: rgba(255,255,255,0.05);
    color: var(--text-secondary);
}

.inbox-tab.active {
    background: rgba(255,255,255,0.1);
    color: var(--text-primary);
}

.inbox-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.inbox-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--radius-md);
    background: var(--bg-tertiary);
    margin-bottom: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

.inbox-item:hover {
    background: var(--bg-quaternary);
}

.inbox-item-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: white;
    flex-shrink: 0;
}

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

.inbox-item-content {
    flex: 1;
    min-width: 0;
}

.inbox-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.inbox-item-author {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 14px;
}

.inbox-item-time {
    font-size: 11px;
    color: var(--text-muted);
}

.inbox-item-location {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.inbox-item-text {
    font-size: 13px;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.inbox-item-badge {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--danger);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
}

/* Small button variant */
.btn-sm {
    padding: 4px 10px;
    font-size: 12px;
    min-height: 28px;
}

.btn-sm .material-icons-round {
    font-size: 14px;
}

/* Message request item styling */
.message-request-item {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
}

.message-request-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
}

.friends-actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.friends-actions .btn {
    width: auto;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    height: 32px;
}

.friends-actions .btn .material-icons-round {
    font-size: 18px;
}

.friends-actions .icon-btn {
    width: 36px;
    height: 36px;
}

.friends-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: visible;
    padding: 16px;
    position: relative;
}

#friendsSearchContainer {
    margin-bottom: 16px;
}

.friends-search {
    margin: 16px 16px 8px;
}

.friends-search input {
    width: 240px;
    max-width: 100%;
    padding: 8px 12px;
    background: var(--bg-tertiary);
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 13px;
    transition: all 0.2s;
}

.friends-search input:focus {
    box-shadow: 0 0 0 2px rgba(88, 101, 242, 0.3);
    width: 280px;
}

.friends-search input::placeholder {
    color: var(--text-muted);
}

/* ===== FRIEND ITEMS ===== */
.friend-item, .online-user-item {
    display: flex;
    align-items: center;
    padding: 8px;
    margin: 2px 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    gap: 12px;
    transition: all 0.2s;
    animation: slideInLeft 0.3s ease backwards;
    min-height: 48px;
}

/* Fix friend info for animated fonts */
.friend-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2px 0;
    overflow: visible;
}

.friend-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    min-height: 24px;
    white-space: nowrap;
    position: relative;
    padding: 6px 10px;
    margin: -6px -10px;
    border-radius: 4px;
    max-width: calc(100% + 20px);
}

.friend-status {
    font-size: 14px;
    color: var(--text-muted);
    overflow: visible;
    min-height: 20px;
}

.friend-item:hover, .online-user-item:hover {
    background: rgba(255,255,255,0.05);
    transform: translateX(4px);
}

.friend-avatar, .online-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: white;
    position: relative;
    position: relative;
    flex-shrink: 0;
    transition: transform 0.2s;
}

.friend-item:hover .friend-avatar {
    transform: scale(1.1);
}

.friend-avatar img, .online-user-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.friend-info {
    flex: 1;
}

/* Badges in friends list */
.friend-name .chatplus-badge,
.friend-name .dev-badge,
.friend-name .creator-badge,
.friend-name .partner-badge,
.friend-name .verified-bot-badge,
.friend-name .verified_bot-badge,
.friend-name .system-badge,
.friend-name .hypesquad-badge,
.friend-name .hypesquad_bravery-badge,
.friend-name .hypesquad_brilliance-badge,
.friend-name .hypesquad_balance-badge,
.friend-name .bug_hunter-badge,
.friend-name .bug_hunter_gold-badge,
.friend-name .early_supporter-badge,
.friend-name .active_developer-badge,
.friend-name .boost-badge,
.friend-name .chatplus_classic-badge,
.friend-name .make_a_wish_sped-badge {
    font-size: 0.625rem; /* 10px at 16px base */
    padding: 0.125rem 0.375rem; /* 2px 6px at 16px base */
    height: auto;
    min-height: auto;
    max-height: none;
    line-height: 1.2;
    margin-left: 4px;
    gap: 3px;
    flex-shrink: 0;
    white-space: nowrap;
}

.friend-name .chatplus-badge .material-icons-round,
.friend-name .dev-badge .material-icons-round,
.friend-name .creator-badge .material-icons-round,
.friend-name .partner-badge .material-icons-round,
.friend-name .verified-bot-badge .material-icons-round,
.friend-name .verified_bot-badge .material-icons-round,
.friend-name .system-badge .material-icons-round,
.friend-name .hypesquad-badge .material-icons-round,
.friend-name .hypesquad_bravery-badge .material-icons-round,
.friend-name .hypesquad_brilliance-badge .material-icons-round,
.friend-name .hypesquad_balance-badge .material-icons-round,
.friend-name .bug_hunter-badge .material-icons-round,
.friend-name .bug_hunter_gold-badge .material-icons-round,
.friend-name .early_supporter-badge .material-icons-round,
.friend-name .active_developer-badge .material-icons-round,
.friend-name .boost-badge .material-icons-round,
.friend-name .chatplus_classic-badge .material-icons-round,
.friend-name .make_a_wish_sped-badge .material-icons-round {
    font-size: 0.625rem; /* 10px at 16px base */
}

.friend-actions {
    display: flex;
    gap: 8px;
    opacity: 0.6;
    transition: all 0.2s;
}

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

.friend-actions .friend-action {
    transform: scale(0.9);
    transition: all 0.15s ease;
}

.friend-item:hover .friend-actions .friend-action {
    transform: scale(1);
}

.friend-action {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: var(--bg-secondary);
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.friend-action:hover {
    background: var(--channel-hover);
    color: var(--text-secondary);
    transform: scale(1.1);
}

.friend-action .material-icons-round {
    font-size: 18px;
}

/* Blocked user styling in friends list */
.friend-item.blocked-user-item {
    opacity: 0.8;
}

.friend-item.blocked-user-item:hover {
    opacity: 1;
    background: rgba(237, 66, 69, 0.1);
}

.friend-action.unblock-action:hover {
    background: var(--danger);
    color: white;
}

.friend-action.unblock-action:hover .material-icons-round {
    color: white !important;
}

/* ===== HOME LAYOUT OPTIONS ===== */

/* Grid Layout */
.home-layout-grid .friends-content {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
    padding: 20px;
    align-content: start;
}

.home-layout-grid .friend-item,
.home-layout-grid .online-user-item {
    flex-direction: column;
    padding: 20px;
    gap: 12px;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    margin: 0;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.home-layout-grid .friend-item:hover,
.home-layout-grid .online-user-item:hover {
    transform: translateY(-4px);
    background: var(--channel-hover);
}

.home-layout-grid .friend-avatar,
.home-layout-grid .online-user-avatar {
    width: 64px;
    height: 64px;
    font-size: 24px;
}

.home-layout-grid .friend-info {
    text-align: center;
    width: 100%;
}

.home-layout-grid .friend-name {
    justify-content: center;
    flex-wrap: wrap;
}

.home-layout-grid .friend-status {
    font-size: 13px;
    margin-top: 4px;
}

.home-layout-grid .friend-actions {
    position: absolute;
    top: 12px;
    right: 12px;
    opacity: 0;
    flex-direction: column;
    gap: 6px;
}

.home-layout-grid .friend-item:hover .friend-actions {
    opacity: 1;
}

/* Compact Layout */
.home-layout-compact .friends-content {
    padding: 8px 12px;
}

.home-layout-compact .friend-item,
.home-layout-compact .online-user-item {
    padding: 6px 8px;
    margin: 1px 0;
    gap: 8px;
}

.home-layout-compact .friend-avatar,
.home-layout-compact .online-user-avatar {
    width: 24px;
    height: 24px;
    font-size: 10px;
}

.home-layout-compact .friend-name {
    font-size: 14px;
}

.home-layout-compact .friend-status {
    font-size: 12px;
}

.home-layout-compact .friend-actions {
    gap: 4px;
}

.home-layout-compact .friend-action {
    width: 28px;
    height: 28px;
}

.home-layout-compact .friend-action .material-icons-round {
    font-size: 14px;
}

/* List Layout (Default) - already styled above */
.home-layout-list .friends-content {
    display: block;
    padding: 16px;
}

/* ===== ONLINE USERS SECTION ===== */
.online-users-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--bg-tertiary);
    animation: slideUp 0.4s ease;
}

.online-users-title {
    padding: 0 8px 8px;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.online-indicator {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    background: var(--online);
    border: 2px solid var(--bg-secondary);
    border-radius: 50%;
}

.online-user-name {
    font-size: 14px;
    color: var(--text-secondary);
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Badges in online users list */
.online-user-name .chatplus-badge,
.online-user-name .dev-badge,
.online-user-name .creator-badge,
.online-user-name .partner-badge,
.online-user-name .verified-bot-badge,
.online-user-name .verified_bot-badge,
.online-user-name .system-badge,
.online-user-name .hypesquad-badge,
.online-user-name .hypesquad_bravery-badge,
.online-user-name .hypesquad_brilliance-badge,
.online-user-name .hypesquad_balance-badge,
.online-user-name .bug_hunter-badge,
.online-user-name .bug_hunter_gold-badge,
.online-user-name .early_supporter-badge,
.online-user-name .active_developer-badge,
.online-user-name .boost-badge,
.online-user-name .chatplus_classic-badge,
.online-user-name .make_a_wish_sped-badge {
    font-size: 0.625rem; /* 10px at 16px base */
    padding: 0.125rem 0.375rem; /* 2px 6px at 16px base */
    height: auto;
    min-height: auto;
    max-height: none;
    line-height: 1.2;
}

.online-user-name .chatplus-badge .material-icons-round,
.online-user-name .dev-badge .material-icons-round,
.online-user-name .creator-badge .material-icons-round,
.online-user-name .partner-badge .material-icons-round,
.online-user-name .verified-bot-badge .material-icons-round,
.online-user-name .verified_bot-badge .material-icons-round,
.online-user-name .system-badge .material-icons-round,
.online-user-name .hypesquad-badge .material-icons-round,
.online-user-name .hypesquad_bravery-badge .material-icons-round,
.online-user-name .hypesquad_brilliance-badge .material-icons-round,
.online-user-name .hypesquad_balance-badge .material-icons-round,
.online-user-name .bug_hunter-badge .material-icons-round,
.online-user-name .bug_hunter_gold-badge .material-icons-round,
.online-user-name .early_supporter-badge .material-icons-round,
.online-user-name .active_developer-badge .material-icons-round,
.online-user-name .boost-badge .material-icons-round,
.online-user-name .chatplus_classic-badge .material-icons-round,
.online-user-name .make_a_wish_sped-badge .material-icons-round {
    font-size: 0.625rem; /* 10px at 16px base */
}

/* ===== ABOUT CONTAINER ===== */
.about-container {
    display: none;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    height: 100%;
    overflow-y: auto;
    animation: fadeIn 0.3s ease;
}

.about-container.active {
    display: flex;
}

.about-header {
    height: 48px;
    padding: 0 16px;
    border-bottom: 1px solid var(--bg-tertiary);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.about-header .material-icons-round {
    font-size: 24px;
    color: var(--primary);
}

.about-header h2 {
    font-size: 16px;
    font-weight: 600;
}

.about-content {
    flex: 1;
    padding: 32px;
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
}

.about-section {
    margin-bottom: 40px;
    animation: slideUp 0.5s ease backwards;
}

.about-section h3 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--text-primary);
}

.about-section p {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 16px;
}

/* Formatting section in About page */
.formatting-subsection {
    margin-bottom: 24px;
}

.formatting-subsection h4 {
    font-size: 16px;
    color: var(--accent);
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 8px;
}

.formatting-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.formatting-box {
    background: var(--bg-tertiary);
    padding: 12px;
    border-radius: 8px;
}

.formatting-box code {
    color: var(--accent);
}

.formatting-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.format-item {
    background: var(--bg-tertiary);
    padding: 10px 12px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.format-item code {
    color: var(--accent);
    font-size: 13px;
}

.format-item-row {
    background: var(--bg-tertiary);
    padding: 10px 12px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.format-item-row code {
    color: var(--accent);
    font-size: 13px;
}

.format-row {
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.format-row:last-child {
    margin-bottom: 0;
}

.format-row code {
    color: var(--accent);
    font-size: 13px;
    min-width: 100px;
}

.formatting-tip {
    background: linear-gradient(135deg, rgba(88, 101, 242, 0.1), rgba(250, 166, 26, 0.1));
    border: 1px solid rgba(88, 101, 242, 0.3);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
}

.formatting-tip .material-icons-round {
    color: var(--accent);
    font-size: 20px;
}

.formatting-tip p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
}

.formatting-tip code {
    background: rgba(255,255,255,0.1);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
}

.guide-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.guide-item {
    background: var(--bg-secondary);
    padding: 20px;
    border-radius: var(--radius-md);
    text-align: center;
    transition: all 0.2s;
}

.guide-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.guide-item .material-icons-round {
    font-size: 32px;
    color: var(--primary);
    margin-bottom: 12px;
}

.guide-item h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
}

.guide-item p {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0;
}

.feature-list {
    list-style: none;
    display: grid;
    gap: 12px;
}

.feature-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-secondary);
}

.feature-list .material-icons-round {
    color: var(--success);
}

.credits {
    background: linear-gradient(135deg, rgba(88, 101, 242, 0.1), rgba(255, 115, 250, 0.1));
    padding: 24px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255,255,255,0.05);
}

.credit-card {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.credit-avatar {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--primary), var(--chatplus-start));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    color: white;
}

.credit-info h4 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 4px;
}

.credit-info p {
    color: var(--text-muted);
    margin: 0;
}

.badge {
    display: inline-block;
    padding: 4px 12px;
    background: linear-gradient(135deg, var(--primary), var(--chatplus-start));
    color: white;
    font-size: 12px;
    font-weight: 700;
    border-radius: 12px;
    margin-top: 8px;
    text-transform: uppercase;
}

.powered-by {
    text-align: center;
    color: var(--text-muted);
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.version {
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
    margin-top: 8px;
}

.update-item {
    background: var(--bg-secondary);
    padding: 16px;
    border-radius: var(--radius-md);
    border-left: 4px solid var(--primary);
}

.update-date {
    font-weight: 600;
    color: var(--primary);
    display: block;
    margin-bottom: 8px;
}

/* ===== MODALS ===== */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(4px);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.2s ease;
    overflow-y: auto;
}

.modal-overlay.active {
    display: flex;
}

/* Ensure modals are centered and overlay darkens background */
.modal-overlay.active::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: -1;
}

.modal {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 440px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
    animation: slideUp 0.3s ease;
    border: 1px solid rgba(255,255,255,0.1);
    margin: auto;
}

.modal-large {
    max-width: 600px;
}

/* Forward Message Modal Styles */
.forward-target-item {
    padding: 10px 12px;
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
    transition: background-color 0.15s ease;
}

.forward-target-item:hover:not(.current) {
    background-color: var(--bg-hover);
}

.forward-target-item.current {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--bg-tertiary);
}

.forward-target-group {
    margin-bottom: 12px;
}

.forward-server-header {
    padding: 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
}

.forward-channels {
    padding-left: 8px;
}

#forwardTargetsList h4 {
    color: var(--text-muted);
    font-size: 12px;
    text-transform: uppercase;
    margin-bottom: 8px;
    padding: 0 8px;
    letter-spacing: 0.5px;
}

.forward-search input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(88, 101, 242, 0.2);
}

.forward-target-item .dm-avatar-small,
.forward-target-item .server-icon-small {
    flex-shrink: 0;
}

/* Invite to Server Modal Styles */
.invite-server-item {
    padding: 12px;
    margin-bottom: 8px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: background-color 0.15s ease;
}

.invite-server-item:hover {
    background-color: var(--bg-hover);
}

.invite-server-item:active {
    transform: scale(0.99);
}

/* Set Nickname Modal */
#setNicknameModal .input-group {
    margin-top: 16px;
}

#setNicknameModal input {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 14px;
}

#setNicknameModal input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(88, 101, 242, 0.2);
}

/* Add Member Modal Styles */
.add-member-item {
    padding: 12px;
    cursor: pointer;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    background: var(--bg-tertiary);
    transition: background-color 0.15s ease;
}

.add-member-item:hover {
    background-color: var(--bg-hover);
}

.add-member-search input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(88, 101, 242, 0.2);
}

/* Server Profile Modal */
.server-profile-avatar-preview img,
.server-profile-banner-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#serverProfileModal .input-group {
    margin-bottom: 20px;
}

#serverProfileModal label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--text-primary);
}

#serverProfileModal input[type="text"],
#serverProfileModal textarea {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 14px;
}

#serverProfileModal input[type="text"]:focus,
#serverProfileModal textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(88, 101, 242, 0.2);
}

/* Resize handles */
.resize-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 6px;
    cursor: col-resize;
    z-index: 100;
    background: transparent;
    transition: background 0.15s;
}

.resize-handle:hover {
    background: var(--primary);
}

/* Server Insights Modal */
.insights-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 12px;
}

.insights-tab {
    padding: 8px 16px;
    border-radius: 6px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 14px;
    transition: all 0.15s;
}

.insights-tab:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.insights-tab.active {
    background: var(--primary);
    color: white;
}

.insight-card {
    transition: transform 0.15s;
}

.insight-card:hover {
    transform: translateY(-2px);
}

/* Server Backup Modal */
.backup-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 12px;
}

.backup-tab {
    padding: 8px 16px;
    border-radius: 6px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 14px;
    transition: all 0.15s;
}

.backup-tab:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.backup-tab.active {
    background: var(--primary);
    color: white;
}

.backup-options label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    padding: 8px;
    border-radius: 6px;
    transition: background 0.15s;
}

.backup-options label:hover {
    background: var(--bg-hover);
}

.backup-options input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* Ignored Users Modal */
.ignored-user-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    margin-bottom: 8px;
    transition: background 0.15s;
}

.ignored-user-item:hover {
    background: var(--bg-hover);
}

/* Home Dropdown Menu */
.home-dropdown-menu {
    position: fixed;
    left: 72px;
    top: 80px;
    width: 220px;
    background: var(--bg-secondary);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border);
    z-index: 1000;
    padding: 8px 0;
}

.home-dropdown-section {
    padding: 4px 0;
}

.home-dropdown-item {
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: background-color 0.15s ease;
    color: var(--text-primary);
    font-size: 14px;
    position: relative;
}

.home-dropdown-item:hover {
    background-color: var(--bg-hover);
}

.home-dropdown-item .material-icons-round {
    font-size: 20px;
    color: var(--text-muted);
}

.home-dropdown-divider {
    height: 1px;
    background: var(--border);
    margin: 8px 0;
}

.home-dropdown-badge {
    position: absolute;
    right: 12px;
    background: var(--danger);
    color: white;
    font-size: 11px;
    font-weight: 600;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
}

.modal-header {
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-header h3 {
    font-size: 20px;
    font-weight: 700;
}

.close-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: all 0.2s;
}

.close-btn:hover {
    color: var(--text-primary);
    background: rgba(255,255,255,0.1);
}

.modal-content {
    padding: 0 16px 16px;
    overflow-y: auto;
}

.modal-desc {
    color: var(--text-secondary);
    margin-bottom: 16px;
    font-size: 14px;
}

.modal-footer {
    padding: 16px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    border-top: 1px solid var(--bg-tertiary);
}

.modal-footer .btn {
    width: auto;
    padding: 10px 24px;
    font-size: 14px;
}

/* ===== SHARE MODAL ===== */
.share-modal {
    max-width: 500px;
}

.share-warning-box {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
}

.share-warning-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.share-warning-title {
    font-weight: 700;
    font-size: 13px;
    color: #f59e0b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.share-warning-text {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.share-warning-text code {
    background: var(--bg-tertiary);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 12px;
}

.share-warning-text ul {
    margin: 8px 0;
    padding-left: 20px;
}

.share-warning-text li {
    margin: 4px 0;
}

.share-warning-text kbd {
    background: var(--bg-tertiary);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid var(--border);
    font-family: monospace;
    font-size: 12px;
}

.share-link-section {
    margin-top: 20px;
}

.share-link-section label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.share-link-input-group {
    display: flex;
    gap: 8px;
}

.share-link-input-group input {
    flex: 1;
    padding: 10px 12px;
    background: var(--bg-tertiary);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 14px;
    font-family: monospace;
}

/* Hide password dots for webkit browsers */
.share-link-input-group input[type="password"] {
    -webkit-text-security: disc;
    text-security: disc;
}

.share-link-input-group input[type="text"] {
    -webkit-text-security: none;
    text-security: none;
}

.share-link-input-group input:focus {
    outline: none;
    border-color: var(--primary);
}

.share-link-input-group .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.share-link-hint {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ===== OPTION CARDS ===== */
.option-cards {
    display: grid;
    gap: 16px;
}

.option-card {
    background: var(--bg-tertiary);
    padding: 20px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.option-card:hover {
    background: var(--bg-quaternary);
    transform: translateY(-2px);
}

.option-icon {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
}

.option-icon.create {
    background: var(--primary);
    color: white;
}

.option-icon.join {
    background: var(--success);
    color: white;
}

.option-icon .material-icons-round {
    font-size: 28px;
}

.option-card h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}

.option-card p {
    color: var(--text-muted);
    font-size: 14px;
    margin: 0;
}

/* ===== SERVER UPLOAD ===== */
.server-icon-upload {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-full);
    background: var(--bg-tertiary);
    border: 2px dashed var(--text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 0 auto 16px;
    transition: all 0.2s;
}

.server-icon-upload:hover {
    border-color: var(--primary);
    background: rgba(88, 101, 242, 0.1);
}

.server-icon-upload .material-icons-round {
    font-size: 32px;
    color: var(--text-muted);
}

.server-icon-upload p {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

.server-icon-preview {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-full);
    margin: 0 auto 16px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}

/* ===== TOGGLE ===== */
.toggle-group {
    margin-top: 16px;
}

.toggle-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.toggle-label span {
    font-weight: 500;
    color: var(--text-primary);
}

.toggle {
    width: 44px;
    height: 24px;
    background: #72767D;
    border-radius: 12px;
    position: relative;
    cursor: pointer;
    transition: background 0.2s;
}

.toggle.active {
    background: var(--success);
}

.toggle-handle {
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 3px;
    left: 3px;
    transition: left 0.2s;
    box-shadow: var(--shadow-sm);
}

.toggle.active .toggle-handle {
    left: 23px;
}

.toggle-desc {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* ===== DISCOVER GRID ===== */
#discoverModal .modal-content {
    max-height: 60vh;
    overflow-y: auto;
}

.discover-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.discover-card {
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.discover-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.discover-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-full);
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    font-size: 28px;
    font-weight: 700;
    color: white;
}

.discover-card h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}

.discover-card p {
    color: var(--text-muted);
    font-size: 14px;
    margin: 0;
}

/* ===== FRIEND SELECT LIST ===== */
.friend-select-list {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--bg-tertiary);
    border-radius: var(--radius-sm);
    padding: 8px;
}

.friend-select-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all 0.2s;
}

.friend-select-item:hover {
    background: var(--channel-hover);
}

.friend-select-item.selected {
    background: rgba(88, 101, 242, 0.2);
}

.checkbox {
    width: 18px;
    height: 18px;
    border: 2px solid var(--text-muted);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    color: transparent;
}

.friend-select-item.selected .checkbox {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

/* ===== PROFILE MODALS ===== */
.profile-preview-modal {
    max-width: 340px;
    overflow: visible;
    position: relative;
    max-height: none;
}

.profile-preview-modal .modal-content {
    padding: 0;
    overflow: visible;
}

/* Form input styling for modals */
.form-input {
    width: 100%;
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.form-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(88, 101, 242, 0.3);
}

.form-input::placeholder {
    color: var(--text-muted);
}

.form-input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.profile-preview-header {
    position: relative;
    height: 100px;
    background: linear-gradient(135deg, var(--primary), var(--chatplus-start));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.profile-preview-banner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* Support for GIF banners in profile preview - consistent positioning across all views */
.profile-preview-banner img,
.profile-view-banner img,
#viewBannerImg,
#miniProfileBannerImg,
.banner-preview img,
#bannerPreviewImg,
#previewBannerImg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
}

.profile-preview-avatar-wrapper {
    position: absolute;
    top: 100%;
    left: 16px; /* Moved more to the left (was 24px) */
    transform: translateY(-75%); /* Moved down more (was -90%) */
    width: 80px;
    height: 80px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-preview-avatar {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-full);
    background: var(--bg-secondary);
    border: 6px solid var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 700;
    color: white;
    box-shadow: var(--shadow-md);
    overflow: hidden;
    position: relative;
    z-index: 1;
    margin-top: -6px; /* Offset to correct position */
}

.profile-preview-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-preview-decoration {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    object-fit: contain;
    z-index: 20;
    transform: scale(1.18);
}

.profile-preview-body {
    padding: 45px 20px 20px;
    position: relative;
    max-height: calc(90vh - 145px);
    overflow-y: auto;
}

/* Profile preview modal should expand to fit content */
.modal.profile-preview-modal {
    max-height: none !important;
    overflow: visible !important;
    flex: 0 0 auto;
}

/* Ensure profile preview modal displays fully without cutoff */
#profilePreviewModal {
    max-height: none !important;
    height: auto !important;
}

.profile-preview-body h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 4px;
    margin-left: 0;
    padding-left: 0;
}

.profile-preview-body > p:not(.preview-bio) {
    margin: 0;
    padding: 0;
}

.profile-preview-body .preview-bio {
    color: var(--text-secondary);
    margin-top: 16px;
    font-size: 14px;
    line-height: 1.5;
    clear: both;
    background: var(--bg-tertiary);
    padding: 12px;
    border-radius: var(--radius-sm);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.profile-preview-body .preview-bio strong,
.profile-preview-body .preview-bio b {
    font-weight: 700;
    color: var(--text-primary);
}

.profile-preview-body .preview-bio em,
.profile-preview-body .preview-bio i {
    font-style: italic;
}

.profile-preview-body .preview-bio u {
    text-decoration: underline;
}

.profile-preview-body .preview-bio del {
    text-decoration: line-through;
    opacity: 0.6;
}

.profile-preview-body .preview-bio mark {
    background: rgba(250, 166, 26, 0.3);
    padding: 0 4px;
    border-radius: 3px;
}

.profile-preview-body .preview-bio code {
    background: var(--bg-secondary);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.9em;
    color: var(--accent);
}

.profile-preview-body .preview-bio pre {
    background: var(--bg-secondary);
    border-radius: 8px;
    margin: 8px 0;
    overflow-x: auto;
    max-width: 100%;
}

.profile-preview-body .preview-bio pre code {
    display: block;
    padding: 12px;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-primary);
    white-space: pre;
    word-wrap: normal;
}

.profile-preview-badges {
    display: flex;
    gap: 8px;
    margin: 8px 0;
    flex-wrap: wrap;
}

.profile-preview-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

.profile-preview-actions .btn {
    flex: 1;
}

.profile-edit-modal {
    max-width: 500px;
    width: 100%;
    position: relative;
    z-index: 1001;
    margin: auto;
}

/* Ensure profile edit modal is properly centered */
.modal-overlay.active .profile-edit-modal {
    display: flex;
    flex-direction: column;
}

/* Profile edit modal specific styles */
.profile-edit-modal .modal-header {
    flex-shrink: 0;
}

.profile-edit-modal .modal-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    position: relative;
}

/* Spacer for avatar overlap area - increased to prevent blocking content */
.profile-edit-avatar-spacer {
    height: 100px;
}

.profile-edit-modal .modal-footer {
    flex-shrink: 0;
    padding: 16px;
    border-top: 1px solid var(--bg-tertiary);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.profile-edit-banner {
    height: 120px;
    min-height: 120px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    display: flex;
    position: relative;
    z-index: 2;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.profile-edit-banner:hover {
    background: var(--channel-hover);
}

.profile-edit-banner .material-icons-round {
    font-size: 32px;
    color: var(--text-muted);
}

.profile-edit-banner:hover .material-icons-round {
    color: var(--primary);
}

.profile-edit-banner p {
    color: var(--text-muted);
    font-size: 14px;
    margin-top: 8px;
    font-weight: 500;
}

/* Custom Status Input */
.custom-status-group {
    margin-top: 16px;
}

.custom-status-input-wrapper {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.custom-status-emoji-picker {
    width: 44px;
    height: 44px;
    min-width: 44px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 20px;
}

.custom-status-emoji-picker:hover {
    background: var(--channel-hover);
    border-color: var(--primary);
}

#editCustomStatusText {
    flex: 1;
}

.custom-status-expiry {
    display: flex;
    align-items: center;
    gap: 12px;
}

.custom-status-expiry label {
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    margin: 0;
}

.custom-status-expiry select {
    flex: 1;
    padding: 8px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
}

.custom-status-expiry select:focus {
    outline: none;
    border-color: var(--primary);
}

/* Status Emoji Picker Modal */
.status-emoji-picker-modal .modal-content {
    max-height: 400px;
    overflow-y: auto;
}

.status-emoji-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
    padding: 8px;
}

.status-emoji-item {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: all 0.15s;
}

.status-emoji-item:hover {
    background: var(--channel-hover);
    transform: scale(1.1);
}

.profile-edit-banner:hover p {
    color: var(--text-secondary);
}

.banner-preview {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120px;
    background-size: cover;
    background-position: center;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    overflow: hidden;
    z-index: 1;
}

#bannerPreviewImg {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* Banner hover overlay for when preview is active */
.banner-preview:not([style*="display: none"])::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 4;
}

.banner-preview:not([style*="display: none"]):hover::after {
    opacity: 1;
}

/* When banner preview is active, hide the banner placeholder content */
.banner-preview:not([style*="display: none"]) ~ .profile-edit-banner .banner-icon,
.banner-preview:not([style*="display: none"]) ~ .profile-edit-banner p {
    display: none;
}

/* When banner preview is active, ensure it stays visible */
.banner-preview:not([style*="display: none"]) {
    display: block !important;
}

/* Profile Edit Header - Container for banner and avatar */
.profile-edit-header {
    position: relative;
    margin: -16px -16px 0 -16px;
    min-height: 120px;
}

.profile-edit-avatar-wrapper {
    position: absolute;
    bottom: -20px;
    left: 24px;
    z-index: 10;
}

.edit-avatar-decoration {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 130%;
    height: 130%;
    pointer-events: none;
    object-fit: contain;
    z-index: 20;
}

.profile-edit-avatar {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-full);
    background: var(--bg-secondary);
    border: 6px solid var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 700;
    position: relative;
    z-index: 2;
    color: white;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.avatar-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}

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

.avatar-overlay .material-icons-round {
    color: white;
    font-size: 24px;
}

.avatar-preview-img {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-full);
    object-fit: cover;
    border: 6px solid var(--bg-secondary);
    display: block;
    position: absolute;
    bottom: -40px;
    left: 24px;
    z-index: 3;
}

textarea {
    width: 100%;
    padding: 12px;
    background: var(--bg-tertiary);
    border: 1px solid rgba(0,0,0,0.3);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 16px;
    resize: vertical;
    min-height: 100px;
    font-family: inherit;
}

textarea:focus {
    outline: none;
    border-color: var(--primary);
}

.char-count {
    display: block;
    text-align: right;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* ===== PROFILE THEME - Chat+ Feature ===== */
.profile-theme-section {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--bg-tertiary);
}

.profile-theme-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.profile-theme-header label {
    margin: 0;
    font-weight: 600;
}

.chatplus-badge-small {
    background: linear-gradient(135deg, var(--chatplus-start), var(--chatplus-end));
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

.profile-theme-desc {
    color: var(--text-muted);
    font-size: 13px;
    margin-bottom: 16px;
}

.theme-toggle-wrapper,
.theme-gradient-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.theme-toggle-label {
    color: var(--text-secondary);
    font-size: 14px;
}

.theme-color-options {
    animation: fadeIn 0.3s ease;
}

.theme-color-row {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

.theme-color-group {
    flex: 1;
}

.theme-color-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}

.color-picker-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-tertiary);
    padding: 8px 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--bg-quaternary);
}

.color-picker-wrapper input[type="color"] {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    background: transparent;
    padding: 0;
}

.color-picker-wrapper input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

.color-picker-wrapper input[type="color"]::-webkit-color-swatch {
    border: 2px solid var(--bg-quaternary);
    border-radius: var(--radius-sm);
}

.color-value {
    font-family: monospace;
    font-size: 14px;
    color: var(--text-primary);
    text-transform: uppercase;
}

.theme-preview-wrapper {
    margin-top: 16px;
}

.theme-preview-wrapper label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}

.profile-theme-preview {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--bg-tertiary);
    background: var(--bg-secondary);
}

.theme-preview-banner {
    height: 80px;
    background: var(--preview-primary, var(--primary));
    transition: background 0.3s ease;
}

.theme-preview-banner.gradient {
    background: linear-gradient(135deg, var(--preview-primary, var(--primary)), var(--preview-accent, var(--chatplus-start)));
}

.theme-preview-body {
    padding: 0 16px 16px;
    position: relative;
}

.theme-preview-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: 4px solid var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    color: white;
    margin-top: -32px;
    margin-bottom: 8px;
}

.theme-preview-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

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

/* Avatar Decoration Section */
.avatar-decoration-section {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--bg-tertiary);
}

.avatar-decoration-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.avatar-decoration-header label {
    margin: 0;
    font-weight: 600;
}

.avatar-decoration-desc {
    color: var(--text-muted);
    font-size: 13px;
    margin-bottom: 16px;
}

.avatar-decoration-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 20px;
    max-height: 220px;
    overflow-y: auto;
    padding: 8px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    border: 1px solid var(--bg-quaternary);
}

.avatar-decoration-item {
    width: 100%;
    height: 70px;
    background: var(--bg-secondary);
    border: 2px solid var(--bg-quaternary);
    border-radius: var(--radius-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition: all 0.2s;
    padding: 8px;
    box-sizing: border-box;
}

.avatar-decoration-item:hover {
    border-color: var(--primary);
    background: var(--bg-quaternary);
}

.avatar-decoration-item.selected {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary);
    background: var(--bg-quaternary);
}

.avatar-decoration-item img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.avatar-decoration-item .decoration-none {
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
}

.avatar-decoration-preview-wrapper {
    margin-top: 16px;
}

.avatar-decoration-preview-wrapper label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}

.avatar-decoration-preview {
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.decoration-preview-container {
    position: relative;
    width: 100px;
    height: 100px;
}

.decoration-preview-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--chatplus-start));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 700;
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

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

.decoration-preview-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 95px;
    height: 120px;
    pointer-events: none;
    object-fit: contain;
}

/* Avatar decoration on actual avatars */
.avatar-with-decoration {
    position: relative;
    display: inline-block;
}

.avatar-decoration {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 125%;
    height: 125%;
    pointer-events: none;
    object-fit: contain;
    z-index: 2;
}

/* Small avatar decorations */
.avatar-small .avatar-decoration {
    width: 135%;
    height: 135%;
}

/* Large avatar decorations */
.avatar-large .avatar-decoration {
    width: 120%;
    height: 120%;
}

.profile-view-modal {
    max-width: 500px;
    max-height: none;
    overflow: visible;
    transition: background 0.3s ease;
    position: relative;
    display: flex;
    flex-direction: column;
}



.profile-view-modal .modal-content {
    overflow-y: visible;
    flex: 1 1 auto;
    min-height: 0;
}

.profile-view-body {
    overflow-y: visible;
}

.profile-view-modal .modal-footer {
    flex-shrink: 0;
    background: transparent;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px 16px;
}

/* For themed profiles, footer blends with theme */
.profile-view-modal.has-theme .modal-footer,
.profile-view-modal.has-theme-gradient .modal-footer {
    background: transparent;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/* Fix white line at bottom for themed profiles */
.profile-view-modal.has-theme,
.profile-view-modal.has-theme-gradient {
    border: none;
    background-clip: padding-box;
}

.profile-view-modal.has-theme .modal-content,
.profile-view-modal.has-theme-gradient .modal-content {
    background: transparent;
    padding-bottom: 0;
}

.profile-view-modal.has-theme .profile-view-body,
.profile-view-modal.has-theme-gradient .profile-view-body {
    padding-bottom: 24px;
    background: transparent;
}

/* Themed profile buttons - use accent color */
.profile-preview-card.has-theme .btn-primary,
.profile-preview-card.has-theme-gradient .btn-primary,
.profile-view-modal.has-theme .btn-primary,
.profile-view-modal.has-theme-gradient .btn-primary {
    background: var(--profile-accent, var(--primary));
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.profile-preview-card.has-theme .btn-primary:hover,
.profile-preview-card.has-theme-gradient .btn-primary:hover,
.profile-view-modal.has-theme .btn-primary:hover,
.profile-view-modal.has-theme-gradient .btn-primary:hover {
    background: var(--profile-accent, var(--primary-hover));
    filter: brightness(1.1);
}

/* Profile theme for view modal */
.profile-view-modal.has-theme {
    background: linear-gradient(180deg, 
        rgba(0,0,0,0.4) 0%, 
        var(--profile-primary, var(--bg-secondary)) 15%,
        var(--profile-primary, var(--bg-secondary)) 100%
    );
    box-shadow: 
        inset 0 -4px 0 0 rgba(255,255,255,0.15),
        inset 0 0 0 2px rgba(255,255,255,0.08);
}

.profile-view-modal.has-theme-gradient {
    background: linear-gradient(180deg, 
        rgba(0,0,0,0.5) 0%,
        var(--profile-primary, var(--bg-secondary)) 15%,
        var(--profile-accent, var(--bg-secondary)) 100%
    );
    box-shadow: 
        inset 0 -5px 0 0 rgba(255,255,255,0.2),
        inset 0 0 0 2px rgba(255,255,255,0.1);
}

/* Separator bar between banner and body */
.profile-view-modal.has-theme .profile-view-header::after,
.profile-view-modal.has-theme-gradient .profile-view-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, 
        transparent 0%,
        var(--profile-accent, rgba(255,255,255,0.3)) 20%,
        var(--profile-accent, rgba(255,255,255,0.3)) 80%,
        transparent 100%
    );
    z-index: 1;
}

/* Profile theme text readability - enhanced text shadows for all backgrounds */
.profile-view-modal.has-theme .profile-view-body h2,
.profile-view-modal.has-theme-gradient .profile-view-body h2,
.profile-preview-card.has-theme .profile-preview-body h3,
.profile-preview-card.has-theme-gradient .profile-preview-body h3 {
    text-shadow: 0 2px 4px rgba(0,0,0,0.8), 0 1px 8px rgba(0,0,0,0.6), 0 0 20px rgba(0,0,0,0.4);
    color: white;
}

.profile-view-modal.has-theme #viewTag,
.profile-view-modal.has-theme-gradient #viewTag,
.profile-view-modal.has-theme .profile-view-section h4,
.profile-view-modal.has-theme-gradient .profile-view-section h4,
.profile-view-modal.has-theme .profile-view-section p,
.profile-view-modal.has-theme-gradient .profile-view-section p,
.profile-preview-card.has-theme .profile-preview-body p,
.profile-preview-card.has-theme-gradient .profile-preview-body p,
.profile-preview-card.has-theme .profile-preview-tag,
.profile-preview-card.has-theme-gradient .profile-preview-tag {
    text-shadow: 0 1px 3px rgba(0,0,0,0.8), 0 1px 6px rgba(0,0,0,0.6), 0 0 10px rgba(0,0,0,0.4);
    color: white;
}

/* Ensure bio text is readable */
.profile-view-modal.has-theme .profile-view-bio,
.profile-view-modal.has-theme-gradient .profile-view-bio,
.profile-preview-card.has-theme .profile-preview-bio,
.profile-preview-card.has-theme-gradient .profile-preview-bio {
    background: rgba(0, 0, 0, 0.5);
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    color: white;
}

/* Profile modal close button with background */
.profile-view-close-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: rgba(0,0,0,0.4);
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    z-index: 10;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.profile-view-close-btn:hover {
    background: rgba(0,0,0,0.6);
    transform: scale(1.05);
}

.profile-preview-close-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    background: rgba(0,0,0,0.4);
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    z-index: 10;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.profile-preview-close-btn:hover {
    background: rgba(0,0,0,0.6);
    transform: scale(1.05);
}

.profile-view-header {
    position: relative;
    margin-bottom: 64px; /* Increased from 48px to prevent avatar overlap with content */
}

.profile-view-banner {
    height: 120px;
    background: linear-gradient(135deg, var(--primary), var(--chatplus-start));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    position: relative;
    overflow: hidden;
}

#viewBannerImg {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

#previewBannerImg {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* Banner image/gif styling */
.profile-view-banner-image,
#viewBannerImg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
}

.profile-view-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%);
}

.profile-view-avatar-wrapper {
    position: absolute;
    bottom: -40px;
    left: 24px;
    width: 88px;
    height: 88px;
    z-index: 2;
}

.profile-view-avatar {
    width: 88px;
    height: 88px;
    border-radius: var(--radius-full);
    background: var(--bg-secondary);
    border: 6px solid var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    font-weight: 700;
    color: white;
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.profile-view-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-view-decoration {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 118%;
    height: 118%;
    pointer-events: none;
    object-fit: contain;
    z-index: 3;
}

.profile-view-body {
    padding: 0 24px 24px;
}

.profile-view-name-section {
    margin-bottom: 16px;
}

.profile-view-custom-status {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 6px 12px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    font-size: 14px;
    color: var(--text-secondary);
    width: fit-content;
}

.profile-view-custom-status span:first-child {
    font-size: 16px;
}

.profile-view-body h2 {
    font-size: 24px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
    margin: 0;
}

#viewTag {
    color: var(--text-secondary);
    font-size: 14px;
    margin: 4px 0 0 0;
}

.badges {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.profile-view-section {
    margin: 16px 0;
}

.profile-view-section h4 {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 8px 0;
    letter-spacing: 0.5px;
}

.profile-view-section p {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
    word-wrap: break-word;
}

.profile-view-section p strong,
.profile-view-section p b {
    font-weight: 700;
    color: var(--text-primary);
}

.profile-view-section p em,
.profile-view-section p i {
    font-style: italic;
}

.profile-view-section p u {
    text-decoration: underline;
}

.profile-view-section p del {
    text-decoration: line-through;
    opacity: 0.6;
}

.profile-view-section p mark {
    background: rgba(250, 166, 26, 0.3);
    padding: 0 4px;
    border-radius: 3px;
}

.profile-view-section p code {
    background: var(--bg-secondary);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.9em;
    color: var(--accent);
}

.profile-divider {
    height: 1px;
    background: var(--bg-tertiary);
    margin: 16px 0;
}

/* ===== MINI PROFILE CARD (Discord-style popup) ===== */
.mini-profile-card {
    position: fixed;
    width: 300px;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    z-index: 10000;
    opacity: 0;
    transform: scale(0.95) translateY(-5px);
    transition: opacity 0.15s ease-out, transform 0.15s ease-out;
    pointer-events: none;
}

.mini-profile-card.mini-profile-ready {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
}

.mini-profile-theme-wrapper {
    background: linear-gradient(135deg, var(--primary), var(--bg-tertiary));
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.mini-profile-banner {
    height: 100px;
    background: transparent;
    position: relative;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    overflow: hidden;
}

#miniProfileBannerImg {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.mini-profile-close {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.4);
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    z-index: 10;
}

.mini-profile-close:hover {
    background: rgba(0, 0, 0, 0.6);
    transform: scale(1.1);
}

.mini-profile-top-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 6px;
    z-index: 10;
}

.mini-profile-action-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.4);
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.mini-profile-action-btn:hover {
    background: rgba(0, 0, 0, 0.6);
    transform: scale(1.1);
}

.mini-profile-action-btn .material-icons-round {
    font-size: 16px;
}

.mini-profile-avatar-section {
    position: relative;
    height: 40px;
}

.mini-profile-avatar-wrapper {
    position: absolute;
    left: 16px;
    top: -40px;
    width: 72px;
    height: 72px;
}

.mini-profile-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    border: 4px solid var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    color: white;
    overflow: hidden;
}

.mini-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mini-profile-decoration {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 118%;
    height: 118%;
    pointer-events: none;
    object-fit: contain;
    z-index: 3;
}

.mini-profile-info {
    padding: 16px;
    padding-top: 8px;
}

.mini-profile-display-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.3;
}

.mini-profile-username {
    font-size: 13px;
    color: var(--text-muted);
    margin: 2px 0 0 0;
}

.mini-profile-badges {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
}

/* Badge icons in mini profile - larger and more visible */
.mini-profile-badges .chatplus-badge,
.mini-profile-badges .dev-badge,
.mini-profile-badges .creator-badge,
.mini-profile-badges .partner-badge,
.mini-profile-badges .verified-bot-badge,
.mini-profile-badges .system-badge,
.mini-profile-badges .hypesquad-badge,
.mini-profile-badges .hypesquad_bravery-badge,
.mini-profile-badges .hypesquad_brilliance-badge,
.mini-profile-badges .hypesquad_balance-badge,
.mini-profile-badges .bug_hunter-badge,
.mini-profile-badges .bug_hunter_gold-badge,
.mini-profile-badges .early_supporter-badge,
.mini-profile-badges .active_developer-badge,
.mini-profile-badges .boost-badge,
.mini-profile-badges .chatplus_classic-badge,
.mini-profile-badges .make_a_wish_sped-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: var(--bg-tertiary);
    margin: 0;
}

.mini-profile-badges .chatplus-badge .material-icons-round,
.mini-profile-badges .dev-badge .material-icons-round,
.mini-profile-badges .creator-badge .material-icons-round,
.mini-profile-badges .partner-badge .material-icons-round,
.mini-profile-badges .verified-bot-badge .material-icons-round,
.mini-profile-badges .system-badge .material-icons-round,
.mini-profile-badges .hypesquad-badge .material-icons-round,
.mini-profile-badges .hypesquad_bravery-badge .material-icons-round,
.mini-profile-badges .hypesquad_brilliance-badge .material-icons-round,
.mini-profile-badges .hypesquad_balance-badge .material-icons-round,
.mini-profile-badges .bug_hunter-badge .material-icons-round,
.mini-profile-badges .bug_hunter_gold-badge .material-icons-round,
.mini-profile-badges .early_supporter-badge .material-icons-round,
.mini-profile-badges .active_developer-badge .material-icons-round,
.mini-profile-badges .boost-badge .material-icons-round,
.mini-profile-badges .chatplus_classic-badge .material-icons-round,
.mini-profile-badges .make_a_wish_sped-badge .material-icons-round {
    font-size: 16px;
    line-height: 1;
}

.mini-profile-badges .chatplus-badge,
.mini-profile-badges .chatplus_classic-badge {
    background: linear-gradient(135deg, rgba(255, 115, 250, 0.2), rgba(184, 69, 201, 0.2));
    color: #FF73FA;
}

.mini-profile-badges .dev-badge {
    background: rgba(88, 101, 242, 0.2);
    color: #5865F2;
}

.mini-profile-badges .creator-badge {
    background: rgba(155, 89, 182, 0.2);
    color: #9b59b6;
}

.mini-profile-badges .partner-badge {
    background: rgba(88, 101, 242, 0.2);
    color: #5865F2;
}

.mini-profile-badges .verified-bot-badge {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

.mini-profile-badges .system-badge {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.mini-profile-badges .make_a_wish_sped-badge {
    background: rgba(0, 169, 224, 0.2);
    color: #00a9e0;
}

.mini-profile-custom-status {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 6px 8px;
    background: var(--bg-tertiary);
    border-radius: 6px;
}

.mini-profile-status-emoji {
    font-size: 16px;
}

.mini-profile-status-text {
    font-size: 13px;
    color: var(--text-secondary);
}

.mini-profile-mutual-servers {
    margin-top: 12px;
}

.mini-profile-mutual-servers h4 {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 6px 0;
    letter-spacing: 0.5px;
}

.mutual-servers-list {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.mutual-server-item {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s;
}

.mutual-server-item:hover {
    transform: scale(1.1);
}

.mutual-server-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mini-profile-roles-section {
    margin-top: 12px;
}

.mini-profile-roles-section h4 {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 6px 0;
    letter-spacing: 0.5px;
}

.mini-profile-roles {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.mini-profile-role {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    background: var(--bg-tertiary);
}

.mini-profile-role-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.mini-profile-edit-roles-btn {
    margin-top: 6px;
    padding: 4px 10px;
    background: var(--bg-tertiary);
    border: none;
    border-radius: 4px;
    color: var(--text-secondary);
    font-size: 11px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s;
}

.mini-profile-edit-roles-btn:hover {
    background: var(--primary);
    color: white;
}

.mini-profile-edit-roles-btn .material-icons-round {
    font-size: 12px;
}

.mini-profile-role-editor {
    margin-top: 8px;
    padding: 8px;
    background: var(--bg-tertiary);
    border-radius: 6px;
}

.role-editor-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.role-editor-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
}

.role-editor-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.role-editor-item label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    flex: 1;
}

.role-editor-item input[type="checkbox"] {
    cursor: pointer;
}

.mini-profile-bio {
    margin-top: 12px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
    word-wrap: break-word;
}

.mini-profile-bio strong,
.mini-profile-bio b {
    font-weight: 700;
    color: var(--text-primary);
}

.mini-profile-bio em,
.mini-profile-bio i {
    font-style: italic;
}

.mini-profile-bio u {
    text-decoration: underline;
}

.mini-profile-bio del {
    text-decoration: line-through;
    opacity: 0.6;
}

.mini-profile-bio code {
    background: var(--bg-secondary);
    padding: 2px 4px;
    border-radius: 3px;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.85em;
    color: var(--accent);
}

.mini-profile-message-area {
    padding: 12px 16px;
    border-top: 1px solid var(--bg-tertiary);
}

.mini-profile-message-input-wrapper {
    display: flex;
    gap: 8px;
    align-items: center;
}

.mini-profile-message-input {
    flex: 1;
    padding: 8px 12px;
    background: var(--bg-tertiary);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    color: var(--text-primary);
    font-size: 13px;
    outline: none;
}

.mini-profile-message-input:focus {
    border-color: var(--primary);
}

.mini-profile-send-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary);
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.mini-profile-send-btn:hover {
    background: var(--primary-hover);
    transform: scale(1.1);
}

.mini-profile-send-btn .material-icons-round {
    font-size: 16px;
}

/* ===== SETTINGS MODALS ===== */
.settings-modal {
    max-width: 900px;
    width: 90%;
    height: 85vh;
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5), 0 12px 24px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.06);
    overflow: hidden;
    margin: auto;
    position: relative;
    z-index: 100001; /* Above server list (z-index: 100) and modalOverlay (z-index: 100000) */
}

.settings-layout {
    display: flex;
    height: 100%;
}

.settings-sidebar {
    width: 232px;
    background: var(--bg-secondary);
    padding: 20px 12px 20px 20px;
    border-right: 1px solid rgba(255, 255, 255, 0.04);
    overflow-y: auto;
}

.settings-sidebar h3 {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 16px 0 8px 0;
    padding: 0 10px;
    letter-spacing: 0.5px;
}

.settings-sidebar h3:first-child {
    margin-top: 0;
}

.settings-nav-item {
    width: 100%;
    padding: 8px 10px;
    margin: 2px 0;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.15s ease;
    background: transparent;
    border: none;
    font-size: 15px;
    font-weight: 500;
    text-align: left;
    position: relative;
}

.settings-nav-item:hover {
    background: rgba(255,255,255,0.06);
    color: var(--text-secondary);
}

.settings-nav-item.active {
    background: rgba(255,255,255,0.12);
    color: var(--text-primary);
}

.settings-nav-item.active::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 16px;
    background: var(--primary);
    border-radius: 0 2px 2px 0;
}

.settings-nav-item.danger {
    color: var(--danger);
}

.settings-nav-item.danger:hover {
    background: rgba(237, 66, 69, 0.1);
    color: var(--danger);
}

.settings-nav-item .material-icons-round {
    font-size: 20px;
    opacity: 0.85;
}

.settings-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin: 8px 10px;
}

/* ===== SETTINGS CONTENT AREA ===== */
.settings-content {
    flex: 1;
    padding: 40px 32px;
    overflow-y: auto;
    background: var(--bg-primary);
}

.settings-content::-webkit-scrollbar {
    width: 10px;
}

.settings-content::-webkit-scrollbar-track {
    background: transparent;
}

.settings-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
}

.settings-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* Settings Close Button */
.settings-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    z-index: 10;
}

.settings-close:hover {
    background: rgba(255,255,255,0.1);
    color: var(--text-primary);
}

.settings-close .material-icons-round {
    font-size: 20px;
}

/* Settings Section */
.settings-section {
    max-width: 680px;
    margin-bottom: 32px;
}

.settings-section:last-child {
    margin-bottom: 64px;
}

.settings-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.settings-subtitle {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 24px 0 12px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Setting Item - The core building block */
.setting-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 20px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    gap: 24px;
}

.setting-item:last-child {
    border-bottom: none;
}

.setting-info {
    flex: 1;
    min-width: 0;
}

.setting-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
    word-wrap: normal;
    white-space: normal;
}

.setting-description {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
    margin-top: 4px;
    word-wrap: normal;
    white-space: normal;
}

.setting-value {
    font-size: 14px;
    color: var(--text-secondary);
    font-family: 'Courier New', monospace;
    background: rgba(0, 0, 0, 0.2);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    display: inline-block;
    margin-top: 6px;
}

.setting-warning {
    font-size: 12px;
    color: var(--warning);
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ===== AUTOMOD STYLES ===== */
.settings-card {
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.settings-form-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.settings-form-group > div:first-child {
    flex: 1;
}

.settings-select {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
    transition: border-color 0.2s;
}

.settings-select:focus {
    outline: none;
    border-color: var(--accent);
}

.settings-textarea {
    width: 100%;
    padding: 12px;
    background: var(--bg-secondary);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 14px;
    resize: vertical;
    min-height: 80px;
    font-family: inherit;
    transition: border-color 0.2s;
}

.settings-input {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 14px;
    transition: border-color 0.2s;
}

.settings-input:focus {
    outline: none;
    border-color: var(--accent);
}

/* Formatting Help Button */
.formatting-help-btn {
    position: absolute;
    right: 48px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s;
}

.formatting-help-btn:hover {
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.1);
}

.settings-textarea:focus {
    outline: none;
    border-color: var(--accent);
}

.settings-hint {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

.setting-warning .material-icons-round {
    font-size: 16px;
}

.setting-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* Account Card */
.account-card {
    background: linear-gradient(135deg, rgba(88, 101, 242, 0.15) 0%, rgba(0, 0, 0, 0.3) 100%);
    border-radius: var(--radius-lg);
    padding: 24px;
    margin-bottom: 24px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
    overflow: hidden;
}

.account-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(135deg, var(--primary) 0%, #4752c4 100%);
    opacity: 0.3;
}

.account-card-content {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin-top: 30px;
}

.account-avatar-wrapper {
    position: relative;
    flex-shrink: 0;
}

.account-avatar {
    width: 88px;
    height: 88px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    font-weight: 600;
    color: white;
    border: 6px solid var(--bg-secondary);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.account-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.account-status-indicator {
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 3px solid var(--bg-secondary);
}

.account-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.account-display-name {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

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

.account-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

/* Danger Zone */
.danger-zone {
    background: rgba(237, 66, 69, 0.08);
    border: 1px solid rgba(237, 66, 69, 0.2);
    border-radius: var(--radius-lg);
    padding: 24px;
    margin-top: 24px;
}

.danger-zone-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--danger);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.danger-zone-title .material-icons-round {
    font-size: 20px;
}

.danger-zone-description {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 16px;
    line-height: 1.5;
}

.danger-zone-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.danger-zone-action-info {
    flex: 1;
}

.danger-zone-action-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.danger-zone-action-desc {
    font-size: 12px;
    color: var(--text-muted);
}

/* Profile Section */
.profile-preview-card {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 24px;
    transition: background 0.3s ease;
}

/* Profile theme support - custom background colors */
.profile-preview-card.has-theme {
    background: linear-gradient(180deg, 
        rgba(0,0,0,0.3) 0%, 
        var(--profile-primary, var(--bg-secondary)) 20%,
        var(--profile-primary, var(--bg-secondary)) 100%
    );
    box-shadow: 
        inset 0 -4px 0 0 rgba(255,255,255,0.15),
        inset 0 0 0 2px rgba(255,255,255,0.08);
    border: none;
}

.profile-preview-card.has-theme-gradient {
    background: linear-gradient(180deg, 
        rgba(0,0,0,0.4) 0%,
        var(--profile-primary, var(--bg-secondary)) 20%,
        var(--profile-accent, var(--bg-secondary)) 100%
    );
    box-shadow: 
        inset 0 -5px 0 0 rgba(255,255,255,0.2),
        inset 0 0 0 2px rgba(255,255,255,0.1);
    border: none;
}

/* Separator bar for preview card */
.profile-preview-card.has-theme .profile-preview-banner::after,
.profile-preview-card.has-theme-gradient .profile-preview-banner::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, 
        transparent 0%,
        var(--profile-accent, rgba(255,255,255,0.3)) 20%,
        var(--profile-accent, rgba(255,255,255,0.3)) 80%,
        transparent 100%
    );
    z-index: 1;
}

.profile-preview-banner {
    height: 100px;
    background: linear-gradient(135deg, var(--primary) 0%, #4752c4 100%);
    position: relative;
}

.profile-preview-body {
    padding: 20px 20px 20px;
    position: relative;
}

.profile-preview-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin-top: 12px;
    margin-bottom: 4px;
}

.profile-preview-tag {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.profile-preview-bio {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-sm);
}

.profile-preview-pronouns {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.profile-preview-custom-status {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    padding: 6px 12px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    font-size: 14px;
    color: var(--text-secondary);
    width: fit-content;
}

.profile-preview-custom-status span:first-child {
    font-size: 16px;
}

/* Form Elements in Settings */
.settings-input {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    color: var(--text-primary);
    font-size: 14px;
    transition: all 0.2s;
    min-width: 200px;
}

.settings-input:focus {
    outline: none;
    border-color: var(--primary);
    background: rgba(0, 0, 0, 0.4);
}

.settings-input::placeholder {
    color: var(--text-muted);
}

.settings-select {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    padding: 10px 32px 10px 12px;
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23999'/%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px;
}

.settings-toggle {
    position: relative;
    width: 44px;
    height: 24px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.settings-toggle.active {
    background: var(--success);
}

.settings-toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.settings-toggle.active::after {
    left: 22px;
}

/* ===== CHAT+ SECTION ===== */
.chatplus-hero {
    background: linear-gradient(135deg, var(--chatplus-start), var(--chatplus-end));
    padding: 40px;
    border-radius: var(--radius-lg);
    text-align: center;
    color: white;
}

.chatplus-hero h3 {
    font-size: 28px;
    margin-bottom: 16px;
}

.chatplus-hero p {
    margin-bottom: 24px;
    opacity: 0.9;
}

.chatplus-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-top: 24px;
}

.chatplus-feature {
    background: var(--bg-secondary);
    padding: 20px;
    border-radius: var(--radius-md);
    text-align: center;
}

.chatplus-feature .material-icons-round {
    font-size: 32px;
    color: var(--chatplus-start);
    margin-bottom: 12px;
}

/* ===== GAMES MENU ===== */
.games-container {
    padding: 24px;
    max-width: 600px;
    margin: 0 auto;
}

.games-header {
    text-align: center;
    margin-bottom: 32px;
}

.games-header h2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 28px;
    margin-bottom: 8px;
}

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

.game-card {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid var(--border);
}

.game-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary);
}

.game-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.game-info {
    flex: 1;
}

.game-info h3 {
    font-size: 18px;
    margin-bottom: 4px;
}

.game-info p {
    color: var(--text-muted);
    font-size: 13px;
    margin-bottom: 8px;
}

.game-tag {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: 600;
}

/* ===== CONTEXT MENU ===== */
.context-menu {
    position: fixed;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    padding: 8px 0;
    min-width: 180px;
    z-index: 3000;
    display: none;
    animation: slideUp 0.1s ease;
    border: 1px solid rgba(255,255,255,0.1);
}

.context-menu.active {
    display: block;
}

.context-item {
    padding: 8px 16px;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.1s;
    font-size: 14px;
}

.context-item:hover {
    background: var(--primary);
    color: white;
}

.context-item .material-icons-round {
    font-size: 18px;
}

.context-item.danger {
    color: var(--danger);
}

.context-item.danger:hover {
    background: var(--danger);
    color: white;
}

.context-divider {
    height: 1px;
    background: var(--bg-tertiary);
    margin: 4px 0;
}

/* ===== SERVER CONTEXT MENU ===== */
.server-context-menu {
    min-width: 220px;
}

.server-context-menu .context-item {
    padding: 10px 16px;
}

.server-context-menu .context-item .material-icons-round {
    font-size: 20px;
    width: 20px;
    text-align: center;
}

/* Owner-only items - hidden by default */
.context-item.owner-only,
.context-divider.owner-only {
    display: none;
}

/* When menu is in owner mode, show owner-only items */
.server-context-menu.is-owner .context-item.owner-only,
.server-context-menu.is-owner .context-divider.owner-only {
    display: flex;
}

.server-context-menu.is-owner .context-divider.owner-only {
    display: block;
}

/* ===== NOTIFICATION ===== */
/* Legacy notification - keep for compatibility */
.notification {
    position: fixed;
    top: 24px;
    right: 24px;
    background: var(--bg-secondary);
    padding: 16px 20px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 4000;
    transform: translateX(400px);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border-left: 4px solid var(--success);
    max-width: 400px;
}

.notification.show {
    transform: translateX(0);
}

.notification.error {
    border-left-color: var(--danger);
}

.notification .material-icons-round {
    font-size: 24px;
    color: var(--success);
}

.notification.error .material-icons-round {
    color: var(--danger);
}

/* New stacked notification items */
.notification-item {
    background: var(--bg-secondary);
    padding: 16px 20px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: 12px;
    border-left: 4px solid var(--success);
    max-width: 400px;
    transform: translateX(400px);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: auto;
}

.notification-item.show {
    transform: translateX(0);
    opacity: 1;
}

.notification-item.error {
    border-left-color: var(--danger);
}

.notification-item .material-icons-round {
    font-size: 24px;
    color: var(--success);
    flex-shrink: 0;
}

.notification-item.error .material-icons-round {
    color: var(--danger);
}

.notification-item .notification-text {
    font-size: 14px;
    color: var(--text-primary);
}

/* ===== MEMBERS PANEL ===== */
.members-panel {
    position: fixed;
    top: 0;
    right: -280px;
    width: 280px;
    height: 100%;
    background: var(--bg-secondary);
    box-shadow: var(--shadow-lg);
    z-index: 500;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
}

.members-panel.active {
    right: 0;
}

/* Group Members Panel - slides from right */
.group-members-panel {
    right: -280px;
}

.group-members-panel.active {
    right: 0;
}

/* Group members specific styles */
.group-member-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    margin: 2px 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s;
    animation: slideInLeft 0.3s ease backwards;
}

.group-member-item:hover {
    background: var(--channel-hover);
    transform: translateX(4px);
}

.group-member-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: white;
    position: relative;
    flex-shrink: 0;
    transition: transform 0.2s;
    overflow: hidden;
}

.group-member-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-full);
}

.group-member-item:hover .group-member-avatar {
    transform: scale(1.1);
}

.group-member-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.group-member-name {
    font-weight: 500;
    font-size: 15px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
    padding: 4px 8px;
    margin: -4px -8px;
    border-radius: 4px;
    max-width: calc(100% + 16px);
}

.group-member-status {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.group-member-status-indicator {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 12px;
    height: 12px;
    border-radius: var(--radius-full);
    border: 3px solid var(--bg-secondary);
    transition: transform 0.2s;
    z-index: 3;
}

.group-member-status-indicator.online { background: var(--online); }
.group-member-status-indicator.idle { background: var(--idle); }
.group-member-status-indicator.dnd { background: var(--dnd); }
.group-member-status-indicator.offline { background: var(--offline); }

.group-member-item:hover .group-member-status-indicator {
    transform: scale(1.1);
}

.group-member-you-badge {
    font-size: 10px;
    background: var(--primary);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
}

.members-header {
    height: 48px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--bg-tertiary);
    flex-shrink: 0;
}

.members-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.members-header button {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: all 0.2s;
}

.members-header button:hover {
    color: var(--text-primary);
    background: rgba(255,255,255,0.1);
}

.members-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px 12px;
}

.members-section {
    margin-bottom: 24px;
}

.members-section-title {
    padding: 0 8px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.members-section-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--bg-tertiary);
}

.members-section-count {
    color: var(--text-muted);
    font-weight: 500;
}

.member-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 6px 8px;
    margin: 2px 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s;
    animation: slideInLeft 0.3s ease backwards;
    min-height: 44px;
}

/* Fix member info container for animated fonts */
.member-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2px 0;
}

.member-item:hover {
    background: var(--channel-hover);
    transform: translateX(4px);
}

.member-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: white;
    position: relative;
    flex-shrink: 0;
    transition: transform 0.2s;
    overflow: visible;
}

/* Ensure member decoration images are transparent */
.member-avatar img[src*="Avatar Decorations"] {
    background: transparent !important;
}

.member-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-full);
}

.member-item:hover .member-avatar {
    transform: scale(1.1);
}

.member-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.member-name {
    font-weight: 500;
    font-size: 15px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.4;
    min-height: 22px;
    position: relative;
    padding: 4px 8px;
    margin: -4px -8px;
    border-radius: 4px;
    max-width: calc(100% + 16px);
}

/* Fix for animated fonts in member list - prevent cut-off and stretching */
.member-name.font-wave,
.member-name.font-glitch,
.member-name.font-particle,
.member-name.font-explosion,
.member-name.font-ufo,
.member-name.font-cloudy,
.member-name.font-neon,
.member-name.font-ios26,
.friend-name.font-wave,
.friend-name.font-glitch,
.friend-name.font-particle,
.friend-name.font-explosion,
.friend-name.font-ufo,
.friend-name.font-cloudy,
.friend-name.font-neon,
.friend-name.font-ios26,
.group-member-name.font-wave,
.group-member-name.font-glitch,
.group-member-name.font-particle,
.group-member-name.font-explosion,
.group-member-name.font-ufo,
.group-member-name.font-cloudy,
.group-member-name.font-neon,
.group-member-name.font-ios26 {
    overflow: hidden;
    min-height: 28px;
    padding: 8px 12px;
    margin: -8px -12px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    max-width: calc(100% + 24px);
}

/* Prevent font stretching in member list */
.member-name span,
.friend-name > span:not([class*="badge"]),
.group-member-name > span:not([class*="badge"]) {
    display: inline-block;
}

/* Ensure badge spans display correctly */
.friend-name span[class*="badge"],
.group-member-name span[class*="badge"] {
    display: inline-flex;
}

/* Ensure proper line height for all custom fonts */
.font-wave, .font-glitch, .font-particle, .font-explosion, 
.font-ufo, .font-cloudy, .font-neon, .font-ios26 {
    line-height: 1.5;
}

/* Smaller badges in member list */
.member-name .creator-badge,
.member-name .dev-badge,
.member-name .partner-badge,
.member-name .chatplus-badge,
.member-name .verified-bot-badge,
.member-name .boost-badge,
.member-name .hypesquad-badge,
.member-name .hypesquad_bravery-badge,
.member-name .hypesquad_brilliance-badge,
.member-name .hypesquad_balance-badge,
.member-name .bug_hunter-badge,
.member-name .bug_hunter_gold-badge,
.member-name .early_supporter-badge,
.member-name .active_developer-badge,
.member-name .chatplus_classic-badge,
.member-name .make_a_wish_sped-badge {
    font-size: 9px;
    padding: 1px 4px;
    border-radius: 3px;
    margin-left: 4px;
    gap: 3px;
    height: auto;
    min-height: auto;
    max-height: none;
    line-height: 1.2;
    flex-shrink: 0;
    white-space: nowrap;
}

.member-name .creator-badge .material-icons-round,
.member-name .dev-badge .material-icons-round,
.member-name .partner-badge .material-icons-round,
.member-name .chatplus-badge .material-icons-round,
.member-name .verified-bot-badge .material-icons-round,
.member-name .boost-badge .material-icons-round,
.member-name .hypesquad-badge .material-icons-round,
.member-name .hypesquad_bravery-badge .material-icons-round,
.member-name .hypesquad_brilliance-badge .material-icons-round,
.member-name .hypesquad_balance-badge .material-icons-round,
.member-name .bug_hunter-badge .material-icons-round,
.member-name .bug_hunter_gold-badge .material-icons-round,
.member-name .early_supporter-badge .material-icons-round,
.member-name .active_developer-badge .material-icons-round,
.member-name .chatplus_classic-badge .material-icons-round,
.member-name .make_a_wish_sped-badge .material-icons-round {
    font-size: 9px;
}

/* Same small badges for group members and settings */
.group-member-name .creator-badge,
.group-member-name .dev-badge,
.group-member-name .partner-badge,
.group-member-name .chatplus-badge,
.group-member-name .verified-bot-badge,
.group-member-name .make_a_wish_sped-badge,
.settings-member-name .creator-badge,
.settings-member-name .dev-badge,
.settings-member-name .partner-badge,
.settings-member-name .chatplus-badge,
.settings-member-name .verified-bot-badge,
.settings-member-name .make_a_wish_sped-badge {
    font-size: 9px;
    padding: 1px 4px;
    border-radius: 3px;
    margin-left: 4px;
    gap: 3px;
    height: auto;
    min-height: auto;
    max-height: none;
    line-height: 1.2;
    flex-shrink: 0;
    white-space: nowrap;
}

.group-member-name .creator-badge .material-icons-round,
.group-member-name .dev-badge .material-icons-round,
.group-member-name .partner-badge .material-icons-round,
.group-member-name .chatplus-badge .material-icons-round,
.group-member-name .verified-bot-badge .material-icons-round,
.group-member-name .make_a_wish_sped-badge .material-icons-round,
.settings-member-name .creator-badge .material-icons-round,
.settings-member-name .dev-badge .material-icons-round,
.settings-member-name .partner-badge .material-icons-round,
.settings-member-name .chatplus-badge .material-icons-round,
.settings-member-name .verified-bot-badge .material-icons-round,
.settings-member-name .make_a_wish_sped-badge .material-icons-round {
    font-size: 9px;
}

.member-status-text {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.member-status-indicator {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 12px;
    height: 12px;
    border-radius: var(--radius-full);
    border: 3px solid var(--bg-secondary);
    transition: transform 0.2s;
    z-index: 3;
}

.member-status-indicator.online { background: var(--online); }
.member-status-indicator.idle { background: var(--idle); }
.member-status-indicator.dnd { background: var(--dnd); }
.member-status-indicator.offline { background: var(--offline); }

.member-item:hover .member-status-indicator {
    transform: scale(1.1);
}

.member-chatplus-badge {
    font-size: 10px;
    background: linear-gradient(135deg, var(--chatplus-start), var(--chatplus-end));
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* Unified Badge Styles - Consistent sizing for all badges */
.chatplus-badge,
.dev-badge,
.creator-badge,
.partner-badge,
.verified-bot-badge,
.verified_bot-badge,
.system-badge,
.hypesquad-badge,
.hypesquad_bravery-badge,
.hypesquad_brilliance-badge,
.hypesquad_balance-badge,
.bug_hunter-badge,
.bug_hunter_gold-badge,
.early_supporter-badge,
.active_developer-badge,
.boost-badge,
.chatplus_classic-badge,
.make_a_wish_sped-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 6px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-left: 6px;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
    height: 22px;
    min-height: 22px;
    max-height: 22px;
    line-height: 1;
    box-sizing: border-box;
}

.chatplus-badge .material-icons-round,
.dev-badge .material-icons-round,
.creator-badge .material-icons-round,
.partner-badge .material-icons-round,
.verified-bot-badge .material-icons-round,
.verified_bot-badge .material-icons-round,
.system-badge .material-icons-round,
.hypesquad-badge .material-icons-round,
.hypesquad_bravery-badge .material-icons-round,
.hypesquad_brilliance-badge .material-icons-round,
.hypesquad_balance-badge .material-icons-round,
.bug_hunter-badge .material-icons-round,
.bug_hunter_gold-badge .material-icons-round,
.early_supporter-badge .material-icons-round,
.active_developer-badge .material-icons-round,
.boost-badge .material-icons-round,
.chatplus_classic-badge .material-icons-round,
.make_a_wish_sped-badge .material-icons-round {
    font-size: 12px;
    line-height: 1;
}

/* Custom Display Name Fonts */
.font-default { font-family: inherit; }
.font-cursive { font-family: 'Brush Script MT', cursive; }
.font-mono { font-family: 'Courier New', monospace; }
.font-bold { font-family: 'Impact', sans-serif; }
.font-elegant { font-family: 'Georgia', serif; }
.font-fantasy { font-family: fantasy; }
.font-modern { font-family: 'Segoe UI', sans-serif; }
.font-retro { font-family: 'Courier', monospace; letter-spacing: 2px; }
.font-comic { font-family: 'Comic Sans MS', cursive; }
.font-typewriter { font-family: 'Lucida Console', monospace; }
.font-handwriting { font-family: 'Segoe Script', 'Monotype Corsiva', cursive; }
.font-pixel { font-family: 'Courier New', monospace; -webkit-font-smoothing: none; font-weight: bold; }
.font-slime { font-family: 'Arial Black', sans-serif; font-weight: 900; letter-spacing: 1px; color: #3BA55D; text-shadow: 0 0 8px rgba(59, 165, 93, 0.6); }
.font-chalk { font-family: 'Chalkboard SE', 'Comic Sans MS', sans-serif; font-weight: 600; }
.font-gothic { font-family: 'Old English Text MT', 'UnifrakturMaguntia', 'Cloister Black', cursive; }
.font-decorative { font-family: 'Papyrus', 'Herculanum', fantasy; }
.font-minimal { font-family: 'Helvetica Neue', 'Arial Narrow', sans-serif; font-weight: 300; letter-spacing: 2px; text-transform: uppercase; }
.font-cyber { font-family: 'Consolas', monospace; text-transform: uppercase; letter-spacing: 2px; }

/* IOS 26 - Glossy iPhone-style font with liquid glass effect */
.font-ios26 {
    font-family: -apple-system, 'SF Pro Display', 'Helvetica Neue', sans-serif;
    font-weight: 700;
    background: linear-gradient(180deg,
        rgba(255,255,255,0.95) 0%,
        rgba(255,255,255,0.7) 30%,
        rgba(200,210,230,0.5) 50%,
        rgba(180,190,220,0.6) 70%,
        rgba(160,170,210,0.8) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 
        0 0 20px rgba(120,140,200,0.3),
        0 -1px 2px rgba(255,255,255,0.8),
        0 2px 4px rgba(0,0,0,0.2);
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.15));
    position: relative;
    overflow: hidden;
}

.font-ios26::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255,255,255,0) 20%,
        rgba(255,255,255,0.4) 50%,
        rgba(255,255,255,0) 80%,
        transparent 100%);
    animation: iosShine 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes iosShine {
    0%, 100% { left: -50%; opacity: 0; }
    50% { left: 100%; opacity: 1; }
}

/* Animated Wave Font - letters wave up and down */
.font-wave {
    font-family: 'Trebuchet MS', sans-serif;
    font-weight: 700;
}

.font-wave span {
    display: inline-block;
    animation: waveLetter 1.5s ease-in-out infinite;
}

.font-wave span:nth-child(odd) { animation-delay: 0s; }
.font-wave span:nth-child(even) { animation-delay: 0.1s; }

@keyframes waveLetter {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

/* Particle Font - exploding particles effect */
.font-particle {
    font-family: 'Impact', 'Arial Black', sans-serif;
    font-weight: 700;
    position: relative;
    color: #FFD700;
    text-shadow: 
        0 0 10px rgba(255,215,0,0.8),
        0 0 20px rgba(255,140,0,0.6),
        0 0 30px rgba(255,100,0,0.4);
}

.font-particle::before,
.font-particle::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    background: #FFD700;
    border-radius: 50%;
    animation: particlePop 1s ease-out infinite;
}

.font-particle::before {
    top: -5px;
    left: 20%;
    animation-delay: 0s;
}

.font-particle::after {
    top: -3px;
    right: 15%;
    animation-delay: 0.5s;
}

@keyframes particlePop {
    0% { transform: scale(0) translateY(0); opacity: 1; }
    50% { transform: scale(1.5) translateY(-8px); opacity: 0.8; }
    100% { transform: scale(0) translateY(-15px); opacity: 0; }
}

/* Explosion Font - bursting energy effect */
.font-explosion {
    font-family: 'Arial Black', sans-serif;
    font-weight: 900;
    background: linear-gradient(45deg, #FF6B35, #F7931E, #FFD23F, #FF6B35);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: explosionShift 2s ease infinite;
    text-shadow: 0 0 20px rgba(255,107,53,0.5);
}

@keyframes explosionShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* UFO Font - floating alien text */
.font-ufo {
    font-family: 'Orbitron', 'Audiowide', 'Exo 2', sans-serif;
    font-weight: 600;
    letter-spacing: 3px;
    color: #00FF88;
    text-shadow: 
        0 0 10px rgba(0,255,136,0.8),
        0 0 20px rgba(0,200,255,0.5),
        0 0 30px rgba(100,0,255,0.3);
    animation: ufoFloat 2.5s ease-in-out infinite;
}

@keyframes ufoFloat {
    0%, 100% { transform: translateY(0); text-shadow: 0 0 10px rgba(0,255,136,0.8), 0 0 20px rgba(0,200,255,0.5); }
    50% { transform: translateY(-2px); text-shadow: 0 0 15px rgba(0,255,136,1), 0 0 30px rgba(0,200,255,0.7), 0 0 40px rgba(100,0,255,0.4); }
}

/* Cloudy Bubble Font - soft fluffy cloud effect with floating puffs */
.font-cloudy {
    font-family: 'Quicksand', 'Nunito', 'Comfortaa', sans-serif;
    font-weight: 700;
    color: #F7FAFC;
    text-shadow: 
        0 1px 2px rgba(160, 180, 200, 0.4),
        0 2px 4px rgba(140, 160, 190, 0.3),
        0 4px 8px rgba(120, 140, 170, 0.2),
        0 0 20px rgba(200, 210, 230, 0.5);
    position: relative;
    display: inline-block;
}

.font-cloudy::before,
.font-cloudy::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.9) 0%, rgba(240,245,250,0.6) 40%, transparent 70%);
    filter: blur(2px);
    animation: cloudFloat 4s ease-in-out infinite;
}

.font-cloudy::before {
    width: 120%;
    height: 60%;
    top: 10%;
    left: -10%;
    animation-delay: 0s;
}

.font-cloudy::after {
    width: 100%;
    height: 50%;
    top: 25%;
    left: 0%;
    animation-delay: -2s;
}

@keyframes cloudFloat {
    0%, 100% { 
        transform: translateY(0) scale(1);
        opacity: 0.8;
    }
    50% { 
        transform: translateY(-3px) scale(1.05);
        opacity: 1;
    }
}

/* Glitch Font - animated glitch effect */
.font-glitch {
    font-family: 'Courier New', monospace;
    font-weight: bold;
    position: relative;
    display: inline-block;
}

.font-glitch::before,
.font-glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.font-glitch::before {
    color: #ff00ff;
    animation: glitch1 2s infinite linear alternate-reverse;
    clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
    opacity: 0.8;
}

.font-glitch::after {
    color: #00ffff;
    animation: glitch2 3s infinite linear alternate-reverse;
    clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
    opacity: 0.8;
}

/* Glitch font for chat - adds background for readability */
.glitch-chat {
    display: inline-block;
    padding: 0 4px;
    border-radius: 3px;
}

.font-glitch.glitch-chat::before,
.font-glitch.glitch-chat::after {
    left: 4px;
    width: calc(100% - 8px);
}

@keyframes glitch1 {
    0%, 90%, 100% { transform: translate(0); }
    92% { transform: translate(-2px, 0); }
    94% { transform: translate(2px, 0); }
    96% { transform: translate(-1px, 0); }
    98% { transform: translate(1px, 0); }
}

@keyframes glitch2 {
    0%, 90%, 100% { transform: translate(0); }
    91% { transform: translate(2px, 0); }
    93% { transform: translate(-2px, 0); }
    95% { transform: translate(1px, 0); }
    97% { transform: translate(-1px, 0); }
}

/* Neon Pulse Font - breathing neon effect */
.font-neon {
    font-family: 'Arial Black', sans-serif;
    font-weight: 900;
    color: #fff;
    text-shadow: 
        0 0 5px #fff,
        0 0 10px #fff,
        0 0 20px #ff00de,
        0 0 30px #ff00de,
        0 0 40px #ff00de;
    animation: neonPulse 1.5s ease-in-out infinite alternate;
}

@keyframes neonPulse {
    from { 
        text-shadow: 
            0 0 5px #fff,
            0 0 10px #fff,
            0 0 20px #ff00de,
            0 0 30px #ff00de;
    }
    to { 
        text-shadow: 
            0 0 10px #fff,
            0 0 20px #fff,
            0 0 40px #ff00de,
            0 0 60px #ff00de,
            0 0 80px #ff00de;
    }
}

/* Frutiger Aero - Glossy bold font with reflective glass effect */
.font-frutiger {
    font-family: 'Arial Black', 'Arial', sans-serif;
    font-weight: 900;
    font-size: 1.1em;
    position: relative;
    display: inline-block;
    overflow: hidden;
    /* Glassy gradient that reflects light */
    background: 
        linear-gradient(175deg, 
            rgba(255,255,255,1) 0%, 
            rgba(255,255,255,0.9) 15%,
            rgba(220,235,255,0.7) 30%,
            rgba(180,210,245,0.5) 45%,
            rgba(140,180,230,0.4) 55%,
            rgba(100,150,210,0.5) 70%,
            rgba(70,130,200,0.7) 85%,
            rgba(40,100,180,0.9) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    /* Multi-layer shadow for depth */
    text-shadow: 
        /* Outer glow */
        0 0 20px rgba(100, 160, 255, 0.4),
        /* Highlight shadow */
        0 -2px 4px rgba(255,255,255,0.6),
        /* Soft drop shadow */
        0 3px 8px rgba(0,0,0,0.25),
        /* Inner depth */
        0 1px 2px rgba(0,0,0,0.2);
    filter: 
        drop-shadow(0 2px 4px rgba(0,0,0,0.2))
        brightness(1.1);
    position: relative;
    display: inline-block;
}

/* Extra glossy shine overlay */
.font-frutiger::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 40%;
    height: 200%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255,255,255,0) 10%,
        rgba(255,255,255,0.3) 40%,
        rgba(255,255,255,0.5) 50%,
        rgba(255,255,255,0.3) 60%,
        rgba(255,255,255,0) 90%,
        transparent 100%);
    transform: rotate(25deg);
    animation: frutigerShine 3.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes frutigerShine {
    0% { left: -60%; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { left: 120%; opacity: 0; }
}

/* Display Font Selector */
.display-font-section {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--bg-tertiary);
}

.display-font-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.display-font-header label {
    margin: 0;
    font-weight: 600;
}

.display-font-desc {
    color: var(--text-muted);
    font-size: 13px;
    margin-bottom: 16px;
}

.font-selector-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 20px;
}

.font-option {
    padding: 12px;
    background: var(--bg-tertiary);
    border: 2px solid var(--bg-quaternary);
    border-radius: var(--radius-md);
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
}

.font-option:hover {
    border-color: var(--primary);
    background: var(--bg-quaternary);
}

.font-option.selected {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary);
    background: var(--bg-quaternary);
}

.font-preview {
    font-size: 14px;
    color: var(--text-primary);
}

.font-preview-wrapper {
    margin-top: 16px;
}

.font-preview-wrapper label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}

.font-preview-box {
    background: var(--bg-tertiary);
    padding: 16px;
    border-radius: var(--radius-md);
    text-align: center;
}

.font-preview-name {
    font-size: 20px;
    color: var(--text-primary);
}

/* Font Color Picker */
.font-color-section {
    margin-top: 16px;
}

.font-color-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.font-color-header label {
    font-size: 13px;
    color: var(--text-secondary);
}

.font-color-desc {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.font-color-picker {
    display: flex;
    align-items: center;
    gap: 12px;
}

.font-color-picker input[type="color"] {
    width: 50px;
    height: 40px;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    background: none;
}

.font-color-picker input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

.font-color-picker input[type="color"]::-webkit-color-swatch {
    border: 2px solid var(--bg-quaternary);
    border-radius: var(--radius-md);
}

.font-color-picker span {
    font-size: 13px;
    color: var(--text-secondary);
    font-family: monospace;
}

.chatplus-badge {
    background: linear-gradient(135deg, var(--chatplus-start), var(--chatplus-end));
    color: white;
}

.member-dev-badge {
    font-size: 10px;
    background: linear-gradient(135deg, #5865F2, #7289DA);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.dev-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    background: linear-gradient(135deg, #5865F2, #7289DA);
    color: white;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-left: 6px;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}

.dev-badge .material-icons-round {
    font-size: 14px;
}

/* Verified Bot Badge - Blue with checkmark */
.verified-bot-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.verified-bot-badge .material-icons-round {
    font-size: 14px;
}

/* System/Official Chatter Team Badge */
.system-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* Creator Badge - Purple/Gold */
.creator-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    background: linear-gradient(135deg, #9b59b6, #f1c40f);
    color: white;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-left: 6px;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Partner Badge - Blurple */
.partner-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    background: linear-gradient(135deg, #5865F2, #9b59b6);
    color: white;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-left: 6px;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}

/* HypeSquad Badges */
.hypesquad-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    background: linear-gradient(135deg, #f39c12, #e74c3c);
    color: white;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-left: 6px;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}

.hypesquad_bravery-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    background: linear-gradient(135deg, #3498db, #9b59b6);
    color: white;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-left: 6px;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}

.hypesquad_brilliance-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    background: linear-gradient(135deg, #e91e63, #f39c12);
    color: white;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-left: 6px;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}

.hypesquad_balance-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    background: linear-gradient(135deg, #2ecc71, #3498db);
    color: white;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-left: 6px;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Bug Hunter Badges */
.bug_hunter-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    background: linear-gradient(135deg, #27ae60, #2ecc71);
    color: white;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-left: 6px;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}

.bug_hunter_gold-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    background: linear-gradient(135deg, #f39c12, #f1c40f);
    color: white;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-left: 6px;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Early Supporter Badge */
.early_supporter-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    background: linear-gradient(135deg, #1abc9c, #16a085);
    color: white;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-left: 6px;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Active Developer Badge */
.active_developer-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-left: 6px;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Boost Badge */
.boost-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    background: linear-gradient(135deg, #e91e63, #9b59b6);
    color: white;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-left: 6px;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Nitro Classic Badge */
.chatplus_classic-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    background: linear-gradient(135deg, #95a5a6, #7f8c8d);
    color: white;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-left: 6px;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Verified Bot Badge */
.verified_bot-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    background: linear-gradient(135deg, #5865F2, #7289DA);
    color: white;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-left: 6px;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Make a Wish Sped Badge - Exclusive Make a Wish Foundation colors */
.make_a_wish_sped-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    background: linear-gradient(135deg, #00a9e0, #0057b8);
    color: white;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-left: 6px;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}

.make_a_wish_sped-badge .material-icons-round {
    font-size: 14px;
}

/* ===== EXCLUSIVE BADGES ===== */

/* Exclusive badge glow effect */
[data-exclusive="true"] {
    position: relative;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.4), 0 0 16px rgba(255, 215, 0, 0.2);
    animation: exclusiveBadgePulse 3s ease-in-out infinite;
}

@keyframes exclusiveBadgePulse {
    0%, 100% {
        box-shadow: 0 0 8px rgba(255, 215, 0, 0.4), 0 0 16px rgba(255, 215, 0, 0.2);
    }
    50% {
        box-shadow: 0 0 12px rgba(255, 215, 0, 0.6), 0 0 24px rgba(255, 215, 0, 0.3);
    }
}

/* Exclusive badges container on profile */
.exclusive-badges-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 165, 0, 0.05) 100%);
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 8px;
}

/* Exclusive badge rarity tooltip styling */
.exclusive-badge-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-secondary);
    border: 1px solid rgba(255, 215, 0, 0.4);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 11px;
    color: var(--text-primary);
    white-space: nowrap;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.exclusive-badge-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgba(255, 215, 0, 0.4);
}

[data-exclusive="true"]:hover .exclusive-badge-tooltip {
    opacity: 1;
    visibility: visible;
    bottom: calc(100% + 8px);
}

/* Rarity indicator inline */
.badge-rarity {
    font-size: 9px;
    opacity: 0.8;
    margin-left: 2px;
    font-weight: 600;
}

/* Profile exclusive badges section */
#viewExclusiveBadgesSection .profile-view-section h4 {
    color: #FFD700;
    display: flex;
    align-items: center;
}

/* Message header badges - scale with font size */
.message-header .chatplus-badge,
.message-header .dev-badge,
.message-header .creator-badge,
.message-header .partner-badge,
.message-header .verified-bot-badge,
.message-header .verified_bot-badge,
.message-header .system-badge,
.message-header .hypesquad-badge,
.message-header .hypesquad_bravery-badge,
.message-header .hypesquad_brilliance-badge,
.message-header .hypesquad_balance-badge,
.message-header .bug_hunter-badge,
.message-header .bug_hunter_gold-badge,
.message-header .early_supporter-badge,
.message-header .active_developer-badge,
.message-header .boost-badge,
.message-header .chatplus_classic-badge,
.message-header .make_a_wish_sped-badge {
    font-size: 0.6875rem; /* 11px at 16px base, scales with font size */
    padding: 0.1875rem 0.5rem; /* 3px 8px at 16px base */
}

.message-header .chatplus-badge .material-icons-round,
.message-header .dev-badge .material-icons-round,
.message-header .creator-badge .material-icons-round,
.message-header .partner-badge .material-icons-round,
.message-header .verified-bot-badge .material-icons-round,
.message-header .verified_bot-badge .material-icons-round,
.message-header .system-badge .material-icons-round,
.message-header .hypesquad-badge .material-icons-round,
.message-header .hypesquad_bravery-badge .material-icons-round,
.message-header .hypesquad_brilliance-badge .material-icons-round,
.message-header .hypesquad_balance-badge .material-icons-round,
.message-header .bug_hunter-badge .material-icons-round,
.message-header .bug_hunter_gold-badge .material-icons-round,
.message-header .early_supporter-badge .material-icons-round,
.message-header .active_developer-badge .material-icons-round,
.message-header .boost-badge .material-icons-round,
.message-header .chatplus_classic-badge .material-icons-round,
.message-header .make_a_wish_sped-badge .material-icons-round {
    font-size: 0.75rem; /* 12px at 16px base, scales with font size */
}

.dev-section {
    background: linear-gradient(135deg, 
        rgba(88, 101, 242, 0.25) 0%, 
        rgba(114, 137, 218, 0.15) 50%,
        rgba(88, 101, 242, 0.1) 100%);
    border: 1px solid rgba(88, 101, 242, 0.4);
    border-radius: 8px;
    padding: 12px 16px;
    margin: 16px 0;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 
        inset 0 1px 0 rgba(255,255,255,0.1),
        0 2px 8px rgba(0,0,0,0.2);
}

.dev-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #5865F2;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 4px;
}

.dev-section-text {
    color: var(--text-secondary);
    font-size: 13px;
    margin-top: 4px;
}

/* Appearance Settings */
.color-picker-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.color-option {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 3px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
}

.color-option:hover {
    transform: scale(1.1);
}

.color-option.active {
    border-color: white;
    box-shadow: 0 0 0 2px var(--bg-secondary), 0 0 0 4px var(--primary);
}

.setting-select {
    background: var(--bg-tertiary);
    border: 1px solid rgba(0,0,0,0.3);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    padding: 8px 12px;
    font-size: 14px;
    min-width: 150px;
    cursor: pointer;
}

.setting-select:focus {
    outline: none;
    border-color: var(--primary);
}

.setting-slider {
    -webkit-appearance: none;
    width: 150px;
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 3px;
    outline: none;
}

.setting-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background: var(--primary);
    border-radius: 50%;
    cursor: pointer;
}

.toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-tertiary);
    transition: .3s;
    border-radius: 24px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
}

.toggle input:checked + .toggle-slider {
    background-color: var(--primary);
}

.toggle input:checked + .toggle-slider:before {
    transform: translateX(20px);
}

/* Blocked Users List */
.blocked-users-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.blocked-user-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
}

.blocked-user-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.blocked-user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    color: white;
    overflow: hidden;
}

.blocked-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blocked-user-name {
    font-weight: 600;
    color: var(--text-primary);
}

.blocked-user-tag {
    font-size: 13px;
    color: var(--text-muted);
}

.members-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
}

.members-empty .material-icons-round {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.5;
}

/* ===== HELP PANEL ===== */
.help-panel {
    position: fixed;
    top: 0;
    right: -320px;
    width: 320px;
    height: 100%;
    background: var(--bg-secondary);
    box-shadow: var(--shadow-lg);
    z-index: 500;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
}

.help-panel.active {
    right: 0;
}

.help-header {
    height: 48px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--bg-tertiary);
}

.help-header h3 {
    font-size: 16px;
    font-weight: 600;
}

.help-header button {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.help-content {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
}

.help-section {
    margin-bottom: 24px;
}

.help-section h4 {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.help-section ul {
    list-style: disc;
    padding-left: 20px;
}

.help-section ul li {
    margin-bottom: 4px;
    font-size: 13px;
}

.help-section .btn {
    margin-top: 8px;
}

.shortcut {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--bg-tertiary);
}

kbd {
    background: var(--bg-tertiary);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-family: monospace;
    font-size: 12px;
    border: 1px solid rgba(255,255,255,0.1);
}

/* ===== EMPTY STATE ===== */
.empty-state {
    text-align: center;
    color: var(--text-muted);
    padding: 60px 20px;
}

.empty-state-icon {
    font-size: 64px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state h3 {
    color: var(--text-primary);
    margin-bottom: 8px;
    font-size: 20px;
}

/* ===== MESSAGE PAGINATION LOADING ===== */
.messages-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: var(--text-muted);
    font-size: 14px;
    gap: 8px;
}

.messages-loading .material-icons-round {
    font-size: 20px;
}

.spinning {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.load-more-indicator,
.load-newer-indicator {
    display: flex;
    justify-content: center;
    padding: 16px;
    margin-bottom: 8px;
}

.load-newer-indicator {
    margin-top: 16px;
    margin-bottom: 0;
}

.load-more-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--bg-tertiary);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.load-more-btn:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.2);
}

.load-more-btn .material-icons-round {
    font-size: 18px;
}

.loading-older-messages {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    color: var(--text-muted);
    font-size: 13px;
}

.loading-older-messages .material-icons-round {
    font-size: 16px;
}

/* ===== LANDING PAGE ===== */
.landing-page {
    padding: 24px;
    max-width: 800px;
    margin: 0 auto;
}

.landing-welcome {
    text-align: center;
    padding: 40px 24px;
    background: linear-gradient(135deg, rgba(88, 101, 242, 0.1), rgba(88, 101, 242, 0.05));
    border-radius: 16px;
    margin-bottom: 32px;
    border: 1px solid rgba(88, 101, 242, 0.2);
}

.landing-server-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 16px;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.landing-server-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.landing-server-initial {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-primary);
}

.landing-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.landing-stats {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-bottom: 16px;
    color: var(--text-secondary);
    font-size: 14px;
}

.landing-stats span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.landing-stats .material-icons-round {
    font-size: 16px;
}

.landing-description {
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
}

.landing-section {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid var(--border);
}

.landing-section-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.landing-section-title .material-icons-round {
    font-size: 20px;
    color: var(--primary);
}

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

.landing-channel-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.landing-channel-card:hover {
    background: var(--bg-primary);
    border-color: var(--primary);
    transform: translateY(-2px);
}

.landing-channel-card .material-icons-round {
    font-size: 20px;
    color: var(--text-muted);
}

.landing-channel-card:hover .material-icons-round {
    color: var(--primary);
}

.landing-channel-name {
    font-weight: 500;
    color: var(--text-primary);
}

.landing-owner-actions {
    background: linear-gradient(135deg, rgba(88, 101, 242, 0.1), rgba(88, 101, 242, 0.05));
    border-color: rgba(88, 101, 242, 0.2);
}

.landing-owner-actions p {
    color: var(--text-secondary);
    font-size: 14px;
    margin-bottom: 12px;
}

.landing-rules {
    text-align: center;
    padding: 20px;
}

.landing-rules p {
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.landing-custom-content {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
    white-space: pre-wrap;
}

.landing-user-mention .mention {
    background: rgba(88, 101, 242, 0.1);
    color: var(--primary);
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 500;
    transition: background 0.2s;
}

.landing-user-mention .mention:hover {
    background: rgba(88, 101, 242, 0.2);
}

.landing-settings-grid code {
    background: var(--bg-tertiary);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 12px;
    color: var(--primary);
}

/* Landing Page Settings Modal */

/* Channel Section Styles */
.channel-section {
    margin-bottom: 8px;
}

.section-header {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    cursor: pointer;
    transition: color 0.2s;
    flex: 1;
    min-width: 0;
}

.section-header:hover {
    color: var(--text-primary);
}

.section-name {
    white-space: normal;
    word-wrap: break-word;
    line-height: 1.3;
    font-size: 11px;
}

.section-actions {
    display: flex;
    gap: 4px;
}

/* Drag and Drop Styles */
.channel-list {
    min-height: 10px;
}

.channel.draggable {
    cursor: grab;
    position: relative;
}

.channel.draggable:active {
    cursor: grabbing;
}

.channel.dragging {
    opacity: 0.5;
    background: var(--bg-tertiary);
    border: 2px dashed var(--primary);
}

.channel-menu-btn {
    opacity: 0;
    transition: opacity 0.2s;
    margin-left: auto;
    padding: 2px;
}

.channel:hover .channel-menu-btn {
    opacity: 1;
}

/* Context Menu */
.context-menu {
    animation: contextMenuFade 0.1s ease;
}

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

.context-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-primary);
    transition: background 0.15s;
}

.context-menu-item:hover {
    background: var(--bg-tertiary);
}

.context-menu-item .material-icons-round {
    font-size: 18px;
    color: var(--text-muted);
}

.context-menu-divider {
    height: 1px;
    background: var(--border);
    margin: 6px 0;
}

/* Permission Item Styles */
.permission-item {
    transition: background 0.2s;
}

.permission-item:hover {
    background: var(--bg-secondary);
}

.permission-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
}

/* Landing Page Continue Button */
.landing-continue {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}

.btn-large {
    padding: 16px 24px !important;
    font-size: 16px !important;
}

/* Section List in Modal */
.section-list .btn {
    position: relative;
}

.section-list .btn.active::after {
    content: '';
    position: absolute;
    right: 12px;
    width: 8px;
    height: 8px;
    background: var(--success);
    border-radius: 50%;
}
.landing-settings-grid {
    display: grid;
    gap: 20px;
}

.landing-setting-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: var(--bg-tertiary);
    border-radius: 8px;
}

.landing-setting-info h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.landing-setting-info p {
    font-size: 12px;
    color: var(--text-muted);
}

.landing-widgets-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.landing-widget-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    border: 1px solid transparent;
}

.landing-widget-item:hover {
    border-color: var(--primary);
}

.landing-widget-drag {
    cursor: grab;
    color: var(--text-muted);
}

.landing-widget-info {
    flex: 1;
}

.landing-widget-info h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.landing-widget-info p {
    font-size: 12px;
    color: var(--text-muted);
}

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

.landing-widget-actions .icon-btn {
    width: 32px;
    height: 32px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    /* Mobile Layout - Server list at bottom, chat full width */
    .app-container {
        flex-direction: column;
    }
    
    /* Server list becomes bottom nav */
    .server-list {
        width: 100%;
        height: 60px;
        flex-direction: row;
        padding: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        order: 3;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 100;
        border-top: 1px solid var(--border);
    }
    
    .server-list::-webkit-scrollbar {
        display: none;
    }
    
    .server-icon {
        width: 44px;
        height: 44px;
        margin-bottom: 0;
        margin-right: 8px;
        flex-shrink: 0;
    }
    
    .server-divider {
        width: 1px;
        height: 32px;
        margin: 0 8px;
    }
    
    /* Main content area */
    .content-area {
        flex: 1;
        width: 100%;
        height: calc(100vh - 60px); /* Full height minus bottom nav */
        min-width: 0;
        position: relative;
    }
    
    /* Persistent members panel - overlay on mobile */
    .members-panel-persistent {
        position: fixed;
        top: 0;
        right: 0;
        height: 100%;
        z-index: 300;
        transform: translateX(100%);
        transition: transform 0.3s ease;
    }
    
    .members-panel-persistent:not(.collapsed) {
        transform: translateX(0);
    }
    
    .members-panel-persistent.collapsed {
        width: 0;
    }
    
    /* Channel sidebar - collapsible from left */
    .channel-sidebar {
        position: fixed;
        left: -280px;
        top: 0;
        bottom: 60px;
        width: 280px;
        height: auto;
        z-index: 200;
        transition: left 0.3s ease;
        background: var(--bg-secondary);
    }
    
    .channel-sidebar.open {
        left: 0;
    }
    
    /* Overlay for sidebar */
    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 60px;
        background: rgba(0,0,0,0.5);
        z-index: 199;
    }
    
    .sidebar-overlay.active {
        display: block;
    }
    
    /* Server dropdown menu on mobile */
    .server-dropdown-sidebar {
        left: 72px !important;
        width: calc(100vw - 88px) !important;
        max-width: 280px;
    }
    
    /* Chat area full width */
    .chat-area {
        width: 100%;
    }
    
    .chat-header {
        padding: 12px 16px;
    }
    
    .chat-header h2 {
        font-size: 16px;
    }
    
    /* Mobile menu button in header */
    .mobile-menu-btn {
        display: flex !important;
        margin-right: 12px;
    }
    
    /* Messages */
    .message {
        padding: 12px 16px;
    }
    
    .message-body {
        gap: 12px;
    }
    
    .message-avatar {
        width: 36px;
        height: 36px;
    }
    
    .message-content {
        min-width: 0;
    }
    
    /* Input area */
    .input-container {
        padding: 12px 16px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
    }
    
    .message-input-wrapper {
        padding: 8px 12px;
    }
    
    /* Friends page */
    .friends-container {
        padding: 12px;
    }
    
    .friends-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .friends-actions {
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
    }
    
    .friend-item {
        padding: 12px;
    }
    
    /* Modals */
    .modal {
        max-width: calc(100% - 32px);
        width: calc(100% - 32px);
        margin: 16px;
        max-height: calc(100vh - 100px);
    }
    
    .modal-overlay {
        padding: 0;
        align-items: flex-end;
    }
    
    .modal-overlay.active {
        align-items: center;
        padding: 16px;
    }
    
    /* Settings */
    .settings-layout {
        flex-direction: column;
    }
    
    .settings-sidebar {
        width: 100%;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        max-height: 40vh;
    }
    
    .settings-content {
        padding: 16px;
    }
    
    /* Members panel - slide from right */
    .members-panel {
        position: fixed;
        right: -100%;
        top: 0;
        bottom: 60px;
        width: 85%;
        max-width: 320px;
        z-index: 200;
        transition: right 0.3s ease;
    }
    
    .members-panel.active {
        right: 0;
    }
    
    /* Group members panel */
    .group-members-panel {
        right: -100%;
        width: 85%;
        max-width: 320px;
    }
    
    .group-members-panel.active {
        right: 0;
    }
    
    /* Profile modals */
    .profile-view-modal,
    .profile-preview-modal,
    .profile-edit-modal {
        max-width: calc(100% - 32px);
        width: calc(100% - 32px);
    }
    
    .profile-preview-banner,
    .profile-view-banner,
    .profile-edit-header .banner-preview {
        height: 100px;
    }
    
    .profile-preview-avatar,
    .profile-view-avatar,
    .profile-edit-avatar {
        width: 64px;
        height: 64px;
        font-size: 24px;
        bottom: -10px;
    }
    
    .profile-preview-body {
        padding-top: 70px;
        max-height: calc(100vh - 180px);
        overflow-y: auto;
    }
    
    /* Profile preview modal should expand on mobile too */
    .modal.profile-preview-modal,
    #profilePreviewModal {
        max-height: none !important;
        height: auto !important;
        max-width: calc(100% - 32px);
    }
    
    .profile-edit-avatar-spacer {
        height: 70px;
    }
    
    /* Status picker */
    .status-picker-modal {
        max-width: calc(100% - 32px);
    }
    
    /* Tooltip adjustments */
    .tooltip::after {
        display: none;
    }
    
    /* Context menu */
    .context-menu {
        max-width: calc(100% - 32px);
    }
    
    /* Dev menu */
    .dev-menu-modal {
        max-width: calc(100% - 32px);
        width: calc(100% - 32px);
    }
    
    .dev-menu-tabs {
        flex-wrap: wrap;
    }
    
    .dev-tab {
        font-size: 12px;
        padding: 6px 10px;
    }
    
    /* Ban/Delete screens */
    .ban-container,
    .deleted-container {
        padding: 24px;
        max-width: calc(100% - 48px);
    }
    
    /* Notification adjustments */
    .notification {
        left: 16px;
        right: 16px;
        max-width: none;
        top: auto;
        bottom: 80px;
    }
    
    /* Online users list */
    .online-users-section {
        margin-top: 16px;
    }
    
    .online-user-item {
        padding: 8px 12px;
    }
    
    /* Help panel */
    .help-panel {
        width: calc(100% - 32px);
        max-width: none;
        right: 16px;
        left: 16px;
    }
}

/* Small phones */
@media (max-width: 375px) {
    .server-icon {
        width: 40px;
        height: 40px;
    }
    
    .message-input {
        font-size: 16px; /* Prevent zoom on iOS */
    }
    
    .chat-header h2 {
        font-size: 14px;
    }
    
    .btn {
        padding: 8px 12px;
        font-size: 13px;
    }
}
/* ===== SERVER SETTINGS ===== */
.server-settings-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 32px;
}

.server-settings-icon {
    width: 100px;
    height: 100px;
    border-radius: var(--radius-full);
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    font-weight: 700;
    color: white;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s;
}

.server-settings-icon:hover {
    opacity: 0.8;
}

.server-settings-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.server-settings-icon-upload {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.server-settings-icon:hover .server-settings-icon-upload {
    opacity: 1;
}

.server-settings-icon-upload .material-icons-round {
    font-size: 24px;
    color: white;
}

.server-settings-icon-upload span {
    font-size: 11px;
    color: white;
    margin-top: 4px;
}

.server-settings-info {
    flex: 1;
}

.server-settings-name {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.server-settings-meta {
    font-size: 14px;
    color: var(--text-muted);
}

/* Role List */
.role-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}

.role-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
    user-select: none;
}

.role-item:hover {
    background: var(--channel-hover);
    border-color: rgba(255,255,255,0.1);
}

.role-sort-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 16px;
    border-radius: 3px;
    transition: all 0.15s ease;
}

.role-sort-btn:hover:not(:disabled) {
    background: rgba(255,255,255,0.1);
    color: var(--text-primary);
}

.role-sort-btn:disabled {
    cursor: not-allowed;
}

.role-item.admin {
    border-left: 3px solid var(--danger);
}

.role-item.moderator {
    border-left: 3px solid var(--warning);
}

.role-item.member {
    border-left: 3px solid var(--success);
}

.role-color {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.role-name {
    flex: 1;
    font-weight: 500;
    color: var(--text-primary);
}

.role-count {
    font-size: 12px;
    color: var(--text-muted);
}

.role-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s;
}

.role-item:hover .role-actions {
    opacity: 1;
}

.role-action-btn {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.role-action-btn:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.role-action-btn.danger:hover {
    background: var(--danger);
    color: white;
}

/* Role Edit Modal */
.role-edit-container {
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: 20px;
    margin-top: 16px;
}

.role-edit-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.role-edit-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.role-permissions {
    display: grid;
    gap: 12px;
}

.permission-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
}

.permission-info {
    flex: 1;
}

.permission-name {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 14px;
}

.permission-desc {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Member List in Settings */
.settings-member-list {
    margin-top: 16px;
}

.settings-member-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
    transition: all 0.2s;
}

.settings-member-item:hover {
    background: var(--channel-hover);
}

.settings-member-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    color: white;
    position: relative;
    overflow: hidden;
}

.settings-member-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.settings-member-info {
    flex: 1;
}

.settings-member-name {
    font-weight: 500;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.settings-member-role {
    font-size: 12px;
    color: var(--text-muted);
}

.settings-member-actions {
    display: flex;
    gap: 4px;
}

.member-action-btn {
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    background: transparent;
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s;
}

.member-action-btn:hover {
    background: rgba(255,255,255,0.1);
    color: var(--text-primary);
}

.member-action-btn.danger {
    border-color: var(--danger);
    color: var(--danger);
}

.member-action-btn.danger:hover {
    background: var(--danger);
    color: white;
}

/* Invite List */
.invite-list {
    margin-top: 16px;
}

.invite-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
}

.invite-code {
    font-family: monospace;
    background: rgba(0,0,0,0.3);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    color: var(--text-primary);
}

.invite-info {
    flex: 1;
    font-size: 13px;
    color: var(--text-muted);
}

.invite-uses {
    font-size: 12px;
    color: var(--text-muted);
    padding: 4px 8px;
    background: rgba(0,0,0,0.2);
    border-radius: var(--radius-sm);
}

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

/* Channel List in Settings */
.settings-channel-list {
    margin-top: 16px;
}

.settings-channel-category {
    margin-bottom: 16px;
}

.settings-category-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.settings-channel-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px 10px 24px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    margin-bottom: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.settings-channel-item:hover {
    background: var(--channel-hover);
}

.settings-channel-icon {
    color: var(--text-muted);
    font-size: 20px;
}

.settings-channel-name {
    flex: 1;
    color: var(--text-primary);
    font-weight: 500;
}

.settings-channel-type {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: capitalize;
}

.settings-channel-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s;
}

.settings-channel-item:hover .settings-channel-actions {
    opacity: 1;
}

/* Danger Zone Section */
.danger-zone-section {
    margin-top: 32px;
}

.danger-zone-card {
    background: rgba(237, 66, 69, 0.05);
    border: 1px solid rgba(237, 66, 69, 0.2);
    border-radius: var(--radius-md);
    padding: 20px;
    margin-top: 16px;
}

.danger-zone-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(237, 66, 69, 0.1);
}

.danger-zone-item:last-child {
    border-bottom: none;
}

.danger-zone-item-info {
    flex: 1;
}

.danger-zone-item-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.danger-zone-item-desc {
    font-size: 13px;
    color: var(--text-muted);
}

/* Settings Action Buttons */
.settings-action-bar {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

/* Create Button (Floating) */
.settings-create-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 16px;
}

.settings-create-btn:hover {
    background: var(--primary-hover);
}

/* Search Input in Settings */
.settings-search {
    margin-bottom: 16px;
}

.settings-search input {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-tertiary);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 14px;
}

.settings-search input:focus {
    outline: none;
    border-color: var(--primary);
}

.settings-search input::placeholder {
    color: var(--text-muted);
}

/* Empty State for Lists */
.settings-empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-muted);
}

.settings-empty-state .material-icons-round {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

/* Role Badge */
.role-badge {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
    text-transform: uppercase;
}

.role-badge.owner {
    background: var(--danger);
    color: white;
}

.role-badge.admin {
    background: var(--warning);
    color: black;
}

.role-badge.moderator {
    background: var(--primary);
    color: white;
}

.role-badge.member {
    background: var(--success);
    color: white;
}

/* ===== SERVER SETTINGS TOGGLE ===== */
.setting-item .toggle {
    flex-shrink: 0;
}

/* ===== TRANSFER OWNERSHIP ===== */
#transferOwnerList {
    max-height: 300px;
    overflow-y: auto;
}

#transferOwnerList .friend-select-item {
    padding: 12px;
    margin-bottom: 4px;
}

#transferOwnerList .friend-select-item:hover {
    background: var(--channel-hover);
}

#transferOwnerList .friend-select-item.selected {
    background: rgba(88, 101, 242, 0.2);
    border-radius: var(--radius-sm);
}

#confirmTransferBtn {
    opacity: 1;
    transition: all 0.2s;
}

#confirmTransferBtn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===== PERMISSION DENIED MESSAGE ===== */
.permission-denied {
    background: rgba(237, 66, 69, 0.1);
    border: 1px solid rgba(237, 66, 69, 0.2);
    border-radius: var(--radius-sm);
    padding: 16px;
    text-align: center;
    color: var(--text-muted);
}

.permission-denied .material-icons-round {
    font-size: 32px;
    color: var(--danger);
    margin-bottom: 8px;
    display: block;
}

/* ===== OWNER BADGE ===== */
.owner-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--primary);
    color: white;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 4px;
    margin-left: 8px;
}

.owner-badge .material-icons-round {
    font-size: 12px;
}

/* ===== SERVER INFO DISPLAY (for non-owners) ===== */
.server-info-display {
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: 20px;
    margin-bottom: 20px;
}

.server-info-display .server-info-row {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.server-info-display .server-info-row:last-child {
    border-bottom: none;
}

.server-info-display .server-info-label {
    color: var(--text-muted);
    font-size: 14px;
}

.server-info-display .server-info-value {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 14px;
}


/* ===== INVITE SYSTEM STYLES ===== */

.join-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--bg-tertiary);
    padding-bottom: 8px;
}

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

.join-tab:hover {
    color: var(--text-normal);
    background: var(--bg-tertiary);
}

.join-tab.active {
    color: var(--text-normal);
    background: var(--primary);
}

#invitePreview {
    animation: fadeIn 0.3s ease;
}

.invite-create-section {
    animation: fadeIn 0.3s ease;
}

.invite-create-section select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%23949BA4'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px !important;
}

.invite-create-section select:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--primary);
}

.invite-item {
    transition: all 0.2s;
    border: 1px solid transparent;
}

.invite-item:hover {
    border-color: var(--primary);
    transform: translateY(-1px);
}

.invites-list-section {
    animation: fadeIn 0.3s ease;
}

#createdInviteLink {
    background: var(--bg-tertiary);
    border: 1px solid var(--bg-tertiary);
    color: var(--text-normal);
    padding: 12px;
    font-size: 14px;
    border-radius: 4px;
}

#createdInviteLink:focus {
    outline: none;
    border-color: var(--primary);
}

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

/* ===== INVITE LANDING PAGE (Discord Style) ===== */
.invite-landing-modal {
    max-width: 480px;
    width: 90%;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.invite-landing-content {
    padding: 32px;
    text-align: center;
}

.invite-landing-header {
    margin-bottom: 24px;
}

.invite-landing-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--primary), var(--chatplus-start));
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    color: white;
}

.invite-landing-icon .material-icons-round {
    font-size: 32px;
}

.invite-landing-header h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.invite-server-card {
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    text-align: left;
    border: 1px solid rgba(255,255,255,0.06);
}

.invite-server-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-md);
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 600;
    color: white;
    flex-shrink: 0;
    overflow: hidden;
}

.invite-server-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.invite-server-info {
    flex: 1;
    min-width: 0;
}

.invite-server-info h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 8px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.invite-server-stats {
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: var(--text-muted);
}

.invite-stat {
    display: flex;
    align-items: center;
    gap: 6px;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
}

.status-dot.online {
    background: var(--online);
}

.invite-inviter {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 24px;
}

.invite-landing-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.invite-landing-actions .btn {
    flex: 1;
    max-width: 140px;
    justify-content: center;
}

.invite-error {
    margin-top: 16px;
    padding: 12px;
    background: rgba(237, 66, 69, 0.1);
    border: 1px solid rgba(237, 66, 69, 0.2);
    border-radius: var(--radius-sm);
    color: var(--danger);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
}

.invite-error .material-icons-round {
    font-size: 18px;
}

/* Mobile responsive for invite landing */
@media (max-width: 768px) {
    .invite-landing-content {
        padding: 24px 20px;
    }
    
    .invite-server-card {
        flex-direction: column;
        text-align: center;
    }
    
    .invite-server-stats {
        justify-content: center;
    }
}


/* ===== IMAGE EDITOR ===== */
.image-editor-modal {
    max-width: 600px;
    width: 90%;
}

.image-editor-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.image-editor-canvas-wrapper {
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    max-height: 400px;
}

#imageEditorCanvas {
    max-width: 100%;
    max-height: 400px;
    cursor: move;
}

.image-editor-controls {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.image-editor-controls .control-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.image-editor-controls label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.image-editor-controls input[type="range"] {
    width: 100%;
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 3px;
    outline: none;
    -webkit-appearance: none;
}

.image-editor-controls input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background: var(--primary);
    border-radius: 50%;
    cursor: pointer;
}

.position-controls {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.position-controls .icon-btn {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: var(--bg-tertiary);
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.position-controls .icon-btn:hover {
    background: var(--primary);
    color: white;
}

.image-editor-controls select {
    padding: 10px 12px;
    background: var(--bg-tertiary);
    border: 1px solid rgba(0,0,0,0.3);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
}

.image-editor-controls select:focus {
    outline: none;
    border-color: var(--primary);
}

/* Image Editor Outline Overlay */
.image-editor-outline {
    transition: all 0.2s ease;
    box-shadow: 0 0 0 9999px rgba(0,0,0,0.6);
}

.image-editor-outline::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border: 2px solid rgba(255,255,255,0.5);
    border-radius: 4px;
}

.image-editor-preview-info {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
}

/* ===== AVATAR EFFECTS (Around Avatar) ===== */
.avatar-effect {
    position: absolute;
    pointer-events: none;
    z-index: 3;
}

.avatar-effect-fire {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 130%;
    height: 130%;
    border-radius: 50%;
    background: 
        radial-gradient(circle at 30% 70%, rgba(255, 100, 0, 0.8) 0%, transparent 50%),
        radial-gradient(circle at 70% 30%, rgba(255, 150, 0, 0.6) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(255, 50, 0, 0.4) 0%, transparent 60%);
    animation: firePulse 1.5s ease-in-out infinite;
    filter: blur(3px);
}

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

.avatar-effect-sparkle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 140%;
    height: 140%;
}

.avatar-effect-sparkle::before,
.avatar-effect-sparkle::after {
    content: '';
    position: absolute;
    color: #FFD700;
    font-size: 20px;
    animation: sparkleFloat 3s ease-in-out infinite;
}

@keyframes sparkleFloat {
    0%, 100% { transform: translateY(0) scale(1); opacity: 1; }
    50% { transform: translateY(-10px) scale(1.2); opacity: 0.7; }
}

.avatar-effect-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(88, 101, 242, 0.4) 0%, transparent 70%);
    animation: glowPulse 2s ease-in-out infinite;
}

@keyframes glowPulse {
    0%, 100% { box-shadow: 0 0 20px rgba(88, 101, 242, 0.6); }
    50% { box-shadow: 0 0 40px rgba(88, 101, 242, 0.9); }
}

.avatar-effect-rainbow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 135%;
    height: 135%;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #ff0000, #ff8800, #ffff00, #88ff00, #00ff00, #00ff88, #00ffff, #0088ff, #0000ff, #8800ff, #ff00ff, #ff0088, #ff0000);
    animation: rainbowSpin 4s linear infinite;
    filter: blur(4px);
    opacity: 0.8;
}

@keyframes rainbowSpin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

.avatar-effect-ice {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 130%;
    height: 130%;
    border-radius: 50%;
    background: 
        radial-gradient(circle at 20% 80%, rgba(135, 206, 250, 0.8) 0%, transparent 40%),
        radial-gradient(circle at 80% 20%, rgba(173, 216, 230, 0.6) 0%, transparent 40%);
    animation: iceShimmer 3s ease-in-out infinite;
}

@keyframes iceShimmer {
    0%, 100% { filter: brightness(1) blur(2px); }
    50% { filter: brightness(1.3) blur(3px); }
}

.avatar-effect-shadow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 130%;
    height: 130%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(88, 28, 135, 0.5) 0%, transparent 60%);
    animation: shadowPulse 3s ease-in-out infinite;
}

@keyframes shadowPulse {
    0%, 100% { box-shadow: inset 0 0 30px rgba(88, 28, 135, 0.5); }
    50% { box-shadow: inset 0 0 50px rgba(88, 28, 135, 0.8); }
}

.avatar-effect-heart {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 140%;
    height: 140%;
}

@keyframes heartFloat {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.8; }
    50% { transform: translateY(-15px) scale(1.3); opacity: 1; }
}

.avatar-effect-lightning {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 135%;
    height: 135%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 0, 0.2) 0%, transparent 50%);
    animation: lightningFlash 2s ease-in-out infinite;
}

@keyframes lightningFlash {
    0%, 90%, 100% { opacity: 0.3; }
    95% { opacity: 1; }
}

.avatar-effect-bubbles {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 140%;
    height: 140%;
}

@keyframes bubbleRise {
    0% { transform: translateY(0) scale(1); opacity: 0; }
    10% { opacity: 1; }
    100% { transform: translateY(-80px) scale(0.5); opacity: 0; }
}

.avatar-effect-confetti {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150%;
    height: 150%;
}

@keyframes confettiPop {
    0%, 100% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.3) rotate(-10deg); }
    75% { transform: scale(1.1) rotate(10deg); }
}

.avatar-effect-cyber {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 130%;
    height: 130%;
    border-radius: 50%;
    border: 2px solid rgba(0, 255, 255, 0.5);
    animation: cyberGlitch 0.3s ease-in-out infinite;
}

@keyframes cyberGlitch {
    0%, 100% { transform: translate(-50%, -50%) translate(0); }
    20% { transform: translate(-50%, -50%) translate(-2px, 2px); }
    40% { transform: translate(-50%, -50%) translate(2px, -2px); }
}

/* ===== DECORATION GRID STYLES (for avatar decorations) ===== */
.decoration-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 8px;
}

.decoration-grid .decoration-item {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px;
    background: var(--bg-tertiary);
    border: 2px solid var(--bg-quaternary);
    border-radius: var(--radius-md);
    transition: all 0.2s;
    min-height: 80px;
}

.decoration-grid .decoration-item:hover {
    border-color: var(--primary);
    transform: scale(1.02);
}

.decoration-grid .decoration-item.selected {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary);
    background: var(--bg-quaternary);
}

.decoration-grid .decoration-item span {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 4px;
    text-align: center;
}
    40% { transform: translate(-50%, -50%) translate(2px, -2px); }
}

/* ===== DECORATION GRID STYLES (for avatar decorations) ===== */
.decoration-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 8px;
}

.decoration-grid .decoration-item {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px;
    background: var(--bg-tertiary);
    border: 2px solid var(--bg-quaternary);
    border-radius: var(--radius-md);
    transition: all 0.2s;
    min-height: 80px;
}

.decoration-grid .decoration-item:hover {
    border-color: var(--primary);
    transform: scale(1.02);
}

.decoration-grid .decoration-item.selected {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary);
    background: var(--bg-quaternary);
}

.decoration-grid .decoration-item span {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 4px;
    text-align: center;
}

/* ===== THINKING CLOUD CUSTOM STATUS ===== */

/* Base thinking cloud styling */
.thinking-cloud-status {
    position: absolute;
    top: -32px;
    left: 16px; /* Align with avatar (avatars are typically 32-40px, centered in left area) */
    transform: translateX(0);
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--bg-tertiary);
    border-radius: 12px;
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
    max-width: 160px;
    overflow: hidden;
    z-index: 100; /* High enough to appear above status indicator but not above modals */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

.thinking-cloud-status .cloud-text {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}

.thinking-cloud-status .cloud-emoji {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Cloud tail (triangle pointer) */
.thinking-cloud-status::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 16px; /* Align with avatar center (roughly) */
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--bg-tertiary);
}

/* Show cloud on hover of parent container */
.dm-item:hover .thinking-cloud-status,
.friend-item:hover .thinking-cloud-status,
.member-item:hover .thinking-cloud-status,
.group-member-item:hover .thinking-cloud-status,
.online-user-item:hover .thinking-cloud-status {
    opacity: 1;
    visibility: visible;
    transform: translateY(-2px);
}

/* Cloud emoji */
.thinking-cloud-status .cloud-emoji {
    font-size: 14px;
    line-height: 1;
}

/* Cloud text */
.thinking-cloud-status .cloud-text {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Position containers relatively for absolute positioning of cloud */
.dm-item,
.friend-item,
.member-item,
.group-member-item,
.online-user-item {
    position: relative;
    overflow: visible; /* Allow cloud to show above */
}

/* Ensure DM list doesn't clip the clouds */
.dm-list {
    overflow: visible;
}

/* Profile card thinking cloud - Absolute position within header */
.profile-card-thinking-cloud {
    position: absolute;
    bottom: calc(100% + 12px); /* Position above avatar */
    left: 68px; /* Center on avatar (avatar is 88px wide, centered at 44px + 24px left margin) */
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: var(--bg-tertiary);
    border-radius: 16px;
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
    max-width: 240px;
    z-index: 100;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.profile-card-thinking-cloud::after {
    content: '';
    position: absolute;
    top: 100%; /* Point down from the cloud */
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--bg-tertiary);
}

.profile-card-thinking-cloud .cloud-emoji {
    font-size: 16px;
    flex-shrink: 0;
}

.profile-card-thinking-cloud .cloud-text {
    white-space: nowrap;
}

/* Profile view header */
.profile-view-header {
    position: relative;
    margin-bottom: 64px;
    overflow: visible;
}

/* Profile view avatar wrapper */
.profile-view-avatar-wrapper {
    position: absolute;
    bottom: -40px;
    left: 24px;
    width: 88px;
    height: 88px;
    z-index: 10;
}

/* User panel thinking cloud */
.user-panel-thinking-cloud {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--bg-tertiary);
    border-radius: 12px;
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.user-panel-thinking-cloud::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--bg-tertiary);
}

.user-panel-avatar-wrapper {
    position: relative;
}

/* Profile preview thinking cloud */
.profile-preview-thinking-cloud {
    position: absolute;
    top: -36px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: var(--bg-tertiary);
    border-radius: 16px;
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
    z-index: 100;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.profile-preview-thinking-cloud::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid var(--bg-tertiary);
}

/* Hover actions for custom status on own profile */
.custom-status-hover-actions {
    position: absolute;
    top: -28px;
    right: -40px;
    display: flex;
    gap: 4px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 101;
}

.profile-preview-thinking-cloud:hover .custom-status-hover-actions,
.user-panel-thinking-cloud:hover .custom-status-hover-actions {
    opacity: 1;
    visibility: visible;
}

.custom-status-action-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.custom-status-action-btn:hover {
    background: var(--primary);
    color: white;
    transform: scale(1.1);
}

.custom-status-action-btn .material-icons-round {
    font-size: 14px;
}

/* Pronouns next to username */
.profile-view-pronouns-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 8px;
}

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

/* Custom Status inline with pronouns */
.profile-view-custom-status-inline {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 2px 8px;
    background: var(--bg-tertiary);
    border-radius: 12px;
    font-size: 13px;
    color: var(--text-secondary);
    max-width: 200px;
}

.profile-view-custom-status-emoji {
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
}

.profile-view-custom-status-emoji img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    vertical-align: middle;
}

.profile-view-custom-status-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

/* Remove old pronouns section divider */
#viewPronounsDivider,
#viewPronounsSection {
    display: none !important;
}

/* Profile view tag row with inline pronouns */
.profile-view-tag-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

#viewTag {
    margin: 0;
}

/* Profile card thinking cloud specific styles */
.profile-card-thinking-cloud {
    opacity: 1;
    visibility: visible;
    animation: none;
}

.profile-view-avatar-wrapper:hover .profile-card-thinking-cloud .custom-status-hover-actions {
    opacity: 1;
    visibility: visible;
}

/* Ensure proper positioning context for member items */
.member-avatar-wrapper,
.group-member-avatar-wrapper,
.friend-avatar-wrapper {
    position: relative;
}
/* Profile Roles Section */
.profile-role-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.15s ease;
    max-width: 100%;
}

.profile-role-pill:hover {
    background: rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.1);
}

.profile-role-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.profile-role-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-role-icon {
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

/* Member Role Manager Modal Button Fix */
#memberRoleManagerModal .role-assign-item .btn {
    width: auto;
    flex-shrink: 0;
}

/* Role Icon Preset Buttons */
.role-preset-btn {
    transition: all 0.15s ease;
}

.role-preset-btn:hover {
    transform: scale(1.05);
    filter: brightness(1.2);
}

.role-preset-btn.selected {
    box-shadow: 0 0 0 2px var(--primary);
}

/* Role Icon Display next to username */
.role-icon-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-right: 4px;
    flex-shrink: 0;
}

.role-icon-inline img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.role-icon-inline .material-icons-round {
    font-size: 14px;
    color: inherit;
}

/* Section Drag and Drop */
.draggable-section {
    cursor: move;
}

.draggable-section .category {
    transition: background-color 0.2s;
}

.draggable-section .category:hover {
    background-color: var(--channel-hover);
    border-radius: 4px;
}

.dragging-section {
    opacity: 0.5;
}

.dragging-section .category {
    background-color: var(--primary);
    border-radius: 4px;
}

/* Section Actions */
.channel-section {
    position: relative;
}

.section-actions-hover {
    transition: opacity 0.15s ease;
    display: flex;
    gap: 4px;
}

.section-action-btn {
    opacity: 0.7;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}

.section-action-btn:hover {
    opacity: 1;
    background-color: var(--channel-active);
}

/* Always show section actions on touch devices */
@media (hover: none) {
    .section-actions-hover {
        opacity: 1 !important;
    }
}

/* Toggle Switch Styles */
.switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #72767D;
    transition: .2s;
    border-radius: 24px;
}

.switch-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .2s;
    border-radius: 50%;
}

.switch input:checked + .switch-slider {
    background-color: var(--primary);
}

.switch input:checked + .switch-slider:before {
    transform: translateX(20px);
}

.switch input:focus + .switch-slider {
    box-shadow: 0 0 1px var(--primary);
}

.switch input:disabled + .switch-slider {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===== MESSAGE REPLY FEATURE ===== */

/* Reply preview in input area */
.reply-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-tertiary);
    border-left: 3px solid var(--primary);
    padding: 8px 12px;
    margin: 0 16px 8px 16px;
    border-radius: 4px;
    animation: slideUp 0.2s ease;
}

.reply-preview-content {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.reply-icon {
    font-size: 18px;
    color: var(--primary);
    flex-shrink: 0;
}

.reply-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.reply-author {
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
}

.reply-text {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reply-cancel {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.reply-cancel:hover {
    background: rgba(237, 66, 69, 0.1);
    color: var(--danger);
}

/* Message reply indicator (Discord style) */
.message-reply-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
    margin-left: 56px;
    padding-left: 24px;
    position: relative;
    width: calc(100% - 56px);
}

.message-reply-indicator::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 50%;
    width: 12px;
    height: 10px;
    border-left: 2px solid var(--text-muted);
    border-top: 2px solid var(--text-muted);
    border-top-left-radius: 6px;
    transform: translateY(2px);
}

.reply-indicator-content {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.2s ease;
    padding: 2px 6px;
    border-radius: 4px;
}

.reply-indicator-content:hover {
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.05);
}

.reply-indicator-author {
    font-weight: 600;
    color: var(--primary);
}

.reply-indicator-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
}

/* ===== PINNED MESSAGES ===== */

/* Pinned message indicator in message header */
.pin-indicator {
    color: var(--accent);
    margin-left: 8px;
    display: inline-flex;
    align-items: center;
}

/* Pinned message styling */
.pinned-message {
    border-left: 3px solid var(--accent);
    padding-left: 9px;
}

/* Pinned messages bar at top of chat */
#pinnedMessagesBar {
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border);
    padding: 12px 16px;
    animation: slideDown 0.2s ease;
}

@keyframes slideDown {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Pinned message item in modal */
.pinned-message-item {
    padding: 12px;
    border-bottom: 1px solid var(--border);
    transition: background 0.2s;
}

.pinned-message-item:hover {
    background: rgba(255, 255, 255, 0.03);
}

.pinned-message-item:last-child {
    border-bottom: none;
}

/* Jump to message highlight animation */
@keyframes highlightMessage {
    0% { background: rgba(88, 101, 242, 0.3); }
    50% { background: rgba(88, 101, 242, 0.5); }
    100% { background: transparent; }
}

/* Reply highlight animation when jumping to message */
@keyframes replyHighlight {
    0% { background: rgba(88, 101, 242, 0.3); }
    50% { background: rgba(88, 101, 242, 0.5); }
    100% { background: transparent; }
}

.message.reply-highlight {
    animation: replyHighlight 2s ease;
    border-radius: 4px;
}

/* Compact mode adjustments */
.compact-messages .message-reply-indicator {
    margin-left: 0;
    display: inline-flex;
    margin-right: 8px;
}

.compact-messages .message-reply-indicator::before {
    display: none;
}


/* ===== MESSAGE REACTIONS ===== */

.message-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
    margin-left: 56px;
    align-items: center;
    width: calc(100% - 56px);
}

.reaction-bubble {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: var(--bg-tertiary);
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
    min-height: 24px;
}

.reaction-bubble:hover {
    background: var(--bg-quaternary);
    border-color: var(--bg-quaternary);
    transform: scale(1.05);
}

.reaction-bubble.reacted {
    background: rgba(88, 101, 242, 0.2);
    border-color: var(--primary);
}

.reaction-bubble.reacted:hover {
    background: rgba(88, 101, 242, 0.3);
}

.reaction-emoji {
    font-size: 16px;
    line-height: 1;
}

.reaction-count {
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 12px;
    min-width: 12px;
    text-align: center;
}

.reaction-bubble.reacted .reaction-count {
    color: var(--primary);
    font-weight: 600;
}

/* Quick reaction bar on message hover */
.message {
    position: relative;
}

.quick-reaction-bar {
    position: absolute;
    top: -12px;
    right: 16px;
    display: none;
    align-items: center;
    gap: 2px;
    padding: 4px;
    background: var(--bg-secondary);
    border: 1px solid var(--bg-tertiary);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    z-index: 5;
}

.message:hover .quick-reaction-bar {
    display: flex;
}

.quick-reaction-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.15s ease;
}

.quick-reaction-btn:hover {
    background: var(--bg-tertiary);
    transform: scale(1.1);
}

.quick-reaction-more {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.15s ease;
}

.quick-reaction-more:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.quick-reaction-more .material-icons-round {
    font-size: 16px;
}

/* Reaction tooltip showing users */
.reaction-bubble {
    position: relative;
}

.reaction-bubble:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 12px;
    background: var(--bg-quaternary);
    color: var(--text-primary);
    font-size: 12px;
    border-radius: 6px;
    white-space: nowrap;
    z-index: 1000;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    border: 1px solid var(--bg-tertiary);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reaction-bubble:hover::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--bg-quaternary);
    z-index: 1000;
    pointer-events: none;
}

/* Add reaction button in context menu */
.context-menu-item.add-reaction {
    color: var(--primary);
}

.context-menu-item.add-reaction:hover {
    background: rgba(88, 101, 242, 0.1);
}

/* Emoji picker for reactions */
.reaction-emoji-picker {
    position: fixed;
    z-index: 10000;
    background: var(--bg-secondary);
    border: 1px solid var(--bg-tertiary);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    padding: 8px;
    min-width: 280px;
    max-width: 320px;
}

.reaction-emoji-picker .emoji-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 4px 8px;
    border-bottom: 1px solid var(--bg-tertiary);
    margin-bottom: 8px;
}

.reaction-emoji-picker .emoji-picker-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.reaction-emoji-picker .emoji-picker-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.reaction-emoji-picker .emoji-picker-close:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.reaction-emoji-picker .emoji-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
    max-height: 200px;
    overflow-y: auto;
    padding: 4px;
}

.reaction-emoji-picker .emoji-grid-item {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s ease;
    background: transparent;
    border: none;
}

.reaction-emoji-picker .emoji-grid-item:hover {
    background: var(--bg-tertiary);
    transform: scale(1.1);
}

.reaction-emoji-picker .emoji-category-tabs {
    display: flex;
    gap: 4px;
    padding: 8px 4px 0;
    border-top: 1px solid var(--bg-tertiary);
    margin-top: 8px;
    overflow-x: auto;
}

.reaction-emoji-picker .emoji-category-tab {
    padding: 6px 10px;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.reaction-emoji-picker .emoji-category-tab:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.reaction-emoji-picker .emoji-category-tab.active {
    background: var(--primary);
    color: white;
}

/* Compact mode adjustments for reactions */
.compact-messages .message-reactions {
    margin-left: 0;
    margin-top: 2px;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .quick-reaction-bar {
        display: none !important;
    }
    
    .message-reactions {
        margin-left: 48px;
    }
    
    .reaction-bubble {
        padding: 3px 6px;
        min-height: 22px;
    }
    
    .reaction-emoji {
        font-size: 14px;
    }
    
    .reaction-count {
        font-size: 11px;
    }
}

/* Animation for new reactions */
@keyframes reactionPop {
    0% { transform: scale(0.5); opacity: 0; }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

.reaction-bubble.new {
    animation: reactionPop 0.3s ease;
}

/* Animation for reaction updates */
@keyframes reactionPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

.reaction-bubble.updated {
    animation: reactionPulse 0.2s ease;
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */

/* Pause animations when tab is not visible to save CPU/GPU for video playback */
body:not(:focus-within) .avatar-decoration,
body:not(:focus-within) .profile-effect,
body:not(:focus-within) .status-indicator {
    animation-play-state: paused !important;
}

/* Use contain for animated elements to isolate rendering */
.message,
.server-icon,
.dm-item,
.friend-item,
.avatar-with-decoration {
    contain: layout style;
}

/* Reduce paint areas for frequently updated elements */
.messages-container,
.members-list,
.channels-list {
    contain: layout;
}

/* Pause all CSS animations when page is hidden (user watching video in other tab) */
.hidden-tab * {
    animation-play-state: paused !important;
    transition: none !important;
}

/* ============================================
   STEAM CLIENT MODAL WINDOW
   ============================================ */

.steam-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 10, 15, 0.9);
    backdrop-filter: blur(10px);
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    animation: steamModalFadeIn 0.3s ease;
    overflow: hidden;
}

.steam-modal-overlay.active {
    display: flex;
}

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

.steam-modal-window {
    width: 1200px;
    height: 800px;
    max-width: 100vw;
    max-height: 100vh;
    background: #1b2838;
    border-radius: 12px;
    box-shadow: 0 0 40px rgba(102, 192, 244, 0.4), 0 0 80px rgba(102, 192, 244, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(102, 192, 244, 0.3);
    animation: steamModalScaleIn 0.3s ease;
    resize: both;
    min-width: 800px;
    min-height: 600px;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.steam-modal-window.maximized {
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    min-width: auto !important;
    min-height: auto !important;
    border-radius: 0 !important;
    resize: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    transform: none !important;
    margin: 0 !important;
}

.steam-modal-window.minimized {
    width: 200px !important;
    height: 60px !important;
    min-width: 200px !important;
    min-height: 60px !important;
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    top: auto !important;
    left: auto !important;
    transform: scale(0) !important;
    opacity: 0 !important;
    border-radius: 30px !important;
    overflow: hidden !important;
    resize: none !important;
    visibility: hidden !important;
}

/* Minimized Tab - Compact Draggable Version */
.aetheria-minimized-tab {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    background: transparent;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    z-index: 1000000;
    animation: aetheriaTabBounce 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: transform 0.2s ease;
    user-select: none;
}

.aetheria-minimized-tab:active {
    cursor: grabbing;
}

.aetheria-minimized-tab:hover {
    transform: scale(1.1);
}

.aetheria-minimized-tab.dragging {
    transition: none;
    opacity: 0.8;
}

.aetheria-minimized-tab::before {
    content: '';
    position: absolute;
    width: 56px;
    height: 56px;
    background: rgba(102, 192, 244, 0.15);
    border-radius: 50%;
    border: 2px solid rgba(102, 192, 244, 0.3);
    box-shadow: 0 0 20px rgba(102, 192, 244, 0.2);
    transition: all 0.3s ease;
}

.aetheria-minimized-tab:hover::before {
    background: rgba(102, 192, 244, 0.25);
    border-color: rgba(102, 192, 244, 0.5);
    box-shadow: 0 0 30px rgba(102, 192, 244, 0.4);
}

.aetheria-minimized-tab img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    position: relative;
    z-index: 1;
    object-fit: cover;
}

@keyframes aetheriaTabBounce {
    0% { transform: scale(0) translateY(100px); opacity: 0; }
    60% { transform: scale(1.1) translateY(-10px); opacity: 1; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

@keyframes steamModalScaleIn {
    from { 
        opacity: 0;
        transform: scale(0.9);
    }
    to { 
        opacity: 1;
        transform: scale(1);
    }
}

.steam-modal-window::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, rgba(102, 192, 244, 0.4), rgba(27, 40, 56, 0.1), rgba(102, 192, 244, 0.4));
    border-radius: 14px;
    z-index: -1;
    filter: blur(12px);
    animation: steamGlowPulse 3s ease-in-out infinite;
}

@keyframes steamGlowPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.8; }
}

.steam-modal-iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 12px;
}



/* ===== MENTION AUTOFILL POPUP ===== */
#mentionAutofillPopup {
    position: fixed !important;
    background: var(--bg-secondary) !important;
    border: 1px solid var(--bg-tertiary) !important;
    border-radius: 8px !important;
    padding: 8px !important;
    z-index: 10000 !important;
    max-height: 200px !important;
    overflow-y: auto !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
    min-width: 200px !important;
}

#mentionAutofillPopup::-webkit-scrollbar {
    width: 6px;
}

#mentionAutofillPopup::-webkit-scrollbar-track {
    background: transparent;
}

#mentionAutofillPopup::-webkit-scrollbar-thumb {
    background: var(--bg-tertiary);
    border-radius: 3px;
}

#mentionAutofillPopup::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

.mention-autofill-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.15s ease;
}

.mention-autofill-item:hover,
.mention-autofill-item.selected {
    background: var(--bg-tertiary);
}

.mention-autofill-item img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
}

.mention-autofill-item .mention-avatar-placeholder {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: white;
    flex-shrink: 0;
}

.mention-autofill-item .mention-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mention-autofill-item .mention-name {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mention-autofill-item .mention-username {
    color: var(--text-muted);
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== SERVER LIST LAYOUT FIXES ===== */
/* Ensure server list never shrinks or gets pushed */
.app-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

.server-list {
    flex: 0 0 72px;
    align-self: stretch;
}

/* Ensure content area doesn't overflow and push server list */
.content-area {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

/* When browser is very small, ensure minimum widths are respected */
@media screen and (max-width: 768px) {
    .app-container {
        min-width: 320px;
    }
}

/* ===== PROFILE CARD CUSTOMIZER - NEW ANIMATIONS & EFFECTS ===== */

/* Intro Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

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

@keyframes bounceIn {
    0% { opacity: 0; transform: scale(0.3); }
    50% { transform: scale(1.05); }
    70% { transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes flipIn {
    from { opacity: 0; transform: perspective(400px) rotateY(90deg); }
    to { opacity: 1; transform: perspective(400px) rotateY(0); }
}

@keyframes elasticIn {
    0% { opacity: 0; transform: scale(0); }
    50% { transform: scale(1.1); }
    70% { transform: scale(0.95); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes revealIn {
    from { 
        opacity: 0; 
        clip-path: inset(0 100% 0 0);
        transform: translateX(-20px);
    }
    to { 
        opacity: 1; 
        clip-path: inset(0 0 0 0);
        transform: translateX(0);
    }
}

/* Idle Animations */
@keyframes profileCardFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes profileCardBreathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

@keyframes profileCardWiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-2deg); }
    75% { transform: rotate(2deg); }
}

@keyframes profileCardPulseGlow {
    0%, 100% { box-shadow: 0 0 10px currentColor; }
    50% { box-shadow: 0 0 30px currentColor, 0 0 50px currentColor; }
}

.profile-card-idle-float {
    animation: profileCardFloat var(--idle-speed, 3s) ease-in-out infinite;
}

.profile-card-idle-breathe {
    animation: profileCardBreathe var(--idle-speed, 3s) ease-in-out infinite;
}

.profile-card-idle-wiggle {
    animation: profileCardWiggle var(--idle-speed, 3s) ease-in-out infinite;
}

.profile-card-idle-pulse-glow {
    animation: profileCardPulseGlow var(--idle-speed, 3s) ease-in-out infinite;
}

/* Parallax Effect */
.profile-card-idle-parallax {
    transform-style: preserve-3d;
    transition: transform 0.1s ease-out;
}

/* Border Animations */
@keyframes borderRotate {
    from { background-position: 0% 50%; }
    to { background-position: 200% 50%; }
}

@keyframes borderPulse {
    0%, 100% { border-width: var(--border-width, 2px); box-shadow: 0 0 0 0 currentColor; }
    50% { border-width: calc(var(--border-width, 2px) + 2px); box-shadow: 0 0 10px 2px currentColor; }
}

@keyframes borderShimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes borderRainbow {
    0% { border-color: #ff0000; box-shadow: 0 0 10px #ff0000; }
    16% { border-color: #ff8800; box-shadow: 0 0 10px #ff8800; }
    33% { border-color: #ffff00; box-shadow: 0 0 10px #ffff00; }
    50% { border-color: #00ff00; box-shadow: 0 0 10px #00ff00; }
    66% { border-color: #0088ff; box-shadow: 0 0 10px #0088ff; }
    83% { border-color: #8800ff; box-shadow: 0 0 10px #8800ff; }
    100% { border-color: #ff0000; box-shadow: 0 0 10px #ff0000; }
}

.profile-card-border-anim-rotate {
    position: relative;
}
.profile-card-border-anim-rotate::before {
    content: '';
    position: absolute;
    inset: -3px;
    background: linear-gradient(90deg, #ff0000, #ff8800, #ffff00, #00ff00, #0088ff, #8800ff, #ff0000);
    background-size: 200% 100%;
    border-radius: inherit;
    z-index: -1;
    animation: borderRotate var(--anim-speed, 3s) linear infinite;
}

.profile-card-border-anim-pulse {
    animation: borderPulse var(--anim-speed, 3s) ease-in-out infinite;
}

.profile-card-border-anim-shimmer {
    position: relative;
    overflow: hidden;
}
.profile-card-border-anim-shimmer::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    background-size: 200% 100%;
    animation: borderShimmer var(--anim-speed, 3s) linear infinite;
}

.profile-card-border-anim-rainbow {
    animation: borderRainbow var(--anim-speed, 3s) linear infinite;
}

/* Avatar Effects */
@keyframes avatarPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

@keyframes avatarSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes avatarBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes avatarRingPulse {
    0% { box-shadow: 0 0 0 0 currentColor; }
    70% { box-shadow: 0 0 0 15px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

@keyframes avatarShake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-3px); }
    20%, 40%, 60%, 80% { transform: translateX(3px); }
}

@keyframes avatarMorph {
    0%, 100% { border-radius: 50%; }
    25% { border-radius: 40% 60% 60% 40% / 60% 40% 60% 40%; }
    50% { border-radius: 30% 70% 70% 30% / 70% 30% 70% 30%; }
    75% { border-radius: 40% 60% 60% 40% / 60% 40% 60% 40%; }
}

/* Particle Effects Container */
.profile-card-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

/* Sparkle Particles */
@keyframes sparkleAnim {
    0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
    50% { opacity: 1; transform: scale(1) rotate(180deg); }
}

.profile-card-particles-sparkle::before,
.profile-card-particles-sparkle::after {
    content: '✦';
    position: absolute;
    color: inherit;
    font-size: 14px;
    animation: sparkleAnim 2s ease-in-out infinite;
}
.profile-card-particles-sparkle::before {
    top: 20%;
    left: 20%;
    animation-delay: 0s;
}
.profile-card-particles-sparkle::after {
    top: 60%;
    right: 25%;
    animation-delay: 1s;
}

/* Snow Particles */
@keyframes snowFall {
    0% { transform: translateY(-20px) rotate(0deg); opacity: 1; }
    100% { transform: translateY(100px) rotate(360deg); opacity: 0; }
}

.profile-card-particles-snow::before,
.profile-card-particles-snow::after {
    content: '❄';
    position: absolute;
    color: inherit;
    font-size: 12px;
    animation: snowFall 3s linear infinite;
}
.profile-card-particles-snow::before {
    top: 0;
    left: 30%;
    animation-delay: 0s;
}
.profile-card-particles-snow::after {
    top: 0;
    right: 40%;
    animation-delay: 1.5s;
}

/* Fireflies Particles */
@keyframes fireflyFloat {
    0%, 100% { transform: translate(0, 0); opacity: 0.3; }
    25% { transform: translate(20px, -20px); opacity: 1; }
    50% { transform: translate(40px, 0); opacity: 0.5; }
    75% { transform: translate(20px, 20px); opacity: 1; }
}

.profile-card-particles-fireflies::before,
.profile-card-particles-fireflies::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    background: currentColor;
    border-radius: 50%;
    box-shadow: 0 0 10px currentColor;
    animation: fireflyFloat 4s ease-in-out infinite;
}
.profile-card-particles-fireflies::before {
    top: 50%;
    left: 20%;
    animation-delay: 0s;
}
.profile-card-particles-fireflies::after {
    top: 60%;
    right: 30%;
    animation-delay: 2s;
}

/* Stars Particles */
@keyframes starTwinkle {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
}

.profile-card-particles-stars::before,
.profile-card-particles-stars::after {
    content: '★';
    position: absolute;
    color: inherit;
    font-size: 10px;
    animation: starTwinkle 1.5s ease-in-out infinite;
}
.profile-card-particles-stars::before {
    top: 15%;
    left: 25%;
    animation-delay: 0s;
}
.profile-card-particles-stars::after {
    top: 70%;
    right: 20%;
    animation-delay: 0.75s;
}

/* Hearts Particles */
@keyframes heartFloat {
    0% { transform: translateY(0) scale(1); opacity: 1; }
    100% { transform: translateY(-50px) scale(0.5); opacity: 0; }
}

.profile-card-particles-hearts::before,
.profile-card-particles-hearts::after {
    content: '♥';
    position: absolute;
    color: inherit;
    font-size: 14px;
    animation: heartFloat 2s ease-out infinite;
}
.profile-card-particles-hearts::before {
    bottom: 20%;
    left: 30%;
    animation-delay: 0s;
}
.profile-card-particles-hearts::after {
    bottom: 30%;
    right: 35%;
    animation-delay: 1s;
}

/* Bubbles Particles */
@keyframes bubbleRise {
    0% { transform: translateY(100%) scale(0.5); opacity: 0; }
    10% { opacity: 1; }
    100% { transform: translateY(-20%) scale(1); opacity: 0; }
}

.profile-card-particles-bubbles::before,
.profile-card-particles-bubbles::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border: 2px solid currentColor;
    border-radius: 50%;
    background: transparent;
    animation: bubbleRise 3s ease-in infinite;
}
.profile-card-particles-bubbles::before {
    bottom: 0;
    left: 40%;
    animation-delay: 0s;
}
.profile-card-particles-bubbles::after {
    bottom: 0;
    right: 45%;
    animation-delay: 1.5s;
}

/* Confetti Particles */
@keyframes confettiFall {
    0% { transform: translateY(-20px) rotate(0deg); opacity: 1; }
    100% { transform: translateY(100px) rotate(720deg); opacity: 0; }
}

.profile-card-particles-confetti::before,
.profile-card-particles-confetti::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background: currentColor;
    animation: confettiFall 2.5s linear infinite;
}
.profile-card-particles-confetti::before {
    top: 0;
    left: 35%;
    animation-delay: 0s;
    background: #ff0000;
}
.profile-card-particles-confetti::after {
    top: 0;
    right: 40%;
    animation-delay: 1.25s;
    background: #00ff00;
}

/* Rain Particles */
@keyframes rainFall {
    0% { transform: translateY(-20px); opacity: 1; }
    100% { transform: translateY(100px); opacity: 0; }
}

.profile-card-particles-rain::before,
.profile-card-particles-rain::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 15px;
    background: linear-gradient(to bottom, transparent, currentColor);
    animation: rainFall 0.8s linear infinite;
}
.profile-card-particles-rain::before {
    top: 0;
    left: 30%;
    animation-delay: 0s;
}
.profile-card-particles-rain::after {
    top: 0;
    right: 50%;
    animation-delay: 0.4s;
}

/* Profile Card Customizer Modal Styles */
.profile-card-customizer-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--bg-secondary);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    max-width: 600px;
    width: 90%;
    max-height: 85vh;
    z-index: 100001;
    pointer-events: auto;
}

#profileCardCustomizerOverlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100000;
    display: none !important;
    pointer-events: none !important;
}

/* Ensure customizer modal content is always clickable */
.profile-card-customizer-modal {
    pointer-events: auto !important;
}

.profile-card-customizer-modal * {
    pointer-events: auto !important;
}

.profile-card-customizer-modal .modal-content {
    pointer-events: auto !important;
}

.profile-card-customizer-modal .profile-card-customizer-form {
    pointer-events: auto !important;
}

.profile-card-customizer-modal input,
.profile-card-customizer-modal select,
.profile-card-customizer-modal button,
.profile-card-customizer-modal textarea {
    pointer-events: auto !important;
    position: relative;
    z-index: 100002;
}

/* Ensure modal footer is always clickable */
.profile-card-customizer-modal .modal-footer {
    pointer-events: auto !important;
    position: relative;
    z-index: 100003;
}

.profile-card-customizer-modal .modal-footer .btn {
    pointer-events: auto !important;
    position: relative;
    z-index: 100004;
    cursor: pointer !important;
}

.profile-card-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 8px;
    overflow-x: auto;
    scrollbar-width: none;
}

.profile-card-tabs::-webkit-scrollbar {
    display: none;
}

.profile-card-tab {
    padding: 8px 16px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.profile-card-tab:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.profile-card-tab.active {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.profile-card-preview-wrapper {
    margin-bottom: 24px;
    padding: 16px;
    background: var(--bg-tertiary);
    border-radius: 12px;
}

.profile-card-preview {
    max-width: 360px;
    margin: 0 auto;
}

/* Customizer Input Groups */
.profile-card-tab-content .input-group {
    margin-bottom: 16px;
}

.profile-card-tab-content .input-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    color: var(--text-secondary);
}

.profile-card-tab-content .input-group input[type="color"] {
    width: 50px;
    height: 36px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    background: transparent;
}

.profile-card-tab-content .input-group select,
.profile-card-tab-content .input-group input[type="text"],
.profile-card-tab-content .input-group input[type="number"] {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
}

.profile-card-tab-content .input-group input[type="range"] {
    width: 100%;
    margin-top: 4px;
}

.profile-card-tab-content .toggle-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.profile-card-tab-content .toggle-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

/* Color picker wrapper */
.color-picker-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
}

.color-picker-wrapper span {
    font-family: monospace;
    color: var(--text-muted);
    font-size: 14px;
}

/* Divider in effects tab */
#profileCardTab-effects hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 20px 0;
}

/* ===== PROFILE CARD FIXES AND ENHANCED ANIMATIONS ===== */

/* RGB Border Animation */
@keyframes rgbBorderCycle {
    0% { border-color: #ff0000; box-shadow: 0 0 10px #ff0000; }
    16.66% { border-color: #ff8800; box-shadow: 0 0 10px #ff8800; }
    33.33% { border-color: #ffff00; box-shadow: 0 0 10px #ffff00; }
    50% { border-color: #00ff00; box-shadow: 0 0 10px #00ff00; }
    66.66% { border-color: #0088ff; box-shadow: 0 0 10px #0088ff; }
    83.33% { border-color: #8800ff; box-shadow: 0 0 10px #8800ff; }
    100% { border-color: #ff0000; box-shadow: 0 0 10px #ff0000; }
}

.profile-card-border-rgb {
    animation: rgbBorderCycle 3s linear infinite;
}

/* Fixed Idle Animations with CSS Variables */
.profile-card-idle-float {
    animation: profileCardFloat var(--idle-speed, 3s) ease-in-out infinite;
}

.profile-card-idle-breathe {
    animation: profileCardBreathe var(--idle-speed, 3s) ease-in-out infinite;
}

.profile-card-idle-wiggle {
    animation: profileCardWiggle var(--idle-speed, 3s) ease-in-out infinite;
}

.profile-card-idle-pulse-glow {
    animation: profileCardPulseGlow var(--idle-speed, 3s) ease-in-out infinite;
}

.profile-card-idle-parallax {
    transform-style: preserve-3d;
    transition: transform 0.1s ease-out;
}

/* Avatar Effects - Fixed and New */
.profile-card-avatar-glow {
    transition: box-shadow 0.3s ease;
}

.profile-card-avatar-pulse {
    animation: avatarPulse 2s ease-in-out infinite;
}

.profile-card-avatar-spin {
    animation: avatarSpin 3s linear infinite;
}

.profile-card-avatar-bounce {
    animation: avatarBounce 1s ease-in-out infinite;
}

.profile-card-avatar-ring {
    position: relative;
}
.profile-card-avatar-ring::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid var(--ring-color, #5865F2);
    animation: avatarRingPulse 2s ease-out infinite;
}

.profile-card-avatar-shake {
    animation: avatarShake 0.5s ease-in-out infinite;
}

.profile-card-avatar-morph {
    animation: avatarMorph 4s ease-in-out infinite;
}

/* Dynamic Particles Container */
.profile-card-particles-container {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

/* Particle Base Styles */
.particle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
}

/* Sparkle Particles */
@keyframes sparkleFloat {
    0% { opacity: 0; transform: scale(0) rotate(0deg); }
    20% { opacity: 1; transform: scale(1) rotate(45deg); }
    40% { opacity: 0.5; transform: scale(0.8) rotate(90deg); }
    60% { opacity: 1; transform: scale(1.2) rotate(135deg); }
    80% { opacity: 0.5; transform: scale(0.9) rotate(180deg); }
    100% { opacity: 0; transform: scale(0) rotate(225deg); }
}

.profile-card-particles-sparkle .particle {
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    animation: sparkleFloat 3s ease-in-out infinite;
}

/* Snow Particles */
@keyframes snowFall {
    0% { transform: translateY(-10px) translateX(0) rotate(0deg); opacity: 1; }
    25% { transform: translateY(25%) translateX(10px) rotate(90deg); }
    50% { transform: translateY(50%) translateX(-10px) rotate(180deg); }
    75% { transform: translateY(75%) translateX(10px) rotate(270deg); }
    100% { transform: translateY(110%) translateX(0) rotate(360deg); opacity: 0; }
}

.profile-card-particles-snow .particle {
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    animation: snowFall 4s linear infinite;
}

/* Rain Particles */
@keyframes rainDrop {
    0% { transform: translateY(-10px); opacity: 1; }
    100% { transform: translateY(110%); opacity: 0; }
}

.profile-card-particles-rain .particle {
    width: 2px !important;
    height: 12px !important;
    border-radius: 2px;
    animation: rainDrop 0.8s linear infinite;
}

/* Fireflies Particles */
@keyframes fireflyMove {
    0%, 100% { 
        opacity: 0.3; 
        transform: translate(0, 0) scale(1); 
    }
    25% { 
        opacity: 1; 
        transform: translate(30px, -30px) scale(1.2); 
    }
    50% { 
        opacity: 0.6; 
        transform: translate(-20px, -50px) scale(0.8); 
    }
    75% { 
        opacity: 1; 
        transform: translate(40px, -20px) scale(1.1); 
    }
}

.profile-card-particles-fireflies .particle {
    box-shadow: 0 0 10px currentColor, 0 0 20px currentColor;
    animation: fireflyMove 5s ease-in-out infinite;
}

/* Stars Particles */
@keyframes starTwinkle {
    0%, 100% { opacity: 0.2; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); }
}

.profile-card-particles-stars .particle {
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    animation: starTwinkle 2s ease-in-out infinite;
}

/* Bubbles Particles */
@keyframes bubbleRise {
    0% { 
        transform: translateY(100%) scale(0.5); 
        opacity: 0; 
    }
    10% { 
        opacity: 0.8; 
    }
    50% {
        transform: translateY(50%) scale(1) translateX(20px);
    }
    100% { 
        transform: translateY(-20%) scale(1.2) translateX(-10px); 
        opacity: 0; 
    }
}

.profile-card-particles-bubbles .particle {
    border: 2px solid currentColor;
    background: transparent !important;
    animation: bubbleRise 4s ease-in infinite;
}

/* Confetti Particles */
@keyframes confettiFall {
    0% { 
        transform: translateY(-10px) rotate(0deg); 
        opacity: 1; 
    }
    100% { 
        transform: translateY(110%) rotate(720deg); 
        opacity: 0; 
    }
}

.profile-card-particles-confetti .particle {
    animation: confettiFall 3s linear infinite;
}

/* Hearts Particles */
@keyframes heartFloatUp {
    0% { 
        transform: translateY(0) scale(0.5); 
        opacity: 0; 
    }
    20% { 
        opacity: 1; 
        transform: translateY(-20px) scale(1); 
    }
    100% { 
        transform: translateY(-100px) scale(0.8); 
        opacity: 0; 
    }
}

.profile-card-particles-hearts .particle {
    clip-path: path('M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z');
    animation: heartFloatUp 3s ease-out infinite;
}

/* Enhanced Border Animation Styles */
.profile-card-border-anim-rotate {
    position: relative;
}
.profile-card-border-anim-rotate::before {
    content: '';
    position: absolute;
    inset: calc(0px - var(--border-width, 2px));
    border-radius: inherit;
    padding: var(--border-width, 2px);
    background: linear-gradient(90deg, #ff0000, #ff8800, #ffff00, #00ff00, #0088ff, #8800ff, #ff0000);
    background-size: 200% 100%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: borderRotate var(--anim-speed, 3s) linear infinite;
}

.profile-card-border-anim-pulse {
    animation: borderPulse var(--anim-speed, 3s) ease-in-out infinite;
}

.profile-card-border-anim-shimmer {
    position: relative;
    overflow: hidden;
}
.profile-card-border-anim-shimmer::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    background-size: 200% 100%;
    animation: borderShimmer var(--anim-speed, 3s) linear infinite;
}

.profile-card-border-anim-rainbow {
    animation: borderRainbow var(--anim-speed, 3s) linear infinite;
}

/* Profile Card Layout Fix for Side-by-Side Preview */
.profile-card-customizer-layout {
    display: flex;
    gap: 24px;
    height: 100%;
}

.profile-card-customizer-form {
    flex: 1;
    min-width: 0;
}

.profile-card-customizer-preview-panel {
    width: 380px;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    height: fit-content;
}

.profile-card-real-preview {
    background: var(--bg-tertiary);
    border-radius: 16px;
    padding: 20px;
}

.profile-card-real-preview .modal {
    position: relative;
    transform: none;
    top: auto;
    left: auto;
    max-width: 100%;
    width: 100%;
}

/* Responsive adjustments */
@media (max-width: 900px) {
    .profile-card-customizer-layout {
        flex-direction: column;
    }
    
    .profile-card-customizer-preview-panel {
        width: 100%;
        position: relative;
    }
}

/* Modal sizing fix */
.profile-card-customizer-modal {
    max-width: 900px;
    width: 95%;
}

.profile-card-customizer-modal .modal-content {
    display: flex;
    flex-direction: column;
}

/* Apply to actual profile view modal */
.profile-view-modal .profile-card-particles-container {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.profile-view-modal .profile-view-avatar {
    position: relative;
    z-index: 1;
}

/* ===== MINI PROFILE CARD CUSTOMIZATION SUPPORT ===== */

/* Ensure mini profile card can have custom backgrounds */
.mini-profile-card {
    position: relative;
    overflow: hidden;
}

.mini-profile-theme-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.mini-profile-banner {
    position: relative;
    height: 80px;
    overflow: hidden;
}

/* Mini profile avatar effects support */
.mini-profile-avatar-wrapper {
    position: relative;
    z-index: 1;
}

.mini-profile-avatar {
    position: relative;
    z-index: 2;
}

/* Ensure particles display correctly in mini profile */
.mini-profile-card .profile-card-particles-container {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

/* Mini profile idle animations */
.mini-profile-card.profile-card-idle-float {
    animation: profileCardFloat var(--idle-speed, 3s) ease-in-out infinite;
}

.mini-profile-card.profile-card-idle-breathe {
    animation: profileCardBreathe var(--idle-speed, 3s) ease-in-out infinite;
}

.mini-profile-card.profile-card-idle-wiggle {
    animation: profileCardWiggle var(--idle-speed, 3s) ease-in-out infinite;
}

.mini-profile-card.profile-card-idle-pulse-glow {
    animation: profileCardPulseGlow var(--idle-speed, 3s) ease-in-out infinite;
}

/* Mini profile border animations */
.mini-profile-card.profile-card-border-rgb {
    animation: rgbBorderCycle 3s linear infinite;
}

.mini-profile-card.profile-card-border-anim-rotate::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    padding: 3px;
    background: linear-gradient(90deg, #ff0000, #ff8800, #ffff00, #00ff00, #0088ff, #8800ff, #ff0000);
    background-size: 200% 100%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: borderRotate var(--anim-speed, 3s) linear infinite;
    z-index: -1;
}

/* Mini profile section backgrounds */
.mini-profile-card .mini-profile-section {
    transition: all 0.3s ease;
}

/* Fix click handling for customizer modal */
.profile-card-customizer-modal {
    z-index: 100001 !important;
}

.profile-card-customizer-modal .modal-content {
    z-index: 100002 !important;
}

.profile-card-customizer-form {
    z-index: 100003 !important;
}

/* Overlay is disabled - using modal's own backdrop instead */
#profileCardCustomizerOverlay {
    display: none !important;
    pointer-events: none !important;
}

/* Fix for form elements inside customizer */
.profile-card-customizer-modal input,
.profile-card-customizer-modal select,
.profile-card-customizer-modal button,
.profile-card-customizer-modal textarea {
    position: relative;
    z-index: 100004 !important;
}

/* Preview panel styling */
.profile-card-customizer-preview-panel {
    position: sticky;
    top: 0;
    z-index: 1;
}

.profile-card-real-preview {
    background: var(--bg-tertiary);
    border-radius: 16px;
    padding: 20px;
    max-height: 500px;
    overflow: hidden;
}