/* =========================================
   БАЗОВЫЕ НАСТРОЙКИ И ПЕРЕМЕННЫЕ
========================================= */
:root {
    --bg-blur: 5px;
    --wallpaper-opacity: 0.3;
    --font-scale: 1;
    --msg-mine-bg: #1e3a2f; /* Цвет моих сообщений */
    --msg-other-bg: rgba(30, 30, 30, 0.85); /* Цвет чужих сообщений */
}
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: #0a0a0a;
    color: #e0e0e0;
    height: 100vh;
    display: flex;
    overflow: hidden;
}

/* --- ФИКС МАСШТАБА И РАЗМЫТИЯ --- */
#main-app { zoom: var(--font-scale); } /* Безопасное масштабирование */
.message-content {
    /* Добавляем прозрачность к цветам, чтобы blur заработал */
    background-color: color-mix(in srgb, var(--msg-other-bg) 85%, transparent);
    backdrop-filter: blur(var(--bg-blur));
}
.message-row.mine .message-content {
    background-color: color-mix(in srgb, var(--msg-mine-bg) 85%, transparent);
}

/* --- СТИЛИ ДЛЯ УМНОГО ПОЛЯ ВВОДА (ДЛЯ ЭМОДЗИ В ТЕКСТЕ) --- */
#chat-text {
    flex: 1; padding: 12px 0; color: white; outline: none; font-size: 14px;
    min-height: 18px; max-height: 100px; overflow-y: auto; word-wrap: break-word;
}
#chat-text[data-placeholder]:empty:before {
    content: attr(data-placeholder); color: #888; pointer-events: none; display: block;
}
/* Картинки-эмодзи прямо внутри текста */
#chat-text img, .msg-text img {
    width: 22px; height: 22px; vertical-align: bottom; display: inline-block; margin: 0 2px;
}

/* --- КАСТОМНЫЕ РЕАКЦИИ --- */
.reaction-picker img { width: 24px; height: 24px; cursor: pointer; transition: 0.1s; border-radius: 4px; padding: 2px;}
.reaction-picker img:hover { background: #333; transform: scale(1.2); }
.reaction-badge img { width: 16px; height: 16px; margin-right: 2px; vertical-align: middle;}


::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }

/* =========================================
   КНОПКИ
========================================= */
.btn { background: #222; color: #fff; border: 1px solid #333; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 13px; transition: 0.2s; display: inline-flex; align-items: center; gap: 8px;}
.btn:hover { background: #333; border-color: #555;}
.btn-primary { background: #e0e0e0; color: #000; border: none; font-weight: bold;}
.btn-primary:hover { background: #fff; }

/* =========================================
   АВТОРИЗАЦИЯ
========================================= */
#auth-screen { position: fixed; inset: 0; background: #0a0a0a; display: flex; justify-content: center; align-items: center; z-index: 1000; }
.auth-box { background: #121212; padding: 40px; border-radius: 12px; width: 320px; text-align: center; border: 1px solid #222;}
.auth-box h2 { margin-top: 0; font-weight: 500; color: #fff; }
.auth-box input { width: 100%; padding: 12px; margin: 10px 0; border: 1px solid #333; border-radius: 6px; background: #0a0a0a; color: white; box-sizing: border-box; outline: none;}
.auth-box .btn { width: 100%; margin-top: 8px; padding: 12px;}
.error { color: #ff6b6b; font-size: 13px; display: none; margin-bottom: 15px;}

/* =========================================
   ОСНОВНОЙ КАРКАС И МЕНЮ
========================================= */
#main-app { display: none; width: 100%; height: 100%; display: flex; position: relative;}
.toggle-sidebar-btn { position: absolute; top: 12px; left: 15px; z-index: 100; background: #121212; color: #aaa; border: 1px solid #333; border-radius: 6px; padding: 6px 12px; cursor: pointer; transition: 0.2s;}
.toggle-sidebar-btn:hover { background: #222; color: #fff;}

.sidebar { width: 280px; background: #0f0f0f; border-right: 1px solid #222; display: flex; flex-direction: column; transition: width 0.3s ease; position: relative; z-index: 90; overflow: hidden; white-space: nowrap;}
.sidebar.collapsed { width: 60px; }
.sidebar-header, .rooms-list, .profile-panel { transition: opacity 0.2s ease;}
.sidebar.collapsed .sidebar-header, .sidebar.collapsed .rooms-list, .sidebar.collapsed .profile-panel { opacity: 0; pointer-events: none;}

.sidebar-header { padding: 15px 15px 15px 65px; background: #121212; border-bottom: 1px solid #222; display: flex; justify-content: space-between; align-items: center; font-weight: 600;}
.rooms-list { flex: 1; overflow-y: auto; padding: 10px;}
.room-item { padding: 12px 15px; border-radius: 8px; cursor: pointer; margin-bottom: 5px; transition: 0.2s; color: #aaa; font-size: 14px; border: 1px solid transparent; font-weight: 500;}
.room-item:hover { background: #1a1a1a; color: #fff;}
.room-item.active { background: #222; color: #fff; border-color: #333;}

.profile-panel { padding: 15px; background: #121212; border-top: 1px solid #222; display: flex; align-items: center; gap: 12px;}
.profile-panel img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 1px solid #444; flex-shrink: 0;}
.profile-info { flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: 13px; overflow: hidden;}
.profile-info span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; color: #fff;}
input[type="file"] { display: none; }
.logout-btn, .settings-btn { background: transparent; border: none; color: #aaa; cursor: pointer; font-size: 18px; padding: 5px;}
.logout-btn:hover { color: #ff4c4c; }
.settings-btn:hover { color: #fff; }

/* =========================================
   ПРАВАЯ ЗОНА (ЗАГЛУШКА И ЧАТ)
========================================= */
.main-area { flex: 1; display: flex; position: relative; background: #0a0a0a; width: 100%; height: 100%;}

#placeholder-screen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background-color: #0a0a0a; background-image: url('/static/images/placeholder.jpg'); background-size: cover; background-position: center; z-index: 50;}
#placeholder-screen .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(10,10,10,0.85); z-index: 1;}
#placeholder-screen p { position: relative; z-index: 2; color: #ccc; font-size: 15px; font-weight: 500; background: #151515; padding: 15px 30px; border-radius: 12px; border: 1px solid #333; box-shadow: 0 10px 30px rgba(0,0,0,0.5); margin: 0;}

#chat-interface { display: none; width: 100%; height: 100%; }

.stream-panel { display: none; flex: 1; background: #000; border-right: 1px solid #222;}
.stream-panel iframe { width: 100%; height: 100%; border: none; }

.chat-panel { flex: 1; display: flex; flex-direction: column; background: #121212; position: relative;}
.chat-wallpaper { position: absolute; inset: 0; background-image: url('/static/images/placeholder.jpg'); background-size: cover; background-position: center; opacity: var(--wallpaper-opacity); pointer-events: none; z-index: 0;}

.chat-header { padding: 15px 20px; background: #181818; border-bottom: 1px solid #222; display: flex; justify-content: space-between; align-items: center; z-index: 2; position: relative;}
.chat-title { font-weight: 600; font-size: 16px; color: #fff; display: flex; align-items: center; gap: 10px;}
.chat-actions { display: flex; gap: 8px;}
.header-btn { background: #222; border: 1px solid #333; color: #aaa; padding: 6px 10px; border-radius: 6px; cursor: pointer; font-size: 12px; transition: 0.2s; font-weight: 500;}
.header-btn:hover { background: #333; color: #fff; }
.btn-stream { color: #aaa; } .btn-stream:hover { color: #fff; }
.btn-delete { color: #ff6b6b; border-color: #552222; } .btn-delete:hover { background: #ff4c4c; color: #fff; border-color: #ff4c4c;}

.chat-body-wrapper { display: flex; flex: 1; overflow: hidden; position: relative; z-index: 1;}
.chat-main { flex: 1; display: flex; flex-direction: column; position: relative; min-width: 0;}

/* УЧАСТНИКИ ЧАТА */
.members-sidebar { width: 220px; background: rgba(15, 15, 15, 0.9); border-left: 1px solid #222; display: flex; flex-direction: column; flex-shrink: 0;}
.members-header { padding: 15px; font-weight: 600; font-size: 12px; color: #777; border-bottom: 1px solid #222; text-transform: uppercase; letter-spacing: 1px;}
.members-list { flex: 1; overflow-y: auto; padding: 10px;}
.member-item { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 6px; margin-bottom: 4px; transition: 0.2s;}
.member-item:hover { background: #222;}
.member-item img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 1px solid #444;}
.member-item .name { font-size: 13px; color: #ddd; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #444; }
.status-dot.online { background: #28a745; box-shadow: 0 0 6px rgba(40, 167, 69, 0.5);}

/* =========================================
   СООБЩЕНИЯ
========================================= */
.messages { flex: 1; padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; scroll-behavior: smooth;}
.message-row { display: flex; gap: 12px; align-items: flex-end; padding: 2px 5px;}
.message-row img.avatar { width: 36px; height: 36px; min-width: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 1px solid #333;}
.message-column { display: flex; flex-direction: column; align-items: flex-start; max-width: 85%; position: relative;}
.message-content { background: var(--msg-other-bg); backdrop-filter: blur(var(--bg-blur)); padding: 10px 14px; border-radius: 12px 12px 12px 0; border: 1px solid #2a2a2a; width: 100%; box-sizing: border-box;}
.message-content .meta { font-size: 11px; color: #777; margin-bottom: 4px; display: flex; gap: 6px; align-items: baseline;}
.message-content .username { font-weight: 600; color: #e0e0e0; font-size: 13px;}

/* СМЕЩЕНИЕ МОИХ СООБЩЕНИЙ ВПРАВО */
.message-row.mine { flex-direction: row-reverse; align-self: flex-end;}
.message-row.mine .message-column { align-items: flex-end;}
.message-row.mine .message-content { background: var(--msg-mine-bg); border-radius: 12px 12px 0 12px; border-color: #333;}
.message-row.mine .msg-actions { right: auto; left: -10px; }

/* ГРУППИРОВКА */
.grouped { margin-top: -8px; }
.grouped img.avatar { visibility: hidden; }
.grouped .meta { display: none; }
.grouped .message-content { border-radius: 12px; }

.chat-media { max-width: 100%; max-height: 250px; border-radius: 8px; margin-top: 8px; border: 1px solid #333; object-fit: contain; background: #0a0a0a;}

/* =========================================
   РЕПЛАИ И РЕАКЦИИ
========================================= */
.replied-message { border-left: 3px solid #666; background: rgba(0, 0, 0, 0.3); padding: 5px 10px; border-radius: 4px; margin-bottom: 6px; font-size: 12px; color: #bbb; cursor: pointer; transition: 0.2s;}
.replied-message:hover { background: rgba(0, 0, 0, 0.5); }
.replied-message .rep-name { font-weight: 600; color: #aaa; margin-bottom: 2px;}

.msg-actions { display: none; position: absolute; right: -10px; bottom: -10px; gap: 4px; z-index: 5;}
.message-row:hover .msg-actions { display: flex; }
.msg-action-btn { background: #222; border-radius: 12px; padding: 3px 8px; font-size: 11px; cursor: pointer; border: 1px solid #444; color: #aaa; user-select: none; display: flex; align-items: center; box-shadow: 0 2px 5px rgba(0,0,0,0.5);}
.msg-action-btn:hover { background: #333; color: #fff; border-color: #666;}

.reactions-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.reactions-list:empty { display: none; margin: 0; }
.reaction-picker { display: none; position: absolute; top: calc(100% + 5px); background: #1a1a1a; padding: 6px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.8); z-index: 10; gap: 4px; border: 1px solid #333; width: max-content; flex-wrap: wrap;}
.reaction-picker span { cursor: pointer; font-size: 18px; padding: 4px; border-radius: 6px; transition: 0.1s;}
.reaction-picker span:hover { background: #333; transform: scale(1.1); }
.reaction-badge { background: #1a1a1a; padding: 2px 8px; border-radius: 12px; font-size: 12px; border: 1px solid #333; display: flex; align-items: center; gap: 4px; cursor: pointer; color: #aaa;}
.reaction-badge:hover { background: #2a2a2a; border-color: #555;}
.reaction-badge.reacted-by-me { background: #2a2a2a; border-color: #777; color: #fff;}

/* =========================================
   ПАНЕЛЬ ВВОДА И СТИКЕРЫ
========================================= */
.typing-indicator { padding: 5px 20px 10px 20px; font-size: 12px; color: #888; font-style: italic; min-height: 15px; display: none; z-index: 2;}

.chat-input-container { padding: 0 20px 20px 20px; display: flex; flex-direction: column; z-index: 2; position: relative;}

.reply-indicator { display: none; background: rgba(20,20,20,0.9); border-left: 3px solid #666; padding: 8px 12px; margin-bottom: 8px; border-radius: 8px; justify-content: space-between; align-items: center; border: 1px solid #333; border-left-width: 3px;}
.reply-indicator-content { display: flex; flex-direction: column; font-size: 12px; overflow: hidden; flex: 1;}
.reply-indicator-content .rep-name { color: #aaa; font-weight: bold; margin-bottom: 2px;}
.reply-indicator-content .rep-text { color: #aaa; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.reply-cancel { cursor: pointer; color: #ff6b6b; font-size: 18px; padding: 0 10px; font-weight: bold;}
.reply-cancel:hover { color: #ff4c4c;}

.chat-input-row { display: flex; gap: 8px; align-items: stretch; width: 100%; position: relative;}
.chat-input-wrapper { flex: 1; display: flex; background: #151515; border: 1px solid #333; border-radius: 8px; padding: 2px 10px; align-items: center; box-shadow: 0 -2px 10px rgba(0,0,0,0.3);}
.chat-input-wrapper:focus-within { border-color: #666; }
.chat-input-wrapper input { flex: 1; padding: 12px 0; border: none; background: transparent; color: white; outline: none; font-size: 14px;}
.attach-btn { cursor: pointer; color: #888; padding: 5px; display: flex; align-items: center; font-size: 16px;}
.attach-btn:hover { color: #fff; }
.btn-send { background: #e0e0e0; color: #000; border: none; padding: 12px 18px; border-radius: 6px; cursor: pointer; font-weight: 500;}

.stickers-panel { display: none; position: absolute; bottom: 100%; left: 0; background: #151515; border: 1px solid #333; border-radius: 8px; padding: 10px; width: 300px; height: 200px; overflow-y: auto; flex-wrap: wrap; gap: 5px; box-shadow: 0 -5px 20px rgba(0,0,0,0.5); z-index: 10; margin-bottom: 10px;}
.stickers-panel img { width: 60px; height: 60px; object-fit: contain; cursor: pointer; border-radius: 4px; padding: 2px;}
.stickers-panel img:hover { background: #222; }

/* =========================================
   ОКНО НАСТРОЕК
========================================= */
.settings-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.8); z-index: 2000; justify-content: center; align-items: center;}
.settings-content { background: #151515; padding: 30px; border-radius: 12px; width: 300px; border: 1px solid #333; box-shadow: 0 10px 40px rgba(0,0,0,0.5);}
.settings-content h3 { margin-top: 0; border-bottom: 1px solid #333; padding-bottom: 10px;}
.setting-row { margin-bottom: 15px; display: flex; flex-direction: column; gap: 5px; font-size: 14px; color: #aaa;}
.setting-row input[type="range"] { width: 100%; accent-color: #e0e0e0;}
.setting-row input[type="color"] { border: none; width: 100%; height: 30px; border-radius: 4px; cursor: pointer; background: transparent;}
/* --- ФИКС Z-INDEX И МАСШТАБА --- */
#main-app { zoom: var(--font-scale); }
.message-content { background-color: color-mix(in srgb, var(--msg-other-bg) 85%, transparent); backdrop-filter: blur(var(--bg-blur)); }
.message-row.mine .message-content { background-color: color-mix(in srgb, var(--msg-mine-bg) 85%, transparent); }

/* Магия Z-index: при наведении сообщение выходит на передний план! */
.message-row { position: relative; z-index: 1; }
.message-row:hover { z-index: 50; }

/* --- УМНОЕ ПОЛЕ ВВОДА (ДЛЯ ЭМОДЗИ) --- */
#chat-text { flex: 1; padding: 12px 0; color: white; outline: none; font-size: 14px; min-height: 18px; max-height: 100px; overflow-y: auto; word-wrap: break-word; }
#chat-text[data-placeholder]:empty:before { content: attr(data-placeholder); color: #888; pointer-events: none; display: block; }
#chat-text img, .msg-text img { width: 22px; height: 22px; vertical-align: bottom; display: inline-block; margin: 0 2px;}

/* ПАНЕЛЬ СТИКЕРОВ И ЭМОДЗИ */
.stickers-panel {
    display: none; position: absolute; bottom: calc(100% + 10px); left: 0;
    background: #151515; border: 1px solid #333; border-radius: 8px;
    padding: 15px; width: 340px; height: 300px; /* Жесткая высота для скролла */
    overflow-y: auto; flex-direction: column; gap: 15px;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.5); z-index: 10;
}
.asset-section-title { color: #888; font-size: 12px; font-weight: bold; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #333; padding-bottom: 5px;}

/* Сетка (ОБЯЗАТЕЛЬНО flex-wrap: wrap) */
.asset-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.asset-grid span { cursor: pointer; font-size: 24px; transition: 0.1s;}
.asset-grid span:hover { transform: scale(1.2); }
.asset-grid img.emoji-img { width: 24px; height: 24px; object-fit: contain; cursor: pointer; transition: 0.1s; border-radius: 4px; padding: 2px;}
.asset-grid img.emoji-img:hover { background: #333; transform: scale(1.2); }
.asset-grid img.sticker-img { width: 60px; height: 60px; object-fit: contain; cursor: pointer; transition: 0.1s; border-radius: 4px; padding: 2px;}
.asset-grid img.sticker-img:hover { background: #222; transform: scale(1.1); }

.add-asset-btn { background: #222; color: #aaa; border-radius: 4px; padding: 2px 8px; cursor: pointer; font-size: 12px; border: 1px solid #444;}
.add-asset-btn:hover { background: #333; color: #fff;}
.add-asset-btn input { display: none; }

/* КАСТОМНЫЕ РЕАКЦИИ */
.reaction-picker { display: none; position: absolute; right: -10px; top: calc(100% + 5px); background: #1a1a1a; padding: 10px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.8); z-index: 100; gap: 10px; border: 1px solid #333; width: 240px; flex-direction: column;}
.reaction-picker span { cursor: pointer; font-size: 18px; padding: 4px; border-radius: 6px; transition: 0.1s;}
.reaction-picker span:hover { background: #333; transform: scale(1.2); }
.reaction-picker img { width: 24px; height: 24px; cursor: pointer; transition: 0.1s; border-radius: 4px; padding: 2px;}
.reaction-picker img:hover { background: #333; transform: scale(1.2); }

/* Кнопка "Добавить (+)" */
.add-asset-btn { background: #222; color: #aaa; border-radius: 4px; padding: 2px 6px; cursor: pointer; font-size: 10px; display: flex; align-items: center;}
.add-asset-btn:hover { background: #333; color: #fff;}
.add-asset-btn input { display: none; }

/* =========================================
   АППАРАТНОЕ УСКОРЕНИЕ (GPU Acceleration)
========================================= */

/* Принудительно отправляем тяжелые элементы на рендер в видеокарту */
.message-content,
.chat-wallpaper,
.sidebar,
#placeholder-screen .overlay {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform, backdrop-filter;
}

/* Ускоряем скроллинг чата */
.messages {
    will-change: scroll-position;
    -webkit-overflow-scrolling: touch;
}

/* Ускоряем анимации открытия панелей */
.stickers-panel,
.reaction-picker,
.settings-modal {
    will-change: opacity, transform;
}
/* --- ФИКС ОГРОМНЫХ ЭМОДЗИ В РЕПЛАЯХ --- */
/* --- ФИКС ОГРОМНЫХ ЭМОДЗИ В РЕПЛАЯХ И ПАНЕЛИ ОТВЕТА --- */
.replied-message img,
.reply-indicator-content img {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin: 0 2px;
    object-fit: contain;
    display: inline-block;
}
/* --- ТЕГИ И УПОМИНАНИЯ (@Username) --- */
.mention { color: #4da6ff; background: rgba(77, 166, 255, 0.15); padding: 1px 4px; border-radius: 4px; font-weight: 500; cursor: pointer; transition: 0.2s;}
.mention:hover { background: rgba(77, 166, 255, 0.3); }

/* --- РЕДАКТИРОВАНИЕ СООБЩЕНИЙ --- */
.edited-tag { font-size: 10px; color: #777; margin-left: 5px; font-style: italic; white-space: nowrap;}
.chat-input-wrapper.editing { border-color: #f39c12; box-shadow: 0 0 10px rgba(243, 156, 18, 0.2); }

/* Делаем никнеймы кликабельными (для вставки тега) */
.message-content .username { cursor: pointer; transition: 0.2s; }
.message-content .username:hover { color: #4da6ff; text-decoration: underline; }
.member-item { cursor: pointer; }

/* --- СТИЛИ ДЛЯ ОТВЕТОВ НЕЙРОСЕТИ (MARKDOWN) --- */
.msg-text p { margin: 0; padding: 0; } /* Убираем огромные отступы у абзацев */
.msg-text p + p { margin-top: 8px; } /* Делаем аккуратный отступ между абзацами */
.msg-text strong { color: #fff; } /* Жирный текст делаем ярче */

/* Красивое оформление блоков кода (если ИИ напишет код) */
.msg-text pre { background: #111; padding: 10px; border-radius: 6px; overflow-x: auto; border: 1px solid #333; margin: 8px 0;}
.msg-text code { background: #222; padding: 2px 5px; border-radius: 4px; font-family: monospace; font-size: 13px; color: #4da6ff;}
.msg-text pre code { background: transparent; padding: 0; color: #e0e0e0; }
/* --- НОВЫЙ ДИЗАЙН ШАПКИ И КНОПОК --- */
.icon-btn { background: transparent; border: none; color: #aaa; font-size: 20px; cursor: pointer; padding: 4px 8px; border-radius: 6px; transition: 0.2s; display: flex; justify-content: center; align-items: center;}
.icon-btn:hover { background: #222; color: #fff; }
.icon-btn.active { color: #28a745; background: rgba(40, 167, 69, 0.1); }

/* Выпадающее меню (Три точки) */
.dropdown { position: relative; display: inline-block; }
.dropdown-content { display: none; position: absolute; right: 0; top: 100%; background-color: #1a1a1a; min-width: 160px; box-shadow: 0 8px 16px rgba(0,0,0,0.5); border-radius: 8px; border: 1px solid #333; z-index: 100; overflow: hidden; flex-direction: column;}
.dropdown-content.show { display: flex; }
.dropdown-content button { background: none; border: none; color: #e0e0e0; padding: 12px 16px; text-align: left; cursor: pointer; font-size: 13px; transition: 0.2s;}
.dropdown-content button:hover { background-color: #2a2a2a; color: #fff; }

/* Последнее сообщение в списке комнат */
.room-item-content { display: flex; flex-direction: column; gap: 3px; overflow: hidden;}
.room-name { font-weight: 500; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.room-last-msg { font-size: 11px; color: #666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

/* Панель активных участников звонка */
.voice-participants { display: none; padding: 10px 20px; background: rgba(20, 20, 20, 0.95); border-bottom: 1px solid #222; gap: 10px; align-items: center; flex-wrap: wrap;}
.voice-participants span { font-size: 12px; color: #888; margin-right: 10px;}
.voice-avatar { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #28a745; object-fit: cover; box-shadow: 0 0 10px rgba(40, 167, 69, 0.3);}

/* Локальное закрытие стрима */
.local-close-stream { position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,0.5); color: #fff; border: 1px solid #555; border-radius: 50%; width: 30px; height: 30px; cursor: pointer; display: flex; justify-content: center; align-items: center; z-index: 10; font-size: 16px;}
.local-close-stream:hover { background: #ff4c4c; border-color: #ff4c4c; }