/* ============================================================
   GCGo Мессенджер — CSS патчи для всех 7 функций
   Добавьте в ваш основной CSS файл или в <style> в index.php
   ============================================================ */

/* ========================
   1. Заметки в профиле
   ======================== */
.profile-note-block {
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 12px 14px;
    margin: 12px 0;
}

.profile-note-block h4 {
    margin: 0 0 8px 0;
    font-size: 0.9em;
    color: #666;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.profile-note-block textarea {
    width: 100%;
    min-height: 80px;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 8px;
    font-size: 0.95em;
    resize: vertical;
    box-sizing: border-box;
    font-family: inherit;
}

.note-collapsed .profile-note-content {
    display: none;
}

.profile-note-toggle {
    background: none;
    border: none;
    color: #4a90e2;
    cursor: pointer;
    font-size: 0.85em;
    padding: 2px 0;
    margin-bottom: 8px;
    display: block;
}

.profile-note-save {
    background: #4a90e2;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 6px 16px;
    cursor: pointer;
    font-size: 0.9em;
    margin-top: 6px;
}

.profile-note-save:hover {
    background: #357abd;
}

/* ========================
   2. Приватность профиля
   ======================== */
.profile-private {
    opacity: 0.55;
    filter: grayscale(40%);
}

/* ========================
   3. Компактный аудиоплеер
   ======================== */
.gcgo-audio-player {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f0f4ff;
    border-radius: 24px;
    padding: 6px 12px 6px 8px;
    max-width: 260px;
    min-width: 180px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.audio-play-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #4a90e2;
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s;
}

.audio-play-btn:hover {
    background: #357abd;
}

.audio-progress-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.audio-progress-bar {
    height: 4px;
    background: #d0d8ea;
    border-radius: 2px;
    cursor: pointer;
    position: relative;
}

.audio-progress-fill {
    height: 100%;
    background: #4a90e2;
    border-radius: 2px;
    width: 0%;
    transition: width 0.1s linear;
}

.audio-time {
    font-size: 0.75em;
    color: #888;
    white-space: nowrap;
}

/* ========================
   4. Запись звонка в чате
   ======================== */
.call-record {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 18px;
    font-size: 0.9em;
    font-weight: 500;
    max-width: 260px;
}

.call-record .call-icon {
    font-size: 1.1em;
    flex-shrink: 0;
}

.call-ended {
    background: #e8f5e9;
    color: #2e7d32;
}

.call-missed {
    background: #fdecea;
    color: #c62828;
}

.call-declined {
    background: #fff3e0;
    color: #e65100;
}

/* ========================
   5. Сворачивание сообщений
   ======================== */
.msg-collapse-btn {
    cursor: pointer;
    color: #4a90e2;
    font-size: 0.88em;
}

.msg-collapse-btn:hover {
    text-decoration: underline;
}

/* ========================
   6. Настройка черновика — в блоке настроек
   ======================== */
.setting-save-draft {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-top: 1px solid #f0f0f0;
    margin-top: 8px;
}

.setting-save-draft label {
    cursor: pointer;
    font-size: 0.95em;
    color: #333;
}

.setting-save-draft input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* ========================
   7. Публичный профиль — полный редизайн
   ======================== */

/* Обёртка страницы */
.pub-profile-page {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 100vh;
    background: #f0f2f5;
    padding-bottom: 40px;
}

/* ---- Hero-блок (аватар + имя + кнопка) ---- */
.pub-profile-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(160deg, #4a90e2 0%, #357abd 100%);
    padding: 52px 20px 32px;
    color: #fff;
    text-align: center;
}

.pub-profile-back-btn {
    position: absolute;
    top: 14px;
    left: 14px;
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,0.22);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
    text-decoration: none;
    line-height: 1;
    backdrop-filter: blur(4px);
    transition: background 0.15s;
}

.pub-profile-back-btn:hover { background: rgba(255,255,255,0.35); }

/* Аватар */
.pub-profile-avatar-wrap {
    position: relative;
    display: inline-block;
    margin-bottom: 14px;
}

.pub-profile-avatar {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid rgba(255,255,255,0.6);
    box-shadow: 0 6px 24px rgba(0,0,0,0.22);
}

.pub-profile-dot {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 3px solid #4a90e2;
}

.pub-profile-dot.online  { background: #4cde7f; }
.pub-profile-dot.offline { background: #b0b8c1; }

/* Имя */
.pub-profile-name {
    margin: 0 0 6px;
    font-size: 1.55em;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.01em;
}

/* Бейдж статуса */
.pub-profile-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.82em;
    font-weight: 600;
    border-radius: 20px;
    padding: 3px 12px;
    margin-bottom: 18px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.pub-profile-status-badge::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
}

.pub-profile-status-badge.online  { background: rgba(255,255,255,0.22); color: #d4ffe6; }
.pub-profile-status-badge.online::before  { background: #4cde7f; }
.pub-profile-status-badge.offline { background: rgba(0,0,0,0.15); color: rgba(255,255,255,0.7); }
.pub-profile-status-badge.offline::before { background: rgba(255,255,255,0.4); }

/* Кнопка «Написать» */
.pub-profile-msg-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 11px 26px;
    background: #fff;
    color: #4a90e2;
    border-radius: 50px;
    text-decoration: none;
    font-size: 0.95em;
    font-weight: 700;
    box-shadow: 0 4px 16px rgba(0,0,0,0.14);
    transition: transform 0.12s, box-shadow 0.12s;
}

.pub-profile-msg-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.18);
}

/* ---- Секции (сторис / галерея / группы) ---- */
.pub-profile-sections {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
}

.pub-section {
    background: #fff;
    border-radius: 18px;
    padding: 18px 16px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

.pub-section-title {
    font-size: 0.8em;
    font-weight: 700;
    color: #8a99aa;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 14px;
}

/* Сторис */
.pub-stories-bar {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
}

.pub-stories-bar::-webkit-scrollbar { display: none; }

.pub-story-thumb {
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #4a90e2;
    cursor: pointer;
    background: #e8edf2;
    transition: opacity 0.15s;
}

.pub-story-thumb:hover { opacity: 0.85; }

.pub-story-thumb img,
.pub-story-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Галерея */
.pub-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}

.pub-gallery-grid img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 8px;
    cursor: zoom-in;
    transition: opacity 0.15s;
}

.pub-gallery-grid img:hover { opacity: 0.88; }

/* Мобильная галерея профиля: растянуть до краёв экрана (как в Instagram) */
@media (max-width: 600px) {
    .pub-profile-sections {
        padding-left: 0;
        padding-right: 0;
    }

    #pubGallerySection {
        border-radius: 0;
        padding: 0;
        box-shadow: none;
        background: #000;
    }

    #pubGallerySection .pub-section-title {
        padding: 14px 16px 12px;
        margin-bottom: 0;
        background: #fff;
    }

    .pub-gallery-grid {
        gap: 2px;
    }

    .pub-gallery-grid img {
        border-radius: 0;
    }
}

/* Группы */
.pub-groups-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pub-group-item a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 8px;
    border-radius: 10px;
    text-decoration: none;
    color: #1a1a2e;
    font-size: 0.97em;
    font-weight: 500;
    transition: background 0.12s;
}

.pub-group-item a:hover { background: #f0f4fa; }

.pub-group-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: #e8f0fb;
    color: #4a90e2;
    border-radius: 10px;
    font-size: 1.1em;
    font-weight: 700;
    flex-shrink: 0;
}

/* Лайтбокс */
.pub-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.88);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
}

.pub-lightbox img {
    max-width: 94vw;
    max-height: 92vh;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}

/* Story modal (публичный профиль) */
.pub-story-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.92);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.pub-story-modal img,
.pub-story-modal video {
    max-width: 96vw;
    max-height: 92vh;
    border-radius: 12px;
}

/* Скрытый профиль */
.pub-profile-locked {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: #f0f2f5;
    padding: 20px;
    position: relative;
}

.pub-profile-locked-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}

.pub-profile-lock-icon { font-size: 3.5em; }

.pub-profile-lock-text {
    color: #888;
    font-size: 1.05em;
    margin: 0;
}

/* ---- Ссылка на профиль в шапке чата — без черты ---- */
.chat-user-name-link {
    text-decoration: none !important;
    color: inherit;
    font-weight: inherit;
    font-size: inherit;
    border-bottom: none !important;
    outline: none;
}

.chat-user-name-link:hover,
.chat-user-name-link:focus,
.chat-user-name-link:active {
    text-decoration: none !important;
    color: inherit;
    border-bottom: none !important;
}

/* ========================
   8. Перенос длинных сообщений + ограничение ширины
   ======================== */

/* Контейнер чата — запрещаем горизонтальный выход за края */
.messages-box {
    overflow-x: hidden;
}

/* Любое слово / длинная ссылка не вылезает за пределы */
.msg-bubble,
.msg-text {
    overflow-wrap: break-word;
    word-break:    break-word;
    word-wrap:     break-word;
    min-width: 0;
}

/* На мобильных пузырёк ограничен 85% ширины чата (наследуется от .msg) */
.msg-bubble {
    max-width: 100%; /* не выходит за .msg */
    overflow: hidden; /* фото не вылезают за границы на любом мобильном браузере */
}

/* На широком экране жёсткий предел ширины пузырька */
@media (min-width: 600px) {
    .msg {
        max-width: 72%; /* чуть уже, чтобы было аккуратнее */
    }

    .msg-bubble {
        max-width: 560px; /* абсолютный предел — не шире 560 px */
    }
}

/* Текст внутри аудио-плеера тоже не вылезает */
.gcgo-audio-player {
    max-width: 100%;
    box-sizing: border-box;
}

/* ========================
   9. Цветные эмодзи в панели
   ======================== */

/* Twemoji — цветные SVG-эмодзи в панели */
.emoji-list span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.emoji-list img.emoji {
    width: 26px !important;
    height: 26px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    vertical-align: middle;
    pointer-events: none;
    display: block;
}

/* ========================
   10. Единый стиль кнопок под чатом
   ======================== */

/* Базовый «призрачный» стиль для иконочных кнопок */
.emoji-btn,
.voice-btn,
.video-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px;
    border-radius: 50% !important;
    border: none !important;
    background: #f0f2f5 !important;
    color: #555 !important;
    font-size: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.emoji-btn:hover,
.voice-btn:hover,
.video-btn:hover {
    background: #e2e5ea !important;
    transform: none !important;
}

.emoji-btn:active,
.voice-btn:active,
.video-btn:active {
    transform: scale(0.92) !important;
    background: #d8dbe0 !important;
}

/* Состояние записи — голосовое: мягкий красный */
.voice-btn.recording {
    background: #fde8e8 !important;
    color: #d93025 !important;
    animation: pulse-record 1.2s ease-in-out infinite !important;
}

/* Состояние записи — видео: тот же мягкий красный */
.video-btn.recording {
    background: #fde8e8 !important;
    color: #d93025 !important;
    animation: pulse-record 1.2s ease-in-out infinite !important;
}

@keyframes pulse-record {
    0%, 100% { box-shadow: 0 0 0 0 rgba(217, 48, 37, 0.3); }
    50%       { box-shadow: 0 0 0 6px rgba(217, 48, 37, 0); }
}

/* Кнопка отправки — синяя, чуть скруглённее и современнее */
.send-btn {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    border: none !important;
    background: #4a90e2 !important;
    color: #fff !important;
    font-size: 17px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s !important;
    box-shadow: 0 2px 8px rgba(74, 144, 226, 0.35) !important;
}

.send-btn:hover  { background: #357abd !important; box-shadow: 0 4px 12px rgba(74,144,226,0.4) !important; }
.send-btn:active { transform: scale(0.92) !important; }

/* Кнопка прикрепления — нейтральная, в одну линию с остальными */
.attach-btn {
    height: 40px !important;
    padding: 0 12px !important;
    border-radius: 20px !important;
    background: #f0f2f5 !important;
    font-size: 18px !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    transition: background 0.15s !important;
}

.attach-btn:hover { background: #e2e5ea !important; }

/* Контейнер кнопок — убираем лишние промежутки и выравниваем */
.chat-actions {
    gap: 8px !important;
    align-items: center !important;
    padding: 4px 0 !important;
    margin-top: 6px !important;
}

/* ========================
   11. ТЕМЫ ОФОРМЛЕНИЯ
   ======================== */

/* --- UI выбора темы в настройках --- */
.theme-selector-block {
    margin: 18px 0 10px;
    padding: 14px;
    background: #f8f9fa;
    border-radius: 12px;
    border: 1px solid #e5e5e5;
}
.theme-selector-block h4 {
    margin: 0 0 12px;
    font-size: 15px;
    color: #333;
}
.theme-options {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.theme-btn {
    flex: 1;
    min-width: 70px;
    padding: 10px 6px !important;
    border-radius: 10px !important;
    border: 2px solid #ddd !important;
    background: #fff !important;
    color: #333 !important;
    font-size: 13px !important;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.2s, box-shadow 0.2s;
    width: auto !important;
    margin: 0 !important;
}
.theme-btn:hover { border-color: #4a90e2 !important; }
.theme-btn.active {
    border-color: #4a90e2 !important;
    box-shadow: 0 0 0 3px rgba(74,144,226,.2) !important;
}
.theme-preview {
    display: block;
    width: 100%;
    height: 36px;
    border-radius: 6px;
    margin-bottom: 6px;
    border: 1px solid #ddd;
}
.theme-custom-pickers {
    display: none;
    margin-top: 12px;
    padding: 12px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #ddd;
    gap: 10px;
    flex-wrap: wrap;
}
.theme-custom-pickers label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #555;
    white-space: nowrap;
}
.theme-custom-pickers input[type="color"] {
    width: 36px !important;
    height: 30px !important;
    padding: 2px !important;
    border-radius: 6px !important;
    border: 1px solid #ddd !important;
    cursor: pointer;
    margin: 0 !important;
}

/* ===== ТЁМНАЯ ТЕМА ===== */
html.theme-dark body { background: #1c1c1e !important; color: #f2f2f7 !important; }

html.theme-dark .user-list a,
html.theme-dark .user-card { background: #2c2c2e !important; color: #f2f2f7 !important; border-color: #3a3a3c !important; }
html.theme-dark .user-list a:hover,
html.theme-dark .user-card:hover { background: #3a3a3c !important; }
html.theme-dark .user-link { color: #f2f2f7 !important; }
html.theme-dark .user-link:hover { background: rgba(255,255,255,.08) !important; }

html.theme-dark .messages-box { background: #111113 !important; }
html.theme-dark .msg-other .msg-bubble { background: #2c2c2e !important; color: #f2f2f7 !important; }
html.theme-dark .msg-me .msg-bubble { background: #0a84ff !important; color: #fff !important; }
html.theme-dark .msg-meta { color: #98989e !important; }
html.theme-dark .msg-me .msg-meta { color: rgba(255,255,255,.65) !important; }
html.theme-dark .msg-forwarded { color: #98989e !important; }
html.theme-dark .msg-reply { background: rgba(255,255,255,.08) !important; border-color: #0a84ff !important; color: #ccc !important; }

html.theme-dark .chat-header { background: #2c2c2e !important; border-color: #3a3a3c !important; }
html.theme-dark .chat-user-name { color: #f2f2f7 !important; }
html.theme-dark .chat-status { color: #98989e !important; }
html.theme-dark .chat-input { background: #1c1c1e !important; border-color: #3a3a3c !important; }
html.theme-dark .chat-form textarea { background: #2c2c2e !important; color: #f2f2f7 !important; border-color: #48484a !important; }
html.theme-dark .chat-form textarea::placeholder { color: #636366 !important; }
html.theme-dark .reply-preview { background: #2c2c2e !important; border-color: #3a3a3c !important; color: #f2f2f7 !important; }
html.theme-dark #typing-indicator { color: #98989e !important; }

html.theme-dark .chat-search input { background: #2c2c2e !important; color: #f2f2f7 !important; border-color: #3a3a3c !important; }
html.theme-dark .chat-back-btn { background: #2c2c2e !important; color: #0a84ff !important; }
html.theme-dark .voice-btn,
html.theme-dark .video-btn,
html.theme-dark .emoji-btn { background: #2c2c2e !important; color: #8e8e93 !important; }
html.theme-dark .voice-btn:hover,
html.theme-dark .video-btn:hover,
html.theme-dark .emoji-btn:hover { background: #3a3a3c !important; }
html.theme-dark .gcgo-schedule-btn { background: #2c2422 !important; color: #ff9800 !important; }
html.theme-dark .gcgo-schedule-btn:hover { background: #3a2e20 !important; }
html.theme-dark .gcgo-greet-btn { background: #2c1f24 !important; color: #f48fb1 !important; }
html.theme-dark .gcgo-greet-btn:hover { background: #3a2530 !important; }

html.theme-dark .emoji-panel { background: #2c2c2e !important; border-color: #3a3a3c !important; }
html.theme-dark .emoji-search { background: #3a3a3c !important; color: #f2f2f7 !important; border-color: #48484a !important; }
html.theme-dark .emoji-list span:hover { background: #48484a !important; }

html.theme-dark h2, html.theme-dark h3, html.theme-dark h4 { color: #f2f2f7 !important; }
html.theme-dark label { color: #d1d1d6 !important; }
html.theme-dark input[type="text"],
html.theme-dark input[type="password"],
html.theme-dark select { background: #2c2c2e !important; color: #f2f2f7 !important; border-color: #3a3a3c !important; }

html.theme-dark .form-group { border-color: #3a3a3c; }
html.theme-dark .profile-save-btn { background: #0a84ff !important; }
html.theme-dark .back-btn { color: #0a84ff !important; }

html.theme-dark .profile-note-block { background: #2c2c2e !important; border-color: #3a3a3c !important; }
html.theme-dark #profileNoteText { background: #1c1c1e !important; color: #f2f2f7 !important; border-color: #3a3a3c !important; }

html.theme-dark .modal-window { background: #2c2c2e !important; color: #f2f2f7 !important; }
html.theme-dark .modal-overlay { background: rgba(0,0,0,.7) !important; }
html.theme-dark .modal-users .user-card { background: #3a3a3c !important; color: #f2f2f7 !important; }
html.theme-dark .modal-header { border-color: #3a3a3c !important; }

html.theme-dark #galleryModal { background: #1c1c1e !important; color: #f2f2f7 !important; }
html.theme-dark .gallery-header { border-color: #3a3a3c !important; color: #f2f2f7 !important; }
html.theme-dark .gallery-upload { border-color: #3a3a3c !important; }

html.theme-dark .theme-selector-block { background: #2c2c2e !important; border-color: #3a3a3c !important; }
html.theme-dark .theme-selector-block h4 { color: #f2f2f7 !important; }
html.theme-dark .theme-btn { background: #3a3a3c !important; color: #f2f2f7 !important; border-color: #48484a !important; }
html.theme-dark .theme-custom-pickers { background: #3a3a3c !important; border-color: #48484a !important; }
html.theme-dark .theme-custom-pickers label { color: #d1d1d6 !important; }
html.theme-dark .unread-badge { background: #ff453a !important; }

/* ===== AMOLED ТЕМА ===== */
html.theme-amoled body { background: #000 !important; color: #fff !important; }

html.theme-amoled .user-list a,
html.theme-amoled .user-card { background: #000 !important; color: #fff !important; border: 1px solid #1a1a1a !important; }
html.theme-amoled .user-list a:hover,
html.theme-amoled .user-card:hover { background: #111 !important; }
html.theme-amoled .user-link { color: #fff !important; }
html.theme-amoled .user-link:hover { background: rgba(255,255,255,.06) !important; }

html.theme-amoled .messages-box { background: #000 !important; }
html.theme-amoled .msg-other .msg-bubble { background: #111 !important; color: #fff !important; }
html.theme-amoled .msg-me .msg-bubble { background: #1a73e8 !important; color: #fff !important; }
html.theme-amoled .msg-meta { color: #555 !important; }
html.theme-amoled .msg-me .msg-meta { color: rgba(255,255,255,.55) !important; }
html.theme-amoled .msg-reply { background: rgba(255,255,255,.05) !important; border-color: #1a73e8 !important; color: #aaa !important; }

html.theme-amoled .chat-header { background: #000 !important; border-color: #1a1a1a !important; }
html.theme-amoled .chat-user-name { color: #fff !important; }
html.theme-amoled .chat-status { color: #555 !important; }
html.theme-amoled .chat-input { background: #000 !important; border-color: #1a1a1a !important; }
html.theme-amoled .chat-form textarea { background: #111 !important; color: #fff !important; border-color: #222 !important; }
html.theme-amoled .chat-form textarea::placeholder { color: #444 !important; }
html.theme-amoled .reply-preview { background: #111 !important; border-color: #222 !important; color: #ddd !important; }
html.theme-amoled #typing-indicator { color: #555 !important; }

html.theme-amoled .chat-search input { background: #111 !important; color: #fff !important; border-color: #222 !important; }
html.theme-amoled .chat-back-btn { background: #111 !important; color: #1a73e8 !important; }
html.theme-amoled .voice-btn,
html.theme-amoled .video-btn,
html.theme-amoled .emoji-btn { background: #111 !important; color: #555 !important; }
html.theme-amoled .voice-btn:hover,
html.theme-amoled .video-btn:hover,
html.theme-amoled .emoji-btn:hover { background: #1a1a1a !important; }
html.theme-amoled .gcgo-schedule-btn { background: #1a1200 !important; color: #ff9800 !important; }
html.theme-amoled .gcgo-schedule-btn:hover { background: #251a00 !important; }
html.theme-amoled .gcgo-greet-btn { background: #1a0a11 !important; color: #f48fb1 !important; }
html.theme-amoled .gcgo-greet-btn:hover { background: #250f19 !important; }

html.theme-amoled .emoji-panel { background: #111 !important; border-color: #222 !important; }
html.theme-amoled .emoji-search { background: #000 !important; color: #fff !important; border-color: #222 !important; }
html.theme-amoled .emoji-list span:hover { background: #222 !important; }

html.theme-amoled h2, html.theme-amoled h3, html.theme-amoled h4 { color: #fff !important; }
html.theme-amoled label { color: #ccc !important; }
html.theme-amoled input[type="text"],
html.theme-amoled input[type="password"],
html.theme-amoled select { background: #111 !important; color: #fff !important; border-color: #222 !important; }

html.theme-amoled .profile-save-btn { background: #1a73e8 !important; }
html.theme-amoled .back-btn { color: #1a73e8 !important; }
html.theme-amoled .profile-note-block { background: #111 !important; border-color: #222 !important; }
html.theme-amoled #profileNoteText { background: #000 !important; color: #fff !important; border-color: #222 !important; }
html.theme-amoled .modal-window { background: #111 !important; color: #fff !important; }
html.theme-amoled .modal-header { border-color: #222 !important; }
html.theme-amoled .modal-users .user-card { background: #1a1a1a !important; color: #fff !important; }
html.theme-amoled #galleryModal { background: #000 !important; color: #fff !important; }
html.theme-amoled .gallery-header { border-color: #1a1a1a !important; color: #fff !important; }
html.theme-amoled .gallery-upload { border-color: #1a1a1a !important; }

html.theme-amoled .theme-selector-block { background: #111 !important; border-color: #222 !important; }
html.theme-amoled .theme-selector-block h4 { color: #fff !important; }
html.theme-amoled .theme-btn { background: #111 !important; color: #fff !important; border-color: #222 !important; }
html.theme-amoled .theme-custom-pickers { background: #000 !important; border-color: #222 !important; }
html.theme-amoled .unread-badge { background: #e53935 !important; }

/* ===== КАСТОМНАЯ ТЕМА ===== */
html.theme-custom body { background: var(--c-bg, #f4f4f4) !important; color: var(--c-text, #111) !important; }
html.theme-custom .messages-box { background: var(--c-chat-bg, #f5f5f5) !important; }
html.theme-custom .msg-me .msg-bubble { background: var(--c-msg-me, #007bff) !important; color: var(--c-msg-me-text, #fff) !important; }
html.theme-custom .msg-other .msg-bubble { background: var(--c-msg-other, #fff) !important; color: var(--c-text, #111) !important; }
html.theme-custom .chat-header,
html.theme-custom .chat-input { background: var(--c-surface, #fff) !important; }
html.theme-custom .user-list a,
html.theme-custom .user-card { background: var(--c-surface, #fff) !important; color: var(--c-text, #111) !important; }
html.theme-custom .user-list a:hover { background: var(--c-hover, #f0f0f0) !important; }
html.theme-custom h2, html.theme-custom h3, html.theme-custom h4,
html.theme-custom label { color: var(--c-text, #111) !important; }
html.theme-custom .chat-form textarea { background: var(--c-surface, #fff) !important; color: var(--c-text, #111) !important; }

/* ===== РЕАКЦИИ НА СООБЩЕНИЯ ===== */

/* Плавающий пикер эмодзи */
/* Запрещаем нативный long-press (выделение текста/копирование) на пузырях сообщений —
   иначе браузер перехватывает жест и наш таймер не срабатывает */
.msg-bubble {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}
/* Текст внутри разрешаем выделять только на десктопе */
@media (hover: hover) and (pointer: fine) {
    .msg-bubble {
        -webkit-user-select: text;
        user-select: text;
    }
}

.reaction-picker {
    position: fixed !important;
    z-index: 99999 !important;
    background: #fff;
    border-radius: 32px;
    box-shadow: 0 6px 28px rgba(0,0,0,0.18), 0 1px 6px rgba(0,0,0,0.08);
    padding: 6px 8px;
    display: none;
    align-items: center;
    gap: 2px;
    border: 1px solid rgba(0,0,0,0.07);
}
.reaction-picker.visible {
    display: flex !important;
    animation: rpIn 0.22s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes rpIn {
    from { opacity: 0; transform: scale(0.65) translateY(12px); }
    to   { opacity: 1; transform: scale(1)    translateY(0); }
}
.reaction-picker button {
    background: none;
    border: none;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s cubic-bezier(.34,1.56,.64,1), background 0.12s;
}
.reaction-picker button:hover {
    transform: scale(1.45) translateY(-4px);
    background: rgba(0,0,0,0.05);
}
.reaction-picker button:active {
    transform: scale(0.9);
}

/* Полоска реакций под сообщением */
.reaction-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 3px 4px 0;
    min-height: 0;
}
.msg-me  .reaction-bar { justify-content: flex-end; }
.msg-other .reaction-bar { justify-content: flex-start; }

/* Бейдж одной реакции */
/* Уменьшенный emoji в блоках цитаты (reply-quote) */
.msg-reply img.emoji,
.gcgo-reply-quote img.emoji,
.msg-reply img.gcm-twemoji,
.gcgo-reply-quote img.gcm-twemoji {
    height: 14px !important;
    width: 14px !important;
    max-height: 14px !important;
    max-width: 14px !important;
    vertical-align: -2px !important;
}

.reaction-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: transparent;
    border: 1.5px solid rgba(0,0,0,0.0);
    border-radius: 14px;
    padding: 2px 8px 2px 5px;
    font-size: 13px;
    line-height: 1.3;
    cursor: pointer;
    user-select: none;
    transition: transform 0.15s, background 0.15s, border-color 0.15s;
    animation: badgeIn 0.28s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes badgeIn {
    from { opacity: 0; transform: scale(0.5); }
    to   { opacity: 1; transform: scale(1); }
}
.reaction-badge:hover { transform: scale(1.12); }
.reaction-badge:active { transform: scale(0.92); }

.reaction-badge.mine {
    background: rgba(0, 122, 255, 0.13);
    border-color: rgba(0, 122, 255, 0.45);
}
.reaction-badge .rbc {
    font-size: 11px;
    font-weight: 700;
    color: #555;
    min-width: 8px;
}
.msg-me .reaction-badge {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.0);
}
.msg-me .reaction-badge.mine {
    background: rgba(255,255,255,0.32);
    border-color: rgba(255,255,255,0.6);
}
.msg-me .reaction-badge .rbc { color: rgba(255,255,255,0.85); }

/* Летящий эмодзи */
.emoji-fly {
    position: fixed;
    pointer-events: none;
    font-size: 30px;
    z-index: 99999;
    animation: emojiFly 0.85s cubic-bezier(.22,1,.36,1) forwards;
    transform-origin: center bottom;
}
@keyframes emojiFly {
    0%   { opacity: 1;   transform: translateY(0)    scale(1);   }
    40%  { opacity: 1;   transform: translateY(-55px) scale(1.5); }
    100% { opacity: 0;   transform: translateY(-110px) scale(0.7); }
}

/* Тёмные темы */
html.theme-dark .reaction-picker,
html.theme-amoled .reaction-picker {
    background: #2c2c2e;
    border-color: rgba(255,255,255,0.08);
    box-shadow: 0 6px 28px rgba(0,0,0,0.55);
}
html.theme-dark .reaction-picker button:hover,
html.theme-amoled .reaction-picker button:hover { background: rgba(255,255,255,0.1); }

html.theme-dark .reaction-badge,
html.theme-amoled .reaction-badge { background: rgba(255,255,255,0.09); }
html.theme-dark .reaction-badge.mine,
html.theme-amoled .reaction-badge.mine { background: rgba(0,122,255,0.28); border-color: rgba(0,122,255,0.55); }
html.theme-dark .reaction-badge .rbc,
html.theme-amoled .reaction-badge .rbc { color: #bbb; }
html.theme-amoled .reaction-picker { background: #111; }

/* ===== ЧЁРНЫЙ СПИСОК ===== */

/* Кнопка блокировки в шапке */
.block-user-btn {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 8px;
    opacity: 0.55;
    transition: opacity 0.18s, background 0.18s;
    line-height: 1;
    flex-shrink: 0;
}
.block-user-btn:hover {
    opacity: 1;
    background: rgba(220, 50, 50, 0.10);
}
.block-user-btn.is-blocked {
    opacity: 0.9;
    background: rgba(0, 180, 80, 0.10);
}
.block-user-btn.is-blocked:hover {
    background: rgba(0, 180, 80, 0.18);
}

/* Баннер «заблокировано» вместо формы */
.blocked-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 18px;
    background: rgba(220, 50, 50, 0.07);
    border-top: 1px solid rgba(220, 50, 50, 0.18);
    font-size: 14px;
    color: #c0392b;
    flex-wrap: wrap;
}
.blocked-banner .blocked-icon {
    font-size: 20px;
    flex-shrink: 0;
}
.unblock-inline-btn {
    background: none;
    border: 1.5px solid currentColor;
    border-radius: 14px;
    padding: 3px 12px;
    font-size: 13px;
    cursor: pointer;
    color: #27ae60;
    transition: background 0.15s;
    white-space: nowrap;
}
.unblock-inline-btn:hover {
    background: rgba(39, 174, 96, 0.1);
}

/* Тёмные темы */
html.theme-dark .block-user-btn:hover,
html.theme-amoled .block-user-btn:hover { background: rgba(220, 50, 50, 0.18); }
html.theme-dark .block-user-btn.is-blocked,
html.theme-amoled .block-user-btn.is-blocked { background: rgba(0,180,80,0.15); }

html.theme-dark .blocked-banner,
html.theme-amoled .blocked-banner {
    background: rgba(220, 50, 50, 0.11);
    border-color: rgba(220, 50, 50, 0.25);
    color: #e07070;
}
html.theme-amoled .blocked-banner { background: rgba(200,0,0,0.13); }

/* ========================
   8. Транскрипция аудио
   ======================== */

/* Обёртка под плеером */
.gcgo-transcript {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 5px;
    width: 100%;
    box-sizing: border-box;
    min-height: 22px;
    text-align: center;
}

/* Кнопка «🔤 Распознать» */
.gcgo-transcribe-btn {
    flex-shrink: 0;
    background: none;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    padding: 2px 6px;
    font-size: 13px;
    cursor: pointer;
    color: var(--c-text, #555);
    line-height: 1.4;
    transition: background 0.15s, opacity 0.15s;
    user-select: none;
}
.gcgo-transcribe-btn:hover  { background: rgba(0,0,0,0.07); }
.gcgo-transcribe-btn:active { transform: scale(0.95); }
.gcgo-transcribe-btn:disabled {
    opacity: 0.45;
    cursor: default;
    pointer-events: none;
}

/* Распознанный текст */
.gcgo-transcript-text {
    flex: 1;
    font-size: 13px;
    color: var(--c-text, #444);
    font-style: italic;
    opacity: 0.88;
    line-height: 1.45;
    word-break: break-word;
}

/* Кнопка «✕ Скрыть» рядом с текстом */
.gcgo-transcript-clear {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: #888;
    font-size: 11px;
    opacity: 0.5;
    padding: 0 2px;
    line-height: 1;
    transition: opacity 0.15s;
}
.gcgo-transcript-clear:hover { opacity: 1; }

/* Сообщение об ошибке */
.gcgo-transcript-err {
    font-size: 12px;
    color: #c0392b;
    opacity: 0.85;
}

/* Тёмные темы */
html.theme-dark .gcgo-transcribe-btn,
html.theme-amoled .gcgo-transcribe-btn {
    border-color: rgba(255,255,255,0.18);
}
html.theme-dark .gcgo-transcribe-btn:hover,
html.theme-amoled .gcgo-transcribe-btn:hover {
    background: rgba(255,255,255,0.08);
}
html.theme-dark .gcgo-transcript-text,
html.theme-amoled .gcgo-transcript-text { opacity: 0.75; }

/* ========================================================================
   9. Красивая видеозаметка (.gcgo-video-note)
   ======================================================================== */

/* Внешняя обёртка видеозаметки */
.gcgo-video-note {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    max-width: 200px;
    user-select: none;
}

/* Квадратный контейнер для видео + кольца */
.gcgo-vn-wrap {
    position: relative;
    width: 180px;
    height: 180px;
    flex-shrink: 0;
}

/* Фигурный контейнер с клипом */
.gcgo-vn-shape {
    position: absolute;
    inset: 4px;           /* отступ для кольца */
    overflow: hidden;
    background: #111;
}

/* Видеоэлемент занимает всю фигуру */
.gcgo-vn-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Overlay с кнопкой play/pause */
.gcgo-vn-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.2);
    transition: background 0.2s;
}

.gcgo-vn-overlay.gcgo-vn-playing {
    background: transparent;
}

.gcgo-vn-play {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 4px;
    line-height: 1;
    transition: transform 0.15s, opacity 0.2s, background 0.2s;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 2px 16px rgba(0,0,0,0.40);
}

.gcgo-vn-play:hover { background: rgba(0,0,0,0.72); transform: scale(1.08); }
.gcgo-vn-play:active { transform: scale(0.95); }

/* Скрываем кнопку во время воспроизведения, показываем при наведении */
.gcgo-vn-overlay.gcgo-vn-playing .gcgo-vn-play {
    opacity: 0;
}
.gcgo-vn-overlay.gcgo-vn-playing:hover .gcgo-vn-play {
    opacity: 0.9;
}

/* SVG-кольцо прогресса */
.gcgo-vn-ring {
    position: absolute;
    inset: 0;
    width: 180px;
    height: 180px;
    transform: rotate(-90deg);
    z-index: 2;
    pointer-events: none;
}

.gcgo-vn-ring-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.2);
    stroke-width: 4;
}

.gcgo-vn-ring-fill {
    fill: none;
    stroke: #5bf;
    stroke-width: 4;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.25s linear;
}

/* Нижняя панель: время + прогресс */
.gcgo-vn-footer {
    width: 180px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.gcgo-vn-time {
    font-size: 11px;
    color: #666;
    flex-shrink: 0;
    min-width: 28px;
    text-align: right;
}

.gcgo-vn-progress-wrap {
    flex: 1;
}

.gcgo-vn-progress-bar {
    height: 3px;
    background: rgba(0, 0, 0, 0.12);
    border-radius: 2px;
    cursor: pointer;
    overflow: hidden;
}

.gcgo-vn-progress-fill {
    height: 100%;
    background: #5bf;
    border-radius: 2px;
    transition: width 0.25s linear;
}

/* ========================================================================
   10. Формы медиасообщений (clip-path как прямой класс на элементе)
       Класс .gcgo-shape-<форма> добавляется JS в renderAudioPlayer/renderVideoNote
       исходя из m.sender_shape, который приходит из БД через poll.php.
       Это позволяет каждому пузырю иметь свою фигуру (фигура отправителя).
   ======================================================================== */

/* ─── Круг ──────────────────────────────────────────────────────────────── */
.gcgo-media-shape.gcgo-shape-circle {
    border-radius: 50%;
    clip-path: none;
}

/* ─── Звезда ─────────────────────────────────────────────────────────────── */
.gcgo-media-shape.gcgo-shape-star {
    border-radius: 0;
    clip-path: polygon(
        50%  0%,
        61% 35%,
        98% 35%,
        68% 57%,
        79% 91%,
        50% 70%,
        21% 91%,
        32% 57%,
         2% 35%,
        39% 35%
    );
}

/* ─── Ромб ───────────────────────────────────────────────────────────────── */
.gcgo-media-shape.gcgo-shape-diamond {
    border-radius: 0;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

/* ─── Сердце ─────────────────────────────────────────────────────────────── */
.gcgo-media-shape.gcgo-shape-heart {
    border-radius: 0;
    clip-path: polygon(
        50% 85%,
        17% 52%,
         4% 33%,
         4% 19%,
        15%  7%,
        32%  7%,
        50% 22%,
        68%  7%,
        85%  7%,
        96% 19%,
        96% 33%,
        83% 52%
    );
}

/* ========================================================================
   11. Аудиоплеер с иконкой-фигурой
   ======================================================================== */

/* Горизонтальная раскладка: иконка + прогресс-бар */
.gcgo-audio-player {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Иконка-фигура (🎤) */
.gcgo-audio-shape-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #5272f9, #a07cf8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
    cursor: default;
    /* По умолчанию — круг */
    border-radius: 50%;
    transition: transform 0.15s;
}

/* Пульсация при воспроизведении */
.gcgo-audio-shape-icon.playing {
    animation: gcgo-audio-pulse 1.1s ease-in-out infinite;
}

@keyframes gcgo-audio-pulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.1); }
}

/* Блок с кнопкой и прогрессом */
.gcgo-audio-controls {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

/* ========================================================================
   12. Выбор фигуры в настройках профиля
   ======================================================================== */

.gcgo-shape-group {
    margin: 16px 0;
}

.gcgo-shape-selector {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.gcgo-shape-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    background: #f6f6f8;
    border: 2px solid transparent;
    border-radius: 14px;
    padding: 10px 14px;
    cursor: pointer;
    font-size: 12px;
    color: #666;
    min-width: 66px;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.gcgo-shape-btn svg {
    width: 32px;
    height: 32px;
    color: #b0b0b8;
    transition: color 0.15s;
}

.gcgo-shape-btn:hover {
    background: #eeeef4;
    border-color: #ccc;
}

.gcgo-shape-btn.active {
    background: #eef0ff;
    border-color: #5272f9;
    color: #5272f9;
}

.gcgo-shape-btn.active svg {
    color: #5272f9;
}

/* Тёмные темы */
html.theme-dark .gcgo-shape-btn,
html.theme-amoled .gcgo-shape-btn {
    background: rgba(255,255,255,0.06);
    color: #aaa;
}

html.theme-dark .gcgo-shape-btn svg,
html.theme-amoled .gcgo-shape-btn svg { color: #666; }

html.theme-dark .gcgo-shape-btn:hover,
html.theme-amoled .gcgo-shape-btn:hover {
    background: rgba(255,255,255,0.1);
    border-color: #555;
}

html.theme-dark .gcgo-shape-btn.active,
html.theme-amoled .gcgo-shape-btn.active {
    background: rgba(82, 114, 249, 0.15);
    border-color: #5272f9;
    color: #8899ff;
}

html.theme-dark .gcgo-shape-btn.active svg,
html.theme-amoled .gcgo-shape-btn.active svg { color: #8899ff; }

html.theme-dark .gcgo-vn-time,
html.theme-amoled .gcgo-vn-time { color: #666; }

html.theme-dark .gcgo-vn-progress-bar,
html.theme-amoled .gcgo-vn-progress-bar { background: rgba(255,255,255,0.1); }


/* ============================================================
   ГРУППОВЫЕ АУДИО / ВИДЕО ЗВОНКИ
   ============================================================ */

/* ── Кнопки в шапке чата ── */
.call-btn.gc-audio { background: #e8f5e9; }
.call-btn.gc-video { background: #e3f2fd; }
.call-btn.gc-audio:hover { background: #c8e6c9; }
.call-btn.gc-video:hover { background: #bbdefb; }

/* ── Полноэкранный оверлей звонка ── */
.gcgo-gc-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: #0d0d14;
    display: flex;
    flex-direction: column;
    font-family: inherit;
}

.gcgo-gc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: rgba(0,0,0,0.5);
    flex-shrink: 0;
}

.gcgo-gc-title {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
}

.gcgo-gc-header-btns {
    display: flex;
    gap: 8px;
}

.gcgo-gc-ctrl-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.12);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.gcgo-gc-ctrl-btn:hover { background: rgba(255,255,255,0.22); }
.gcgo-gc-ctrl-btn.active { background: rgba(255,255,255,0.18); }
.gcgo-gc-ctrl-btn.muted  { background: rgba(220,53,69,0.45); }
.gcgo-gc-ctrl-btn.end    { background: #dc3545; }
.gcgo-gc-ctrl-btn.end:hover { background: #b02a37; }

/* ── Сетка видео ── */
.gcgo-gc-grid {
    flex: 1;
    display: grid;
    gap: 4px;
    padding: 4px;
    overflow: hidden;
    /* по умолчанию 1 участник */
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

/* 2 участника — рядом */
.gcgo-gc-grid[data-count="2"] {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
}

/* 3–4 участника — 2×2 */
.gcgo-gc-grid[data-count="3"],
.gcgo-gc-grid[data-count="4"] {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

/* 5–6 участников — 2 строки × 3 */
.gcgo-gc-grid[data-count="5"],
.gcgo-gc-grid[data-count="6"] {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

/* 7+ — 3×3 */
.gcgo-gc-grid[data-count="7"],
.gcgo-gc-grid[data-count="8"],
.gcgo-gc-grid[data-count="9"] {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
}

/* ── Тайл одного участника ── */
.gcgo-gc-tile {
    position: relative;
    background: #1a1a2a;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gcgo-gc-tile video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Аватар (инициал) для аудио-звонков */
.gcgo-gc-tile-ava {
    position: absolute;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5272f9, #9b59b6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
}

/* Имя участника */
.gcgo-gc-tile-label {
    position: absolute;
    bottom: 8px;
    left: 8px;
    right: 8px;
    background: rgba(0,0,0,0.55);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    padding: 3px 7px;
    border-radius: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

/* Статусбар */
.gcgo-gc-status {
    text-align: center;
    color: rgba(255,255,255,0.5);
    font-size: 12px;
    padding: 5px;
    flex-shrink: 0;
}

/* ── Модал выбора участников ── */
.gcgo-gc-picker-modal {
    position: fixed;
    inset: 0;
    z-index: 9100;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
}

.gcgo-gc-picker-box {
    background: #fff;
    border-radius: 14px;
    width: min(360px, 96vw);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}

.gcgo-gc-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #eee;
    font-weight: 600;
    font-size: 15px;
}

.gcgo-gc-picker-close {
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    color: #888;
    padding: 2px 6px;
}
.gcgo-gc-picker-close:hover { color: #333; }

.gcgo-gc-picker-list {
    overflow-y: auto;
    flex: 1;
    padding: 8px 0;
}

.gcgo-gc-picker-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.12s;
}
.gcgo-gc-picker-item:hover { background: #f5f5f5; }

.gcgo-gc-picker-cb {
    width: 17px;
    height: 17px;
    cursor: pointer;
    accent-color: #4a90e2;
}

.gcgo-gc-picker-name {
    font-size: 14px;
}

.gcgo-gc-picker-footer {
    padding: 12px 16px;
    border-top: 1px solid #eee;
}

.gcgo-gc-picker-start {
    width: 100%;
    padding: 11px;
    background: #4a90e2;
    color: #fff;
    border: none;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.gcgo-gc-picker-start:hover:not(:disabled) { background: #357abd; }
.gcgo-gc-picker-start:disabled { background: #b0c8e8; cursor: not-allowed; }

/* ── Инвайт-плашка в чате ── */
.gcgo-gc-invite {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #e3f0ff, #f0f8ff);
    border: 1px solid #c0d8f0;
    border-radius: 10px;
    padding: 10px 14px;
    margin: 2px 0;
    min-width: 180px;
}

.gcgo-gc-invite-icon {
    font-size: 26px;
    flex-shrink: 0;
}

.gcgo-gc-invite-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gcgo-gc-invite-title {
    font-size: 13px;
    font-weight: 600;
    color: #234;
}

.gcgo-gc-invite-btn {
    background: #4a90e2;
    color: #fff;
    border: none;
    border-radius: 7px;
    padding: 5px 14px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
    align-self: flex-start;
}
.gcgo-gc-invite-btn:hover { background: #357abd; }

/* ── Тёмная тема ── */
html.theme-dark .gcgo-gc-picker-box,
html.theme-amoled .gcgo-gc-picker-box {
    background: #1e1e2e;
    color: #e0e0e0;
}
html.theme-dark .gcgo-gc-picker-header,
html.theme-amoled .gcgo-gc-picker-header {
    border-color: #333;
}
html.theme-dark .gcgo-gc-picker-footer,
html.theme-amoled .gcgo-gc-picker-footer {
    border-color: #333;
}
html.theme-dark .gcgo-gc-picker-item:hover,
html.theme-amoled .gcgo-gc-picker-item:hover {
    background: rgba(255,255,255,0.05);
}
html.theme-dark .gcgo-gc-invite,
html.theme-amoled .gcgo-gc-invite {
    background: linear-gradient(135deg, #1a2a3a, #1e2c3a);
    border-color: #2a4a6a;
}
html.theme-dark .gcgo-gc-invite-title,
html.theme-amoled .gcgo-gc-invite-title {
    color: #cde;
}

/* ── Мобильная адаптация ── */
@media (max-width: 600px) {
    .gcgo-gc-grid[data-count="3"],
    .gcgo-gc-grid[data-count="4"] {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
    }
    .gcgo-gc-grid[data-count="5"],
    .gcgo-gc-grid[data-count="6"],
    .gcgo-gc-grid[data-count="7"],
    .gcgo-gc-grid[data-count="8"],
    .gcgo-gc-grid[data-count="9"] {
        grid-template-columns: 1fr 1fr;
    }
    .gcgo-gc-tile-ava { width: 52px; height: 52px; font-size: 20px; }
}


/* ============================================================
   READ RECEIPTS — галочки прочтения
   ============================================================ */

.gcgo-rr {
    display: inline-block;
    margin-left: 5px;
    font-size: 11px;
    color: #aaa;
    letter-spacing: -1px;
    font-weight: 600;
    vertical-align: middle;
    transition: color 0.2s;
}
.gcgo-rr.read {
    color: #2196f3; /* синий — прочитано */
}


/* ============================================================
   ГАЛЕРЕЯ ВЛОЖЕНИЙ
   ============================================================ */

.gcgo-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 4px;
    max-width: 320px;
    margin: 4px 0;
}

/* Одна картинка — не растягивать на всю ширину, показывать как обычное фото */
.gcgo-gallery:has(> :only-child) {
    grid-template-columns: 1fr;
    max-width: 200px;
}

.gcgo-gallery-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 1;
    background: #e0e0e0;
    cursor: pointer;
}

.gcgo-gallery-img,
.gcgo-gallery-vid {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.15s;
}
.gcgo-gallery-item:hover .gcgo-gallery-img,
.gcgo-gallery-item:hover .gcgo-gallery-vid { opacity: 0.88; }

.gcgo-gallery-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #fff;
    text-shadow: 0 1px 6px rgba(0,0,0,0.7);
    pointer-events: none;
}

.gcgo-doc-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    background: #f0f4ff;
    border: 1px solid #c8d6f0;
    border-radius: 8px;
    margin: 3px 0;
    font-size: 13px;
    color: #234;
    text-decoration: none;
    word-break: break-all;
}
.gcgo-doc-link:hover { background: #e0eaff; }

/* Тёмная тема */
html.theme-dark .gcgo-doc-link,
html.theme-amoled .gcgo-doc-link {
    background: #1a2a3a;
    border-color: #2a4a6a;
    color: #cde;
}


/* ============================================================
   LIGHTBOX
   ============================================================ */

.gcgo-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0,0,0,0.92);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.gcgo-lb-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 96vw;
    max-height: calc(100vh - 80px);
    overflow: hidden;
}

.gcgo-lb-img {
    max-width: 92vw;
    max-height: calc(100vh - 100px);
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 4px 32px rgba(0,0,0,0.7);
    display: block;
}

.gcgo-lb-vid {
    max-width: 92vw;
    max-height: calc(100vh - 100px);
    border-radius: 6px;
}

.gcgo-lb-close {
    position: absolute;
    top: 14px;
    right: 18px;
    background: rgba(255,255,255,0.12);
    border: none;
    color: #fff;
    font-size: 22px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.gcgo-lb-close:hover { background: rgba(255,255,255,0.25); }

.gcgo-lb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.12);
    border: none;
    color: #fff;
    font-size: 34px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.gcgo-lb-nav:hover { background: rgba(255,255,255,0.25); }
.gcgo-lb-nav.prev { left: 14px; }
.gcgo-lb-nav.next { right: 14px; }

.gcgo-lb-counter {
    position: absolute;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,0.7);
    font-size: 13px;
    background: rgba(0,0,0,0.4);
    padding: 3px 10px;
    border-radius: 20px;
}

.gcgo-lb-caption {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,0.5);
    font-size: 12px;
    max-width: 80vw;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ============================================================
   МУЛЬТИ-ФАЙЛ ПРЕВЬЮ
   ============================================================ */

.gcgo-multi-previews {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px 0;
    background: transparent;
}

.gcgo-mp-item {
    position: relative;
    width: 60px;
    text-align: center;
}

.gcgo-mp-thumb {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #ddd;
    display: block;
}

.gcgo-mp-icon {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    border: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    background: #f5f5f5;
}

.gcgo-mp-name {
    font-size: 10px;
    color: #666;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gcgo-mp-del {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #dc3545;
    color: #fff;
    border: none;
    font-size: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.gcgo-attach-badge {
    position: absolute;
    text-align: center;
    top: -6px;
    right: -6px;
    background: #dc3545;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.attach-btn {
    position: relative;
}


/* ============================================================
   ⋮ МЕНЮ ЧАТА — dropdown
   ============================================================ */

.gcgo-chat-menu-wrap {
    position: relative;
    display: inline-block;
}

.gcgo-chat-menu-btn {
    background: none;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
    color: #555;
    transition: background 0.12s;
}
.gcgo-chat-menu-btn:hover { background: #f0f0f0; }

.gcgo-chat-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    min-width: 180px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.14);
    z-index: 2000;
    overflow: hidden;
}

.gcgo-chat-dd-item {
    display: block;
    width: 100%;
    padding: 10px 16px;
    text-align: left;
    background: none;
    border: none;
    font-size: 13px;
    cursor: pointer;
    color: #333;
    transition: background 0.1s;
}
.gcgo-chat-dd-item:hover { background: #f5f5f5; }
.gcgo-chat-dd-item.danger { color: #dc3545; }
.gcgo-chat-dd-item.danger:hover { background: #fff0f0; }

.gcgo-chat-dd-sep {
    height: 1px;
    background: #eee;
    margin: 4px 0;
}

/* Тёмная тема */
html.theme-dark .gcgo-chat-dropdown,
html.theme-amoled .gcgo-chat-dropdown {
    background: #1e1e2e;
    border-color: #333;
}
html.theme-dark .gcgo-chat-dd-item,
html.theme-amoled .gcgo-chat-dd-item { color: #ddd; }
html.theme-dark .gcgo-chat-dd-item:hover,
html.theme-amoled .gcgo-chat-dd-item:hover { background: rgba(255,255,255,0.06); }
html.theme-dark .gcgo-chat-dd-sep,
html.theme-amoled .gcgo-chat-dd-sep { background: #333; }
html.theme-dark .gcgo-chat-menu-btn,
html.theme-amoled .gcgo-chat-menu-btn { border-color: #444; color: #bbb; }
html.theme-dark .gcgo-chat-menu-btn:hover,
html.theme-amoled .gcgo-chat-menu-btn:hover { background: rgba(255,255,255,0.06); }


/* ============================================================
   МОДАЛ ИМПОРТА
   ============================================================ */

.gcgo-import-modal {
    position: fixed;
    inset: 0;
    z-index: 9500;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.gcgo-import-box {
    background: #fff;
    border-radius: 14px;
    width: min(360px, 94vw);
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}

.gcgo-import-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #eee;
    font-weight: 600;
    font-size: 15px;
}

.gcgo-picker-close-x {
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    color: #888;
    padding: 2px 6px;
}
.gcgo-picker-close-x:hover { color: #333; }

.gcgo-import-body {
    padding: 16px;
}

.gcgo-import-footer {
    padding: 12px 16px;
    border-top: 1px solid #eee;
    display: flex;
    align-items: center;
}

.gcgo-import-do-btn {
    background: #4a90e2;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 9px 18px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.gcgo-import-do-btn:hover { background: #357abd; }
.gcgo-import-do-btn:disabled { background: #aaa; cursor: not-allowed; }

html.theme-dark .gcgo-import-box,
html.theme-amoled .gcgo-import-box { background: #1e1e2e; color: #e0e0e0; }
html.theme-dark .gcgo-import-header,
html.theme-amoled .gcgo-import-header { border-color: #333; }
html.theme-dark .gcgo-import-footer,
html.theme-amoled .gcgo-import-footer { border-color: #333; }


/* ============================================================
   TOAST — всплывающие уведомления
   ============================================================ */

.gcgo-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(30,30,30,0.92);
    color: #fff;
    padding: 10px 20px;
    border-radius: 24px;
    font-size: 13px;
    z-index: 20000;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

/* ============================================================
   ПРЕСЕТ-АВАТАРЫ
   ============================================================ */

.gcgo-preset-open-btn {
    display: inline-block;
    margin-top: 7px;
    padding: 5px 14px;
    background: #f0f4ff;
    border: 1px solid #b0c4ff;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    color: #3a5bd9;
    transition: background 0.15s;
}
.gcgo-preset-open-btn:hover { background: #dce6ff; }

.gcgo-preset-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-start;
    max-height: 380px;
    overflow-y: auto;
    padding: 4px 2px;
}
.gcgo-preset-item {
    width: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    border-radius: 12px;
    padding: 8px 4px 6px;
    border: 2px solid transparent;
    transition: border-color 0.15s, background 0.15s;
    font-size: 12px;
    color: #555;
    text-align: center;
    word-break: break-word;
}
.gcgo-preset-item:hover {
    background: #f0f6ff;
    border-color: #7aabff;
}
.gcgo-preset-item svg { border-radius: 50%; }
.gcgo-preset-item span { line-height: 1.2; }

/* ============================================================
   РАСПИСАНИЕ СООБЩЕНИЙ
   ============================================================ */

/* Кнопка «Запланировать» — тёплый янтарный, как voice/video кнопки */
.gcgo-schedule-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px;
    border-radius: 50% !important;
    border: none !important;
    background: #fff3e0 !important;
    color: #e65100 !important;
    font-size: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s !important;
    box-shadow: none !important;
    padding: 0 !important;
    opacity: 1 !important;
    margin: 0 !important;
    flex-shrink: 0;
}
.gcgo-schedule-btn:hover  { background: #ffe0b2 !important; transform: scale(1.08) !important; }
.gcgo-schedule-btn:active { background: #ffcc80 !important; transform: scale(0.92) !important; }

.gcgo-sched-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    resize: vertical;
    min-height: 70px;
    margin-bottom: 12px;
    font-family: inherit;
}
.gcgo-sched-label {
    display: block;
    font-size: 13px;
    color: #555;
    margin-bottom: 14px;
}
.gcgo-sched-dt {
    display: block;
    margin-top: 5px;
    padding: 7px 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
}

/* Список отложенных */
.gcgo-sched-list {
    max-height: 380px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 2px 0;
}
.gcgo-sched-item {
    background: #f8f9ff;
    border-radius: 10px;
    padding: 11px 13px;
    border: 1px solid #e2e8ff;
}
.gcgo-sched-item-text {
    font-size: 14px;
    color: #222;
    margin-bottom: 6px;
    white-space: pre-wrap;
    word-break: break-word;
}
.gcgo-sched-item-meta {
    font-size: 12px;
    color: #888;
    display: flex;
    align-items: center;
    gap: 10px;
}
.gcgo-sched-del-btn {
    background: #ffeded;
    border: 1px solid #ffbdbd;
    color: #c0392b;
    border-radius: 6px;
    padding: 2px 10px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s;
}
.gcgo-sched-del-btn:hover { background: #ffc9c9; }

/* ============================================================
   РАСШИРЕННЫЙ ПОИСК — ПАНЕЛЬ ФИЛЬТРОВ
   ============================================================ */

.gcgo-filter-toggle-btn {
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    padding: 0 4px;
    opacity: 0.65;
    transition: opacity 0.15s, color 0.15s;
    vertical-align: middle;
    color: #555;
}
.gcgo-filter-toggle-btn:hover,
.gcgo-filter-toggle-btn.active { opacity: 1; color: #f0f0f0; }

.gcgo-search-filter-panel {
    background: #f7f8ff;
    border: 1px solid #dde5ff;
    border-radius: 0 0 10px 10px;
    padding: 10px 14px;
    margin-top: -2px;
}
.gcgo-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 8px;
}
.gcgo-filter-row:last-child { margin-bottom: 0; }
.gcgo-filter-label {
    display: flex;
    flex-direction: column;
    font-size: 12px;
    color: #666;
    gap: 4px;
    flex: 1 1 140px;
    min-width: 120px;
}
.gcgo-filter-input {
    padding: 5px 8px;
    border: 1px solid #d0d8f0;
    border-radius: 7px;
    font-size: 13px;
    background: #fff;
    color: #333;
}

/* ============================================================
   РЕЖИМ "НЕ БЕСПОКОИТЬ" — стиль пункта меню
   ============================================================ */

#chatDndBtn.dnd-on { color: #4caf50; }

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

.gcgo-sound-setting {
    background: #f8fbff;
    border-radius: 8px;
    padding: 10px 12px;
    border: 1px solid #e0eaff;
    margin-top: 6px;
}
.gcgo-sound-setting label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    cursor: pointer;
}
.gcgo-sound-setting input[type=checkbox] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #3a5bd9;
}

/* ============================================================
   МИНИ-ПЛЕЕР ГОЛОСОВЫХ СООБЩЕНИЙ
   ============================================================ */

.gcgo-mini-player {
    position: fixed;
    bottom: 72px;
    left: 50%;
    transform: translateX(-50%);
    background: #1a1a2e;
    color: #fff;
    border-radius: 40px;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 9000;
    box-shadow: 0 4px 24px rgba(0,0,0,0.45);
    min-width: 280px;
    max-width: 92vw;
    user-select: none;
}
.gcgo-mini-prev, .gcgo-mini-next, .gcgo-mini-play, .gcgo-mini-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    padding: 0 4px;
    border-radius: 50%;
    transition: background 0.15s;
    flex-shrink: 0;
    line-height: 1;
}
.gcgo-mini-play { font-size: 20px; }
.gcgo-mini-prev:hover, .gcgo-mini-next:hover, .gcgo-mini-play:hover { background: rgba(255,255,255,0.15); }
.gcgo-mini-close { font-size: 13px; opacity: 0.6; }
.gcgo-mini-close:hover { opacity: 1; }
.gcgo-mini-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.gcgo-mini-label {
    font-size: 12px;
    color: #ccc;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gcgo-mini-progress-wrap { display: flex; align-items: center; gap: 8px; }
.gcgo-mini-progress-bg {
    flex: 1;
    height: 4px;
    background: rgba(255,255,255,0.2);
    border-radius: 2px;
    overflow: hidden;
}
.gcgo-mini-progress-bar {
    height: 100%;
    background: #7aabff;
    border-radius: 2px;
    transition: width 0.25s linear;
}
.gcgo-mini-time { font-size: 11px; color: #aaa; white-space: nowrap; }

/* ============================================================
   УВЕДОМЛЕНИЕ О ДНЯ РОЖДЕНИЯ
   ============================================================ */

.gcgo-birthday-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(90deg, #ff7043, #e91e63);
    color: #fff;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    z-index: 8000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.gcgo-bd-link {
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.gcgo-bd-close {
    background: rgba(255,255,255,0.25);
    border: none;
    color: #fff;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    font-size: 12px;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.15s;
}
.gcgo-bd-close:hover { background: rgba(255,255,255,0.4); }

/* ============================================================
   ОПРОСЫ В ГРУППОВОМ ЧАТЕ
   ============================================================ */

.gcgo-poll-q {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 9px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 15px;
    margin-bottom: 12px;
}
.gcgo-poll-options {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 10px;
}
.gcgo-poll-opt {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
}
.gcgo-poll-add-btn {
    background: none;
    border: 1px dashed #7aabff;
    color: #3a5bd9;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 13px;
    cursor: pointer;
    margin-bottom: 12px;
    display: block;
}
.gcgo-poll-add-btn:hover { background: #f0f4ff; }
.gcgo-poll-multi-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #444;
    cursor: pointer;
    margin-bottom: 14px;
}

/* Рендер опроса в сообщении */
.gc-poll {
    background: #f7f8ff;
    border-radius: 10px;
    padding: 12px 14px;
    border: 1px solid #dde2ff;
    min-width: 220px;
    max-width: 340px;
}
.gc-poll-q {
    font-weight: 600;
    font-size: 15px;
    color: #222;
    margin-bottom: 10px;
}
.gc-poll-opt {
    position: relative;
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 6px;
    cursor: pointer;
    font-size: 14px;
    /*background: #eef1ff;*/
    background: #dbe4ff;
    color: #1a1a2e;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.15s;
}
.gc-poll-opt:hover { background: #c3d0ff; }
.gc-poll-voted { background: #d4e4ff !important; font-weight: 600; }
.gc-poll-bar {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    background: rgba(58,91,217,0.15);
    border-radius: 8px;
    transition: width 0.4s ease;
    z-index: 0;
}
.gc-poll-opt-text { position: relative; z-index: 1; }
.gc-poll-pct { font-size: 12px; color: #666; position: relative; z-index: 1; }
.gc-poll-total { font-size: 12px; color: #888; margin-top: 8px; text-align: right; }

/* ============================================================
   @-УПОМИНАНИЯ
   ============================================================ */

.gc-mention-drop {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
    z-index: 500;
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #e0e6ff;
}
.gc-mention-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    transition: background 0.12s;
}
.gc-mention-item:hover { background: #f0f5ff; }
.gc-mention-ava {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.gc-mention-ava-placeholder {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #d0d8f0;
    flex-shrink: 0;
}

/* Подсветка @упоминаний в тексте сообщений */
.gc-mention-highlight {
    color: #5cdba0;
    font-weight: 600;
    cursor: pointer;
}

/* ============================================================
   ОТКРЫТКИ
   ============================================================ */

.gcgo-cards-cats {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.gcgo-cat-btn {
    background: #f0f4ff;
    border: 1px solid #d0daff;
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 13px;
    cursor: pointer;
    color: #3a5bd9;
    transition: background 0.15s, color 0.15s;
}
.gcgo-cat-btn.active, .gcgo-cat-btn:hover {
    background: #3a5bd9;
    color: #fff;
    border-color: #3a5bd9;
}
.gcgo-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    max-height: 420px;
    overflow-y: auto;
    padding-right: 4px;
}
.gcgo-card-item {
    border: 2px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 6px;
    transition: border-color 0.15s, background 0.15s;
}
.gcgo-card-item:hover {
    border-color: #7aabff;
    background: #f0f5ff;
}
.gcgo-card-item svg {
    border-radius: 10px;
    width: 100%;
    height: auto;
}
.gcgo-card-label {
    font-size: 12px;
    color: #555;
    text-align: center;
    line-height: 1.3;
}
/* Кнопка «Открытка» — розовый, единый стиль с voice/video */
.gcgo-greet-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px;
    border-radius: 50% !important;
    border: none !important;
    background: #fce4ec !important;
    color: #c2185b !important;
    font-size: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s !important;
    box-shadow: none !important;
    padding: 0 !important;
    opacity: 1 !important;
    margin: 0 !important;
    flex-shrink: 0;
}
.gcgo-greet-btn:hover  { background: #f8bbd0 !important; transform: scale(1.08) !important; }
.gcgo-greet-btn:active { background: #f48fb1 !important; transform: scale(0.92) !important; }

/* ============================================================
   ДОВЕРЕННЫЙ КОНТАКТ (кнопка меню)
   ============================================================ */

#chatTrustedBtn.trusted-on { color: #2e7d32; font-weight: 600; }

/* ============================================================
   MIRROR OVERLAY — Twemoji в поле ввода (личный чат)
   ============================================================ */
#gcMainMessWrap {
    position: relative;
    display: block;
    width: 100%;
}
#gcMainMessWrap textarea.mess {
    /* Скрываем текст включая emoji-глифы во всех браузерах Chrome/Safari */
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: none !important;
    caret-color: #333;
    position: relative;
    z-index: 2;
    background: transparent;
}
#gcMainMessWrap textarea.mess::placeholder {
    color: #999 !important;
    -webkit-text-fill-color: #999 !important;
    opacity: 1 !important;
}
#gcMainMessWrap textarea.mess::-webkit-input-placeholder {
    color: #999 !important;
    -webkit-text-fill-color: #999 !important;
    opacity: 1 !important;
}
/* Если Twemoji не загружен — показываем текст обычно */
.gc-no-twemoji-main #gcMainMessWrap textarea.mess {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
}
#gcMainMessMirror {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 1;
    color: #333;
    /* Точно совпадает с inline-стилями textarea в личном чате */
    font-size: 14px;
    font-family: inherit;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
    overflow: hidden;           /* не даём контенту выйти за рамки */
    box-sizing: border-box;
    padding: 8px 10px;          /* совпадает с textarea padding: 8px 10px */
    width: 100%;
}
/* ═══════════════════════════════════════════════════════════════
   Универсальные модальные окна (.gcgo-modal-overlay / .gcgo-modal-box)
   Применяется в личном чате (index.php) — в групповом чате эти стили
   уже встроены в сам файл index_chat.php.
   ═══════════════════════════════════════════════════════════════ */
.gcgo-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10,10,30,0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex !important;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 16px;
    box-sizing: border-box;
    animation: gcOverlayIn 0.18s ease;
}
.gcgo-modal-overlay[style*="display:none"],
.gcgo-modal-overlay[style*="display: none"] {
    display: none !important;
}
@keyframes gcOverlayIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.gcgo-modal-box {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.28), 0 4px 16px rgba(91,94,244,0.12);
    width: 100%;
    max-width: 560px;
    max-height: 90dvh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    animation: gcBoxIn 0.22s cubic-bezier(.34,1.56,.64,1);
    position: relative;
}
@keyframes gcBoxIn {
    from { transform: scale(0.88) translateY(24px); opacity: 0; }
    to   { transform: scale(1)    translateY(0);    opacity: 1; }
}
.gcgo-gallery-box  { max-width: min(740px, 96vw); width: 100%; }
.gcgo-call-box     { max-width: 860px; }
.gcgo-modal-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 14px;
    border-bottom: 1px solid rgba(91,94,244,0.1);
    position: sticky;
    top: 0;
    background: #fff;
    border-radius: 20px 20px 0 0;
    z-index: 2;
}
.gcgo-modal-hdr h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: #1a1a2e;
    letter-spacing: -0.01em;
}
.gcgo-modal-x {
    background: #f0f1ff;
    border: none;
    border-radius: 50%;
    width: 34px; height: 34px;
    font-size: 16px;
    cursor: pointer;
    color: #5b5ef4;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, transform 0.12s;
    flex-shrink: 0;
}
.gcgo-modal-x:hover  { background: #dde0ff; transform: rotate(90deg); }
.gcgo-modal-x:active { transform: scale(0.88) rotate(90deg); }
.gcgo-modal-btn {
    display: block;
    width: calc(100% - 40px);
    margin: 14px 20px 18px;
    padding: 12px 0;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, #5b5ef4, #7c3ff7);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.12s;
    box-shadow: 0 4px 14px rgba(91,94,244,0.35);
}
.gcgo-modal-btn:hover  { opacity: 0.92; }
.gcgo-modal-btn:active { transform: scale(0.97); }
.gcgo-modal-box > *:not(.gcgo-modal-hdr):not(.gcgo-modal-btn):not(.gcgo-gallery-tabs):not(.gcgo-gallery-grid) {
    padding-left: 20px;
    padding-right: 20px;
}
/* Галерея в личном чате */
.gcgo-gallery-tabs {
    display: flex;
    gap: 5px;
    padding: 10px 14px 8px !important;
    border-bottom: 1px solid #eee;
    overflow-x: auto;
    scrollbar-width: none;
    flex-wrap: nowrap;
    box-sizing: border-box;
    width: 100%;
}
.gcgo-gallery-tabs::-webkit-scrollbar { display: none; }
.gcgo-gtab {
    background: #f0f1ff;
    border: none;
    border-radius: 20px;
    padding: 6px 11px;
    font-size: 12px;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
    flex: 1;
    text-align: center;
    min-width: 0;
}
.gcgo-gtab.active, .gcgo-gtab:hover { background: #5b5ef4; color: #fff; }
.gcgo-gallery-grid {
    display: flex; flex-direction: column; gap: 16px;
    padding: 12px 14px 16px !important;
    min-height: 100px; max-height: 58dvh;
    overflow-y: auto; box-sizing: border-box; width: 100%;
    scrollbar-width: thin;
}
/* Секция */
.gcgo-gallery-section { display: flex; flex-direction: column; gap: 7px; }
.gcgo-gallery-section-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #aaa; padding: 0 2px; }
/* Фото/видео */
.gcgo-gallery-img-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 5px; }
.gcgo-gallery-cell { position: relative; background: #f0f1ff; border-radius: 10px; overflow: hidden; aspect-ratio: 1; cursor: pointer; }
.gcgo-gallery-img  { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.18s; }
.gcgo-gallery-cell:hover .gcgo-gallery-img { transform: scale(1.06); }
.gcgo-gallery-video-thumb { width: 100%; height: 100%; background: #1a1a2e; display: flex; align-items: center; justify-content: center; }
.gcgo-gallery-play { font-size: 26px; color: rgba(255,255,255,0.88); }
.gcgo-gallery-date-abs { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.42); color: #fff; font-size: 10px; text-align: center; padding: 3px 4px; border-radius: 0 0 10px 10px; }
/* Аудио */
.gcgo-gallery-audio-list { display: flex; flex-direction: column; gap: 5px; }
.gcgo-gallery-audio-row { display: flex; align-items: center; gap: 10px; background: #f4f5ff; border-radius: 14px; padding: 9px 12px; transition: background 0.15s; }
.gcgo-gallery-audio-row:hover { background: #eaecff; }
.gcgo-gal-play-btn { width: 38px; height: 38px; border-radius: 50%; background: #5b5ef4; border: none; color: #fff; font-size: 15px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; transition: opacity 0.15s, transform 0.12s; }
.gcgo-gal-play-btn:hover { opacity: 0.85; transform: scale(1.06); }
.gcgo-gal-audio-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.gcgo-gal-audio-progress { height: 3px; background: rgba(91,94,244,0.18); border-radius: 2px; position: relative; cursor: pointer; }
.gcgo-gal-audio-fill { position: absolute; left: 0; top: 0; bottom: 0; background: #5b5ef4; border-radius: 2px; width: 0%; transition: width 0.1s linear; pointer-events: none; }
.gcgo-gal-audio-meta { display: flex; align-items: center; justify-content: space-between; }
.gcgo-gal-audio-name { font-size: 12px; font-weight: 600; color: #1a1a2e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }
.gcgo-gal-audio-time { font-size: 11px; color: #888; white-space: nowrap; flex-shrink: 0; }
/* Файлы */
.gcgo-gallery-file-list { display: flex; flex-direction: column; gap: 4px; }
.gcgo-gallery-file-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: #f4f5ff; border-radius: 12px; text-decoration: none; transition: background 0.15s; }
.gcgo-gallery-file-row:hover { background: #eaecff; }
.gcgo-gal-file-icon { font-size: 20px; flex-shrink: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: rgba(91,94,244,0.1); border-radius: 8px; }
.gcgo-gal-file-info { flex: 1; min-width: 0; }
.gcgo-gal-file-name { font-size: 13px; font-weight: 500; color: #1a1a2e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gcgo-gal-file-meta { font-size: 11px; color: #888; margin-top: 2px; }
.gcgo-gallery-loading, .gcgo-gallery-empty { text-align: center; padding: 30px; color: #aaa; font-size: 13px; }
.gcgo-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    padding: 14px 20px 20px !important;
}
.gcgo-cards-cats {
    display: flex;
    gap: 6px;
    padding: 12px 20px 4px !important;
    flex-wrap: wrap;
}
/* Лайтбокс внутри галереи */
/*.gcgo-lightbox {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.88);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    border-radius: 20px;
}
.gcgo-lb-close {
    position: absolute;
    top: 12px; right: 12px;
    background: rgba(255,255,255,0.15);
    border: none;
    border-radius: 50%;
    width: 34px; height: 34px;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.gcgo-lb-content img,
.gcgo-lb-content video {
    max-width: 94vw;
    max-height: 80vh;
    border-radius: 10px;
}*/
.gcgo-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
}
.gcgo-lb-close {
    position: absolute;
    top: 12px; right: 12px;
    background: rgba(255,255,255,0.15);
    border: none;
    border-radius: 50%;
    width: 34px; height: 34px;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.gcgo-lb-content img,
.gcgo-lb-content video {
    max-width: 94vw;
    max-height: 88vh;
    border-radius: 10px;
    object-fit: contain;
    display: block;
}

/* Twemoji в mirror-overlay (поле ввода) */
img.gcm-twemoji {
    height: 18px !important;
    width: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    vertical-align: -3px !important;
    display: inline-block !important;
    margin: 0 1px;
    pointer-events: none;
    flex-shrink: 0;
}
/* Twemoji в тексте сообщений и кнопке 😊 (дефолтный класс twemoji.parse) */
img.emoji {
    height: 18px !important;
    width: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    vertical-align: -3px !important;
    display: inline-block !important;
    margin: 0 1px;
    pointer-events: none;
}
/* Кнопка emoji — убираем текстовый 😊, оставляем только SVG */
button#emojiBtn img.emoji {
    height: 22px !important;
    width: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    vertical-align: middle !important;
    margin: 0;
}

  /* ── Галерея: мобильная адаптация ─────────────────────────── */
  @media (max-width: 480px) {
      .gcgo-modal-overlay { padding: 8px; }
      .gcgo-modal-box { border-radius: 16px; max-height: 94dvh; }
      .gcgo-gallery-tabs { padding: 8px 10px 6px !important; gap: 4px; }
      .gcgo-gtab { padding: 5px 6px; font-size: 11px; flex: 1; text-align: center; min-width: 0; }
      .gcgo-gallery-grid { padding: 10px 10px 14px !important; max-height: 62dvh; }
      .gcgo-gallery-img-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 4px; }
      .gcgo-gallery-audio-row { padding: 8px 10px; }
      .gcgo-gal-play-btn { width: 34px; height: 34px; font-size: 13px; }
      .gcgo-gal-audio-name { max-width: 100px; }
      .gcgo-gallery-file-row { padding: 8px 10px; }
      .gcgo-modal-hdr { padding: 14px 14px 10px; }
      .gcgo-modal-hdr h3 { font-size: 15px; }
  }
  
  /* ========================
   Галерея профиля — компактный вид на десктопе
   ======================== */
@media (min-width: 769px) {
    #galleryModal {
        background: rgba(0, 0, 0, 0.65);
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .gallery-header,
    .gallery-grid,
    .gallery-upload {
        width: 680px;
        max-width: 92vw;
        box-sizing: border-box;
        background: #fff;
    }

    .gallery-header {
        border-radius: 16px 16px 0 0;
        border-bottom: 1px solid #eee;
        padding: 14px 18px;
        font-size: 16px;
    }

    .gallery-grid {
        max-height: 62vh;
        overflow-y: auto;
        padding: 8px;
        gap: 5px;
    }

    .gallery-upload {
        border-radius: 0 0 16px 16px;
        border-top: 1px solid #eee;
        padding: 10px 18px;
    }
}





/* ========================
   Длинное сообщение → .txt
   ======================== */
.gcgo-long-toast {
    position: fixed;
    bottom: 84px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(40, 40, 40, 0.93);
    color: #fff;
    padding: 9px 20px;
    border-radius: 22px;
    font-size: 13px;
    z-index: 9999;
    white-space: nowrap;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.4s;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.gcgo-long-toast-hide { opacity: 0; }
/* .txt вложение в чате — выделить особо */
.msg-doc a[href$=".txt"],
.msg-doc [data-ext="txt"] {
    background: #f0f4ff;
    border-left: 3px solid #5b5ef4;
    border-radius: 8px;
    padding: 6px 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9em;
    color: #5b5ef4;
    text-decoration: none;
    max-width: 220px;
}
.msg-doc a[href$=".txt"]::before,
.msg-doc [data-ext="txt"]::before {
    content: '📄';
}


/* Транскрипция внутри голосового плеера */
#gcgo-audio-759,
[id^="gcgo-audio-"] {
    display: flex;
    flex-direction: column;
}

.gcgo-wv-player {
    flex-shrink: 0;
}

[id^="gcgo-audio-"] .gcgo-transcript {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

[id^="gcgo-audio-"] .gcgo-transcript-text {
    display: block !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    width: auto !important;
    min-width: 0 !important;
    font-style: italic;
    font-size: 13px;
    color: #555;
    line-height: 1.45;
    margin-top: 4px;
}




/* ========================
   Галерея профиля — фикс пустых ячеек на мобильном
   ======================== */

.gallery-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 3px !important;
    /* Убираем auto-rows, чтобы ячейки не падали в высоту */
    grid-auto-rows: unset !important;
    align-items: unset !important;
}

.gallery-item {
    position: relative !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    background: #e8e8e8 !important;
    cursor: pointer !important;
    /* Сбрасываем любые height/min-height что мешают aspect-ratio */
    height: unset !important;
    min-height: unset !important;
    max-height: unset !important;
}

.gallery-item img,
.gallery-item video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    /* Убираем любые max-width/height что могут нарушить заполнение */
    max-width: unset !important;
    max-height: unset !important;
}

.gal-play {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: rgba(0, 0, 0, 0.55) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    pointer-events: none !important;
}

@media (max-width: 768px) {
    .gallery-grid {
        gap: 2px !important;
    }
}
/* ── FIX: входящий видеозвонок — videoAnswerBtn внутри панели ──────────────
   Когда JS перемещает #videoAnswerBtn внутрь .gcgo-incoming-actions,
   сбрасываем floating-позиционирование (position:fixed из index.php)
   и делаем его круглой кнопкой как остальные кнопки панели. */
.gcgo-incoming-actions #videoAnswerBtn:not([hidden]) {
    position: static !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    width: 44px !important;
    height: 44px !important;
    max-width: none !important;
    z-index: auto !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35) !important;
}

/* ── FIX: видеозвонок на десктопе — контейнер на весь экран, видео по центру ──
   На мобильных (≤600px) уже есть fixed-fullscreen в @media в index.php.
   Здесь расширяем то же поведение на десктоп: контейнер занимает весь экран,
   видео собеседника (#remoteVideo) заполняет его и центрируется по обеим осям,
   своё видео (#localVideo) остаётся в правом нижнем углу. */

#videoCallContainer {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: none !important;
    min-height: unset !important;
    margin: 0 !important;
    border-radius: 0 !important;
    z-index: 10000 !important;
}

#remoteVideo {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* Своё видео — в правом нижнем углу, выше кнопки завершения вызова */
#localVideo {
    bottom: 90px !important;
    right: 16px !important;
}