:root {
    --bg-primary: #0f171e;
    --bg-secondary: #18222d;
    --bg-tertiary: #222e3a;
    --bg-hover: #2a3744;
    
    --bg-active: #0088cc;
    --text-primary: #ffffff;
    --text-secondary: #8e99a4;
    --text-accent: #0088cc;
    --text-danger: #e53935;
    --border-primary: #2a3744;
    
    --message-out-bg: #3a76f0;
    --message-in-bg: #262d31;
    
    --font-main: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-size-sm: 13px;
    --font-size-md: 14px;
    --font-size-lg: 16px;

    /* ▼▼▼ ОБНОВЛЕННЫЕ ПЕРЕМЕННЫЕ ДЛЯ ФОНОВ ▼▼▼ */
    --main-bg-blur: 0px;
    --main-bg-position: center;
    --panel-opacity: 0.8; /* Прозрачность панелей, когда у них есть фон */
    
    /* Переменные для каждой панели */
    --left-panel-bg-image: none;
    --center-panel-bg-image: none;
    --right-view-bg-image: none;

    /* Переменные для цвета фона панелей (для управления прозрачностью) */
    --left-panel-bg-color: var(--bg-secondary);
    --center-panel-bg-color: var(--bg-secondary);
    --right-view-bg-color: var(--bg-primary);

    /* ▼▼▼ НОВЫЕ ПЕРЕМЕННЫЕ ДЛЯ СТЕКЛА ▼▼▼ */
    --bg-active-glass-blur: 8px; /* Размытие по умолчанию */
    --bg-active-glass-color: rgba(0, 136, 204, 0.45); /* Цвет стекла по умолчанию */

    --bg-hover-color: #aab8c5;      /* Базовый цвет подсветки */
    --bg-hover-opacity: 0.2;       /* Прозрачность подсветки */
    --bg-hover-glass-blur: 4px;    /* Размытие при наведении */
    --bg-hover-glass-color: rgba(170, 184, 197, 0.2); /* Финальный цвет, который будет строить JS */

    --bg-hover-color: #aab8c5;      /* Базовый цвет подсветки */
    --bg-hover-opacity: 0.2;       /* Прозрачность подсветки */
    --bg-hover-glass-blur: 4px;    /* Размытие при наведении */
    --bg-hover-glass-color: rgba(170, 184, 197, 0.2); /* Финальный цвет, который будет строить JS */
}
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--font-main);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    overflow: hidden;
    height: 100vh;
    width: 100vw;
}

body.dragging-select {
    user-select: none;
}

.hidden {
    display: none !important;
}

/* --- Стили для скрытия полосы прокрутки --- */
#main-menu,
#chat-list,
.chat-view__messages,
.emoji-tab-content,
.user-info__content,
.settings-main,
#country-list,
.frequent-contacts-list,
#center-panel-content,
#forward-recipient-list,
.session-chat__messages,
.participants-list,
#youtube-browse-list-view, 
#wp-yt-channel-view-content,
#gdrive-browse-results {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
#main-menu::-webkit-scrollbar,
#chat-list::-webkit-scrollbar,
.chat-view__messages::-webkit-scrollbar,
.emoji-tab-content::-webkit-scrollbar,
.user-info__content::-webkit-scrollbar,
.settings-main::-webkit-scrollbar,
#country-list::-webkit-scrollbar,
.frequent-contacts-list::-webkit-scrollbar,
#center-panel-content::-webkit-scrollbar,
#forward-recipient-list::-webkit-scrollbar,
.session-chat__messages::-webkit-scrollbar,
.participants-list::-webkit-scrollbar,
#youtube-browse-list-view::-webkit-scrollbar,
#wp-yt-channel-view-content::-webkit-scrollbar,
#gdrive-browse-results::-webkit-scrollbar {
    display: none;
}


/* ======================================================= */
/* =========== СТИЛИ ДЛЯ АУТЕНТИФИКАЦИИ ============ */
/* ======================================================= */

#auth-container {
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.auth-form {
    width: 100%;
    max-width: 380px;
    background-color: var(--bg-secondary);
    padding: 32px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 18px;
    position: relative;
}

.auth-form h2 {
    font-size: 24px;
    font-weight: 500;
    margin-bottom: -5px;
}

.auth-subtitle {
    color: var(--text-secondary);
    font-size: var(--font-size-md);
    line-height: 1.5;
}

.auth-button {
    width: 100%;
    padding: 12px;
    background-color: var(--text-accent);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: var(--font-size-md);
    font-weight: 500;
    cursor: pointer;
    transition: background-color: 0.2s;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.auth-button:hover {
    background-color: #0099e6;
}
.auth-button:disabled {
    background-color: var(--bg-hover);
    cursor: not-allowed;
}

.google-button {
    background-color: #4285F4;
    margin-top: 0;
}
.google-button:hover {
    background-color: #5a95f5;
}

.auth-separator {
    width: 100%;
    text-align: center;
    border-bottom: 1px solid var(--border-primary);
    line-height: 0.1em;
    margin: 10px 0 20px;
}
.auth-separator span {
    background: var(--bg-secondary);
    padding: 0 10px;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}


.auth-input {
    width: 100%;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    padding: 12px 16px;
    color: var(--text-primary);
    font-size: var(--font-size-md);
    transition: border-color: 0.2s;
}
.auth-input:focus {
    outline: none;
    border-color: var(--text-accent);
}

.input-error {
    border-color: var(--text-danger) !important;
    animation: shake 0.6s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes shake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(4px, 0, 0); }
}


.link-button {
    background: none;
    border: none;
    color: var(--text-accent);
    cursor: pointer;
    font-size: var(--font-size-sm);
}
.link-button:disabled {
    color: var(--text-secondary);
    cursor: not-allowed;
}

.back-button {
    position: absolute;
    top: 16px;
    left: 16px;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
}

.phone-input-group {
    display: flex;
    width: 100%;
}

.country-selector-wrapper button {
    height: 100%;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-right: none;
    padding: 0 12px;
    border-radius: 8px 0 0 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}
.country-flag-selected {
    width: 24px;
    height: auto;
}
#selected-country-code {
    color: var(--text-primary);
}

#phone-input {
    flex-grow: 1;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: 0 8px 8px 0;
    padding: 12px;
    color: var(--text-primary);
    font-size: var(--font-size-md);
}
#phone-input:focus {
    outline: none;
    border-color: var(--text-accent);
}

#recaptcha-container {
    margin-top: -10px;
}

.code-inputs-container {
    display: flex;
    justify-content: center;
    gap: 10px;
}
.code-input {
    width: 45px;
    height: 50px;
    text-align: center;
    font-size: 22px;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    color: var(--text-primary);
}
.code-input:focus {
    outline: none;
    border-color: var(--text-accent);
}

.avatar-uploader {
    position: relative;
    width: 100px;
    height: 100px;
}
.avatar-uploader label {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
    border-radius: 50%;
}
.avatar-placeholder,
#avatar-preview {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    border-radius: 50%;
}
.avatar-placeholder {
    background-color: var(--text-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color: 0.2s ease;
}
.avatar-uploader label:hover .avatar-placeholder {
    background-color: #0099e6;
}
#avatar-preview {
    object-fit: cover;
    border: 2px solid var(--border-primary);
}

.modal-view {
    position: fixed;
    inset: 0;
    background-color: rgba(15, 23, 30, 0.7);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}
.modal-content {
    background-color: var(--bg-secondary);
    width: 90%;
    max-width: 420px;
    max-height: 80vh;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.modal-header {
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-primary);
    flex-shrink: 0;
}

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

.cropper-modal-content {
    max-width: 500px;
    width: 100%;
    height: 600px;
    max-height: 90vh;
    background-color: #000;
    padding: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 12px;
}
#cropper-main-view {
    width: 100%;
    height: 100%;
}
.cropper-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 11;
    padding: 12px 24px 20px 24px;
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.cropper-actions {
    display: flex;
    gap: 16px;
}
.cropper-text-button {
    background: none;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    font-size: var(--font-size-md);
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 6px;
    transition: background-color: 0.2s;
}
.cropper-text-button:hover {
    background-color: rgba(255,255,255,0.1);
}
#confirm-crop-btn {
    color: var(--text-accent);
}
.cropper-actions .icon-button i { color: var(--text-primary); }
.cropper-actions .icon-button:disabled i { color: var(--text-secondary); }
.cropper-actions .icon-button:disabled { cursor: not-allowed; background-color: transparent; }
.cr-boundary { border-radius: 0; }
.cr-viewport {
    border: 2px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.6);
}
.cr-resizer {
    width: 20px;
    height: 20px;
    background-color: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(0,0,0,0.5);
}


/* ======================================================= */
/* =========== ОСНОВНЫЕ СТИЛИ ПРИЛОЖЕНИЯ ============= */
/* ======================================================= */
#app-container {
    display: flex;
    height: 100vh;
    /* Убираем фон отсюда, так как он будет на дочерних элементах */
    background-color: var(--bg-primary); /* Фоновый цвет по умолчанию */
}

i[data-lucide] { stroke-width: 2; width: 20px; height: 20px; }
.avatar-placeholder i[data-lucide] { width: 40px; height: 40px; color: rgba(255, 255, 255, 0.8); }
.icon-button { background: none; border: none; color: var(--text-secondary); cursor: pointer; padding: 8px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background-color: 0.2s; }
.icon-button:hover { background-color: var(--bg-hover); }

#left-panel {
    width: 320px;
    min-width: 320px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border-primary);
    transition: width 0.3s ease, min-width 0.3s ease;
    justify-content: space-between;
    
    /* ▼▼▼ ИНДИВИДУАЛЬНЫЙ ФОН ▼▼▼ */
    background-color: var(--left-panel-bg-color);
    background-size: cover;
    background-position: var(--main-bg-position);
    backdrop-filter: blur(var(--main-bg-blur));
}

.left-panel__top { display: flex; flex-direction: column; flex-grow: 1; overflow: hidden; }
#user-profile { padding: 12px 16px; cursor: pointer; transition: padding 0.3s ease; }
.profile-card { display: flex; align-items: center; gap: 14px; }
.avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #4A90E2;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 20px;
    flex-shrink: 0;
    object-fit: cover;
}
.profile-card__info h4 {
    font-size: var(--font-size-md);
    font-weight: 500;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.profile-card__info p { font-size: var(--font-size-sm); color: var(--text-accent); margin-top: 4px; }
#main-menu { flex-grow: 1; overflow-y: auto; padding: 0 8px; }
.menu-item { display: flex; align-items: center; gap: 20px; padding: 12px 16px; border-radius: 8px; cursor: pointer; font-size: var(--font-size-md); font-weight: 500; transition: background-color: 0.2s; }
.menu-item i { color: var(--text-secondary); }
.menu-item:hover {
    /* Применяем полупрозрачный цвет стекла */
    background-color: var(--bg-active-glass-color);
    
    /* Применяем эффект размытия фона под кнопкой */
    backdrop-filter: blur(var(--bg-active-glass-blur));
    -webkit-backdrop-filter: blur(var(--bg-active-glass-blur)); /* Для поддержки Safari */
}
.menu-item:hover i {
    color: var(--text-primary);
}
#logout-container { padding: 0 8px 8px 8px; flex-shrink: 0; }
.menu-item--danger i, .menu-item--danger span { color: var(--text-danger); transition: color 0.2s; }
.menu-item--danger:hover { background-color: rgba(229, 57, 53, 0.1); }
#left-panel.left-panel--collapsed { width: 96px; min-width: 96px; }
#left-panel.left-panel--collapsed #logout-container { padding-bottom: 8px; }
#left-panel.left-panel--collapsed #user-profile { padding: 12px 0; }
#left-panel.left-panel--collapsed .profile-card { justify-content: center; }
#left-panel.left-panel--collapsed .profile-card__info { display: none; }
#left-panel.left-panel--collapsed .menu-item span { display: none; }
#left-panel.left-panel--collapsed .menu-item { justify-content: center; padding: 16px; }

#center-panel {
    width: 400px;
    min-width: 400px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border-primary);
    
    /* ▼▼▼ ИНДИВИДУАЛЬНЫЙ ФОН ▼▼▼ */
    background-color: var(--center-panel-bg-color);
    background-image: var(--center-panel-bg-image);
    background-size: cover;
    background-position: var(--main-bg-position);
    backdrop-filter: blur(var(--main-bg-blur));
    -webkit-backdrop-filter: blur(var(--main-bg-blur));
}

.center-panel__header { padding: 8px 16px; height: 52px; display: flex; align-items: center; gap: 8px; }
.search-bar { position: relative; flex-grow: 1; }
.search-bar__icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-secondary); }
.search-bar input { width: 100%; background-color: var(--bg-secondary); border: 1px solid transparent; border-radius: 20px; padding: 8px 40px; color: var(--text-primary); font-size: var(--font-size-md); }
.search-bar input:focus { outline: none; border-color: var(--text-accent); }
#chat-list { list-style: none; flex-grow: 1; overflow-y: auto; }
.chat-item { display: flex; align-items: center; padding: 10px 16px; cursor: pointer; gap: 12px; transition: background-color: 0.2s, border-left-color 0.2s; border-left: 3px solid transparent; }
/* 1. Стиль для АКТИВНОГО чата (тот, что уже открыт) */

.chat-item .avatar { width: 50px; height: 50px; }
.chat-item__content { flex-grow: 1; overflow: hidden; }
.chat-item__header { display: flex; justify-content: space-between; align-items: center; }
.chat-item__name { font-size: var(--font-size-md); font-weight: 500; }
.chat-item__time { font-size: var(--font-size-sm); color: var(--text-secondary); }
.chat-item__message { font-size: var(--font-size-md); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 4px; }

#right-view {
    flex-grow: 1;
    display: flex;
    position: relative;
    overflow: hidden;

    /* ▼▼▼ ИНДИВИДУАЛЬНЫЙ ФОН ▼▼▼ */
    background-color: var(--right-view-bg-color);
    background-image: var(--right-view-bg-image);
    background-size: cover;
    background-position: var(--main-bg-position);
    backdrop-filter: blur(var(--main-bg-blur));
    -webkit-backdrop-filter: blur(var(--main-bg-blur));
}

#chat-view { width: 100%; display: flex; flex-direction: column; transition: width 0.3s ease; }
#right-view.info-panel-open #chat-view { width: calc(100% - 350px); }

/* --- ОБНОВЛЕННЫЕ СТИЛИ ХЕДЕРА --- */
.chat-view__header-container {
    height: 52px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}
.chat-view__header, .select-mode-header {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.25s ease-out;
}
.chat-view__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    background-color: var(--bg-secondary);
}

/* ======================================================= */
/* ====== СТИЛИ ДЛЯ ПОИСКА ВНУТРИ ЧАТА (РЕДИЗАЙН v3) ====== */
/* ======================================================= */

/* --- Основная панель поиска --- */
.chat-search-bar {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 16px; /* Увеличим отступ между блоками */
    background-color: var(--bg-secondary);
    
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: transform 0.2s ease-out, opacity 0.2s ease-out;
}

/* --- Анимации показа/скрытия (остаются без изменений) --- */
#chat-view.search-active .chat-search-bar {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}
#chat-view.search-active .chat-view__header {
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
}

/* --- НОВЫЙ БЛОК: Контейнер для поля ввода и иконки --- */
/* Превращаем его в единый визуальный элемент */
.chat-search-bar .search-input-container {
    flex-grow: 1;
    display: flex; /* Используем Flexbox для выравнивания */
    align-items: center;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    transition: border-color 0.2s;
}

.chat-search-bar .search-input-container:focus-within {
    border-color: var(--text-accent); /* Подсветка при фокусе на input внутри */
}

/* --- Иконка поиска --- */
/* Убираем абсолютное позиционирование */
.chat-search-bar .search-input-container i {
    padding-left: 12px; /* Отступ слева */
    padding-right: 8px; /* Отступ между иконкой и текстом */
    color: var(--text-secondary);
}

/* --- Поле ввода --- */
/* Делаем его "невидимым", чтобы фон контейнера работал */
#chat-search-input {
    width: 100%;
    height: 38px; /* Задаем фиксированную высоту */
    background: transparent;
    border: none;
    padding: 8px 12px 8px 0; /* Убираем левый padding, так как он у иконки */
    color: var(--text-primary);
    font-size: 15px;
}
#chat-search-input:focus {
    outline: none; /* Убираем стандартную обводку */
}

/* --- Контейнер для навигации (справа) --- */
.chat-search-bar .search-nav-container {
    display: flex;
    align-items: center;
    gap: 8px; /* Увеличим отступ между кнопками */
    color: var(--text-secondary);
}

/* --- Счетчик результатов --- */
#chat-search-counter {
    font-size: 14px;
    min-width: 60px; /* Резервируем место, чтобы интерфейс не "прыгал" */
    text-align: center;
}

/* --- Кнопки навигации --- */
/* Делаем их более заметными и кликабельными */
.search-nav-container .icon-button {
    border-radius: 6px; /* Слегка скругляем углы */
}

.search-nav-container .icon-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background-color: transparent;
}
.search-nav-container .icon-button:not(:disabled):hover {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

/* --- Стили подсветки (остаются без изменений) --- */
.message-text .search-highlight,
.message-caption .search-highlight {
    background-color: #f9a825;
    color: #000;
    border-radius: 3px;
}
.message-text .search-highlight--current,
.message-caption .search-highlight--current {
    background-color: #ff6f00;
    color: #fff;
}
/* ======================================================= */
/* ====== ФИНАЛЬНЫЕ СТИЛИ ДЛЯ ЗАГОЛОВКА ЧАТА (v12) ====== */
/* ======================================================= */

/* --- 1. Главный контейнер заголовка --- */
.chat-view__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    height: 52px;
    flex-shrink: 0;
}

/* --- 2. Блок с именем и статусом (слева) --- */
/* Этот блок растягивается и является кликабельной зоной. */
.chat-header-info {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-grow: 1;
    min-width: 0;
    cursor: pointer;
}

/* ▼▼▼ КЛЮЧЕВОЕ ИСПРАВЛЕНИЕ ▼▼▼ */
/* --- 3. Заставляем дочерние элементы "пропускать" клики --- */
/* Это правило говорит аватару и блоку с текстом полностью игнорировать мышь.
   Клик будет проходить "сквозь" них на родительский блок .chat-header-info. */
.chat-header-info > * {
    pointer-events: none;
}

/* --- 4. Блок с кнопками (справа) --- */
.chat-header__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* --- Остальные стили для контента --- */
.chat-view__header .avatar {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
}

.chat-header__info-text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}


#chat-view:not(.select-mode-active) .select-mode-header {
    transform: translateY(100%);
}
#chat-view.select-mode-active .chat-view__header {
    transform: translateY(-100%);
}

.chat-header__info-text h3 { font-size: var(--font-size-md); font-weight: 500; }
.chat-header__info-text p { font-size: var(--font-size-sm); color: var(--text-accent); }
.chat-view__messages { flex-grow: 1; overflow-y: auto; padding: 16px; background-color: transparent; display: flex; flex-direction: column; }
.message-date-pill { align-self: center; background-color: var(--bg-tertiary); padding: 4px 10px; border-radius: 12px; font-size: 12px; margin: 12px 0; }


/* ======================================================= */
/* ====== НАЧАЛО: ФИНАЛЬНЫЕ СТИЛИ ДЛЯ СООБЩЕНИЙ ======== */
/* ======================================================= */

/* --- ОБЩИЕ СТИЛИ ОБЕРТКИ СООБЩЕНИЯ --- */
.message-wrapper {
    position: relative;
    display: flex;
    justify-content: flex-start; /* Входящие по умолчанию слева */
    width: 100%;
    margin-bottom: 4px;
    padding: 0 10px; /* Добавляем отступы по бокам */
    transition: background-color: 0.2s ease-in-out;
}
/* Выравнивание исходящих сообщений по правому краю */
.message-wrapper--out {
    justify-content: flex-end;
}
.message-wrapper.first-in-chain {
    margin-top: 12px;
}
.message-wrapper--context-menu-active {
    background-color: rgba(0, 136, 204, 0.3);
}

/* Контейнер с аватаром и пузырем */
.message-content-container {
    display: flex;
    align-items: flex-start; /* Возвращаем выравнивание по верху */
    gap: 14px;
    max-width: 75%; /* Ограничиваем ширину для компактности */
    max-width: 470px; /* <<< ДОБАВЛЕНО: Жесткий лимит ширины */
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
/* Для исходящих меняем порядок элементов */
.message-wrapper--out .message-content-container {
    flex-direction: row-reverse;
}

.message-avatar,
.message-avatar-placeholder {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
}
.message-avatar {
    border-radius: 50%;
    object-fit: cover;
    transform: translateY(-15px); /* Возвращаем смещение аватара вверх */
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 14px;
    color: var(--text-primary);
    background-color: var(--message-in-bg);
}

.message-avatar.avatar-out {
    background-color: var(--message-out-bg);
}


/* --- ПУЗЫРЬ СООБЩЕНИЯ --- */
.message {
    position: relative;
    z-index: 1;
    padding: 8px 15px; /* Уменьшаем вертикальный отступ */
    border-radius: 20px;
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: 6px;
}
.message.first-in-chain {
    margin-top: 6px;
}
.message-in {
    background-color: var(--message-in-bg);
}
.message-out {
    background-color: var(--message-out-bg);
}

/* --- ХВОСТИКИ ДЛЯ СООБЩЕНИЙ (ОРИГИНАЛЬНЫЙ СТИЛЬ) --- */
.message.first-in-chain {
    border-top-left-radius: 8px; /* Скругление по умолчанию для входящих */
}
/* Сбрасываем скругление для исходящих и применяем к правому углу */
.message-out.first-in-chain {
    border-top-left-radius: 20px;
    border-top-right-radius: 8px;
}
.message.first-in-chain::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: -1px; /* Возвращаем наверх */
    width: 12px;
    height: 17px;
    transform: rotate(332deg) scale(3);
    background-size: contain;
    background-repeat: no-repeat;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Хвостик для входящих (слева) */
.message-in.first-in-chain::before {
    left: -18px;
    transform-origin: top left;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='90 80 40 40'%3E%3Cpath fill='%23262d31' d='M96.97 93.95Q100.41 101.71 111.34 108.24Q119.41 106.55 119.74 98.31Q109.21 96.76 102.82 91.85Q98.57 88.91 95.55 84.03Q95.21 87.23 95.98 91.37Z'/%3E%3C/svg%3E");
}
/* исходящий (справа) — зеркалим и позиционируем корректно */
.message-out.first-in-chain::before {
    right: 13px; /* Уменьшаем отступ, чтобы прижать хвост к сообщению */
    top: -17px;       /* Корректируем вертикальное положение для идеального прилегания */
    transform-origin: top right;
    transform: scaleX(-1) rotate(332deg) scale(3);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='90 80 40 40'%3E%3Cpath fill='%233a76f0' d='M96.97 93.95Q100.41 101.71 111.34 108.24Q119.41 106.55 119.74 98.31Q109.21 96.76 102.82 91.85Q98.57 88.91 95.55 84.03Q95.21 87.23 95.98 91.37Z'/%3E%3C/svg%3E");
}
/* --- ПОДСВЕТКА (анимация) --- */
.message-wrapper.message--highlighted {
    animation: highlight-anim 1.5s ease-out;
}
@keyframes highlight-anim {
    0%, 50% { background-color: rgba(0, 136, 204, 0.4); }
    100% { background-color: transparent; }
}

.message-time { font-size: 11px; color: var(--text-secondary); font-weight: 400; }
.message-out .message-time { color: rgba(255, 255, 255, 0.75); }
.message-status i { width: 15px; height: 15px; }
.message-out .message-status i { color: #82e9de; }


/* ======================================================= */
/* ====== ФИНАЛЬНЫЕ СТИЛИ ДЛЯ "СКЛЕИВАНИЯ" v3 (ПРОСТЫЕ) ====== */
/* ======================================================= */

/* 1. Сбрасываем стили для всех "чанков" по умолчанию */
.message-chunk .message {
    /* Делаем все части прямоугольными */
    border-radius: 0;
}
.message-chunk {
    /* Убираем нижний отступ, чтобы они "слиплись" */
    margin-bottom: 1px;
}

/* 2. Скрываем ненужные элементы у всех частей, кроме первой */
.message-chunk:not(.is-first-chunk) .message-avatar,
.message-chunk:not(.is-first-chunk) .message::before {
    display: none;
}

/* 3. Применяем верхние скругления ТОЛЬКО к ПЕРВОЙ части */
.is-first-chunk .message {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}
/* Восстанавливаем "хвостик" для первой части */
.is-first-chunk.first-in-chain .message {
    border-top-left-radius: 8px;
}
.message-wrapper--out .is-first-chunk.first-in-chain .message {
    border-top-left-radius: 20px; /* Сброс для исходящих */
    border-top-right-radius: 8px;
}

/* 4. Применяем нижние скругления ТОЛЬКО к ПОСЛЕДНЕЙ части */
.is-last-chunk .message {
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

/* 5. Возвращаем стандартный отступ ПОСЛЕ ПОСЛЕДНЕЙ части */
.is-last-chunk {
    margin-bottom: 12px;
}


/* ====== СТИЛИ ДЛЯ ВРЕМЕНИ В СООБЩЕНИИ (ФИНАЛ v2) ====== */
.message-content-wrapper {
    display: flex;
    align-items: flex-end;
}
.message-main-content {
    flex-grow: 1;
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    text-wrap: pretty;
}
.message-meta {
    padding-left: 8px;
    padding-bottom: 2px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ======================================================= */
/* ====== ФИНАЛЬНЫЕ СТИЛИ ДЛЯ ВЕРСТКИ ВНУТРИ СООБЩЕНИЯ ===== */
/* ======================================================= */

.message .reply-in-message {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: hidden;
    align-self: flex-start;
}
.reply-in-message__text-content {
    flex-grow: 1;
    overflow: hidden;
}
.reply-in-message__thumbnail-wrapper {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    background-color: var(--bg-primary);
}
.reply-in-message__thumbnail-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* ======================================================= */
/* ======= КОНЕЦ: ФИНАЛЬНЫЕ СТИЛИ ДЛЯ СООБЩЕНИЙ ========= */
/* ======================================================= */

.chat-view__footer { padding: 8px 16px; background-color: var(--bg-secondary); border-top: 1px solid var(--border-primary); display: flex; flex-direction: column; position: relative; }
.footer-main-row { display: flex; width: 100%; align-items: flex-end; gap: 12px; }
.message-input-wrapper { flex-grow: 1; background-color: var(--bg-primary); border-radius: 8px; display: flex; align-items: center; padding: 0 8px; }
#message-input { flex-grow: 1; background: none; border: none; color: var(--text-primary); font-size: var(--font-size-md); padding: 10px; resize: none; max-height: 120px; scrollbar-width: none; -ms-overflow-style: none;}
#message-input::-webkit-scrollbar { display: none; }
#message-input:focus { outline: none; }
.send-button { background-color: var(--text-accent); color: white; width: 42px; height: 42px; }

/* ======================================================= */
/* ====== НАЧАЛО: СТИЛИ ДЛЯ НОВОЙ ПАНЕЛИ ЭМОДЗИ/GIF (FIXED) ====== */
/* ======================================================= */

/* --- 1. Основной контейнер (Стекло + Неон) --- */
.emoji-panel {
    height: 450px;
    width: 350px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: absolute;
    bottom: 85px; /* Чуть выше поля ввода */
    right: 20px;
    z-index: 1000;
    
    /* GLASSMORPHISM */
    background: rgba(18, 20, 28, 0.85) !important; /* Темная полупрозрачная база */
    backdrop-filter: blur(20px) saturate(180%); /* Размытие фона */
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
    border-radius: 16px;
    
    /* Анимация */
    transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.emoji-panel.hidden {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
    pointer-events: none;
}

/* --- 2. Шапка (Header) --- */
.emoji-panel-header {
    padding: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
    flex-shrink: 0;
}

.emoji-tabs {
    display: flex;
    background: rgba(0, 0, 0, 0.2);
    padding: 4px;
    border-radius: 10px;
    gap: 4px;
}

.emoji-tab {
    flex: 1;
    background: transparent;
    border: none;
    color: #8a8d9b;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-weight: 600;
    font-size: 13px;
    transition: all 0.2s;
}

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

.emoji-tab.active {
    color: #60a5fa; /* Акцент (Голубой) */
    background: rgba(96, 165, 250, 0.15);
    box-shadow: 0 0 15px rgba(96, 165, 250, 0.1);
    text-shadow: 0 0 8px rgba(96, 165, 250, 0.4);
}

.emoji-tab i { width: 16px; height: 16px; }

/* --- 3. Контент --- */
.emoji-panel-content {
    flex-grow: 1;
    position: relative;
    overflow: hidden;
}

.emoji-tab-content {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
    display: flex;
    flex-direction: column;
}

.emoji-tab-content.active {
    opacity: 1;
    visibility: visible;
}

/* --- 4. GIF Панель --- */
#gif-panel-content {
    padding: 12px;
    gap: 12px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.gif-panel-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Поиск */
.gif-panel-header .search-bar {
    flex: 1;
    position: relative;
}

.gif-panel-header .search-bar input {
    width: 100%;
    padding: 9px 12px 9px 34px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 14px;
    outline: none;
    transition: all 0.2s;
}

.gif-panel-header .search-bar input:focus {
    background: rgba(0, 0, 0, 0.5);
    border-color: #60a5fa;
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2);
}

/* Кнопки переключения GIF */
.gif-tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.gif-tab-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    color: #8a8d9b;
    cursor: pointer;
    transition: all 0.2s;
}

.gif-tab-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    transform: translateY(-1px);
}

.gif-tab-btn.active {
    color: #fff;
    background: #60a5fa;
    border-color: #60a5fa;
    box-shadow: 0 4px 12px rgba(96, 165, 250, 0.3);
}

.gif-tab-btn i { width: 18px; height: 18px; }

/* --- 5. СЕТКА GIF (ИСПРАВЛЕННАЯ) --- */
.gif-results-grid {
    flex-grow: 1;
    display: grid;
    /* Возвращаем 3 колонки для нормального вида */
    grid-template-columns: repeat(3, 1fr); 
    gap: 6px;
    overflow-y: auto;
    padding-right: 4px;
    align-content: start;
    
    /* Тонкий скроллбар для Firefox */
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}

/* Красивый скроллбар для Chrome/Webkit */
.gif-results-grid::-webkit-scrollbar {
    width: 4px;
    display: block; /* Включаем скроллбар, чтобы было удобно */
}
.gif-results-grid::-webkit-scrollbar-track { background: transparent; }
.gif-results-grid::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
}

/* Элемент сетки */
.gif-item {
    position: relative;
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.05);
    
    /* ФИКС: Вместо height:0 делаем фиксированную высоту */
    height: 100px;
    padding-bottom: 0; 
    
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform 0.2s;
}

.gif-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Картинка заполняет квадрат без искажений */
    display: block;
}

.gif-item:hover {
    transform: scale(1.05);
    border-color: rgba(255, 255, 255, 0.3);
    z-index: 5;
    box-shadow: 0 8px 16px rgba(0,0,0,0.6);
}

/* Кнопка удаления */
.gif-delete-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    background: rgba(0, 0, 0, 0.7);
    color: #ff5555;
    border-radius: 50%;
    opacity: 0;
    transition: all 0.2s;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.gif-item:hover .gif-delete-btn { opacity: 1; }
.gif-delete-btn:hover { background: #ff5555; color: #fff; transform: scale(1.1); }
.gif-delete-btn i { width: 12px; height: 12px; }

/* --- 6. Эмодзи --- */
#emoji-panel-content .emoji-tab-content {
    padding: 12px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
    gap: 4px;
    overflow-y: auto;
}

.emoji-item { 
    cursor: pointer; 
    font-size: 26px; 
    text-align: center; 
    padding: 4px;
    border-radius: 6px;
    transition: transform 0.1s;
}
.emoji-item:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.25);
}

/* Скроллбар для эмодзи */
#emoji-panel-content .emoji-tab-content::-webkit-scrollbar { width: 4px; }
#emoji-panel-content .emoji-tab-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
}

/* --- СТИЛИЗАЦИЯ ЗАГЛУШКИ (Именно для твоего текущего HTML) --- */
.placeholder-text {
    /* Центрируем блок в сетке */
    grid-column: 1 / -1 !important; 
    
    /* Центрируем текст внутри блока */
    display: flex !important;
    align-items: center;
    justify-content: center;
    
    /* Растягиваем высоту, чтобы было по центру панели */
    height: 100%;
    min-height: 180px; 
    
    /* Типографика */
    color: rgba(255, 255, 255, 0.4) !important; /* Мягкий серый */
    font-size: 15px !important;
    font-weight: 500;
    letter-spacing: 0.5px;
    
    /* Убираем стандартные отступы параграфа */
    margin: 0 !important;
    padding: 0 !important;
}

/* (Опционально) Добавляем иконку через CSS, раз её нет в HTML */
.placeholder-text::before {
    content: "📂";
    font-size: 24px;
    margin-right: 10px;
    opacity: 0.7;
    filter: grayscale(1); /* Делаем ч/б */
}

/* ======================================================= */
/* ======== КОНЕЦ: СТИЛИ ДЛЯ НОВОЙ ПАНЕЛИ ЭМОДЗИ/GIF ======= */
/* ======================================================= */

#user-info-panel { position: absolute; top: 0; right: 0; width: 350px; height: 100%; background-color: var(--bg-secondary); display: flex; flex-direction: column; z-index: 10; transform: translateX(100%); transition: transform 0.3s ease; border-left: 1px solid var(--border-primary); }
#right-view.info-panel-open #user-info-panel { transform: translateX(0); }
.user-info__header { height: 52px; display: flex; align-items: center; padding: 0 8px 0 16px; flex-shrink: 0; }
.user-info__header h3 { flex-grow: 1; font-weight: 500; }
.user-info__content { flex-grow: 1; overflow-y: auto; padding-bottom: 20px; }
.user-info__profile { display: flex; flex-direction: column; align-items: center; padding: 24px 16px; border-bottom: 8px solid var(--bg-primary); }
.user-info__avatar-wrapper { cursor: pointer; margin-bottom: 16px; }
.user-info__profile .avatar.large { width: 100px; height: 100px; font-size: 40px; border: 3px solid var(--bg-primary); box-shadow: 0 4px 15px rgba(0,0,0,0.2); }
.user-info__name { font-size: 20px; font-weight: 500; color: var(--text-primary); }
.user-info__status { font-size: var(--font-size-md); margin-top: 6px; }
.info-section { border-top: 8px solid var(--bg-primary); padding: 8px 0; border-bottom: 8px solid var(--bg-primary); }
.info-section:last-child { border-bottom: none; }
.info-item { display: flex; align-items: flex-start; gap: 20px; padding: 12px 20px; }
.info-item i { color: var(--text-secondary); margin-top: 2px; }
.info-item__text-content { display: flex; flex-direction: column; }
.info-item__text-content .info-item__value { font-size: var(--font-size-md); color: var(--text-primary); line-height: 1.4; }
.info-item__text-content .info-item__label { font-size: var(--font-size-sm); color: var(--text-secondary); margin-top: 3px; }
.info-item.button { color: var(--text-primary); cursor: pointer; width: 100%; align-items: center; gap: 24px; font-weight: 500; }
.actions-section .info-item.button:hover { background-color: var(--bg-hover); }
.actions-section .info-item.danger, .actions-section .info-item.danger i { color: var(--text-danger); }
.actions-section .info-item.danger:hover { background-color: rgba(229, 57, 53, 0.1); }
.actions-section .info-item.button span { display: flex; align-items: center; gap: 8px; }
.actions-section .info-item.button.unblock, .actions-section .info-item.button.unblock i { color: var(--text-accent); }
.actions-section .info-item.button.unblock:hover { background-color: rgba(0, 136, 204, 0.1); }
.actions-section .info-item.button.write-message, .actions-section .info-item.button.write-message i { color: var(--text-accent); }
.actions-section .info-item.button.write-message:hover { background-color: rgba(0, 136, 204, 0.1); }
.info-item--space-between { justify-content: space-between; align-items: center; width: 100%; }
.info-item__left { display: flex; align-items: center; gap: 24px; }
.info-item__arrow { margin-left: auto; color: var(--text-secondary); }
.toggle-switch { position: relative; display: inline-block; width: 38px; height: 22px; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--bg-tertiary); transition: .4s; border-radius: 22px; }
.slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: var(--text-accent); }
input:checked + .slider:before { transform: translateX(16px); }
.user-info__more-menu { position: absolute; top: 48px; right: 12px; width: 260px; background-color: var(--bg-tertiary); border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); z-index: 30; padding: 4px; display: flex; flex-direction: column; }
.more-menu-item { display: flex; align-items: center; gap: 16px; padding: 10px 12px; border-radius: 6px; cursor: pointer; font-size: var(--font-size-md); }
.more-menu-item:hover { background-color: var(--bg-hover); }
.more-menu-item.danger, .more-menu-item.danger i { color: var(--text-danger); }

/* ОБЩИЕ СТИЛИ ДЛЯ ОКОН НАСТРОЕК */
.settings-view { position: fixed; inset: 0; background-color: rgba(0,0,0,0.5); z-index: 100; display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s; }
.settings-view:not(.hidden) { opacity: 1; visibility: visible; }
.settings-content { width: 100%; max-width: 420px; background-color: var(--bg-secondary); border-radius: 8px; display: flex; flex-direction: column; max-height: 90vh; }
.settings-header { padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; }
.settings-header h2 { font-size: 18px; font-weight: 500; }
.settings-header__actions { display: flex; align-items: center; }
.settings-main { overflow-y: auto; }

/* СТИЛИ ДЛЯ ПРОСТОГО ОКНА "МОЙ ПРОФИЛЬ" */
.my-profile-view .my-profile__header { display: flex; align-items: center; gap: 16px; padding: 20px 16px; cursor: pointer; }
.my-profile-view .avatar.large { width: 80px; height: 80px; font-size: 32px; }
.my-profile-view .my-profile__name-line { display: flex; align-items: center; gap: 8px; }
.profile-badge { background-color: var(--text-accent); color: white; font-size: 11px; font-weight: 600; padding: 2px 6px; border-radius: 8px; }
.my-profile__info-body { padding: 16px; border-top: 8px solid var(--bg-primary); display: flex; flex-direction: column; gap: 24px; }
.my-profile__info-item { display: flex; align-items: center; gap: 24px; }
.my-profile__stories { padding: 16px; border-top: 8px solid var(--bg-primary); }
.stories-placeholder { background-color: var(--bg-tertiary); border-radius: 8px; padding: 24px; text-align: center; color: var(--text-secondary); font-size: var(--font-size-md); }

/* =========== СТИЛИ ДЛЯ ОКНА РЕДАКТИРОВАНИЯ ПРОФИЛЯ ======= */
.settings-content--full { max-width: 500px; height: 90vh; max-height: 700px; }
.edit-profile-header { display: flex; align-items: center; padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--border-primary); flex-shrink: 0; }
.edit-profile-header__title { flex-grow: 1; text-align: center; font-size: 18px; font-weight: 500; }
.edit-profile-header__actions { display: flex; align-items: center; }
.edit-profile-avatar-section { display: flex; flex-direction: column; align-items: center; padding: 24px 16px; }
.edit-profile-avatar { position: relative; width: 100px; height: 100px; margin-bottom: 16px; cursor: pointer; }
.edit-profile-avatar .avatar.large { width: 100px; height: 100px; font-size: 40px; }
.edit-profile-avatar__img { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; }
.avatar-edit-overlay { position: absolute; bottom: 0; right: 0; width: 32px; height: 32px; background-color: var(--text-accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 3px solid var(--bg-secondary); transition: background-color: 0.2s; }
.avatar-edit-overlay:hover { background-color: #0099e6; }
.avatar-edit-overlay i { color: white; width: 18px; height: 18px; }
.edit-profile-name { font-size: 22px; font-weight: 500; margin-bottom: 4px; }
.edit-profile-status { font-size: var(--font-size-md); color: var(--text-accent); }

/* --- ФИНАЛЬНЫЕ СТИЛИ ДЛЯ НАСТРОЕК (СТИЛЬ APPLE) --- */
.info-section {
    padding-bottom: 8px;
}
.info-input-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    padding: 0 16px;
    font-weight: 400;
}
.bio-input-group {
    position: relative;
    background-color: var(--bg-secondary);
    border-top: 1px solid var(--border-primary);
    border-bottom: 1px solid var(--border-primary);
    transition: border-color 0.2s;
}
.bio-input-group:focus-within {
    border-top-color: var(--text-accent);
    border-bottom-color: var(--text-accent);
}
.bio-textarea {
    width: 100%;
    background: none;
    border: none;
    resize: none;
    color: var(--text-primary);
    font-size: var(--font-size-md);
    font-family: var(--font-main);
    line-height: 1.6;
    padding: 12px 50px 12px 16px;
    box-sizing: border-box;
}
.bio-textarea::placeholder {
    color: var(--text-secondary);
}
.bio-textarea:focus {
    outline: none;
}
.char-counter {
    position: absolute;
    bottom: 10px;
    right: 16px;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    pointer-events: none;
}

.info-list-group {
    margin-top: 8px;
    border-top: 1px solid var(--border-primary);
    border-bottom: 1px solid var(--border-primary);
}
.info-list-item-grouped {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    font-size: var(--font-size-md);
    cursor: pointer;
    position: relative;
    background-color: var(--bg-secondary);
    justify-content: space-between;
}
.info-list-item-grouped:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 56px;
    right: 0;
    height: 1px;
    background-color: var(--border-primary);
}
.info-list-item-grouped i {
    color: var(--text-secondary);
    margin-right: 24px;
    flex-shrink: 0;
}
.info-list-item-grouped__label {
    flex-grow: 1;
    color: var(--text-primary);
}
.info-list-item-grouped__value,
.info-list-item-grouped__action {
    color: var(--text-secondary);
    flex-shrink: 0;
}
.info-list-item-grouped__value--accent {
    color: var(--text-accent);
}
.info-section-caption {
    margin-top: 8px;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.5;
    padding: 0 16px;
}
.info-section-caption a {
    color: var(--text-accent);
    text-decoration: none;
}

/* --- СТИЛИ ДЛЯ ИНФОРМАЦИОННОГО СПИСКА В МОДАЛКЕ --- */
.username-modal-info .info-list {
    list-style-type: '• ';
    text-align: left;
    padding-left: 20px;
    margin-top: 4px;
    margin-bottom: 8px;
    color: var(--text-secondary);
}
.username-modal-info .info-list li {
    padding-left: 8px;
}


/* --- СТИЛИ ДЛЯ МЕНЮ ВЛОЖЕНИЙ --- */
.attachment-menu { position: absolute; bottom: 100%; left: 8px; margin-bottom: 8px; width: 260px; background-color: var(--bg-tertiary); border-radius: 12px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); z-index: 20; padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.attachment-menu__item { display: flex; align-items: center; gap: 20px; padding: 10px 16px; border-radius: 8px; cursor: pointer; font-size: var(--font-size-md); font-weight: 500; transition: background-color: 0.2s; }
.attachment-menu__item:hover { background-color: var(--bg-hover); }
.attachment-menu__item i { color: var(--text-secondary); }

/* --- СТИЛИ ДЛЯ МОДАЛЬНОГО ОКНА USERNAME --- */
.username-modal-content { gap: 16px; padding: 24px; }
.username-modal-content h2 { text-align: center; font-size: 20px; font-weight: 500; margin: 0; }
.username-modal-content .username-input-group { display: flex; align-items: center; border-bottom: 2px solid var(--text-accent); padding: 8px 4px; transition: border-color: 0.3s; }
.username-modal-content .username-input-group span { font-size: 18px; color: var(--text-secondary); }
#username-input { flex-grow: 1; background: none; border: none; color: var(--text-primary); font-size: 18px; padding-left: 4px; }
#username-input:focus { outline: none; }
.username-modal-info p { font-size: var(--font-size-sm); color: var(--text-secondary); line-height: 1.5; text-align: left; }
.username-modal-info p:last-child { margin-top: 1em; }
.username-modal-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.modal-text-button { background: none; border: none; color: var(--text-accent); font-size: var(--font-size-md); font-weight: 500; padding: 8px 12px; cursor: pointer; border-radius: 6px; transition: background-color 0.2s; }
.modal-text-button:hover { background-color: var(--bg-hover); }
.username-modal-content .username-input-group.input-error {
    border-bottom-color: var(--text-danger);
    animation: shake 0.6s cubic-bezier(.36,.07,.19,.97) both;
}
.error-message {
    color: var(--text-danger);
    font-size: var(--font-size-sm);
    text-align: center;
    margin-top: -4px;
    margin-bottom: -4px;
    min-height: 18px;
}

/* =========== СТИЛИ ДЛЯ НОВЫХ ОКОН РЕДАКТИРОВАНИЯ ======= */
.edit-view-content { padding: 24px; display: flex; flex-direction: column; gap: 20px; }
.edit-view-content h2 { text-align: center; font-size: 20px; font-weight: 500; margin: 0; }
.edit-view-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.edit-name-group { display: flex; flex-direction: column; gap: 24px; width: 100%; }
.edit-name-group .input-wrapper { display: flex; flex-direction: column; gap: 4px; }
.edit-name-group label { font-size: var(--font-size-sm); color: var(--text-accent); padding-left: 8px; }
.edit-name-group input { width: 100%; background: none; border: none; border-bottom: 2px solid var(--text-secondary); color: var(--text-primary); font-size: 18px; padding: 8px; }
.edit-name-group input:focus { outline: none; border-bottom-color: var(--text-accent); }
.placeholder-content { flex-grow: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; color: var(--text-secondary); padding: 24px; }
.placeholder-content a { color: var(--text-accent); cursor: pointer; text-decoration: none; font-weight: 500; }
.date-picker-container { display: flex; flex-direction: column; gap: 12px; align-items: center; }
#birthdate-input { width: 100%; background-color: var(--bg-tertiary); border: 1px solid var(--border-primary); border-radius: 8px; padding: 12px; color: var(--text-primary); font-size: 16px; cursor: pointer; }


/* ======================================================= */
/* =============== СТИЛИ ПРОСМОТРА ФОТО ================== */
/* ======================================================= */

.photo-viewer-modal {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 300;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s 0.3s;
    will-change: opacity, transform;
}
.photo-viewer-modal:not(.hidden) {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0s;
}

.photo-viewer-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
#viewer-image {
    max-width: 100vw;
    max-height: 100vh;
    padding: 16px;
    box-sizing: border-box;
    object-fit: contain;
    border-radius: 12px;
    transition: filter 0.5s ease, border-radius: 0.3s ease, transform 0s, opacity 0.2s ease-out;
    will-change: filter, border-radius, transform, opacity;
    cursor: grab;
    user-select: none;
    -webkit-user-drag: none;
    text-indent: -10000px; 
    position: relative;
    z-index: 1;
}
#viewer-image:active {
    cursor: grabbing;
}
#viewer-image.snapping-back {
    transition-duration: 0.3s;
}

.photo-viewer-content .spinner-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0,0,0,0.2);
    z-index: 1;
    transition: opacity 0.3s;
}
.photo-viewer-content .spinner-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.photo-viewer-overlay {
    position: absolute;
    left: 0;
    width: 100%;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    z-index: 2;
    color: white;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}
.photo-viewer-overlay > * {
    pointer-events: all;
}

#photo-viewer:hover .photo-viewer-overlay {
    opacity: 1;
}

.photo-viewer-overlay--top {
    top: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.4), transparent);
    align-items: center;
}
.photo-viewer-overlay--top .header-actions {
    margin-left: auto;
}
.photo-viewer-overlay--bottom {
    bottom: 0;
    align-items: flex-end;
    justify-content: space-between;
    background: linear-gradient(to top, rgba(0,0,0,0.4), transparent);
    padding-bottom: 24px;
}
#photo-viewer:hover .photo-viewer-overlay--top,
#photo-viewer:hover .photo-viewer-overlay--bottom {
    transform: translateY(0);
}
.gallery-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    gap: 4px;
    align-items: center;
    height: 20px;
    transition: opacity 0.3s ease;
}
.indicator-bar {
    height: 3.5px;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 3px;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.indicator-bar.active {
    background-color: white;
}
.photo-viewer-overlay .icon-button {
    color: white;
}
.photo-user-info h3 {
    font-size: 15px; 
    font-weight: 500;
}
#photo-timestamp {
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.7);
    margin-top: 4px;
}
.footer-actions {
    position: relative;
}
.photo-viewer-menu {
    bottom: 50px;
    right: 0;
    position: absolute;
    width: 240px;
    background-color: var(--bg-tertiary);
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    z-index: 3;
    padding: 6px;
    display: flex;
    flex-direction: column;
    transform: scale(0.95);
    opacity: 0;
    transition: transform 0.15s ease, opacity 0.15s ease;
    transform-origin: bottom right;
    pointer-events: none;
}
.photo-viewer-menu:not(.hidden) {
    transform: scale(1);
    opacity: 1;
    pointer-events: all;
}
.photo-menu-item {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 12px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: var(--font-size-md);
    font-weight: 500;
    transition: background-color: 0.2s;
}
.photo-menu-item:hover {
    background-color: var(--bg-hover);
}
.photo-menu-item i {
    color: var(--text-secondary);
}
.photo-menu-item.danger,
.photo-menu-item.danger i {
    color: var(--text-danger);
}
.photo-menu-item.danger:hover {
    background-color: rgba(229, 57, 53, 0.15);
}

/* ======================================================= */
/* ============= СТИЛИ ДЛЯ ТОСТ-УВЕДОМЛЕНИЙ ============== */
/* ======================================================= */
.toast-container {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    pointer-events: none;
}
.toast {
    padding: 12px 20px;
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    font-size: var(--font-size-md);
    font-weight: 500;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    animation: toast-in 0.3s ease forwards;
}
.toast.error {
    background-color: var(--text-danger);
    color: white;
}
@keyframes toast-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.toast.fade-out {
    opacity: 0;
    transform: translateY(20px);
}

/* ======================================================= */
/* ============= СТИЛИ ДЛЯ МОДАЛЬНОГО ОКНА ПОДТВЕРЖДЕНИЯ = */
/* ======================================================= */
#confirmation-modal, #pin-confirmation-modal {
    z-index: 1100;
}
.confirmation-modal-content {
    max-width: 380px;
    padding: 24px;
    gap: 12px;
    text-align: center;
}
.confirmation-modal-content h3 {
    font-size: 20px;
    font-weight: 500;
}
.confirmation-modal-content p {
    font-size: var(--font-size-md);
    color: var(--text-secondary);
    line-height: 1.5;
}
.confirmation-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}
.confirmation-footer .modal-text-button.danger {
    color: var(--text-danger);
}
.confirmation-footer .modal-text-button.danger:hover {
    background-color: rgba(229, 57, 53, 0.1);
}

/* ======================================================= */
/* =========== СТИЛИ ДЛЯ ОКНА ПРЕДПРОСМОТРА ============== */
/* ======================================================= */
.image-preview-content {
    max-width: 480px;
    gap: 0;
}
.image-preview-container {
    padding: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--bg-primary);
    min-height: 200px;
}
#image-preview-element {
    max-width: 100%;
    max-height: 40vh;
    border-radius: 8px;
    object-fit: contain;
}
.image-preview-options, .image-preview-caption {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 24px;
}
.image-preview-caption {
    border-bottom: 1px solid var(--border-primary);
    padding-top: 0;
}
#image-caption-input {
    width: 100%;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: var(--font-size-md);
}
#image-caption-input:focus {
    outline: none;
}
.image-preview-footer {
    display: flex;
    justify-content: flex-end;
    padding: 8px;
    gap: 8px;
}
.image-preview-footer .modal-text-button.send {
    color: var(--text-accent);
    font-weight: 500;
}

/* Стили для кастомного чекбокса */
.custom-checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    font-size: var(--font-size-md);
}
.custom-checkbox input {
    display: none;
}
.custom-checkbox .checkmark {
    width: 20px;
    height: 20px;
    border: 2px solid var(--text-secondary);
    border-radius: 6px;
    margin-right: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s ease;
}
.custom-checkbox input:checked + .checkmark {
    background-color: var(--text-accent);
    border-color: var(--text-accent);
}
.custom-checkbox .checkmark::after {
    content: '';
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg) translateY(-1px);
    opacity: 0;
    transition: opacity 0.2s ease;
}
.custom-checkbox input:checked + .checkmark::after {
    opacity: 1;
}
.custom-checkbox.disabled {
    color: var(--text-secondary);
    cursor: not-allowed;
}
.custom-checkbox.disabled .checkmark {
    border-color: var(--bg-tertiary);
}

/* ======================================================= */
/* =================== СТИЛИ ДЛЯ ПОИСКА ================== */
/* ======================================================= */
#center-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.search-bar .clear-search-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
}
#center-panel-content {
    flex-grow: 1;
    overflow-y: auto;
}

#search-view {
    display: flex;
    flex-direction: column;
}
.search-tabs {
    display: flex;
    padding: 8px 16px;
    gap: 8px;
    border-bottom: 1px solid var(--border-primary);
    flex-shrink: 0;
}
.search-tab {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: var(--font-size-md);
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
}
.search-tab.active {
    color: var(--text-primary);
    background-color: var(--bg-active-glass-color); /* Применяем цвет стекла */
    backdrop-filter: blur(var(--bg-active-glass-blur)); /* Применяем размытие */
    -webkit-backdrop-filter: blur(var(--bg-active-glass-blur)); /* Для Safari */
}
#search-results-container {
    padding: 8px 0;
}
.search-section {
    padding-top: 8px;
}
.search-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding: 0 16px;
}
.search-section-header h4 {
    font-size: var(--font-size-md);
    color: var(--text-accent);
}
.search-section-header button {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    background: none;
    border: none;
    cursor: pointer;
}

.frequent-contacts-list {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding: 0 16px 12px 16px;
}
.frequent-contact-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    width: 60px;
    text-align: center;
}
.frequent-contact-item .avatar {
    width: 50px;
    height: 50px;
}
.frequent-contact-item span {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.search-result-list {
    list-style: none;
}
.search-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
}
.search-result-item:hover {
    background-color: var(--bg-hover);
}
.search-result-item .avatar {
    width: 40px;
    height: 40px;
}
.search-result-item__info {
    overflow: hidden;
}
.search-result-item__name {
    font-size: var(--font-size-md);
    font-weight: 500;
}
.search-result-item__detail {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ======================================================= */
/* ============= СТИЛИ ДЛЯ ОТВЕТОВ НА СООБЩЕНИЯ =========== */
/* ======================================================= */
.reply-preview {
    width: 100%;
    padding: 8px 0 12px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.reply-preview__content {
    display: flex;
    align-items: stretch;
    gap: 12px;
    overflow: hidden;
    border-left: 2px solid var(--text-accent);
    padding-left: 12px;
    flex-grow: 1;
}
.reply-icon {
    color: var(--text-accent);
    flex-shrink: 0;
    margin-top: 2px;
}
.reply-preview__thumbnail-wrapper {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
}
.reply-preview__thumbnail-wrapper.hidden {
    display: none;
}
#reply-preview-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.reply-preview__text {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    justify-content: center;
}
.reply-author {
    font-size: var(--font-size-md);
    font-weight: 500;
    color: var(--text-accent);
}
.reply-message {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#cancel-reply-btn {
    flex-shrink: 0;
}

.message .reply-in-message {
    padding: 6px 8px;
    margin: -2px -4px 8px -4px;
    background-color: rgba(0,0,0,0.15);
    border-left: 2px solid var(--text-accent);
    border-radius: 4px;
    display: block;
    text-decoration: none;
    cursor: pointer;
}
.message-in .reply-in-message {
    background-color: rgba(0,0,0,0.2);
}
.message .reply-in-message:hover {
    background-color: rgba(0,0,0,0.25);
}
.message-in .reply-in-message:hover {
    background-color: rgba(0,0,0,0.3);
}

.reply-in-message .reply-author {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-accent);
}
.reply-in-message .reply-message {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

/* ======================================================= */
/* ============= СТИЛИ ДЛЯ WATCH PARTY / ПЛЕЕРА ========== */
/* ======================================================= */
#player-modal {
    position: fixed;
    z-index: 500;
    background-color: var(--bg-secondary);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    transform: translate(-50%, -50%);
    transition: opacity 0.2s, visibility 0.2s, transform 0.3s ease;
    width: 90vw;
    height: 90vh;
    max-width: 1400px;
    max-height: 800px;
    min-width: 640px;
    min-height: 480px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    resize: both;
}
#player-modal.player-modal--dragging {
    transform: translate(-50%, -50%) scale(0.95);
    opacity: 0.9;
}
.player-modal__header {
    padding: 10px 8px 10px 16px;
    cursor: grab;
    border-bottom: 1px solid var(--border-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    color: var(--text-primary);
    font-weight: 500;
    gap: 16px;
}
.player-modal__header .icon-button {
    padding: 4px;
}
.player-modal__body {
    flex-grow: 1;
    display: flex;
    overflow: hidden;
    position: relative;
}

#watch-party-start-screen {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px;
    gap: 16px;
    background-color: var(--bg-secondary);
}
#watch-party-start-screen .placeholder-icon {
    width: 64px;
    height: 64px;
    color: var(--bg-tertiary);
}
#watch-party-start-screen h2 {
    color: var(--text-primary);
    font-size: 24px;
    font-weight: 500;
}
#watch-party-start-screen p {
    color: var(--text-secondary);
    max-width: 400px;
    line-height: 1.5;
}
#wp-create-session-btn {
    margin-top: 16px;
    min-width: 250px;
}

.watch-party-content-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
}
.watch-party-content-wrapper.hidden {
    display: none !important;
}

#watch-party-main {
    flex-grow: 1;
    background-color: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

#watch-party-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    color: var(--text-secondary);
}
#watch-party-placeholder .placeholder-icon {
    width: 64px;
    height: 64px;
    color: var(--bg-tertiary);
    margin-bottom: 16px;
}
#watch-party-placeholder h2 {
    color: var(--text-primary);
    font-size: 22px;
    margin-bottom: 8px;
}
.source-buttons {
    display: flex;
    gap: 16px;
    margin-top: 24px;
}
.source-button {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    padding: 16px 24px;
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-size: var(--font-size-md);
    font-weight: 500;
    transition: all 0.2s ease;
    width: 140px;
}
.source-button:not(:disabled):hover {
    background-color: var(--bg-hover);
    border-color: var(--text-accent);
    transform: translateY(-2px);
}
.source-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.source-button i {
    width: 32px;
    height: 32px;
}
.source-button.youtube i { color: #FF0000; }
.source-button.gdrive i { color: #FFD04B; }
.source-button.weblink i { color: #42A5F5; }

/* ====== СТИЛИ ДЛЯ ВСТРОЕННОГО YOUTUBE БРАУЗЕРА ======== */

#watch-party-youtube-browse {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-primary);
    overflow: hidden;
}

.wp-browse-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-bottom: 1px solid var(--border-primary);
    flex-shrink: 0;
}

#yt-auth-container {
    margin-left: auto;
    flex-shrink: 0;
}

.yt-auth-button {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color: 0.2s;
}
.yt-auth-button:hover {
    background-color: var(--bg-hover);
}
.yt-auth-button i {
    width: 18px;
    height: 18px;
}

#yt-user-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: var(--bg-tertiary);
    padding: 4px 10px 4px 4px;
    border-radius: 20px;
}
#yt-user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
}
#yt-user-name {
    font-size: var(--font-size-sm);
    font-weight: 500;
}
#yt-signout-btn {
    padding: 4px;
}
#yt-signout-btn i {
    width: 16px;
    height: 16px;
}

.wp-browse-tabs {
    display: flex;
    gap: 12px;
}
.wp-browse-tab {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: var(--font-size-md);
    font-weight: 500;
    padding-bottom: 8px;
    cursor: pointer;
    position: relative;
    border-bottom: 2px solid transparent;
}
.wp-browse-tab:not(:disabled):hover {
    color: var(--text-primary);
}
.wp-browse-tab.active {
    color: var(--text-accent);
    border-bottom-color: var(--text-accent);
}
.wp-browse-tab:disabled {
    color: var(--bg-tertiary);
    cursor: not-allowed;
}

#youtube-browse-list-view {
    flex-grow: 1;
    overflow-y: auto;
}

.yt-browse-item {
    cursor: pointer;
    transition: transform 0.2s ease, background-color: 0.2s;
    background-color: transparent;
    border-radius: 8px;
    padding: 6px;
}
.yt-browse-item:hover {
    transform: translateY(-4px);
    background-color: var(--bg-hover);
}

.yt-browse-item__thumbnail {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 10px;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
}

.yt-browse-item__title {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
    overflow: hidden;
    margin-bottom: 4px;
}

.yt-browse-item__channel {
    font-size: 12px;
    color: var(--text-secondary);
}


#youtube-player-container {
    width: 100%;
    height: 100%;
    position: relative;
}
#youtube-player-container iframe,
#youtube-player-container video {
    width: 100%;
    height: 100%;
    border: none;
}


#watch-party-sidebar {
    width: 300px;
    min-width: 300px;
    background-color: var(--bg-primary);
    border-left: 1px solid var(--border-primary);
    display: flex;
    flex-direction: column;
}

.sidebar-separator {
    height: 1px;
    background-color: var(--border-primary);
    margin: 0 12px;
    flex-shrink: 0;
}

.participants-list {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    flex-shrink: 0;
}
.participant-item {
    display: flex;
    align-items: center;
    gap: 10px;
}
.participant-item .avatar {
    width: 32px;
    height: 32px;
    font-size: 16px;
    border: 2px solid transparent;
}
.participant-item.host .avatar {
    border-color: var(--text-accent);
}
.participant-item span {
    font-size: var(--font-size-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.session-chat {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--border-primary);
    overflow: hidden;
}
.session-chat__messages {
    flex-grow: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ======================================================= */
/* ====== ИЗМЕНЕННЫЕ СТИЛИ ДЛЯ ЧАТА С АВАТАРАМИ ====== */
/* ======================================================= */
.session-chat-message {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    max-width: 90%;
    align-self: flex-start;
}

.session-chat-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 2px;
    object-fit: cover;
    background-color: var(--text-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 500;
    color: white;
}

.session-chat-message__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.session-chat-message.is-own {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.session-chat-message.is-own .session-chat-message__content {
    align-items: flex-end;
}

.session-chat-message.is-own .session-chat-message__sender {
    display: none;
}

.session-chat-message.is-own .session-chat-message__bubble {
    background-color: var(--message-out-bg);
}

.session-chat-message__sender {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-accent);
    margin-bottom: 2px;
    padding: 0 8px;
}
.session-chat-message__bubble {
    padding: 6px 10px;
    background-color: var(--bg-secondary);
    border-radius: 12px;
    font-size: var(--font-size-sm);
    line-height: 1.4;
    word-break: break-word;
}
/* ======================================================= */
/* ================= КОНЕЦ ИЗМЕНЕНИЙ ===================== */
/* ======================================================= */


.session-chat__footer {
    padding: 8px 12px;
    border-top: 1px solid var(--border-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}
#watch-party-chat-input {
    flex-grow: 1;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 18px;
    padding: 8px 12px;
    color: var(--text-primary);
    font-size: var(--font-size-sm);
}
#watch-party-chat-input:focus {
    outline: none;
    border-color: var(--text-accent);
}
.session-chat__footer .send-button {
    width: 36px;
    height: 36px;
}

.resize-handle {
    position: absolute;
    width: 16px;
    height: 16px;
    bottom: 0;
    right: 0;
    cursor: se-resize;
    z-index: 10;
}


body.dragging {
    user-select: none;
}
body.dragging .player-modal__header {
    cursor: grabbing;
}
.player-controls-container {
    position: relative;
}
#player-widget.active {
    background-color: var(--text-accent);
    color: white;
    animation: pulse 2s infinite;
}
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(0, 136, 204, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(0, 136, 204, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 136, 204, 0); }
}
.player-drop-zone {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 30px;
    background: radial-gradient(ellipse at bottom, rgba(0, 136, 204, 0.3), transparent 70%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--text-primary);
    z-index: 499;
    opacity: 0;
    transform: translateY(100%);
    transition: all 0.3s ease-out;
    pointer-events: none;
}
.player-drop-zone.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ======================================================= */
/* =========== СТИЛИ ДЛЯ ВЛОЖЕНИЙ В СООБЩЕНИЯХ =========== */
/* ======================================================= */
.message-in .message-image, 
.message-in .message-file-container, 
.message-in .message-location-container {
    border: 1px solid var(--border-primary);
}
.message-out .message-image, 
.message-out .message-file-container, 
.message-out .message-location-container {
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.message-image-container {
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    margin-bottom: 6px;
}
.message-image {
    display: block;
    max-width: 300px;
    max-height: 400px;
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: filter 0.3s;
}
.message-image.blur-load {
    filter: blur(5px);
}
.message-caption {
    font-size: var(--font-size-md);
    line-height: 1.4;
    padding-top: 2px;
    overflow-wrap: break-word;
}
.message-file-container {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    background-color: rgba(0,0,0,0.2);
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-primary);
    transition: background-color: 0.2s;
}
.message-file-container:hover {
    background-color: rgba(0,0,0,0.3);
}
.message-file-container .file-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    background-color: var(--text-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.message-file-container .file-icon i {
    color: white;
}
.message-file-container .file-info {
    overflow: hidden;
}
.message-file-container .file-name {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.message-file-container .file-size {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-top: 2px;
}
.message-location-container {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background-color: rgba(0,0,0,0.2);
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-accent);
    font-weight: 500;
    transition: background-color: 0.2s;
}
.message-location-container:hover {
    background-color: rgba(0,0,0,0.3);
}

/* ======================================================= */
/* ============= СТИЛИ ДЛЯ КОНТЕКСТНОГО МЕНЮ ============= */
/* ======================================================= */
.context-menu {
    position: fixed;
    z-index: 1000;
    width: 200px;
    background-color: var(--bg-tertiary);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    padding: 5px;
    display: flex;
    flex-direction: column;
    transform-origin: top left;
    animation: context-menu-appear 0.15s cubic-bezier(0.25, 0.8, 0.25, 1);
}
@keyframes context-menu-appear {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
.context-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-primary);
    transition: background-color: 0.2s;
}
.context-menu-item:hover {
    background-color: rgba(255, 255, 255, 0.08);
}
.context-menu-item i {
    width: 18px;
    height: 18px;
    stroke-width: 2.2px;
    color: var(--text-secondary);
    flex-shrink: 0;
}
.context-menu-item.danger,
.context-menu-item.danger i {
    color: var(--text-danger);
}
.context-menu-item.danger:hover {
    background-color: rgba(229, 57, 53, 0.15);
}
.context-menu-separator {
    height: 1px;
    background-color: rgba(255, 255, 255, 0.1);
    margin: 4px 8px;
}
.context-menu-item.info {
    cursor: default;
    color: var(--text-secondary);
    font-size: 12px;
}
.context-menu-item.info:hover {
    background-color: transparent;
}
.context-menu-item.info i {
    color: var(--text-secondary);
}

/* ======================================================= */
/* =============== СТИЛИ ДЛЯ ПЛЕЙСХОЛДЕРА ================ */
/* ======================================================= */
.chat-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--text-secondary);
    background-color: transparent;
    padding: 24px;
}
.chat-placeholder i {
    width: 64px;
    height: 64px;
    margin-bottom: 24px;
    color: var(--bg-tertiary);
}
.chat-placeholder h3 {
    font-size: 20px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 8px;
}
.chat-placeholder p {
    font-size: var(--font-size-md);
    line-height: 1.6;
    max-width: 300px;
}

/* --- СТИЛИ ДЛЯ ОКНА УДАЛЕНИЯ СООБЩЕНИЯ --- */
#delete-message-modal .confirmation-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
    width: 100%;
}
#delete-message-modal .modal-text-button.danger {
    color: var(--text-danger);
}
#delete-message-modal .modal-text-button.danger:hover {
    background-color: rgba(229, 57, 53, 0.1);
}

/* ======================================================= */
/* ============== СТИЛИ РЕЖИМА ВЫДЕЛЕНИЯ ================= */
/* ======================================================= */

.select-mode-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px 0 16px;
    background-color: var(--bg-secondary);
}
.select-mode-header .icon-button {
    color: var(--text-primary);
}
.select-mode-header .icon-button:disabled i {
    color: var(--bg-tertiary);
}
#selected-messages-info {
    text-align: center;
}
#selected-messages-counter {
    font-size: 18px;
    font-weight: 500;
}
#selected-messages-info p {
    font-size: 12px;
    color: var(--text-secondary);
}

.select-mode-header__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.select-mode-header__actions .icon-button:disabled {
    cursor: not-allowed;
}
.select-mode-header__actions .icon-button:disabled i {
    color: var(--bg-hover);
}

.message-select-checkbox {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%) scale(0);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--bg-primary);
    border: 2px solid var(--text-secondary);
    opacity: 0;
    transition: all 0.2s ease-out;
    display: flex;
    align-items: center;
    justify-content: center;
}
#chat-view.select-mode-active .message-select-checkbox {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

.message-wrapper--selected {
    background-color: var(--bg-active-glass-color); /* Применяем цвет стекла */
    backdrop-filter: blur(var(--bg-active-glass-blur)); /* Применяем размытие */
    -webkit-backdrop-filter: blur(var(--bg-active-glass-blur)); /* Для Safari */
}

.message-select-checkbox {
    transition: background-color: 0.2s ease, border-color: 0.2s ease, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#chat-view.select-mode-active .message-wrapper:hover .message-select-checkbox:not(.selected) {
    border-color: var(--text-secondary);
    transform: translateY(-50%) scale(1.1);
}

.message-select-checkbox.selected {
    background-color: var(--text-accent);
    border-color: var(--text-accent);
}

.message-select-checkbox.selected::after {
    content: '';
    box-sizing: border-box;
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 3px 3px 0;
    opacity: 0;
    transform: rotate(45deg) scale(0.5);
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.message-select-checkbox.selected::after {
    opacity: 1;
    transform: rotate(45deg) scale(1) translateY(-1px);
}
/* ======================================================= */
/* ====== УЛУЧШЕННЫЕ СТИЛИ ДЛЯ РЕЖИМА ВЫДЕЛЕНИЯ ========= */
/* ======================================================= */
#chat-view.select-mode-active .message-wrapper {
    padding-left: 50px;
    padding-right: 10px;
}
#chat-view.select-mode-active .message-wrapper:not(.message-wrapper--out) .message-content-container {
    transform: translateX(0);
}
#chat-view.select-mode-active .message-wrapper.message-wrapper--out .message-content-container {
    transform: translateX(-40px);
}
.message-select-checkbox {
    left: 16px;
}
/* ======================================================= */
/* ====== СТИЛИ ДЛЯ РЕСАЙЗА ПАНЕЛЕЙ                 ====== */
/* ======================================================= */
#panel-resizer {
    position: absolute;
    top: 0;
    bottom: 0;
    right: -2px;
    width: 5px;
    cursor: col-resize;
    background-color: transparent;
    z-index: 10;
    transition: background-color: 0.2s ease;
}
body.resizing #panel-resizer {
    background-color: var(--text-accent);
}
body.resizing {
    user-select: none;
}
/* ======================================================= */
/* ============== СТИЛИ ДЛЯ МУЗЫКИ В ПРОФИЛЕ ============= */
/* ======================================================= */

.my-profile__music-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px;
    background-color: var(--bg-tertiary);
    border-radius: 10px;
    cursor: pointer;
    transition: background-color: 0.2s;
    margin-top: 16px;
    position: relative;
    overflow: hidden;
}
.my-profile__music-card:hover {
    background-color: var(--bg-hover);
}
.music-card__thumbnail {
    width: 50px;
    height: 50px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}
.music-card__info {
    overflow: hidden;
}
.music-card__title {
    font-size: var(--font-size-md);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.music-card__artist {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-top: 4px;
}

.music-card__icon-container {
    margin-left: auto;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.music-card__play-icon {
    color: var(--text-primary);
}

.music-visualizer {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    width: 20px;
    height: 18px;
}
.music-visualizer__bar {
    width: 3px;
    background-color: var(--text-accent);
    animation: dance 1.5s infinite ease-in-out;
}
.music-visualizer__bar:nth-child(2) { animation-delay: -1.0s; }
.music-visualizer__bar:nth-child(3) { animation-delay: -0.5s; }
.music-visualizer__bar:nth-child(4) { animation-delay: -1.2s; }

@keyframes dance {
    0%, 100% { height: 2px; }
    25% { height: 100%; }
    50% { height: 40%; }
    75% { height: 75%; }
}

/* Стили для модального окна поиска музыки */
.music-search-results-list {
    list-style: none;
    max-height: 40vh;
    overflow-y: auto;
}
.music-search-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color: 0.2s;
}
.music-search-item:hover {
    background-color: var(--bg-hover);
}
.music-search-item img {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    object-fit: cover;
}
.music-search-item__title {
    font-size: var(--font-size-sm);
    font-weight: 500;
}
.music-search-item__artist {
    font-size: 12px;
    color: var(--text-secondary);
}

/* ======================================================= */
/* ============= СТИЛИ ДЛЯ ПЕРЕСЛАННЫХ СООБЩЕНИЙ ========= */
/* ======================================================= */
.message .forwarded-in-message {
    padding: 6px 8px;
    margin: -2px -4px 8px -4px;
    border-left: 2px solid var(--forwarded-text-color);
    border-radius: 4px;
    display: block;
    text-decoration: none;
}
.message .forwarded-in-message[data-action] {
    cursor: pointer;
}
.message-in .forwarded-in-message {
    background-color: rgba(0,0,0,0.1);
}
.message-out .forwarded-in-message {
     background-color: rgba(255,255,255,0.1);
}
.forwarded-in-message .forwarded-author {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--forwarded-text-color);
}
.forwarded-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover; 
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-primary);
}
.message-in .forwarded-avatar {
    background-color: var(--message-in-bg);
}
.message-out .forwarded-avatar {
    background-color: var(--message-out-bg);
}


/* ======================================================= */
/* ============ СТИЛИ ДЛЯ ЗАКРЕПЛЕННЫХ СООБЩЕНИЙ ========= */
/* ======================================================= */
.pinned-bar-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-primary);
    padding-right: 16px;
    flex-shrink: 0;
}
.pinned-bar-wrapper.hidden {
    display: none !important;
}

.pinned-bar {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px 8px 16px;
    cursor: pointer;
    transition: background-color: 0.2s;
    background-color: transparent;
    border-bottom: none;
}
.pinned-bar:hover {
    background-color: var(--bg-hover);
}
.pinned-bar__content {
    overflow: hidden;
    white-space: nowrap;
}
.pinned-bar__title {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-accent);
    display: block;
}
.pinned-bar__preview {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    text-overflow: ellipsis;
    overflow: hidden;
    display: block;
}
.pinned-bar__actions {
    display: flex;
    align-items: center;
}

.pinned-pills-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.pinned-pills-nav.hidden {
    display: none !important;
}

#pills-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: transform 0.2s ease-out, opacity 0.2s ease-out;
}

#pills-container.pills-navigate {
   animation: pills-scroll 0.3s ease-out forwards;
}

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

.pinned-pill {
    width: 4px;
    height: 12px;
    background-color: var(--bg-tertiary);
    border-radius: 2px;
    transition: background-color: 0.2s ease;
}

.pinned-pill.active {
    background-color: var(--text-accent);
}

.pinned-pills-nav:hover .pinned-pill {
    background-color: var(--bg-hover);
}

.pinned-pills-nav:hover .pinned-pill.active {
    background-color: var(--text-accent);
}


.pinned-list-view-container {
    align-items: flex-start;
    justify-content: flex-end;
}
.pinned-list-content {
    width: 100%;
    max-width: 450px;
    height: 100%;
    background-color: var(--bg-primary);
    border-radius: 0;
    display: flex;
    flex-direction: column;
}
.pinned-list-view-container .settings-main {
    padding: 16px;
    background-color: var(--bg-primary);
    flex-grow: 1;
}
.pinned-list-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 24px;
}
.pinned-list-item .avatar {
    width: 40px;
    height: 40px;
}
.pinned-list-item-main {
    flex-grow: 1;
    display: flex;
    align-items: center;
}
.pinned-list-item-content {
    background-color: var(--bg-secondary);
    padding: 10px 14px;
    border-radius: 12px;
    max-width: 100%;
}
.pinned-list-item-content p {
    line-height: 1.5;
}
.pinned-list-item-jump-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-left: 10px;
    color: var(--text-secondary);
}
.pinned-list-footer {
    padding: 8px;
    border-top: 1px solid var(--border-primary);
    display: flex;
    justify-content: center;
    flex-shrink: 0;
    background-color: var(--bg-primary);
}
.unpin-all-button {
    background: none;
    border: none;
    color: var(--text-danger);
    font-weight: 500;
    cursor: pointer;
    padding: 8px 12px;
}

/* Стили для превью в списке закрепленных */
.pinned-list-item-preview-card {
    margin-top: 8px;
    border-left: 3px solid var(--text-accent);
    padding-left: 10px;
    cursor: pointer;
}
.pinned-list-item-preview-card.youtube-preview .preview-image-container {
    position: relative;
}
.pinned-list-item-preview-card.youtube-preview .play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    background-color: rgba(0,0,0,0.6);
    border-radius: 50%;
    color: white;
}
.pinned-list-item-preview-card .preview-image {
    width: 100%;
    max-height: 200px;
    object-fit: cover;
    border-radius: 8px;
}
.pinned-list-item-preview-card .preview-title {
    font-weight: 500;
    margin-top: 6px;
    color: var(--text-accent);
}
.pinned-list-item-preview-card .preview-description {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-top: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}

/* ======================================================= */
/* ============= СТИЛИ ДЛЯ ОКНА ПЕРЕСЫЛКИ =============== */
/* ======================================================= */
.forward-step {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}
#forward-recipient-list .chat-item {
    border-left: none; /* Убираем синюю полоску */
}

#forward-preview-container {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
}
.forward-preview-item {
    max-width: 80%;
    align-self: flex-start;
}
.forward-preview-item .message {
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}
.forward-preview-sender {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-accent);
    margin-bottom: 4px;
    padding-left: 16px;
    transition: opacity 0.3s, transform 0.3s;
}
.forward-preview-sender.fade-out {
    opacity: 0;
    transform: translateY(-10px);
}
.forward-preview-item .message-caption {
     transition: opacity 0.3s, transform 0.3s;
}
.forward-preview-item .message-caption.fade-out {
    opacity: 0;
    transform: translateY(-10px);
}


.forward-preview-footer {
    border-top: 1px solid var(--border-primary);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}
.forward-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}
.forward-options button {
    background: none;
    border: 1px solid var(--border-primary);
    color: var(--text-secondary);
    padding: 6px 12px;
    border-radius: 16px;
    cursor: pointer;
    font-size: var(--font-size-sm);
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}
.forward-options button:hover {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}
.forward-options button.active {
    background-color: var(--bg-active);
    border-color: var(--bg-active);
    color: var(--text-primary);
}

.forward-options button i {
    width: 16px;
    height: 16px;
}
.forward-actions {
    display: flex;
    justify-content: flex-end;
}
.forward-actions .modal-text-button.send {
    color: var(--text-accent);
    font-weight: 500;
}
/* Отменяем растягивание для поисковой строки внутри модального окна */
#forward-modal .search-bar {
    flex-grow: 0;
}

/* Указываем, что список получателей должен занимать всё оставшееся место */
#forward-recipient-list {
    flex-grow: 1;
}

/* ======================================================= */
/* ====== СТИЛИ ДЛЯ РЕЗУЛЬТАТОВ ПОИСКА YOUTUBE =========== */
/* ======================================================= */

.yt-browse-item__info {
    display: flex;
    flex-direction: column;
}

.yt-browse-item__channel-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-secondary);
}

.yt-browse-item__date {
    flex-shrink: 0; /* Чтобы дата не переносилась */
    margin-left: 8px;
}

.yt-browse-item.is-channel {
    grid-column: 1 / -1; /* Занимает всю ширину */
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px;
}

.yt-browse-item.is-channel .yt-browse-item__thumbnail {
    border-radius: 50%; /* Делаем аватарку канала круглой */
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    margin-bottom: 0;
}

.yt-browse-item.is-channel .yt-browse-item__info {
    text-align: left;
}

.youtube-browse-results {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px 18px;
    padding: 20px;
}

#wp-yt-channel-videos-grid {
    padding-top: 0;
}

.yt-load-more-spinner {
    padding: 20px;
    display: flex;
    justify-content: center;
}
.yt-load-more-spinner .spinner {
    width: 30px;
    height: 30px;
    border-width: 3px;
}


/* ======================================================= */
/* =========== СТИЛИ ДЛЯ СТРАНИЦЫ КАНАЛА ================= */
/* ======================================================= */
#wp-yt-channel-view {
    position: absolute;
    inset: 0;
    background-color: var(--bg-primary);
    z-index: 10;
    display: flex;
    flex-direction: column;
}

.wp-yt-channel-view-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px;
    border-bottom: 1px solid var(--border-primary);
    flex-shrink: 0;
}

#wp-yt-channel-header {
    flex-shrink: 0;
}

#wp-yt-channel-banner {
    width: 100%;
    height: 150px;
    object-fit: cover;
    background-color: var(--bg-tertiary);
}

.wp-yt-channel-info {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px 24px;
}

#wp-yt-channel-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 4px solid var(--bg-primary);
    margin-top: -50px; /* Вытягиваем аватар наверх */
    flex-shrink: 0;
}

.wp-yt-channel-text h2 {
    font-size: 24px;
    font-weight: 500;
}

.wp-yt-channel-stats {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-top: 8px;
    flex-wrap: wrap;
}

.wp-yt-channel-stats span {
    white-space: nowrap;
}

#wp-yt-channel-videos-header {
    padding: 0 16px;
    border-bottom: 1px solid var(--border-primary);
    flex-shrink: 0;
}

#wp-yt-channel-tabs {
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: none;
}


/* ======================================================= */
/* ====== СТИЛИ ДЛЯ УЛУЧШЕНИЙ WATCH PARTY (UX) =========== */
/* ======================================================= */

.player-modal__header #watch-party-title {
    flex-grow: 1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.player-modal__header #wp-back-to-browse-btn {
    flex-shrink: 0;
}
.wp-browse-tabs-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border-primary);
}
#wp-refresh-popular-btn {
    display: none;
}
#wp-refresh-popular-btn.visible {
    display: flex;
}
.sidebar-header {
    padding: 12px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.invite-button {
    background-color: var(--text-accent);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color: 0.2s;
    flex-grow: 1; /* Занимает доступное место */
}
.invite-button:hover { 
    background-color: #0099e6; 
}
.session-menu-wrapper {
    position: relative;
    flex-shrink: 0;
}
#wp-session-menu {
    position: absolute;
    top: 100%; /* ИЗМЕНЕНИЕ: Открывается вниз */
    right: 0;
    margin-top: 8px; /* ИЗМЕНЕНИЕ: Отступ сверху */
    transform-origin: top right; /* ИЗМЕНЕНИЕ: Анимация из правильного угла */
    width: 220px;
}
#wp-session-menu .context-menu-item i {
    color: var(--text-danger);
}

/* ======================================================= */
/* =============== ИСПРАВЛЕННЫЕ СТИЛИ ==================== */
/* ======================================================= */

#watch-party-gdrive-browse,
#watch-party-weblink-input {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-primary);
}

.weblink-content-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    gap: 24px;
}
.weblink-content-wrapper h2 {
    font-size: 22px;
    margin-bottom: 0;
}
.weblink-content-wrapper p {
    color: var(--text-secondary);
    margin-bottom: 0;
}
.weblink-content-wrapper .search-bar {
    width: 100%;
    max-width: 500px;
}
.weblink-content-wrapper .auth-button {
    margin-top: 0;
    padding: 12px 24px;
    width: auto;
}

#gdrive-breadcrumbs {
    flex-grow: 1;
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--text-secondary);
    overflow: hidden;
    white-space: nowrap;
}

#gdrive-breadcrumbs .breadcrumb-item {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px;
}
#gdrive-breadcrumbs .breadcrumb-item:hover {
    color: var(--text-primary);
}
#gdrive-breadcrumbs .breadcrumb-item:last-child {
    color: var(--text-primary);
    font-weight: 500;
    pointer-events: none;
}
#gdrive-breadcrumbs .breadcrumb-separator {
    font-size: 16px;
}

#gdrive-browse-results {
    flex-grow: 1;
    overflow-y: auto;
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px;
}

.gdrive-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color: 0.2s;
}

.gdrive-item:hover {
    background-color: var(--bg-tertiary);
}

.gdrive-item__icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFD04B; /* Цвет для папок */
}
.gdrive-item__icon.video {
    color: #42A5F5; /* Цвет для видео */
}

.gdrive-item__icon i {
    width: 48px;
    height: 48px;
}

.gdrive-item__name {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
    overflow: hidden;
    word-break: break-all;
}
.weblink-action-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px; /* Небольшой отступ между полем ввода и кнопкой */
    width: 100%;
    max-width: 500px; /* Та же ширина, что и у поля ввода */
}

/* --- Стили для "Мастера совместного просмотра" --- */

/* Обновленные кнопки выбора источника */
.source-button.co-browsing {
    width: auto;
    padding: 20px 30px;
    font-size: 18px;
    flex-direction: row;
    border-width: 2px;
}
.source-button.co-browsing i {
    width: 28px;
    height: 28px;
    color: var(--text-accent);
}

.alternative-sources {
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--text-secondary);
}

.source-button-small {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    color: var(--text-primary);
    border-radius: 50%;
    width: 48px;
    height: 48px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
.source-button-small:hover {
    background-color: var(--bg-hover);
    border-color: var(--text-accent);
    transform: translateY(-2px);
}
.source-button-small i {
    width: 22px; height: 22px;
}

/* Стили для окна "Мастера" */
.wizard-content {
    max-width: 500px;
    padding: 32px;
    overflow: hidden; /* Чтобы шаги красиво сменяли друг друга */
}
.wizard-step {
    display: none;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    animation: fadeIn 0.5s ease;
}
.wizard-step.active {
    display: flex;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.wizard-icon {
    width: 48px;
    height: 48px;
    color: var(--bg-tertiary);
    margin-bottom: 8px;
}
.wizard-step h2 {
    font-size: 22px;
    font-weight: 500;
}
.wizard-step p {
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 380px;
}
.wizard-footer {
    margin-top: 24px;
    display: flex;
    justify-content: center;
    gap: 16px;
    width: 100%;
}

/* ======================================================= */
/* =========== СТИЛИ ДЛЯ РАСШИРЕННОГО ПЛЕЕРА ============= */
/* ======================================================= */

.player-controls-overlay {
    position: absolute;
    inset: 0;
    z-index: 21; /* Youtube IFrame API z-index is 20 */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 25%);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none; /* По умолчанию оверлей не перехватывает клики */
}

#youtube-player-container:hover .player-controls-overlay {
    opacity: 1;
    pointer-events: all; /* Включаем клики при наведении на контейнер плеера */
}

.player-controls-bottom {
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.player-controls-left, .player-controls-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.player-control-button {
    color: white;
    padding: 6px;
    background-color: rgba(20, 20, 20, 0.5);
    border-radius: 50%;
}
.player-control-button:hover {
    background-color: rgba(40, 40, 40, 0.7);
}
.player-control-button i {
    width: 22px;
    height: 22px;
}

/* Стили для меню настроек */
.player-controls-right {
    position: relative;
}

.player-settings-menu {
    position: absolute;
    bottom: 100%;
    right: 0;
    margin-bottom: 10px;
    background-color: rgba(28, 28, 28, 0.9);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 8px;
    width: 260px;
    padding: 8px;
    animation: fadeInSettings 0.15s ease-out;
    transform-origin: bottom right;
}

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

.settings-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
}
.settings-menu-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.settings-menu-item__label {
    display: flex;
    align-items: center;
    gap: 12px;
}
.settings-menu-item__label i {
    width: 18px;
    height: 18px;
    color: var(--text-secondary);
}

.settings-menu-item__value {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
}
.settings-menu-item__value .current-value {
    color: var(--text-primary);
}

/* Стили для подменю (второй уровень) */
.settings-submenu-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-primary);
    margin: -8px -8px 8px -8px;
}
.settings-submenu-item {
    padding-left: 30px; /* Отступ для элементов подменю */
}
.settings-submenu-item.selected {
    font-weight: 500;
    color: var(--text-accent);
}
.settings-submenu-item.selected .settings-menu-item__label i {
    opacity: 1;
    color: var(--text-accent);
}
.settings-submenu-item .settings-menu-item__label i {
    opacity: 0; /* Скрываем галочку у невыбранных */
}
.settings-submenu-item .auto-badge {
    font-size: 10px;
    background-color: var(--bg-hover);
    padding: 2px 5px;
    border-radius: 4px;
    margin-left: 6px;
    color: var(--text-secondary);
}

/* Стили для переключателя (toggle) */
.settings-menu-item .toggle-switch {
    width: 34px;
    height: 20px;
}
.settings-menu-item .slider {
    background-color: var(--bg-tertiary);
}
.settings-menu-item .slider:before {
    height: 14px;
    width: 14px;
    bottom: 3px;
}
.settings-menu-item input:checked + .slider:before {
    transform: translateX(14px);
}
/* 1. Основной оверлей: фон и центрирование */
#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Эффект матового стекла для профессионального вида */
    background-color: rgba(18, 18, 24, 0.6);
    backdrop-filter: blur(5px);
    /* Плавное появление и исчезновение */
    transition: opacity 0.3s ease-in-out;
}

/* 2. Виджет загрузки: контейнер для GIF и текста */
.loading-widget {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px; /* Расстояние между GIF и текстом */
    padding: 24px;
    /* Используем цвета из вашей основной палитры для консистентности */
    background-color: var(--bg-primary); 
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    border: 1px solid var(--border-color);
    width: 220px;
    /* Изначально виджет скрыт, JS его покажет */
    display: none; 
}

/* 3. Контейнер для GIF-анимации */
.loading-gif-container {
    width: 100%;
    /* Фиксируем пропорции, чтобы макет не "прыгал" во время загрузки гифки */
    aspect-ratio: 16 / 10; 
    border-radius: 8px;
    overflow: hidden; /* Обрезает все, что выходит за рамки */
    background-color: var(--bg-secondary); /* Цвет-заполнитель на время загрузки */
}

/* 4. Сама GIF-анимация */
.loading-gif-container img {
    width: 100%;
    height: 100%;
    /* Идеально вписывает гифку в контейнер, обрезая лишнее, но сохраняя пропорции */
    object-fit: cover; 
}

/* 5. Текст "Загрузка" */
.loading-text {
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    position: relative; /* Необходимо для анимации многоточия */
}

/* 6. Анимация многоточия с помощью псевдо-элемента */
.loading-text::after {
    content: '.';
    position: absolute;
    left: 100%;
    margin-left: 2px;
    animation: dots 1.5s infinite;
}

@keyframes dots {
  0%, 20% {
    color: transparent; /* Невидимый цвет */
    text-shadow:
      0.3em 0 0 transparent,
      0.6em 0 0 transparent;
  }
  40% {
    color: var(--text-secondary);
    text-shadow:
      0.3em 0 0 transparent,
      0.6em 0 0 transparent;
  }
  60% {
    text-shadow:
      0.3em 0 0 var(--text-secondary),
      0.6em 0 0 transparent;
  }
  80%, 100% {
    text-shadow:
      0.3em 0 0 var(--text-secondary),
      0.6em 0 0 var(--text-secondary);
  }
}

/* 7. Запасной спиннер (если GIF не загрузится) */
#loading-overlay .spinner {
    width: 48px;
    height: 48px;
}

/* ======================================================= */
/* ========= СТИЛИ ДЛЯ РЕЖИМА РЕДАКТИРОВАНИЯ МУЗЫКИ ======== */
/* ======================================================= */
.music-edit-item {
    cursor: default !important;
}
.music-edit-thumbnail {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    object-fit: cover;
    margin-right: 16px;
}
.music-edit-info {
    flex-grow: 1;
    overflow: hidden;
}
.music-edit-info__title {
    font-size: var(--font-size-md);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.music-edit-info__artist {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}
.music-edit-item .icon-button {
    margin-left: 12px;
}
.music-edit-item .icon-button i {
    color: var(--text-danger);
}

/* ======================================================= */
/* =========== СТИЛИ ДЛЯ КАСТОМНОГО КАЛЕНДАРЯ ============ */
/* ======================================================= */
.flatpickr-calendar {
    background: var(--bg-tertiary);
    border-radius: 8px;
    border: 1px solid var(--border-primary);
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    width: 320px;
}
.flatpickr-months .flatpickr-month {
    color: var(--text-primary);
    fill: var(--text-primary);
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    color: var(--text-secondary);
    fill: var(--text-secondary);
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
    fill: var(--text-accent);
}
span.flatpickr-weekday {
    color: var(--text-secondary);
}
.flatpickr-day {
    color: var(--text-primary);
    border: 1px solid transparent;
}
.flatpickr-day:hover {
    background: var(--bg-hover);
    border-color: var(--bg-hover);
}
.flatpickr-day.today {
    border-color: var(--text-accent);
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--text-accent);
    color: white;
    border-color: var(--text-accent);
}
.flatpickr-day.disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: rgba(255, 255, 255, 0.3);
}
.numInput, .numInputWrapper {
    color: inherit;
}
.numInput:hover {
    background: var(--bg-hover);
}
#birthdate-input {
    cursor: pointer;
    background-color: var(--bg-primary) !important;
}

/* ======================================================= */
/* ====== СТИЛИ ДЛЯ ПАНЕЛИ НАСТРОЕК (ФИНАЛЬНАЯ ВЕРСИЯ) ====== */
/* ======================================================= */

/* --- 1. Оверлей с эффектом размытия --- */
#settings-panel-view {
    position: fixed;
    inset: 0;
    z-index: 150;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

/* --- 2. Основной контейнер модального окна --- */
.settings-panel__content {
    width: 100%;
    max-width: 420px;
    height: auto;
    max-height: 90vh;
    background-color: var(--bg-secondary);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 5px 25px rgba(0,0,0,0.3);
    overflow: hidden;
}

/* --- 3. Внутренняя область с прокруткой --- */
.settings-panel__content .settings-main {
    overflow-y: auto;
}

/* --- 4. Блок с информацией о профиле --- */
.settings-panel__profile {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-primary);
    flex-shrink: 0;
}

.settings-panel__profile .avatar {
    width: 60px;
    height: 60px;
    font-size: 24px;
}

.settings-panel__profile-info h3 {
    font-size: 18px;
    font-weight: 500;
}

.settings-panel__profile-info p {
    font-size: 14px;
    color: var(--text-accent);
    margin-top: 5px;
}

/* --- 5. Группа пунктов меню --- */
.settings-group {
    background-color: var(--bg-secondary);
}

/* --- 6. Каждый отдельный пункт меню --- */
.settings-item {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    cursor: pointer;
    position: relative;
    transition: background-color: 0.2s;
    min-height: 60px;
}

.settings-item:hover {
    background-color: var(--bg-hover);
}

/* --- 7. Разделительная линия --- */
.settings-item:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: 0;
    height: 1px;
    background-color: var(--border-primary);
    left: 72px; /* Отступ слева */
    right: 20px; /* Отступ справа */
}

/* --- 8. Контейнер для иконки (для правильного отступа) --- */
.settings-item__icon-wrapper {
    width: 24px;
    margin-right: 28px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.settings-item__icon-wrapper i {
    color: var(--text-secondary);
    width: 24px;
    height: 24px;
}

/* --- 9. Контейнер для текста (заголовок + подпись) --- */
.settings-item__content {
    flex-grow: 1;
    overflow: hidden;
}

/* --- 10. Стили для текста по умолчанию (подпись снизу) --- */
.settings-item__label {
    font-size: 16px;
    color: var(--text-primary);
    display: block;
}

.settings-item__sublabel {
    font-size: 14px;
    color: var(--text-secondary);
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

/* --- 11. Особые стили для случая, когда подпись справа --- */
.settings-item__content--inline {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-grow: 1;
    justify-content: flex-start;
}
.settings-item__content--inline .settings-item__label {
    display: inline;
    flex-shrink: 0;
    flex-grow: 1;
}

.settings-item__content--inline .settings-item__sublabel {
    display: inline;
    margin-top: 0;
    color: var(--text-secondary);
    flex-shrink: 0;
}

/* --- 12. Стрелка "вправо" --- */
.settings-item__nav-icon {
    margin-left: auto;
    color: var(--text-secondary);
    flex-shrink: 0;
}

/* --- 13. Поясняющий текст под группой --- */
.settings-group-caption {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
    padding: 12px 20px 16px 20px;
}

/* ======================================================= */
/* ========= СТИЛИ ДЛЯ НАСТРОЕК УВЕДОМЛЕНИЙ ============== */
/* ======================================================= */
#notifications-settings-content .info-section-header {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-weight: 500;
    padding: 16px 20px 8px 20px;
    text-transform: uppercase;
}

#notifications-settings-content .info-list-item-grouped input[type="radio"] {
    margin-left: auto;
    accent-color: var(--text-accent);
    width: 18px;
    height: 18px;
}

/* ======================================================= */
/* ====== СТИЛИ ДЛЯ КНОПКИ РАЗБЛОКИРОВКИ               === */
/* ======================================================= */

.unblock-bar .auth-button {
    background: none;
    border: none;
    color: var(--text-danger);
    font-weight: 500;
    padding: 8px 12px;
    margin-top: 0;
    font-size: 14px;
    letter-spacing: 0.5px;
    transition: background-color: 0.2s, color 0.2s;
}

.unblock-bar .auth-button:hover {
    background-color: rgba(229, 57, 53, 0.1);
    color: var(--text-danger);
}
/* ======================================================= */
/* ====== СТИЛИ ДЛЯ НОВОГО РАЗДЕЛА "КОНФИДЕНЦИАЛЬНОСТЬ" ====== */
/* ======================================================= */
#privacy-settings-content .info-section-header,
#privacy-editor-content .info-section-header,
#deletion-editor-content .info-section-header,
#blocked-users-content .info-section-header {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-weight: 500;
    padding: 20px 20px 8px 20px;
    text-transform: uppercase;
    background-color: var(--bg-primary);
    border-top: 1px solid var(--border-primary);
    border-bottom: 1px solid var(--border-primary);
    margin-top: -1px;
}
#privacy-settings-content .info-section:first-child .info-section-header,
#privacy-editor-content .info-section:first-child .info-section-header,
#deletion-editor-content .info-section:first-child .info-section-header,
#blocked-users-content .info-section:first-child .info-section-header {
    border-top: none;
    margin-top: 0;
}
.info-list-item-grouped input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    margin-left: auto;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border: 2px solid var(--text-secondary);
    border-radius: 50%;
    transition: all 0.2s ease-in-out;
    display: grid;
    place-content: center;
    cursor: pointer;
}
.info-list-item-grouped input[type="radio"]::before {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 50%;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    background-color: var(--text-accent);
}
.info-list-item-grouped input[type="radio"]:checked {
    border-color: var(--text-accent);
}
.info-list-item-grouped input[type="radio"]:checked::before {
    transform: scale(1);
}
#privacy-editor-content .info-list-item-grouped,
#deletion-editor-content .info-list-item-grouped {
    cursor: pointer;
}
.blocked-user-item .avatar {
    width: 40px;
    height: 40px;
    font-size: 18px;
    margin-right: 16px;
}
.blocked-user-item > .settings-item__label {
    align-self: center;
}
.privacy-placeholder {
    text-align: center;
    color: var(--text-secondary);
    padding: 40px 20px;
    font-size: var(--font-size-md);
    line-height: 1.5;
}
#privacy-editor-content .info-list-item-grouped i,
#blocked-users-content .info-list-item-grouped i {
    color: var(--text-accent);
}
i[data-lucide="mic-off"] {
    color: var(--text-danger);
}

#app-container.blur-active > #left-panel:not(.blur-exempt),
#app-container.blur-active > #center-panel:not(.blur-exempt),
#app-container.blur-active > #right-view:not(.blur-exempt) {
  filter: blur(4px) brightness(0.7);
  pointer-events: none;
  transition: filter 0.3s ease-out;
}

/* --- Стили для списка контактов --- */
#contacts-list-container .chat-item {
    border-left: none; /* Убираем синюю полоску */
}

/* --- Стили для модального окна редактирования контакта (УЛУЧШЕНО) --- */
#contact-edit-modal .modal-content {
    max-width: 420px;
    padding: 0;
}
#contact-edit-modal .settings-main {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
#contact-edit-modal .edit-profile-header {
    border-bottom: 1px solid var(--border-primary);
    padding: 12px 16px;
}
#contact-edit-modal .edit-profile-header__title {
    text-align: center;
    padding-left: 0;
    flex-grow: 1;
}
#contact-edit-modal .edit-profile-avatar-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
}
#contact-edit-modal .edit-profile-avatar {
    width: 100px;
    height: 100px;
    margin-bottom: 12px;
    position: relative;
}
#contact-edit-avatar-placeholder {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: var(--bg-tertiary);
    border: 2px dashed var(--border-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    cursor: pointer;
}
#contact-edit-modal .edit-profile-avatar__img {
    border-radius: 50%;
}
#contact-edit-modal .avatar-edit-overlay {
    cursor: pointer;
}
#contact-edit-modal .edit-profile-status {
    font-size: 14px;
    color: var(--text-accent);
}
#contact-edit-modal .edit-name-group {
    gap: 24px;
}
#contact-edit-modal .input-wrapper {
     display: flex;
     flex-direction: column;
     gap: 8px;
}
#contact-edit-modal .input-wrapper label {
    font-size: 14px;
    color: var(--text-accent);
    padding-left: 4px;
}
#contact-edit-modal .input-wrapper input {
    width: 100%;
    background: none;
    border: none;
    border-bottom: 2px solid var(--border-primary);
    color: var(--text-primary);
    font-size: 16px;
    padding: 8px 4px;
    transition: border-color: 0.2s;
}
#contact-edit-modal .input-wrapper input:focus {
    outline: none;
    border-bottom-color: var(--text-accent);
}
.contact-phone-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
}
#contact-edit-modal .info-section-caption {
    text-align: center;
    padding: 0;
    width: 100%;
}
#contact-edit-modal .custom-checkbox {
    align-self: flex-start;
}
#contact-edit-modal .confirmation-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border-primary);
}

#user-info-menu {
    position: absolute;
    z-index: 10;
}
#add-contact-modal .input-wrapper {
     display: flex;
     flex-direction: column;
     gap: 8px;
}

#add-contact-modal .input-wrapper label {
    font-size: 14px;
    color: var(--text-accent);
    padding-left: 4px;
}
#add-contact-modal .input-wrapper input {
    width: 100%;
    background: none;
    border: none;
    border-bottom: 2px solid var(--border-primary);
    color: var(--text-primary);
    font-size: 16px;
    padding: 8px 4px;
    transition: border-color: 0.2s;
}
#add-contact-modal .input-wrapper input:focus {
    outline: none;
    border-bottom-color: var(--text-accent);
}

#add-contact-modal .info-section-caption {
    margin-top: 8px;
}

/* ======================================================= */
/* ====== СТИЛИ ДЛЯ ИНТЕРФЕЙСА АУДИОЗВОНКА =========== */
/* ======================================================= */

.caller-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.caller-info .avatar {
    width: 100px;
    height: 100px;
    font-size: 40px;
}
.caller-info h4 {
    font-size: 22px;
    font-weight: 500;
}

#call-modal.audio-call-active #remote-video,
#call-modal.audio-call-active #local-video {
    display: none;
}
#call-user-info {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    color: white;
    z-index: 2;
}
#call-modal.audio-call-active #call-user-info {
    display: flex;
}
#call-user-info .avatar {
    width: 120px;
    height: 120px;
    font-size: 48px;
    border: 4px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
}
#call-user-info h3 {
    font-size: 24px;
    font-weight: 500;
}
#call-modal.audio-call-active #toggle-camera-btn,
#call-modal.audio-call-active #share-screen-btn {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}
#toggle-mic-btn.muted i[data-lucide="mic-off"] {
    color: var(--text-danger);
}

/* =================================================================== */
/* ====== СТИЛИ ДЛЯ РЕДАКТОРА ОФОРМЛЕНИЯ (ФИНАЛЬНАЯ ВЕРСИЯ 4.0) ====== */
/* =================================================================== */

/* 1. Полноэкранный контейнер-оверлей */
#theme-editor-view {
    /* 1. Убираем flex-центрирование, которое ломает вёрстку */
    display: block;
    justify-content: unset;
    align-items: unset;
    
    /* 2. Убираем фон и размытие от оверлея, он должен быть невидимым */
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0;

    /* 3. Позволяем кликать "сквозь" пустую область оверлея на основной интерфейс */
    pointer-events: none;
}

/* 4. Возвращаем возможность кликать на саму панель редактора и её содержимое */
#theme-editor-view .theme-editor-container {
    pointer-events: all;
}

/* 3. Основной контейнер (сама видимая панель) */
.theme-editor-container {
    width: 320px;
    height: auto;
    max-height: calc(100vh - 40px);
    background-color: var(--bg-secondary);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.4);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease-in-out;
    position: absolute;
    top: 20px;
    right: 20px;
}

/* 4. Ручка для сворачивания/разворачивания */
#theme-editor-handle {
    width: 28px;
    height: 48px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-right: none;
    border-radius: 8px 0 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: -5px 5px 15px rgba(0,0,0,0.2);
    transition: right 0.3s ease-in-out, background-color 0.2s;
    z-index: 1;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    
    /* Начальная позиция: слева от видимой панели */
    right: 340px; /* 320px (ширина панели) + 20px (ее отступ справа) */
}

/* 5. Когда панель свернута, перемещаем и ее, и ручку */
.theme-editor-container.theme-editor-container--collapsed {
    transform: translateX(calc(100% + 20px)); /* Сдвигаем за экран */
}

/* КЛЮЧЕВОЕ ИСПРАВЛЕНИЕ: Используем соседний селектор (+) для перемещения ручки */
.theme-editor-container.theme-editor-container--collapsed + #theme-editor-handle {
    right: 0; /* Прижимаем ручку к правому краю экрана */
}

#theme-editor-handle:hover {
    background-color: var(--bg-hover);
}

#theme-editor-handle i {
    color: var(--text-primary);
    transition: transform 0.3s ease-in-out;
}

.theme-editor-container.theme-editor-container--collapsed + #theme-editor-handle i {
    transform: rotate(180deg);
}


/* 6. Остальные стили (без изменений) */
.theme-editor-container .settings-main { overflow-y: auto; }
.theme-editor-container .settings-header { flex-shrink: 0; }
.theme-control-group { padding: 12px 16px; border-bottom: 1px solid var(--border-primary); }
.theme-control-group:last-child { border-bottom: none; }
.theme-control-group h4 { margin-bottom: 16px; font-size: 13px; font-weight: 500; color: var(--text-accent); text-transform: uppercase; }
.theme-control { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.theme-control:last-child { margin-bottom: 4px; }
.theme-control label { font-size: 14px; color: var(--text-primary); }
.theme-control input[type="color"] { -webkit-appearance: none; appearance: none; border: none; width: 28px; height: 28px; background: none; cursor: pointer; border-radius: 50%; overflow: hidden; }
.theme-control input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.theme-control input[type="color"]::-webkit-color-swatch { border: 2px solid var(--border-primary); border-radius: 50%; }
.theme-control input[type="range"] { width: 120px; }
.theme-file-button { background-color: var(--bg-tertiary); color: var(--text-primary); padding: 6px 12px; border-radius: 6px; font-size: 13px; cursor: pointer; transition: background-color: 0.2s; }
.theme-file-button:hover { background-color: var(--bg-hover); }
.theme-control .control-buttons { display: flex; align-items: center; gap: 8px; }

:root {
    --bg-primary: #0f171e;
    --bg-secondary: #18222d;
    --bg-tertiary: #222e3a;
    --bg-hover: #2a3744;
    
    --bg-active: #0088cc;
    --text-primary: #ffffff;
    --text-secondary: #8e99a4;
    --text-accent: #0088cc;
    --text-danger: #e53935;
    --border-primary: #2a3744;
    
    --message-out-bg: #3a76f0;
    --message-in-bg: #262d31;
    
    --font-main: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-size-sm: 13px;
    --font-size-md: 14px;
    --font-size-lg: 16px;

    /* Переменные для фона */
    --main-bg-blur: 0px;
    --panel-opacity: 0.8;
    
    /* Переменные для каждой панели (для псевдо-элементов) */
    --left-panel-bg-image: none;
    --left-panel-bg-size: cover;
    --left-panel-bg-position: center;
    --center-panel-bg-image: none;
    --center-panel-bg-size: cover;
    --center-panel-bg-position: center;
    --right-view-bg-image: none;
    --right-view-bg-size: cover;
    --right-view-bg-position: center;

    /* Переменные для цвета фона панелей (для управления прозрачностью) */
    --left-panel-bg-color: var(--bg-secondary);
    --center-panel-bg-color: var(--bg-secondary);
    --right-view-bg-color: var(--bg-primary);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--font-main);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    overflow: hidden;
    height: 100vh;
    width: 100vw;
}

.hidden { display: none !important; }

/* ... (здесь идут все ваши стили для аутентификации, чатов, сообщений и т.д.) ... */

/* ======================================================= */
/* ====== СТИЛИ ПАНЕЛЕЙ С ФОНОМ ЧЕРЕЗ ПСЕВДО-ЭЛЕМЕНТ ===== */
/* ======================================================= */

#left-panel, #center-panel, #right-view {
    position: relative;
    overflow: hidden;
}

#left-panel::before, #center-panel::before, #right-view::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-repeat: no-repeat;
    filter: blur(var(--main-bg-blur));
    -webkit-filter: blur(var(--main-bg-blur));
    transition: opacity 0.3s ease-in-out;
}

#left-panel::before {
    background-image: var(--left-panel-bg-image);
    background-size: var(--left-panel-bg-size, cover);
    background-position: var(--left-panel-bg-position, center);
    background-repeat: no-repeat;
}
#center-panel::before {
    background-image: var(--center-panel-bg-image);
    background-size: var(--center-panel-bg-size, cover);
    background-position: var(--center-panel-bg-position, center);
    background-repeat: no-repeat;
}
#right-view::before {
    background-image: var(--right-view-bg-image);
    background-size: var(--right-view-bg-size, cover);
    background-position: var(--right-view-bg-position, center);
    background-repeat: no-repeat;
}

/* =================================================================== */
/* ====== СТИЛИ ДЛЯ ФОНОВ И РЕДАКТОРА (ФИНАЛЬНАЯ ВЕРСИЯ 5.0) ====== */
/* =================================================================== */

:root {
    /* ... (ваши другие переменные) ... */

    /* ▼▼▼ ПЕРЕМЕННЫЕ ДЛЯ УПРАВЛЕНИЯ ФОНОМ ▼▼▼ */
    --main-bg-blur: 0px;
    --panel-opacity: 0.8;
    
    /* Переменные для псевдо-элементов каждой панели */
    --left-panel-bg-image: none;
    --left-panel-bg-size: cover;
    --left-panel-bg-position: center;
    --center-panel-bg-image: none;
    --center-panel-bg-size: cover;
    --center-panel-bg-position: center;
    --right-view-bg-image: none;
    --right-view-bg-size: cover;
    --right-view-bg-position: center;

    /* Переменные для цвета-подложки панелей */
    --left-panel-bg-color: var(--bg-secondary);
    --center-panel-bg-color: var(--bg-secondary);
    --right-view-bg-color: var(--bg-primary);
}


/* --- 1. Сброс стилей фона для самих панелей --- */
#left-panel, #center-panel, #right-view {
    position: relative;
    overflow: hidden;
    background-image: none !important; /* Важно: убираем любые прямые фоновые изображения с панелей */
}

/* --- 2. Псевдо-элемент ::before (САМЫЙ ВАЖНЫЙ БЛОК) --- */
#left-panel::before,
#center-panel::before,
#right-view::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: -1; /* Помещает фон ПОД контент */

    /* ▼▼▼ ГАРАНТИРОВАННЫЕ ИСПРАВЛЕНИЯ ▼▼▼ */
    background-size: cover !important;        /* Растягивает фон на всю панель */
    background-repeat: no-repeat !important; /* Убирает "двойное изображение" */

    /* Эффекты и позиционирование */
    filter: blur(var(--main-bg-blur));
    -webkit-filter: blur(var(--main-bg-blur));
    transition: opacity 0.3s ease-in-out;
}

/* --- 3. Применение индивидуальных настроек (картинка и позиция) из JS --- */
#left-panel::before {
    background-image: var(--left-panel-bg-image);
    background-position: var(--left-panel-bg-position, center);
}
#center-panel::before {
    background-image: var(--center-panel-bg-image);
    background-position: var(--center-panel-bg-position, center);
}
#right-view::before {
    background-image: var(--right-view-bg-image);
    background-position: var(--right-view-bg-position, center);
}

/* --- 4. Применение цвета-подложки (для эффекта прозрачности) --- */
#left-panel { background-color: var(--left-panel-bg-color); }
#center-panel { background-color: var(--center-panel-bg-color); }
#right-view { background-color: var(--right-view-bg-color); }


/* =================================================================== */
/* ============= СТИЛИ ДЛЯ МОДАЛЬНОГО ОКНА РЕДАКТОРА ФОНА ============= */
/* =================================================================== */

.bg-editor__controls {
    width: 280px;
    padding: 24px;
    background-color: var(--bg-secondary);
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border-primary);
}
.bg-editor__controls h3 {
    font-size: 20px;
    margin-bottom: 12px;
}
.bg-editor__controls p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 24px;
}
.bg-editor__controls .control-group {
    margin-bottom: 20px;
}
.bg-editor__controls .control-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-accent);
    font-size: 13px;
    font-weight: 500;
}
.bg-editor__controls .control-group span {
    color: var(--text-secondary);
    font-size: 14px;
}
.bg-editor__footer {
    margin-top: auto;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.bg-editor__preview-area {
    flex-grow: 1;
    background-color: var(--bg-primary);
    position: relative;
    overflow: hidden;
    cursor: grab;
}
.bg-editor__preview-area:active {
    cursor: grabbing;
}
#bg-editor-image-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#bg-editor-image {
    position: absolute;
    transform-origin: top left;
    max-width: none;
}
.bg-editor__panel-overlay {
    position: absolute;
    top: 5%;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 12px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    transition: width 0.3s ease-in-out;
}
.bg-editor__view-toggle {
    display: flex;
    background-color: var(--bg-primary);
    border-radius: 8px;
    padding: 4px;
}
.bg-editor__view-toggle .toggle-button {
    flex: 1;
    padding: 8px;
    border: none;
    background-color: transparent;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}
.bg-editor__view-toggle .toggle-button.active {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}
#left-panel::before, 
#center-panel::before, 
#right-view::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: -1;

    /* Гарантированно правильное отображение */
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    
    filter: blur(var(--main-bg-blur));
}

#left-panel::before { background-image: var(--left-panel-bg-image); }
#center-panel::before { background-image: var(--center-panel-bg-image); }
#right-view::before { background-image: var(--right-view-bg-image); }

.panel-background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Аналог background-size: cover для видео */
    z-index: -1;      /* !!! САМОЕ ВАЖНОЕ: прячет видео за контент панели */
    pointer-events: none; /* Видео не будет реагировать на клики */
    
    /* Применяем тот же эффект размытия, что и для картинок */
    filter: blur(var(--main-bg-blur));
    -webkit-filter: blur(var(--main-bg-blur));
}
/* ======================================================= */
/* ====== ФИНАЛЬНЫЕ СТИЛИ ДЛЯ СПИСКА ЧАТОВ (v5) ========= */
/* ======================================================= */
/* Этот блок заменяет ВСЕ предыдущие стили для .chat-item, .chat-item:hover и .chat-item--active */

/* --- 1. Базовый стиль для всех чатов в списке --- */
.chat-item {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    cursor: pointer;
    gap: 12px;
    transition: background-color: 0.2s, border-left-color 0.2s; 
    border-left: 3px solid transparent; 
}

/* --- 2. Стиль для АКТИВНОГО (выбранного) чата --- */
/* Этот стиль применяется постоянно к выбранному чату и НЕ МЕНЯЕТСЯ при наведении */
.chat-item--active {
    background-color: var(--bg-active-glass-color); 
    backdrop-filter: blur(var(--bg-active-glass-blur));
    -webkit-backdrop-filter: blur(var(--bg-active-glass-blur));
    border-left-color: var(--bg-active);
}

/* --- 3. Стиль для НАВЕДЕНИЯ на любой НЕАКТИВНЫЙ чат --- */
/* :not() гарантирует, что этот стиль НИКОГДА не применится к уже активному чату */
.chat-item:not(.chat-item--active):hover {
    /* Легкая, нейтральная подсветка при наведении */
    background-color: rgba(255, 255, 255, 0.08); 
}

/* =================================================================== */
/* ====== УНИВЕРСАЛЬНЫЙ ЭФФЕКТ НАВЕДЕНИЯ ДЛЯ ВСЕГО ПРИЛОЖЕНИЯ ====== */
/* =================================================================== */

/* --- 1. Применяем настраиваемый "стеклянный" эффект ко всем интерактивным элементам при наведении --- */
.menu-item:hover,
.settings-item:hover,
.icon-button:hover,
.context-menu-item:hover,
.attachment-menu__item:hover,
.chat-item:not(.chat-item--active):hover {
    background-color: var(--bg-hover-glass-color); /* Используем новый настраиваемый цвет */
    backdrop-filter: blur(var(--bg-hover-glass-blur)); /* Используем новое настраиваемое размытие */
    -webkit-backdrop-filter: blur(var(--bg-hover-glass-blur));
}

/* --- 2. Делаем иконки внутри этих элементов ярче при наведении --- */
.menu-item:hover i,
.settings-item:hover i,
.context-menu-item:hover i,
.attachment-menu__item:hover i {
    color: var(--text-primary); /* Делает иконку белой */
}

/* --- 3. Отдельное правило для .icon-button, так как у него цвет иконки может быть другим --- */
.icon-button:hover i {
    color: var(--text-primary) !important; /* !important нужен, чтобы перебить другие стили, например, для красных иконок */
}

/* --- 4. Отдельные правила для элементов, которые НЕ должны менять фон при наведении --- */
/* Например, кнопка отправки сообщения */
.send-button:hover {
    background-color: #0099e6; /* Оставляем старый синий фон */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.icon-button.danger:hover {
    background-color: rgba(229, 57, 53, 0.1); /* Оставляем старый красный фон */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* ======================================================= */
/* ====== СТИЛИ ДЛЯ СТЕКЛЯННЫХ МОДАЛЬНЫХ ОКОН ======== */
/* ======================================================= */

.settings-panel__content,
.modal-content {
    /* Делаем фон полупрозрачным, используя цвет --bg-secondary */
    background-color: rgba(24, 34, 45, 0.75); 

    /* Добавляем эффект размытия фона ПОД панелью */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    /* Добавляем тонкую светлую рамку для лучшего визуального отделения */
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* =================================================================== */
/* ====== РЕДИЗАЙН СИСТЕМЫ ТЕМ (ГАЛЕРЕЯ, КАРТОЧКИ, ПРЕВЬЮ) v3 ========= */
/* =================================================================== */

/* --- 1. Общие стили для Хаба и Галереи (сохранены) --- */
#themes-hub-view .settings-main,
#theme-gallery-view .settings-main {
    padding: 16px;
    background-color: var(--bg-primary);
}

.themes-section {
    margin-bottom: 24px;
}

.themes-section__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding: 0 4px;
}

.themes-section__header h4 {
    font-size: 20px;
    font-weight: 500;
}

.themes-section__header .modal-text-button {
    font-size: 15px;
}

/* --- 2. Обновленная сетка для тем (изменено) --- */
.themes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px; /* Уменьшаем отступ */
}

/* --- 3. Новый дизайн карточки темы (полностью заменено) --- */
.theme-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background-color: var(--bg-tertiary);
    transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
    cursor: pointer;
    aspect-ratio: 2 / 3;
    border: none;
}

.theme-card:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 12px 28px rgba(0,0,0,0.5);
}

.theme-card__preview {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.theme-card:hover .theme-card__preview {
    transform: scale(1.05);
}

/* Градиент-оверлей для читаемости текста */
.theme-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70%;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 10%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}

.theme-card__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px;
    z-index: 2;
    color: white;
}

.theme-card__name {
    font-size: 16px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 6px;
}

.theme-card__description {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
    overflow: hidden;
    height: 34px; /* Фиксированная высота для двух строк */
}

.theme-card__stats {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: var(--text-secondary);
}

.theme-card__stats span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.theme-card__stats i {
    width: 16px;
    height: 16px;
}

.theme-card__badge {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: bold;
    color: white;
    z-index: 3;
}
.theme-card__badge.new {
    background-color: #FFC107;
    color: #111;
}
.theme-card__badge.nsfw {
    background-color: var(--text-danger);
}

/* --- 4. Оверлей с действиями для "Моих тем" (сохранен и адаптирован) --- */
.theme-card__overlay {
    position: absolute;
    inset: 0;
    /* Убираем градиент, так как он теперь на самой карточке */
    background-color: rgba(0,0,0,0.5); 
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    z-index: 3;
}
.theme-card:hover .theme-card__overlay {
    opacity: 1;
}
.theme-card__overlay .icon-button {
    background-color: rgba(30, 40, 50, 0.7);
    backdrop-filter: blur(4px);
    color: white;
}
.theme-card__overlay .icon-button.danger i {
    color: var(--text-danger);
}

/* --- 5. Полноэкранная галерея (сохранено) --- */
#theme-gallery-view .settings-content {
    max-width: 1200px;
    width: 95vw;
    height: 90vh;
}
#theme-gallery-view .settings-main {
    display: flex;
    flex-direction: column;
}
.theme-gallery__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-primary);
}
.theme-gallery__filters .search-bar {
    max-width: 300px;
}
.theme-gallery__grid-container {
    flex-grow: 1;
    overflow-y: auto;
    padding-top: 20px;
}

/* --- 6. Модальное окно предпросмотра темы (сохранено) --- */
#theme-preview-modal .modal-content {
    max-width: 800px;
    width: 90vw;
    padding: 0;
    flex-direction: row;
    max-height: 80vh;
}
.theme-preview__image-container {
    width: 300px;
    flex-shrink: 0;
}
.theme-preview__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.theme-preview__info {
    padding: 24px;
    display: flex;
    flex-direction: column;
}
.theme-preview__info h2 {
    font-size: 24px;
    font-weight: 500;
}
.theme-preview__author {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    color: var(--text-secondary);
}
.theme-preview__author img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
}
.theme-preview__description {
    margin-top: 16px;
    line-height: 1.6;
    color: var(--text-secondary);
    flex-grow: 1;
}
.theme-preview__tags {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.theme-preview__tags .tag {
    background-color: var(--bg-tertiary);
    padding: 4px 10px;
    border-radius: 16px;
    font-size: 13px;
}
.theme-preview__footer {
    margin-top: 24px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* =================================================================== */
/* ====== РЕДИЗАЙН ХАБА ТЕМ (v2.0) (сохранено) ======================= */
/* =================================================================== */
    #themes-hub-view .edit-profile-header {
        justify-content: space-between;
    }
    #themes-hub-view .edit-profile-header__title {
        /* Эти свойства правильно центрируют заголовок, не мешая кнопкам */
        margin: 0 auto;
        padding: 0 44px;
        text-align: center;

        /* Эти свойства предотвратят "наползание" длинного текста на кнопки */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
.themes-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 20px;
    margin: 16px;
    border: 2px dashed var(--border-primary);
    border-radius: 12px;
    color: var(--text-secondary);
}
.themes-placeholder i {
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
}
.themes-placeholder h5 {
    font-size: 18px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 8px;
}
.themes-placeholder p {
    max-width: 300px;
    line-height: 1.6;
}
#themes-hub-view .themes-section__header h4 {
    font-size: 20px;
    font-weight: 500;
}
#themes-hub-view .themes-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

/* =================================================================== */
/* ====== РЕДИЗАЙН РЕДАКТОРА ТЕГОВ (v1.0) (сохранено) ================ */
/* =================================================================== */
.theme-tags-pills-container {
    display: flex;       /* Включаем flex-раскладку */
    flex-wrap: wrap;     /* Разрешаем элементам переноситься на новую строку */
    gap: 8px;            /* Устанавливаем отступ между тегами */
    align-items: center; /* Выравниваем элементы по центру по вертикали */
}
.theme-tag-pill {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    color: var(--text-secondary);
    padding: 6px 14px;
    border-radius: 16px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.theme-tag-pill:hover {
    border-color: var(--text-secondary);
    background-color: var(--bg-hover);
}
.theme-tag-pill.active {
    background-color: var(--text-accent);
    border-color: var(--text-accent);
    color: white;
}
.theme-tag-input {
    background: none;
    border: none;
    color: var(--text-primary);
    font-family: var(--font-main);
    font-size: 14px;
    width: 120px;
    padding: 6px 0;
}
.theme-tag-input:focus {
    outline: none;
}
.theme-tag-pill.custom-tag .remove-tag-btn {
    width: 16px;
    height: 16px;
    background-color: rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: -6px;
    transition: background-color: 0.2s;
}
.theme-tag-pill.custom-tag .remove-tag-btn:hover {
    background-color: rgba(255,255,255,0.4);
}
.theme-tag-pill.custom-tag .remove-tag-btn i {
    width: 12px;
    height: 12px;
}
/* =================================================================== */
/* ======        РЕДИЗАЙН ГАЛЕРЕИ ТЕМ В СТИЛЕ        ================= */
/* =================================================================== */

/* --- 1. Основной контейнер галереи --- */
#theme-gallery-view .settings-content {
    max-width: 100%;
    width: 100vw;
    height: 100vh;
    padding: 0;
}

#theme-gallery-view .settings-main {
    padding: 0;
    background-color: #0a0e12;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* --- 2. Хедер галереи --- */
#theme-gallery-view .edit-profile-header {
    padding: 12px 20px;
    background-color: #0f1419;
    border-bottom: 1px solid #1a1f26;
}

#theme-gallery-view .edit-profile-header__title {
    font-size: 18px;
    font-weight: 600;
}

/* --- 3. Панель поиска и сортировки --- */
.theme-gallery__top-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background-color: #0f1419;
    border-bottom: 1px solid #1a1f26;
}

.theme-gallery__top-bar .search-bar {
    flex-grow: 1;
    max-width: 400px;
}

.theme-gallery__top-bar .search-bar input {
    background-color: #1a1f26;
    border: 1px solid #2a2f36;
    border-radius: 8px;
    padding: 10px 12px 10px 40px;
    color: #e1e3e6;
    font-size: 14px;
}

.theme-gallery__top-bar .search-bar input::placeholder {
    color: #6e7781;
}

/* Кнопка сортировки */
.theme-sort-dropdown {
    position: relative;
}

#sort-dropdown-btn {
    background-color: #1a1f26;
    border: 1px solid #2a2f36;
    color: #e1e3e6;
    padding: 10px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background-color: 0.2s ease;
}

#sort-dropdown-btn:hover {
    background-color: #252a31;
}

#sort-dropdown-btn i {
    width: 16px;
    height: 16px;
    color: #6e7781;
    transition: transform 0.2s ease;
}

#sort-dropdown-btn.open i {
    transform: rotate(180deg);
}

#sort-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 200px;
    background-color: #1a1f26;
    border: 1px solid #2a2f36;
    border-radius: 8px;
    overflow: hidden;
    z-index: 100;
}

#sort-dropdown-menu .context-menu-item {
    padding: 12px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #e1e3e6;
    transition: background-color: 0.2s ease;
}

#sort-dropdown-menu .context-menu-item:hover {
    background-color: #252a31;
}

#sort-dropdown-menu .context-menu-item i {
    width: 18px;
    height: 18px;
    color: #6e7781;
}

/* --- 4. Горизонтальная панель категорий --- */
.theme-categories-scroll {
    padding: 16px 20px;
    background-color: #0f1419;
    border-bottom: 1px solid #1a1f26;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: #2a2f36 transparent;
}

.theme-categories-scroll::-webkit-scrollbar {
    height: 6px;
}

.theme-categories-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.theme-categories-scroll::-webkit-scrollbar-thumb {
    background-color: #2a2f36;
    border-radius: 3px;
}

.theme-categories-list {
    display: flex;
    gap: 8px;
    min-width: min-content;
}

.theme-category-btn {
    background-color: #1a1f26;
    border: 1px solid #2a2f36;
    color: #6e7781;
    padding: 8px 20px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.2s ease;
    user-select: none;
}

.theme-category-btn:hover {
    background-color: #252a31;
    color: #e1e3e6;
}

.theme-category-btn.active {
    background-color: #e1e3e6;
    color: #0a0e12;
    border-color: #e1e3e6;
}

/* --- 5. Контейнер с темами --- */
.theme-gallery__content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

/* --- 6. Сетка карточек тем --- */
.themes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
    max-width: 1400px;
    margin: 0 auto;
}

/* --- 7. Карточка темы (новый дизайн) --- */
.theme-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background-color: #1a1f26;
    cursor: pointer;
    aspect-ratio: 2 / 3;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.theme-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* Превью изображения */
.theme-card__preview {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.theme-card:hover .theme-card__preview {
    transform: scale(1.05);
}

/* Градиент для читаемости текста */
.theme-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%;
    background: linear-gradient(to top, rgba(10, 14, 18, 0.95) 0%, rgba(10, 14, 18, 0.7) 50%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}

/* Контент карточки */
.theme-card__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px;
    z-index: 2;
    color: white;
}

/* Название темы */
.theme-card__name {
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Описание темы */
.theme-card__description {
    font-size: 12px;
    color: #a0a6ad;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
    height: 34px;
}

/* Статистика (просмотры, лайки) */
.theme-card__stats {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: #6e7781;
}

.theme-card__stats span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.theme-card__stats i {
    width: 14px;
    height: 14px;
    color: #6e7781;
}

/* Значки (NEW, 18+) */
.theme-card__badge {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    z-index: 3;
    backdrop-filter: blur(4px);
}

.theme-card__badge.new {
    background-color: rgba(255, 193, 7, 0.9);
    color: #000;
}

.theme-card__badge.nsfw {
    background-color: rgba(220, 38, 38, 0.9);
    color: #fff;
}

/* --- 8. Заглушка "Ничего не найдено" --- */
.gallery-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 20px;
    color: #6e7781;
}

.gallery-placeholder i {
    width: 64px;
    height: 64px;
    margin-bottom: 20px;
    color: #2a2f36;
}

.gallery-placeholder h5 {
    font-size: 20px;
    font-weight: 600;
    color: #e1e3e6;
    margin-bottom: 8px;
}

.gallery-placeholder p {
    max-width: 400px;
    line-height: 1.6;
    color: #6e7781;
}

/* --- 9. Адаптив для мобильных --- */
@media (max-width: 768px) {
    .themes-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 12px;
    }
    
    .theme-card__name {
        font-size: 14px;
    }
    
    .theme-card__description {
        font-size: 11px;
    }
    
    .theme-gallery__top-bar {
        flex-direction: column;
        align-items: stretch;
    }
    
    .theme-gallery__top-bar .search-bar {
        max-width: 100%;
    }
}
/* =================================================================== */
/* ====== ИСПРАВЛЕНИЕ: ЦЕНТРИРОВАННАЯ ГАЛЕРЕЯ ТЕМ      ========= */
/* =================================================================== */

#theme-gallery-view .settings-content {
    /* Возвращаем стандартную ширину для модальных окон */
    width: 95vw;
    max-width: 1200px; 
    
    /* Возвращаем стандартную высоту и скругление углов */
    height: 90vh;
    border-radius: 10px; 

    /* Убираем принудительное растягивание на весь экран */
    width: 95vw !important;
    height: 90vh !important;
    max-width: 1200px !important;
}
/* =================================================================== */
/* ======   УЛУЧШЕННЫЕ СТИЛИ ДЛЯ ЗАГРУЗЧИКА ОБЛОЖКИ ТЕМЫ (v2)   ====== */
/* =================================================================== */

/* 1. Основной контейнер-область для загрузки */
.theme-preview-uploader {
    position: relative;
    width: 120px;
    aspect-ratio: 2 / 3;
    background-color: var(--bg-tertiary);
    border-radius: 12px; /* Более скругленные углы */
    border: 2px dashed var(--border-primary);
    cursor: pointer;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Более плавная и конкретная анимация */
    transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

/* 2. Эффект при наведении */
.theme-preview-uploader:hover {
    border-color: var(--text-accent);
    background-color: var(--bg-hover);
}

/* 3. Загруженное изображение (без изменений) */
.theme-preview-uploader__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* 4. Контейнер-плейсхолдер, когда изображения нет */
.theme-preview-uploader__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px; /* Немного увеличим отступ */
    color: var(--text-secondary);
    text-align: center;
    z-index: 2;
    /* Делаем дочерние элементы некликабельными, чтобы не мешать label */
    pointer-events: none; 
}

/* 5. Иконка внутри плейсхолдера */
.theme-preview-uploader__placeholder i {
    width: 36px;
    height: 36px;
    stroke-width: 1.5px; /* Делаем иконку изящнее */
}

/* 6. СТИЛЬ ДЛЯ ОСНОВНОГО ТЕКСТА "Загрузить обложку" */
.theme-preview-uploader__placeholder span {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

/* 7. УЛУЧШЕННЫЙ СТИЛЬ ДЛЯ "ПИЛЮЛИ" с рекомендацией */
.theme-preview-uploader__placeholder small {
    font-size: 11px;
    font-weight: 600;
    background-color: rgba(0,0,0,0.3);
    border: 1px solid var(--border-primary);
    padding: 3px 8px;
    border-radius: 10px;
    color: var(--text-secondary);
}

/* 8. Оверлей, появляющийся при наведении на уже загруженное фото */
.theme-preview-uploader__overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0,0,0,0.6);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: white;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    pointer-events: none;
}

/* 9. Класс-модификатор, который добавляется через JS после загрузки фото */
.theme-preview-uploader.has-image {
    border-style: solid;
    border-color: var(--border-primary);
    background-color: var(--bg-primary); /* Делаем фон темнее для контраста */
}

/* 10. Прячем плейсхолдер, если есть изображение */
.theme-preview-uploader.has-image .theme-preview-uploader__placeholder {
    display: none;
}

/* 11. Показываем оверлей при наведении, если есть изображение */
.theme-preview-uploader.has-image:hover .theme-preview-uploader__overlay {
    opacity: 1;
}

/* =================================================================== */
/* ====== РЕДИЗАЙН РЕДАКТОРА ТЕГОВ (v1.0) (сохранено) ================ */
/* =================================================================== */

.theme-tags-pills-container {
    display: flex !important;       /* Включаем flex-раскладку с высшим приоритетом */
    flex-wrap: wrap !important;     /* Разрешаем перенос с высшим приоритетом */
    gap: 8px;            
    align-items: center; 
}
.theme-tag-pill {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    color: var(--text-secondary);
    padding: 6px 14px;
    border-radius: 16px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.theme-tag-pill:hover {
    border-color: var(--text-secondary);
    background-color: var(--bg-hover);
}
.theme-tag-pill.active {
    background-color: var(--text-accent);
    border-color: var(--text-accent);
    color: white;
}
.theme-tag-input {
    background: none;
    border: none;
    color: var(--text-primary);
    font-family: var(--font-main);
    font-size: 14px;
    width: 120px;
    padding: 6px 0;
}
.theme-tag-input:focus {
    outline: none;
}
.theme-tag-pill.custom-tag .remove-tag-btn {
    width: 16px;
    height: 16px;
    background-color: rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: -6px;
    transition: background-color: 0.2s;
}
.theme-tag-pill.custom-tag .remove-tag-btn:hover {
    background-color: rgba(255,255,255,0.4);
}
.theme-tag-pill.custom-tag .remove-tag-btn i {
    width: 12px;
    height: 12px;
}
/* ======================================================= */
/* ============= СТИЛИ ДЛЯ СОЗДАНИЯ КАНАЛА ============== */
/* ======================================================= */

#create-channel-modal .edit-view-content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

#create-channel-modal .edit-profile-avatar-section {
    padding: 0;
}

#create-channel-modal .edit-profile-avatar .avatar.large {
    width: 100px;
    height: 100px;
    font-size: 40px;
    display: flex; /* Для центрирования иконки камеры */
    align-items: center;
    justify-content: center;
    background-color: var(--bg-tertiary);
    border: 2px dashed var(--border-primary);
}

#create-channel-modal .edit-profile-avatar .avatar.large i {
    width: 40px;
    height: 40px;
    color: var(--text-secondary);
}

#create-channel-modal .edit-profile-avatar__img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
}

/* Стили для полей ввода, которые вы уже используете в других окнах */
#create-channel-modal .input-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#create-channel-modal .input-wrapper label {
    font-size: 14px;
    color: var(--text-accent);
    padding-left: 4px;
}

#create-channel-modal .input-wrapper input[type="text"] {
    width: 100%;
    background: none;
    border: none;
    border-bottom: 2px solid var(--border-primary);
    color: var(--text-primary);
    font-size: 16px;
    padding: 8px 4px;
    transition: border-color: 0.2s;
}

#create-channel-modal .input-wrapper input[type="text"]:focus {
    outline: none;
    border-bottom-color: var(--text-accent);
}

/* Стили для текстового поля (textarea) у вас уже есть, класс .bio-textarea подойдет */
#create-channel-modal .bio-textarea {
    border: 1px solid var(--border-primary);
    background-color: var(--bg-primary);
    border-radius: 8px;
}

#create-channel-modal .edit-view-footer .modal-text-button.send {
    color: var(--text-accent);
    font-weight: 500;
}
/* ======================================================= */
/* ====== СТИЛИ ДЛЯ ПАНЕЛИ ИНФОРМАЦИИ О КАНАЛЕ ========= */
/* ======================================================= */

/* 1. Делаем кликабельные ряды в секции "Общие медиа" более заметными */
.info-section .info-item.button:hover {
    background-color: var(--bg-hover);
}

/* 2. Стиль для счетчиков справа */
.info-item__value {
    color: var(--text-secondary);
}

/* 3. Отдельный стиль для кликабельной ссылки на канал */
.info-item__text-content .info-item__value.link {
    color: var(--text-accent);
    cursor: pointer;
}

/* 4. Более точное позиционирование иконки "Выйти" в красной кнопке */
.info-item.button.danger i {
    color: var(--text-danger);
}

/* 5. Добавляем отступ для описания, если оно есть, чтобы отделить его от ссылки */
.info-section .info-item:has(.info-item__label:contains("Описание")) {
    padding-top: 0;
}

/* ======================================================= */
/* ====== УЛУЧШЕНИЕ ССЫЛОК И УПОМИНАНИЙ (MENTIONS) ===== */
/* ======================================================= */

/* 1. Делает ссылку в панели информации похожей на настоящую */
.info-item .info-item__value.link {
    cursor: pointer;
    text-decoration: none; /* Убираем подчеркивание по умолчанию */
    transition: text-decoration 0.2s ease;
}

.info-item .info-item__value.link:hover {
    text-decoration: underline; /* Добавляем подчеркивание при наведении */
}

/* 2. Стиль для @упоминаний внутри сообщений в чате */
.message-text .mention {
    color: var(--text-accent);
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
}

.message-text .mention:hover {
    text-decoration: underline;
}
.message .message-author {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-accent);
    margin-bottom: 4px;
    padding: 0 4px;
}

/* =================================================================== */
/* ====== СТИЛИ ДЛЯ НОВОГО РЕДАКТОРА ТЕМ С РАЗДЕЛЬНЫМИ КНОПКАМИ ====== */
/* =================================================================== */

/* 1. Контейнер для группы кнопок ("Фон", "Редакт.", "Удалить") */
.control-buttons {
    display: flex;
    align-items: center;
    gap: 8px; /* Расстояние между кнопками */
}

/* 2. Стиль для всех кнопок в этой группе */
.theme-file-button {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid var(--border-primary);
    cursor: pointer;
    transition: background-color: 0.2s, border-color: 0.2s;
    white-space: nowrap; /* Предотвращает перенос текста на кнопке */
}

/* 3. Эффект при наведении на кнопки */
.theme-file-button:hover {
    background-color: var(--bg-hover);
    border-color: var(--text-secondary);
}

/* 4. Стили для кнопок "Редактировать" и "Удалить" */
#left-panel-edit-btn, #center-panel-edit-btn, #right-view-edit-btn {
    color: var(--text-accent);
}

#left-panel-remove-btn, #center-panel-remove-btn, #right-view-remove-btn {
    color: var(--text-danger);
    padding: 6px 8px; /* Делаем кнопку удаления чуть компактнее */
}

/* 5. Стили для контейнеров полей ввода (Название, Описание) */
.field-wrapper {
    display: flex;
    flex-direction: column;
    gap: 6px; /* Отступ между подписью и полем ввода */
}

.field-wrapper label {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
    padding-left: 4px;
/* ======================================================= */
/* ====== ФИНАЛЬНЫЕ СТИЛИ ДЛЯ ЗАГОЛОВКА ЧАТА (v14) ====== */
/* ======================================================= */

/* --- 1. Главный контейнер --- */
/* Он становится "сценой" для позиционирования дочерних элементов */
.chat-view__header {
    position: relative; /* Критически важно для работы z-index и absolute */
    display: flex;
    align-items: center;
    padding: 0 16px;
    height: 52px;
    flex-shrink: 0;
}

/* --- 2. Кликабельная область с именем (слева) --- */
/* Этот блок теперь растягивается на 100% фона, но лежит ПОД кнопками */
.chat-header-info {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Отправляем на задний план */
    
    /* Стили для его внутреннего содержимого (как и раньше) */
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 0 16px;
    cursor: pointer;
}

/* --- 3. Заставляем элементы внутри ссылки пропускать клики --- */
.chat-header-info > * {
    pointer-events: none;
}

/* --- 4. Блок с кнопками (справа) --- */
.chat-header__actions {
    /* ▼▼▼ КЛЮЧЕВОЕ ИСПРАВЛЕНИЕ ▼▼▼ */
    /* Поднимаем блок кнопок НАД фоновой ссылкой */
    position: relative;
    z-index: 2;
    /* margin-left: auto автоматически сдвигает блок вправо до упора */
    margin-left: auto; 
    
    /* Стили для его внутреннего содержимого */
    display: flex;
    align-items: center;
    gap: 8px;
}

/* --- Остальные стили для контента (без изменений) --- */
.chat-view__header .avatar {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
}
.chat-header__info-text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.chat-header__info-text h3 { font-size: var(--font-size-md); }
.chat-header__info-text p { font-size: var(--font-size-sm); color: var(--text-accent); }

#channel-username-helper.error {
    color: var(--text-danger);
    transition: color 0.2s ease-in-out;
}
/* ======================================================= */
/* ============= СТИЛИ ДЛЯ МЕДИА-БРАУЗЕРА =============== */
/* ======================================================= */

/* --- 1. Вкладки (табы) --- */
.media-viewer-tabs {
    display: flex;
    padding: 0 12px;
    border-bottom: 1px solid var(--border-primary);
    background-color: var(--bg-secondary);
    flex-shrink: 0;
}
.media-tab-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 15px;
    font-weight: 500;
    padding: 14px 16px;
    cursor: pointer;
    position: relative;
    border-bottom: 3px solid transparent;
    transition: color 0.2s, border-color 0.2s;
}
.media-tab-btn:hover {
    color: var(--text-primary);
}
.media-tab-btn.active {
    color: var(--text-accent);
    border-bottom-color: var(--text-accent);
}

/* --- 2. Основной контейнер и сетка --- */
#media-viewer-content {
    padding: 8px;
    overflow-y: auto;
    background-color: var(--bg-primary);
}
.media-grid-header {
    font-size: 16px;
    font-weight: 500;
    padding: 12px 8px;
    color: var(--text-primary);
}
.media-grid {
    display: grid;
    /* Адаптивная сетка: 4 колонки, если есть место, иначе меньше */
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 4px;
}

/* --- 3. Элементы сетки --- */
.media-grid-item {
    position: relative;
    cursor: pointer;
    border-radius: 4px;
    overflow: hidden;
    background-color: var(--bg-tertiary);
    aspect-ratio: 1 / 1; /* Делает все ячейки квадратными */
}
.media-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Изображение заполняет ячейку, обрезая лишнее */
    transition: transform 0.2s ease;
}
.media-grid-item:hover img {
    transform: scale(1.05);
}

/* Элемент для файлов */
.media-grid-item--file {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    padding: 8px;
    text-decoration: none;
    color: var(--text-primary);
}
.media-grid-item--file:hover {
    background-color: var(--bg-hover);
}
.file-item-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--text-accent);
    display: flex;
    align-items: center;
    justify-content: center;
}
.file-item-icon i {
    color: white;
}
.file-item-info {
    font-size: 13px;
    line-height: 1.3;
}
.file-item-name {
    font-weight: 500;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}
.file-item-size {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 4px;
}
/* ======================================================= */
/* ====== СТИЛИ ДЛЯ ЗАПИСИ И ОТОБРАЖЕНИЯ ГС (v1) ====== */
/* ======================================================= */

/* --- 1. Панель, которая появляется во время записи --- */
.voice-recorder-bar {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-secondary);
    align-items: center;
    padding: 8px 16px;
    gap: 16px;
    z-index: 5;
    
    /* Начальное состояние (скрыто) */
    opacity: 0;
    transform: translateY(100%);
    pointer-events: none;
    transition: transform 0.25s ease-out, opacity 0.25s ease-out;
}

/* --- 2. Стиль для активной панели записи --- */
.voice-recorder-bar.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}

/* --- 3. Индикатор записи (красная точка и таймер) --- */
.recorder-indicator {
    display: flex;
    align-items: center;
    gap: 10px;
}

.recording-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--text-danger);
    animation: pulse-red 1.5s infinite;
}

@keyframes pulse-red {
    0% { box-shadow: 0 0 0 0 rgba(229, 57, 53, 0.7); }
    70% { box-shadow: 0 0 0 8px rgba(229, 57, 53, 0); }
    100% { box-shadow: 0 0 0 0 rgba(229, 57, 53, 0); }
}

#recorder-timer {
    font-size: 16px;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums; /* Предотвращает "прыжки" цифр */
}

/* --- 4. Визуализатор (холст для рисования) --- */
.recorder-visualizer {
    flex-grow: 1;
    height: 100%;
}
#recorder-canvas {
    width: 100%;
    height: 100%;
}

/* --- 5. Кнопка "Отмена" --- */
#cancel-recording-btn {
    color: var(--text-danger);
    font-weight: 500;
}

/* --- 6. Стили для уже отправленного голосового сообщения в чате --- */
.voice-message-container {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 200px; /* Минимальная ширина, чтобы не было слишком узко */
}

.voice-play-btn {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    background-color: var(--text-accent);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.voice-play-btn i {
    color: white;
}

.voice-waveform-container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.voice-waveform-canvas {
    width: 100%;
    height: 30px; /* Высота волны */
}

.voice-meta-info {
    font-size: 12px;
    color: var(--text-secondary);
}
/* ======================================================= */
/* ============= СТИЛИ ДЛЯ ПРОСМОТРА МЕДИА В ЧАТЕ ======== */
/* ======================================================= */

/* Делаем изображения и GIF в сообщениях кликабельными на вид */
.message-image-container {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Небольшой эффект при наведении для обратной связи */
.message-image-container:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Эффект при нажатии */
.message-image-container:active {
    transform: scale(0.98);
    transition-duration: 0.1s;
}
/* ======================================================= */
/* ============= СТИЛИ ДЛЯ БАННЕРА СТАТУСА =============== */
/* ======================================================= */
.system-status-banner {
  padding: 12px 20px;
  color: white;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  transform: translateY(-100%);
  transition: transform 0.3s ease-in-out;
}
.system-status-banner.visible {
    transform: translateY(0);
}
.system-status-banner-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.system-status-banner-icon {
  font-size: 18px;
}
.system-status-banner.warning {
  background-color: #f39c12;
}
.system-status-banner.critical {
  background-color: #e67e22;
}
.system-status-banner.emergency {
  background-color: #e74c3c;
  animation: pulse-bg 2s infinite;
}
@keyframes pulse-bg {
  0%, 100% { background-color: #e74c3
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(42, 157, 143, 0.7);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(42, 157, 143, 0);
    }
}
.edit-profile-avatar .avatar.large {
    width: 100px;
    height: 100px;
    font-size: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--text-accent); /* Синий фон */
    color: white;
    border-radius: 50%;
}

/* Исправление позиции иконки камеры */
.avatar-edit-overlay {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 32px;
    height: 32px;
    background-color: var(--text-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--bg-secondary);
    cursor: pointer;
    z-index: 10; /* Чтобы была поверх */
}
/* ======================================================= */
/* =============== СТИЛИ ПРОСМОТРА ФОТО ================== */
/* ======================================================= */

.photo-viewer-modal {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.95); /* Чуть темнее для фокуса */
    z-index: 2000; /* Подняли выше всех модальных окон */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s 0.3s;
    will-change: opacity, transform;
}
.photo-viewer-modal:not(.hidden) {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0s;
}

.photo-viewer-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    z-index: 1; /* Контент ниже кнопок */
}

#viewer-image {
    max-width: 100vw;
    max-height: 100vh;
    padding: 0; /* Убрали паддинг, чтобы фото было крупнее */
    box-sizing: border-box;
    object-fit: contain;
    border-radius: 0;
    transition: transform 0.2s ease-out; /* Плавность для свайпов */
    will-change: transform;
    cursor: grab;
    user-select: none;
    -webkit-user-drag: none;
    position: relative;
    z-index: 1;
}
#viewer-image:active {
    cursor: grabbing;
}

/* ОВЕРЛЕИ (Верхняя и нижняя панели) */
.photo-viewer-overlay {
    position: absolute;
    left: 0;
    width: 100%;
    padding: 20px;
    display: flex;
    align-items: center;
    z-index: 10; /* Выше картинки */
    color: white;
    opacity: 0;
    transition: opacity 0.3s ease;
    
    /* ВАЖНО: Пропускаем клики сквозь пустые места */
    pointer-events: none; 
}

/* Показываем интерфейс при наведении */
#photo-viewer:hover .photo-viewer-overlay,
#photo-viewer.touch-active .photo-viewer-overlay { 
    opacity: 1; 
}

/* ВАЖНО: Делаем кнопки внутри оверлея КЛИКАБЕЛЬНЫМИ */
.photo-viewer-overlay button,
.photo-viewer-overlay .icon-button,
.photo-viewer-overlay .header-actions,
.photo-viewer-overlay .footer-actions,
.photo-user-info {
    pointer-events: auto !important; 
    cursor: pointer;
}

.photo-viewer-overlay--top {
    top: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.6), transparent);
    align-items: flex-start;
    padding-top: 20px;
}
.photo-viewer-overlay--top .header-actions {
    margin-left: auto;
    display: flex;
    gap: 16px;
}

.photo-viewer-overlay--bottom {
    bottom: 0;
    align-items: flex-end;
    justify-content: space-between;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    padding-bottom: 30px;
}

/* Индикатор фото (полоски сверху) */
.gallery-indicator {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    align-items: center;
    height: 4px;
    z-index: 15;
    pointer-events: none;
}
.indicator-bar {
    height: 4px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.indicator-bar.active {
    background-color: white;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
}

/* Меню "Три точки" */
.photo-viewer-menu {
    bottom: 70px; /* Чуть выше */
    right: 20px;
    position: absolute;
    width: 220px;
    background-color: rgba(30, 30, 30, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.1);
    z-index: 100; /* Самый высокий приоритет */
    padding: 8px;
    display: flex;
    flex-direction: column;
    
    opacity: 0;
    transform: scale(0.95) translateY(10px);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none; /* Скрыто - не кликабельно */
}

.photo-viewer-menu:not(.hidden) {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto !important; /* Открыто - кликабельно */
}

.photo-menu-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    color: white;
    font-size: 14px;
    transition: background-color 0.2s;
}
.photo-menu-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
}
.photo-menu-item i {
    width: 18px;
    height: 18px;
}
.photo-menu-item.danger {
    color: #ff4d4d;
}
.photo-menu-item.danger:hover {
    background-color: rgba(255, 77, 77, 0.15);
}

/* Блюр загрузки */
.blur-load {
    filter: blur(15px);
    transform: scale(1.02);
}
/* ======================================================= */
/* ====== ФИНАЛЬНЫЙ ФИКС: ВЬЮВЕР + КНОПКИ (FIXED) ======== */
/* ======================================================= */

/* 1. Главный контейнер на самом верху */
#photo-viewer {
    z-index: 99999 !important;
    background-color: rgba(0, 0, 0, 0.95) !important;
}

/* 2. Контент (картинка) - слой 1 */
.photo-viewer-content {
    position: absolute;
    inset: 0;
    z-index: 10000; /* Базовый уровень */
    pointer-events: auto; /* Чтобы работали свайпы */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 3. Сама картинка */
#viewer-image {
    max-width: 100vw;
    max-height: 100vh;
    object-fit: contain;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    
    /* ГАРАНТИЯ ВИДИМОСТИ */
    opacity: 1 !important; 
    visibility: visible !important;
    display: block !important;
    
    /* Плавность только для трансформации, не для прозрачности (чтобы не моргало) */
    transition: transform 0.2s ease-out;
}

/* 4. Оверлеи (Верхняя и Нижняя панели) - слой 2 (ВЫШЕ картинки) */
.photo-viewer-overlay {
    z-index: 20000 !important; /* Точно выше картинки */
    pointer-events: none !important; /* Пропускаем клики сквозь пустоту */
    opacity: 1 !important; /* Всегда видны (для теста), или добавьте hover логику позже */
    background: linear-gradient(to bottom, rgba(0,0,0,0.5), transparent) !important;
}
.photo-viewer-overlay--bottom {
    background: linear-gradient(to top, rgba(0,0,0,0.5), transparent) !important;
}

/* 5. Кнопки внутри оверлеев - Слой 3 (САМЫЙ ВЕРХ) */
/* Делаем их "твердыми" для мыши */
.photo-viewer-overlay button,
.photo-viewer-overlay .icon-button,
.photo-viewer-overlay .header-actions, 
.photo-viewer-overlay .footer-actions,
.photo-user-info {
    pointer-events: auto !important;
    position: relative;
    z-index: 20001 !important; 
    cursor: pointer !important;
}

/* Иконки не должны перехватывать клик у кнопок */
button i, .icon-button i {
    pointer-events: none !important;
}

/* 6. Меню "Три точки" */
.photo-viewer-menu {
    z-index: 20005 !important;
    pointer-events: auto !important;
}
/* ======================================================= */
/* ====== ФИНАЛЬНЫЙ ВЬЮВЕР (МЕТОД ФОНА) ================== */
/* ======================================================= */

/* Контейнер, который держит фон-превью */
.photo-viewer-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Чтобы размытие не вылезало */
    z-index: 1;
    
    /* Настройки для фона (размытого превью) */
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

/* Псевдо-элемент для размытия фона */
/* Мы размываем ::before, чтобы не размыть саму картинку, когда она появится */
.photo-viewer-content::before {
    content: '';
    position: absolute;
    inset: -20px; /* Чуть шире, чтобы скрыть края блюра */
    background-image: inherit; /* Наследует картинку от родителя */
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    filter: blur(25px) brightness(0.7); /* Сильное размытие */
    z-index: -1;
    transition: opacity 0.5s ease;
}

/* Сама HD картинка */
#viewer-image {
    width: 100%;
    height: 100%;
    object-fit: contain;

    /* Сначала она полностью прозрачная! */
    opacity: 0;
    
    /* Плавное появление */
    transition: opacity 0.5s ease-in-out;
    will-change: opacity;

    /* Убираем все рамки и иконки */
    border: none !important;
    outline: none !important;
    background-color: transparent !important;
    color: transparent !important;
}

/* ======================================================= */
/* ====== ФИНАЛЬНЫЙ СТИЛЬ ВЬЮВЕРА (SIMPLE & STABLE) ====== */
/* ======================================================= */

.photo-viewer-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    /* Никаких фоновых картинок на контейнере! */
    background: transparent; 
}

#viewer-image {
    max-width: 100vw;
    max-height: 100vh;
    object-fit: contain;
    
    /* ГАРАНТИЯ ВИДИМОСТИ: Картинка всегда непрозрачна */
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;

    /* Убираем артефакты */
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    color: transparent; /* Скрываем текст alt */

    /* Анимируем только фильтр (размытие) */
    transition: filter 0.3s ease-out;
    will-change: filter, src;
}

/* Класс размытия */
.image-blur {
    filter: blur(15px);
    transform: scale(1.02); /* Чтобы скрыть размытые края */
}

/* ======================================================= */
/* ====== ВЕРНУЛИ ТРЮК С ПРОЗРАЧНОСТЬЮ (РАБОЧИЙ) ========= */
/* ======================================================= */

.photo-viewer-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    
    /* Это важно для показа превью на фоне */
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1;
}

#viewer-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    
    /* ГЛАВНЫЙ СЕКРЕТ: Фон элемента прозрачный, чтобы видеть background-image родителя */
    background-color: transparent !important; 
    
    /* Убираем рамки */
    border: none !important;
    outline: none !important;
    color: transparent !important;
    
    /* Элемент ВСЕГДА виден (мы меняем его содержимое, а не скрываем его) */
    opacity: 1 !important;
    visibility: visible !important;
    
    /* Анимация только для резкости */
    transition: filter 0.5s ease-out;
    will-change: filter;
}

.blur-load {
    filter: blur(20px); /* Сильное размытие */
    transform: scale(1.05); /* Чуть увеличиваем, чтобы скрыть размытые края */
    transition: filter 0.5s ease-out; /* Плавный переход к четкости */
}

/* ======================================================= */
/* ====== ФИНАЛЬНЫЙ ФИКС: БЛЮР И ВЬЮВЕР ================== */
/* ======================================================= */

/* 1. Настраиваем саму картинку */
#viewer-image {
    display: block !important;
    max-width: 100vw;
    max-height: 100vh;
    object-fit: contain;
    
    /* Важно: Картинка всегда должна быть непрозрачной, чтобы видеть превью */
    opacity: 1 !important; 
    visibility: visible !important;
    
    /* Плавный переход фильтра (резкости) */
    transition: filter 0.5s ease-out, transform 0.3s ease-out !important;
    will-change: filter, transform;
}

/* 2. Класс размытия (применяется к превью) */
.blur-load {
    /* Сильное размытие */
    filter: blur(20px) !important; 
    /* Чуть увеличиваем, чтобы скрыть размытые края, выходящие за рамки */
    transform: scale(1.02); 
}

/* 3. Гарантируем, что контейнер не мешает */
.photo-viewer-content {
    background: transparent !important; 
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
/* Добавить в конец style.css */
.avatar-fade-in {
    opacity: 0;
    transition: opacity 0.4s ease-out;
}
.avatar-animate {
    opacity: 0;
    filter: blur(10px); /* Начальное размытие */
    transform: scale(1.1); /* Слегка увеличено */
    transition: opacity 0.5s ease, filter 0.5s ease, transform 0.5s ease;
    will-change: opacity, filter, transform;
}

.avatar-visible {
    opacity: 1;
    filter: blur(0px); /* Конечное состояние - четко */
    transform: scale(1); /* Нормальный размер */
}
#viewer-image {
    display: block !important;
    max-width: 100vw;
    max-height: 100vh;
    object-fit: contain;
    
    /* Начальное состояние (когда только открыли) */
    opacity: 0; 
    filter: blur(20px); /* Сильный блюр для превью */
    transform: scale(1.05); /* Небольшое увеличение, чтобы скрыть размытые края */
    
    /* Включаем плавность для фильтра и прозрачности */
    transition: filter 0.5s ease-out, opacity 0.3s ease-in, transform 0.5s ease-out !important;
    
    /* Аппаратное ускорение для плавности анимации */
    will-change: filter, opacity, transform;
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Класс, который мы уберем, когда HD фото загрузится */
.blur-active {
    filter: blur(15px) !important;
    transform: scale(1.02) !important;
    opacity: 1 !important; /* Показываем размытое фото */
}

/* Класс готовности - кристальная четкость */
.image-loaded {
    filter: blur(0px) !important;
    transform: scale(1) !important;
    opacity: 1 !important;
}

#viewer-image {
    /* Плавный переход только для фильтра (размытия) */
    transition: filter 0.3s ease-out;
    /* Гарантируем, что картинка заполняет экран */
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    will-change: filter;
}

/* Состояние: Размытая миниатюра */
#viewer-image.blur-mode {
    filter: blur(15px); /* Сильное размытие, чтобы скрыть пиксели */
    transform: scale(1.02); /* Чуть увеличиваем, чтобы скрыть размытые края */
}

/* Состояние: HD загружено */
#viewer-image.hd-mode {
    filter: blur(0px);
    transform: scale(1);
}

/* Стиль для вьювера (чтобы работало размытие на фоне) */
#viewer-image {
    object-fit: contain;
    width: 100%;
    height: 100%;
    
    /* Убираем рамки и иконки битых ссылок */
    border: none !important;
    outline: none !important;
    background-color: transparent;
    color: transparent;
    
    /* ГАРАНТИРУЕМ ВИДИМОСТЬ */
    opacity: 1 !important; 
    visibility: visible !important;
}

/* Эффект размытия */
.blur-load {
    filter: blur(20px);
    transform: scale(1.02);
}

/* Гарантируем, что картинка будет вести себя хорошо */
#viewer-image {
    /* Убираем влияние внешних стилей */
    visibility: visible !important;
    
    /* Убираем рамки (на случай если на долю секунды промелькнет состояние загрузки) */
    border: none !important;
    outline: none !important;
    
    /* Параметры отображения */
    object-fit: contain;
    width: 100%;
    height: 100%;
    
    /* JS управляет этим, но зададим дефолт */
    will-change: filter, transform, opacity;
}
/* ======================================================= */
/* ====== ФИНАЛЬНЫЙ ВЬЮВЕР (КРАСИВЫЙ БЛЮР) =============== */
/* ======================================================= */

.photo-viewer-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden; 
    background: transparent; 
}

#viewer-image {
    max-width: 100vw;
    max-height: 100vh;
    object-fit: contain;
    
    /* --- МАГИЯ ПРОТИВ БИТОЙ ИКОНКИ --- */
    display: block; 
    border: none !important;
    outline: none !important;
    background-color: transparent !important;
    color: transparent !important; /* Прячет alt-текст */
    text-indent: -10000px;         /* Выкидывает иконку ошибки за экран */
    
    /* Начальное состояние (скрыто, чтобы не мигало) */
    opacity: 0;
    transform: scale(1.05); /* Чуть увеличено для эффекта глубины */
    
    /* Плавные переходы */
    transition: opacity 0.3s ease-in, filter 0.5s ease-out, transform 0.5s ease-out;
    will-change: opacity, filter, transform;
}

/* Состояние: Размытая миниатюра (Блюр) */
#viewer-image.blur-active {
    filter: blur(20px); /* Сильное красивое размытие */
    opacity: 1;         /* Показываем! */
    transform: scale(1.05);
}

/* Состояние: HD загружено (Четко) */
#viewer-image.hd-active {
    filter: blur(0px);
    opacity: 1;
    transform: scale(1);
}
/* ======================================================= */
/* ====== ФИНАЛЬНЫЙ ВЬЮВЕР (КРАСИВЫЙ БЛЮР v2) ============ */
/* ======================================================= */

.photo-viewer-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden; 
    background: transparent; 
}

#viewer-image {
    max-width: 100vw;
    max-height: 100vh;
    object-fit: contain;
    
    /* --- МАГИЯ ПРОТИВ БИТОЙ ИКОНКИ --- */
    display: block; 
    border: none !important;
    outline: none !important;
    background-color: transparent !important;
    
    /* Эти две строки прячут иконку разбитой картинки и ALT текст */
    color: transparent !important; 
    text-indent: -10000px;         
    
    /* Начальное состояние */
    opacity: 0;
    transform: scale(1.05); /* Чуть увеличено для эффекта глубины */
    
    /* Плавные переходы */
    transition: opacity 0.3s ease-in, filter 0.5s ease-out, transform 0.5s ease-out;
    will-change: opacity, filter, transform;
}

/* Состояние 1: Размытая миниатюра (Блюр) */
/* Мы применяем это СРАЗУ же */
#viewer-image.blur-active {
    filter: blur(20px); /* Сильное красивое размытие */
    opacity: 1;         /* Показываем! */
    transform: scale(1.05);
}

/* Состояние 2: HD загружено (Четко) */
#viewer-image.hd-active {
    filter: blur(0px);
    opacity: 1;
    transform: scale(1);
}
/* ======================================================= */
/* ====== ФИНАЛЬНЫЙ ВЬЮВЕР (МЕТОД ФОНА) ================== */
/* ======================================================= */

/* Контейнер, который держит фон-превью */
.photo-viewer-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Чтобы размытие не вылезало */
    z-index: 1;
    
    /* Настройки для фона (размытого превью) */
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

/* Псевдо-элемент для размытия фона */
/* Мы размываем ::before, чтобы не размыть саму картинку, когда она появится */
.photo-viewer-content::before {
    content: '';
    position: absolute;
    inset: -20px; /* Чуть шире, чтобы скрыть края блюра */
    background-image: inherit; /* Наследует картинку от родителя */
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    filter: blur(25px) brightness(0.7); /* Сильное размытие */
    z-index: -1;
    transition: opacity 0.5s ease;
}

/* Сама HD картинка */
#viewer-image {
    max-width: 100vw;
    max-height: 100vh;
    width: auto;
    height: auto;
    object-fit: contain;

    /* Сначала она полностью прозрачная! */
    opacity: 0;
    
    /* Плавное появление */
    transition: opacity 0.5s ease-in-out;
    will-change: opacity;

    /* Убираем все рамки и иконки */
    border: none !important;
    outline: none !important;
    background-color: transparent !important;
    color: transparent !important;
}

/* Класс, который делает HD фото видимым */
#viewer-image.visible {
    opacity: 1;
}
/* ======================================================= */
/* ====== ФИНАЛЬНЫЙ ВЬЮВЕР (МЕТОД "СЛОЁНЫЙ ПИРОГ") ======= */
/* ======================================================= */

/* 1. Контейнер-обертка */
.photo-viewer-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; 
    background: transparent;
    z-index: 1;
}

/* 2. ПСЕВДО-ЭЛЕМЕНТ ДЛЯ РАЗМЫТОГО ФОНА (ПРЕВЬЮ) */
/* Мы загрузим миниатюру сюда через CSS-переменную в JS */
.photo-viewer-content::before {
    content: '';
    position: absolute;
    inset: -20px; /* Растягиваем чуть шире, чтобы края размытия не белели */
    
    /* Магия: берем ссылку из переменной, которую задаст JS */
    background-image: var(--preview-url); 
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    
    /* Сильное размытие для красоты */
    filter: blur(15px) brightness(0.8); 
    z-index: -1; /* Лежит ПОД картинкой */
    
    /* Плавное исчезновение, когда загрузится оригинал */
    transition: opacity 0.5s ease-out;
    opacity: 1;
}

/* Класс, чтобы скрыть размытый фон, когда HD готово (опционально) */
.photo-viewer-content.hd-ready::before {
    opacity: 0; /* Можно оставить 1, если хотите эффект глубины */
}

/* 3. САМА HD КАРТИНКА */
#viewer-image {
    max-width: 100vw;
    max-height: 100vh;
    width: auto;
    height: auto;
    object-fit: contain;
    
    /* ГЛАВНОЕ: По умолчанию она ПОЛНОСТЬЮ прозрачна */
    /* Это гарантирует, что никаких битых иконок мы не увидим */
    opacity: 0; 
    
    transition: opacity 0.5s ease-in-out;
    will-change: opacity;
    
    /* Убираем рамки */
    border: none !important;
    outline: none !important;
}

/* 4. Класс видимости (добавляем JS-ом только после загрузки) */
#viewer-image.visible {
    opacity: 1;
}
/* ======================================================= */
/* ====== ФИНАЛЬНЫЙ ВЬЮВЕР (АНТИ-ГЛИТЧ + МЕДЛЕННЫЙ БЛЮР) = */
/* ======================================================= */

/* Контейнер */
.photo-viewer-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; 
    background-color: transparent;
    z-index: 1;
}

/* Сама картинка */
#viewer-image {
    max-width: 100vw;
    max-height: 100vh;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    
    /* --- УБИЙСТВО БИТОЙ ИКОНКИ (Уровень CSS) --- */
    border: none !important;
    outline: none !important;
    background: transparent !important;
    color: transparent !important; /* Скрывает ALT-текст и иконку в Chrome */
    text-indent: -10000px;         /* Выкидывает иконку за пределы блока */
    
    /* Начальное состояние */
    opacity: 0;
    transform: scale(1.05);
    
    /* --- ТАЙМИНГИ (1.2 секунды - очень плавно) --- */
    transition: opacity 0.5s ease-in, filter 1.2s ease-out, transform 1.2s ease-out;
    will-change: opacity, filter, transform;
}

/* Состояние: Размытие */
#viewer-image.blur-active {
    filter: blur(30px); /* Увеличила силу размытия */
    transform: scale(1.05);
    opacity: 1;
}

/* Дополнительная защита: скрываем картинки с пустым src */
img[src=""], img:not([src]) {
    visibility: hidden;
}
/* --- NEKO UI: STORAGE BAR --- */
.storage-usage-card {
    background-color: var(--bg-tertiary);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
    border: 1px solid var(--border-primary);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.storage-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 10px;
}

.storage-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.storage-percent {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-accent);
}

.storage-track {
    width: 100%;
    height: 8px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.storage-fill {
    height: 100%;
    width: 0%; /* Анимируется JS */
    background: linear-gradient(90deg, var(--text-accent) 0%, #4facfe 100%);
    border-radius: 4px;
    transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 0 10px rgba(0, 136, 204, 0.4);
}

.storage-meta-row {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}

.storage-legend {
    display: flex;
    gap: 15px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-primary);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
}

.legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

/* ======================================================= */
/* ====== NEKO STORAGE UI: ФИНАЛЬНАЯ КОРРЕКЦИЯ ======= */
/* ======================================================= */

.storage-management-view {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 10px;
}

/* Карточка хранилища */
.storage-usage-card {
    background: linear-gradient(145deg, var(--bg-tertiary), #1a232e);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 24px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}

/* Заголовок и проценты */
.storage-header-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 16px;
    width: 100%;
}

.storage-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}

.storage-title i {
    color: var(--text-accent);
    width: 20px;
    height: 20px;
}

.storage-percent {
    font-size: 28px;
    font-weight: 800;
    background: linear-gradient(90deg, var(--text-accent), #64b5f6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 2px 10px rgba(0, 136, 204, 0.3);
}

/* Полоса прогресса (Трек) */
.storage-track {
    width: 100%;
    height: 12px;
    background-color: rgba(0, 0, 0, 0.4); /* Темная подложка */
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Полоса прогресса (Заполнение) */
.storage-fill {
    height: 100%;
    width: 0%; /* JS будет менять это */
    background: linear-gradient(90deg, var(--text-accent) 0%, #00d2ff 100%);
    border-radius: 6px;
    position: relative;
    box-shadow: 0 0 15px rgba(0, 136, 204, 0.6); /* Свечение */
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Блик на полосе */
.storage-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transform: skewX(-20deg) translateX(-150%);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    100% { transform: skewX(-20deg) translateX(200%); }
}

/* Текст под полосой */
.storage-meta-row {
    display: flex !important;
    justify-content: space-between !important;
    margin-top: 14px;
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
    width: 100%;
}

/* Легенда (цветные точки) */
.storage-legend {
    display: flex !important;
    gap: 20px;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: 0 0 5px currentColor;
}

/* Виджет памяти в настройках */
.google-storage-widget {
    transition: transform 0.2s ease, background-color 0.2s ease;
}
.google-storage-widget:hover {
    background-color: var(--bg-hover) !important;
    transform: translateY(-2px);
}

/* В style.css */
.google-storage-widget {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.google-storage-widget:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(42, 157, 143, 0.2) inset !important;
}

#name-edit-view,
#username-modal,
#birthdate-edit-view,
#contact-edit-modal,
#add-contact-modal {
    z-index: 5000 !important;
}

/* Стиль для активной кнопки плеера в хедере */
#open-player-btn.active-session {
    color: var(--text-accent);
    background-color: rgba(0, 136, 204, 0.15);
    border: 1px solid var(--text-accent);
    animation: pulse-blue 2s infinite;
}

#open-player-btn.active-session i {
    /* Меняем иконку на Play при активной сессии через CSS нельзя, 
       но мы можем покрасить текущую */
    color: var(--text-accent);
}

@keyframes pulse-blue {
    0% { box-shadow: 0 0 0 0 rgba(0, 136, 204, 0.7); }
    70% { box-shadow: 0 0 0 8px rgba(0, 136, 204, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 136, 204, 0); }
}

/* Меню настроек плеера */
.player-settings-menu {
    position: absolute;
    bottom: 60px; /* Над панелью управления */
    right: 10px;
    width: 260px;
    background-color: rgba(28, 28, 30, 0.95); /* Почти черный */
    backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 8px 0;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    z-index: 500;
    color: #eee;
    font-size: 13px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
}

.settings-menu-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.2s;
}
.settings-menu-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.settings-menu-item__label {
    display: flex;
    align-items: center;
    gap: 12px;
}

.settings-menu-item__value {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #aaa;
}

.settings-submenu-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 4px;
    font-weight: 600;
}

#player-debug-overlay {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: rgba(0, 0, 0, 0.8);
    color: #0f0; /* Хакерский зеленый или белый #fff */
    padding: 12px;
    border-radius: 4px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 11px;
    z-index: 50;
    min-width: 250px;
    line-height: 1.5;
    pointer-events: none; /* Чтобы клики проходили сквозь него */
}
#player-debug-overlay.hidden {
    display: none;
}
.debug-row {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}
.debug-row span:first-child {
    opacity: 0.7;
}
#close-debug-btn {
    position: absolute;
    top: 2px;
    right: 5px;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    pointer-events: auto; /* Кнопку можно нажать */
    font-size: 14px;
}


/* --- ИСПРАВЛЕНИЕ ШАПКИ ЦЕНТРАЛЬНОЙ ПАНЕЛИ --- */

.center-panel__header {
    padding: 12px 16px; /* Немного увеличим отступы для воздуха */
    height: 64px;       /* Фиксируем высоту, чтобы ничего не прыгало */
    display: flex;
    align-items: center;
    justify-content: space-between; /* Распределяем элементы */
    gap: 12px;          /* Отступ между меню, поиском и кнопкой плеера */
    flex-shrink: 0;
    border-bottom: 1px solid var(--border-primary);
    background-color: var(--bg-secondary); /* Убедимся, что фон правильный */
}

/* Кнопка меню (бургер) */
#menu-toggle-button {
    flex-shrink: 0;
    color: var(--text-secondary);
}

/* Поле поиска - Главный виновник */
.search-bar {
    position: relative;
    flex-grow: 1; /* Занимает все свободное место */
    display: flex;
    align-items: center;
    max-width: 100%; /* Ограничиваем ширину */
}

.search-bar__icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    pointer-events: none; /* Чтобы клик проходил сквозь иконку в поле */
    z-index: 2;
}

.search-bar input {
    width: 100%;
    height: 40px; /* Фиксированная высота */
    background-color: var(--bg-tertiary); /* Темный фон, а не белый */
    border: 1px solid transparent;
    border-radius: 20px;
    padding: 0 40px 0 40px; /* Отступы для иконки и крестика */
    color: var(--text-primary);
    font-size: var(--font-size-md);
    transition: all 0.2s ease;
}

.search-bar input:focus {
    outline: none;
    background-color: var(--bg-primary);
    border-color: var(--text-accent);
    box-shadow: 0 0 0 2px rgba(0, 136, 204, 0.2);
}

/* Кнопка очистки поиска (крестик) */
.search-bar .clear-search-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px;
    display: none; /* Скрыта по умолчанию */
}

.search-bar .clear-search-btn.visible {
    display: flex;
}

/* Контейнер для кнопок плеера (справа) */
.player-controls-container {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

/* Сама кнопка плеера */
#open-player-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.player-drop-zone {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150px; /* Сделали зону выше, чтобы легче попадать */
    background: linear-gradient(to top, rgba(229, 57, 53, 0.9) 0%, transparent 100%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 40px;
    z-index: 400; /* Должно быть меньше, чем z-index виджета! */
    opacity: 0;
    
    /* !!! САМОЕ ГЛАВНОЕ !!! */
    pointer-events: none; /* Пропускаем клики сквозь зону, чтобы JS ловил их */
    
    transition: opacity 0.3s ease;
    color: white;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.player-drop-zone::after {
    content: 'Развернуть'; 
    display: flex;
    align-items: center;
    gap: 10px;
    transform: translateY(20px);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Когда начинаем тянуть */
.player-drop-zone.visible {
    opacity: 1;
}
.player-drop-zone.visible::after {
    transform: translateY(0);
}

/* Когда навели на зону */
.player-drop-zone.hovered {
    background: linear-gradient(to top, rgba(229, 57, 53, 1) 0%, rgba(229, 57, 53, 0.2) 100%);
}
.player-drop-zone.hovered::after {
    content: 'Отпустите';
    transform: scale(1.2);
}

/* --- ФИКС ДЛЯ ПЛАВАЮЩЕГО ВИДЖЕТА --- */

#player-widget {
    /* Гарантируем, что виджет всегда выше контента */
    z-index: 5000 !important; 
    /* Плавность только для hover, при драге мы её отключаем в JS */
    transition: transform 0.2s ease, background-color 0.2s ease; 
}

.player-drop-zone {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150px; /* Достаточная высота для удобного попадания */
    
    /* Градиент */
    background: linear-gradient(to top, rgba(0, 136, 204, 0.8) 0%, transparent 100%);
    
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 40px;
    
    /* Слой: Должен быть ВЫШЕ контента, но НИЖЕ перетаскиваемого виджета (у виджета 10000 в JS) */
    z-index: 9000; 
    
    opacity: 0;
    
    /* !!! КРИТИЧЕСКИ ВАЖНО !!! */
    /* Это позволяет мыши "проходить сквозь" зону и отправлять координаты в JS */
    pointer-events: none !important; 
    
    transition: opacity 0.3s ease;
    color: white;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.player-drop-zone::after {
    content: 'Развернуть'; /* Текст подсказки */
    display: flex;
    align-items: center;
    gap: 10px;
    transform: translateY(20px);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Состояния */
.player-drop-zone.visible {
    opacity: 1;
}
.player-drop-zone.visible::after {
    transform: translateY(0);
}

/* Активное состояние (когда навели) */
.player-drop-zone.hovered {
    /* Меняем цвет на более яркий */
    background: linear-gradient(to top, rgba(0, 136, 204, 1) 0%, rgba(0, 136, 204, 0.2) 100%);
}
.player-drop-zone.hovered::after {
    transform: scale(1.2); /* Увеличиваем текст */
}

.player-drop-zone {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150px;
    
    /* Градиент (Красный снизу, прозрачный сверху) */
    background: linear-gradient(to top, rgba(229, 57, 53, 0.8) 0%, transparent 100%);
    
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 40px;
    
    /* ВАЖНО: Слой должен быть МЕНЬШЕ виджета (виджет в JS получает 10000) */
    z-index: 9000; 
    
    opacity: 0;
    
    /* !!! САМОЕ ГЛАВНОЕ: Чтобы мышь проходила сквозь зону !!! */
    pointer-events: none !important; 
    
    transition: opacity 0.3s ease;
    color: white;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* Остальные стили hover/after оставьте как были */
.player-drop-zone.visible { opacity: 1; }
.player-drop-zone.hovered { background: linear-gradient(to top, rgba(229, 57, 53, 1) 0%, rgba(229, 57, 53, 0.2) 100%); }

.player-drop-zone {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150px; /* Достаточная высота, чтобы легко попасть */
    
    /* Красивый градиент */
    background: linear-gradient(to top, rgba(229, 57, 53, 0.8) 0%, transparent 100%);
    
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 40px;
    
    /* Слой: должен быть НИЖЕ виджета (у виджета мы ставим 10000 в JS) */
    z-index: 9000; 
    
    opacity: 0;
    
    /* !!! САМОЕ ГЛАВНОЕ !!! */
    /* Это позволяет скрипту видеть движение мыши даже поверх зоны */
    pointer-events: none !important; 
    
    transition: opacity 0.3s ease;
    color: white;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.player-drop-zone::after {
    content: 'Развернуть'; 
    display: flex;
    align-items: center;
    gap: 10px;
    transform: translateY(20px);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Показываем зону, когда начали тащить */
.player-drop-zone.visible {
    opacity: 1;
}
.player-drop-zone.visible::after {
    transform: translateY(0);
}

/* Активное состояние (когда поднесли) */
.player-drop-zone.hovered {
    background: linear-gradient(to top, rgba(229, 57, 53, 1) 0%, rgba(229, 57, 53, 0.2) 100%);
}
.player-drop-zone.hovered::after {
    transform: scale(1.2);
    content: 'Отпустите';
}

/* 1. Сама анимация (пульсация + изменение размера) */
@keyframes pulse-opacity {
    0% { 
        opacity: 1; 
        transform: scale(1); 
        text-shadow: 0 0 5px rgba(168, 255, 120, 0.2);
    }
    50% { 
        opacity: 0.6; 
        transform: scale(0.9); 
        text-shadow: 0 0 15px rgba(168, 255, 120, 0.8);
    }
    100% { 
        opacity: 1; 
        transform: scale(1); 
        text-shadow: 0 0 5px rgba(168, 255, 120, 0.2);
    }
}

.playing-pulse {
    animation: pulse-opacity 1.5s infinite ease-in-out !important;
    color: #a8ff78 !important; 
}

.playing-pulse i, 
.playing-pulse svg {
    color: #a8ff78 !important;
    stroke: #a8ff78 !important;
}

@keyframes pulse-opacity {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1); }
}

/* --- СТИЛИ РЕДАКТОРА ТЕМ --- */
.theme-control {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--bg-tertiary);
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 12px;
    border: 1px solid var(--border-primary);
}

.theme-control-info {
    display: flex;
    flex-direction: column;
}

.theme-control-info label {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
}

.theme-control-info span {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* Стилизуем инпут цвета */
input[type="color"] {
    -webkit-appearance: none;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%; /* Круглый */
    cursor: pointer;
    background: none;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 0 0 2px var(--border-primary);
}
input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}
input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 50%;
}

/* --- RAMEN ZEN THEMES (Простой стиль) --- */

.theme-simple-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.theme-simple-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--bg-tertiary);
    padding: 10px 16px;
    border-radius: 10px;
    border: 1px solid var(--border-primary);
}

.theme-simple-row span {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
}

/* Нативный инпут цвета - делаем его аккуратным прямоугольником */
input[type="color"] {
    -webkit-appearance: none;
    border: none;
    width: 50px;
    height: 30px;
    background: none;
    cursor: pointer;
    padding: 0;
}

input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

input[type="color"]::-webkit-color-swatch {
    border: 1px solid var(--border-primary);
    border-radius: 6px;
}
/* --- GOD MODE STYLES --- */
.design-mode-active {
    cursor: crosshair !important;
}

.design-mode-active * {
    /* Отключаем события мыши для всего, кроме редактора, чтобы клики не вызывали чаты */
    /* JS обработает это через capture, но pointer-events помогает визуально */
}

.neko-hover-highlight {
    outline: 2px solid #a8ff78 !important;
    outline-offset: 2px;
    box-shadow: 0 0 15px rgba(168, 255, 120, 0.5) !important;
    transition: all 0.1s;
    z-index: 9999;
}

.neko-floating-editor {
    position: fixed;
    width: 260px;
    background: #1f2937;
    border: 1px solid #374151;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    z-index: 2147483647; /* Выше всего */
    color: white;
    font-family: sans-serif;
    overflow: hidden;
    animation: fadeIn 0.2s ease;
}

.neko-floating-editor .editor-header {
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    font-size: 13px;
}

.neko-floating-editor .editor-body {
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.neko-floating-editor input[type="text"] {
    background: rgba(0,0,0,0.2);
    border: 1px solid #4b5563;
    padding: 8px;
    border-radius: 6px;
    color: white;
    width: 100%;
}

.neko-floating-editor .color-picker-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.neko-floating-editor .editor-btn {
    background: #374151;
    border: none;
    color: white;
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    transition: background 0.2s;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}
.neko-floating-editor .editor-btn:hover { background: #4b5563; }
.neko-floating-editor .editor-btn.small { width: auto; padding: 5px 10px; }
.neko-floating-editor .editor-btn.danger { background: rgba(239, 68, 68, 0.2); color: #ef4444; margin-top: 10px; }

/* --- GOD MODE CONTROLS --- */
#neko-god-controls {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
    z-index: 2147483647;
    background: rgba(31, 41, 55, 0.9);
    padding: 10px 20px;
    border-radius: 50px;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    backdrop-filter: blur(10px);
}

.god-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 30px;
    border: none;
    font-weight: 700;
    cursor: pointer;
    font-size: 14px;
    transition: transform 0.2s, opacity 0.2s;
}
.god-btn:hover { transform: scale(1.05); }
.god-btn:active { transform: scale(0.95); }

.god-btn.save { background: #a8ff78; color: #000; }
.god-btn.save:hover { box-shadow: 0 0 15px rgba(168, 255, 120, 0.4); }

.god-btn.cancel { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
.god-btn.cancel:hover { background: rgba(239, 68, 68, 0.3); }

/* --- FAVORITES GRID --- */
.fav-colors-grid {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 10px 0;
    padding: 8px;
    background: rgba(0,0,0,0.2);
    border-radius: 8px;
}
.fav-color-swatch {
    width: 24px; height: 24px;
    border-radius: 50%;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.2);
    transition: transform 0.1s;
}
.fav-color-swatch:hover { transform: scale(1.2); border-color: white; }
.fav-color-add {
    width: 24px; height: 24px;
    border-radius: 50%;
    border: 1px dashed #aaa;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: #aaa;
}
.fav-color-add:hover { color: white; border-color: white; }

/* --- NEKO GOD CONTROLS (ПАНЕЛЬ УПРАВЛЕНИЯ) --- */
#neko-god-controls {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 20px;
    z-index: 2147483647 !important; /* ВЫШЕ ВСЕГО */
    background: rgba(17, 24, 39, 0.95);
    padding: 15px 30px;
    border-radius: 50px;
    border: 2px solid rgba(168, 255, 120, 0.3);
    box-shadow: 0 10px 50px rgba(0,0,0,0.8);
    backdrop-filter: blur(10px);
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp { from { transform: translate(-50%, 100%); } to { transform: translate(-50%, 0); } }

.god-btn {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 25px; border-radius: 30px; border: none;
    font-weight: 800; cursor: pointer; font-size: 14px;
    text-transform: uppercase; letter-spacing: 1px;
    transition: all 0.2s;
}

.god-btn.save { background: #a8ff78; color: #000; box-shadow: 0 0 20px rgba(168, 255, 120, 0.4); }
.god-btn.save:hover { transform: scale(1.05); background: #beff95; }

.god-btn.cancel { background: rgba(239, 68, 68, 0.2); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.5); }
.god-btn.cancel:hover { background: rgba(239, 68, 68, 0.4); }

/* --- EDITOR WINDOW --- */
.neko-floating-editor {
    position: fixed; width: 280px; 
    background: #1f2937; border: 1px solid #374151; border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.7); 
    z-index: 2147483646 !important; /* Чуть ниже панели управления */
    color: white; font-family: sans-serif; overflow: hidden;
}
.fav-colors-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 5px; }
.fav-color-swatch { width: 100%; aspect-ratio: 1; border-radius: 6px; cursor: pointer; border: 1px solid rgba(255,255,255,0.2); }
.fav-color-add { width: 100%; aspect-ratio: 1; border-radius: 6px; cursor: pointer; border: 1px dashed #aaa; display: flex; align-items: center; justify-content: center; color: #aaa; }
.fav-color-add:hover { border-color: #a8ff78; color: #a8ff78; }

/* Список чатов */
#center-panel {
    /* ... твои текущие стили ... */
    
    min-width: 320px !important; 
    flex-shrink: 0; /* Не даем соседям сдавливать нас */
    flex-grow: 0;   /* ВАЖНО: Не давать расти самому по себе (мы управляем шириной через JS) */
    
    /* Начальная ширина, если JS еще не загрузился */
    width: 350px; 
    min-width: 350px;
}

/* Правое окно (чат) должно занимать всё оставшееся место */
#right-view {
    flex-grow: 1;
    min-width: 0; /* Хак для flexbox, чтобы контент внутри сжимался корректно */
}

#recorder-timer, 
.recording-dot {
    display: none !important;
}

#voice-recorder-bar,
.voice-recorder-bar,
#recorder-timer,
.recorder-indicator,
.recorder-visualizer,
#cancel-recording-btn {
    display: none !important;       /* Перебиваем любой display: flex от JS */
    visibility: hidden !important;  /* Делаем невидимым */
    opacity: 0 !important;          /* Делаем прозрачным */
    height: 0 !important;           /* Схлопываем высоту */
    width: 0 !important;            /* Схлопываем ширину */
    padding: 0 !important;          /* Убираем отступы */
    margin: 0 !important;           /* Убираем внешние отступы */
    pointer-events: none !important;/* Запрещаем клики */
    position: absolute !important;  /* Вырываем из потока */
    z-index: -9999 !important;      /* Отправляем в подвал */
}

/* ================================================================= */
/* 📱 NEKO MOBILE ADAPTATION (FIXED V4) */
/* ================================================================= */

@media screen and (max-width: 768px) {
    /* 1. ГЛОБАЛЬНЫЙ ФИКС "ПЛАВАНИЯ" */
    body, html {
        height: 100dvh; /* Используем dynamic viewport height */
        overflow: hidden; /* Запрещаем скролл самого тела */
        position: fixed; /* Жестко фиксируем базу */
        width: 100%;
    }

    /* 2. ЛЕВОЕ МЕНЮ (НИЖНИЙ БАР) */
    #left-panel {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100% !important;
        height: calc(60px + env(safe-area-inset-bottom)); /* Учет челки iPhone */
        flex-direction: row;
        justify-content: space-around;
        padding: 0 10px env(safe-area-inset-bottom) 10px;
        background: rgba(16, 24, 39, 0.95);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        z-index: 1000;
        border-right: none;
    }
    
    /* Скрываем лишнее в нижнем баре */
    #left-panel .logo-container, 
    #left-panel #logout-container,
    #left-panel #user-profile { display: none !important; }
    
    #main-menu {
        display: flex;
        flex-direction: row;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        padding: 0 15px;
        overflow: visible; /* Чтобы не резало тени */
    }

    .menu-item { margin: 0; padding: 10px; border-radius: 50%; }
    .menu-item span { display: none; } /* Только иконки */
    
    /* 3. СПИСОК ЧАТОВ (ЦЕНТР) */
    #center-panel {
        width: 100% !important;
        min-width: 100% !important;
        height: 100dvh;
        padding-top: env(safe-area-inset-top);
        padding-bottom: 80px; /* Место под нижний бар */
        border-right: none;
    }

    /* 4. ОКНО ЧАТА (ВЫЕЗЖАЕТ СПРАВА) */
    #chat-view {
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100dvh;
        z-index: 2000; /* Поверх всего */
        background: #0f172a; 
        display: flex; flex-direction: column;
        
        /* Скрыто по умолчанию (сдвинуто вправо) */
        transform: translateX(100%); 
        transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    /* Класс, который JS добавит при открытии чата */
    #chat-view.mobile-active {
        transform: translateX(0); /* Выезжает на экран */
    }

    /* Хедер чата */
    .chat-view__header {
        padding-top: max(10px, env(safe-area-inset-top)) !important;
        height: auto !important;
        min-height: 60px;
        background: rgba(16, 24, 39, 0.95);
    }
    
    /* Кнопка "Назад" - показываем только на мобильном */
    .mobile-back-btn { 
        display: flex !important; 
        margin-right: 8px; 
        color: var(--text-accent);
    }

    /* 5. WATCH PARTY ПЛЕЕР (ТЕЛЕВИЗОР СВЕРХУ) */
    #player-modal {
        position: fixed !important;
        top: 0 !important; left: 0 !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16/9 !important; /* Фиксируем пропорцию */
        
        transform: none !important; /* Убираем центрирование ПК */
        border-radius: 0 !important;
        border: none !important;
        border-bottom: 1px solid var(--text-accent);
        z-index: 5000 !important;
        background: #000;
        
        /* Отключаем возможность таскать его пальцем на мобильном */
        touch-action: none; 
    }

    /* Убираем синие заглушки на мобильном, чтобы не мешали */
    #watch-party-placeholder, 
    #watch-party-start-screen {
        display: none !important;
    }
    
    /* Если плеер открыт, сдвигаем контент чата вниз, чтобы не перекрывало */
    body.player-open #chat-view {
        padding-top: calc(100vw * 0.5625); /* 16:9 aspect ratio height */
    }
}

@media screen and (max-width: 768px) {
    /* 1. Глобальные настройки, чтобы экран не "плавал" */
    body, html, #app-container {
        width: 100%;
        height: 100dvh; /* Используем dvh для учета адресной строки */
        overflow: hidden;
        position: relative;
    }

    /* 2. Левое меню (нижний бар) */
    #left-panel {
        /* Настройки нижнего бара оставляем как есть, если они тебе нравятся, 
           но добавляем z-index, чтобы он не перекрывал чат */
        z-index: 10; 
    }

    /* 3. СПИСОК ЧАТОВ (Центральная панель) */
    #center-panel {
        display: flex !important;
        width: 100vw !important;     /* Строго на всю ширину экрана */
        min-width: 100vw !important; /* Отменяем ограничения в 400px */
        height: 100dvh;
        position: absolute;          /* Фиксируем на месте */
        top: 0;
        left: 0;
        z-index: 1;                  /* Базовый слой */
        border-right: none;
        padding-bottom: 80px;        /* Место под нижнее меню */
    }

    /* Исправляем ширину инпутов поиска, чтобы не вылазили */
    .search-bar {
        max-width: 100%;
        width: 100%;
    }

    /* 4. ОКНО ЧАТА (Выезжающая панель) */
    #chat-view {
        display: flex;
        flex-direction: column;
        position: fixed;       /* Поверх всего */
        top: 0;
        left: 0;
        width: 100vw !important;
        height: 100dvh !important;
        background-color: var(--bg-primary); /* Цвет фона чата */
        z-index: 2000;         /* Поверх списка и меню */
        
        /* Скрываем его справа за экраном */
        transform: translateX(100%);
        transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1); /* Плавная анимация как в iOS/Telegram */
    }

    /* Класс, который JS добавит, когда чат открыт */
    #chat-view.mobile-active {
        transform: translateX(0); /* Выезжает на экран */
    }

    /* Прячем нижнее меню и список, когда чат открыт (опционально, для производительности) */
    body.chat-open #left-panel,
    body.chat-open #center-panel {
        display: none !important;
    }

    /* Хедер чата на мобильном */
    .chat-view__header {
        padding-top: env(safe-area-inset-top); /* Учет челки */
        height: auto;
        min-height: 60px;
    }

    /* Кнопка "Назад" видна только на мобильных */
    .mobile-back-btn {
        display: flex !important;
        margin-right: 10px;
        z-index: 10;
        cursor: pointer;
        color: var(--text-primary);
    }
}