:root {
    --bg-primary: #080808;
    --bg-secondary: #0d0d0d;
    --bg-tertiary: #121212;
    --border-color: rgba(255, 255, 255, 0.04);
    --border-color-active: rgba(255, 255, 255, 0.12);
    
    /* Цветовая палитра бабблов (монохром премиум) */
    --bubble-own: #e2e2e2;
    --bubble-own-text: #080808;
    --bubble-partner: #171717;
    --bubble-partner-text: #dfdfdf;
    
    /* Текстовые цвета с улучшенной контрастностью */
    --text-primary: #f5f5f5;
    --text-secondary: #a2a2a2;
    --text-muted: #646464;
    
    /* Шрифты */
    --font-sans: 'Outfit', sans-serif;
    --font-serif: 'Lora', serif;
    --font-mono: 'Fira Mono', monospace;
    
    /* Унифицированные радиусы скруглений (Design Consistency) */
    --radius-sm: 8px;     /* Мелкие кнопки, бейджи */
    --radius-md: 12px;    /* Стандартные кнопки, карточки элементов */
    --radius-lg: 16px;    /* Крупные карточки, поля ввода */
    --radius-xl: 20px;    /* Модальные окна, плавающие панели (было 20px-24px, фиксируем 20px для консистентности) */
    --radius-round: 50%;  /* Аватарки, круглые кнопки */

    /* Унифицированные отступы (Padding & Margin) */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    
    /* Эффекты стекла (Glassmorphism) */
    --glass-bg: rgba(10, 10, 10, 0.96);
    --glass-blur: blur(30px) saturate(1.2);
    
    --transition-smooth: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}

html {
    overscroll-behavior: none; /* Prevent rubber-banding on iOS/Android */
    overflow: hidden; /* Prevent page-level scrollbars */
}

body {
    background-color: #040404;
    background-image: radial-gradient(circle at 50% 50%, #101010 0%, #040404 100%);
    color: var(--text-primary);
    font-family: var(--font-sans);
    height: 100vh;
    height: 100dvh; /* Use dynamic viewport height for mobile browsers */
    overflow: hidden !important;
    position: fixed; /* Prevent bouncy scrolling on iOS */
    width: 100%;
    margin: 0;
    padding: 0;
    overscroll-behavior-y: none;
}

.empty-state-panel {
    width: min(100%, 360px);
    min-height: 180px;
    margin: auto;
    padding: 26px 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    color: var(--text-secondary);
}

.empty-state-panel .empty-state-mark {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.16);
    color: #fff;
    font-size: 24px;
    line-height: 1;
}

.empty-state-panel h3 {
    margin: 4px 0 0;
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 600;
    color: var(--text-primary);
}

.empty-state-panel p {
    max-width: 280px;
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-muted);
}

.empty-state-btn {
    margin-top: 8px;
    height: 38px;
    padding: 0 18px;
    border-radius: 10px;
    border: 1px solid #fff;
    background: #fff;
    color: #000;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.18s ease;
}

.empty-state-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(255,255,255,0.14);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LAYOUT SYSTEM & VIEW PANELS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.app-container {
    display: flex;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    position: relative;
    overflow: hidden;
}

@media (min-width: 1025px) {
    body, .app-container {
        min-width: 318px;
        min-height: 777px;
    }
    body {
        position: static;
        overflow: auto; /* Only allow global scroll on desktop if window is too small */
    }
}

.view-panel {
    position: absolute;
    top: 0;
    left: 88px;
    width: calc(100% - 88px);
    height: 100%;
    display: flex;
    opacity: 1;
    transform: scale(1);
    visibility: visible;
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), 
                visibility 0.25s,
                left 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.view-panel.panel-hidden {
    opacity: 0;
    transform: scale(0.985);
    visibility: hidden;
    pointer-events: none;
}

/* 1. Глобальный сайдбар */
.global-sidebar {
    width: 72px;
    background: rgba(8, 8, 8, 0.6) !important;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
    justify-content: space-between;
    flex-shrink: 0;
    margin: var(--spacing-md) 0 16px 16px;
    height: calc(100% - 32px);
    border-radius: var(--radius-xl);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                margin 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.logo-nav-area {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 14px;
    border: 1px solid transparent;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-smooth);
    margin-bottom: 24px;
}

.logo-nav-area:hover {
    background: rgba(255, 255, 255, 0.02);
    border-color: var(--border-color);
}

.logo-nav-area.active {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--border-color-active);
}

.logo-icon {
    position: absolute;
    width: 24px;
    height: 24px;
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.45s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.25s,
                filter 0.25s;
}

/* Настройки активного/неактивного состояния для сердца */
.logo-nav-area.active #logo-icon-heart {
    opacity: 1 !important;
    transform: scale(1) rotate(0deg) !important;
    pointer-events: auto;
    color: #ffffff;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.45));
}
.logo-nav-area:not(.active) #logo-icon-heart {
    opacity: 0 !important;
    transform: scale(0.6) rotate(-20deg) !important;
    pointer-events: none;
}

/* Настройки активного/неактивного состояния для баббла */
.logo-nav-area.active #logo-icon-bubble {
    opacity: 0 !important;
    transform: scale(0.6) rotate(20deg) !important;
    pointer-events: none;
}
.logo-nav-area:not(.active) #logo-icon-bubble {
    opacity: 1 !important;
    transform: scale(1) rotate(0deg) !important;
    pointer-events: auto;
    color: var(--text-secondary);
}

#nav-chats {
    display: none;
}

/* Эффекты наведения */
.logo-nav-area:hover #logo-icon-heart {
    color: #ffffff;
    filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.5));
    transform: scale(1.08) rotate(5deg) !important;
}

.logo-nav-area:hover #logo-icon-bubble {
    color: #ffffff;
    filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.35));
    transform: scale(1.08) rotate(-5deg) !important;
}

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

@keyframes heartAlert {
    from { transform: scale(1); opacity: 0.8; }
    to { transform: scale(1.15); opacity: 1; }
}

.global-nav {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-grow: 0;
    flex-shrink: 0;
    width: 100%;
    align-items: center;
    margin-top: 16px;
}

.nav-btn {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: var(--transition-smooth);
}

.nav-btn svg {
    width: 24px;
    height: 24px;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--border-color);
    border-radius: 40% 60% 70% 30% / 50% 60% 40% 50% !important;
}

.nav-btn:hover svg {
    transform: scale(1.1) rotate(8deg);
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.3));
}

.nav-btn.active {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--border-color-active);
    border-radius: 12px !important;
}

/* Пульсирующий бадж уведомлений */
.pulse-badge-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    min-width: 14px;
    height: 14px;
    background-color: #ffffff;
    color: #000000;
    border-radius: var(--radius-sm);
    border: 1px solid var(--bg-primary);
    display: none;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 8.5px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
    box-sizing: border-box;
}
.pulse-badge-dot.visible {
    display: flex;
}

#mobile-more-badge {
    min-width: 8px !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background-color: #ffffff !important;
    top: 10px !important;
    right: 10px !important;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.7) !important;
}
#mobile-more-badge.visible {
    display: block !important;
}

.sidebar-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    width: 100%;
    flex-shrink: 0;
}

.user-avatar-btn {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-round);
    background: #151515;
    border: 1px solid var(--border-color-active);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.avatar-letter {
    font-family: var(--font-sans) !important;
    font-size: 14px;
    font-weight: 600;
    font-style: normal !important;
    text-transform: uppercase !important;
    color: var(--text-primary);
}

.user-avatar-btn:hover {
    border-color: var(--text-primary);
    transform: translateY(-2px);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   2. САЙДБАРЫ (Conversations, Channels, Hub, Settings)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.conversations-sidebar,
.channels-sidebar,
.friends-sidebar,
.hub-sidebar,
.settings-sidebar-nav,
.notifications-sidebar {
    width: 300px;
    background-color: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.sidebar-header {
    height: 64px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-color);
}

.sidebar-title {
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 400;
    font-style: italic;
    letter-spacing: -0.5px;
}

.compose-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-smooth);
    padding: 6px;
    border-radius: 6px;
}

.compose-btn svg {
    width: 18px;
    height: 18px;
}

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

.search-box {
    padding: 12px 18px;
}

.search-box input {
    width: 100%;
    height: 36px;
    background-color: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 0 12px;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 14px;
    outline: none;
    transition: var(--transition-smooth);
}

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

.search-box input:focus {
    border-color: var(--border-color-active);
    background-color: rgba(0, 0, 0, 0.4);
}

/* Список бесед */
.conversations-list {
    flex-grow: 1;
    overflow-y: auto;
    padding: 6px 10px;
}

.conversation-item {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition-smooth);
    margin-bottom: 4px;
    border: 1px solid transparent;
}

.conversation-item:hover {
    background: rgba(255, 255, 255, 0.02);
}

.conversation-item.active {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--border-color);
}

.conv-avatar {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-round);
    background: #141414;
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans) !important;
    font-weight: 600;
    font-style: normal !important;
    text-transform: uppercase !important;
    margin-right: 12px;
    position: relative;
    flex-shrink: 0;
    user-select: none;
}

.online-dot {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 9px;
    height: 9px;
    border-radius: var(--radius-round);
    background-color: #ffffff;
    border: 1.8px solid var(--bg-secondary);
}

.conv-meta {
    flex-grow: 1;
    min-width: 0;
}

.conv-title-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 2px;
}

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

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

.conv-last-msg {
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.unread-indicator {
    width: 6px;
    height: 6px;
    background-color: var(--text-primary);
    border-radius: var(--radius-round);
    margin-left: 8px;
    flex-shrink: 0;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   3. ЧАТ ЗОНА (Chat Area, Messages)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.chat-area {
    flex-grow: 1;
    background-color: var(--bg-tertiary);
    display: flex;
    flex-direction: column;
    min-width: 0;
    position: relative;
}

.chat-header {
    height: 64px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    background-color: rgba(13, 13, 13, 0.35);
    backdrop-filter: blur(12px);
    flex-shrink: 0;
}

.chat-partner-info {
    display: flex;
    align-items: center;
}

.partner-avatar {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-round);
    background: #181818;
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans) !important;
    font-weight: 600;
    font-style: normal !important;
    text-transform: uppercase !important;
    margin-right: 12px;
    user-select: none;
}

.partner-meta {
    display: flex;
    flex-direction: column;
}

.partner-name {
    font-size: 15px;
    font-weight: 500;
}

.partner-status {
    font-size: 11.5px;
    color: var(--text-secondary);
}

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

.action-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-smooth);
    border: 1px solid transparent;
}

.action-btn svg {
    width: 18px;
    height: 18px;
}

.action-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.02);
    border-color: var(--border-color);
}

.action-btn.active {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
}

/* Лента сообщений */
.chat-feed {
    flex-grow: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--spacing-lg);
    padding-bottom: 110px !important;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* Прижимаем сообщения к низу, когда их мало (как в мессенджерах),
   через margin-top:auto на первом элементе — это НЕ ломает скролл,
   в отличие от justify-content: flex-end. */
.chat-feed > :first-child { margin-top: auto; }
.chat-feed > .message-group { flex: 0 0 auto; }

.message-group {
    display: flex;
    flex-direction: row;
    gap: 12px;
    margin-bottom: 20px;
    max-width: 85%;
}

.message-group.own {
    align-self: flex-end !important;
    margin-left: auto !important;
    flex-direction: row-reverse !important;
}

.message-group.partner {
    align-self: flex-start !important;
    margin-right: auto !important;
}

.message-group-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.message-group.own .message-group-content {
    align-items: flex-end;
}

.message-group.partner .message-group-content {
    align-items: flex-start;
}

.message-bubble-wrap {
    display: flex;
    flex-direction: column;
}

.message-group.own .message-bubble-wrap {
    align-items: flex-end;
}

.message-bubble {
    font-size: 14.5px;
    line-height: 1.6;
    word-break: break-word;
    color: var(--text-primary);
    padding: 10px 14px;
    border-radius: var(--radius-md);
    width: fit-content;
}

.own .message-bubble {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px 4px 12px 12px;
}

.partner .message-bubble {
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.02);
    border-radius: 4px 12px 12px 12px;
}

.msg-sender-avatar.wabi-avatar.chat-avatar-clickable {
    cursor: pointer;
    width: 38px;
    height: 38px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.05);
}

.message-meta {
    font-size: 12.5px;
    color: var(--text-muted);
    margin-top: 5px;
    user-select: none;
    font-family: var(--font-serif);
    font-style: italic;
}

/* Анимация печатания */
.typing-row {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    padding: 10px 16px;
    border-radius: 4px 12px 12px 12px;
    width: fit-content;
    align-self: flex-start;
    margin-left: 48px;
    margin-bottom: 20px;
}

.typing-dot {
    width: 6px;
    height: 6px;
    background-color: var(--text-muted);
    border-radius: var(--radius-round);
    opacity: 0.4;
    animation: typingBounce 1.4s infinite ease-in-out both;
}

.typing-dot:nth-child(1) {
    animation-delay: -0.32s;
}

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

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

/* Поле ввода сообщения - Парящая капсула */
.chat-input-area {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px 24px !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    z-index: 10;
    pointer-events: none; /* Let scroll/clicks pass through padding area */
}

.message-input-form {
    display: flex;
    align-items: center;
    background: rgba(13, 13, 13, 0.5) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    padding: var(--spacing-sm) 16px !important;
    gap: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2) !important;
    transition: var(--transition-smooth);
    pointer-events: auto !important; /* Re-enable clicks/interaction for the input form */
}

.message-input-form:focus-within {
    border-color: rgba(255, 255, 255, 0.2) !important;
    background: rgba(20, 20, 20, 0.7) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

.message-input-form input {
    flex-grow: 1;
    min-width: 0 !important;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 14.5px;
    outline: none;
    height: 32px;
    padding: 0 4px;
}

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

.input-controls-left {
    display: flex;
    gap: var(--spacing-sm);
    flex-shrink: 0 !important;
}

.input-control-btn, .send-btn, .voice-btn {
    background: transparent !important;
    border: none !important;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.2s;
    padding: 0;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.input-control-btn svg, .send-btn svg, .voice-btn svg {
    width: 20px;
    height: 20px;
}

.input-control-btn:hover, .send-btn:hover, .voice-btn:hover {
    color: var(--text-primary);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ПРЕДСТАВЛЕНИЕ: СЕРВЕРЫ И КАНАЛЫ (view-servers)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.servers-sidebar-column {
    width: 72px;
    background-color: var(--bg-primary);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-lg) 0;
    gap: 20px;
    flex-shrink: 0;
    position: relative;
}

/* Vertical connection line for nodes */
.servers-sidebar-column::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    background: linear-gradient(to bottom, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.08) 15%, 
        rgba(255, 255, 255, 0.08) 85%, 
        rgba(255, 255, 255, 0) 100%
    );
    z-index: 0;
    pointer-events: none;
}

.server-circle {
    position: relative;
    z-index: 2;
    background-color: var(--bg-secondary);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* Assign unique organic blob shape and size to each server node */
.server-circle[data-id="love-community"] {
    width: 48px;
    height: 48px;
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    font-size: 15px;
    transform: rotate(-3deg);
}

.server-circle[data-id="music-lounge"] {
    width: 44px;
    height: 44px;
    border-radius: 40% 60% 70% 30% / 50% 60% 40% 50%;
    font-size: 14px;
    transform: translateX(-3px) rotate(4deg);
}

.server-circle[data-id="gaming-zone"] {
    width: 50px;
    height: 50px;
    border-radius: 50% 50% 30% 70% / 60% 40% 60% 40%;
    font-size: 16px;
    transform: translateX(2px) rotate(-2deg);
}

.add-server-btn {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-round);
    border: 1px dashed rgba(255, 255, 255, 0.15);
    font-size: 18px;
    font-weight: 300;
    background: transparent;
    color: var(--text-muted);
    transform: scale(0.95);
}

/* Hover effects: morphing shape into a refined organic pill/squircle */
.server-circle:hover {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.1);
}

.server-circle[data-id="love-community"]:hover {
    border-radius: 40% 60% 50% 50% / 50% 50% 50% 50%;
    transform: scale(1.06) rotate(3deg);
}

.server-circle[data-id="music-lounge"]:hover {
    border-radius: 50% 50% 40% 60% / 60% 40% 60% 40%;
    transform: translateX(-3px) scale(1.08) rotate(-4deg);
}

.server-circle[data-id="gaming-zone"]:hover {
    border-radius: 45% 55% 45% 55% / 55% 45% 55% 45%;
    transform: translateX(2px) scale(1.05) rotate(5deg);
}

.add-server-btn:hover {
    color: #ffffff;
    border-color: #ffffff;
    border-style: solid;
    transform: scale(1.02);
}

/* Active states: glowing soft white aura and balanced shape */
.server-circle.active {
    background-color: #ffffff;
    color: #000000;
    border-color: #ffffff;
    font-weight: 600;
    font-style: normal;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.25);
}

.server-circle[data-id="love-community"].active {
    border-radius: 14px 18px 12px 16px;
    transform: scale(1.05) rotate(0deg);
}

.server-circle[data-id="music-lounge"].active {
    border-radius: 16px 12px 18px 14px;
    transform: translateX(-3px) scale(1.05) rotate(0deg);
}

.server-circle[data-id="gaming-zone"].active {
    border-radius: 12px 14px 16px 18px;
    transform: translateX(2px) scale(1.05) rotate(0deg);
}

.sidebar-server-title {
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 500;
}

.channels-list-container {
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.channel-category-title {
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 1.5px;
    padding: var(--spacing-md) 12px 6px 12px;
    user-select: none;
    opacity: 0.7;
}

.channel-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    margin: 3px 0;
    border-radius: 8px 4px 4px 8px;
    font-size: 13.5px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    border-left: 2px solid transparent;
}

.channel-item.active {
    background-color: rgba(255, 255, 255, 0.04);
    color: #ffffff;
    border-left: 2px solid #ffffff;
    border-radius: 8px 14px 10px 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.channel-item:hover {
    background-color: rgba(255, 255, 255, 0.02);
    color: #ffffff;
    border-left: 2px solid rgba(255, 255, 255, 0.3);
}

.channel-prefix {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 500;
    margin-right: 10px;
    color: var(--text-muted);
    transition: var(--transition-smooth);
    display: inline-block;
    width: 12px;
    text-align: center;
}

.channel-item:hover .channel-prefix,
.channel-item.active .channel-prefix {
    color: #ffffff;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ПРЕДСТАВЛЕНИЕ: ДРУЗЬЯ (view-friends)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.friends-filter-nav {
    display: flex;
    flex-direction: row;
    padding: 0;
    gap: var(--spacing-xs);
}

.filter-tab {
    text-align: center;
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.35);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
}

.filter-tab.active {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    border: none;
    box-shadow: none;
}

.filter-tab:hover:not(.active) {
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.03);
}

.add-friend-tab {
    border: 1px dashed rgba(255,255,255,0.15);
    color: rgba(255, 255, 255, 0.4);
    background: transparent;
}

.add-friend-tab:hover {
    border-style: solid;
    background: rgba(255,255,255,0.06);
    color: #ffffff;
}

.add-friend-tab.active {
    border-color: rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.1);
    color: #ffffff;
}

.friends-main-panel {
    flex-grow: 1;
    background-color: var(--bg-tertiary);
    display: flex;
    flex-direction: column;
    padding: var(--spacing-lg);
    overflow-y: auto;
}

.friends-header {
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 12px;
}

.friends-count-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-secondary);
}

.friends-list-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.friend-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    transition: var(--transition-smooth);
}

.friend-card:hover {
    border-color: var(--border-color-active);
}

.friend-info-left {
    display: flex;
    align-items: center;
}

.friend-avatar {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-round);
    background-color: #161616;
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans) !important;
    font-weight: 600;
    font-style: normal !important;
    text-transform: uppercase !important;
    margin-right: 14px;
    position: relative;
}

.friend-name-col {
    display: flex;
    flex-direction: column;
}

.friend-status-text {
    font-size: 12px;
    color: var(--text-secondary);
}

.friend-actions-right {
    display: flex;
    gap: var(--spacing-sm);
}

/* Форма добавления друга */
.add-friend-form-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    max-width: 500px;
}

.add-friend-form-card h3 {
    margin-bottom: 8px;
    font-size: 16px;
}

.add-friend-input-row {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

.add-friend-input-row input {
    flex-grow: 1;
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 0 14px;
    color: var(--text-primary);
    font-family: var(--font-sans);
    outline: none;
    height: 40px;
}

.submit-action-btn {
    background-color: var(--text-primary);
    color: var(--bg-primary);
    border: none;
    border-radius: var(--radius-sm);
    padding: 0 18px;
    font-family: var(--font-sans);
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.submit-action-btn:hover {
    background-color: #ffffff;
    transform: translateY(-1px);
}

/* ── Модалка создания сферы/комнаты ── */
.create-space-type-selector {
    display: flex;
    gap: 10px;
}

.create-space-type-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: all 0.2s ease;
    touch-action: manipulation;
}

.create-space-type-btn svg {
    width: 28px;
    height: 28px;
}

.create-space-type-btn span {
    font-size: 14px;
    font-weight: 600;
}

.create-space-type-btn small {
    font-size: 10px;
    opacity: 0.5;
}

.create-space-type-btn:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.7);
}

.create-space-type-btn.active {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.3);
    color: #fff;
}

/* Поле имени новой сферы: плавный wabi-sabi focus */
#create-space-name {
    transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
#create-space-name::placeholder {
    color: rgba(255,255,255,0.35);
}
#create-space-name:focus {
    border-color: rgba(255,255,255,0.4) !important;
    background: rgba(255,255,255,0.08) !important;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.06);
}

/* ── Единый стиль кнопок в шапке Love Hub ── */
.hub-header-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.hub-btn {
    height: 40px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1;
    border-radius: var(--radius-md);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
}
.hub-btn:hover { transform: translateY(-1px); }
.hub-btn-primary {
    background: #ffffff;
    color: #000;
    border: 1px solid #ffffff;
}
.hub-btn-primary:hover { box-shadow: 0 4px 16px rgba(255,255,255,0.18); }
.hub-btn-ghost {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.hub-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
}

/* ── Кастомный select в формах Hub ── */
.hub-field-label {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    margin: 6px 2px 2px;
    letter-spacing: 0.3px;
}
.hub-select { position: relative; width: 100%; }
.hub-select-btn {
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: #fff;
    font-family: var(--font-sans);
    font-size: 13.5px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.hub-select-btn:hover { background: rgba(255, 255, 255, 0.08); }
.hub-select-btn svg { width: 16px; height: 16px; opacity: 0.6; transition: transform 0.25s ease; }
.hub-select.open .hub-select-btn { border-color: rgba(255, 255, 255, 0.35); }
.hub-select.open .hub-select-btn svg { transform: rotate(180deg); }

.hub-select-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: rgba(20, 20, 22, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 50;
}
.hub-select.open .hub-select-menu { opacity: 1; transform: translateY(0); pointer-events: auto; }
.hub-select-menu li {
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 13.5px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.hub-select-menu li:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.hub-select-menu li.selected { background: rgba(255, 255, 255, 0.05); color: #fff; }

/* ── Инфо-модалка (Правила / Roadmap) ── */
.hub-info-body { color: var(--text-secondary); font-size: 14px; line-height: 1.65; }
.hub-info-lead { color: var(--text-primary); font-size: 15px; margin: 0 0 18px; }
.hub-info-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 12px; }
.hub-info-list li { padding-left: 4px; }
.hub-info-list strong, .hub-roadmap-item strong { color: var(--text-primary); }
.hub-info-note {
    margin: 20px 0 0;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    font-size: 13px;
    color: var(--text-muted);
}
.hub-roadmap { display: flex; flex-direction: column; gap: 12px; }
.hub-roadmap-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
}
.hub-roadmap-item p { margin: 4px 0 0; font-size: 13px; color: var(--text-muted); }
.hub-roadmap-badge {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 9px;
    border-radius: 7px;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text-secondary);
}
.hub-roadmap-item.done .hub-roadmap-badge { background: #fff; color: #000; border-color: #fff; }
.hub-roadmap-item.progress .hub-roadmap-badge { color: #fff; border-color: rgba(255,255,255,0.4); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ПРЕДСТАВЛЕНИЕ: LOVE HUB (view-hub)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.hub-nav {
    display: flex;
    flex-direction: column;
    padding: 12px 10px;
    gap: var(--spacing-xs);
}

.hub-tab {
    text-align: left;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: 14px;
    cursor: pointer;
    transition: var(--transition-smooth);
}

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

.hub-tab:hover {
    color: var(--text-primary);
}

.hub-content-panel {
    flex-grow: 1;
    background-color: var(--bg-tertiary);
    padding: var(--spacing-lg);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.hub-pane {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    max-width: 1000px;
    width: 100%;
    align-content: start;
}

.hub-pane.hidden {
    display: none !important;
}

.hub-pane > .global-update,
.hub-pane > .submit-bug-card {
    grid-column: 1 / -1;
}

.hub-card {
    background: linear-gradient(160deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-xl);
    padding: var(--spacing-lg);
    position: relative;
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.hub-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-xl);
    padding: 1px;
    background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0) 40%, rgba(255,255,255,0.05));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.hub-card:hover {
    transform: translateY(-4px) scale(1.01);
    border-color: rgba(255,255,255,0.15);
    box-shadow: 0 12px 30px rgba(0,0,0,0.4), 0 0 20px rgba(255,255,255,0.02);
}

.hub-card.global-update {
    background: linear-gradient(160deg, rgba(162, 59, 255, 0.08) 0%, rgba(255, 59, 143, 0.02) 100%);
    border-color: rgba(162, 59, 255, 0.3);
}

.hub-card.global-update::before {
    background: linear-gradient(135deg, rgba(162,59,255,0.5), rgba(255,255,255,0) 50%, rgba(255,59,143,0.3));
}

.hub-card-badge {
    position: absolute;
    top: 24px;
    right: 24px;
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.05);
}

.hub-card.global-update .hub-card-badge {
    background: linear-gradient(90deg, #a23bff, #ff3b8f);
    border: none;
    box-shadow: 0 4px 15px rgba(162, 59, 255, 0.3);
}

.hub-card h3 {
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 4px;
}

.hub-card-date {
    font-size: 11px;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.hub-card p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-top: 12px;
}

.hub-card-footer {
    margin-top: 16px;
    border-top: 1px solid var(--border-color);
    padding-top: 12px;
}

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

.submit-bug-card {
    background: linear-gradient(160deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-xl);
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.submit-bug-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-xl);
    padding: 1px;
    background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0) 40%, rgba(255,255,255,0.05));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.submit-bug-card input,
.submit-bug-card textarea {
    background-color: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    color: var(--text-primary);
    font-family: var(--font-sans);
    outline: none;
}

.submit-bug-card textarea {
    height: 80px;
    resize: none;
}

.bug-tag {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 9px;
    font-weight: 600;
    padding: 3px 6px;
    border-radius: 4px;
}

.bug-tag.high {
    background-color: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.bug-status {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 12px;
    font-weight: 500;
}

.nav-btn {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-btn:active {
    transform: scale(0.95);
}

.nav-btn:active svg,
.logo-nav-area:active svg {
    transform: translateY(2.5px) scale(0.9);
    transition: transform 0.1s ease;
}

.nav-btn svg {
    width: 24px;
    height: 24px;
}

.wabi-avatar {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-round);
    object-fit: cover;
}

.idea-item {
    display: flex;
    gap: 20px;
}

.vote-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    width: 48px;
    height: 72px;
    flex-shrink: 0;
}

.vote-arrow {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 14px;
}

.vote-arrow:hover {
    color: var(--text-primary);
}

.vote-count {
    font-size: 13px;
    font-weight: 500;
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-mono);
}
.vote-count svg { width: 14px; height: 14px; }

.idea-content {
    flex-grow: 1;
}

.idea-status-tag {
    display: inline-block;
    font-size: 11px;
    margin-top: 12px;
    padding: 3px 6px;
    border-radius: 4px;
}

.idea-status-tag.planned {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ПРЕДСТАВЛЕНИЕ: ГОЛОСОВАЯ СЕТКА (view-voice)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.voice-channel-panel {
    flex-grow: 1;
    background-color: var(--bg-tertiary);
    display: flex;
    flex-direction: column;
}

.voice-header-bar {
    height: 64px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    background-color: rgba(13, 13, 13, 0.35);
}

.voice-status-indicator {
    width: 8px;
    height: 8px;
    background-color: #ffffff;
    border-radius: var(--radius-round);
    display: inline-block;
    margin-right: 10px;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}

.voice-channel-info {
    display: flex;
    align-items: center;
}

.voice-controls-row {
    display: flex;
    gap: var(--spacing-sm);
}

.voice-control-btn-circle {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-round);
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-smooth);
}

.voice-control-btn-circle.active {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    border-color: var(--border-color-active);
}

.voice-control-btn-circle:hover {
    color: var(--text-primary);
    background-color: rgba(255, 255, 255, 0.02);
}

.voice-control-btn-circle svg {
    width: 16px;
    height: 16px;
}

.voice-grid-layout {
    flex-grow: 1;
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    gap: 16px;
    overflow-y: auto;
}

.screenshare-card {
    flex-grow: 1;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 250px;
    position: relative;
    overflow: hidden;
}

.screenshare-video-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    color: var(--text-secondary);
}

.pulse-icon {
    width: 48px;
    height: 48px;
    animation: iconPulse 2s infinite ease-in-out;
}

@keyframes iconPulse {
    0%, 100% { transform: scale(0.95); opacity: 0.5; }
    50% { transform: scale(1.05); opacity: 1; }
}

.theater-mode-btn {
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: var(--spacing-sm) 16px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 13px;
    transition: var(--transition-smooth);
}

.theater-mode-btn:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

.voice-participants-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 22px 28px;
    padding: 8px 0;
}

.voice-member-card {
    width: 110px;
    background: none;
    border: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    position: relative;
}

/* Орб-аватар в комнатном войсе */
.voice-member-avatar {
    position: relative;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: linear-gradient(150deg, #1a1a1a, #0e0e0e);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
    font-size: 28px;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}

.voice-member-card:hover .voice-member-avatar {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.22);
}

/* Говорящий — аура + свечение */
.voice-member-card.speaking .voice-member-avatar {
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.08);
    animation: speakingPulse 1.5s ease-in-out infinite;
}

.voice-member-card.speaking .voice-member-avatar::before,
.voice-member-card.speaking .voice-member-avatar::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    animation: voiceWave 2s ease-out infinite;
    pointer-events: none;
}

.voice-member-card.speaking .voice-member-avatar::after {
    animation-delay: 0.8s;
}

.voice-member-card.speaking .voice-member-avatar::before,
.voice-member-card.speaking .voice-member-avatar::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.45);
    animation: voiceAura 2.4s cubic-bezier(0.16, 1, 0.3, 1) infinite;
    pointer-events: none;
}
.voice-member-card.speaking .voice-member-avatar::after {
    animation-delay: 1.2s;
    border-color: rgba(255, 255, 255, 0.25);
}

.voice-member-card .voice-member-name {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
}
.voice-member-card.speaking .voice-member-name { color: #fff; font-weight: 600; }

/* Волна-индикатор в комнатном войсе позиционируется на орбе */
.voice-member-card .speaking-wave {
    position: absolute;
    top: 54px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(8, 8, 8, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 99px;
    padding: 4px 7px;
    margin: 0;
    z-index: 2;
}

.muted-tag {
    font-size: 10px;
    color: var(--text-secondary);
    margin-top: 4px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 1px 4px;
    border-radius: 3px;
    background-color: rgba(255, 255, 255, 0.02);
}

.speaking-wave {
    display: flex;
    gap: 3px;
    margin-top: 6px;
}

.speaking-wave span {
    width: 3px;
    height: 8px;
    background-color: #ffffff;
    animation: waveBounce 0.8s infinite ease-in-out alternate;
}

.speaking-wave span:nth-child(2) { animation-delay: 0.15s; }
.speaking-wave span:nth-child(3) { animation-delay: 0.3s; }

@keyframes waveBounce {
    from { height: 4px; }
    to { height: 12px; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ПРЕДСТАВЛЕНИЕ: УВЕДОМЛЕНИЯ (view-notifications)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.notifications-main-panel {
    flex-grow: 1;
    background-color: var(--bg-tertiary);
    padding: var(--spacing-lg);
    overflow-y: auto;
}

.notif-actions-top {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--spacing-md);
}

.notif-action-text-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-smooth);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
}

.notif-action-text-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.04);
}
/* NOTE: Outdated notification feed and card styles removed. Clean, modern, responsive glassmorphic cards are declared and styled at the bottom under TERMINAL LIST section. */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ПРЕДСТАВЛЕНИЕ: НАСТРОЙКИ (view-settings)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ПРЕДСТАВЛЕНИЕ: НАСТРОЙКИ (view-settings)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

:root {
    --settings-sidebar-width: 250px;
    --settings-card-bg: rgba(255, 255, 255, 0.015);
    --settings-card-border: rgba(255, 255, 255, 0.04);
    --settings-card-hover: rgba(255, 255, 255, 0.03);
    --settings-danger: #ff5252;
    --settings-danger-bg: rgba(255, 82, 82, 0.05);
    --settings-danger-border: rgba(255, 82, 82, 0.15);
    --settings-success: #00e676;
    --settings-accent: #ffffff;
}

.settings-fullscreen {
    display: flex;
    width: 100%;
    height: 100%;
    background-color: var(--bg-primary);
    overflow: hidden;
}

/* Сайдбар */
.settings-sidebar {
    width: var(--settings-sidebar-width);
    min-width: var(--settings-sidebar-width);
    background-color: #070707;
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    padding: 30px 16px;
    overflow-y: auto;
}

.settings-sidebar-header {
    margin-bottom: 24px;
    padding: 0 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.settings-sidebar-header h2 {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 500;
    color: var(--text-primary);
    letter-spacing: -0.5px;
}

.s-esc-hint {
    font-size: 11px;
    font-family: var(--font-mono);
    color: var(--text-muted);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}

.settings-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.settings-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: 14px;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-align: left;
    transition: var(--transition-smooth);
}

.settings-nav-item svg {
    width: 18px;
    height: 18px;
    color: var(--text-muted);
    transition: var(--transition-smooth);
}

.settings-nav-item:hover {
    color: var(--text-primary);
    background-color: var(--settings-card-hover);
}

.settings-nav-item:hover svg {
    color: var(--text-primary);
}

.settings-nav-item.active {
    color: var(--text-primary);
    background-color: rgba(255, 255, 255, 0.05);
    font-weight: 500;
}

.settings-nav-item.active svg {
    color: var(--text-primary);
}

/* Рабочая область контента */
.settings-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--bg-primary);
}

.settings-mobile-header {
    display: none;
    padding: 16px;
    background-color: #070707;
    border-bottom: 1px solid var(--border-color);
}

.settings-back-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 15px;
    cursor: pointer;
    font-weight: 500;
}

.settings-back-btn svg {
    width: 18px;
    height: 18px;
}

.settings-content-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 40px 60px;
    scroll-behavior: smooth;
}

/* Секции */
.settings-section {
    display: none;
    animation: settingsFadeIn 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    max-width: 800px;
    margin: 0 auto;
}

.settings-section.active {
    display: block;
}

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

.s-section-header {
    margin-bottom: 32px;
}

.s-section-header h2 {
    font-family: var(--font-serif);
    font-size: 28px;
    font-weight: 400;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.s-section-desc {
    color: var(--text-secondary);
    font-size: 14.5px;
}

/* Группирующие карточки */
.s-card {
    background: var(--settings-card-bg);
    border: 1px solid var(--settings-card-border);
    border-radius: var(--radius-lg);
    padding: 24px;
    margin-bottom: 24px;
    backdrop-filter: blur(10px);
}

.s-card--danger {
    border: 1px solid var(--settings-danger-border);
    background: var(--settings-danger-bg);
}

.s-section-subtitle {
    font-family: var(--font-serif);
    font-size: 18px;
    color: var(--text-primary);
    margin-bottom: 20px;
}

.s-divider {
    height: 1px;
    background-color: var(--border-color);
    margin: 20px 0;
}

/* Элементы форм */
.s-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.s-form-group:last-child {
    margin-bottom: 0;
}

.s-label {
    font-size: 11px;
    font-family: var(--font-sans);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-secondary);
    font-weight: 500;
}

.s-input {
    width: 100%;
    height: 42px;
    background-color: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-md);
    padding: 0 16px;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 14.5px;
    transition: var(--transition-smooth);
    outline: none;
}

.s-input:focus {
    border-color: rgba(255, 255, 255, 0.2);
    background-color: rgba(255, 255, 255, 0.03);
}

textarea.s-input {
    height: 100px;
    padding: 12px 16px;
    resize: none;
}

.s-input-prefix-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.s-input-prefix {
    position: absolute;
    left: 16px;
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-size: 14.5px;
}

.s-input-prefix-wrapper .s-input {
    padding-left: 32px;
}

.s-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.s-char-counter {
    font-size: 11px;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.s-select {
    width: 100%;
    height: 42px;
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-md);
    padding: 0 16px;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 14px;
    outline: none;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 14px;
    transition: var(--transition-smooth);
}

.s-select:focus {
    border-color: rgba(255, 255, 255, 0.2);
}

.s-select--compact {
    width: auto;
    min-width: 180px;
    height: 36px;
    padding-right: 36px;
    background-position: right 12px center;
    font-size: 13.5px;
}

/* Кнопки */
.s-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 20px;
    background-color: #ffffff;
    color: #000000;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition-smooth);
}

.s-btn:hover {
    background-color: #e5e5e5;
    transform: translateY(-0.5px);
}

.s-btn:active {
    transform: scale(0.98);
}

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

.s-btn--ghost:hover {
    background-color: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.2);
}

.s-btn--danger {
    background-color: var(--settings-danger);
    color: #ffffff;
}

.s-btn--danger:hover {
    background-color: #ff3333;
}

.s-btn--sm {
    height: 32px;
    padding: 0 12px;
    font-size: 12.5px;
    border-radius: var(--radius-sm);
}

/* Ряды настроек */
.s-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

.s-row-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.s-row-title {
    font-size: 14.5px;
    font-weight: 500;
    color: var(--text-primary);
}

.s-row-desc {
    font-size: 12.5px;
    color: var(--text-secondary);
}

/* Переключатель */
.s-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    gap: 24px;
}

.s-toggle-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.s-toggle-title {
    font-size: 14.5px;
    font-weight: 500;
    color: var(--text-primary);
}

.s-toggle-desc {
    font-size: 12.5px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.s-switch {
    position: relative;
    width: 42px;
    height: 22px;
    min-width: 42px;
}

.s-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.s-switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 34px;
}

.s-switch-slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: var(--text-muted);
    transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 50%;
}

.s-switch input:checked + .s-switch-slider {
    background-color: #ffffff;
    border-color: #ffffff;
}

.s-switch input:checked + .s-switch-slider:before {
    transform: translateX(20px);
    background-color: #000000;
}

/* Слайдер */
.s-slider-wrapper {
    display: flex;
    align-items: center;
    gap: 16px;
}

.s-slider {
    -webkit-appearance: none;
    width: 180px;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    outline: none;
    transition: background 0.3s;
}

.s-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffffff;
    cursor: pointer;
    transition: transform 0.1s;
}

.s-slider::-webkit-slider-thumb:hover {
    transform: scale(1.25);
}

.s-slider-value {
    font-size: 13.5px;
    font-family: var(--font-mono);
    color: var(--text-primary);
    min-width: 40px;
    text-align: right;
}

/* Секция 1: Профиль (Лейаут и Live Preview) */
.s-profile-layout {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.s-profile-form {
    flex: 1;
}

.s-profile-preview-column {
    width: 300px;
    position: sticky;
    top: 0;
}

.s-profile-preview-column .s-label {
    display: block;
    margin-bottom: 12px;
}

.s-avatar-upload-group {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
}

.s-avatar-preview-wrapper {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background-color: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.s-avatar-preview-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.s-avatar-preview-wrapper .avatar-letter {
    font-family: var(--font-serif);
    font-size: 28px;
    color: var(--text-primary);
}

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

/* Карточка превью профиля (Cozy Wabi-Sabi) */
.s-preview-card {
    background: rgba(10, 10, 10, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(20px);
}

.s-profile-preview {
    width: 100%;
}

.s-preview-banner {
    height: 60px;
    background-color: #141414;
    background-image: linear-gradient(45deg, #111 25%, transparent 25%), 
                      linear-gradient(-45deg, #111 25%, transparent 25%), 
                      linear-gradient(45deg, transparent 75%, #111 75%), 
                      linear-gradient(-45deg, transparent 75%, #111 75%);
    background-size: 10px 10px;
    background-position: 0 0, 0 5px, 5px -5px, -5px 0;
}

.s-preview-avatar-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0 20px;
    margin-top: -30px;
    margin-bottom: 12px;
}

.s-preview-avatar {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background-color: #222;
    border: 3px solid #080808;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.s-preview-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.s-preview-avatar .avatar-letter {
    font-family: var(--font-serif);
    font-size: 24px;
    color: var(--text-primary);
}

.s-preview-status-badge {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #43a047;
    border: 2.5px solid #080808;
    margin-bottom: 4px;
}

.s-preview-info {
    padding: 0 20px 20px 20px;
}

.s-preview-info h3 {
    font-size: 18px;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.s-preview-username {
    font-size: 13px;
    color: var(--text-muted);
    font-family: var(--font-sans);
    margin-bottom: 12px;
}

.s-preview-status-text {
    font-size: 13px;
    color: var(--text-secondary);
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 6px;
    margin-bottom: 16px;
}

.s-preview-divider {
    height: 1px;
    background-color: rgba(255, 255, 255, 0.05);
    margin-bottom: 16px;
}

.s-preview-bio-title {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-bottom: 6px;
    font-weight: 600;
}

.s-preview-bio {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Секция 2: Аккаунт */
.s-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.s-info-value {
    display: block;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary);
    margin-top: 4px;
}

.s-link {
    color: var(--text-primary);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.s-link:hover {
    color: #ffffff;
}

/* Секция 3: Внешний вид (Theme Selection Grid) */
.s-theme-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.s-theme-option {
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-md);
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.s-theme-option:hover {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
}

.s-theme-option.active {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.03);
}

.s-theme-option span {
    font-size: 13.5px;
    color: var(--text-secondary);
    font-weight: 500;
}

.s-theme-option.active span {
    color: var(--text-primary);
}

.s-theme-preview {
    width: 100%;
    height: 70px;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    padding: 8px;
    gap: 6px;
}

.s-theme-preview--dark {
    background-color: #080808;
}

.s-theme-preview--light {
    background-color: #f5f5f5;
    border-color: rgba(0, 0, 0, 0.1);
}

.s-theme-preview--system {
    background: linear-gradient(135deg, #080808 50%, #f5f5f5 50%);
}

.s-theme-bubble {
    width: 60%;
    height: 18px;
    border-radius: 4px;
}

.s-theme-bubble--partner {
    background-color: rgba(255, 255, 255, 0.05);
    align-self: flex-start;
}

.s-theme-preview--light .s-theme-bubble--partner {
    background-color: rgba(0, 0, 0, 0.05);
}

.s-theme-bubble--own {
    background-color: rgba(255, 255, 255, 0.8);
    width: 50%;
    align-self: flex-end;
}

.s-theme-preview--light .s-theme-bubble--own {
    background-color: rgba(0, 0, 0, 0.8);
}

/* Секция 4: Уведомления */
.s-notif-preview {
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-md);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 12px;
}

.s-notif-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-serif);
    color: var(--text-primary);
    font-weight: 500;
}

.s-notif-body {
    flex: 1;
}

.s-notif-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.s-notif-text {
    font-size: 12.5px;
    color: var(--text-secondary);
}

/* Секция 5: Голос и Аудио */
.s-mic-meter-container {
    width: 100%;
    height: 8px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    overflow: hidden;
}

.s-mic-meter-fill {
    height: 100%;
    background: linear-gradient(to right, #666, #fff);
    transition: width 0.05s ease-out;
}

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

.s-radio-option {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-md);
    cursor: pointer;
    background: rgba(255, 255, 255, 0.005);
    transition: var(--transition-smooth);
}

.s-radio-option:hover {
    background: rgba(255, 255, 255, 0.02);
}

.s-radio-option input[type="radio"] {
    margin-top: 4px;
    cursor: pointer;
}

.s-radio-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.s-radio-title {
    font-size: 14.5px;
    font-weight: 500;
    color: var(--text-primary);
}

.s-radio-desc {
    font-size: 12.5px;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Секция 7: Love Hub */
.s-subscription-info {
    padding: 16px;
    border-radius: var(--radius-md);
    background-color: rgba(255, 255, 255, 0.01);
    border: 1px solid rgba(255, 255, 255, 0.03);
}

.s-sub-badge {
    display: inline-flex;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    color: #000000;
    background-color: #ffffff;
    border-radius: 40px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Секция 8: Обновления */
.s-updates-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.s-update-card {
    margin-bottom: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.s-update-version {
    font-size: 24px;
    font-family: var(--font-mono);
    font-weight: 500;
    color: var(--text-primary);
}

.s-update-status {
    font-size: 18px;
    font-weight: 500;
}

.s-update-status.text-success {
    color: var(--settings-success);
}

.s-changelog-item {
    padding-left: 4px;
}

.s-changelog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.s-changelog-ver {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 14.5px;
    color: var(--text-primary);
}

.s-changelog-date {
    font-size: 12px;
    color: var(--text-muted);
}

.s-changelog-list {
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.s-changelog-list li {
    font-size: 13.5px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Секция 9: Расширенные */
.s-warning-banner {
    display: flex;
    gap: 16px;
    padding: 16px;
    background-color: rgba(255, 171, 0, 0.05);
    border: 1px solid rgba(255, 171, 0, 0.15);
    border-radius: var(--radius-lg);
    align-items: flex-start;
}

.s-warning-icon {
    width: 20px;
    height: 20px;
    color: #ffab00;
    min-width: 20px;
    margin-top: 2px;
}

.s-warning-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.s-warning-title {
    font-size: 14px;
    font-weight: 600;
    color: #ffab00;
}

.s-warning-desc {
    font-size: 12.5px;
    color: var(--text-secondary);
    line-height: 1.45;
}

/* Секция 10: О приложении */
.s-about-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 24px;
}

.s-about-logo-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.s-about-logo {
    width: 60px;
    height: 60px;
    color: var(--text-primary);
    animation: heartPulse 2.5s infinite ease-in-out;
}

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

.s-about-title {
    font-family: var(--font-serif);
    font-size: 32px;
    letter-spacing: 4px;
    color: var(--text-primary);
}

.s-about-subtitle {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--text-muted);
}

.s-about-info-rows {
    width: 100%;
    max-width: 320px;
}

.s-about-info-rows .s-info-row {
    justify-content: space-between;
}

.s-about-credits {
    margin-bottom: 24px;
}

.s-about-links {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
    justify-content: center;
}

.s-about-link {
    font-size: 13px;
    color: var(--text-secondary);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 2px;
    transition: var(--transition-smooth);
}

.s-about-link:hover {
    color: var(--text-primary);
    border-bottom-color: var(--text-primary);
}

.s-about-footer {
    font-size: 11px;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

/* 📱 Адаптивность для настроек */
@media (max-width: 768px) {
    .settings-fullscreen {
        flex-direction: column;
    }

    .settings-sidebar {
        width: 100%;
        min-width: 100%;
        height: 100%;
        border-right: none;
        padding: 24px 16px;
    }

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

    .settings-sidebar-header h2 {
        font-size: 24px;
    }

    .s-esc-hint {
        display: none; /* Не нужно на мобильном */
    }

    .settings-nav-item {
        min-height: 48px; /* Крупные тач-цели */
        padding: 12px 16px;
        font-size: 15px;
        border-radius: var(--radius-lg);
    }

    .settings-content {
        display: none;
        width: 100%;
        height: 100%;
    }

    .settings-mobile-header {
        display: block;
    }

    .settings-content-scroll {
        padding: 24px 16px;
    }

    /* Когда открыта секция на мобильном */
    .settings-fullscreen.section-open .settings-sidebar {
        display: none;
    }

    .settings-fullscreen.section-open .settings-content {
        display: flex;
    }

    /* Лейаут профиля на мобильном */
    .s-profile-layout {
        flex-direction: column-reverse;
        gap: 24px;
        align-items: stretch;
    }

    .s-profile-preview-column {
        width: 100%;
        position: static;
    }

    .s-avatar-upload-group {
        flex-direction: column;
        text-align: center;
    }

    /* Тема */
    .s-theme-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .s-theme-preview {
        height: 50px;
    }

    /* Обновления */
    .s-updates-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   КИНОТЕАТР (Theater Mode Lightbox)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.theater-lightbox-container {
    width: 90%;
    height: 85%;
    background-color: #050505;
    border: 1px solid var(--border-color-active);
    border-radius: var(--radius-xl);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.theater-video-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-lg);
    color: var(--text-secondary);
}

.pulse-icon-large {
    width: 80px;
    height: 80px;
    animation: iconPulse 2s infinite ease-in-out;
}

.theater-video-caption {
    font-size: 16px;
    font-weight: 500;
}

.theater-close-btn {
    position: absolute;
    bottom: 30px;
    background-color: var(--bubble-own);
    color: var(--bubble-own-text);
    border: none;
    border-radius: var(--radius-sm);
    padding: 10px 20px;
    cursor: pointer;
    font-family: var(--font-sans);
    font-weight: 500;
}

.theater-close-btn:hover {
    background-color: #ffffff;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   МОДАЛКА И ЗВОНОК (Черно-белая премиальная палитра)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(15px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    transition: var(--transition-smooth);
}

/* ── Окно выбора источника демонстрации ────────────────────────── */
.screenshare-picker-card {
    position: relative;
    width: min(860px, 92vw);
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 28px;
    background: var(--bg-secondary, #141414);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg, 16px);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
}

.screenshare-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary, #fff);
}

.screenshare-subtitle {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary, rgba(255, 255, 255, 0.55));
}

.screenshare-quality-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.screenshare-quality-label {
    font-size: 13px;
    color: var(--text-secondary, rgba(255, 255, 255, 0.55));
}

.screenshare-quality-select {
    flex: 0 0 auto;
    padding: 6px 10px;
    background: var(--bg-tertiary, #1d1d1d);
    color: var(--text-primary, #fff);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-sm, 8px);
    font-family: var(--font-sans);
    cursor: pointer;
}

.screenshare-sources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    overflow-y: auto;
    padding: 4px;
    flex: 1 1 auto;
    min-height: 120px;
}

.screenshare-source-card {
    display: flex;
    flex-direction: column;
    border: 2px solid transparent;
    border-radius: var(--radius-sm, 8px);
    overflow: hidden;
    background: #000;
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.screenshare-source-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.25);
}

.screenshare-source-card.selected {
    border-color: var(--accent, #8a7fff);
}

.screenshare-source-card img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    background: #0a0a0a;
}

.screenshare-source-card-name {
    padding: 8px 10px;
    font-size: 12px;
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: var(--bg-tertiary, #1d1d1d);
}

.screenshare-loading {
    grid-column: 1 / -1;
    padding: 40px;
    text-align: center;
    color: var(--text-secondary, rgba(255, 255, 255, 0.5));
}

/* ───────────────── Настройки сферы / комнаты (стиль настроек приложения) ───────────────── */
/* .space-settings-shell переиспользует .settings-shell — задаём только размеры */
.space-settings-shell {
    width: min(860px, 94vw);
    height: min(660px, 86vh);
    max-height: 86vh;
}

.space-settings-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 5;
}

/* Опасная вкладка в навигации */
.space-nav-danger.active { color: #ff6b5e; }
.space-nav-danger:hover { color: #ff8a7e; }

/* Баннер-превью в карточке обзора */
.space-banner-preview {
    width: 100%;
    aspect-ratio: 5 / 2;
    border-radius: 12px;
    background: linear-gradient(135deg, #1d1d22, #111114);
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Danger-кнопки в стиле lvs */
.lvs-btn--danger {
    background: #e74c3c;
    border-color: #e74c3c;
    color: #fff;
}
.lvs-btn--danger:hover { background: #ff5a47; border-color: #ff5a47; }
.lvs-btn--ghost.lvs-btn--danger {
    background: transparent;
    color: #ff6b5e;
}
.lvs-btn--ghost.lvs-btn--danger:hover {
    background: rgba(231, 76, 60, 0.12);
    color: #fff;
}

/* Участники */
.space-members-list { display: flex; flex-direction: column; gap: 4px; }
.space-member-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; transition: background 0.15s ease; }
.space-member-item:hover { background: rgba(255, 255, 255, 0.04); }
.space-member-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: linear-gradient(135deg, #2a2a30, #16161a);
    background-size: cover; background-position: center;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 600; color: #fff; flex-shrink: 0;
}
.space-member-name { font-size: 13.5px; color: var(--text-primary, #fff); }
.space-member-role { margin-left: auto; font-size: 11px; color: var(--text-secondary, rgba(255,255,255,0.5)); text-transform: uppercase; letter-spacing: 0.4px; }

/* Приглашение */
.space-invite-row { display: flex; gap: 8px; align-items: center; }
.space-invite-row .lvs-input { flex: 1 1 auto; }

/* Опасная зона */
.space-danger-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.space-danger-title { font-size: 14px; font-weight: 600; color: var(--text-primary, #fff); margin-bottom: 2px; }
.space-danger-card { margin-bottom: 12px; }

/* Состояния кнопок */
.space-settings-shell .is-busy { opacity: 0.6; pointer-events: none; cursor: default; }
.space-settings-shell .is-confirming {
    background: #e74c3c !important;
    border-color: #e74c3c !important;
    color: #fff !important;
    animation: spaceConfirmPulse 1s ease-in-out infinite;
}
@keyframes spaceConfirmPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.5); }
    50% { box-shadow: 0 0 0 5px rgba(231, 76, 60, 0); }
}

/* Скрытие опций по правам (не-владелец) */
.space-settings-shell.is-not-owner #space-banner-upload,
.space-settings-shell.is-not-owner #space-banner-delete,
.space-settings-shell.is-not-owner #space-avatar-upload,
.space-settings-shell.is-not-owner #space-avatar-delete,
.space-settings-shell.is-not-owner #space-save-btn,
.space-settings-shell.is-not-owner #space-delete-row,
.space-settings-shell.is-not-owner #space-tab-invite {
    display: none;
}
.space-settings-shell.is-not-owner .lvs-input {
    pointer-events: none;
    opacity: 0.7;
}

@media (max-width: 600px) {
    .space-overview-row {
        flex-direction: column;
        align-items: stretch;
    }
    .space-avatar-edit {
        flex-direction: row;
        align-self: flex-start;
    }
}

.modal-backdrop.hidden {
    opacity: 0;
    pointer-events: none;
}

/* Immersive Call Overlay Container */
.call-overlay-container {
    position: relative;
    width: 100%;
    max-width: 850px;
    height: 80vh;
    max-height: 600px;
    background: radial-gradient(circle at 50% 30%, rgba(30, 30, 30, 0.75), rgba(10, 10, 10, 0.95));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-xl);
    box-shadow: 0 30px 100px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    padding: 30px;
    box-sizing: border-box;
    backdrop-filter: blur(25px);
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

@media (max-width: 768px) {
    .call-overlay-container {
        width: 100vw;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
        border: none;
    }
}

/* Background glowing lights */
.call-bg-glow {
    position: absolute;
    top: -20%;
    left: 20%;
    width: 60%;
    height: 60%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.03) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

.call-bg-blur-avatar {
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 800px;
    font-family: var(--font-serif);
    color: rgba(255, 255, 255, 0.015);
    pointer-events: none;
    z-index: 0;
    user-select: none;
    filter: blur(40px);
}

/* Top bar details */
.call-top-bar {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.call-encrypted-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 6px 14px;
    border-radius: 30px;
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Central Area */
.call-main-content {
    flex-grow: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    position: relative;
    margin: 20px 0;
}

/* Voice Profile View */
.call-voice-profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.avatar-ring-container {
    position: relative;
    width: 150px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
}

.call-avatar-glow {
    width: 110px;
    height: 110px;
    border-radius: var(--radius-round);
    background: rgba(255, 255, 255, 0.03);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 2px 10px rgba(255,255,255,0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-serif);
    font-size: 44px;
    color: #ffffff;
    z-index: 3;
}

/* Pulsing starlight rings */
.avatar-pulse-ring {
    position: absolute;
    width: 110px;
    height: 110px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-round);
    opacity: 0;
    pointer-events: none;
    z-index: 1;
}

.avatar-pulse-ring.ring-1 {
    animation: ringPulse 3s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}
.avatar-pulse-ring.ring-2 {
    animation: ringPulse 3s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
    animation-delay: 1s;
}
.avatar-pulse-ring.ring-3 {
    animation: ringPulse 3s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
    animation-delay: 2s;
}

@keyframes ringPulse {
    0% {
        transform: scale(1);
        opacity: 0.4;
        border-color: rgba(255, 255, 255, 0.25);
    }
    50% {
        border-color: rgba(255, 255, 255, 0.1);
    }
    100% {
        transform: scale(1.9);
        opacity: 0;
    }
}

.call-user-name {
    font-size: 26px;
    font-weight: 500;
    color: #ffffff;
    margin: 0 0 10px 0;
    letter-spacing: -0.5px;
    font-family: var(--font-sans);
}

.call-status-wrapper {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 6px 14px;
    border-radius: 14px;
}

.call-status-indicator.pulsing-dot {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-round);
    background-color: #62c462;
    box-shadow: 0 0 10px rgba(98, 196, 98, 0.5);
    animation: dotPulse 1.5s ease infinite alternate;
}

@keyframes dotPulse {
    0% { opacity: 0.4; transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1.1); }
}

.call-duration {
    font-size: 13px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    font-family: var(--font-mono), var(--font-sans);
}

/* Floating Controls Dock */
.call-controls-dock {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    background: rgba(18, 18, 18, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-xl);
    padding: 12px 24px;
    z-index: 10;
    backdrop-filter: blur(20px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.call-dock-btn {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    outline: none;
}

.call-dock-btn svg {
    width: 22px;
    height: 22px;
    transition: transform 0.2s;
}

.call-dock-btn:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    transform: translateY(-2px);
}

.call-dock-btn:active {
    transform: translateY(0);
}

/* Toggle Mute / Cam Off States */
.call-dock-btn.muted-active,
.call-dock-btn.video-inactive {
    background: rgba(235, 94, 94, 0.15);
    border-color: rgba(235, 94, 94, 0.3);
    color: #eb5e5e;
}

.call-dock-btn.muted-active:hover,
.call-dock-btn.video-inactive:hover {
    background: rgba(235, 94, 94, 0.25);
    color: #ff6e6e;
}

/* Screen sharing active */
.call-dock-btn.screenshare-active {
    background: rgba(98, 196, 98, 0.15);
    border-color: rgba(98, 196, 98, 0.3);
    color: #62c462;
}

/* End call button (red) */
.call-dock-btn.end-call {
    background: #eb5e5e;
    border: none;
    color: #ffffff;
    border-radius: var(--radius-round); /* Circle for hangup */
    box-shadow: 0 6px 20px rgba(235, 94, 94, 0.3);
}

.call-dock-btn.end-call:hover {
    background: #ff6e6e;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(235, 94, 94, 0.5);
}

.call-dock-btn.end-call:active {
    transform: translateY(0);
}

/* Video Grid layout */
.call-video-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    width: 100%;
    height: 100%;
    max-height: 420px;
    box-sizing: border-box;
}

@media (max-width: 600px) {
    .call-video-grid {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
    }
}

.video-stream-box {
    position: relative;
    background: rgba(13, 13, 13, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    z-index: 2;
}

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

/* Pulsing avatar in video placeholder */
.call-avatar.large.pulsing {
    width: 90px;
    height: 90px;
    border-radius: var(--radius-round);
    background: rgba(255, 255, 255, 0.02);
    border: 1.2px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-serif);
    font-size: 32px;
    animation: avatarPulseVideo 2s ease-in-out infinite alternate;
}

@keyframes avatarPulseVideo {
    0% { transform: scale(1); box-shadow: 0 0 0 rgba(255, 255, 255, 0); }
    100% { transform: scale(1.05); box-shadow: 0 0 15px rgba(255, 255, 255, 0.05); }
}

.call-avatar.small {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-round);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-serif);
    font-size: 24px;
}

/* Mock webcam streams styles */
.mock-stream-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.starlight-stream-effect {
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 30% 20%, rgba(200, 100, 255, 0.15) 0%, transparent 50%),
                radial-gradient(circle at 80% 70%, rgba(100, 200, 255, 0.12) 0%, transparent 50%),
                #121212;
    animation: starlightStreamShift 15s linear infinite alternate;
    position: relative;
    overflow: hidden;
}

.starlight-stream-effect.local {
    background: radial-gradient(circle at 70% 30%, rgba(100, 255, 180, 0.15) 0%, transparent 50%),
                radial-gradient(circle at 20% 80%, rgba(255, 100, 180, 0.12) 0%, transparent 50%),
                #121212;
    animation: starlightStreamShift 12s linear infinite alternate;
}

@keyframes starlightStreamShift {
    0% { filter: hue-rotate(0deg) contrast(1.1); }
    100% { filter: hue-rotate(360deg) contrast(0.9); }
}

.starlight-stream-effect::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    background-size: 100% 4px, 6px 100%;
    opacity: 0.15;
    pointer-events: none;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SCROLLBAR STYLING
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

::-webkit-scrollbar {
    width: 6px;
}

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

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE LAYOUT
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */




/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SIDEBAR COLLAPSE & IMMERSIVE FOCUS MECHANICS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Global utility for hiding elements */
.hidden {
    display: none !important;
}

.sidebar-collapsed .global-sidebar {
    width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    opacity: 0 !important;
    pointer-events: none;
    border-right: none !important;
}

.sidebar-collapsed .view-panel {
    left: 0 !important;
    width: 100% !important;
}

/* Sidebar Toggle Trigger */
.sidebar-toggle-trigger {
    position: absolute;
    top: 14px;
    left: 14px;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-round);
    background: rgba(13, 13, 13, 0.65);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-color-active);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 101;
    transition: var(--transition-smooth);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.sidebar-toggle-trigger:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--text-primary);
    transform: scale(1.05);
}

.sidebar-toggle-trigger svg {
    width: 18px;
    height: 18px;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-collapsed .sidebar-toggle-trigger svg {
    transform: rotate(180deg);
}

.mobile-only-toggle-close {
    display: none !important;
}

.chat-header {
    position: relative;
    padding-left: 64px !important;
}

/* Server Content Wrapper layout */
.server-content-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    min-width: 0;
    height: 100%;
    background-color: var(--bg-tertiary);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ROOM VIEW PANEL & CUSTOM COPY MECHANICS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.room-view-panel {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    height: 100%;
    overflow: hidden;
    background-color: var(--bg-tertiary);
}

.room-view-panel.hidden {
    display: none !important;
}

.room-header {
    height: 72px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px 0 64px;
    background-color: rgba(13, 13, 13, 0.35);
    backdrop-filter: blur(12px);
    flex-shrink: 0;
    position: relative;
}

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

.room-header-icon {
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Аватар сферы/комнаты в шапке */
.room-header-icon.has-avatar {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}
.room-header-icon.has-avatar svg {
    display: none;
}

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

.room-header-title-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.room-header-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.room-header-online {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.05);
    padding: 2px 6px;
    border-radius: 4px;
}

.room-header-online-dot {
    width: 6px;
    height: 6px;
    background-color: #ffffff;
    border-radius: var(--radius-round);
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
}

.room-header-subtitle {
    font-size: 11.5px;
    color: var(--text-secondary);
}

.room-header-settings-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: var(--transition-smooth);
}

.room-header-settings-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.03);
}

.room-header-settings-btn svg {
    width: 18px;
    height: 18px;
}

/* Tabs switcher styling */
.room-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: var(--spacing-md) 24px;
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.room-tab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition-smooth);
    text-align: left;
}

.room-tab:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--border-color-active);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.room-tab.active {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--text-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.room-tab-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    flex-shrink: 0;
    transition: var(--transition-smooth);
}

.room-tab.active .room-tab-icon {
    background: #ffffff;
    color: #000000;
}

.room-tab-icon svg {
    width: 16px;
    height: 16px;
}

.room-tab-body {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.room-tab-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.room-tab-hint {
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.room-tab-arrow {
    font-size: 14px;
    color: var(--text-muted);
    transition: var(--transition-smooth);
    margin-left: 8px;
}

.room-tab:hover .room-tab-arrow {
    color: var(--text-primary);
    transform: translateX(2px);
}

.room-tab.active .room-tab-arrow {
    color: var(--text-primary);
}

/* Panes layout */
.room-panes-wrapper {
    flex-grow: 1;
    position: relative;
    overflow: hidden;
    min-height: 0;
}

.room-pane-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    opacity: 1;
    transform: scale(1);
    visibility: visible;
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), 
                visibility 0.25s;
}

.room-pane-content.pane-hidden {
    opacity: 0;
    transform: scale(0.985);
    visibility: hidden;
    pointer-events: none;
}

#room-chat-feed {
    flex-grow: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
    padding-bottom: 110px !important;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}
#room-chat-feed > :first-child { margin-top: auto; }
#room-chat-feed > .message-group { flex: 0 0 auto; }

/* Voice Pane Specifics */
.voice-channel-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--spacing-lg);
    gap: var(--spacing-lg);
    overflow-y: auto;
}

.voice-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: rgba(13, 13, 13, 0.6) !important;
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 16px !important;
    padding: 14px 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.voice-channel-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.voice-status-indicator {
    width: 8px;
    height: 8px;
    background-color: #ffffff;
    border-radius: var(--radius-round);
    animation: voicePulse 1.5s infinite;
    box-shadow: 0 0 8px #ffffff;
}

.voice-channel-info h3 {
    font-size: 14.5px;
    font-weight: 500;
    letter-spacing: -0.2px;
}

.voice-controls-row {
    display: flex;
    gap: 10px;
}

.voice-control-btn-circle {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-round);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.voice-control-btn-circle:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}

.voice-control-btn-circle.active {
    background: #ffffff;
    color: #000000;
    border-color: #ffffff;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

.voice-grid-layout {
    display: flex;
    gap: var(--spacing-lg);
    flex-grow: 1;
    min-height: 0;
}

/* Screenshare card - Polaroid glass canvas style */
.screenshare-card {
    flex-grow: 1;
    background: rgba(10, 10, 10, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 24px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    min-width: 0;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    transition: var(--transition-smooth);
}

.screenshare-video-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--text-secondary);
    text-align: center;
    background: radial-gradient(circle at center, rgba(255,255,255,0.02) 0%, transparent 70%);
    width: 100%;
    height: 100%;
    justify-content: center;
}

.screenshare-video-placeholder svg {
    width: 48px;
    height: 48px;
    color: rgba(255, 255, 255, 0.2);
}

.theater-mode-btn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    padding: var(--spacing-sm) 16px;
    border-radius: 10px;
    font-size: 11.5px;
    cursor: pointer;
    margin-top: 8px;
    transition: var(--transition-smooth);
    font-family: var(--font-sans);
}

.theater-mode-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

.voice-participants-list {
    width: 240px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-shrink: 0;
}

/* Floating organic glass card with wabi-sabi shape */
.voice-member-card {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
    border-radius: 20px 8px 20px 12px !important;
    gap: 12px;
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.voice-member-card.speaking {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 0 16px rgba(255, 255, 255, 0.08);
    border-radius: 12px 20px 8px 20px !important; /* morph shape! */
    transform: scale(1.02);
}

.voice-member-avatar {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    background: #181818;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans) !important;
    font-size: 14px !important;
    font-weight: 600;
    font-style: normal !important;
    text-transform: uppercase !important;
    transition: var(--transition-smooth);
}

.speaking .voice-member-avatar {
    border-color: #ffffff;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.voice-member-name {
    font-size: 13.5px;
    font-weight: 500;
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-primary);
}

/* speak wave circle pulse */
.speaking-wave {
    display: flex;
    align-items: center;
    gap: 3px;
}

.speaking-wave span {
    width: 4px;
    height: 4px;
    border-radius: var(--radius-round);
    background-color: #ffffff;
    animation: pulseCircle 0.8s ease-in-out infinite alternate;
}

.speaking-wave span:nth-child(2) { animation-delay: 0.2s; }
.speaking-wave span:nth-child(3) { animation-delay: 0.4s; }

@keyframes pulseCircle {
    from { transform: scale(0.8); opacity: 0.4; }
    to { transform: scale(1.8); opacity: 1; }
}

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

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   UNIFIED SPACES ACCORDION & WABI-SABI FLOATING PANELS OVERRIDES
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Скрываем колонку серверов в духе Discord */
.servers-sidebar-column {
    display: none !important;
}

/* Управляем позиционированием панелей с учетом скрытой колонки */
.view-panel {
    left: 88px !important;
    width: calc(100% - 88px) !important;
}

.sidebar-collapsed .view-panel {
    left: 0 !important;
    width: 100% !important;
}

/* Плавное схлопывание внешних отступов глобального сайдбара */
.sidebar-collapsed .global-sidebar {
    width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    opacity: 0 !important;
    pointer-events: none;
    border: none !important;
}

/* Все боковые панели превращаются в парящие стеклянные плиты */
.conversations-sidebar,
.channels-sidebar,
.friends-sidebar,
.hub-sidebar,
.settings-sidebar-nav,
.notifications-sidebar {
    width: 320px !important;
    margin: var(--spacing-md) 0 16px 16px !important;
    height: calc(100% - 32px) !important;
    border-radius: 24px !important;
    background: rgba(10, 10, 10, 0.4) !important;
    backdrop-filter: blur(25px) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45) !important;
    display: flex !important;
    flex-direction: column !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Все основные панели контента становятся парящими стеклянными плитами */
.chat-area,
.server-content-wrapper,
.friends-main-panel,
.hub-content-panel,
.settings-content-panel,
.notifications-main-panel,
.voice-channel-panel {
    margin: var(--spacing-md) 16px 16px 16px !important;
    height: calc(100% - 32px) !important;
    border-radius: 24px !important;
    background: rgba(10, 10, 10, 0.45) !important;
    backdrop-filter: blur(25px) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5) !important;
    flex-grow: 1 !important;
    overflow: hidden !important;
    position: relative !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Избегаем дублирования рамок внутри обертки контента */
.server-content-wrapper > main {
    height: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Системный аккордеон пространств */
.spaces-accordion {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: var(--spacing-md) 14px;
    overflow-y: auto;
    flex-grow: 1;
    min-height: 0; /* позволяет прокрутку внутри flex-родителя вместо сжатия */
}

.space-card {
    flex-shrink: 0; /* карточки сохраняют высоту, список прокручивается, а не сжимается */
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.03);
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.space-card:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.07);
}

.space-card.active {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.09);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.space-card-header {
    display: flex;
    align-items: center;
    padding: 12px 14px;
    cursor: pointer;
    user-select: none;
    gap: 12px;
    transition: background 0.3s;
}

.space-card-icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.space-card-blob-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 16px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Уникальные органические формы */
.space-card[data-id="love-community"] .space-card-blob-icon {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}

.space-card[data-id="music-lounge"] .space-card-blob-icon {
    border-radius: 40% 60% 70% 30% / 50% 60% 40% 50%;
}

.space-card[data-id="gaming-zone"] .space-card-blob-icon {
    border-radius: 50% 50% 30% 70% / 60% 40% 60% 40%;
}

.space-card:hover .space-card-blob-icon {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    transform: scale(1.05) rotate(5deg);
}

.space-card.active .space-card-blob-icon {
    background: #ffffff;
    color: #000000;
    border-color: #ffffff;
    border-radius: 12px !important;
    transform: scale(1.05) rotate(0deg);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.2);
}

.space-card-banner {
    width: 100%;
    height: 72px;
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.space-card-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, #2a2a30, #16161a);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-serif);
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.space-card-meta {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.space-card-title {
    font-family: var(--font-serif);
    font-size: 14.5px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.space-card.active .space-card-title {
    font-weight: 600;
}

.space-card-subtitle {
    font-size: 10px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

.space-card-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.space-card-arrow svg {
    width: 16px;
    height: 16px;
}

.space-card.expanded .space-card-arrow {
    transform: rotate(180deg);
    color: var(--text-primary);
}

/* Выезжающий контент аккордеона */
.space-card-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0 14px;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.space-card.expanded .space-card-content {
    max-height: 250px;
    opacity: 1;
    padding: var(--spacing-xs) 14px 14px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.02);
}

.space-card-content .channel-item {
    margin: 2px 0;
    padding: var(--spacing-sm) 12px;
    border-radius: var(--radius-sm);
    border-left: 2px solid transparent;
}

.space-card-content .channel-item.active {
    border-left: 2px solid #ffffff;
    background: rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-sm);
}

.space-card-content .channel-item.unread {
    font-weight: 600 !important;
    color: #ffffff !important;
}

.space-card-content .channel-item.unread::after {
    content: "" !important;
    display: inline-block !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background-color: #ffffff !important;
    margin-left: auto !important;
}

/* Кнопка создания пространства */
.add-space-container {
    margin-top: 8px;
    padding: 0 4px;
}

.add-space-row-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: 1px dashed rgba(255, 255, 255, 0.1);
    padding: 10px 14px;
    border-radius: var(--radius-md);
    color: var(--text-muted);
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 12.5px;
    transition: all 0.3s;
    text-align: left;
}

.add-space-row-btn:hover {
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.01);
}

.add-space-row-btn .plus-icon {
    font-size: 16px;
    font-weight: 300;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   COZY WABI-SABI PROFILE CARD MODAL STYLES
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.profile-card {
    background: rgba(10, 10, 10, 0.55);
    backdrop-filter: blur(35px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 32px;
    width: 420px;
    padding: 36px 32px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.7);
    box-sizing: border-box;
    animation: profileCardEnter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

.profile-close-btn {
    position: absolute;
    top: 24px;
    right: 24px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition-smooth);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-round);
    z-index: 100;
}

.profile-close-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.05);
}

.profile-avatar-container {
    position: relative;
    margin-bottom: 16px;
    width: 96px;
    height: 96px;
}

.profile-avatar {
    width: 96px;
    height: 96px;
    background-color: #ffffff;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans) !important;
    font-style: normal !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    font-size: 32px;
    border-radius: 50% !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    z-index: 2;
    position: relative;
    user-select: none;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden; /* Клипаем оверлей по форме аватара */
    -webkit-mask-image: -webkit-radial-gradient(white, black); /* Надежный фикс backdrop-filter в WebKit */
}

/* Глобальный класс для аватарок (Унифицированный круглый стиль) */
.wabi-avatar, .avatar, .friend-avatar, .partner-avatar, .conv-avatar, .message-avatar, .msg-sender-avatar {
    border-radius: 50% !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-family: var(--font-sans) !important;
    font-weight: 600 !important;
    font-style: normal !important;
    text-transform: uppercase !important;
    overflow: hidden;
}

.wabi-avatar:hover, .avatar:hover, .friend-avatar:hover, .partner-avatar:hover, .conv-avatar:hover, .message-avatar:hover, .msg-sender-avatar:hover {
    border-radius: 50% !important;
}

.conversation-item:hover .conv-avatar,
.conversation-item.active .conv-avatar,
.friend-card:hover .friend-avatar {
    border-radius: 50% !important;
}

.profile-avatar-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 70%);
    z-index: 1;
    filter: blur(8px);
    pointer-events: none;
}

.profile-name {
    font-family: var(--font-serif);
    font-size: 24px;
    font-style: italic;
    font-weight: 500;
    color: #ffffff;
    margin-bottom: 2px;
}

.profile-username {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.profile-divider {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
    position: relative;
}

.profile-divider::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0) 100%);
    z-index: 1;
}

.divider-heart {
    background: #0d0d0d;
    padding: 0 12px;
    font-size: 12px;
    color: var(--text-muted);
    z-index: 2;
}

.profile-section {
    width: 100%;
    text-align: left;
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.profile-section-label {
    font-family: var(--font-mono);
    font-size: 9px;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 1px;
}

.profile-status-box {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.profile-status-box:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

.status-emoji {
    font-size: 16px;
}

.status-text {
    font-size: 13.5px;
    color: var(--text-primary);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.status-edit-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: var(--radius-round);
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition-smooth);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    margin-left: auto;
}

.status-edit-icon:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.08);
}

.status-edit-icon svg {
    width: 12px;
    height: 12px;
}

/* Стили поповера выбора настроения */
#mood-picker-popover {
    box-sizing: border-box !important;
}

#mood-picker-popover div {
    width: 28px !important;
    height: 28px !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    color: var(--text-secondary) !important;
    border: 1px solid transparent !important;
    box-sizing: border-box !important;
}

#mood-picker-popover div:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

#mood-picker-popover div.active {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}

#mood-picker-popover div svg {
    width: 16px !important;
    height: 16px !important;
}

/* Стилизация инпута для изменения статуса */
.profile-status-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    padding: 9px 13px !important;
    font-family: var(--font-sans) !important;
    font-size: 13.5px !important;
    outline: none !important;
    box-sizing: border-box !important;
}

/* Lofi Player widget inside profile */
.profile-lofi-player {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 14px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.player-visualizer {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    width: 20px;
    height: 18px;
}

.player-visualizer span {
    width: 3px;
    height: 100%;
    background-color: #ffffff;
    border-radius: 1px;
    animation: lofiPulse 1.2s ease-in-out infinite alternate;
    transform-origin: bottom;
}

.player-visualizer span:nth-child(1) { height: 60%; animation-delay: 0.1s; }
.player-visualizer span:nth-child(2) { height: 100%; animation-delay: 0.4s; }
.player-visualizer span:nth-child(3) { height: 40%; animation-delay: 0.2s; }
.player-visualizer span:nth-child(4) { height: 80%; animation-delay: 0.5s; }

@keyframes lofiPulse {
    0% { transform: scaleY(0.2); }
    100% { transform: scaleY(1); }
}

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

.track-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.track-artist {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Profile tags */
.profile-tags-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}

.profile-tag {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    padding: 6px 12px;
    border-radius: 10px;
    font-size: 11.5px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
    transition: var(--transition-smooth);
    cursor: default;
}

.msg-sender-avatar {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    font-style: normal !important;
    text-transform: uppercase !important;
    color: var(--text-secondary);
    margin-right: 10px;
    margin-top: 2px;
}

.profile-tag svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.profile-tag:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    transform: translateY(-1px);
}

/* Profile Save button */
.profile-save-btn {
    width: 100%;
    margin-top: 24px;
    padding: 12px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.55);
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.profile-save-btn:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.25);
    color: rgba(255,255,255,0.8);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PROFILE TABS, PANES & EDIT FORM
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.profile-tab-bar {
    display: flex;
    gap: var(--spacing-xs);
    width: calc(100% - 44px);
    align-self: flex-start;
    margin-bottom: 24px;
    padding: var(--spacing-xs);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 14px;
}

.profile-tab-btn {
    flex: 1;
    padding: var(--spacing-sm) 0;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 10px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing: 0.3px;
}

.profile-tab-btn:hover {
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.03);
}

.profile-tab-btn.active {
    color: #000000;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.15);
}

/* Profile Panes */
.profile-pane {
    display: none;
    width: 100%;
    animation: profilePaneFade 0.3s ease;
}

.profile-pane.active {
    display: flex;
    flex-direction: column;
    align-items: center;
}

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

/* Profile Edit Form (Settings tab) */
.profile-edit-title {
    font-family: var(--font-serif);
    font-size: 18px;
    font-style: italic;
    font-weight: 500;
    color: #ffffff;
    margin-bottom: 24px;
    width: 100%;
    text-align: left;
}

.profile-edit-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.profile-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.profile-form-group label {
    font-family: var(--font-mono);
    font-size: 9px;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 1px;
}

.profile-form-group input {
    width: 100%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    font-family: var(--font-sans);
    font-size: 13.5px;
    outline: none;
    box-sizing: border-box;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.profile-form-group input:focus {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.03);
}

/* SVG sizing for sidebar blob icons */
.space-card-blob-icon svg {
    width: 20px;
    height: 20px;
}

/* SVG sizing for status emoji */
.status-emoji svg {
    width: 16px;
    height: 16px;
}

/* SVG sizing for divider heart */
.divider-heart svg {
    width: 12px;
    height: 12px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PROFILE AVATAR OVERLAY (EDIT ON HOVER)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.profile-avatar-container {
    position: relative;
    cursor: pointer;
}

.profile-avatar-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 5;
    cursor: pointer;
}

.profile-avatar-overlay svg {
    width: 28px;
    height: 28px;
    color: rgba(255, 255, 255, 0.8);
}

.profile-avatar-container:hover .profile-avatar-overlay {
    opacity: 1;
}

.profile-avatar-container:hover .profile-avatar {
    border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
    transform: rotate(5deg) scale(1.02);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PROFILE NAME ROW WITH BADGE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.profile-name-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 2px;
}

.profile-name-edit-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-round);
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition-smooth);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.profile-name-edit-icon:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.08);
}

.profile-name-edit-icon svg {
    width: 12px;
    height: 12px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SERVER/ROOM CHAT SENDER AVATARS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.message-row.partner {
    flex-direction: row;
    align-items: flex-start;
}

.msg-sender-avatar {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: var(--radius-round);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-serif);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-right: 10px;
    margin-top: 2px;
    flex-shrink: 0;
}

.message-content-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 100%;
}

.msg-sender-name {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 3px;
    letter-spacing: 0.2px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SMOOTH SERVER/ROOM TRANSITIONS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

#server-chat-panel,
#server-room-panel {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.server-content-wrapper {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BENTO GRID DASHBOARD (LOVE HUB)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.hub-bento-dashboard {
    background: rgba(10, 10, 10, 0.45) !important;
    backdrop-filter: blur(25px) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5) !important;
    border-radius: 24px !important;
    margin: var(--spacing-md) !important;
    width: calc(100% - 32px) !important;
    height: calc(100% - 32px) !important;
}

.bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto auto auto;
    gap: 20px;
    width: 100%;
}

.bento-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-xl);
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s, border-color 0.3s;
}

.bento-card:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.bento-hero {
    grid-column: span 3;
    grid-row: span 2;
    background: radial-gradient(circle at top right, rgba(255,255,255,0.08) 0%, rgba(0,0,0,0) 60%), rgba(255,255,255,0.02);
}

.bento-hero h2 {
    font-family: var(--font-serif);
    font-size: 36px;
    margin-bottom: 16px;
    color: #fff;
    max-width: 80%;
}

.bento-hero p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-secondary);
    max-width: 60%;
}

.bento-hero-visual {
    position: absolute;
    right: -40px;
    bottom: -40px;
    width: 250px;
    height: 250px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-round);
    display: flex;
    align-items: center;
    justify-content: center;
}

.bento-circle-accent {
    width: 150px;
    height: 150px;
    border-radius: var(--radius-round);
    background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%);
    backdrop-filter: blur(10px);
}

.bento-stat {
    grid-column: span 1;
    grid-row: span 2;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 12px;
    padding: var(--spacing-lg) var(--spacing-md);
}

.bento-stat h3 {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 0;
}

.stat-value {
    font-family: var(--font-mono);
    font-size: 52px;
    line-height: 1;
    font-weight: 600;
    color: #fff;
    margin-bottom: 0;
}

.stat-trend.positive {
    color: #ffffff;
    font-size: 13px;
    background: rgba(255, 255, 255, 0.08);
    padding: 6px 12px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.bento-idea {
    grid-column: span 2;
}

.bento-bug,
.bento-roadmap,
.bento-devlog {
    grid-column: span 2;
}

.bento-actions {
    grid-column: span 2;
    grid-row: span 1;
}

.bento-minor {
    grid-column: span 2;
}

.bento-tag {
    display: inline-block;
    padding: var(--spacing-xs) 10px;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
    align-self: flex-start;
}

.bento-tag.idea { background: rgba(255, 255, 255, 0.05); color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.15); }
.bento-tag.bug { background: rgba(255, 255, 255, 0.05); color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.15); }
.bento-tag.update { background: rgba(255, 255, 255, 0.05); color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.15); }
.bento-tag.devlog { background: #ffffff; color: #000; border: 1px solid #ffffff; }

/* Единая угловая иконка для всех bento-карточек */
.bento-corner-icon {
    position: absolute;
    top: var(--spacing-lg);
    right: var(--spacing-lg);
    width: 18px;
    height: 18px;
    color: var(--text-muted);
    z-index: 2;
    transition: color 0.2s ease, transform 0.2s ease;
}
.bento-corner-icon svg { width: 100%; height: 100%; display: block; }
.bento-card:hover .bento-corner-icon { color: #fff; transform: translate(2px, -2px); }

/* Карточка Dev Log в bento-сетке */
.bento-devlog { cursor: pointer; }
.bento-devlog-cta {
    margin-top: auto;
    padding-top: 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s ease;
}
.bento-devlog:hover .bento-devlog-cta { color: #fff; }

.bento-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.bento-action-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
}

.bento-action-links a {
    color: var(--text-primary);
    text-decoration: none;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 10px;
    transition: background 0.2s;
}

.bento-action-links a:hover {
    background: rgba(255, 255, 255, 0.06);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TRANSITIONS, FIXES, & INTERACTION OVERRIDES
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Улучшенная плавность переходов в главном интерфейсе */
.global-sidebar,
.view-panel {
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Исправление скрытия панелей с !important специфичностью */
.chat-area.hidden,
.room-view-panel.hidden,
.channels-sidebar.hidden {
    display: none !important;
}

/* Плавное схлопывание/раскрытие сайдбара сфер/каналов */
.channels-sidebar.hidden {
    width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    border: none !important;
    display: flex !important; /* Держим flex во время анимации, перезаписывая display: none */
}

/* ==========================================================================
   DYNAMIC BUTTON TRANSITIONS ON GLOBAL SIDEBAR
   ========================================================================== */

/* Perfect circles by default for global sidebar buttons */
.nav-btn, .logo-nav-area, .user-avatar-btn {
    border-radius: 50% !important;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Global Nav Button Hover styling - transitions to rounded square */
.nav-btn:hover {
    color: var(--text-primary) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: var(--text-primary) !important;
    transform: translateY(-2px) scale(1.05) rotate(4deg) !important;
    border-radius: 12px !important; /* Transitions to rounded square */
}

.nav-btn:hover svg {
    transform: scale(1.1) rotate(4deg) !important;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.45)) !important;
}

/* Active Nav Button highlights - rounded square */
.nav-btn.active, .logo-nav-area.active {
    color: var(--text-primary) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--border-color-active) !important;
    border-radius: 12px !important; /* Rounded square */
    transform: none !important;
}

/* Logo Area Hover styling - transitions to rounded square */
.logo-nav-area:hover {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: var(--text-primary) !important;
    transform: scale(1.05) !important;
    border-radius: 12px !important;
}

/* User Avatar Sidebar Button Hover styling - transitions to rounded square */
.user-avatar-btn:hover {
    border-color: var(--text-primary) !important;
    transform: translateY(-2px) scale(1.05) rotate(-4deg) !important;
    border-radius: 12px !important;
}


/* ==========================================================================
   FORCE ROUND AVATARS ON ITEM HOVER AND ACTIVE
   ========================================================================== */

/* Force avatar roundedness in DM list and friends list when parent row is hovered/active */
.conversation-item:hover .conv-avatar,
.conversation-item.active .conv-avatar,
.friend-card:hover .friend-avatar,
.friend-card.active .friend-avatar,
.conversation-item:hover .conv-avatar-wrap .conv-avatar,
.conversation-item.active .conv-avatar-wrap .conv-avatar,
.friend-card:hover .friend-avatar-wrap .friend-avatar {
    border-radius: 50% !important;
}

/* Ensure transition is smooth for all avatars */
.conv-avatar, .friend-avatar, .wabi-avatar, .partner-avatar {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}


/* ==========================================================================
   ACTIVITY STATUS (.online-dot) LAYOUT FIXED Outside Avatar
   ========================================================================== */

.conv-avatar-wrap, .friend-avatar-wrap {
    position: relative !important;
    display: inline-block !important;
    width: 38px !important;
    height: 38px !important;
    margin-right: 12px !important;
    flex-shrink: 0 !important;
    overflow: visible !important;
}

.friend-avatar-wrap {
    width: 38px !important;
    height: 38px !important;
    margin-right: 14px !important;
}

.online-dot {
    position: absolute !important;
    bottom: -2px !important;
    right: -2px !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background-color: #ffffff !important;
    border: 2px solid var(--bg-secondary) !important;
    z-index: 10 !important;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.4) !important;
}


/* ==========================================================================
   SMOOTH SPACES ACCORDION & CHANNEL BUTTONS TRANSITIONS
   ========================================================================== */

/* Smooth transitions for all accordion card elements */
.space-card, 
.space-card-header, 
.space-card-blob-icon, 
.space-card-title, 
.space-card-subtitle, 
.space-card-arrow {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Smooth transitions for the channel items in server view */
.space-card-content .channel-item {
    margin: 2px 0 !important;
    padding: var(--spacing-sm) 12px !important;
    border-radius: 8px !important;
    border-left: 2px solid transparent !important;
    color: var(--text-secondary) !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.space-card-content .channel-item:hover {
    background: rgba(255, 255, 255, 0.03) !important;
    color: var(--text-primary) !important;
    border-left-color: rgba(255, 255, 255, 0.3) !important;
}

.space-card-content .channel-item.active {
    border-left-color: #ffffff !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
}


/* ==========================================================================
   RESPONSIVE LAYOUT & COLLAPSIBLE SIDEBARS
   ========================================================================== */

/* Desktop layout (always visible sidebars, hide drawer toggle button) */
@media (min-width: 1025px) {
    .sidebar-toggle-trigger {
        display: none !important;
    }
    
    .global-sidebar {
        width: 72px !important;
        margin: var(--spacing-md) 0 16px 16px !important;
        padding: 20px 0 !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        border: 1px solid rgba(255, 255, 255, 0.05) !important;
        position: static !important;
        transform: none !important;
    }
    
    .view-panel {
        left: 88px !important;
        width: calc(100% - 88px) !important;
        position: absolute !important;
    }
    
    .conversations-sidebar,
    .channels-sidebar,
    .friends-sidebar,
    .hub-sidebar,
    .settings-sidebar-nav,
    .notifications-sidebar {
        position: static !important;
        width: 320px !important;
        margin: var(--spacing-md) 0 16px 16px !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: none !important;
    }
}

/* Tablet & Mobile layout (collapsible overlapping drawer sidebars) */
@media (max-width: 1024px) {
    /* Always show the toggle button in main view panels */
    .sidebar-toggle-trigger {
        display: flex !important;
        z-index: 1010 !important;
    }
    
    /* Make sidebars float over contents */
    .global-sidebar {
        position: absolute !important;
        left: 0 !important;
        z-index: 1005 !important;
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease, width 0.4s ease !important;
    }
    
    .conversations-sidebar,
    .channels-sidebar,
    .friends-sidebar,
    .hub-sidebar,
    .settings-sidebar-nav,
    .notifications-sidebar {
        position: absolute !important;
        left: 88px !important;
        z-index: 1004 !important;
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease, width 0.4s ease !important;
    }
    
    /* When collapsed on mobile, shift sidebars out of view */
    .sidebar-collapsed .global-sidebar {
        transform: translateX(-100%) !important;
        opacity: 0 !important;
        pointer-events: none !important;
        width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
    }
    
    .sidebar-collapsed .conversations-sidebar,
    .sidebar-collapsed .channels-sidebar,
    .sidebar-collapsed .friends-sidebar,
    .sidebar-collapsed .hub-sidebar,
    .sidebar-collapsed .settings-sidebar-nav,
    .sidebar-collapsed .notifications-sidebar {
        transform: translateX(-150%) !important;
        opacity: 0 !important;
        pointer-events: none !important;
        width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
    }
    
    /* Main view panel expands to full width */
    .view-panel {
        left: 0 !important;
        width: 100% !important;
    }
    
    .chat-area,
    .server-content-wrapper,
    .friends-main-panel,
    .hub-bento-dashboard,
    .settings-content-panel,
    .notifications-main-panel {
        margin: var(--spacing-md) !important;
        width: calc(100% - 32px) !important;
        height: calc(100% - 32px) !important;
    }
    
    /* Offsets to make space for the toggle trigger button on mobile */
    .chat-header, 
    .room-header, 
    .friends-header, 
    .voice-header-bar,
    .bento-header {
        padding-left: 64px !important;
    }
    
    .settings-content-panel,
    .notifications-main-panel {
        padding-top: 64px !important;
    }

    /* Position close button on the RIGHT inside sidebar headers */
    .sidebar-header {
        position: relative !important;
        padding-right: 52px !important;
    }

    .sidebar-header .mobile-only-toggle-close {
        position: absolute !important;
        top: 50% !important;
        right: 12px !important;
        left: auto !important;
        transform: translateY(-50%) !important;
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        background: transparent !important;
        border: none !important;
        color: var(--text-secondary) !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .sidebar-header .mobile-only-toggle-close svg {
        width: 18px !important;
        height: 18px !important;
    }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   WABI-SABI VOICE LOUNGE & CONSTELLATION STYLING
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

#server-voice-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#server-voice-panel .voice-channel-panel {
    flex-grow: 1;
    height: auto !important;
    margin: 12px 16px 16px 16px !important;
    padding: var(--spacing-md) !important;
    background: rgba(10, 10, 10, 0.4) !important;
    backdrop-filter: blur(25px) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 24px !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    gap: 16px !important;
}

/* Voice — оверлей «Войти в войс» (до подключения) */
.voice-preconnect-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 72px;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 70%, transparent 100%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 16px;
    z-index: 5;
    pointer-events: none;
}

.voice-preconnect-content {
    display: flex;
    align-items: center;
    gap: 16px;
    pointer-events: auto;
}

.voice-preconnect-users {
    font-size: 12px;
    color: rgba(255,255,255,0.4);
}

.voice-preconnect-join-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.8);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    touch-action: manipulation;
}

.voice-preconnect-join-btn svg {
    width: 18px;
    height: 18px;
}

.voice-preconnect-join-btn:hover {
    background: rgba(255,255,255,0.14);
    color: #fff;
    border-color: rgba(255,255,255,0.35);
}

.voice-preconnect-overlay.hidden {
    display: none;
}

/* Voice — плавающий мини-превью демки/камеры */
.voice-float-preview {
    position: absolute;
    bottom: 80px;
    right: 16px;
    width: 280px;
    aspect-ratio: 16 / 9;
    background: #0a0a0a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
    z-index: 10;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                left 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                top 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                border-radius 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.voice-float-preview.appearing {
    animation: previewAppear 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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

.voice-float-preview.hidden {
    display: none;
}

.voice-preview-content {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #111, #0a0a0a);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.3);
    font-size: 12px;
}

/* Живое видео (камера/демонстрация) внутри превью */
.voice-preview-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
    display: block;
}

/* Текстовая заглушка, пока видео нет */
.voice-preview-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.voice-preview-ph-live {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.voice-preview-ph-cap {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.2);
}

.voice-preview-controls {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    gap: 4px;
}

.voice-preview-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    touch-action: manipulation;
}

.voice-preview-btn svg {
    width: 16px;
    height: 16px;
}

.voice-preview-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.voice-float-preview.expanded {
    border-radius: 16px;
}

.voice-preview-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.7);
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Voice — кастомный фуллскрин оверлей */
.voice-fullscreen-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}

.voice-fullscreen-overlay.hidden {
    display: none;
}

.voice-fullscreen-content {
    width: 90vw;
    height: 85vh;
    background: #0a0a0a;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.3);
    font-size: 14px;
}

.voice-fullscreen-close {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.voice-fullscreen-close svg {
    width: 18px;
    height: 18px;
}

.voice-fullscreen-close:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

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

/* Скрытый стрим — иконка вместо буквы на аватарке */
.voice-pcard .collapsed-stream {
    cursor: pointer;
    animation: collapsedStreamPop 0.34s cubic-bezier(0.16, 1, 0.3, 1) 1 both;
}

.voice-pcard .collapsed-stream-icon {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.voice-pcard .collapsed-stream-icon svg {
    width: 32px;
    height: 32px;
    color: rgba(255, 255, 255, 0.5);
}

@keyframes collapsedStreamPop {
    0% { opacity: 0; transform: scale(0.72); filter: blur(6px); }
    72% { opacity: 1; transform: scale(1.08); filter: blur(0); }
    100% { opacity: 1; transform: scale(1); filter: blur(0); }
}

/* ───────── Voice — кластер «орбов присутствия» (кастомный дизайн) ───────── */
.voice-constellation {
    position: relative;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.04) 0%, transparent 55%),
        radial-gradient(circle at 50% 120%, rgba(255, 255, 255, 0.025) 0%, transparent 60%),
        rgba(4, 4, 4, 0.35);
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    gap: 24px 30px;
    padding: 32px 24px;
}

.voice-pcard {
    position: relative;
    width: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}
    animation: voicePcardIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes voicePcardIn {
    from { opacity: 0; transform: translateY(8px) scale(0.92); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Сам орб-аватар */
.voice-member-avatar-wrap {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(150deg, #1a1a1a, #0e0e0e);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: var(--font-sans);
    font-size: 28px;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}

.voice-pcard:hover .voice-member-avatar-wrap {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.22);
}

/* Свой орб — двойное кольцо-акцент */
.voice-pcard.is-own .voice-member-avatar-wrap {
    border-color: rgba(255, 255, 255, 0.15);
}

.voice-pcard.is-own .voice-member-name {
    color: #fff;
}

/* Говорящий — живая аура из двух колец + свечение + лёгкий рост */
.voice-pcard.speaking .voice-member-avatar-wrap {
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.08);
    animation: speakingPulse 1.5s ease-in-out infinite;
}

.voice-pcard.speaking .voice-member-avatar-wrap::before,
.voice-pcard.speaking .voice-member-avatar-wrap::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    animation: voiceWave 2s ease-out infinite;
    pointer-events: none;
}

.voice-pcard.speaking .voice-member-avatar-wrap::after {
    animation-delay: 0.8s;
}

.voice-pcard.is-own .voice-member-avatar-wrap {
    border-color: rgba(255, 255, 255, 0.15);
}

.voice-pcard.speaking .voice-member-avatar-wrap::before,
.voice-pcard.speaking .voice-member-avatar-wrap::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    animation: voiceWave 2s ease-out infinite;
    pointer-events: none;
}

.voice-pcard.speaking .voice-member-avatar-wrap::after {
    animation-delay: 0.8s;
}

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

@keyframes voiceWave {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(1.35); opacity: 0; }
}

.voice-pcard .voice-member-avatar {
    font-family: var(--font-sans) !important;
    font-size: 34px;
    color: #ffffff;
    letter-spacing: -0.5px;
    font-weight: 600 !important;
    font-style: normal !important;
    text-transform: uppercase !important;
}

.voice-pcard .voice-member-name {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.55);
    font-family: var(--font-sans);
    text-align: center;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
    background: transparent;
}

.voice-pcard:hover .voice-member-name { color: #ffffff; }
.voice-pcard.speaking .voice-member-name {
    color: #fff;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.08);
}

/* Camera Stream Mock */
.voice-cam-stream-mock {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a1a1a, #0e0e0e);
    border: 2px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    font-size: 28px;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
}

.voice-cam-stream-mock::after {
    content: '';
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 4px #fff;
}

.voice-pcard.speaking .voice-cam-stream-mock {
    border-color: rgba(255, 255, 255, 0.4);
}

.voice-cam-svg {
    width: 60%;
    height: 60%;
    opacity: 1;
}

.cam-label {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.voice-status-badge {
    position: absolute;
    bottom: 2px;
    width: 18px;
    height: 18px;
    background: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.voice-status-badge svg {
    width: 10px;
    height: 10px;
    color: rgba(255, 255, 255, 0.5);
}

.voice-status-badge.mic-muted { left: -2px; }
.voice-status-badge.sound-muted { right: -2px; }

.voice-status-badge svg {
    width: 13px;
    height: 13px;
}

/* Theater mode / screenshare layouts */
.voice-theater-view {
    display: flex;
    gap: var(--spacing-md);
    width: 100%;
    height: 100%;
    min-height: 0;
}

.screenshare-large-card {
    flex-grow: 1;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
}

.screenshare-video-mock {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.screenshare-inner-gui {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: var(--spacing-md);
    box-sizing: border-box;
}

.screenshare-badge {
    align-self: flex-start;
    background: #ffffff;
    color: #000000;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

.screenshare-mock-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: monospace;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.6;
    padding: var(--spacing-lg);
}

.screenshare-mock-content .code-line {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-sm);
    padding: 6px 12px;
    margin: var(--spacing-xs) 0;
    width: 80%;
    max-width: 400px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.screenshare-mock-content .token-keyword { color: #ffffff; font-weight: 600; }
.screenshare-mock-content .token-variable { color: rgba(255, 255, 255, 0.9); }
.screenshare-mock-content .token-method { color: rgba(255, 255, 255, 0.7); }
.screenshare-mock-content .token-class { color: #ffffff; text-decoration: underline; }
.screenshare-mock-content .token-string { color: rgba(255, 255, 255, 0.5); }
.screenshare-mock-content .token-comment { color: rgba(255, 255, 255, 0.35); font-style: italic; }

.screenshare-overlay-text {
    align-self: center;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.5px;
    margin-top: auto;
}

/* Code Wave Graphic */
.code-wave-graphic {
    display: flex;
    align-items: flex-end;
    gap: var(--spacing-xs);
    margin-top: 16px;
    height: 24px;
}

.code-wave-graphic span {
    width: 2px;
    height: 6px;
    background-color: rgba(255, 255, 255, 0.3);
    animation: codeWavePulse 1.2s ease-in-out infinite alternate;
}

.code-wave-graphic span:nth-child(2) { height: 12px; animation-delay: 0.15s; }
.code-wave-graphic span:nth-child(3) { height: 18px; animation-delay: 0.3s; }
.code-wave-graphic span:nth-child(4) { height: 10px; animation-delay: 0.45s; }
.code-wave-graphic span:nth-child(5) { height: 14px; animation-delay: 0.6s; }

@keyframes codeWavePulse {
    0% { transform: scaleY(0.4); opacity: 0.3; }
    100% { transform: scaleY(1.4); opacity: 0.8; }
}

/* Sidebar list of participants (Theater mode) */
.voice-compact-participants {
    width: 200px;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    overflow-y: auto;
    padding-right: 4px;
    flex-shrink: 0;
}

/* Compact horizontal cards in theater (screenshare) mode */
.voice-pcard.compact {
    position: relative;
    width: auto;
    height: auto;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    animation: none;
}

.voice-pcard.compact:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
    transform: none;
}

.voice-pcard.compact .voice-member-avatar-wrap,
.voice-pcard.compact .voice-cam-stream-mock {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: none;
    font-size: 11px;
}

.voice-pcard.compact .voice-member-name {
    font-size: 12px;
    text-align: left;
    color: rgba(255, 255, 255, 0.8);
    flex-grow: 1;
}

.voice-pcard.compact.speaking .voice-member-avatar-wrap::after { display: none; }
    right: auto;
    left: auto;
    width: 16px;
    height: 16px;
    margin-left: 4px;
}

.voice-pcard.compact .voice-status-badge svg {
    width: 8px;
    height: 8px;
}

/* Footer Control Bar Styles */
.voice-footer-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 6px 10px;
    margin-top: auto;
    z-index: 5;
    flex-wrap: nowrap;
}

.voice-footer-left {
    display: none;
}

.voice-footer-status-dot {
    display: none;
}

.voice-footer-status-text {
    display: none;
}

.voice-footer-center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.voice-footer-right {
    display: flex;
    align-items: center;
    margin-left: 8px;
    padding-left: 8px;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}

/* Control Buttons styling */
.voice-control-btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
    flex-shrink: 0;
}

.voice-control-btn svg {
    width: 16px;
    height: 16px;
}

.voice-control-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

/* Active State */
.voice-control-btn.active-state {
    background: #fff;
    border-color: #fff;
    color: #000;
}

.voice-control-btn.active-state:hover {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(255, 255, 255, 0.85);
    color: #000;
}

/* Muted State */
.voice-control-btn.muted-state {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.18);
}

.voice-control-btn.muted-state:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.5);
}

.voice-control-btn svg {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}

.voice-control-btn:active svg {
    transform: scale(0.85);
}

/* Disconnect Button (Unique Pill Shape & Animation) */
.voice-disconnect-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.voice-disconnect-btn svg {
    width: 14px;
    height: 14px;
}

.voice-disconnect-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.2);
}

@keyframes voicePulse {
    0% { opacity: 0.3; }
    50% { opacity: 1; }
    100% { opacity: 0.3; }
}
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   NEW TABS DESIGN: FRIENDS, NOTIFICATIONS, SETTINGS & SIDEBAR WIDGETS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* --- FRIENDS (КОНТАКТЫ) LIST LAYOUT --- */
.friends-list-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    padding: 0 !important;
    overflow-y: auto !important;
    flex-grow: 1 !important;
    max-width: 680px !important;
}

.friend-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 14px 24px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 12px !important;
    transition: background 0.2s ease !important;
    box-shadow: none !important;
    height: auto !important;
    position: relative !important;
    cursor: pointer !important;
}

.friend-card:hover {
    transform: none !important;
    border-color: transparent !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.04) !important;
}

.friend-info-left {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    text-align: left !important;
    gap: 14px !important;
}

.friend-avatar-wrap {
    position: relative !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    flex-shrink: 0 !important;
}

.friend-avatar {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: #161616 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    font-size: 17px !important;
    font-family: var(--font-serif) !important;
    transition: border-color 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

.friend-card:hover .friend-avatar {
    border-radius: 50% !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.friend-status-dot {
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    border: 2px solid #0a0a0a !important;
    z-index: 2 !important;
}

.friend-status-dot.online {
    background: #ffffff !important;
}

.friend-status-dot.offline {
    background: rgba(255, 255, 255, 0.2) !important;
}

.friend-name-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
}

.friend-name {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #ffffff !important;
}

.friend-status-text {
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.3) !important;
    margin-top: 0 !important;
}

.friend-actions-right {
    display: flex !important;
    gap: 4px !important;
    width: auto !important;
    justify-content: flex-start !important;
    margin-top: 0 !important;
    margin-left: auto !important;
    opacity: 0 !important;
    transition: opacity 0.2s ease !important;
}

.friend-card:hover .friend-actions-right {
    opacity: 1 !important;
}

.friend-actions-right .action-btn {
    width: 34px !important;
    height: 34px !important;
    border-radius: 8px !important;
    background: transparent !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.35) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: color 0.2s ease, background 0.2s ease !important;
}

.friend-actions-right .action-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    transform: none !important;
}

.friend-actions-right .action-btn svg {
    width: 16px !important;
    height: 16px !important;
}


/* --- NOTIFICATIONS (УВЕДОМЛЕНИЯ) TERMINAL LIST --- */
.notifications-feed-list {
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    padding: var(--spacing-lg) 40px !important;
    overflow-y: auto !important;
    flex-grow: 1 !important;
}

.notification-item {
    background: rgba(255, 255, 255, 0.015) !important;
    border: 1px solid rgba(255, 255, 255, 0.03) !important;
    border-radius: 16px !important;
    padding: 18px 22px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    flex-shrink: 0 !important;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.005) !important;
    backdrop-filter: blur(10px) !important;
}

.notification-item:hover {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    transform: translateY(-2px) !important;
    box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.015), 0 8px 24px rgba(0, 0, 0, 0.25) !important;
}

.notification-item.unread {
    background: rgba(255, 255, 255, 0.025) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.015) !important;
}

.notif-card-header {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    position: relative !important;
    width: 100% !important;
}

.notif-avatar {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.04) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    flex-shrink: 0 !important;
    text-transform: uppercase !important;
    user-select: none !important;
}

.notif-avatar-combo {
    position: relative !important;
    width: 44px !important;
    height: 44px !important;
    flex-shrink: 0 !important;
}

.notif-avatar-combo .group-avatar {
    width: 34px !important;
    height: 34px !important;
    border-radius: 8px !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    font-size: 12px !important;
}

.notif-avatar-combo .sender-avatar-mini {
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
    font-size: 8px !important;
    border: 1.5px solid #0d0d0d !important;
    background: rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

.notif-meta-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    flex-grow: 1 !important;
}

.notif-user-name {
    font-weight: 700 !important;
    color: #ffffff !important;
    font-size: 14px !important;
}

.notif-time {
    font-size: 10px !important;
    font-family: var(--font-mono) !important;
    color: rgba(255, 255, 255, 0.35) !important;
    letter-spacing: 0.2px !important;
}

.notif-unread-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background-color: #ffffff !important;
    flex-shrink: 0 !important;
    box-shadow: 0 0 10px #ffffff !important;
    margin-right: 8px !important;
}

.notif-close-btn {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: transparent !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.25) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
}

.notif-close-btn svg {
    width: 16px !important;
    height: 16px !important;
    stroke-width: 2px !important;
}

.notification-item:hover .notif-close-btn {
    color: rgba(255, 255, 255, 0.5) !important;
}

.notif-close-btn:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.05) !important;
    transform: rotate(90deg) !important;
}

.notif-card-body {
    padding-left: 58px !important;
    margin-top: -4px !important;
}

.notif-message-text {
    font-size: 13.5px !important;
    color: rgba(255, 255, 255, 0.75) !important;
    line-height: 1.55 !important;
    margin: 0 !important;
}

.notification-item.unread .notif-message-text {
    color: #ffffff !important;
}

.notif-card-actions {
    padding-left: 58px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: 6px !important;
}

.notif-reply-form {
    display: flex !important;
    width: 100% !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.notif-reply-input {
    flex-grow: 1 !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
    background: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    padding: var(--spacing-sm) 14px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    outline: none !important;
    transition: all 0.2s ease !important;
}

.notif-reply-input:focus {
    border-color: rgba(255, 255, 255, 0.25) !important;
    background: rgba(0, 0, 0, 0.3) !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.02) !important;
}

.notif-action-btn {
    font-family: var(--font-sans) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    padding: 10px 20px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: rgba(255, 255, 255, 0.02) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    min-width: 120px !important;
    text-align: center !important;
}

.notif-action-btn:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

.notif-action-btn.primary {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

.notif-action-btn.primary:hover {
    background: rgba(255, 255, 255, 0.15) !important;
}

.notif-action-btn.success {
    color: #85e3b2 !important;
    border-color: rgba(133, 227, 178, 0.2) !important;
    background: rgba(133, 227, 178, 0.03) !important;
}

.notif-action-btn.success:hover {
    background: rgba(133, 227, 178, 0.08) !important;
    border-color: rgba(133, 227, 178, 0.4) !important;
}

.notif-action-btn.danger {
    color: #ff8585 !important;
    border-color: rgba(255, 133, 133, 0.2) !important;
    background: rgba(255, 133, 133, 0.03) !important;
}

.notif-action-btn.danger:hover {
    background: rgba(255, 133, 133, 0.08) !important;
    border-color: rgba(255, 133, 133, 0.4) !important;
}

.notif-action-btn.notif-btn-bw {
    color: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    background: rgba(255, 255, 255, 0.04) !important;
}

.notif-action-btn.notif-btn-bw:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}

.notif-not-friend-hint {
    font-family: var(--font-sans) !important;
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.35) !important;
    font-style: italic !important;
    margin-top: 6px !important;
    padding: var(--spacing-xs) 0 !important;
}

.notif-empty-state {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-grow: 1 !important;
    height: 100% !important;
    text-align: center !important;
    padding: 40px 0 !important;
}

.notif-empty-state .helper-text {
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.35) !important;
    letter-spacing: 0.5px !important;
    font-family: var(--font-sans) !important;
}

@media (max-width: 768px) {
    .notif-card-body,
    .notif-card-actions {
        padding-left: 0 !important;
    }
    .notifications-feed-list {
        padding: var(--spacing-md) !important;
    }
    .notification-item {
        padding: 14px 16px !important;
        gap: 10px !important;
    }
    .notif-reply-form {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .notif-reply-form .notif-reply-input {
        width: 100% !important;
    }
    .notif-reply-form .notif-action-btn {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }
}


/* --- SETTINGS (НАСТРОЙКИ) EXTRA DETAILS --- */
.settings-card-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
    gap: 12px !important;
    margin-top: 16px !important;
    margin-bottom: 24px !important;
}

.settings-status-card {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 12px !important;
    padding: 14px 18px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.settings-status-card .card-label {
    font-size: 10px !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.35) !important;
    font-family: var(--font-sans) !important;
}

.settings-status-card .card-value {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    font-family: var(--font-mono) !important;
}

.settings-form-row {
    margin-top: 16px !important;
    padding-top: 16px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.settings-toggle-label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    cursor: pointer !important;
}

.settings-toggle-label input[type="checkbox"] {
    display: none !important;
}

.toggle-custom-box {
    width: 32px !important;
    height: 18px !important;
    border-radius: 9px !important;
    border: 1.5px solid rgba(255, 255, 255, 0.2) !important;
    background: transparent !important;
    position: relative !important;
    transition: all 0.3s ease !important;
    flex-shrink: 0 !important;
    margin-top: 2px !important;
}

.toggle-custom-box::after {
    content: '' !important;
    position: absolute !important;
    top: 2px !important;
    left: 2px !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.4) !important;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.settings-toggle-label input[type="checkbox"]:checked + .toggle-custom-box {
    background: #ffffff !important;
    border-color: #ffffff !important;
}

.settings-toggle-label input[type="checkbox"]:checked + .toggle-custom-box::after {
    left: 16px !important;
    background: #000000 !important;
}

.toggle-title {
    display: block !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
}

.toggle-desc {
    display: block !important;
    font-size: 11px !important;
    color: rgba(255, 255, 255, 0.35) !important;
    margin-top: 2px !important;
}

/* 2FA Card setup */
.security-setup-wrapper {
    display: flex !important;
    gap: 24px !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 16px !important;
    padding: var(--spacing-lg) !important;
    align-items: center !important;
    margin-top: 16px !important;
}

.security-qr-mock {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    width: 140px !important;
    flex-shrink: 0 !important;
}

.qr-code-grid {
    display: grid !important;
    grid-template-columns: repeat(8, 12px) !important;
    grid-template-rows: repeat(8, 12px) !important;
    gap: 2px !important;
    padding: var(--spacing-sm) !important;
    background: #ffffff !important;
    border-radius: 8px !important;
}

.qr-code-grid span {
    background: #000000 !important;
    width: 12px !important;
    height: 12px !important;
}

.qr-code-grid span:nth-child(3n),
.qr-code-grid span:nth-child(5n),
.qr-code-grid span:nth-child(11n),
.qr-code-grid span:nth-child(17n) {
    visibility: hidden !important;
}

.qr-code-scan-text {
    font-size: 9px !important;
    color: rgba(255, 255, 255, 0.3) !important;
    text-align: center !important;
    line-height: 1.3 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.security-details-box {
    flex-grow: 1 !important;
}

/* Admin console box */
.console-box {
    height: 140px !important;
    background: #080808 !important;
    border: 1px dashed rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    color: rgba(255, 255, 255, 0.7) !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    box-shadow: inset 0 4px 12px rgba(0, 0, 0, 0.8) !important;
}

.console-line {
    line-height: 1.4 !important;
    white-space: pre-wrap !important;
    word-break: break-all !important;
}

.console-line .log-time {
    color: rgba(255, 255, 255, 0.3) !important;
}


/* --- CHAT DELETE MESSAGE & CROWN BADGE --- */
.message-bubble-wrap {
    position: relative !important;
}

.msg-actions-overlay {
    position: absolute !important;
    right: 8px !important;
    top: -12px !important;
    display: flex !important;
    gap: 4px !important;
    background: rgba(15, 15, 15, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 8px !important;
    padding: 2px 4px !important;
    z-index: 5 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

.message-bubble-wrap:hover .msg-actions-overlay {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.msg-action-btn {
    width: 24px !important;
    height: 24px !important;
    border-radius: 6px !important;
    border: none !important;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.5) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.msg-action-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
}

.msg-action-btn.delete:hover {
    background: rgba(255, 77, 77, 0.15) !important;
    color: #ff4d4d !important;
}

.msg-action-btn svg {
    width: 13px !important;
    height: 13px !important;
}

.admin-crown {
    color: #ffffff !important;
    font-size: 11px !important;
    margin-left: 6px !important;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.6)) !important;
}


/* --- QUICK ACCESS SIDEBAR PANEL --- */
.sidebar-divider {
    width: 32px !important;
    height: 1.5px !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
    margin: 10px auto 0 auto !important;
    border-radius: 1px !important;
    flex-shrink: 0 !important;
}

.sidebar-quick-access {
    margin: 12px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    flex-grow: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    width: 100% !important;
    justify-content: flex-start !important;
    padding-top: 10px !important;
}

.quick-access-items {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    flex-shrink: 0 !important;
}

.quick-btn.add-quick-btn {
    border-style: dashed !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    background: transparent !important;
    opacity: 0.65;
    margin-top: 4px !important;
}

.quick-btn.add-quick-btn:hover {
    opacity: 1 !important;
    background: #ffffff !important;
    color: #000000 !important;
    border-style: solid !important;
    border-color: #ffffff !important;
}

.quick-btn {
    width: 38px !important;
    height: 38px !important;
    flex-shrink: 0 !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: var(--text-secondary) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    position: relative !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.quick-btn:hover {
    background: #ffffff !important;
    color: #000000 !important;
    border-color: #ffffff !important;
    transform: scale(1.08) !important;
}

.help-quick-btn {
    margin-bottom: 12px !important;
}

.quick-btn svg {
    width: 16px !important;
    height: 16px !important;
}

.quick-avatar {
    font-family: var(--font-sans) !important;
    font-style: normal !important;
    text-transform: uppercase !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

.quick-status-dot {
    position: absolute !important;
    bottom: -2px !important;
    right: -2px !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background-color: var(--text-muted) !important;
    border: 2px solid #000000 !important;
}

.quick-status-dot.online {
    background-color: #ffffff !important;
}

/* --- UNIFIED PANELS (Friends, Notifications, Settings) --- */
.friends-unified-panel,
.settings-unified-panel {
    width: 100%;
    height: 100%;
    /* Abstract wabi-sabi background */
    background: radial-gradient(circle at 75% 25%, rgba(255,255,255,0.03) 0%, transparent 50%),
                radial-gradient(circle at 20% 80%, rgba(255,255,255,0.015) 0%, transparent 40%),
                var(--bg-primary) !important;
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
}

.notifications-unified-panel {
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 75% 25%, rgba(255,255,255,0.03) 0%, transparent 50%),
                radial-gradient(circle at 20% 80%, rgba(255,255,255,0.015) 0%, transparent 40%),
                var(--bg-primary) !important;
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
}

.notifications-unified-panel .unified-glass-card {
    width: 100% !important;
    height: 100% !important;
    flex-grow: 1 !important;
}

.friends-unified-panel,
.notifications-unified-panel {
    overflow-y: hidden;
}

.settings-unified-panel {
    overflow: hidden;
}

/* Floating Glass Card Wrapper */
.unified-glass-card {
    width: 100%;
    height: 100%;
    flex-grow: 1;
    background: rgba(10, 10, 10, 0.4);
    backdrop-filter: blur(40px) saturate(1.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-xl);
    box-shadow: 0 40px 80px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(255,255,255,0.02);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.friends-unified-header {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    margin-bottom: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 28px 40px 20px 40px !important;
    background: rgba(255, 255, 255, 0.01) !important;
    flex-shrink: 0 !important;
}

.notifications-unified-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: var(--spacing-xl) 40px 24px 40px !important;
    background: rgba(255, 255, 255, 0.01) !important;
    flex-shrink: 0 !important;
}

.friends-header-left {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
}

.friends-header-top-row {
    display: flex !important;
    align-items: baseline !important;
    gap: 16px !important;
}

.friends-count-title {
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.35) !important;
    font-weight: 400 !important;
}

.pending-indicator-dot {
    display: inline-block !important;
    width: 6px !important;
    height: 6px !important;
    background: #ffffff !important;
    border-radius: 50% !important;
    margin-left: 6px !important;
    vertical-align: middle !important;
}

.friends-title {
    font-size: 32px !important;
    font-family: var(--font-serif) !important;
    margin: 0 !important;
    font-weight: 400 !important;
    font-style: italic !important;
}

/* --- NEW FRIENDS HEADER & ACTIONS LAYOUT --- */
.friends-header-main-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
}

.friends-header-actions {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
}

.friends-action-btn {
    background: transparent !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.4) !important;
    cursor: pointer !important;
    padding: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    border-radius: 8px !important;
    width: 36px !important;
    height: 36px !important;
}

.friends-action-btn:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.06) !important;
}

.friends-action-btn:active {
    transform: scale(0.95) !important;
}

.friends-action-btn svg {
    width: 18px !important;
    height: 18px !important;
}

.friends-header-secondary-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    margin-top: 14px !important;
}

#friends-add-toggle-btn {
    display: none !important;
}

/* Inline search bar */
.friends-inline-search-bar {
    width: 100% !important;
    margin-top: 12px !important;
    padding: 0 !important;
    display: block !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    opacity: 1 !important;
    height: auto !important;
    overflow: hidden !important;
}

.friends-inline-search-bar.hidden {
    display: none !important;
    opacity: 0 !important;
    height: 0 !important;
    margin-top: 0 !important;
}

@media (min-width: 769px) {
    .friends-header-secondary-row {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 16px !important;
        flex-wrap: wrap !important;
    }
    .friends-count-title {
        order: 1 !important;
        margin-right: 8px !important;
    }
    .friends-inline-search-bar {
        order: 2 !important;
        width: 220px !important;
        margin-top: 0 !important;
    }
    .friends-filter-nav {
        order: 3 !important;
        margin-left: auto !important;
    }
}

.friends-search-input-wrapper {
    position: relative !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
}

.friends-search-icon {
    position: absolute !important;
    left: 14px !important;
    width: 16px !important;
    height: 16px !important;
    color: rgba(255, 255, 255, 0.35) !important;
    pointer-events: none !important;
}

#friends-local-search-input {
    width: 100% !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 12px !important;
    padding: 10px 40px 10px 40px !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-family: var(--font-sans) !important;
    outline: none !important;
    transition: all 0.2s ease !important;
}

#friends-local-search-input:focus {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.02) !important;
}

.friends-clear-btn {
    position: absolute !important;
    right: 12px !important;
    background: transparent !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.4) !important;
    cursor: pointer !important;
    padding: var(--spacing-xs) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
}

.friends-clear-btn:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

.friends-clear-btn svg {
    width: 14px !important;
    height: 14px !important;
}

/* --- SETTINGS SPECIFIC INTERNAL LAYOUT --- */
.settings-unified-container {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: row !important;
}

.settings-menu-inner {
    width: 280px;
    background: rgba(255, 255, 255, 0.01);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    padding: 40px 24px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.settings-unified-title {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 24px;
    font-weight: 400;
    margin-bottom: 32px;
}

.settings-content-inner {
    flex-grow: 1;
    padding: 40px 50px;
    overflow-y: auto;
    background: transparent;
}

/* --- PREMIUM TAB SLIDE-UP GLIDE --- */
.view-panel {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                visibility 0.3s,
                left 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                width 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.view-panel.panel-hidden {
    opacity: 0;
    transform: translateY(12px) scale(0.995);
    visibility: hidden;
    pointer-events: none;
}

/* --- MOBILE & TABLET ADAPTATIONS --- */
@media (max-width: 1024px) {
    .friends-unified-panel,
    .notifications-unified-panel,
    .settings-unified-panel {
        margin: var(--spacing-md) !important;
        width: calc(100% - 32px) !important;
        height: calc(100% - 32px) !important;
    }
    
    .friends-unified-header,
    .notifications-unified-header {
        padding-left: 64px !important;
    }
    
    .settings-unified-container {
        flex-direction: column !important;
        padding-top: 64px !important;
    }
    
    .settings-menu-inner {
        width: 100% !important;
        height: auto !important;
        border-right: none !important;
        border-bottom: 1px solid var(--border-color) !important;
        padding: 20px !important;
    }
    
    .settings-menu-inner .settings-unified-title {
        display: none !important;
    }
    
    .settings-content-inner {
        padding: 20px !important;
        overflow-y: visible !important;
    }
}

/* --- LOVE HUB INTERACTION MODAL --- */
.hub-modal-card {
    background: rgba(10, 10, 10, 0.96) !important;
    backdrop-filter: blur(30px) saturate(1.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 28px 32px !important;
    box-shadow: 0 24px 80px rgba(0,0,0,0.85), 0 0 0 1px rgba(255,255,255,0.04) inset !important;
    margin: auto !important;
    animation: hubModalSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Полноэкранная карточка для списков (Идеи / Баги) */
.hub-fullscreen-card {
    width: 820px !important;
    max-width: 92vw !important;
    height: 80vh !important;
    max-height: 800px !important;
}

/* Компактная карточка для форм (Предложить идею / Сообщить об ошибке) */
.hub-form-card {
    width: 480px !important;
    max-width: 90vw !important;
}

@keyframes hubModalSlideIn {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.hub-modal-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding-bottom: 16px !important;
    margin-bottom: 20px !important;
    flex-shrink: 0 !important;
}

.hub-modal-header h3 {
    font-family: var(--font-serif) !important;
    font-style: italic !important;
    font-size: 22px !important;
    margin: 0 !important;
}

.hub-modal-content {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    overflow: hidden !important;
    gap: 16px !important;
}

.hub-modal-list {
    flex-grow: 1 !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding-right: 6px !important;
}

/* Скроллбар для списка */
.hub-modal-list::-webkit-scrollbar { width: 4px !important; }
.hub-modal-list::-webkit-scrollbar-track { background: transparent !important; }
.hub-modal-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12) !important; border-radius: 4px !important; }
.hub-modal-list::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25) !important; }

/* Контейнер формы */
#hub-form-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.editing-active {
    outline: 1px dashed rgba(255, 255, 255, 0.3) !important;
    outline-offset: 4px !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border-radius: 4px !important;
}

/* Modal list items */
.hub-list-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: var(--spacing-md) 20px !important;
    background: rgba(255, 255, 255, 0.015) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 14px !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.hub-list-item:hover {
    border-color: rgba(255, 255, 255, 0.18) !important;
    background: rgba(255, 255, 255, 0.03) !important;
    transform: translateY(-1px) !important;
}

.hub-item-left {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    flex-grow: 1 !important;
    min-width: 0 !important;
}

.hub-item-right {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-shrink: 0 !important;
    margin-left: 16px !important;
}

.hub-item-title {
    font-weight: 500 !important;
    color: #fff !important;
    font-size: 15px !important;
}

.hub-item-desc {
    color: var(--text-secondary) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}

.hub-item-meta {
    display: flex !important;
    gap: 8px !important;
    margin-top: 4px !important;
    align-items: center !important;
}

.hub-item-votes {
    font-size: 14px !important;
    color: var(--text-primary) !important;
    font-weight: 600 !important;
    font-family: var(--font-mono) !important;
    min-width: 48px !important;
    text-align: center !important;
}

.hub-upvote-btn {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    font-size: 14px !important;
    transition: all 0.2s ease !important;
}

.hub-upvote-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    transform: scale(1.08) !important;
}

.hub-upvote-btn:disabled {
    opacity: 0.4 !important;
    cursor: default !important;
    transform: none !important;
}

.hub-upvote-btn svg { width: 17px !important; height: 17px !important; display: block !important; }

.hub-upvote-btn.voted {
    background: rgba(255, 255, 255, 0.16) !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
    color: #fff !important;
}
.hub-upvote-btn.voted svg { stroke: #fff !important; }

.hub-list-empty {
    text-align: center !important;
    color: var(--text-muted) !important;
    padding: 60px 20px !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}

.delete-admin-btn {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--text-secondary) !important;
    font-family: var(--font-mono) !important;
    font-size: 10px !important;
    padding: var(--spacing-xs) 8px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.delete-admin-btn:hover {
    border-color: #ffffff !important;
    color: #ffffff !important;
}

/* Bug Priorities & Statuses Accents */
.bento-tag.bug.critical {
    background: rgba(235, 87, 87, 0.15) !important;
    color: #eb5757 !important;
    border: 1px solid rgba(235, 87, 87, 0.3) !important;
}
.bento-tag.bug.high {
    background: rgba(242, 153, 74, 0.15) !important;
    color: #f2994a !important;
    border: 1px solid rgba(242, 153, 74, 0.3) !important;
}
.bento-tag.bug.medium {
    background: rgba(242, 201, 76, 0.15) !important;
    color: #f2c94c !important;
    border: 1px solid rgba(242, 201, 76, 0.3) !important;
}
.bento-tag.bug.low {
    background: rgba(39, 174, 96, 0.15) !important;
    color: #27ae60 !important;
    border: 1px solid rgba(39, 174, 96, 0.3) !important;
}

.bug-status.in-progress {
    background: rgba(47, 128, 237, 0.1) !important;
    color: #2f80ed !important;
    border: 1px solid rgba(47, 128, 237, 0.2) !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-size: 11px !important;
}
.bug-status.investigating {
    background: rgba(155, 81, 224, 0.1) !important;
    color: #9b51e0 !important;
    border: 1px solid rgba(155, 81, 224, 0.2) !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-size: 11px !important;
}
.bug-status.fixed {
    background: rgba(39, 174, 96, 0.1) !important;
    color: #27ae60 !important;
    border: 1px solid rgba(39, 174, 96, 0.2) !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-size: 11px !important;
}



/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   NARROW TABLET FIX (769px – 900px)
   On narrow tablets the global sidebar + section sidebar together are too
   wide, so we make the section sidebars full-screen overlays (same as mobile)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 900px) and (min-width: 769px) {
    .conversations-sidebar,
    .channels-sidebar,
    .friends-sidebar,
    .hub-sidebar,
    .settings-sidebar-nav,
    .notifications-sidebar {
        position: fixed !important;
        left: 88px !important;
        top: 0 !important;
        bottom: 0 !important;
        height: 100% !important;
        width: calc(100% - 88px) !important;
        margin: 0 !important;
        border-radius: 0 !important;
        z-index: 2100 !important;
        transform: translateX(0) !important;
        background: #0d0d0d !important;
        overflow: hidden !important;
    }

    .sidebar-collapsed .conversations-sidebar,
    .sidebar-collapsed .channels-sidebar,
    .sidebar-collapsed .friends-sidebar,
    .sidebar-collapsed .hub-sidebar,
    .sidebar-collapsed .settings-sidebar-nav,
    .sidebar-collapsed .notifications-sidebar {
        transform: translateX(-100%) !important;
        opacity: 0 !important;
    }

    .sidebar-header {
        position: relative !important;
        padding-right: 52px !important;
    }

    .sidebar-header .mobile-only-toggle-close {
        display: flex !important;
        position: absolute !important;
        top: 50% !important;
        right: 12px !important;
        left: auto !important;
        transform: translateY(-50%) !important;
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        background: transparent !important;
        border: none !important;
        color: var(--text-secondary) !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        transition: all 0.2s !important;
    }

    .sidebar-header .mobile-only-toggle-close svg {
        width: 18px !important;
        height: 18px !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MOBILE NAVIGATION BAR & OPTIMIZATION (<= 768px)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 768px) {
    /* Prevent lists from being covered by bottom nav bar (60px) */
    .conversations-list,
    .channels-list,
    .friends-list-content,
    .notifications-feed-list,
    .settings-sidebar,
    .settings-content-scroll,
    .spaces-accordion {
        padding-bottom: 80px !important;
    }

    /* 1. Revert hiding rules from tablet (950px) breakpoint */
    .sidebar-title,
    .search-box,
    .server-title-display,
    .channel-category-title,
    .channel-item span,
    .friends-filter-nav,
    .hub-nav,
    .settings-menu-list,
    .sidebar-server-title {
        display: flex !important;
    }

    .conv-meta {
        display: block !important;
    }
    
    .sidebar-header .compose-btn,
    .unread-indicator {
        display: flex !important;
    }

    .conversation-item {
        justify-content: flex-start !important;
        padding: 12px 16px !important;
    }
    
    .conv-avatar-wrap {
        margin-right: 12px !important;
    }

    /* 2. Main app container */
    .app-container {
        padding-bottom: 60px !important; 
    }

    /* 3. Bottom Navigation Bar */
    body .app-container .global-sidebar,
    body .app-container.sidebar-collapsed .global-sidebar {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 60px !important;
        margin: 0 !important;
        padding: 0 16px !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-around !important;
        align-items: center !important;
        border-radius: 0 !important; /* Flat top to prevent gap leaks */
        border: none !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
        background: rgba(10, 10, 10, 0.95) !important;
        backdrop-filter: blur(30px) saturate(1.2) !important;
        z-index: 2000 !important;
        transform: none !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.4) !important;
    }

    .notifications-unified-header {
        padding: var(--spacing-md) !important;
        background: rgba(255, 255, 255, 0.01) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
        margin-bottom: 0 !important;
        height: auto !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
    }

    .notif-actions-top {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        justify-content: flex-end !important;
    }
    
    .notif-action-text-btn {
        text-align: right !important;
        line-height: 1.2 !important;
        padding: 6px 8px !important;
    }

    body .app-container .global-sidebar .sidebar-quick-access {
        display: none !important;
    }

    /* Кнопка-гайд "Как закреплять" — только на ПК, на мобиле лишняя 6-я кнопка */
    body .app-container .global-sidebar #help-quick-access-btn {
        display: none !important;
    }

    .sidebar-divider {
        display: none !important;
    }

    body .app-container .global-sidebar .global-nav {
        display: contents !important; /* Flatten menu items to directly align with logo-nav-area */
    }
    
    body .app-container .global-sidebar .sidebar-footer {
        position: absolute !important;
        bottom: 0 !important;
        right: 0 !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
    }

    /* Floating More Menu for Mobile */
    body .app-container .global-sidebar #nav-hub, 
    body .app-container .global-sidebar #nav-settings, 
    body .app-container .global-sidebar #nav-profile-btn {
        position: absolute !important;
        right: 16px !important;
        background: rgba(15, 15, 15, 0.98) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 50% !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateY(20px) scale(0.9) !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        z-index: 2010 !important;
        width: 44px !important;
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    body .app-container .global-sidebar #nav-hub { bottom: 80px !important; }
    body .app-container .global-sidebar #nav-settings { bottom: 136px !important; }
    body .app-container .global-sidebar #nav-profile-btn { bottom: 192px !important; }

    /* Open state for floating menu */
    body .app-container .global-sidebar.more-open #nav-hub,
    body .app-container .global-sidebar.more-open #nav-settings,
    body .app-container .global-sidebar.more-open #nav-profile-btn {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) scale(1) !important;
    }

    body .app-container .global-sidebar #mobile-more-trigger {
        display: flex !important;
        border-radius: 50% !important;
    }

    body .app-container .global-sidebar #mobile-more-trigger svg {
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), filter 0.4s ease !important;
    }

    body .app-container .global-sidebar #mobile-more-trigger:hover {
        border-radius: 12px !important;
        background: rgba(255, 255, 255, 0.04) !important;
        transform: none !important;
    }

    body .app-container .global-sidebar #mobile-more-trigger:hover svg {
        transform: none !important;
        filter: none !important;
    }

    /* Стиль кнопки "Еще" при открытом меню или нажатии (квадратный хайлайт) */
    body .app-container .global-sidebar.more-open #mobile-more-trigger,
    body .app-container .global-sidebar #mobile-more-trigger:active {
        color: #ffffff !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border-radius: 12px !important;
        transform: none !important;
    }

    /* Иконка кнопки "Еще" анимируется только когда меню открыто */
    body .app-container .global-sidebar.more-open #mobile-more-trigger svg {
        transform: scale(1.1) rotate(8deg) !important;
        filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.3)) !important;
    }

    /* Enable and style nav buttons and logo-nav-area on mobile */
    body .app-container .global-sidebar .logo-nav-area,
    body .app-container .global-sidebar .nav-btn {
        display: flex !important;
        position: relative !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        margin: 0 !important;
        padding: 0 !important;
        cursor: pointer !important;
        width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        flex-shrink: 0 !important;
        border-radius: 50% !important;
        color: var(--text-secondary) !important;
        align-items: center !important;
        justify-content: center !important;
        transition: all 0.3s ease !important;
    }

    body .app-container .global-sidebar .logo-nav-area:hover,
    body .app-container .global-sidebar .nav-btn:hover {
        background: rgba(255, 255, 255, 0.04) !important;
    }

    body .app-container .global-sidebar .logo-nav-area.active,
    body .app-container .global-sidebar .nav-btn.active {
        color: #ffffff !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border-radius: 12px !important;
    }
    
    body .app-container .global-sidebar .logo-icon, 
    body .app-container .global-sidebar .nav-btn svg {
        width: 24px !important;
        height: 24px !important;
        flex-shrink: 0 !important;
        fill: none;
    }

    body .app-container .global-sidebar .logo-nav-area.active svg,
    body .app-container .global-sidebar .nav-btn.active svg {
        filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.4)) !important;
    }

    body .app-container .global-sidebar .logo-icon {
        position: absolute !important;
        left: calc(50% - 12px) !important;
        top: calc(50% - 12px) !important;
    }

    body .app-container .global-sidebar #logo-icon-heart {
        fill: currentColor !important;
    }

    body .app-container .global-sidebar #logo-icon-bubble {
        fill: none !important;
        stroke: currentColor !important;
    }

    /* 4. Full screen sidebars (Conversations, etc.) */
    .conversations-sidebar,
    .channels-sidebar,
    .friends-sidebar,
    .hub-sidebar,
    .settings-sidebar-nav,
    .notifications-sidebar {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        bottom: 0 !important; /* Extend fully to bottom */
        height: 100% !important; /* Cover the whole screen */
        width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        z-index: 1999 !important; /* Below bottom nav (2000) but above chat area */
        transform: translateX(0) !important;
        background: #0d0d0d !important; /* Solid background to prevent overlap */
        overflow: hidden !important;
    }

    .sidebar-header {
        padding-right: 52px !important;
        position: relative !important;
    }

    .sidebar-header .mobile-only-toggle-close {
        display: flex !important;
        position: absolute !important;
        top: 50% !important;
        right: 12px !important;
        left: auto !important;
        transform: translateY(-50%) !important;
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        background: transparent !important;
        border: none !important;
        color: var(--text-secondary) !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        transition: all 0.2s !important;
    }
    
    .sidebar-header .mobile-only-toggle-close:hover,
    .sidebar-header .mobile-only-toggle-close:active {
        color: var(--text-primary) !important;
        background: rgba(255, 255, 255, 0.05) !important;
    }
    
    .sidebar-header .mobile-only-toggle-close svg {
        width: 18px !important;
        height: 18px !important;
        transform: none !important;
        transition: none !important;
    }
    
    .sidebar-header .compose-btn {
        margin-left: auto !important; /* Push buttons to the right */
        display: flex !important;
    }

    .sidebar-collapsed .conversations-sidebar,
    .sidebar-collapsed .channels-sidebar,
    .sidebar-collapsed .friends-sidebar,
    .sidebar-collapsed .hub-sidebar,
    .sidebar-collapsed .settings-sidebar-nav,
    .sidebar-collapsed .notifications-sidebar {
        transform: translateX(-100%) !important;
        opacity: 0 !important;
    }

    /* 5. Main Chat Area */
    .view-panel {
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        height: calc(100% - 60px) !important;
        position: fixed !important;
    }

    .chat-area,
    .server-content-wrapper,
    .room-view-panel,
    .friends-unified-panel,
    .hub-bento-dashboard,
    .settings-unified-panel,
    .notifications-unified-panel {
        margin: 0 !important;
        width: 100% !important;
        height: 100% !important;
        border-radius: 0 !important;
        border: none !important;
    }

    .friends-unified-panel,
    .notifications-unified-panel {
        padding: 0 !important;
    }

    .friends-unified-panel .unified-glass-card,
    .notifications-unified-panel .unified-glass-card {
        border-radius: 0 !important;
        border: none !important;
        background: transparent !important;
    }

    .chat-header, 
    .room-header, 
    .voice-header-bar,
    .bento-header {
        padding-left: 56px !important;
        padding-right: 16px !important;
        height: 60px !important;
    }

    .friends-unified-header {
        padding: var(--spacing-md) !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        background: transparent !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
        margin-bottom: 0 !important;
    }



    .friends-title {
        font-family: var(--font-serif) !important;
        font-weight: 400 !important;
        font-style: italic !important;
        font-size: 28px !important;
        color: #ffffff !important;
    }

    .hub-modal-header h3 {
        font-size: 24px !important;
    }

    .friends-count-title {
        display: none !important;
    }

    #friends-add-toggle-btn {
        display: flex !important;
    }

    .friends-filter-nav {
        display: flex !important;
        gap: 6px !important;
        padding: 0 !important;
        margin: var(--spacing-xs) 0 !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
        margin-left: 0 !important;
    }

    .friends-filter-nav::-webkit-scrollbar {
        display: none !important;
    }

    .friends-filter-nav .add-friend-tab {
        display: none !important;
    }

    .friends-filter-nav .filter-tab {
        padding: var(--spacing-sm) 16px !important;
        border-radius: 99px !important;
        background: rgba(255, 255, 255, 0.03) !important;
        color: rgba(255, 255, 255, 0.4) !important;
        font-size: 13px !important;
        border: 1px solid rgba(255, 255, 255, 0.04) !important;
        flex-shrink: 0 !important;
    }

    .friends-filter-nav .filter-tab.active {
        background: rgba(255, 255, 255, 0.08) !important;
        color: #ffffff !important;
        border-color: rgba(255, 255, 255, 0.12) !important;
    }
    
    .sidebar-toggle-trigger {
        left: 12px !important;
        top: 12px !important;
        z-index: 1010 !important;
        display: flex !important;
        width: 36px !important;
        height: 36px !important;
    }
    
    /* 6. Fix Chat Input & Squished SVGs */
    .chat-input-area {
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 12px 16px !important;
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        z-index: 100 !important;
        pointer-events: none !important;
    }

    .chat-feed, #room-chat-feed {
        padding-bottom: 84px !important;
    }

    .message-input-form {
        padding: 6px 10px !important;
        gap: 6px !important;
        pointer-events: auto !important;
        background: rgba(255, 255, 255, 0.02) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        box-shadow: none !important;
    }

    .message-input-form input {
        min-width: 0 !important;
        font-size: 13.5px !important;
        height: 28px !important;
    }

    .input-controls-left {
        gap: 4px !important;
        flex-shrink: 0 !important;
    }

    .input-control-btn, .send-btn, .voice-btn {
        flex-shrink: 0 !important;
        width: 32px !important;
        height: 32px !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        padding: 0 !important;
        color: #ffffff !important;
        transition: none !important;
    }

    .input-control-btn:hover, .send-btn:hover, .voice-btn:hover,
    .input-control-btn:focus, .send-btn:focus, .voice-btn:focus,
    .input-control-btn:active, .send-btn:active, .voice-btn:active {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        color: #ffffff !important;
        outline: none !important;
    }

    .input-control-btn svg, .send-btn svg, .voice-btn svg {
        width: 18px !important;
        height: 18px !important;
        flex-shrink: 0 !important;
        fill: none; /* Reset fill for stroke-based svgs */
    }
    
    .send-btn svg {
        fill: currentColor; /* Send button uses fill */
    }

    /* 7. Modal dialogs */
    .hub-fullscreen-card {
        width: 100% !important;
        height: calc(100% - 60px) !important;
        max-width: none !important;
        max-height: none !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }
    
    .hub-form-card {
        width: calc(100% - 32px) !important;
        margin: var(--spacing-md) !important;
    }
    
    .modal-backdrop .profile-card {
        width: calc(100% - 32px);
        max-width: 360px;
        margin: var(--spacing-md);
        padding: var(--spacing-lg) 16px !important;
        box-sizing: border-box !important;
    }
    
    .settings-unified-container {
        padding-top: 56px !important;
    }

    .room-tabs {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
        padding: var(--spacing-sm) 12px !important;
    }

    .room-tab {
        padding: var(--spacing-sm) !important;
        justify-content: center !important;
        text-align: center !important;
        border-radius: 8px !important;
    }

    .room-tab-hint,
    .room-tab-arrow {
        display: none !important;
    }

    .room-tab-body {
        align-items: center !important;
    }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ADDITIONS: FRIEND REQUESTS CATEGORIES AND ADD TAB CENTERING
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.friends-category-header {
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.35) !important;
    letter-spacing: 0.8px !important;
    margin-top: 24px !important;
    margin-bottom: 12px !important;
    padding-left: 16px !important;
    font-family: var(--font-sans) !important;
}

.friends-empty-category {
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.25) !important;
    font-style: italic !important;
    padding: var(--spacing-md) 24px !important;
    font-family: var(--font-sans) !important;
}

.friends-category-divider {
    height: 1px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    margin: var(--spacing-lg) 16px !important;
}

.pending-indicator-dot.hidden {
    display: none !important;
}

/* Force action buttons to be visible on request cards */
.friend-card.request-card .friend-actions-right {
    opacity: 1 !important;
}

/* Specific styling for accept/reject/cancel buttons in requests - Strictly Monochrome */
.friend-actions-right .action-btn.accept-btn {
    border: 1.5px solid rgba(255, 255, 255, 0.2) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    color: #ffffff !important;
}
.friend-actions-right .action-btn.accept-btn:hover {
    background: #ffffff !important;
    color: #000000 !important;
    border-color: #ffffff !important;
    transform: translateY(-1px) !important;
}

.friend-actions-right .action-btn.reject-btn {
    border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
    background: rgba(255, 255, 255, 0.02) !important;
    color: rgba(255, 255, 255, 0.5) !important;
}
.friend-actions-right .action-btn.reject-btn:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-1px) !important;
}

.friend-actions-right .action-btn.cancel-btn {
    border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
    background: rgba(255, 255, 255, 0.03) !important;
    color: rgba(255, 255, 255, 0.5) !important;
}
.friend-actions-right .action-btn.cancel-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    transform: translateY(-1px) !important;
}

.friend-actions-right .action-btn.chat-direct-action,
.friend-actions-right .action-btn.call-action {
    border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
    background: rgba(255, 255, 255, 0.02) !important;
    color: rgba(255, 255, 255, 0.5) !important;
}
.friend-actions-right .action-btn.chat-direct-action:hover,
.friend-actions-right .action-btn.call-action:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-1px) !important;
}

/* Centered Add Friend View styling */
.add-friend-centered-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 540px !important;
    text-align: center !important;
    padding: 40px 24px !important;
    margin: auto !important;
    box-sizing: border-box !important;
    flex-grow: 1 !important;
    height: 100% !important;
}

.add-friend-title {
    font-size: 32px !important;
    font-family: var(--font-serif) !important;
    font-weight: 400 !important;
    font-style: italic !important;
    margin-bottom: 16px !important;
    opacity: 0.9 !important;
    color: #ffffff !important;
}

.add-friend-desc {
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 15px !important;
    max-width: 400px !important;
    line-height: 1.5 !important;
    margin-bottom: 40px !important;
    font-family: var(--font-sans) !important;
}

.add-friend-form-element {
    width: 100% !important;
}

.add-friend-input-wrapper {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
}

.add-friend-input-wrapper .search-icon-svg {
    position: absolute !important;
    left: 24px !important;
    width: 20px !important;
    height: 20px !important;
    color: rgba(255, 255, 255, 0.3) !important;
    pointer-events: none !important;
}

.add-friend-text-input {
    width: 100% !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 40px !important;
    padding: 20px 180px 20px 60px !important;
    font-size: 16px !important;
    color: #fff !important;
    font-family: var(--font-sans) !important;
    outline: none !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
}

.add-friend-text-input:focus {
    border-color: rgba(255, 255, 255, 0.25) !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

.add-friend-submit-btn {
    position: absolute !important;
    right: 8px !important;
    border-radius: 32px !important;
    padding: 12px 24px !important;
    font-size: 14px !important;
    height: calc(100% - 16px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.add-friend-pulse-decor {
    margin-top: 40px !important;
    opacity: 0.5 !important;
}

.add-friend-pulse-decor svg {
    width: 40px !important;
    height: 40px !important;
    animation: pulse 4s infinite alternate !important;
}

@keyframes pulse {
    0% { opacity: 0.3; transform: scale(0.96); }
    100% { opacity: 0.7; transform: scale(1.04); }
}

/* Mobile responsive adjustments for Add Friend */
@media (max-width: 580px) {
    .add-friend-title {
        font-size: 26px !important;
        margin-bottom: 12px !important;
    }
    .add-friend-desc {
        font-size: 14px !important;
        margin-bottom: 28px !important;
    }
    .add-friend-input-wrapper {
        flex-direction: column !important;
        gap: 12px !important;
    }
    .add-friend-text-input {
        padding: var(--spacing-md) 20px 16px 50px !important;
        font-size: 15px !important;
        border-radius: 16px !important;
    }
    .add-friend-input-wrapper .search-icon-svg {
        left: 18px !important;
        top: 18px !important;
    }
    .add-friend-submit-btn {
        position: static !important;
        width: 100% !important;
        border-radius: 16px !important;
        padding: var(--spacing-md) !important;
        height: auto !important;
    }
    .add-friend-pulse-decor {
        margin-top: 24px !important;
    }
}

/* Inline action buttons directly next to the nickname */
.friend-actions-inline {
    display: flex !important;
    gap: 6px !important;
    align-items: center !important;
    margin-left: 12px !important;
}

.friend-card .friend-actions-inline {
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: opacity 0.2s ease !important;
}

.friend-actions-inline .action-btn {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.5) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    padding: 0 !important;
}

.friend-actions-inline .action-btn svg {
    width: 15px !important;
    height: 15px !important;
}

.friend-actions-inline .action-btn.accept-btn {
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    color: #ffffff !important;
}
.friend-actions-inline .action-btn.accept-btn:hover {
    background: #ffffff !important;
    color: #000000 !important;
    border-color: #ffffff !important;
}

.friend-actions-inline .action-btn.reject-btn {
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: rgba(255, 255, 255, 0.02) !important;
    color: rgba(255, 255, 255, 0.5) !important;
    display: flex !important;
}
.friend-actions-inline .action-btn.reject-btn:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.friend-actions-inline .action-btn.cancel-btn {
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: rgba(255, 255, 255, 0.02) !important;
    color: rgba(255, 255, 255, 0.5) !important;
    display: flex !important;
}
.friend-actions-inline .action-btn.cancel-btn:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.friend-actions-inline .action-btn.chat-direct-action:hover,
.friend-actions-inline .action-btn.call-action:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Кастомный чекбокс для модалки создания группы */
.custom-checkbox {
    width: 18px;
    height: 18px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
    position: relative;
}

/* При наведении на весь элемент списка друзей (только если чекбокс не выбран) */
#create-group-friends-list label:hover .group-friend-checkbox:not(:checked) + .custom-checkbox {
    border-color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.1);
}

/* Скрываем нативный чекбокс */
.group-friend-checkbox {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Состояние Checked: окрашивается в приятный светло-серый (почти белый) */
.group-friend-checkbox:checked + .custom-checkbox {
    background: #e0e0e0 !important;
    border-color: #e0e0e0 !important;
}

/* Галочка внутри выбранного чекбокса */
.group-friend-checkbox:checked + .custom-checkbox::after {
    content: "";
    width: 4px;
    height: 8px;
    border: solid #121212;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    position: absolute;
    top: 2px;
    left: 6px;
}

/* Правый сайдбар списка участников в группе */
.chat-members-sidebar {
    width: 280px;
    background-color: var(--bg-secondary);
    border-left: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, width 0.3s ease;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.2);
    z-index: 105;
}

.chat-members-sidebar.hidden {
    display: none !important;
}

/* Header & Typography for Members Sidebar */
.members-sidebar-header {
    height: 64px;
    padding: 0 16px 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    background: rgba(13, 13, 13, 0.35);
    backdrop-filter: blur(12px);
}

.members-header-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.members-header-title span:first-child {
    font-size: 14px;
    font-family: var(--font-sans);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-primary);
}

#chat-members-count {
    font-size: 11px;
    font-family: var(--font-mono);
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.08);
    padding: 2px 8px;
    border-radius: var(--radius-md);
    font-weight: 500;
}

.members-close-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-round);
    background: transparent;
    border: none;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.members-close-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    transform: rotate(90deg);
}

.members-close-btn svg {
    width: 18px;
    height: 18px;
}

.members-list-container {
    flex-grow: 1;
    overflow-y: auto;
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* Responsive Overlay for Tablet & Mobile */
@media (max-width: 1024px) {
    .chat-members-sidebar {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        height: 100% !important;
        z-index: 2100 !important; /* Above everything else when open */
        transform: translateX(0);
        box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5);
        background-color: rgba(13, 13, 13, 0.75) !important;
        backdrop-filter: blur(24px) !important;
        -webkit-backdrop-filter: blur(24px) !important;
    }
    
    .chat-members-sidebar.hidden {
        display: flex !important; /* Keep display flex to allow animation */
        transform: translateX(100%);
        pointer-events: none;
        opacity: 0;
    }
}

/* Элемент участника */
.member-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: var(--spacing-sm) 10px;
    border-radius: var(--radius-sm);
    transition: background 0.2s ease;
    cursor: default;
}

.member-item:hover {
    background: rgba(255, 255, 255, 0.02);
}

.member-avatar {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-round);
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 500;
    font-family: var(--font-serif);
    font-style: italic;
    flex-shrink: 0;
}

.member-name {
    font-size: 13.5px;
    color: var(--text-primary);
    font-family: var(--font-sans);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.member-role {
    font-size: 9px;
    font-family: var(--font-mono);
    text-transform: uppercase;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.05);
    padding: 1px 4px;
    border-radius: 3px;
    margin-left: auto;
}

/* Анимация волн в проигрывателе */
.player-waves-container .wave-bar {
    width: 4px;
    height: 15px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    transition: height 0.1s ease;
}

.player-waves-container.playing .wave-bar {
    background: #ffffff;
    animation: waveMotion 1s ease-in-out infinite alternate;
}

@keyframes waveMotion {
    0% { height: 10px; }
    100% { height: 75px; }
}

/* Разная задержка и скорость анимации для каждой полоски */
.player-waves-container.playing .wave-bar:nth-child(1) { animation-delay: 0.1s; animation-duration: 0.8s; }
.player-waves-container.playing .wave-bar:nth-child(2) { animation-delay: 0.4s; animation-duration: 1.2s; }
.player-waves-container.playing .wave-bar:nth-child(3) { animation-delay: 0.2s; animation-duration: 0.9s; }
.player-waves-container.playing .wave-bar:nth-child(4) { animation-delay: 0.6s; animation-duration: 1.1s; }
.player-waves-container.playing .wave-bar:nth-child(5) { animation-delay: 0.3s; animation-duration: 0.7s; }
.player-waves-container.playing .wave-bar:nth-child(6) { animation-delay: 0.5s; animation-duration: 1.0s; }
.player-waves-container.playing .wave-bar:nth-child(7) { animation-delay: 0.2s; animation-duration: 0.8s; }
.player-waves-container.playing .wave-bar:nth-child(8) { animation-delay: 0.7s; animation-duration: 1.3s; }
.player-waves-container.playing .wave-bar:nth-child(9) { animation-delay: 0.4s; animation-duration: 0.9s; }
.player-waves-container.playing .wave-bar:nth-child(10) { animation-delay: 0.1s; animation-duration: 1.1s; }

/* Progress bar and thumb styles */
#player-progress-container {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    transition: height 0.1s ease;
}

#player-progress-container:hover {
    height: 8px;
}

#player-progress-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0%;
    background: #fff;
    border-radius: 3px;
}

#player-progress-thumb {
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%) scale(1);
    width: 12px;
    height: 12px;
    border-radius: var(--radius-round);
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    cursor: grab;
    transition: transform 0.1s ease;
}

#player-progress-container:hover #player-progress-thumb,
#player-progress-container.dragging #player-progress-thumb {
    transform: translateY(-50%) scale(1.3);
}

#player-progress-thumb:active {
    cursor: grabbing;
}

/* Custom Context Menu Styles */
.custom-context-menu {
    position: fixed !important;
    z-index: 9999 !important;
    background: rgba(15, 15, 15, 0.85) !important;
    backdrop-filter: blur(20px) saturate(1.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    padding: 6px !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.02) !important;
    min-width: 250px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1), transform 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
    pointer-events: none;
    box-sizing: border-box !important;
}

.custom-context-menu.visible {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.context-menu-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: var(--spacing-sm) 12px !important;
    background: transparent !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.8) !important;
    font-family: var(--font-sans) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    width: 100% !important;
    text-align: left !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}

.context-menu-item:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    transform: translateX(2px) !important;
}

.context-menu-item svg {
    width: 16px !important;
    height: 16px !important;
    color: rgba(255, 255, 255, 0.6) !important;
    flex-shrink: 0 !important;
    transition: color 0.2s ease !important;
}

.context-menu-item:hover svg {
    color: #ffffff !important;
}

/* ==========================================================================
   BLACK & WHITE CALLING INTERFACE & ANIMATED ZOOM/PIP LAYOUTS
   ========================================================================== */

/* Strict black-and-white container colors and blur effects */
.call-overlay-container {
    background: radial-gradient(circle at 50% 30%, #151515, #080808) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 30px 100px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

/* Gray/white glows and waves instead of colored elements */
.call-bg-glow {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.04) 0%, transparent 60%) !important;
}

.avatar-pulse-ring {
    border-color: rgba(255, 255, 255, 0.25) !important;
}

@keyframes ringPulse {
    0% {
        transform: scale(1);
        opacity: 0.5;
        border-color: rgba(255, 255, 255, 0.3);
    }
    50% {
        border-color: rgba(255, 255, 255, 0.12);
    }
    100% {
        transform: scale(1.9);
        opacity: 0;
    }
}

.call-status-indicator.pulsing-dot {
    background-color: #ffffff !important;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5) !important;
}

/* Call Control Dock Styling */
.call-controls-dock {
    background: rgba(10, 10, 10, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.6) !important;
}

/* Align and balance dock buttons */
.call-dock-btn {
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important; /* Circle style for all buttons is cleaner */
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    background: rgba(255, 255, 255, 0.03) !important;
    color: rgba(255, 255, 255, 0.5) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.call-dock-btn svg {
    width: 22px !important;
    height: 22px !important;
    color: inherit !important;
    transition: transform 0.2s ease, opacity 0.2s ease !important;
}

.call-dock-btn svg.hidden {
    display: none !important;
}

/* Strict B&W - Inactive button states (slashed/muted) */
.call-dock-btn.muted-active,
.call-dock-btn.video-inactive {
    background: rgba(255, 255, 255, 0.01) !important;
    border: 1px dashed rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.25) !important;
}

/* Strict B&W - Active states (Mic is ON, Video is ON, Screenshare is ON) */
.call-dock-btn#call-btn-mute:not(.muted-active),
.call-dock-btn#call-btn-video:not(.video-inactive),
.call-dock-btn.screenshare-active {
    background: #ffffff !important;
    border: 1px solid #ffffff !important;
    color: #000000 !important;
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2) !important;
}

/* Hover effects for buttons */
.call-dock-btn#call-btn-mute:not(.muted-active):hover,
.call-dock-btn#call-btn-video:not(.video-inactive):hover,
.call-dock-btn.screenshare-active:hover {
    background: #e1e1e1 !important;
    border-color: #e1e1e1 !important;
    color: #000000 !important;
    transform: translateY(-3px) scale(1.05) !important;
}

.call-dock-btn.muted-active:hover,
.call-dock-btn.video-inactive:hover,
.call-dock-btn:not(.end-call):not(.screenshare-active)#call-btn-screenshare:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: rgba(255, 255, 255, 0.8) !important;
    transform: translateY(-3px) scale(1.05) !important;
}

/* End Call Button Specific Styling (Perfect alignment & B&W) */
.call-dock-btn.end-call {
    background: #ffffff !important;
    border: 1px solid #ffffff !important;
    color: #000000 !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 20px rgba(255, 255, 255, 0.25) !important;
}

.call-dock-btn.end-call svg {
    transform: rotate(135deg) !important;
    transform-origin: center !important;
}

.call-dock-btn.end-call:hover {
    background: #000000 !important;
    border: 1px solid #ffffff !important;
    color: #ffffff !important;
    transform: translateY(-3px) scale(1.05) !important;
    box-shadow: 0 6px 25px rgba(255, 255, 255, 0.45) !important;
}

/* Monochrome Scanline / Stream Feed Effect */
.starlight-stream-effect {
    background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.07) 0%, transparent 50%),
                radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.04) 0%, transparent 50%),
                #0b0b0b !important;
    animation: monoStreamShift 12s linear infinite alternate !important;
}

.starlight-stream-effect.local {
    background: radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
                radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
                #090909 !important;
}

@keyframes monoStreamShift {
    0% { filter: contrast(1.1) brightness(0.95); transform: scale(1); }
    100% { filter: contrast(0.9) brightness(1.05); transform: scale(1.03); }
}

.starlight-stream-effect::after {
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.3) 50%), 
                linear-gradient(90deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01), rgba(255, 255, 255, 0.03)) !important;
    opacity: 0.2 !important;
}

/* ==========================================================================
   ANIMATED ZOOMABLE / PIP VIDEO CALL GRID
   ========================================================================== */

/* Make video grid a relative container for absolute transitions */
.call-video-grid {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 420px !important;
    min-height: 320px !important;
    margin: 0 auto !important;
    display: block; /* Overriding grid to use absolute child layout — no !important so .hidden can override */
}

/* Default state: Split Layout (side-by-side) */
.call-video-grid.layout-split .video-stream-box.remote-video {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: calc(50% - 10px) !important;
    height: 100% !important;
    z-index: 2 !important;
}

.call-video-grid.layout-split .video-stream-box.local-video {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    width: calc(50% - 10px) !important;
    height: 100% !important;
    z-index: 2 !important;
}

/* Mobile Split Layout (top-and-bottom) */
@media (max-width: 600px) {
    .call-video-grid.layout-split .video-stream-box.remote-video {
        width: 100% !important;
        height: calc(50% - 10px) !important;
        left: 0 !important;
        top: 0 !important;
    }
    
    .call-video-grid.layout-split .video-stream-box.local-video {
        width: 100% !important;
        height: calc(50% - 10px) !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
    }
}

/* Maximized states: one stream takes full screen, other becomes small PiP in bottom-right */
.call-video-grid.layout-remote-max .video-stream-box.remote-video,
.call-video-grid.layout-local-max .video-stream-box.local-video {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 2 !important;
    border-radius: 16px !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

.call-video-grid.layout-remote-max .video-stream-box.local-video,
.call-video-grid.layout-local-max .video-stream-box.remote-video {
    position: absolute !important;
    right: 15px !important;
    bottom: 15px !important;
    left: auto !important;
    top: auto !important;
    width: 160px !important;
    height: 120px !important;
    z-index: 5 !important;
    border-radius: 12px !important;
    border: 1.5px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7) !important;
}

/* Mobile adjustments for maximized layouts */
@media (max-width: 600px) {
    .call-video-grid.layout-remote-max .video-stream-box.local-video,
    .call-video-grid.layout-local-max .video-stream-box.remote-video {
        width: 110px !important;
        height: 85px !important;
        right: 10px !important;
        bottom: 10px !important;
    }
}

/* Smooth transition for absolute positioning */
.video-stream-box {
    transition: left 0.4s cubic-bezier(0.25, 1, 0.5, 1),
                right 0.4s cubic-bezier(0.25, 1, 0.5, 1),
                top 0.4s cubic-bezier(0.25, 1, 0.5, 1),
                bottom 0.4s cubic-bezier(0.25, 1, 0.5, 1),
                width 0.4s cubic-bezier(0.25, 1, 0.5, 1),
                height 0.4s cubic-bezier(0.25, 1, 0.5, 1),
                border-radius 0.4s cubic-bezier(0.25, 1, 0.5, 1),
                border-color 0.4s cubic-bezier(0.25, 1, 0.5, 1),
                box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* Dynamic styling for inner content of minimized PiP */
.call-video-grid.layout-remote-max .video-stream-box.local-video .call-avatar.small,
.call-video-grid.layout-local-max .video-stream-box.remote-video .call-avatar.large.pulsing {
    width: 44px !important;
    height: 44px !important;
    font-size: 16px !important;
    margin-bottom: 0 !important;
}

.call-video-grid.layout-remote-max .video-stream-box.local-video .video-label,
.call-video-grid.layout-local-max .video-stream-box.remote-video .video-label {
    display: none !important;
}

.call-video-grid.layout-remote-max .video-stream-box.local-video .video-placeholder,
.call-video-grid.layout-local-max .video-stream-box.remote-video .video-placeholder {
    gap: 0px !important;
}

/* Zoom/Expand Button styling */
.video-zoom-btn {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 10 !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    background: rgba(10, 10, 10, 0.6) !important;
    color: #ffffff !important;
    backdrop-filter: blur(8px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    opacity: 0 !important;
    transform: scale(0.85) !important;
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    padding: 0 !important;
}

.video-zoom-btn svg {
    width: 18px !important;
    height: 18px !important;
    color: #ffffff !important;
}

.video-zoom-btn:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    transform: scale(1.05) !important;
}

/* Reveal zoom button on hover over the video container */
.video-stream-box:hover .video-zoom-btn {
    opacity: 1 !important;
    transform: scale(1) !important;
}

/* ==========================================================================
   CALL TOP BAR: MINIMIZE BUTTON
   ========================================================================== */
.call-top-bar {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    position: relative !important;
    z-index: 10 !important;
}

.call-minimize-btn {
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    color: rgba(255, 255, 255, 0.5) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    transition: all 0.25s ease !important;
}

.call-minimize-btn svg {
    width: 16px !important;
    height: 16px !important;
}

.call-minimize-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    transform: translateY(-50%) scale(1.08) !important;
}

/* ==========================================================================
   MINI CALL BAR (FLOATING TOP BAR WHEN CALL IS MINIMIZED)
   ========================================================================== */
.call-mini-bar {
    position: fixed !important;
    top: var(--call-mini-top, 12px) !important;
    left: var(--call-mini-left, 50%) !important;
    transform: var(--call-mini-transform, translateX(-50%) translateY(0)) !important;
    z-index: 9998 !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    background: rgba(12, 12, 12, 0.92) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 22px !important;
    padding: var(--spacing-sm) 16px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important;
    cursor: grab !important;
    touch-action: none !important;
}

.call-mini-bar.hidden {
    display: none !important;
}

.call-mini-bar.dragging {
    cursor: grabbing !important;
    --call-mini-transform: none;
}

.call-mini-bar.is-moved {
    --call-mini-transform: none;
}

@keyframes miniBarSlideIn {
    0% { opacity: 0; transform: var(--call-mini-transform, translateX(-50%) translateY(-20px)); }
    100% { opacity: 1; transform: var(--call-mini-transform, translateX(-50%) translateY(0)); }
}

@keyframes miniBarSlideOut {
    0% { opacity: 1; transform: var(--call-mini-transform, translateX(-50%) translateY(0)); }
    100% { opacity: 0; transform: var(--call-mini-transform, translateX(-50%) translateY(-20px)); }
}

@keyframes callEndShrink {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.8); }
}

.call-mini-bar-info {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.call-mini-bar-avatar {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: var(--font-serif) !important;
    font-size: 13px !important;
    color: #ffffff !important;
}

.call-mini-bar-name {
    font-family: var(--font-sans) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #ffffff !important;
    max-width: 120px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.call-mini-bar-duration {
    font-family: var(--font-mono), var(--font-sans) !important;
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.5) !important;
    font-variant-numeric: tabular-nums !important;
    min-width: 38px !important;
}

/* Pulsing green dot before duration in mini bar */
.call-mini-bar-duration::before {
    content: '' !important;
    display: inline-block !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.5) !important;
    margin-right: 6px !important;
    vertical-align: middle !important;
    animation: dotPulse 1.5s ease infinite alternate !important;
}

.call-mini-bar-actions {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-left: 4px !important;
    padding-left: 12px !important;
    border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.call-mini-btn {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    color: rgba(255, 255, 255, 0.6) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    transition: all 0.2s ease !important;
}

.call-mini-btn svg {
    width: 15px !important;
    height: 15px !important;
}

.call-mini-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    transform: scale(1.08) !important;
}

.call-mini-btn.call-mini-expand {
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: #000000 !important;
}

.call-mini-btn.call-mini-expand:hover {
    background: #e0e0e0 !important;
    border-color: #e0e0e0 !important;
    color: #000000 !important;
}

.call-mini-btn.call-mini-end svg {
    transform: rotate(135deg) !important;
    transform-origin: center !important;
}

.call-mini-btn.call-mini-end:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

.call-mini-btn.call-mini-mute {
    background: #ffffff !important;
    border: 1px solid #ffffff !important;
    color: #000000 !important;
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.15) !important;
}

.call-mini-btn.call-mini-mute:hover {
    background: #e1e1e1 !important;
    border-color: #e1e1e1 !important;
    color: #000000 !important;
}

.call-mini-btn.call-mini-mute.muted-mini {
    background: rgba(255, 255, 255, 0.01) !important;
    border: 1px dashed rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.25) !important;
    box-shadow: none !important;
}

.call-mini-btn.call-mini-mute.muted-mini:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

.call-mini-btn svg.hidden {
    display: none !important;
}

/* Fast polish layer for call and voice transitions */
.call-overlay-container {
    transform-origin: center center !important;
    will-change: transform, opacity, filter !important;
}

.call-video-grid,
.call-voice-profile {
    will-change: transform, opacity, filter !important;
}

.mock-stream-canvas {
    opacity: 1;
    transform-origin: center center;
    will-change: transform, opacity, filter;
}

.mock-stream-canvas.stream-entering,
.mock-stream-canvas.stream-leaving {
    pointer-events: none;
}

.mock-stream-canvas.is-screenshare,
.mock-stream-canvas.is-screenshare .starlight-stream-effect {
    filter: contrast(1.22) brightness(1.08) saturate(0.75) !important;
}

.call-control-swapping svg:not(.hidden),
.voice-control-btn.active-state,
.voice-control-btn.muted-state {
    animation: callControlPop 0.26s cubic-bezier(0.16, 1, 0.3, 1) 1;
}

@keyframes callControlPop {
    0% { transform: scale(0.74); opacity: 0; filter: blur(4px); }
    72% { transform: scale(1.12); opacity: 1; filter: blur(0); }
    100% { transform: scale(1); opacity: 1; filter: blur(0); }
}

.call-mini-bar.is-preparing {
    opacity: 0 !important;
    pointer-events: none !important;
}

.call-mini-bar.is-entering,
.call-mini-bar.is-leaving {
    pointer-events: none !important;
    will-change: transform, opacity !important;
}

.call-mini-bar.dragging {
    transition: box-shadow 0.18s ease, border-color 0.18s ease !important;
    box-shadow: 0 18px 58px rgba(0, 0, 0, 0.82), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
}

.voice-float-preview {
    will-change: left, top, width, height, transform, opacity, filter;
    transform-origin: center center;
    transition: width 0.42s cubic-bezier(0.16, 1, 0.3, 1),
                height 0.42s cubic-bezier(0.16, 1, 0.3, 1),
                left 0.42s cubic-bezier(0.16, 1, 0.3, 1),
                top 0.42s cubic-bezier(0.16, 1, 0.3, 1),
                border-radius 0.42s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.28s ease !important;
}

.voice-float-preview.appearing {
    animation: previewAppear 0.42s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

.voice-float-preview.is-closing {
    box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;
}

.voice-preview-ghost {
    position: fixed !important;
    transform-origin: center center !important;
    will-change: transform, opacity, filter !important;
    box-shadow: 0 18px 54px rgba(0, 0, 0, 0.72) !important;
}

.collapsed-stream.stream-avatar-closing {
    pointer-events: none !important;
    will-change: transform, opacity, filter !important;
}

.voice-float-preview.expanded {
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.72) !important;
}

.voice-preview-content > div {
    animation: streamSurfaceReveal 0.48s cubic-bezier(0.16, 1, 0.3, 1) 1 both;
}

@keyframes streamSurfaceReveal {
    0% { opacity: 0; transform: scale(1.04); filter: blur(10px); }
    100% { opacity: 1; transform: scale(1); filter: blur(0); }
}

/* Responsive Pin Tutorial Modal Styles */
.tutorial-modal-card {
    width: 90% !important;
    max-width: 520px !important;
    padding: var(--spacing-xl) 24px !important;
    box-sizing: border-box !important;
    align-items: stretch !important;
    text-align: left !important;
}

.tutorial-step-row {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    box-sizing: border-box;
    transition: var(--transition-smooth);
}

.tutorial-step-illustration {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 140px;
    height: 62px;
    flex-shrink: 0;
    box-sizing: border-box;
    position: relative;
}

.tutorial-step-illustration-column {
    flex-direction: column;
    justify-content: flex-start;
    gap: 6px;
    align-items: stretch;
}

.tutorial-step-text {
    flex: 1;
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary);
}

.tutorial-step-text strong {
    color: #ffffff;
    display: block;
    margin-bottom: 4px;
    font-size: 14px;
}

/* Mobile responsive media query */
@media (max-width: 600px) {
    .tutorial-modal-card {
        padding: var(--spacing-lg) 16px !important;
        border-radius: 24px !important;
    }
    
    .tutorial-step-row {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 12px;
    }
    
    .tutorial-step-illustration {
        width: 100% !important;
        height: 80px !important;
    }
}

/* Mobile overrides for Love Hub (<= 768px) */
@media (max-width: 768px) {
    .hub-bento-dashboard {
        padding: 20px 16px 100px 16px !important; /* Extra bottom padding for mobile navigation bar */
    }
    
    .bento-header {
        height: auto !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 16px !important;
        padding-left: 16px !important; /* Align with layout padding */
        margin-bottom: 24px !important;
    }
    
    .bento-header div {
        width: 100%;
    }
    
    .bento-header h1.sidebar-title {
        font-size: 28px !important;
        margin-bottom: 4px !important;
    }
    
    .bento-grid {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
        gap: 16px !important;
    }
    
    .bento-card {
        grid-column: span 1 !important;
        grid-row: span 1 !important;
        padding: 20px !important;
    }
    
    .bento-hero h2 {
        font-size: 24px !important;
        max-width: 100% !important;
        margin-bottom: 12px !important;
    }
    
    .bento-hero p {
        font-size: 14px !important;
        max-width: 100% !important;
        line-height: 1.5 !important;
    }
    
    .bento-hero-visual {
        display: none !important; /* Hide visual background circle to prevent overlapping text */
    }
    
    .stat-value {
        font-size: 36px !important;
    }

    .bento-header div:last-child {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        width: 100% !important;
        justify-content: flex-start !important;
    }

    .bento-header div:last-child .submit-action-btn {
        flex: 1 1 calc(50% - 4px) !important;
        height: auto !important;
        min-height: 44px !important;
        padding: var(--spacing-sm) 10px !important;
        font-size: 12px !important;
        line-height: 1.3 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        box-sizing: border-box !important;
        white-space: normal !important;
        word-break: break-word !important;
    }

    /* Ensure hidden buttons in Love Hub header remain hidden on mobile */
    .bento-header div:last-child .submit-action-btn.hidden {
        display: none !important;
    }
}

/* Specific override to prevent absolute close button overlap in modals */
.hub-modal-header .profile-close-btn {
    position: static !important;
    margin-left: 12px !important;
    flex-shrink: 0 !important;
}

@media (max-width: 768px) {
    /* Responsive overrides for Love Hub modals to fit mobile screens */
    .hub-modal-card {
        padding: 20px 16px !important;
        border-radius: 16px !important;
    }
    
    .hub-modal-header {
        padding-bottom: 12px !important;
        margin-bottom: 16px !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }
    
    .hub-modal-header h3 {
        font-size: 18px !important;
        line-height: 1.3 !important;
    }
    
    /* Layout ideas/bugs lists in column on mobile to prevent squishing */
    .hub-list-item {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        padding: 14px 16px !important;
    }
    
    .hub-item-right {
        margin-left: 0 !important;
        justify-content: flex-end !important;
        border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
        padding-top: 10px !important;
    }

    /* Адаптация Кинотеатра (Theater Lightbox) под мобильные экраны */
    .theater-lightbox-container {
        width: 92% !important;
        height: 60% !important;
        max-height: 480px !important;
        border-radius: 16px !important;
    }
    
    .theater-close-btn {
        bottom: 24px !important;
        padding: var(--spacing-sm) 16px !important;
        font-size: 13px !important;
    }
}

/* Updates History Modal list items override */
.hub-list-item.update-item {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    cursor: default !important;
}

.hub-update-changes-list {
    margin: var(--spacing-xs) 0 0 0 !important;
    padding: 0 0 0 20px !important;
    list-style-type: disc !important;
}

.hub-update-change-bullet {
    margin-bottom: 6px !important;
    color: var(--text-secondary) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}



/* Default style for music mini-player card inside modal */
#music-mini-player-modal .profile-card {
    width: 320px;
    padding: var(--spacing-lg);
    box-sizing: border-box;
    text-align: center;
    align-items: stretch;
    border-radius: 28px;
    background: rgba(15, 15, 15, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    animation: none !important;
    margin: 0;
}

@media (max-width: 768px) {
    #music-mini-player-modal .profile-card {
        width: calc(100% - 32px);
        max-width: 360px;
        margin: 0;
        padding: var(--spacing-lg) 16px;
    }
}

/* Spinner and Keyframes for Username Check */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.spinner-icon {
    animation: spin 1.2s linear infinite;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   DM ROOM MEDIA FEED & VOICE PANEL
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* --- Media Feed Panel --- */
.media-feed-panel {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    height: 100%;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.08) transparent;
}

.media-feed-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: var(--transition-smooth);
}

.media-feed-item:hover {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

.media-feed-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.media-feed-user {
    display: flex;
    align-items: center;
    gap: 10px;
}

.media-user-avatar {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-round);
    background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

.media-user-name {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-primary);
}

.media-timestamp {
    font-size: 11px;
    color: var(--text-muted);
}

.media-jump-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: transparent;
    border: none;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.media-jump-btn svg {
    width: 16px;
    height: 16px;
}

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

.media-feed-content {
    padding-left: 38px;
}

/* Voice Message Player in Media */
.message-voice-player {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.03);
    padding: var(--spacing-sm) 12px;
    border-radius: var(--radius-md);
    width: fit-content;
    min-width: 240px;
    border: 1px solid rgba(255,255,255,0.04);
}

.voice-play-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-round);
    background: var(--text-primary);
    color: #000;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.voice-play-btn:hover {
    transform: scale(1.05);
}

.voice-play-btn svg {
    width: 14px;
    height: 14px;
    margin-left: 2px;
}

.voice-waveform-wrap {
    flex: 1;
    height: 24px;
    background: url('data:image/svg+xml;utf8,<svg preserveAspectRatio="none" viewBox="0 0 100 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 12 Q 10 0, 20 12 T 40 12 T 60 12 T 80 12 T 100 12" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="2"/></svg>') center/100% 100% no-repeat;
    position: relative;
    overflow: hidden;
}

.voice-waveform-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: url('data:image/svg+xml;utf8,<svg preserveAspectRatio="none" viewBox="0 0 100 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 12 Q 10 0, 20 12 T 40 12 T 60 12 T 80 12 T 100 12" fill="none" stroke="white" stroke-width="2"/></svg>') center/100% 100% no-repeat;
    transition: width 0.1s linear;
}

.voice-duration {
    font-size: 11px;
    font-family: var(--font-mono);
    color: var(--text-secondary);
}

/* Image Attachment in Media */
.media-image-wrapper {
    width: 100%;
    max-width: 320px;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.media-image-placeholder {
    width: 100%;
    aspect-ratio: 16/9;
    background: rgba(10, 10, 10, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.media-image-placeholder svg {
    width: 32px;
    height: 32px;
    opacity: 0.5;
}

/* Audio Attachment in Media */
.media-audio-attachment {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.03);
    padding: 10px 16px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255,255,255,0.04);
    max-width: 320px;
}

.media-audio-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}

.media-audio-icon svg {
    width: 20px;
    height: 20px;
}

.media-audio-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    flex: 1;
    min-width: 0;
}

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

.media-audio-size {
    font-size: 11px;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.media-download-btn {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-round);
    background: rgba(255, 255, 255, 0.06);
    border: none;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.media-download-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    transform: scale(1.05);
}

.media-download-btn svg {
    width: 16px;
    height: 16px;
}

/* Custom Video Player in Media */
.media-video-wrapper {
    width: 100%;
    max-width: 480px;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    background: #000;
    aspect-ratio: 16/9;
}

.media-video-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: linear-gradient(45deg, rgba(20,20,20,1) 0%, rgba(30,30,30,1) 100%);
}

.media-video-play-btn {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-round);
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-smooth);
    z-index: 2;
}

.media-video-play-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.1);
}

.media-video-play-btn svg {
    width: 24px;
    height: 24px;
    margin-left: 4px;
}

.media-video-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--spacing-md);
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    display: flex;
    align-items: center;
    gap: 12px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.media-video-wrapper:hover .media-video-controls {
    opacity: 1;
}

.media-video-timeline {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    position: relative;
}

.media-video-timeline-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 35%;
    background: #fff;
    border-radius: 2px;
}

.media-video-time {
    font-size: 11px;
    color: #fff;
    font-family: var(--font-mono);
}

/* Universal Media Input Area */
.room-media-input-wrapper {
    margin-top: 16px;
    padding: var(--spacing-md) 24px;
    background: rgba(10, 10, 10, 0.6);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    position: sticky;
    bottom: 0;
    z-index: 10;
}

.room-media-input-bar {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-xl);
    padding: var(--spacing-sm) 16px;
    transition: var(--transition-smooth);
}

.room-media-input-bar:focus-within {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
}

.media-attach-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-round);
    border: none;
    background: transparent;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.media-attach-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}

.media-attach-btn svg {
    width: 18px;
    height: 18px;
}

.room-media-input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 14px;
    padding: var(--spacing-sm) 0;
    outline: none;
}

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

/* --- Group Voice Panel --- */
.group-voice-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--spacing-lg);
    background: radial-gradient(circle at top, rgba(255, 255, 255, 0.03) 0%, transparent 70%);
}

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

.group-voice-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.group-voice-status-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-round);
    background: #ffffff;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.8);
    animation: voicePulse 1.5s infinite;
}

.group-voice-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.group-voice-count {
    font-size: 13px;
    color: var(--text-muted);
    background: rgba(255,255,255,0.05);
    padding: var(--spacing-xs) 10px;
    border-radius: var(--radius-md);
}

.voice-action-btn {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-round);
    background: rgba(255,255,255,0.05);
    border: none;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.voice-action-btn:hover {
    background: rgba(255,255,255,0.1);
    color: var(--text-primary);
}

.voice-action-btn svg {
    width: 18px;
    height: 18px;
}

.group-voice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--spacing-md);
    flex: 1;
    overflow-y: auto;
    align-content: start;
    padding-bottom: 24px;
}

.voice-participant-card {
    background: rgba(10, 10, 10, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-xl);
    aspect-ratio: 16/10;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    transition: var(--transition-smooth);
}

.voice-participant-card.speaking {
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2), 0 8px 32px rgba(255, 255, 255, 0.1);
}

.voice-participant-avatar {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-round);
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 600;
    color: var(--text-primary);
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    z-index: 1;
}

.voice-participant-card.has-video .voice-participant-avatar,
.voice-participant-card.is-screenshare .voice-participant-avatar {
    display: none;
}

.voice-cam-placeholder,
.screenshare-preview-layer {
    position: absolute;
    inset: 0;
    background: rgba(15, 15, 15, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.4);
    z-index: 0;
}

.voice-cam-placeholder svg {
    width: 48px;
    height: 48px;
}

.screenshare-preview-layer {
    flex-direction: column;
    gap: var(--spacing-sm);
}

.screenshare-preview-layer .mock-code {
    font-family: var(--font-mono);
    font-size: 10px;
    color: rgba(255,255,255,0.3);
    text-align: left;
    width: 80%;
}

.voice-participant-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--spacing-lg) 16px 16px;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 2;
}

.voice-participant-name {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

.voice-status-icon {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-round);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.voice-status-icon svg {
    width: 12px;
    height: 12px;
}

.speaking-indicator {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 12px;
}

.speaking-indicator span {
    width: 3px;
    height: 100%;
    background: #ffffff;
    border-radius: 2px;
    animation: voiceWave 1s ease-in-out infinite;
}

.speaking-indicator span:nth-child(2) { animation-delay: 0.2s; }
.speaking-indicator span:nth-child(3) { animation-delay: 0.4s; }

.dm-voice-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    background: rgba(255, 255, 255, 0.03);
    padding: var(--spacing-md);
    border-radius: var(--radius-xl);
    border: 1px solid rgba(255, 255, 255, 0.04);
    margin: 0 auto;
    backdrop-filter: blur(20px);
}

.dm-voice-btn {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-xl);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dm-voice-btn svg {
    width: 24px;
    height: 24px;
    transition: transform 0.2s ease;
}

.dm-voice-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-3px);
}

.dm-voice-btn:active {
    transform: translateY(1px);
}

.dm-voice-btn.active {
    background: #ffffff;
    color: #000000;
    border-color: #ffffff;
    box-shadow: 0 4px 16px rgba(255, 255, 255, 0.2);
}

.dm-voice-btn.danger {
    background: rgba(229, 57, 53, 0.15);
    color: #ef5350;
    border-color: rgba(229, 57, 53, 0.3);
}

.dm-voice-btn.danger:hover {
    background: #e53935;
    color: #ffffff;
    border-color: #e53935;
    box-shadow: 0 4px 16px rgba(229, 57, 53, 0.3);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SETTINGS EXPERIENCE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */


/* ── Settings Glass Wrapper ── */
.settings-glass-card {
    flex-direction: row;
    overflow: hidden;
}

/* ── Settings Sidebar ── */

.settings-sidebar {
    width: 260px;
    min-width: 260px;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    padding: var(--spacing-lg) 0;
    overflow-y: auto;
    scrollbar-width: none;
}

.settings-sidebar::-webkit-scrollbar {
    display: none;
}

.settings-sidebar-header {
    padding: 0 20px 20px;
}

.settings-sidebar-header h2 {
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.settings-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 10px;
    flex: 1;
}

.settings-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: 13.5px;
    font-weight: 400;
    cursor: pointer;
    transition: var(--transition-smooth);
    text-align: left;
    width: 100%;
}

.settings-nav-item svg {
    width: 18px;
    height: 18px;
    min-width: 18px;
    stroke-width: 1.8;
}

.settings-nav-item:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
}

.settings-nav-item.active {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
    font-weight: 500;
}

.settings-nav-divider {
    height: 1px;
    background: var(--border-color);
    margin: var(--spacing-sm) 12px;
}

.settings-sidebar-footer {
    padding: var(--spacing-md) 20px 0;
    margin-top: auto;
}

.settings-version-label {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ── Settings Content ── */

.settings-content {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.08) transparent;
}

.settings-content::-webkit-scrollbar {
    width: 6px;
}

.settings-content::-webkit-scrollbar-track {
    background: transparent;
}

.settings-content::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.08);
    border-radius: 3px;
}

.settings-content-scroll {
    max-width: 740px;
    margin: 0 auto;
    padding: var(--spacing-xl) 40px 60px;
}

.settings-back-btn {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: 14px;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.settings-back-btn svg {
    width: 18px;
    height: 18px;
}

.settings-back-btn:hover {
    color: var(--text-primary);
}

/* ── Settings Sections ── */

.settings-section {
    display: none;
    flex-direction: column;
    gap: 20px;
    animation: settingsFadeIn 0.25s ease;
}

.settings-section.active {
    display: flex;
}

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

.settings-section-heading {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    margin: 0;
}

.settings-section-desc {
    font-size: 13px;
    color: var(--text-muted);
    margin: -8px 0 4px;
    line-height: 1.5;
}

/* ── Settings Cards ── */

.s-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 14px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    transition: var(--transition-smooth);
}

.s-card:hover {
    border-color: rgba(255, 255, 255, 0.06);
}

.s-card--danger {
    border-color: rgba(229, 57, 53, 0.15);
    background: rgba(229, 57, 53, 0.03);
}

.s-card--danger:hover {
    border-color: rgba(229, 57, 53, 0.25);
}

.s-card-header {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

/* ── Settings Rows ── */

.s-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.s-row--control,
.s-row--info,
.s-row--action {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
}

.s-row-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.s-label {
    font-size: 13.5px;
    font-weight: 450;
    color: var(--text-primary);
}

.s-value {
    font-size: 13px;
    color: var(--text-secondary);
    font-family: var(--font-mono);
}

.s-hint {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}

.s-hint--warn {
    color: #e5a135;
}

.s-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.04);
}

/* ── Toggle ── */

.s-toggle {
    position: relative;
    display: inline-flex;
    width: 40px;
    height: 22px;
    min-width: 40px;
    cursor: pointer;
}

.s-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.s-toggle-slider {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 11px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.s-toggle-slider::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 3px;
    width: 16px;
    height: 16px;
    background: var(--text-muted);
    border-radius: var(--radius-round);
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.s-toggle input:checked + .s-toggle-slider {
    background: rgba(255, 255, 255, 0.15);
}

.s-toggle input:checked + .s-toggle-slider::before {
    transform: translateX(18px);
    background: #ffffff;
}

/* ── Slider ── */

.s-slider-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 180px;
}

.s-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

.s-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: #ffffff;
    border-radius: var(--radius-round);
    cursor: pointer;
    transition: transform 0.15s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.s-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.s-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: #ffffff;
    border-radius: var(--radius-round);
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.s-slider-value {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-secondary);
    min-width: 36px;
    text-align: right;
}

/* ── Select ── */

.s-select {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm) 12px;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 13px;
    cursor: pointer;
    outline: none;
    transition: var(--transition-smooth);
    -webkit-appearance: none;
    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='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 32px;
}

.s-select:hover {
    border-color: rgba(255, 255, 255, 0.15);
}

.s-select:focus {
    border-color: rgba(255, 255, 255, 0.2);
}

.s-select option {
    background: #1a1a1a;
    color: #f5f5f5;
}

.s-select--sm {
    padding: 6px 10px;
    font-size: 12px;
    padding-right: 28px;
    min-width: 120px;
}

/* ── Input / Textarea ── */

.s-input {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 13.5px;
    outline: none;
    transition: var(--transition-smooth);
    width: 100%;
}

.s-input:focus {
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.04);
}

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

.s-input-prefix-wrap {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-sm);
    transition: var(--transition-smooth);
}

.s-input-prefix-wrap:focus-within {
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.04);
}

.s-input-prefix {
    padding: 10px 0 10px 14px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 13.5px;
    user-select: none;
}

.s-input--prefixed {
    background: transparent;
    border: none;
    padding-left: 2px;
}

.s-input--prefixed:focus {
    background: transparent;
    border: none;
}

.s-textarea {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 13.5px;
    outline: none;
    resize: vertical;
    min-height: 70px;
    transition: var(--transition-smooth);
    width: 100%;
}

.s-textarea:focus {
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.04);
}

.s-textarea::placeholder {
    color: var(--text-muted);
}

.s-char-count {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-muted);
    text-align: right;
}

/* ── Buttons ── */

.s-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 450;
    cursor: pointer;
    transition: var(--transition-smooth);
    white-space: nowrap;
}

.s-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.15);
}

.s-btn:active {
    transform: scale(0.97);
}

.s-btn--sm {
    padding: 6px 12px;
    font-size: 12px;
}

.s-btn--ghost {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
}

.s-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
}

.s-btn--danger {
    background: rgba(229, 57, 53, 0.08);
    border-color: rgba(229, 57, 53, 0.2);
    color: #ef5350;
}

.s-btn--danger:hover {
    background: rgba(229, 57, 53, 0.15);
    border-color: rgba(229, 57, 53, 0.35);
}

/* ── Badge ── */

.s-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 6px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.s-badge--green {
    background: rgba(67, 160, 71, 0.1);
    color: #66bb6a;
    border: 1px solid rgba(67, 160, 71, 0.2);
}

/* ── Audio Meter ── */

.s-meter-wrap {
    padding: 0;
}

.s-meter {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    overflow: hidden;
}

.s-meter-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #43a047, #66bb6a, #fdd835);
    border-radius: 3px;
    transition: width 0.08s linear;
}

/* ── Notification Preview ── */

.s-notif-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    animation: settingsNotifSlide 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

.s-notif-preview-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
}

.s-notif-preview-icon svg {
    width: 16px;
    height: 16px;
    color: var(--text-secondary);
}

.s-notif-preview-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.s-notif-preview-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

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

.s-notif-preview-time {
    font-size: 10px;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

/* ── Theme Options ── */

.settings-theme-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.s-theme-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-radius: var(--radius-md);
    border: 2px solid transparent;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.s-theme-option:hover {
    background: rgba(255, 255, 255, 0.03);
}

.s-theme-option.active {
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.04);
}

.s-theme-option span {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 450;
}

.s-theme-option.active span {
    color: var(--text-primary);
}

.s-theme-preview {
    width: 100%;
    height: 64px;
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm);
    display: flex;
    flex-direction: column;
    gap: 6px;
    border: 1px solid rgba(255,255,255,0.06);
}

.s-theme-preview--dark {
    background: #0d0d0d;
}

.s-theme-preview--light {
    background: #e8e8e8;
}

.s-theme-preview--light .s-theme-bar {
    background: #ccc;
}

.s-theme-preview--light .s-theme-lines span {
    background: #bbb;
}

.s-theme-preview--system {
    background: linear-gradient(135deg, #0d0d0d 50%, #e8e8e8 50%);
}

.s-theme-bar {
    width: 40%;
    height: 4px;
    background: rgba(255,255,255,0.15);
    border-radius: 2px;
}

.s-theme-lines {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.s-theme-lines span {
    height: 3px;
    background: rgba(255,255,255,0.08);
    border-radius: 1.5px;
}

.s-theme-lines span:nth-child(1) { width: 80%; }
.s-theme-lines span:nth-child(2) { width: 60%; }
.s-theme-lines span:nth-child(3) { width: 45%; }

/* ── Profile Section ── */

.settings-profile-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 20px;
    align-items: start;
}

.settings-profile-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.settings-avatar-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.settings-avatar-preview {
    width: 72px;
    height: 72px;
    min-width: 72px;
    border-radius: var(--radius-round);
    background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
    border: 2px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.settings-avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.settings-avatar-actions {
    display: flex;
    gap: var(--spacing-sm);
}

/* ── Profile Preview Card ── */

.settings-profile-preview {
    position: sticky;
    top: 32px;
}

.settings-preview-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-lg) 16px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-lg);
    text-align: center;
}

.settings-preview-avatar {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-round);
    background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
    border: 2px solid rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.settings-preview-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.settings-preview-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.settings-preview-username {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

.settings-preview-bio {
    font-size: 12.5px;
    color: var(--text-secondary);
    margin: 10px 0 0;
    line-height: 1.4;
    word-break: break-word;
}

.settings-preview-status {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-xl);
    font-size: 11px;
    color: var(--text-secondary);
}

.settings-preview-status-dot {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-round);
    background: #66bb6a;
}

/* ── Account Section ── */

/* (uses s-card, s-row, s-btn already defined) */

/* ── Updates Section ── */

.settings-version-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
}

.settings-version-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.settings-version-number {
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.settings-changelog {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.settings-changelog-entry {
    display: flex;
    align-items: center;
    gap: 10px;
}

.settings-changelog-version {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.settings-changelog-date {
    font-size: 12px;
    color: var(--text-muted);
}

.settings-changelog-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.settings-changelog-list li {
    font-size: 13px;
    color: var(--text-secondary);
    padding-left: 16px;
    position: relative;
}

.settings-changelog-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    width: 5px;
    height: 5px;
    border-radius: var(--radius-round);
    background: var(--text-muted);
}

/* ── About Section ── */

.settings-about-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 0 20px;
    text-align: center;
}

.settings-about-logo {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.settings-about-logo svg {
    width: 48px;
    height: 48px;
    color: var(--text-primary);
    filter: drop-shadow(0 4px 12px rgba(255,255,255,0.1));
}

.settings-about-title {
    font-family: var(--font-serif);
    font-size: 28px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.15em;
    margin: 0;
}

.settings-about-version {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 8px;
}

.settings-about-build {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 2px;
}

.settings-credits-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.settings-credit-avatar {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: var(--radius-round);
    background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.settings-credit-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.settings-credit-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.settings-credit-role {
    font-size: 12px;
    color: var(--text-muted);
}

.settings-links-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-sm);
}

.settings-link-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) 8px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 12px;
    transition: var(--transition-smooth);
}

.settings-link-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.1);
}

.settings-link-item svg {
    width: 20px;
    height: 20px;
}

.settings-about-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 20px 0;
    font-size: 12px;
    color: var(--text-muted);
}

/* ── Settings Mobile Responsive ── */

@media (max-width: 1024px) {
    .settings-profile-layout {
        grid-template-columns: 1fr;
    }
    
    .settings-profile-preview {
        position: static;
    }

    .settings-content-scroll {
        padding: var(--spacing-lg) 24px 60px;
    }
}

@media (max-width: 768px) {
    .settings-unified-panel .unified-glass-card {
        flex-direction: column;
        position: relative;
    }

    .settings-sidebar {
        width: 100%;
        min-width: unset;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        padding: 20px 0;
        flex: 1;
        overflow-y: auto;
    }

    #view-settings.section-open .settings-sidebar {
        display: none;
    }

    .settings-content {
        display: none;
        position: absolute;
        inset: 0;
        background: var(--bg-primary);
        z-index: 10;
    }

    #view-settings.section-open .settings-content {
        display: flex;
        flex-direction: column;
        animation: settingsSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

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

    .settings-back-btn {
        display: flex;
        border-bottom: 1px solid var(--border-color);
    }

    .settings-content-scroll {
        padding: var(--spacing-md) 16px 40px;
        flex: 1;
        overflow-y: auto;
    }

    .settings-nav-item {
        padding: 12px 14px;
        font-size: 15px;
        min-height: 48px;
        border-radius: 10px;
    }

    .settings-nav-item svg {
        width: 20px;
        height: 20px;
    }

    .settings-profile-layout {
        grid-template-columns: 1fr;
    }

    .settings-theme-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .s-row--control,
    .s-row--info,
    .s-row--action {
        flex-wrap: wrap;
    }

    .s-slider-wrap {
        min-width: 100%;
        margin-top: 4px;
    }

    .settings-links-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .settings-version-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

/* ==========================================================================
   GLOBAL AVATAR UNIFICATION (Uniform Shape, Font, and Sizing)
   ========================================================================== */

/* Shape & Font family: circular, Outfit, uppercase, semi-bold, non-italic */
.wabi-avatar, 
.avatar, 
.friend-avatar, 
.partner-avatar, 
.conv-avatar,
.user-avatar-btn,
.avatar-letter,
.message-avatar,
.msg-sender-avatar,
.voice-member-avatar,
.voice-participant-avatar,
.media-user-avatar,
.quick-avatar,
.settings-avatar-preview,
.settings-preview-avatar,
.settings-credit-avatar,
.profile-avatar,
.call-avatar,
.call-avatar-glow,
.call-mini-bar-avatar {
    border-radius: 50% !important;
    font-family: var(--font-sans) !important;
    font-weight: 600 !important;
    font-style: normal !important;
    text-transform: uppercase !important;
}

/* Sizing of standard inline/list/sidebar avatars */
.wabi-avatar, 
.avatar, 
.friend-avatar, 
.partner-avatar, 
.conv-avatar,
.user-avatar-btn,
.message-avatar,
.msg-sender-avatar,
.voice-member-avatar,
.media-user-avatar,
.quick-avatar,
.settings-credit-avatar,
.call-mini-bar-avatar {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    font-size: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Quick access buttons unified to perfect circular shape */
.quick-btn {
    border-radius: 50% !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MOBILE VOICE PANELS, CALLING OVERLAY, CONSTELLATIONS & MEDIA FEED OPTIMIZATION
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 768px) {
    /* 1. Voice Calling Overlay Panel & Background */
    .call-controls-dock {
        gap: 8px !important;
        padding: var(--spacing-sm) 12px !important;
        max-width: 92% !important;
        margin: 0 auto !important;
        border-radius: 16px !important;
        justify-content: center !important;
    }
    .call-dock-btn {
        width: 42px !important;
        height: 42px !important;
        border-radius: 50% !important;
    }
    .call-dock-btn svg {
        width: 18px !important;
        height: 18px !important;
    }
    
    .dm-voice-controls {
        gap: 8px !important;
        padding: var(--spacing-sm) 12px !important;
        max-width: 92% !important;
        border-radius: 16px !important;
        flex-shrink: 0 !important;
    }
    .dm-voice-btn {
        width: 42px !important;
        height: 42px !important;
        border-radius: 12px !important;
    }
    .dm-voice-btn svg {
        width: 18px !important;
        height: 18px !important;
    }

    .call-bg-blur-avatar {
        font-size: 280px !important;
        width: 100% !important;
        height: 100% !important;
        top: 0 !important;
        left: 0 !important;
        filter: blur(25px) !important;
        opacity: 0.025 !important;
    }

    /* 2. Room Voice Panel & Participant Cards Grid */
    .group-voice-panel {
        padding: var(--spacing-md) !important;
    }
    .group-voice-header {
        margin-bottom: 16px !important;
    }
    .group-voice-info {
        gap: 8px !important;
    }
    .group-voice-title {
        font-size: 14px !important;
    }
    .group-voice-count {
        font-size: 11px !important;
        padding: 2px 8px !important;
    }

    .group-voice-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    
    .voice-participant-card {
        border-radius: 14px !important;
        aspect-ratio: 1.4 !important;
    }
    
    .voice-participant-avatar {
        width: 44px !important;
        height: 44px !important;
        font-size: 16px !important;
    }
    
    .voice-participant-overlay {
        padding: 12px 8px 8px !important;
    }
    
    .voice-participant-name {
        font-size: 11px !important;
    }
    
    .voice-status-icon {
        width: 20px !important;
        height: 20px !important;
    }
    
    .voice-status-icon svg {
        width: 10px !important;
        height: 10px !important;
    }
    
    .speaking-indicator {
        gap: 2px !important;
        height: 10px !important;
    }
    
    .speaking-indicator span {
        width: 2px !important;
    }

    .voice-cam-placeholder svg {
        width: 28px !important;
        height: 28px !important;
    }
    
    .screenshare-preview-layer .mock-code {
        font-size: 8px !important;
    }

    /* 3. Voice participants grid on mobile */
    #server-voice-panel .voice-channel-panel {
        margin: var(--spacing-sm) !important;
        padding: 10px !important;
        border-radius: 16px !important;
        gap: 10px !important;
    }

    .voice-constellation {
        grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
        grid-auto-rows: minmax(120px, auto);
        gap: 10px;
        padding: 10px;
    }

    .voice-pcard {
        padding: 14px 8px;
        gap: 10px;
    }

    .voice-member-avatar-wrap,
    .voice-cam-stream-mock {
        width: 52px !important;
        height: 52px !important;
    }

    .voice-member-avatar {
        font-size: 19px !important;
    }

    .voice-member-name {
        font-size: 12px !important;
    }

    .voice-status-badge {
        width: 18px !important;
        height: 18px !important;
    }

    .voice-status-badge svg {
        width: 9px !important;
        height: 9px !important;
    }

    /* 4. Voice Footer Control Bar */
    .voice-footer-bar {
        padding: var(--spacing-sm) 12px !important;
        gap: 8px !important;
        border-radius: 12px !important;
    }
    .voice-footer-left {
        width: auto !important;
        flex-grow: 0 !important;
    }
    .voice-footer-status-text {
        display: none !important;
    }
    .voice-footer-center {
        width: auto !important;
        flex-grow: 1 !important;
        gap: 8px !important;
    }
    .voice-footer-right {
        width: auto !important;
        flex-grow: 0 !important;
    }
    .voice-disconnect-btn {
        padding: 0 !important;
        width: 36px !important;
        height: 36px !important;
    border-radius: 50% !important;
        justify-content: center !important;
    }
    .voice-disconnect-btn span {
        display: none !important;
    }
    .voice-control-btn {
        width: 36px !important;
        height: 36px !important;
    }

    /* 5. Room Media Feed Mobile Optimization */
    .media-feed-panel {
        padding: var(--spacing-md) !important;
    }
    
    .media-feed-item {
        padding: 12px !important;
        border-radius: 12px !important;
    }
    
    .media-feed-content {
        padding-left: 0 !important;
        margin-top: 6px !important;
    }
    
    .media-audio-attachment,
    .media-image-wrapper,
    .media-video-wrapper,
    .message-voice-player {
        max-width: 100% !important;
        width: 100% !important;
    }

    .message-voice-player {
        min-width: unset !important;
    }
}

/* ── Dev Log & Voting Styles ── */
.devlog-post-card {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
    border-radius: 14px !important;
    padding: 22px !important;
    transition: border-color 0.3s ease, background-color 0.3s ease !important;
    gap: 0px !important;
}

.devlog-post-card:hover {
    border-color: rgba(255, 255, 255, 0.08) !important;
    background-color: rgba(255, 255, 255, 0.03) !important;
}

.vote-btn {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.vote-btn:hover {
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.04) !important;
}

.vote-btn.active {
    border-color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
}

.vote-btn.vote-yes-btn.active svg {
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.4));
}

.vote-btn.vote-no-btn.active svg {
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.2));
}

.vote-ratio-bar {
    position: relative;
    background: rgba(255, 255, 255, 0.04);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LOVE HUB — DEV LOG (влоги с голосованием)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.devlog-panel {
    margin-top: 28px;
    background: rgba(10, 10, 10, 0.5);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 24px;
    padding: 28px 32px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
    animation: devlogIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.devlog-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.devlog-title {
    font-family: var(--font-serif);
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 4px;
}

.devlog-subtitle {
    font-size: 13.5px;
    color: var(--text-secondary);
    margin: 0;
}

.devlog-close-btn {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
}
.devlog-close-btn:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.devlog-close-btn svg { width: 18px; height: 18px; }

/* Композер (для автора) */
.devlog-composer {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    margin-bottom: 20px;
}
.devlog-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 12px 14px;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 14px;
    resize: vertical;
    outline: none;
    box-sizing: border-box;
}
.devlog-input:focus { border-color: rgba(255, 255, 255, 0.2); }
.devlog-post-btn {
    align-self: flex-end;
    background: #fff;
    color: #000;
    border: none;
    border-radius: 10px;
    padding: 9px 20px;
    font-family: var(--font-sans);
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.devlog-post-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(255,255,255,0.15); }

/* Лента */
.devlog-feed {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.devlog-post {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 18px;
    padding: 20px 22px;
    transition: border-color 0.25s ease;
}
.devlog-post:hover { border-color: rgba(255, 255, 255, 0.1); }

.devlog-post-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.devlog-post-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2a2a2a, #141414);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    flex-shrink: 0;
}
.devlog-post-author { font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.devlog-post-date { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }

.devlog-post-text {
    font-size: 14.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 16px;
    white-space: pre-wrap;
}

/* Шкала голосования */
.devlog-vote-bar {
    height: 8px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
    margin-bottom: 12px;
}
.devlog-vote-fill {
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, rgba(255,255,255,0.55), #fff);
    width: 0%;
    transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Кнопки реакций */
.devlog-reactions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.devlog-react-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.devlog-react-btn:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255,255,255,0.18); }
.devlog-react-btn .devlog-react-icon { width: 16px; height: 16px; display: flex; }
.devlog-react-btn .devlog-react-count { font-family: var(--font-mono); font-size: 12px; }

/* Сердце (за) — активно */
.devlog-react-btn.heart.voted {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
}
.devlog-react-btn.heart.voted .devlog-react-icon svg { fill: #fff; }

/* Разбитое сердце (против) — активно: контур заливаем белым, трещину оставляем тёмной и видимой */
.devlog-react-btn.broken.voted {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
}
.devlog-react-btn.broken.voted .devlog-react-icon svg path:first-child { fill: #fff; stroke: #fff; }
.devlog-react-btn.broken.voted .devlog-react-icon svg path:last-child { fill: none; stroke: #000; stroke-width: 2.2; }

/* Анимация отклика при голосовании */
@keyframes devlogPop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.18); }
    100% { transform: scale(1); }
}
.devlog-react-btn.pop .devlog-react-icon { animation: devlogPop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1); }

.devlog-vote-percent {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-secondary);
}

@media (max-width: 768px) {
    .devlog-panel { padding: 20px 16px; }
    .devlog-reactions { flex-wrap: wrap; }
    .devlog-vote-percent { margin-left: 0; width: 100%; }
}

/* Всплывающая плашка входящего звонка (кастомная плашка) */
.incoming-call-panel {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 5000;
    width: 320px;
    background: rgba(18, 18, 18, 0.75) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 20px;
    padding: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
    animation: incomingCallSlideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.incoming-call-panel.hidden {
    display: none !important;
}

@keyframes incomingCallSlideIn {
    from {
        transform: translateY(-20px) scale(0.95);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.incoming-call-panel-content {
    display: flex;
    align-items: center;
    gap: 14px;
}

.incoming-call-avatar-wrap {
    position: relative;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}

.incoming-call-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 2;
    position: relative;
}

.incoming-call-avatar-pulse {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.2);
    animation: avatarPulse 2s infinite ease-out;
    z-index: 1;
}

@keyframes avatarPulse {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.6); opacity: 0; }
}

.incoming-call-info {
    flex-grow: 1;
    min-width: 0;
}

.incoming-call-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    margin-bottom: 2px;
}

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

.incoming-call-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.incoming-call-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.incoming-call-btn svg {
    width: 16px;
    height: 16px;
}

.incoming-call-btn.accept {
    background: #2ecc71;
    color: #fff;
}

.incoming-call-btn.accept:hover {
    background: #27ae60;
    transform: scale(1.08);
}

.incoming-call-btn.decline {
    background: #e74c3c;
    color: #fff;
}

.incoming-call-btn.decline:hover {
    background: #c0392b;
    transform: scale(1.08);
}

/* ───────────── Dynamic Island: мини-плашка музыки ───────────── */
.music-island {
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%) translateY(-120%);
    z-index: 12000;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 40px;
    max-width: 340px;
    padding: 0 8px 0 16px;
    border-radius: 22px;
    background: rgba(12, 12, 12, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    color: #fff;
    opacity: 0;
    cursor: pointer;
    transition: transform 0.45s cubic-bezier(0.34, 1.4, 0.5, 1), opacity 0.3s ease;
    -webkit-app-region: no-drag;
    user-select: none;
    cursor: grab;
    touch-action: none;
}
.music-island.dragging {
    cursor: grabbing;
    transition: opacity 0.3s ease; /* без transform-перехода во время перетаскивания */
}
.music-island.visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}
.music-island.hidden {
    display: none;
}
.music-island-title {
    font-family: var(--font-sans);
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
    color: #f2f2f2;
}
.music-island-btn {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}
.music-island-btn:hover {
    background: rgba(255, 255, 255, 0.16);
    transform: scale(1.06);
}
.music-island-btn svg {
    width: 13px;
    height: 13px;
}
.music-island-close {
    background: rgba(255, 255, 255, 0.05);
}
.music-island-close:hover {
    background: rgba(231, 76, 60, 0.85);
}
.music-island-wave {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 16px;
    flex-shrink: 0;
}
.music-island-wave span {
    width: 2.5px;
    height: 40%;
    background: #fff;
    border-radius: 2px;
    animation: islandWave 0.9s ease-in-out infinite;
}
.music-island-wave span:nth-child(2) { animation-delay: 0.15s; }
.music-island-wave span:nth-child(3) { animation-delay: 0.3s; }
.music-island-wave span:nth-child(4) { animation-delay: 0.45s; }
.music-island.paused .music-island-wave span {
    animation-play-state: paused;
    height: 40%;
}

/* Кнопка сворачивания — только на мобиле */
.music-island-collapse {
    display: none;
}
@keyframes islandWave {
    0%, 100% { height: 30%; }
    50% { height: 100%; }
}

/* Мобильная адаптация плеера: на узких экранах вверху он перекрывает кнопки
   в шапке (звонок/видео/поиск), а внизу мешает полю ввода и навигации.
   Сажаем плашку ПОД шапку — там свободно. */
@media (max-width: 768px) {
    .music-island {
        top: 64px; /* сразу под шапкой (~56px) + зазор */
        bottom: auto;
        max-width: calc(100vw - 24px);
        width: max-content;
        transform: translateX(-50%) translateY(-160%);
    }
    .music-island.visible {
        transform: translateX(-50%) translateY(0);
    }
    .music-island-title {
        max-width: 44vw;
    }
    /* Показываем кнопку сворачивания на мобиле */
    .music-island-collapse {
        display: flex;
    }

    /* Свёрнутое состояние: маленький кружок с волной, прижат к правому краю */
    .music-island.collapsed {
        left: auto;
        right: 10px;
        transform: translateY(0);
        width: 44px;
        max-width: 44px;
        height: 44px;
        padding: 0;
        justify-content: center;
        border-radius: 50%;
        gap: 0;
    }
    .music-island.collapsed.visible {
        transform: translateY(0);
    }
    /* В свёрнутом виде прячем всё кроме волны-индикатора */
    .music-island.collapsed .music-island-title,
    .music-island.collapsed #music-island-play,
    .music-island.collapsed #music-island-close,
    .music-island.collapsed .music-island-collapse {
        display: none;
    }
    .music-island.collapsed .music-island-wave {
        height: 18px;
    }
}

@media (max-width: 600px) {
    .music-island {
        top: 60px;
        height: 38px;
        padding: 0 6px 0 14px;
        gap: 8px;
    }
    .music-island-title {
        max-width: 40vw;
        font-size: 12px;
    }
}

/* ───────────────── Мини-плашка войса ───────────────── */
.voice-mini-bar {
    position: fixed;
    left: var(--vmb-left, 16px);
    top: var(--vmb-top, auto);
    bottom: var(--vmb-bottom, 16px);
    z-index: 11000;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px;
    border-radius: 22px;
    background: rgba(12, 12, 12, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    color: #fff;
    opacity: 0;
    transform: translateY(16px) scale(0.96);
    transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.34, 1.4, 0.5, 1);
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.voice-mini-bar.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Во время перетаскивания позиция управляется через top/left, transform сбрасываем */
.voice-mini-bar.dragging {
    cursor: grabbing;
    transition: opacity 0.3s ease;
    transform: none;
}

.voice-mini-bar.is-moved {
    bottom: auto;
    transform: none;
}

.voice-mini-bar.hidden {
    display: none;
}

/* Тело плашки — клик возвращает на войс-экран */
.vmb-body {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px 4px 6px;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    border-radius: 12px;
    transition: background 0.18s ease;
}

.vmb-body:hover {
    background: rgba(255, 255, 255, 0.06);
}

/* Пульсирующий индикатор связи */
.vmb-pulse {
    position: relative;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vmb-pulse-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #3ad07a;
    box-shadow: 0 0 0 0 rgba(58, 208, 122, 0.6);
    animation: vmbPulse 1.8s ease-out infinite;
}

@keyframes vmbPulse {
    0% { box-shadow: 0 0 0 0 rgba(58, 208, 122, 0.55); }
    70% { box-shadow: 0 0 0 10px rgba(58, 208, 122, 0); }
    100% { box-shadow: 0 0 0 0 rgba(58, 208, 122, 0); }
}

.vmb-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
    min-width: 0;
}

.vmb-status {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #3ad07a;
    font-weight: 600;
}

.vmb-channel {
    font-size: 12.5px;
    font-weight: 500;
    color: #f2f2f2;
    max-width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vmb-controls {
    display: flex;
    align-items: center;
    gap: 4px;
}

.vmb-btn {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border: none;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.12s ease, color 0.18s ease;
}

.vmb-btn:hover {
    background: rgba(255, 255, 255, 0.16);
    transform: translateY(-1px);
}

.vmb-btn svg {
    width: 17px;
    height: 17px;
}

/* Активное "выключенное" состояние мика/звука */
.vmb-btn.muted-state {
    background: rgba(231, 76, 60, 0.18);
    color: #ff6b5e;
}

.vmb-btn-leave {
    background: rgba(231, 76, 60, 0.16);
    color: #ff6b5e;
}

.vmb-btn-leave:hover {
    background: rgba(231, 76, 60, 0.85);
    color: #fff;
}

/* Мобила: полоса под шапкой во всю ширину (снизу занято вводом и навигацией).
   Чуть ниже плеера, чтобы не столкнуться, когда играет музыка. */
@media (max-width: 768px) {
    /* Компактная плавающая капсула (не растягиваем во всю ширину) — её можно таскать */
    .voice-mini-bar {
        left: var(--vmb-left, 8px);
        right: auto;
        top: var(--vmb-top, auto);
        bottom: var(--vmb-bottom, 80px);
        border-radius: 20px;
        padding: 6px;
    }
    .vmb-channel {
        max-width: 38vw;
    }
    .vmb-btn {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 600px) {
    .vmb-status {
        font-size: 9px;
    }
    .vmb-channel {
        font-size: 12px;
        max-width: 32vw;
    }
}