: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,
.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,
.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;
}

width: 100%;
text-align: center;
border-bottom: 1px solid var(--border-primary);
line-height: 0.1em;
margin: 10px 0 20px;
}

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;
}

display: flex;
width: 100%;
}

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;
}

width: 24px;
height: auto;
}

color: var(--text-primary);
}

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);
}

outline: none;
border-color: var(--text-accent);
}

margin-top: -10px;
}

display: flex;
justify-content: center;
gap: 10px;
}

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);
}

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;
    margin-top: -1px
}

.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-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: 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: transparent !important;
}

.message-wrapper--context-menu-active .message {
    filter: brightness(0.85) !important;
}

/* Контейнер с аватаром и пузырем */
.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-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: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-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;
}

#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);
    }

    .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: 360px;
                background: rgba(10, 18, 32, 0.88);
                backdrop-filter: blur(50px) saturate(1.8);
                -webkit-backdrop-filter: blur(50px) saturate(1.8);
                border: 1px solid rgba(255, 255, 255, 0.08);
                border-radius: 24px;
                box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.8);
                z-index: 2147483647;
                color: white;
                font-family: 'Segoe UI', system-ui, sans-serif;
                overflow: hidden;
            }

            .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 (legacy — overridden by JS injectNekoWidgetStyles) --- */
            .neko-floating-editor {
                position: fixed;
                width: 360px;
                background: rgba(10, 18, 32, 0.88);
                backdrop-filter: blur(50px) saturate(1.8);
                -webkit-backdrop-filter: blur(50px) saturate(1.8);
                border: 1px solid rgba(255, 255, 255, 0.08);
                border-radius: 24px;
                box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.8);
                z-index: 2147483646 !important;
                color: white;
                font-family: 'Segoe UI', system-ui, 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;
                /* Отправляем в подвал */
            }

            /* === RAMEN MOBILE CORE === */
            :root {
                --bottom-nav-height: 65px;
                --header-height: 60px;
                --safe-area-bottom: env(safe-area-inset-bottom);
            }

            body {
                background-color: #0f172a;
                overscroll-behavior-y: none;
                /* Отключает "резинку" при скролле всей страницы */
                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            }

            /* Скрываем десктопные элементы */
            #left-panel,
            .panel-resizer {
                display: none !important;
            }

            /* КОНТЕЙНЕР ПРИЛОЖЕНИЯ */
            #app-container {
                width: 100vw;
                height: 100dvh;
                /* Dynamic Viewport Height */
                position: relative;
                overflow: hidden;
                display: flex;
                flex-direction: column;
            }

            /* ЭКРАНЫ (SCREENS) */
            /* Вместо панелей мы используем экраны, которые накладываются друг на друга */
            .app-screen {
                position: absolute;
                inset: 0;
                background: #0f172a;
                z-index: 10;
                display: flex;
                flex-direction: column;
                padding-bottom: calc(var(--bottom-nav-height) + var(--safe-area-bottom));
                opacity: 0;
                pointer-events: none;
                transition: opacity 0.2s ease;
            }

            .app-screen.active {
                opacity: 1;
                pointer-events: auto;
                z-index: 20;
            }

            /* Экран Чата (должен перекрывать всё, включая навигацию) */
            #chat-view {
                z-index: 50 !important;
                padding-bottom: 0 !important;
                /* У чата свой футер */
                transform: translateX(100%);
                transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
            }

            #chat-view.active {
                transform: translateX(0);
            }

            /* МОБИЛЬНАЯ НАВИГАЦИЯ (BOTTOM TAB BAR) */
            #mobile-bottom-nav {
                position: fixed;
                bottom: 0;
                left: 0;
                width: 100%;
                height: calc(var(--bottom-nav-height) + var(--safe-area-bottom));
                background: rgba(16, 24, 39, 0.95);
                backdrop-filter: blur(12px);
                -webkit-backdrop-filter: blur(12px);
                border-top: 1px solid rgba(255, 255, 255, 0.05);
                display: flex;
                justify-content: space-around;
                padding-bottom: var(--safe-area-bottom);
                z-index: 40;
            }

            .nav-tab {
                flex: 1;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                color: #64748b;
                gap: 4px;
                background: none;
                border: none;
                cursor: pointer;
            }

            .nav-tab.active {
                color: #a8ff78;
            }

            .nav-tab i {
                width: 24px;
                height: 24px;
                transition: transform 0.2s;
            }

            .nav-tab.active i {
                transform: translateY(-2px);
            }

            .nav-tab span {
                font-size: 10px;
                font-weight: 500;
            }

            /* Адаптация списков под тач */
            .chat-item {
                padding: 15px;
                border-radius: 16px;
                margin-bottom: 8px;
                background: rgba(255, 255, 255, 0.02);
            }

            .chat-item:active {
                background: rgba(255, 255, 255, 0.05);
                transform: scale(0.98);
            }

            /* ========================================= */
            /* 📱 NEKO MOBILE ULTIMATE FIX (V3)          */
            /* Спасение входа и интерфейса на телефонах  */
            /* ========================================= */

            @media screen and (max-width: 768px) {

                /* 1. ОТКЛЮЧАЕМ ГЛОБАЛЬНОЕ РАЗМЫТИЕ */
                :root {
                    --main-bg-blur: 0px !important;
                }

                /* 2. СНИМАЕМ ФИЛЬТРЫ СО ВСЕХ КОНТЕЙНЕРОВ */
                html,
                body,
                #app-container,
                .modal-view,
                .settings-view {
                    filter: none !important;
                    -webkit-filter: none !important;
                    backdrop-filter: none !important;
                    -webkit-backdrop-filter: none !important;
                    transform: none !important;
                    /* Убирает баги позиционирования */
                }

                /* 3. РАЗБЛОКИРОВКА НАЖАТИЙ (Критично для входа!) */
                /* Класс .blur-active часто вешает pointer-events: none. Мы это запрещаем. */
                #app-container,
                #auth-container,
                .auth-form,
                .auth-input,
                .auth-button,
                body.blur-active *,
                input,
                button,
                textarea,
                select {
                    pointer-events: auto !important;
                    user-select: auto !important;
                    opacity: 1 !important;
                }

                /* 4. СКРЫВАЕМ СЛОИ "РЕАЛЬНОСТИ" (Декоративные фоны) */
                /* На мобилке они перекрывают контент, поэтому мы их просто прячем */
                .neko-bg-jail,
                .neko-bg-prisoner,
                #left-panel::before,
                #center-panel::before,
                #right-view::before {
                    display: none !important;
                    width: 0 !important;
                    height: 0 !important;
                    content: none !important;
                }

                /* 5. ПОДНИМАЕМ ВАЖНЫЕ ЭЛЕМЕНТЫ НАВЕРХ */
                /* Чтобы фон случайно не оказался выше кнопки входа */
                .auth-form,
                .modal-content,
                .settings-content {
                    z-index: 10000 !important;
                    position: relative !important;
                    background-color: var(--bg-secondary) !important;
                    /* Гарантируем непрозрачный фон */
                }
            }

            /* 🔥 ГЛОБАЛЬНЫЙ ФИКС ДЛЯ МОБИЛОК (Вне Media Query) */
            body.mobile-no-blur * {
                backdrop-filter: none !important;
                -webkit-backdrop-filter: none !important;
                filter: none !important;
                -webkit-filter: none !important;
            }

            /* 🔥 NEKO FIX: ПОЛНЫЙ ЗАПРЕТ БЛЮРА НА ТЕЛЕФОНАХ */
            @media screen and (max-width: 768px) {
                #app-container.blur-active {
                    filter: none !important;
                    backdrop-filter: none !important;
                    opacity: 1 !important;
                    transform: none !important;
                }

                /* Если вдруг висит оверлей загрузки */
                #loading-overlay {
                    backdrop-filter: none !important;
                    background: #111 !important;
                    /* Просто черный фон вместо стекла */
                }

                /* Скрываем настройки принудительно, если они создают эффект блюра */
                #settings-panel-view:not(.hidden)~#app-container {
                    filter: none !important;
                }
            }

            /* === ФИКС ВЬЮВЕРА: ЛОГИКА ЗАГРУЗКИ === */

            /* 1. Базовое состояние картинки (ВСЕГДА ЧЕТКОЕ по умолчанию) */
            #viewer-image {
                display: block !important;
                max-width: 100vw;
                max-height: 100vh;
                object-fit: contain;

                /* Сбрасываем блюр в ноль */
                filter: blur(0px) !important;
                transform: scale(1) !important;
                opacity: 1 !important;

                /* Плавность перехода, когда класс снимется */
                transition: filter 0.5s ease-out, transform 0.5s ease-out !important;
            }

            /* 2. Состояние загрузки (Применяется только если JS добавил класс) */
            /* JS добавляет класс .blur-load или .blur-active при открытии */
            #viewer-image.blur-load,
            #viewer-image.blur-active {
                filter: blur(20px) !important;
                /* Возвращаем блюр */
                transform: scale(1.05) !important;
                /* Чуть увеличиваем, чтобы скрыть края */
            }

            /* === ФИКС КНОПКИ GIF === */

            /* Принудительно показываем кнопку открытия GIF */
            #open-gif-panel-btn,
            button[data-action="toggle-gif-panel"] {
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                visibility: visible !important;
                opacity: 1 !important;
                width: 40px !important;
                height: 40px !important;
                color: var(--text-secondary) !important;
                cursor: pointer !important;
                z-index: 10 !important;
                /* Поднимаем слой */
            }

            /* На всякий случай, если она внутри враппера */
            .message-input-wrapper #open-gif-panel-btn {
                display: flex !important;
            }

            /* Делаем иконку внутри видимой */
            #open-gif-panel-btn i,
            button[data-action="toggle-gif-panel"] i {
                width: 24px;
                height: 24px;
                color: inherit;
            }

            .message__bubble,
            .message-text {
                /* Главное свойство: ломать длинные слова, если они не влезают */
                overflow-wrap: break-word;
                word-wrap: break-word;
                /* Для старых браузеров */

                /* Дополнительно: разрешить разрыв в любом месте, если слово слишком длинное */
                word-break: break-word;

                /* Сохранять переносы строк (Enter), но переносить длинные строки */
                white-space: pre-wrap;

                /* Ограничение ширины внутри контейнера */
                max-width: 100%;
                min-width: 0;
                /* Фикс для Flexbox */
            }

            /* ================================================================= */
            /* 📱 NEKO MOBILE NUCLEAR PATCH (CHAT + PLAYER)                      */
            /* Вставить в САМЫЙ КОНЕЦ файла style.css                            */
            /* ================================================================= */

            @media screen and (max-width: 768px) {

                /* --- 1. СБРОС БАЗЫ --- */
                html,
                body {
                    overflow: hidden;
                    position: fixed;
                    width: 100%;
                    height: 100%;
                }

                #app-container {
                    display: block !important;
                    position: relative;
                    width: 100vw !important;
                    height: 100dvh !important;
                }

                /* --- 2. СКРЫВАЕМ ЛИШНЕЕ (Боковое меню и ресайзеры) --- */
                #left-panel,
                .panel-resizer,
                #panel-resizer {
                    display: none !important;
                }

                /* --- 3. СПИСОК ЧАТОВ (На весь экран) --- */
                #center-panel {
                    position: absolute !important;
                    inset: 0 !important;
                    /* Растягиваем на всё окно */
                    width: 100vw !important;
                    height: 100dvh !important;
                    min-width: 0 !important;
                    max-width: none !important;
                    z-index: 10;
                    border: none !important;
                    background-color: var(--bg-primary) !important;
                    padding-bottom: 65px !important;
                    /* Место под нижнее меню */
                }

                /* --- 4. КОНТЕЙНЕР ЧАТА (Правая панель) --- */
                /* Это родитель чата, он должен быть прозрачным и пропускать клики, пока чат закрыт */
                #right-view {
                    position: fixed !important;
                    inset: 0 !important;
                    width: 100vw !important;
                    height: 100dvh !important;
                    z-index: 50;
                    background: transparent !important;
                    pointer-events: none;
                    /* Чтобы можно было нажать на список чатов под ним */
                    display: block !important;
                }

                /* --- 5. САМ ЧАТ (Выезжающая панель) --- */
                #chat-view {
                    position: fixed !important;
                    top: 0 !important;
                    left: 0 !important;
                    width: 100vw !important;
                    height: 100dvh !important;
                    z-index: 9999 !important;
                    background-color: #0f172a !important;
                    /* Укажите ваш цвет фона явно */

                    flex-direction: column !important;

                    /* Исходное состояние: сдвинут вправо */
                    transform: translate3d(100%, 0, 0) !important;
                    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;

                    opacity: 1 !important;
                    /* На всякий случай */
                    visibility: visible !important;
                }

                /* Когда JS добавляет этот класс - чат выезжает */
                #chat-view.mobile-active {
                    transform: translate3d(0, 0, 0) !important;
                }

                /* Кнопка назад в хедере */
                .mobile-back-btn {
                    display: flex !important;
                    margin-right: 10px;
                    z-index: 101;
                }

                /* --- 6. WATCH PARTY (ПЛЕЕР) - Вертикальный режим --- */
                #player-modal {
                    /* Фиксируем на весь экран */
                    position: fixed !important;
                    top: 0 !important;
                    left: 0 !important;
                    width: 100vw !important;
                    height: 100dvh !important;
                    transform: none !important;
                    /* Убираем центрирование */
                    border-radius: 0 !important;
                    border: none !important;
                    z-index: 9999 !important;

                    /* Сбрасываем ограничения размера */
                    min-width: 0 !important;
                    min-height: 0 !important;
                    max-width: none !important;
                    max-height: none !important;

                    display: flex !important;
                    flex-direction: column !important;
                }

                /* Тело плеера */
                #player-modal .player-modal__body {
                    display: flex !important;
                    flex-direction: column !important;
                    /* Видео сверху, чат снизу */
                    flex: 1;
                    overflow: hidden;
                }

                /* Видео контейнер */
                #youtube-player-container {
                    width: 100% !important;
                    height: 35vh !important;
                    /* 35% высоты экрана */
                    flex-shrink: 0;
                    background: black;
                }

                /* Сайдбар (Чат и участники) */
                #watch-party-sidebar {
                    width: 100% !important;
                    height: auto !important;
                    flex-grow: 1;
                    /* Занимает всё оставшееся место */
                    min-width: 0 !important;
                    border-left: none !important;
                    border-top: 1px solid var(--border-primary);
                    display: flex !important;
                    flex-direction: column !important;
                }

                /* Скрываем ресайзер */
                #player-resizer-handle {
                    display: none !important;
                }

                /* Хедер плеера */
                .player-modal__header {
                    cursor: default !important;
                    /* Отключаем курсор перетаскивания */
                }

                /* --- 7. ПЛАВАЮЩИЙ ВИДЖЕТ (Мини-плеер) --- */
                #player-widget {
                    width: 60px !important;
                    height: 60px !important;
                    border-radius: 50% !important;
                    top: auto !important;
                    left: auto !important;
                    bottom: 80px !important;
                    /* Над нижним меню */
                    right: 20px !important;
                    position: fixed !important;
                    z-index: 5000 !important;
                }

                /* --- 8. НИЖНЕЕ МЕНЮ --- */
                #mobile-bottom-nav {
                    display: flex !important;
                    z-index: 2000;
                }

                /* Скрываем меню, когда открыт чат */
                body.chat-open #mobile-bottom-nav {
                    display: none !important;
                }
            }

            /* ======================================================= */
            /* 🚑 EMERGENCY MOBILE FIX (LAYER & BUTTON)                */
            /* Вставить в самый конец style.css                        */
            /* ======================================================= */
            #chat-placeholder @media screen and (max-width: 768px) {

                /* 1. ОТКРЕПЛЯЕМ ЧАТ ОТ СПИСКА */
                /* Теперь он не "сосед", а "верхний слой" */
                #chat-view {
                    position: fixed !important;
                    /* Важно: fixed, а не absolute */
                    top: 0;
                    left: 0;
                    width: 100vw !important;
                    height: 100dvh !important;
                    z-index: 9999 !important;
                    /* Поверх всего */
                    background-color: var(--bg-primary) !important;

                    /* Логика анимации */
                    transform: translateX(100%);
                    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
                    flex-direction: column;
                }

                /* Когда активен - выезжает на экран */
                #chat-view.mobile-active {
                    transform: translateX(0) !important;
                }

                /* 2. ЗАСТАВЛЯЕМ КНОПКУ "НАЗАД" ПОЯВИТЬСЯ */
                .mobile-back-btn {
                    display: flex !important;
                    /* Было none, стало flex */
                    align-items: center;
                    justify-content: center;
                    width: 40px;
                    height: 40px;
                    margin-right: 8px;
                    cursor: pointer;
                    background: transparent;
                    border: none;
                    color: var(--text-primary);
                    z-index: 10000;
                }

                .mobile-back-btn i {
                    width: 24px;
                    height: 24px;
                }

                /* 3. ФИКС ХЕДЕРА, ЧТОБЫ КНОПКА ВЛЕЗЛА */
                .chat-view__header {
                    padding-left: 5px !important;
                    /* Уменьшаем отступ слева */
                }

                /* 4. СПИСОК ЧАТОВ ОСТАЕТСЯ ПОД НИЗОМ */
                #center-panel {
                    display: flex !important;
                    width: 100vw !important;
                    height: 100dvh !important;
                }
            }

            /* ======================================================= */
            /* 📱 NEKO MOBILE FINAL FIX (OVERLAY MODE)                 */
            /* Вставить в САМЫЙ КОНЕЦ style.css                        */
            /* ======================================================= */

            @media screen and (max-width: 768px) {

                /* 1. РОДИТЕЛЬ ЧАТА (Правая панель) */
                /* Делаем его прозрачным и пропускающим клики, чтобы не мешал */
                #right-view {
                    position: fixed !important;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    z-index: 50;
                    display: block !important;
                    background: transparent !important;
                    pointer-events: none;
                    /* Пропускаем клики сквозь него */
                    border: none !important;
                }

                /* 2. САМ ЧАТ (Выезжающая панель) */
                #chat-view {
                    position: fixed !important;
                    /* Вырываем из потока Flexbox */
                    top: 0 !important;
                    left: 0 !important;
                    width: 100vw !important;
                    height: 100dvh !important;
                    /* На весь экран */

                    background-color: #0f172a !important;
                    /* Ваш темный цвет фона */
                    z-index: 99999 !important;
                    /* Выше всего на свете */

                    flex-direction: column !important;

                    /* Начальное состояние: сдвинут ВПРАВО за экран */
                    transform: translate3d(100%, 0, 0) !important;
                    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) !important;

                    pointer-events: auto !important;
                    /* Включаем клики */
                    opacity: 1 !important;
                    visibility: visible !important;
                }

                /* Когда активен — возвращаем на экран */
                #chat-view.mobile-active {
                    transform: translate3d(0, 0, 0) !important;
                }

                /* 3. КНОПКА "НАЗАД" */
                .mobile-back-btn {
                    display: flex !important;
                    width: 40px;
                    height: 40px;
                    align-items: center;
                    justify-content: center;
                    background: transparent;
                    border: none;
                    color: white;
                    cursor: pointer;
                    z-index: 100000;
                    /* Выше чата */
                    margin-right: 5px;
                }

                /* 4. СПИСОК ЧАТОВ */
                #center-panel {
                    width: 100% !important;
                    min-width: 0 !important;
                    z-index: 1;
                    /* Ниже чата */
                }

                /* 5. СКРЫВАЕМ ЛИШНЕЕ */
                #left-panel,
                .panel-resizer {
                    display: none !important;
                }
            }

            /* ======================================================= */
            /* 🚑 NEKO ULTIMATE MOBILE FIX (Z-INDEX OVERRIDE)          */
            /* Вставить в самый конец style.css                        */
            /* ======================================================= */

            @media screen and (max-width: 768px) {

                /* 1. СПИСОК ЧАТОВ (Нижний слой) */
                #center-panel {
                    position: absolute !important;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    z-index: 1 !important;
                }

                /* 2. КОНТЕЙНЕР ЧАТА (Прослойка) */
                #right-view {
                    position: fixed !important;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    z-index: 50 !important;
                    pointer-events: none;
                    /* Пропускаем клики сквозь прозрачные части */
                    background: transparent !important;
                    border: none !important;
                }

                /* 3. САМ ЧАТ (Верхний слой) */
                #chat-view {
                    position: fixed !important;
                    top: 0;
                    left: 0;
                    width: 100vw !important;
                    height: 100dvh !important;
                    z-index: 99999 !important;
                    /* ПОВЕРХ ВСЕГО */
                    background-color: #0f172a !important;
                    /* Цвет фона твоего приложения */

                    flex-direction: column !important;

                    /* Анимация выезда */
                    transform: translate3d(100%, 0, 0) !important;
                    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;

                    opacity: 1 !important;
                    visibility: visible !important;
                    pointer-events: auto !important;
                    /* Включаем клики */
                }

                /* Активное состояние (когда чат открыт) */
                #chat-view.mobile-active {
                    transform: translate3d(0, 0, 0) !important;
                }

                /* Скрываем нижнее меню, когда открыт чат */
                body.chat-open #mobile-bottom-nav {
                    display: none !important;
                }

                /* Кнопка НАЗАД */
                .mobile-back-btn {
                    display: flex !important;
                    z-index: 100000 !important;
                    cursor: pointer;
                }
            }

            /* ==========================================
   ✨ NEKO CHECKBOX (исправленное позиционирование)
   ========================================== */

            /* Контейнер сообщения должен иметь position relative в режиме выбора */
            #chat-view.select-mode-active .message-wrapper {
                position: relative;
                transition: all 0.2s ease;
                padding-left: 48px;
                /* Место для чекбокса */
                min-height: 40px;
            }

            /* Сам чекбокс - теперь внутри, а не снаружи */
            .neko-checkbox {
                position: absolute;
                left: 12px;
                /* Фиксированный отступ от левого края */
                top: 50%;
                transform: translateY(-50%);
                width: 22px;
                height: 22px;
                border: 2px solid rgba(255, 255, 255, 0.3);
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                color: transparent;
                transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
                cursor: pointer;
                background: rgba(0, 0, 0, 0.2);
                z-index: 10;
                flex-shrink: 0;
            }

            .neko-checkbox i {
                width: 12px;
                height: 12px;
                stroke-width: 3;
            }

            /* Активное состояние чекбокса */
            .neko-checkbox.checked {
                background: #a8ff78;
                border-color: #a8ff78;
                color: #000;
                transform: translateY(-50%) scale(1.1);
                box-shadow: 0 0 10px rgba(168, 255, 120, 0.4);
            }

            /* Выделенное сообщение */
            .message-wrapper--selected {
                /* Убираем фон и блюр с обертки, чтобы они не наслаивались при выделении подряд идущих сообщений */
                background-color: transparent !important;
                backdrop-filter: none !important;
                -webkit-backdrop-filter: none !important;
                border: none !important;
                box-shadow: none !important;
                z-index: 10;
            }

            .message-wrapper--selected .message,
            .message-wrapper--selected .message__bubble {
                transform: scale(0.98);
                opacity: 1;
                /* Делаем чуть темнее как при поиске */
                filter: brightness(0.85) !important;
            }

            /* ==========================================
   📱 Мобильная адаптация (исправленная)
   ========================================== */
            @media screen and (max-width: 768px) {
                .message-wrapper {
                    padding-left: 40px;
                    /* Меньше отступ на мобильном */
                }

                .neko-checkbox {
                    left: 8px;
                    /* Ближе к краю */
                    width: 20px;
                    height: 20px;
                }

                .neko-checkbox i {
                    width: 10px;
                    height: 10px;
                }

                /* Панель выделения компактнее */
                .neko-selection-bar {
                    height: 52px;
                    padding: 0 12px;
                }

                .selection-btn {
                    width: 38px;
                    height: 38px;
                }

                .selection-count {
                    width: 22px;
                    height: 22px;
                    font-size: 11px;
                }
            }

            /* Обертка для всей строки */
            .device-select-wrapper {
                display: flex;
                align-items: center;
                cursor: pointer;
                transition: background-color 0.2s ease;
                width: 100%;
            }

            /* Иконка слева */
            .device-icon {
                margin-right: 16px;
                display: flex;
                align-items: center;
                color: #a0a0a0;
                /* Цвет иконок под твою тему */
            }

            /* Блок с текстами */
            .device-info {
                display: flex;
                flex-direction: column;
                flex-grow: 1;
                overflow: hidden;
                /* Чтобы длинные названия не ломали верстку */
            }

            /* Название настройки (Микрофон/Камера) */
            .info-list-item-grouped__label {
                font-size: 16px;
                font-weight: 500;
                margin-bottom: 2px;
            }

            /* Сам выпадающий список */
            .device-select {
                background: transparent;
                border: none;
                color: #a0a0a0;
                /* Серый цвет для выбранного устройства */
                font-size: 14px;
                padding: 0;
                margin: 0;
                outline: none;
                cursor: pointer;
                width: 100%;
                text-overflow: ellipsis;
                /* Убираем стандартную системную стрелку, мы нарисовали свою красивую */
                -webkit-appearance: none;
                -moz-appearance: none;
                appearance: none;
            }

            /* Цвет опций в списке (для темной темы) */
            .device-select option {
                background: #222;
                color: #fff;
            }

            /* Наша красивая стрелочка справа */
            .device-chevron {
                color: #666;
                margin-left: 8px;
                display: flex;
                align-items: center;
            }

            /* =========================================
   Режим без интернета (Только чтение)
   ========================================= */

            body.offline-mode #watch-party-chat-input,
            body.offline-mode #chat-search-input,
            body.offline-mode textarea,
            body.offline-mode input {
                background-color: var(--bg-tertiary);
                opacity: 0.6;
                cursor: not-allowed;
            }

            body.offline-mode .send-button,
            body.offline-mode .icon-button[data-action="send-forwarded"],
            body.offline-mode .avatar-uploader,
            body.offline-mode .theme-file-button {
                opacity: 0.4;
                pointer-events: none;
                /* Запрещает любые клики */
                filter: grayscale(100%);
            }

            /* Плашка, предупреждающая об оффлайне (можно прикрутить в header) */
            body.offline-mode::before {
                content: "Нет подключения к сети. Режим чтения.";
                display: block;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                background-color: #ef4444;
                color: white;
                text-align: center;
                padding: 8px;
                font-size: 14px;
                font-weight: 600;
                z-index: 2147483647;
            }

            /* TYPING INDICATOR — SMS-пузырёк без хвостика + 3 прыгающие точки */

            /* Убиваем любые старые элементы */
            #typing-indicator-box,
            .typing-container,
            .neko-typing-indicator-wrapper,
            #neko-fake-typing-msg,
            #neko-alien-ghost,
            #neko-smart-typing,
            #neko-final-typing {
                display: none !important;
                opacity: 0 !important;
                visibility: hidden !important;
                height: 0 !important;
                width: 0 !important;
                pointer-events: none !important;
                position: absolute !important;
                overflow: hidden !important;
                margin: 0 !important;
                padding: 0 !important;
            }

            /* Контейнер */
            #neko-typing-bubble {
                position: absolute;
                bottom: 72px;
                left: 0;
                right: 0;
                display: flex;
                justify-content: flex-start;
                padding: 0 16px;
                z-index: 999;
                pointer-events: none;
                opacity: 0;
                transform: translateY(8px);
                transition: opacity 0.25s ease, transform 0.25s ease;
            }

            #neko-typing-bubble.neko-visible {
                opacity: 1;
                transform: translateY(0);
            }

            /* Ряд: аватарка + пузырёк */
            .neko-tb-row {
                display: flex;
                align-items: flex-end;
                gap: 10px;
            }

            /* Аватарка */
            .neko-tb-ava {
                width: 32px;
                height: 32px;
                border-radius: 50%;
                object-fit: cover;
                background: #374151;
                border: 1.5px solid rgba(255, 255, 255, 0.08);
                flex-shrink: 0;
            }

            .neko-tb-ava-letter {
                width: 32px;
                height: 32px;
                border-radius: 50%;
                background: #374151;
                color: #fff;
                display: none;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
                font-weight: 600;
                font-size: 14px;
                border: 1.5px solid rgba(255, 255, 255, 0.08);
            }

            /* Пузырёк: как обычное входящее SMS, без хвостика */
            .neko-tb-sms {
                background: #262d31;
                border-radius: 20px;
                padding: 10px 18px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                box-sizing: border-box;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
                filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
            }

            /* Точки */
            .neko-tb-dots {
                display: flex;
                align-items: center;
                gap: 5px;
                height: 20px;
            }

            .neko-tb-dot {
                width: 8px;
                height: 8px;
                background: #94a3b8;
                border-radius: 50%;
                animation: nekoTbBounce 1.4s infinite ease-in-out both;
            }

            .neko-tb-dot:nth-child(1) {
                animation-delay: 0s;
            }

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

            .neko-tb-dot:nth-child(3) {
                animation-delay: 0.32s;
            }

            /* Анимация: прыжок вверх + смена цвета */
            @keyframes nekoTbBounce {

                0%,
                80%,
                100% {
                    transform: translateY(0);
                    background-color: #94a3b8;
                }

                40% {
                    transform: translateY(-8px);
                    background-color: #a8ff78;
                }
            }

            /* Мобильная версия */
            @media screen and (max-width: 768px) {
                #neko-typing-bubble {
                    bottom: 62px;
                    padding: 0 10px;
                }

                .neko-tb-sms {
                    padding: 8px 14px;
                }

                .neko-tb-ava,
                .neko-tb-ava-letter {
                    width: 28px;
                    height: 28px;
                }
            }