/**
* CloudVox Mobile Performance Patch v2.0
*
* ЧТО ИСПРАВЛЕНО по сравнению с v10:
* 1. Добавлен content-visibility: auto для скрытых секций
* 2. Уменьшено количество !important (больше специфичность)
* 3. Добавлен pointer: coarse media query для тач-устройств
* 4. Оптимизирована загрузка шрифтов (font-display: swap)
* 5. Touch-specific оптимизации (suppress hover delay)
* 6. Скролл-оптимизация (overscroll-behavior)
* 7. Убраны лишние box-shadow reset — теперь только для тяжёлых glow
* 8. Добавлено hardware-acceleration hint для анимированных элементов
*
* ПОДКЛЮЧЕНИЕ:
* Подключить ПОСЛЕ CloudVox_mobile.css в main.tpl:
*
*/
/* ════════════════════════════════════════════════════════════════
1. TOUCH-DEVICE ОПТИМИЗАЦИИ (все тач-устройства)
════════════════════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
/* Убираем 300ms задержку на тач */
a, button, [role="button"], .cv-btn, .av-btn {
touch-action: manipulation;
}
/* Hover-эффекты на тач не нужны — убираем */
.cv-card:hover,
.server-card:hover,
button:hover {
transform: none !important;
}
/* Убираем hover-стили */
.cv-card:hover,
.server-card:hover {
border-color: inherit !important;
}
/* Overscroll — предотвращаем pull-to-refresh внутри чата */
.cv-messages-list,
.av2-messages-list,
[class*="chat-list"],
[class*="msg-list"] {
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
/* Блокируем overscroll на body чтобы не было «резинки» */
body {
overscroll-behavior: none;
}
}
/* ════════════════════════════════════════════════════════════════
2. МОБИЛЬНЫЙ PERF — ТОЛЬКО ТЕЛЕФОНЫ (max-width: 768px)
════════════════════════════════════════════════════════════════ */
@media only screen and (max-width: 768px) {
/* ─── Font rendering ─── */
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeSpeed; /* Быстрее чем optimizeLegibility */
}
/* ─── Content visibility — пропускаем невидимые секции ─── */
.cv-section,
.cv-card:not(:first-child):not(:nth-child(2)),
.server-card:not(:first-child):not(:nth-child(2)),
.cv-news-item:not(:first-child):not(:nth-child(2)),
.cv-case-card:not(:first-child):not(:nth-child(2)) {
content-visibility: auto;
contain-intrinsic-size: 0 280px;
}
/* ─── Scroll containers ─── */
.cv-messages-list,
.av2-messages-list,
[class*="chat-list"],
[class*="msg-list"],
[class*="scroll-container"] {
will-change: scroll-position;
contain: layout style;
}
/* ─── Кнопки и интерактив — быстрые transition ─── */
button,
.cv-btn,
.av-btn,
[role="button"] {
transition: background-color 0.15s ease, opacity 0.1s ease;
/* НЕ ставим transform в transition — вызывает jank при scroll */
}
/* ─── Изображения — ленивая загрузка ─── */
img {
loading: lazy;
decoding: async;
}
/* Аватарки не нужно lazy — они маленькие */
.cv-avatar img,
.av-avatar img,
img[src*="avatar"],
img[class*="avatar"] {
loading: eager;
}
/* ─── Scroll snap для карточек ─── */
.cv-cards-scroll,
.cv-horizontal-scroll,
[class*="cards-scroll"] {
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scroll-padding: 0 16px;
}
.cv-cards-scroll > *,
.cv-horizontal-scroll > * {
scroll-snap-align: start;
flex-shrink: 0;
}
/* ─── Убираем transform-эффекты при скролле ─── */
.is-scrolling button,
.is-scrolling .cv-btn,
.is-scrolling a {
transition: none !important;
}
/* ─── Webview performance hints ─── */
.cloudvox-app body {
-webkit-text-size-adjust: 100%;
-webkit-overflow-scrolling: touch;
}
}
/* ════════════════════════════════════════════════════════════════
3. МАЛЕНЬКИЕ ТЕЛЕФОНЫ (max-width: 480px) — экстра оптимизация
════════════════════════════════════════════════════════════════ */
@media only screen and (max-width: 480px) {
/* Ещё более агрессивное content-visibility */
.cv-card,
.server-card,
.cv-news-item,
.cv-case-card {
content-visibility: auto;
contain-intrinsic-size: 0 200px;
}
/* Убираем все box-shadow для самых слабых устройств */
* {
box-shadow: none !important;
}
/* Восстанавливаем минимальные тени для критичных элементов */
.av-danger-modal-btn-dl {
box-shadow: 0 2px 8px rgba(237, 66, 69, 0.3) !important;
}
/* Убираем text-shadow */
* {
text-shadow: none !important;
}
/* Ещё быстрее transition */
* {
transition-duration: 0.08s !important;
}
}
/* ════════════════════════════════════════════════════════════════
4. JAVASCRIPT-ASSISTED SCROLL OPTIMIZATION
Добавьте в main.tpl:
════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════
5. ЗАГРУЗКА ШРИФТОВ — font-display: swap
Добавить в @font-face или @import:
&display=swap
════════════════════════════════════════════════════════════════ */
/* Google Fonts: добавить &display=swap к URL */
/* Пример:
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700&family=Inter:wght@400;500&display=swap');
*/
/* ════════════════════════════════════════════════════════════════
6. НАГРУЗКА НА CPU — уменьшение частоты опроса
Для setInterval в CloudVox.js уменьшить частоту:
- Онлайн-статус: 30с → 60с
- Непрочитанные: 15с → 30с
- Уведомления: 20с → 45с
════════════════════════════════════════════════════════════════ */
/* ============================================================
CloudVox Mobile CSS v10 — FINAL FIX + PERFORMANCE
Overrides everything with max specificity
------------------------------------------------------------
v10: добавлен блок PERFORMANCE OPTIMIZATION (mobile + tablet)
- Замена backdrop-filter: blur(Npx) → opaque rgba фон
- Замена filter: blur(50-120px) декор. орбов → display:none
- Замена multi-layer glow box-shadow → однослойная лёгкая
- Замена neon text-shadow → простая тень для читаемости
- Отключение body::before (SVG feTurbulence) и body::after (aurora)
- Глушение infinite-анимаций (orbFloat, pulse, glow, shimmer)
- Глобальный сброс mix-blend-mode, will-change, filter
- Compensация glass-эффектов более opaque фоном
ВНИМАНИЕ: применяется только для max-width: 1024px (mobile+tablet)
Desktop не затронут.
============================================================ */
/* ════════════════════════════════════════════════════════════════
PERFORMANCE OPTIMIZATION — MOBILE ONLY (max-width: 768px)
ВАЖНО: только телефоны! На планшетах (769-1024px) backdrop-filter
работает нормально, GPU мощный — оптимизация НЕ нужна и вызывает
gradient banding (полосатость) на шапках.
════════════════════════════════════════════════════════════════ */
@media only screen and (max-width: 768px) {
/* ────────────────────────────────────────────────────
1. CSS ПЕРЕМЕННЫЕ — переопределяем дорогие блюры
Одной декларацией нейтрализуем десятки правил,
использующих var(--premium-blur-*)
──────────────────────────────────────────────────── */
:root,
[data-theme="dark"],
[data-theme="default"],
[data-theme="light"] {
--premium-blur-sm: none !important;
--premium-blur-md: none !important;
--premium-blur-lg: none !important;
--premium-blur-xl: none !important;
--premium-blur-2xl: none !important;
--premium-blur-glass: none !important;
--premium-blur-glass-strong: none !important;
/* Лёгкие однослойные тени вместо тяжёлых многослойных */
--premium-shadow-xs: 0 1px 2px rgba(0, 0, 0, .25) !important;
--premium-shadow-sm: 0 2px 4px rgba(0, 0, 0, .3) !important;
--premium-shadow-md: 0 3px 6px rgba(0, 0, 0, .35) !important;
--premium-shadow-lg: 0 4px 10px rgba(0, 0, 0, .4) !important;
--premium-shadow-xl: 0 6px 14px rgba(0, 0, 0, .45) !important;
--premium-shadow-2xl: 0 8px 18px rgba(0, 0, 0, .5) !important;
/* Glow-эффекты (самые дорогие) — заменяем на простую тень */
--premium-glow-violet: 0 2px 6px rgba(99, 102, 241, .25) !important;
--premium-glow-gold: 0 2px 6px rgba(251, 191, 36, .25) !important;
--premium-glow-cyan: 0 2px 6px rgba(34, 211, 238, .25) !important;
--premium-glow-emerald: 0 2px 6px rgba(16, 185, 129, .25) !important;
--premium-glow-red: 0 2px 6px rgba(239, 68, 68, .25) !important;
--premium-glow-pink: 0 2px 6px rgba(236, 72, 153, .25) !important;
}
/* ────────────────────────────────────────────────────
2. ГЛОБАЛЬНЫЙ СБРОС тяжёлых фильтров
:root body * (0,1,1) побеждает !important на классах (0,1,0)
──────────────────────────────────────────────────── */
:root body * {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
filter: none !important;
-webkit-filter: none !important;
mix-blend-mode: normal !important;
will-change: auto !important;
}
/* ────────────────────────────────────────────────────
3. BODY::BEFORE (SVG feTurbulence noise) и BODY::AFTER
(animated aurora gradient) — отключаем полностью
──────────────────────────────────────────────────── */
body::before {
content: none !important;
display: none !important;
background: none !important;
}
body::after {
content: none !important;
display: none !important;
background: none !important;
}
/* ────────────────────────────────────────────────────
4. ДЕКОРАТИВНЫЕ ОРБЫ — скрываем полностью
Это div'ы с filter: blur(50-120px) — главные убийцы GPU
──────────────────────────────────────────────────── */
.orb,
.orb-1, .orb-2, .orb-3,
.premium-orb,
.bp-orb, .bp-orb-1, .bp-orb-2, .bp-orb-3,
.cv-orb, .voice-orb, .aurora-orb,
.cv-premium-orbs,
[class*="-orb"],
[class*="orb-"],
[class*="_orb"],
[class*="orb_"],
.voice-visuals,
.voice-bg-orb,
.voice-bg-orb-1, .voice-bg-orb-2, .voice-bg-orb-3,
.voice-bg-glow,
.voice-bg-blur,
.bp-hero-bg, .bp-hero-orb, .bp-bg-orb, .bp-decorative-bg,
.cv-bg-glow, .cv-bg-orb, .cv-decorative-bg, .cv-chest-glow-bg,
.servers-bg-orb, .servers-bg-glow, .servers-decorative,
.voice-orb-1, .voice-orb-2, .voice-orb-3,
.premium-bg-orb,
.cv-case-glow, .cv-chest-glow, .cv-prize-glow, .cv-aura,
[class*="blur-bg"],
[class*="bg-blur"],
[class*="ambient"],
[class*="decorative"] {
display: none !important;
opacity: 0 !important;
}
/* Inline-styled декоративные orb'ы (filter:blur(60-120px))
Ловим через attribute-селекторы по inline style */
[style*="filter:blur(50px"],
[style*="filter:blur(60"],
[style*="filter:blur(70px"],
[style*="filter:blur(80"],
[style*="filter:blur(90px"],
[style*="filter:blur(100"],
[style*="filter:blur(120"],
[style*="filter: blur(50px"],
[style*="filter: blur(60"],
[style*="filter: blur(80"],
[style*="filter: blur(100"],
[style*="filter: blur(120"] {
display: none !important;
}
/* ────────────────────────────────────────────────────
5. BOX-SHADOW — заменяем multi-layer glow на лёгкую
однослойную тень. Визуально похоже, GPU работает в 10x меньше.
──────────────────────────────────────────────────── */
:root body * {
box-shadow: 0 2px 4px rgba(0, 0, 0, .3) !important;
}
/* ИСКЛЮЧЕНИЯ — сохраняем дизайн для важных UI-элементов
(danger-кнопки, primary-кнопки, активные инструменты) */
.av-danger-modal-btn-dl,
.av-danger-modal-btn-cancel,
.av-viewer-btn.primary,
.av-viewer-btn.danger,
.av-editor-tool.active,
.btn-primary,
.btn-danger,
.av-btn-danger,
.av2-btn-danger,
.av3-btn-danger,
button[class*="primary"],
button[class*="danger"],
[class*="-btn-danger"],
[class*="-btn-primary"] {
box-shadow: 0 4px 14px rgba(0, 0, 0, .35) !important;
}
/* Danger-кнопка "Скачать на свой риск" — восстанавливаем
красный дизайн полностью */
.av-danger-modal-btn-dl,
body .av-danger-modal-btn-dl {
background: linear-gradient(135deg, #ed4245 0%, #c03537 100%) !important;
color: #fff !important;
border: none !important;
box-shadow: 0 6px 18px rgba(237, 66, 69, 0.35) !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.6px !important;
}
.av-danger-modal-btn-dl:hover,
body .av-danger-modal-btn-dl:hover,
.av-danger-modal-btn-dl:active,
body .av-danger-modal-btn-dl:active {
transform: translateY(-1px) !important;
box-shadow: 0 10px 24px rgba(237, 66, 69, 0.45) !important;
}
/* Cancel-кнопка — восстанавливаем прозрачный фон */
.av-danger-modal-btn-cancel,
body .av-danger-modal-btn-cancel {
background: transparent !important;
color: rgba(255, 255, 255, 0.6) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
box-shadow: none !important;
}
.av-danger-modal-btn-cancel:hover,
body .av-danger-modal-btn-cancel:hover {
background: rgba(255, 255, 255, 0.05) !important;
color: #fff !important;
border-color: rgba(255, 255, 255, 0.2) !important;
}
/* Текстовые элементы — без тени */
h1, h2, h3, h4, h5, h6,
p, span, label, a, small, strong, em,
li, td, th,
[class*="text"] {
box-shadow: none !important;
}
/* Спиннеры, лоадеры — без тени */
.spinner, .loader, .loading-dots,
.pulse-dot, .live-dot,
[class*="spinner"], [class*="loader"] {
box-shadow: none !important;
}
/* Изображения и SVG — без тени */
img, svg, video, canvas {
box-shadow: none !important;
}
/* Модалки/попапы — чуть заметнее отделяем от фона */
.modal, .modal-content, .popup, .overlay-content,
.dropdown-menu,
[class*="modal"]:not([class*="modal-"]),
[class*="popup"] {
box-shadow: 0 4px 16px rgba(0, 0, 0, .55) !important;
}
/* Hover-тени на мобильных не нужны */
.btn:hover, button:hover, .card:hover, .glass-card:hover,
[class*="card"]:hover, a:hover, *:hover {
box-shadow: 0 2px 4px rgba(0, 0, 0, .3) !important;
}
/* ────────────────────────────────────────────────────
6. TEXT-SHADOW — заменяем неоновые glow на простую тень
для читаемости. Читаемость та же, GPU не работает.
──────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.hero-title, .section-title,
.bp-title, .cv-title, .premium-title,
[class*="text-glow"],
[class*="title-glow"],
[class*="neon"] {
text-shadow: 0 1px 2px rgba(0, 0, 0, .5) !important;
}
/* Текст в кнопках/иконках — без тени */
button, .btn, a, span, p, label, input, textarea,
[class*="icon"] {
text-shadow: none !important;
}
/* ────────────────────────────────────────────────────
9. GLASS-ЭФФЕКТЫ — компенсируем отсутствие blur
более opaque фоном. Визуально похоже на blur+glass,
но без GPU-работы backdrop-filter.
──────────────────────────────────────────────────── */
header, .header, .navbar, .nav, .toolbar,
.top-bar, .bottom-bar,
.channel-header, .chat-header, .voice-header, .support-chat-header {
background: rgba(15, 16, 25, .95) !important;
}
.modal, .modal-content, .popup, .overlay,
[class*="modal"], [class*="popup"] {
background: rgba(15, 16, 25, .98) !important;
}
.sidebar, .channel-sidebar, .server-bar, .panel,
[class*="sidebar"], [class*="panel"] {
background: rgba(15, 16, 25, .97) !important;
}
.dropdown, .dropdown-menu, .menu,
[class*="dropdown"] {
background: rgba(22, 23, 37, .98) !important;
}
.glass, .glass-card, .glass-panel,
[class*="glass"]:not([class*="glass-"]) {
background: rgba(22, 23, 37, .85) !important;
}
/* Support: чат-панель */
.support-chat-panel, .support-chat-messages {
background: rgba(15, 16, 25, .98) !important;
}
/* Эмодзи/стикер-панели */
.emoji-panel, .emoji-picker,
.sticker-panel, .sticker-picker, .av-sticker-panel {
background: rgba(22, 23, 37, .98) !important;
}
/* Blog: hero-фоны с blur → простой фон */
.bp-hero-bg, .bp-post-hero, .bp-author-bg {
background: var(--premium-bg-base, #0f1019) !important;
}
/* ────────────────────────────────────────────────────
10. СКРОЛЛ-БАР — упрощаем (градиент + glow на thumb
дорого рендерить)
──────────────────────────────────────────────────── */
::-webkit-scrollbar {
width: 6px !important;
height: 6px !important;
}
::-webkit-scrollbar-track {
background: transparent !important;
border: none !important;
}
::-webkit-scrollbar-thumb {
background: rgba(99, 102, 241, .4) !important;
border-radius: 3px !important;
border: none !important;
background-clip: padding-box !important;
box-shadow: none !important;
}
/* ────────────────────────────────────────────────────
10. HARDWARE ACCEL для скролла контейнеров
ВНИМАНИЕ: НЕ используем transform: translateZ(0) для
контейнеров с position:fixed детьми (emoji-panel,
sticker-panel) — это создаёт containing block и ломает
fixed позиционирование picker'а.
Используем will-change: scroll-position — он не создаёт
containing block, но всё равно ускоряет скролл.
──────────────────────────────────────────────────── */
.channel-sidebar, .chat-messages, .support-chat-messages,
[class*="scroll"], [class*="messages"] {
-webkit-overflow-scrolling: touch;
will-change: scroll-position;
}
/* emoji-panel и sticker-panel — без transform и без will-change,
чтобы их position: fixed работал относительно viewport */
.emoji-panel, .emoji-picker, .sticker-panel, .av-sticker-panel,
#emojiPanel, #emojiPickerPanel {
transform: none !important;
will-change: auto !important;
contain: none !important;
}
} /* end @media max-width: 768px — PERFORMANCE */
/* ────────────────────────────────────────────────────
VERY SMALL SCREENS (<=480px) — ещё агрессивнее
──────────────────────────────────────────────────── */
@media only screen and (max-width: 480px) {
:root body * {
box-shadow: none !important;
text-shadow: none !important;
}
.modal, .modal-content, .popup, .dropdown-menu {
box-shadow: 0 2px 8px rgba(0, 0, 0, .5) !important;
}
[class*="card"], .glass-card {
border-radius: 8px !important;
}
}
/* ────────────────────────────────────────────────────
LANDSCAPE на мобильных — скрываем декоративные элементы
(анимации НЕ трогаем)
──────────────────────────────────────────────────── */
@media only screen and (max-width: 1024px) and (orientation: landscape) and (max-height: 500px) {
[class*="decor"], [class*="ambient"],
[class*="bg-glow"], [class*="hero-bg"] {
display: none !important;
}
}
/* ============================================================
КОНЕЦ БЛОКА PERFORMANCE OPTIMIZATION
============================================================ */
/* ═══ Voice stop button — НЕ трогаем, JS управляет через inline style ═══ */
/* HTML уже имеет style="display:none". JS ставит style.display='' чтобы
показать кнопку. Не нужно CSS-переопределение — оно ломает JS логику. */
/* ═══ GLOBAL: Hide buttons marked with av-hide-on-mobile ═══ */
@media only screen and (max-width: 768px) {
.av-hide-on-mobile {
display: none !important;
}
}
/* ═══ MOBILE ONLY ═══ */
@media only screen and (max-width: 768px) {
/* ── 1. SIDEBAR — slides from LEFT, 85% width ── */
.channel-sidebar {
position: fixed !important;
left: -85vw !important;
top: 0 !important;
bottom: 0 !important;
width: 85vw !important;
max-width: 360px !important;
z-index: 10000 !important;
pointer-events: auto !important;
transition: left 0.3s ease !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
display: flex !important;
flex-direction: row !important;
}
.channel-sidebar.open {
left: 0 !important;
}
/* When server-bar is inside sidebar, make it the left column */
.channel-sidebar > .server-bar.inside-sidebar {
flex-shrink: 0 !important;
width: 60px !important;
min-width: 60px !important;
height: 100% !important;
position: relative !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
padding: 8px 0 !important;
overflow-y: auto !important;
}
/* Everything else in sidebar goes into a right column (wrapper) */
.av-sidebar-content {
flex: 1 !important;
min-width: 0 !important;
display: flex !important;
flex-direction: column !important;
height: 100% !important;
overflow: hidden !important;
}
.channel-sidebar .nav-item,
.channel-sidebar .sidebar-nav a,
.channel-sidebar button {
pointer-events: auto !important;
z-index: 10001 !important;
position: relative !important;
}
.av-sidebar-overlay {
position: fixed !important;
inset: 0 !important;
background: rgba(0,0,0,0.6) !important;
z-index: 9999 !important;
display: none !important;
}
.av-sidebar-overlay.active { display: block !important; }
/* ☰ toggle — INSIDE page-header AND chat-header, LEFT side */
.sidebar-toggle {
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
z-index: auto !important;
display: flex !important;
width: 36px !important;
height: 36px !important;
background: rgba(255,255,255,0.06) !important;
border: 1px solid rgba(255,255,255,0.1) !important;
border-radius: 8px !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
font-size: 16px !important;
color: rgba(255,255,255,0.7) !important;
flex-shrink: 0 !important;
margin-right: 8px !important;
}
/* COMPLETELY HIDE server-bar when OUTSIDE sidebar on mobile */
.server-bar:not(.inside-sidebar) {
display: none !important;
width: 0 !important;
min-width: 0 !important;
}
/* Server-bar inside sidebar — keep ORIGINAL layout (vertical, left side) */
.server-bar.inside-sidebar {
display: flex !important;
flex-direction: column !important;
width: 60px !important;
min-width: 60px !important;
height: auto !important;
flex-shrink: 0 !important;
}
.server-bar.inside-sidebar .server-icon {
width: 40px !important;
height: 40px !important;
margin: 2px auto !important;
}
.server-bar.inside-sidebar .server-sep {
width: 30px !important;
margin: 4px auto !important;
}
/* ── 2. ACCOUNT TABS — scrollable, moved right ── */
.page-header-tabs {
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch;
flex-wrap: nowrap !important;
white-space: nowrap !important;
max-width: calc(100% - 48px) !important;
margin-left: 48px !important;
padding: 8px 4px !important;
scrollbar-width: thin;
}
.page-header-tabs::-webkit-scrollbar { height: 3px; }
.page-header-tabs::-webkit-scrollbar-thumb { background: rgba(99,102,241,0.4); border-radius: 2px; }
.tab-pill { flex: 0 0 auto !important; }
/* ── 3. DM CARDS — LIST (1 column, not grid!) ── */
/* The container .dm-dialogs-list has display:grid with 3 columns — override to 1 */
.dm-dialogs-list,
#dmDialogsList,
.dm-list,
#dmListContainer {
display: flex !important;
flex-direction: column !important;
grid-template-columns: none !important;
gap: 4px !important;
padding: 6px !important;
}
#page-messages .dm-conv-item,
.dm-list .dm-conv-item,
.dm-dialogs-list .dm-conv-item,
#dmDialogsList .dm-conv-item,
#dmListContainer .dm-conv-item,
div.dm-conv-item {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 8px !important;
padding: 6px 10px !important;
margin-bottom: 3px !important;
min-height: 48px !important;
border-radius: 10px !important;
width: 100% !important;
}
#page-messages .dm-conv-main,
.dm-list .dm-conv-main,
.dm-dialogs-list .dm-conv-main,
#dmDialogsList .dm-conv-main,
#dmListContainer .dm-conv-main,
div.dm-conv-main {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 8px !important;
flex: 1 !important;
min-width: 0 !important;
}
.dm-conv-avatar-wrap {
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
flex-shrink: 0 !important;
}
.dm-conv-avatar-img {
width: 36px !important;
height: 36px !important;
}
.dm-conv-info {
flex: 1 !important;
min-width: 0 !important;
overflow: hidden !important;
}
.dm-conv-row {
display: flex !important;
align-items: center !important;
gap: 4px !important;
}
.dm-conv-name {
font-size: 13px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* Hide secondary info on mobile */
.dm-conv-best-friend-label,
.dm-conv-important-label,
.dm-conv-blocked-label,
.dm-conv-status-badge {
display: none !important;
}
/* Action buttons — smaller, horizontal */
.dm-conv-actions {
display: flex !important;
flex-direction: row !important;
gap: 2px !important;
flex-shrink: 0 !important;
}
.dm-conv-action-btn {
width: 28px !important;
height: 28px !important;
min-width: 28px !important;
padding: 0 !important;
border-radius: 6px !important;
}
.dm-conv-action-btn svg {
width: 13px !important;
height: 13px !important;
}
/* Hide some action buttons on mobile */
.dm-conv-mute-btn,
.dm-conv-unmute-btn,
.dm-conv-block-btn,
.dm-conv-unblock-btn,
.dm-conv-del-btn {
display: none !important;
}
/* Hide input when showing list */
#page-messages:not(.dm-open) #messageInputWrap {
display: none !important;
}
/* ── 4. CHAT HEADER — compact + "More" button ── */
.chat-header {
padding: 4px 6px !important;
gap: 2px !important;
}
.chat-header-left { gap: 4px !important; min-width: 0 !important; flex: 1 !important; }
.dm-back-btn {
padding: 0 !important;
width: 32px !important;
height: 32px !important;
min-width: 32px !important;
}
.dm-back-btn span { display: none !important; }
.chat-peer-avatar { width: 30px !important; height: 30px !important; min-width: 30px !important; font-size: 12px !important; }
.chat-peer-name { font-size: 13px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.chat-peer-status { font-size: 10px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.chat-header-actions { gap: 2px !important; flex-shrink: 0 !important; }
.chat-header-actions .hdr-btn,
.chat-header-actions .nav-icon-btn {
width: 30px !important;
height: 30px !important;
min-width: 30px !important;
padding: 0 !important;
border-radius: 6px !important;
}
.chat-header-actions .hdr-btn svg,
.chat-header-actions .nav-icon-btn svg { width: 15px !important; height: 15px !important; }
.chat-header-actions .hdr-btn span:not(.icon),
.chat-header-actions .nav-icon-btn span:not(.icon) { display: none !important; }
/* "More" button */
.av-header-more-btn {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 30px !important;
height: 30px !important;
min-width: 30px !important;
background: rgba(255,255,255,0.06) !important;
border: 1px solid rgba(255,255,255,0.1) !important;
border-radius: 6px !important;
color: #fff !important;
cursor: pointer !important;
flex-shrink: 0 !important;
padding: 0 !important;
}
.av-header-dropdown {
display: none !important;
position: absolute !important;
top: 44px !important;
right: 6px !important;
background: #1a1b2e !important;
border: 1px solid rgba(255,255,255,0.1) !important;
border-radius: 10px !important;
padding: 4px !important;
box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
z-index: 10000 !important;
min-width: 180px !important;
flex-direction: column !important;
gap: 2px !important;
}
.av-header-dropdown.open { display: flex !important; }
.av-header-dropdown button {
display: flex !important;
align-items: center !important;
gap: 8px !important;
padding: 8px 10px !important;
background: transparent !important;
border: none !important;
color: rgba(255,255,255,0.8) !important;
font-size: 12px !important;
border-radius: 6px !important;
cursor: pointer !important;
width: 100% !important;
text-align: left !important;
}
/* Hide video call button on mobile — move to "More" */
#videoBtn {
display: none !important;
}
/* Smooth sidebar transition */
.channel-sidebar {
transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
/* ── 5. CHAT INPUT — compact, all buttons visible ── */
.chat-input-wrap { padding: 4px 6px !important; }
.chat-input-box { gap: 2px !important; padding: 4px 6px !important; }
.chat-textarea { font-size: 15px !important; padding: 6px 8px !important; min-height: 32px !important; max-height: 80px !important; }
.input-btn { width: 30px !important; height: 30px !important; min-width: 30px !important; padding: 0 !important; }
.input-btn svg { width: 16px !important; height: 16px !important; }
.send-btn { width: 30px !important; height: 30px !important; min-width: 30px !important; padding: 0 !important; }
.send-btn svg { width: 14px !important; height: 14px !important; }
/* Channel chat input */
.ch-chat-input-wrap { gap: 2px !important; padding: 4px 6px !important; }
.ch-chat-textarea { font-size: 15px !important; padding: 6px 8px !important; min-height: 32px !important; max-height: 80px !important; flex: 1 !important; }
.ch-chat-input-btn { width: 30px !important; height: 30px !important; min-width: 30px !important; padding: 0 !important; font-size: 14px !important; }
.ch-chat-input-btns { gap: 2px !important; }
.ch-chat-send-btn { width: 30px !important; height: 30px !important; min-width: 30px !important; padding: 0 !important; }
.ch-chat-send-btn svg { width: 14px !important; height: 14px !important; }
/* ── 6. CASES — grid 1 column, keep card layout intact ── */
#accountCases,
#page-cases {
padding: 8px !important;
max-width: 100% !important;
}
.cv-cases-grid {
grid-template-columns: 1fr !important;
gap: 8px !important;
padding: 0 !important;
margin-bottom: 12px !important;
}
.cv-case-card2 {
max-width: 100% !important;
border-radius: 10px !important;
}
.cv-case-card2-banner {
height: 60px !important;
min-height: 60px !important;
}
.cv-case-card2-icon {
font-size: 24px !important;
}
.cv-case-card2-price-badge {
font-size: 10px !important;
padding: 2px 6px !important;
}
.cv-case-card2-owned-badge {
font-size: 10px !important;
padding: 2px 6px !important;
}
.cv-case-card2-body {
padding: 8px 10px !important;
}
.cv-case-card2-brand {
display: none !important;
}
.cv-case-card2-name {
font-size: 13px !important;
}
.cv-case-card2-desc {
display: none !important;
}
.cv-case-card2-btns {
gap: 6px !important;
}
.cv-case-card2-btn-open {
font-size: 11px !important;
padding: 6px 10px !important;
height: auto !important;
white-space: normal !important;
}
.cv-case-card2-btn-info {
width: 32px !important;
height: 32px !important;
font-size: 12px !important;
}
/* Inventory — 2 columns (wider cards) */
.cv-inventory-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 6px !important;
}
.cv-inventory-item {
padding: 8px 6px !important;
}
.cv-inventory-item-icon {
font-size: 24px !important;
}
.cv-inventory-item-name {
font-size: 11px !important;
}
.cv-inventory-item-rarity {
font-size: 9px !important;
}
.cv-inventory-item-actions {
gap: 4px !important;
}
.cv-inventory-item-actions button {
font-size: 9px !important;
padding: 3px 5px !important;
}
.cv-inventory-item-sell-price {
font-size: 9px !important;
}
.cv-inventory-item-expires {
font-size: 9px !important;
}
/* Exchange — 1 column */
.cv-exchange-grid {
grid-template-columns: 1fr !important;
gap: 6px !important;
}
.cv-exchange-card {
padding: 10px !important;
}
.cv-exchange-icon {
font-size: 22px !important;
}
.cv-exchange-name {
font-size: 12px !important;
}
.cv-exchange-cost {
font-size: 11px !important;
}
.cv-exchange-btn {
font-size: 10px !important;
padding: 4px 8px !important;
}
/* Quests — 1 column, keep card layout */
.cv-quests-list {
grid-template-columns: 1fr !important;
gap: 6px !important;
}
.cv-quest-card {
padding: 10px !important;
gap: 10px !important;
}
.cv-quest-desc {
font-size: 11px !important;
}
.cv-quest-btn-progress,
.cv-quest-btn-claim,
.cv-quest-btn-claimed,
.cv-quest-btn-visit,
.cv-quest-btn-answer {
font-size: 10px !important;
padding: 4px 8px !important;
}
/* History — 1 column */
.cv-history-list {
grid-template-columns: 1fr !important;
gap: 4px !important;
}
.cv-history-item {
padding: 6px 8px !important;
}
.cv-history-icon {
font-size: 18px !important;
}
.cv-history-name {
font-size: 12px !important;
}
.cv-history-rarity {
font-size: 10px !important;
}
.cv-history-date {
font-size: 10px !important;
}
/* Admin grid — 1 column */
.cv-admin-grid {
grid-template-columns: 1fr !important;
}
/* Cases balance + header */
.cv-cases-balance {
padding: 6px 10px !important;
}
.cv-cases-balance-value {
font-size: 16px !important;
}
.cv-cases-header h2 {
font-size: 16px !important;
}
/* UI buttons */
.cv-ui-btn {
min-width: 0 !important;
font-size: 11px !important;
padding: 8px 12px !important;
}
/* Section spacing */
.cv-inventory-section,
.cv-quests-section,
.cv-exchange-section,
.cv-history-section {
margin-top: 20px !important;
}
/* ── 7. NEWS — hide sidebar ── */
#page-news aside,
#page-news .sidebar,
[class*="news-sidebar"],
[class*="bp-sidebar"] { display: none !important; }
.bp-news-card { margin: 0 0 6px 0 !important; padding: 10px !important; }
.bp-news-changelog-grid { grid-template-columns: 1fr !important; }
/* ── 8. CHECKERS ── */
.ent-ck-board { width: calc(100vw - 32px) !important; max-width: calc(100vw - 32px) !important; }
/* ── 9. SHOP ── */
.av-shop-grid, .av-shop-items { grid-template-columns: 1fr !important; }
.av-shop-item button, .shop-item button { font-size: 11px !important; white-space: normal !important; word-wrap: break-word !important; }
/* ── 10. GENERAL ── */
.av3-modal, .modal-content, .cv-case-modal { max-width: 100vw !important; max-height: 100vh !important; border-radius: 0 !important; }
.av-blog-grid, .blog-grid { grid-template-columns: 1fr !important; }
.ent-game-grid { grid-template-columns: 1fr !important; }
.account-stats-grid { grid-template-columns: 1fr !important; }
.voice-visuals { display: none !important; }
.page_form__inner { flex-direction: column !important; }
.av-bubble-msg { max-width: 85% !important; font-size: 14px !important; word-wrap: break-word; }
}
/* Desktop: hide mobile elements */
@media only screen and (min-width: 769px) {
.av-header-more-btn,
.av-header-dropdown,
.av-sidebar-overlay {
display: none !important;
}
}
/* Tablet */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
.cv-cases-grid, .cv-inventory-grid, .cv-exchange-grid { grid-template-columns: repeat(2, 1fr) !important; }
.av-shop-grid, .av-shop-items { grid-template-columns: repeat(2, 1fr) !important; }
}
/* Desktop: sidebar visible, not fixed, no mobile elements */
@media only screen and (min-width: 769px) {
.channel-sidebar {
position: relative !important;
left: auto !important;
width: auto !important;
max-width: none !important;
display: flex !important;
flex-direction: column !important;
z-index: auto !important;
transition: none !important;
}
.server-bar {
display: flex !important;
width: auto !important;
min-width: auto !important;
}
.sidebar-toggle {
display: none !important;
}
}
/* Tablet (769-1024px) — sidebar visible compact */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
.channel-sidebar {
width: 220px !important;
min-width: 220px !important;
}
.sidebar-toggle {
display: none !important;
}
}
/* ═══ MOBILE + TABLET — адаптация UI (max-width: 1024px) ═══ */
@media only screen and (max-width: 1024px) {
/* ════════════════════════════════════════════════════
КАРТИНКИ В ЧАТЕ — показать полностью без обрезки
════════════════════════════════════════════════════ */
/* Основная обёртка картинки в ЛС */
.av-img-wrap,
.av-img-wrap.av-img-wrap,
body .av-img-wrap {
max-width: 90vw !important;
width: auto !important;
display: inline-block !important;
overflow: hidden !important;
border-radius: 12px !important;
}
/* Сама картинка в ЛС — ВАЖНО: object-fit: contain (не cover!)
cover = обрезает, contain = показывает полностью */
.av-img-wrap img,
.av-img-wrap img.img-preview,
body .av-img-wrap img {
max-width: 90vw !important;
max-height: 60vh !important;
width: auto !important;
height: auto !important;
min-height: 80px !important;
object-fit: contain !important;
border-radius: 12px !important;
display: block !important;
}
/* Старый класс .img-preview (используется в некоторых местах) */
.img-preview,
body .img-preview {
max-width: 90vw !important;
max-height: 60vh !important;
width: auto !important;
height: auto !important;
object-fit: contain !important;
border-radius: 10px !important;
display: block !important;
}
/* Картинки в чате канала (.ch-msg-image — inline-стиль max-width:360px) */
.ch-msg-image,
body .ch-msg-image {
max-width: 85vw !important;
max-height: 60vh !important;
width: auto !important;
height: auto !important;
object-fit: contain !important;
border-radius: 10px !important;
}
/* Старый .msg-image */
.msg-image,
.msg-image img,
body .msg-image,
body .msg-image img {
max-width: 85vw !important;
max-height: 60vh !important;
width: auto !important;
height: auto !important;
object-fit: contain !important;
}
/* Оверлей с кнопками (Скачать, Увеличить, Редактировать) */
.av-img-overlay {
position: absolute !important;
inset: 0 !important;
background: linear-gradient(transparent 50%, rgba(0,0,0,.6)) !important;
display: flex !important;
align-items: flex-end !important;
justify-content: flex-end !important;
padding: 8px !important;
gap: 6px !important;
opacity: 0 !important;
transition: opacity .2s !important;
border-radius: 12px !important;
}
.av-img-wrap:active .av-img-overlay,
.av-img-wrap:hover .av-img-overlay {
opacity: 1 !important;
}
/* ════════════════════════════════════════════════════
МОИ ОТПРАВЛЕННЫЕ СООБЩЕНИЯ — расширить контейнер
.msg-mine-cont имеет padding: 2px 16px 2px 48px + align-items: flex-end
+ max-width: 100% + overflow: hidden. Из-за этого картинки
урезаются по ширине. Расширяем контейнер на мобильных.
════════════════════════════════════════════════════ */
.msg-mine-cont,
body .msg-mine-cont,
.msg-group.msg-mine,
body .msg-group.msg-mine {
padding: 2px 8px 2px 8px !important;
max-width: 100% !important;
width: 100% !important;
align-items: flex-end !important;
box-sizing: border-box !important;
overflow: visible !important;
}
/* Внутренний div с текстом/контентом — ограничиваем разумно */
.msg-mine-cont > .msg-text,
.msg-mine-cont > div:not(.msg-reactions):not(.msg-compact-header):not(.av-file-card):not(.av-audio-card):not(.vmsg-wrap):not(.av-img-wrap) {
max-width: 85% !important;
width: fit-content !important;
}
/* Конкретно картинка внутри msg-mine-cont — широкая */
.msg-mine-cont .av-img-wrap,
.msg-mine-cont .av-img-wrap img,
.msg-group.msg-mine .av-img-wrap,
.msg-group.msg-mine .av-img-wrap img,
.msg-group.msg-mine .img-preview,
.msg-mine-cont .img-preview,
.msg-mine-cont .msg-image,
.msg-mine-cont .msg-image img {
max-width: 85vw !important;
max-height: 60vh !important;
width: auto !important;
height: auto !important;
object-fit: contain !important;
display: block !important;
}
/* Голосовое внутри msg-mine-cont — широкое */
.msg-mine-cont .voice-message,
.msg-group.msg-mine .voice-message,
.msg-mine-cont .av-audio-card,
.msg-group.msg-mine .av-audio-card {
max-width: 90vw !important;
min-width: 220px !important;
width: auto !important;
}
/* Файл внутри msg-mine-cont — широкий */
.msg-mine-cont .av-file-card,
.msg-group.msg-mine .av-file-card {
max-width: 90vw !important;
width: auto !important;
}
/* ════════════════════════════════════════════════════
IMAGE VIEWER (просмотр картинки во весь экран)
.av-img-viewer — overlay
.av-img-viewer-img — сама картинка
.av-img-viewer-toolbar — тулбар снизу
.av-img-viewer-close — кнопка закрытия
════════════════════════════════════════════════════ */
.av-img-viewer,
body .av-img-viewer {
position: fixed !important;
inset: 0 !important;
z-index: 99999 !important;
background: rgba(0, 0, 0, .95) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
}
/* Сама картинка в просмотре — на мобильных используем
всю доступную ширину с отступами по бокам */
.av-img-viewer-img,
body .av-img-viewer-img {
max-width: calc(100vw - 24px) !important;
max-height: calc(100vh - 140px) !important;
width: auto !important;
height: auto !important;
object-fit: contain !important;
border-radius: 8px !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, .6) !important;
user-select: none !important;
-webkit-user-drag: none !important;
}
.av-img-viewer-img.zoomed,
body .av-img-viewer-img.zoomed {
max-width: none !important;
max-height: none !important;
}
/* Кнопка закрытия — больше, легче нажать на мобильных */
.av-img-viewer-close,
body .av-img-viewer-close {
position: absolute !important;
top: 12px !important;
right: 12px !important;
width: 44px !important;
height: 44px !important;
border-radius: 12px !important;
background: rgba(255, 255, 255, .15) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border: 1px solid rgba(255, 255, 255, .2) !important;
color: #fff !important;
font-size: 22px !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
z-index: 10 !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, .3) !important;
}
.av-img-viewer-close:hover,
.av-img-viewer-close:active,
body .av-img-viewer-close:hover,
body .av-img-viewer-close:active {
background: rgba(255, 255, 255, .25) !important;
transform: scale(1.05) !important;
}
/* Тулбар внизу — адаптивный, помещается на мобильных */
.av-img-viewer-toolbar,
body .av-img-viewer-toolbar {
position: absolute !important;
bottom: 12px !important;
left: 8px !important;
right: 8px !important;
transform: none !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-wrap: wrap !important;
gap: 6px !important;
padding: 8px 10px !important;
background: rgba(20, 21, 26, .95) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border: 1px solid rgba(255, 255, 255, .1) !important;
border-radius: 14px !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, .5) !important;
z-index: 10 !important;
max-width: calc(100vw - 16px) !important;
box-sizing: border-box !important;
}
/* Кнопки в тулбаре — компактные, помещаются */
.av-viewer-btn,
body .av-viewer-btn {
height: 36px !important;
padding: 0 10px !important;
border-radius: 8px !important;
border: 1px solid rgba(255, 255, 255, .1) !important;
background: rgba(255, 255, 255, .08) !important;
color: rgba(255, 255, 255, .85) !important;
font-size: 12px !important;
font-weight: 500 !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
gap: 4px !important;
transition: all .15s !important;
white-space: nowrap !important;
flex-shrink: 0 !important;
}
.av-viewer-btn svg {
width: 16px !important;
height: 16px !important;
flex-shrink: 0 !important;
}
.av-viewer-btn:hover,
.av-viewer-btn:active,
body .av-viewer-btn:hover,
body .av-viewer-btn:active {
background: rgba(255, 255, 255, .15) !important;
color: #fff !important;
}
.av-viewer-btn.primary,
body .av-viewer-btn.primary {
background: linear-gradient(135deg, #5865f2, #7c3aed) !important;
border: none !important;
color: #fff !important;
box-shadow: 0 3px 10px rgba(88, 101, 242, .35) !important;
}
.av-viewer-btn.danger,
body .av-viewer-btn.danger {
background: rgba(237, 66, 69, .2) !important;
border-color: rgba(237, 66, 69, .3) !important;
color: #fca5a5 !important;
}
/* Разделитель — скрываем на мобильных для экономии места */
.av-viewer-sep,
body .av-viewer-sep {
display: none !important;
}
/* ════════════════════════════════════════════════════
IMAGE EDITOR (редактирование картинки)
.av-img-editor — overlay на весь экран
.av-img-editor-header — верхняя панель с кнопками
.av-img-editor-canvas-wrap — область с canvas
.av-img-editor-toolbar — нижняя панель с инструментами
════════════════════════════════════════════════════ */
.av-img-editor,
body .av-img-editor {
position: fixed !important;
inset: 0 !important;
z-index: 100000 !important;
background: rgba(15, 16, 20, .98) !important;
display: flex !important;
flex-direction: column !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
}
/* Хедер — компактный */
.av-img-editor-header,
body .av-img-editor-header {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 8px 12px !important;
background: rgba(255, 255, 255, .03) !important;
border-bottom: 1px solid rgba(255, 255, 255, .06) !important;
flex-shrink: 0 !important;
gap: 8px !important;
}
.av-img-editor-title,
body .av-img-editor-title {
font-size: 14px !important;
font-weight: 700 !important;
color: #fff !important;
display: flex !important;
align-items: center !important;
gap: 6px !important;
flex-shrink: 1 !important;
min-width: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
.av-img-editor-actions,
body .av-img-editor-actions {
display: flex !important;
gap: 6px !important;
flex-shrink: 0 !important;
}
/* Canvas — на всю доступную область */
.av-img-editor-canvas-wrap,
body .av-img-editor-canvas-wrap {
flex: 1 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: hidden !important;
position: relative !important;
background: repeating-conic-gradient(rgba(255, 255, 255, .03) 0% 25%, transparent 0% 50%) 50%/20px 20px !important;
min-height: 0 !important;
}
.av-img-editor-canvas-wrap canvas,
body .av-img-editor-canvas-wrap canvas {
max-width: calc(100vw - 16px) !important;
max-height: 100% !important;
width: auto !important;
height: auto !important;
object-fit: contain !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, .5) !important;
border-radius: 4px !important;
}
/* Нижний тулбар — адаптивный, скроллится по горизонтали */
.av-img-editor-toolbar,
body .av-img-editor-toolbar {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 6px !important;
padding: 8px 10px !important;
background: rgba(255, 255, 255, .03) !important;
border-top: 1px solid rgba(255, 255, 255, .06) !important;
flex-shrink: 0 !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch;
white-space: nowrap !important;
}
/* Инструменты — компактные */
.av-editor-tool,
body .av-editor-tool {
height: 34px !important;
padding: 0 10px !important;
border-radius: 8px !important;
border: 1px solid rgba(255, 255, 255, .08) !important;
background: rgba(255, 255, 255, .04) !important;
color: rgba(255, 255, 255, .75) !important;
font-size: 12px !important;
font-weight: 500 !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
gap: 4px !important;
transition: all .15s !important;
flex-shrink: 0 !important;
white-space: nowrap !important;
}
.av-editor-tool svg {
width: 16px !important;
height: 16px !important;
flex-shrink: 0 !important;
}
.av-editor-tool:hover,
.av-editor-tool:active,
body .av-editor-tool:hover,
body .av-editor-tool:active {
background: rgba(255, 255, 255, .1) !important;
color: #fff !important;
}
.av-editor-tool.active,
body .av-editor-tool.active {
background: rgba(88, 101, 242, .25) !important;
border-color: rgba(88, 101, 242, .5) !important;
color: #a5b4fc !important;
box-shadow: 0 2px 8px rgba(88, 101, 242, .3) !important;
}
/* Color picker — компактный */
.av-editor-color-picker,
body .av-editor-color-picker {
display: flex !important;
gap: 4px !important;
align-items: center !important;
flex-shrink: 0 !important;
}
.av-editor-color-swatch,
body .av-editor-color-swatch {
width: 24px !important;
height: 24px !important;
border-radius: 6px !important;
border: 2px solid transparent !important;
cursor: pointer !important;
transition: all .15s !important;
flex-shrink: 0 !important;
}
.av-editor-color-swatch:hover,
.av-editor-color-swatch.active,
body .av-editor-color-swatch:hover,
body .av-editor-color-swatch.active {
border-color: #fff !important;
transform: scale(1.15) !important;
}
/* Слайдер размера — компактный */
.av-editor-size-slider,
body .av-editor-size-slider {
width: 80px !important;
accent-color: #5865f2 !important;
flex-shrink: 0 !important;
}
/* ════════════════════════════════════════════════════
АУДИОФАЙЛЫ в чате (.av-audio-card и .vmsg-wrap)
.av-audio-card имеет max-width:340px, .vmsg-wrap max-width:300px
Расширяем на мобильных чтобы поместился плеер, прогрессбар,
кнопка скачать, имя файла
════════════════════════════════════════════════════ */
.av-audio-card,
body .av-audio-card {
max-width: 90vw !important;
width: auto !important;
min-width: 0 !important;
padding: 10px 12px !important;
border-radius: 14px !important;
box-sizing: border-box !important;
}
.av-audio-top {
gap: 10px !important;
}
.av-audio-icon {
width: 38px !important;
height: 38px !important;
flex-shrink: 0 !important;
}
.av-audio-info {
flex: 1 1 0 !important;
min-width: 0 !important;
}
/* Имя аудио — переносится если длинное */
.av-audio-name {
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
word-break: break-word !important;
font-size: 13px !important;
line-height: 1.3 !important;
}
.av-audio-meta {
font-size: 11px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.av-audio-play {
flex-shrink: 0 !important;
width: 36px !important;
height: 36px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Прогрессбар аудио — на всю ширину карточки */
.av-audio-progress-wrap {
width: 100% !important;
margin-top: 8px !important;
}
.av-audio-actions {
margin-top: 6px !important;
}
/* vmsg-wrap (старый класс голосовых) — расширяем */
.vmsg-wrap,
body .vmsg-wrap {
max-width: 90vw !important;
width: auto !important;
min-width: 220px !important;
padding: 8px 12px !important;
gap: 8px !important;
border-radius: 20px !important;
box-sizing: border-box !important;
}
/* ════════════════════════════════════════════════════
МОДАЛЬНЫЕ ОКНА ЧАТА КАНАЛА, ВОПРОСОВ, ПРЕДЛОЖЕНИЙ
(.av3-modal-backdrop / .av3-modal-wrap / .av3-modal-box)
ВАЖНО: правила применяются ТОЛЬКО к открытым модалкам
(через .open класс или [style*="display: flex"]).
Если применить к .av3-modal-backdrop без условия, то
ВСЕ скрытые модалки (#supportModal, #newDmModal и т.д.)
станут видимыми при загрузке страницы — это баг.
════════════════════════════════════════════════════ */
/* Backdrop — только когда открыт */
.av3-modal-backdrop.open,
.av3-modal-backdrop[style*="display: flex"],
.av3-modal-backdrop[style*="display:flex"],
body .av3-modal-backdrop.open,
body .av3-modal-backdrop[style*="display: flex"],
body .av3-modal-backdrop[style*="display:flex"] {
position: fixed !important;
inset: 0 !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
padding: 0 !important;
background: rgba(5, 5, 7, .9) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
z-index: 99999 !important;
align-items: stretch !important;
justify-content: stretch !important;
overflow: hidden !important;
}
/* Wrapper — на весь экран, только когда родитель открыт.
Используем 100dvh (dynamic viewport height) — корректно
работает на мобильных Safari/Chrome с динамической адресной
строкой. Fallback на 100vh для старых браузеров. */
.av3-modal-backdrop.open .av3-modal-wrap,
.av3-modal-backdrop[style*="display: flex"] .av3-modal-wrap,
.av3-modal-backdrop[style*="display:flex"] .av3-modal-wrap,
body .av3-modal-backdrop.open .av3-modal-wrap,
body .av3-modal-backdrop[style*="display: flex"] .av3-modal-wrap,
body .av3-modal-backdrop[style*="display:flex"] .av3-modal-wrap {
max-width: 100vw !important;
width: 100vw !important;
max-height: 100vh !important;
max-height: 100dvh !important;
height: 100vh !important;
height: 100dvh !important;
margin: 0 !important;
border-radius: 0 !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
transform: none !important;
transition: none !important;
box-sizing: border-box !important;
}
/* Box — на весь экран, flex column, только когда родитель открыт.
height: auto чтобы не было переопределения inline max-height
контента, но max-height ограничивает размер экраном. */
.av3-modal-backdrop.open .av3-modal-box,
.av3-modal-backdrop[style*="display: flex"] .av3-modal-box,
.av3-modal-backdrop[style*="display:flex"] .av3-modal-box,
body .av3-modal-backdrop.open .av3-modal-box,
body .av3-modal-backdrop[style*="display: flex"] .av3-modal-box,
body .av3-modal-backdrop[style*="display:flex"] .av3-modal-box {
max-width: 100vw !important;
width: 100vw !important;
max-height: 100vh !important;
max-height: 100dvh !important;
height: 100vh !important;
height: 100dvh !important;
border-radius: 0 !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
flex: 1 1 auto !important;
box-sizing: border-box !important;
border: none !important;
}
/* Внутренний body модалки — скроллится (только когда открыт) */
.av3-modal-backdrop.open .av3-modal-body,
.av3-modal-backdrop[style*="display: flex"] .av3-modal-body,
.av3-modal-backdrop[style*="display:flex"] .av3-modal-body,
body .av3-modal-backdrop.open .av3-modal-body,
body .av3-modal-backdrop[style*="display: flex"] .av3-modal-body,
body .av3-modal-backdrop[style*="display:flex"] .av3-modal-body {
flex: 1 1 0 !important;
min-height: 0 !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
padding: 12px 14px !important;
}
/* Хедер/футер — компактные (только когда открыт) */
.av3-modal-backdrop.open .av3-modal-header,
.av3-modal-backdrop[style*="display: flex"] .av3-modal-header,
.av3-modal-backdrop[style*="display:flex"] .av3-modal-header,
body .av3-modal-backdrop.open .av3-modal-header,
body .av3-modal-backdrop[style*="display: flex"] .av3-modal-header,
body .av3-modal-backdrop[style*="display:flex"] .av3-modal-header,
.av3-modal-backdrop.open .av3-modal-header-inner,
.av3-modal-backdrop[style*="display: flex"] .av3-modal-header-inner,
.av3-modal-backdrop[style*="display:flex"] .av3-modal-header-inner {
padding: 10px 14px 8px !important;
flex-shrink: 0 !important;
}
.av3-modal-backdrop.open .av3-modal-footer,
.av3-modal-backdrop[style*="display: flex"] .av3-modal-footer,
.av3-modal-backdrop[style*="display:flex"] .av3-modal-footer,
body .av3-modal-backdrop.open .av3-modal-footer,
body .av3-modal-backdrop[style*="display: flex"] .av3-modal-footer,
body .av3-modal-backdrop[style*="display:flex"] .av3-modal-footer {
padding: 10px 14px !important;
flex-shrink: 0 !important;
}
/* Иконка в хедере — компактная (только когда открыт) */
.av3-modal-backdrop.open .av3-modal-icon,
.av3-modal-backdrop[style*="display: flex"] .av3-modal-icon,
.av3-modal-backdrop[style*="display:flex"] .av3-modal-icon,
body .av3-modal-backdrop.open .av3-modal-icon,
body .av3-modal-backdrop[style*="display: flex"] .av3-modal-icon,
body .av3-modal-backdrop[style*="display:flex"] .av3-modal-icon {
width: 40px !important;
height: 40px !important;
}
/* ════════════════════════════════════════════════════
КОРИЧНЕВАЯ ФИКС: футер с кнопками "Отмена" / "Задать вопрос"
/ "Опубликовать предложение" создаётся в CloudVox_channels.js
как без класса. Ловим через
attribute-селектор по border-top + display:flex.
Гарантируем что он ВИДЕН (flex-shrink: 0) и не уходит
за пределы экрана.
════════════════════════════════════════════════════ */
.av3-modal-backdrop.open .av3-modal-box > div[style*="border-top:1px solid rgba(255,255,255,.06)"][style*="display:flex"],
.av3-modal-backdrop[style*="display: flex"] .av3-modal-box > div[style*="border-top:1px solid rgba(255,255,255,.06)"][style*="display:flex"],
.av3-modal-backdrop[style*="display:flex"] .av3-modal-box > div[style*="border-top:1px solid rgba(255,255,255,.06)"][style*="display:flex"],
body .av3-modal-backdrop.open .av3-modal-box > div[style*="border-top:1px solid rgba(255,255,255,.06)"][style*="display:flex"],
body .av3-modal-backdrop[style*="display: flex"] .av3-modal-box > div[style*="border-top:1px solid rgba(255,255,255,.06)"][style*="display:flex"],
body .av3-modal-backdrop[style*="display:flex"] .av3-modal-box > div[style*="border-top:1px solid rgba(255,255,255,.06)"][style*="display:flex"] {
flex-shrink: 0 !important;
padding: 10px 14px !important;
gap: 8px !important;
display: flex !important;
position: relative !important;
z-index: 5 !important;
}
/* Кнопки в футере — нормально размер */
.av3-modal-backdrop.open .av3-modal-box > div[style*="border-top:1px solid rgba(255,255,255,.06)"][style*="display:flex"] button,
.av3-modal-backdrop[style*="display: flex"] .av3-modal-box > div[style*="border-top:1px solid rgba(255,255,255,.06)"][style*="display:flex"] button,
.av3-modal-backdrop[style*="display:flex"] .av3-modal-box > div[style*="border-top:1px solid rgba(255,255,255,.06)"][style*="display:flex"] button,
body .av3-modal-backdrop.open .av3-modal-box > div[style*="border-top:1px solid rgba(255,255,255,.06)"][style*="display:flex"] button,
body .av3-modal-backdrop[style*="display: flex"] .av3-modal-box > div[style*="border-top:1px solid rgba(255,255,255,.06)"][style*="display:flex"] button,
body .av3-modal-backdrop[style*="display:flex"] .av3-modal-box > div[style*="border-top:1px solid rgba(255,255,255,.06)"][style*="display:flex"] button {
flex-shrink: 0 !important;
padding: 10px 14px !important;
font-size: 13px !important;
min-height: 40px !important;
}
/* Кнопка "Задать вопрос" / "Опубликовать предложение" —
забирает оставшееся место */
.av3-modal-backdrop.open .av3-modal-box > div[style*="border-top:1px solid rgba(255,255,255,.06)"][style*="display:flex"] button[style*="flex:1"],
.av3-modal-backdrop[style*="display: flex"] .av3-modal-box > div[style*="border-top:1px solid rgba(255,255,255,.06)"][style*="display:flex"] button[style*="flex:1"],
.av3-modal-backdrop[style*="display:flex"] .av3-modal-box > div[style*="border-top:1px solid rgba(255,255,255,.06)"][style*="display:flex"] button[style*="flex:1"],
body .av3-modal-backdrop.open .av3-modal-box > div[style*="border-top:1px solid rgba(255,255,255,.06)"][style*="display:flex"] button[style*="flex:1"],
body .av3-modal-backdrop[style*="display: flex"] .av3-modal-box > div[style*="border-top:1px solid rgba(255,255,255,.06)"][style*="display:flex"] button[style*="flex:1"],
body .av3-modal-backdrop[style*="display:flex"] .av3-modal-box > div[style*="border-top:1px solid rgba(255,255,255,.06)"][style*="display:flex"] button[style*="flex:1"] {
flex: 1 1 auto !important;
min-width: 0 !important;
}
/* Контент внутри модалок Q/S с inline max-height:60vh —
только когда модалка открыта, убираем ограничение.
ВАЖНО: делаем его flex:1 чтобы занимал доступное место
между хедером и футером, скроллится внутри себя. */
.av3-modal-backdrop.open .av3-modal-box > div[style*="max-height:60vh"],
.av3-modal-backdrop.open .av3-modal-box > div[style*="max-height: 60vh"],
.av3-modal-backdrop[style*="display: flex"] .av3-modal-box > div[style*="max-height:60vh"],
.av3-modal-backdrop[style*="display: flex"] .av3-modal-box > div[style*="max-height: 60vh"],
.av3-modal-backdrop[style*="display:flex"] .av3-modal-box > div[style*="max-height:60vh"],
.av3-modal-backdrop[style*="display:flex"] .av3-modal-box > div[style*="max-height: 60vh"] {
max-height: none !important;
flex: 1 1 0 !important;
min-height: 0 !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
padding: 12px 14px !important;
}
/* Поля ввода внутри открытой модалки — компактные */
.av3-modal-backdrop.open .av3-modal-box input,
.av3-modal-backdrop.open .av3-modal-box textarea,
.av3-modal-backdrop.open .av3-modal-box select,
.av3-modal-backdrop[style*="display: flex"] .av3-modal-box input,
.av3-modal-backdrop[style*="display: flex"] .av3-modal-box textarea,
.av3-modal-backdrop[style*="display: flex"] .av3-modal-box select,
.av3-modal-backdrop[style*="display:flex"] .av3-modal-box input,
.av3-modal-backdrop[style*="display:flex"] .av3-modal-box textarea,
.av3-modal-backdrop[style*="display:flex"] .av3-modal-box select {
font-size: 14px !important;
padding: 10px 14px !important;
}
/* Сетка 2 колонок внутри открытой модалки → 1 колонка */
.av3-modal-backdrop.open .av3-modal-box [style*="grid-template-columns:1fr 1fr"],
.av3-modal-backdrop.open .av3-modal-box [style*="grid-template-columns: 1fr 1fr"],
.av3-modal-backdrop[style*="display: flex"] .av3-modal-box [style*="grid-template-columns:1fr 1fr"],
.av3-modal-backdrop[style*="display: flex"] .av3-modal-box [style*="grid-template-columns: 1fr 1fr"],
.av3-modal-backdrop[style*="display:flex"] .av3-modal-box [style*="grid-template-columns:1fr 1fr"],
.av3-modal-backdrop[style*="display:flex"] .av3-modal-box [style*="grid-template-columns: 1fr 1fr"] {
grid-template-columns: 1fr !important;
gap: 8px !important;
}
/* Сетка 3 колонок → 1 колонка */
.av3-modal-backdrop.open .av3-modal-box [style*="grid-template-columns:1fr 1fr 1fr"],
.av3-modal-backdrop.open .av3-modal-box [style*="grid-template-columns: 1fr 1fr 1fr"],
.av3-modal-backdrop[style*="display: flex"] .av3-modal-box [style*="grid-template-columns:1fr 1fr 1fr"],
.av3-modal-backdrop[style*="display: flex"] .av3-modal-box [style*="grid-template-columns: 1fr 1fr 1fr"],
.av3-modal-backdrop[style*="display:flex"] .av3-modal-box [style*="grid-template-columns:1fr 1fr 1fr"],
.av3-modal-backdrop[style*="display:flex"] .av3-modal-box [style*="grid-template-columns: 1fr 1fr 1fr"] {
grid-template-columns: 1fr !important;
gap: 8px !important;
}
/* Просмотр треда — убрать max-height:80vh (только когда открыт) */
.av3-modal-backdrop.open .av3-modal-box [style*="max-height:80vh"],
.av3-modal-backdrop.open .av3-modal-box [style*="max-height: 80vh"],
.av3-modal-backdrop[style*="display: flex"] .av3-modal-box [style*="max-height:80vh"],
.av3-modal-backdrop[style*="display: flex"] .av3-modal-box [style*="max-height: 80vh"],
.av3-modal-backdrop[style*="display:flex"] .av3-modal-box [style*="max-height:80vh"],
.av3-modal-backdrop[style*="display:flex"] .av3-modal-box [style*="max-height: 80vh"] {
max-height: none !important;
}
/* ════════════════════════════════════════════════════
CHANNEL CHAT OVERLAY — чат канала на весь экран
JS ставит inline-style: position:fixed; inset: 0 0 0 60px
(left:60px из-за sidebar). На мобильных sidebar скрыт,
поэтому делаем overlay на весь экран. !important
перебивает inline-style.
ВАЖНО: НЕ ставим display: flex !important — иначе overlay
открывается при загрузке страницы.
ВАЖНО: НЕ ставим overflow: hidden — ломает скролл сообщений.
════════════════════════════════════════════════════ */
#channelChatOverlay,
body #channelChatOverlay,
#channelChatOverlay[style*="inset"],
#channelChatOverlay[style*="left:60px"],
#channelChatOverlay[style*="left: 60px"],
#channelChatOverlay[style*="left:312px"],
#channelChatOverlay[style*="left: 312px"] {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
inset: 0 !important;
width: 100vw !important;
height: 100vh !important;
height: 100dvh !important;
max-width: 100vw !important;
max-height: 100vh !important;
max-height: 100dvh !important;
z-index: 100 !important;
flex-direction: column !important;
background: #1a1b26 !important;
box-sizing: border-box !important;
}
/* Когда overlay открыт (через inline display:flex) —
гарантируем что display именно flex */
#channelChatOverlay[style*="display: flex"],
#channelChatOverlay[style*="display:flex"],
body #channelChatOverlay[style*="display: flex"],
body #channelChatOverlay[style*="display:flex"] {
display: flex !important;
}
/* Внутренние элементы channelChatOverlay — на всю ширину
ВАЖНО: НЕ ставим flex:1 на все div — ломает header/input */
#channelChatOverlay > .ch-chat-header {
flex-shrink: 0 !important;
width: 100% !important;
}
/* ════════════════════════════════════════════════════
FORUM OVERLAY — вопросы/предложения на весь экран
JS (CloudVox_channels.js:3174) создаёт #forumOverlay
с inline style="position:fixed;top:0;right:0;bottom:0;
z-index:100;display:flex;flex-direction:column;
background:#1a1b26;" и потом ставит left:312px.
На мобильных sidebar скрыт — делаем на весь экран.
════════════════════════════════════════════════════ */
#forumOverlay,
body #forumOverlay,
#forumOverlay[style*="left"],
#forumOverlay[style*="left:312px"],
#forumOverlay[style*="left: 312px"] {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
inset: 0 !important;
width: 100vw !important;
height: 100vh !important;
height: 100dvh !important;
max-width: 100vw !important;
max-height: 100vh !important;
max-height: 100dvh !important;
z-index: 100 !important;
flex-direction: column !important;
background: #1a1b26 !important;
box-sizing: border-box !important;
}
/* Когда forumOverlay открыт */
#forumOverlay[style*="display: flex"],
#forumOverlay[style*="display:flex"],
body #forumOverlay[style*="display: flex"],
body #forumOverlay[style*="display:flex"] {
display: flex !important;
}
/* Внутренние элементы forumOverlay */
#forumOverlay > div:first-child {
flex-shrink: 0 !important;
}
#forumContent {
flex: 1 1 0 !important;
min-height: 0 !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
width: 100% !important;
}
/* Сетка карточек вопросов/предложений — 1 колонка на мобильных */
#forumContent [style*="grid-template-columns:repeat(auto-fill,minmax(340px,1fr))"],
#forumContent [style*="grid-template-columns: repeat(auto-fill, minmax(340px, 1fr))"] {
grid-template-columns: 1fr !important;
gap: 10px !important;
}
/* ════════════════════════════════════════════════════
ПОЛЕ ВВОДА СООБЩЕНИЯ В ЧАТЕ КАНАЛА — больше на мобильных
Кнопки 44x44 (десктоп) → 48x48 (мобиль)
Поле ввода выше, padding больше, font 16px (для iOS
чтобы не было зума при фокусе)
════════════════════════════════════════════════════ */
.ch-chat-input-area,
body .ch-chat-input-area {
padding: 10px 12px !important;
}
.ch-chat-input-wrap,
body .ch-chat-input-wrap {
padding: 10px 10px 10px 16px !important;
gap: 8px !important;
min-height: 60px !important;
border-radius: 16px !important;
}
.ch-chat-textarea,
body .ch-chat-textarea {
font-size: 16px !important;
padding: 12px 0 !important;
max-height: 140px !important;
line-height: 1.45 !important;
}
.ch-chat-input-btns,
body .ch-chat-input-btns {
gap: 4px !important;
}
.ch-chat-input-btn,
body .ch-chat-input-btn {
width: 48px !important;
height: 48px !important;
border-radius: 12px !important;
font-size: 22px !important;
flex-shrink: 0 !important;
}
.ch-attach-left,
body .ch-attach-left {
width: 48px !important;
height: 48px !important;
font-size: 22px !important;
}
/* INFO BAR — на мобильных компактнее но с дизайном */
.ch-chat-info-bar,
body .ch-chat-info-bar {
padding: 10px 14px !important;
font-size: 12px !important;
gap: 8px !important;
}
.ch-chat-info-icon,
body .ch-chat-info-icon {
width: 26px !important;
height: 26px !important;
font-size: 13px !important;
border-radius: 7px !important;
}
.ch-chat-info-edit,
.ch-chat-info-close,
body .ch-chat-info-edit,
body .ch-chat-info-close {
width: 32px !important;
height: 32px !important;
font-size: 14px !important;
border-radius: 8px !important;
}
/* ════════════════════════════════════════════════════
ЧАТ КАНАЛА — УБИРАЕМ БОКОВЫЕ ОТСТУПЫ
Сообщения, header, info-bar, input-area имеют padding
22px по бокам — на мобильных это слишком много,
чат выглядит "узким". Уменьшаем до 8-12px.
════════════════════════════════════════════════════ */
/* Header чата — меньше отступы */
.ch-chat-header,
body .ch-chat-header {
padding: 10px 12px !important;
gap: 10px !important;
}
/* Сообщения — меньше боковых отступов */
.ch-chat-messages,
body .ch-chat-messages {
padding: 10px 10px !important;
}
/* Поле ввода — меньше боковых отступов */
.ch-chat-input-area,
body .ch-chat-input-area {
padding: 8px 10px !important;
}
/* Info bar — меньше боковых отступов */
.ch-chat-info-bar,
body .ch-chat-info-bar {
padding: 10px 12px !important;
}
/* Сами сообщения — максимум ширины */
.ch-chat-messages .msg-group,
.ch-chat-messages .msg-cont,
.ch-chat-messages .ch-msg,
body .ch-chat-messages .msg-group,
body .ch-chat-messages .msg-cont {
max-width: 100% !important;
width: 100% !important;
}
/* ════════════════════════════════════════════════════
НАСТРОЙКИ КАНАЛА — поле "Информация канала"
.av-input и кнопки в модалке настроек. Если переменные
--input-bg/--input-border не определены, поле выглядит
без дизайна. Даём явный стиль.
════════════════════════════════════════════════════ */
.av-input,
body .av-input,
#editChannelInfo,
body #editChannelInfo,
textarea.av-input,
input.av-input {
width: 100% !important;
padding: 12px 14px !important;
background: rgba(255, 255, 255, .04) !important;
border: 1.5px solid rgba(255, 255, 255, .1) !important;
border-radius: 12px !important;
color: #fff !important;
font-size: 14px !important;
font-family: inherit !important;
outline: none !important;
box-sizing: border-box !important;
transition: border-color .2s, box-shadow .2s, background .2s !important;
line-height: 1.5 !important;
}
.av-input:focus,
body .av-input:focus,
#editChannelInfo:focus,
body #editChannelInfo:focus,
textarea.av-input:focus,
input.av-input:focus {
border-color: rgba(99, 102, 241, .5) !important;
background: rgba(99, 102, 241, .04) !important;
box-shadow: 0 0 0 3px rgba(99, 102, 241, .12) !important;
}
.av-input::placeholder,
#editChannelInfo::placeholder,
textarea.av-input::placeholder,
input.av-input::placeholder {
color: rgba(255, 255, 255, .35) !important;
}
/* Кнопка "Сохранить" в настройках */
.av-btn-save,
body .av-btn-save {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
padding: 12px 22px !important;
background: linear-gradient(135deg, #23a55a, #00b0f4) !important;
border: none !important;
border-radius: 12px !important;
color: #fff !important;
font-weight: 700 !important;
font-size: 14px !important;
cursor: pointer !important;
box-shadow: 0 4px 14px rgba(35, 165, 90, .3) !important;
transition: transform .15s, box-shadow .15s !important;
}
.av-btn-save:hover,
body .av-btn-save:hover,
.av-btn-save:active,
body .av-btn-save:active {
transform: translateY(-1px) !important;
box-shadow: 0 6px 20px rgba(35, 165, 90, .4) !important;
}
/* Кнопка "Отмена" (modal-btn secondary) */
.modal-btn.secondary,
body .modal-btn.secondary {
padding: 12px 22px !important;
background: rgba(255, 255, 255, .05) !important;
border: 1px solid rgba(255, 255, 255, .1) !important;
border-radius: 12px !important;
color: rgba(255, 255, 255, .7) !important;
font-weight: 600 !important;
font-size: 14px !important;
cursor: pointer !important;
transition: background .15s, color .15s !important;
}
.modal-btn.secondary:hover,
body .modal-btn.secondary:hover {
background: rgba(255, 255, 255, .1) !important;
color: #fff !important;
}
/* Заголовок секции в настройках */
.ch-settings-section-title,
body .ch-settings-section-title {
font-size: 12px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: .5px !important;
color: rgba(255, 255, 255, .5) !important;
margin-bottom: 8px !important;
margin-top: 4px !important;
}
/* ════════════════════════════════════════════════════
DROPDOWN 3-ТОЧЕК в чате канала
JS создаёт .av-input-dropdown с inline bottom:44px;top:auto
Но в CloudVox.css есть .av-header-dropdown { top: 44px !important }
которое перебивает inline top:auto. Из-за этого dropdown
открывается ВНИЗ от кнопки и пункты уходят за нижний край.
Исправляем: для .av-input-dropdown явно ставим bottom и
max-height + overflow-y:auto.
════════════════════════════════════════════════════ */
.av-input-dropdown,
body .av-input-dropdown,
.av-input-dropdown.av-header-dropdown,
body .av-input-dropdown.av-header-dropdown {
top: auto !important;
bottom: 50px !important;
right: 6px !important;
left: auto !important;
position: absolute !important;
max-height: 70vh !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
min-width: 200px !important;
max-width: calc(100vw - 12px) !important;
z-index: 10001 !important;
padding: 6px !important;
gap: 2px !important;
flex-direction: column !important;
box-sizing: border-box !important;
}
/* Если dropdown не помещается снизу — открываем вверх
(через max-height и overflow) */
.av-input-dropdown.open,
body .av-input-dropdown.open {
display: flex !important;
}
/* Кнопки внутри dropdown — нормально размер, удобно нажимать */
.av-input-dropdown button,
body .av-input-dropdown button {
padding: 12px 14px !important;
font-size: 14px !important;
min-height: 44px !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
text-align: left !important;
width: 100% !important;
background: transparent !important;
border: none !important;
color: rgba(255, 255, 255, .85) !important;
border-radius: 8px !important;
cursor: pointer !important;
flex-shrink: 0 !important;
}
.av-input-dropdown button:hover,
.av-input-dropdown button:active,
body .av-input-dropdown button:hover,
body .av-input-dropdown button:active {
background: rgba(99, 102, 241, .15) !important;
color: #fff !important;
}
/* Иконки в кнопках dropdown */
.av-input-dropdown button span,
body .av-input-dropdown button span {
flex-shrink: 0 !important;
}
/* ════════════════════════════════════════════════════
HEADER DROPDOWN (3 точки в шапке чата)
.av-header-dropdown — выпадающее меню в шапке
CloudVox.css ставит top:44px !important — открывается вниз.
На мобильных это нормально (вверху есть место), но добавим
max-height + overflow на случай если пунктов много.
════════════════════════════════════════════════════ */
.av-header-dropdown:not(.av-input-dropdown),
body .av-header-dropdown:not(.av-input-dropdown) {
max-height: calc(100vh - 60px) !important;
max-height: calc(100dvh - 60px) !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
min-width: 200px !important;
max-width: calc(100vw - 12px) !important;
}
.av-header-dropdown button,
body .av-header-dropdown button {
padding: 12px 14px !important;
font-size: 14px !important;
min-height: 44px !important;
flex-shrink: 0 !important;
}
/* ════════════════════════════════════════════════════
БОЛЬШИЕ ЭМОДЗИ (1-5 штук в сообщении)
На десктопе .msg-emoji-only = 140px (1 emoji), 108px (2),
84px (3), 64px (4), 52px (5). На мобильных это слишком
большие — не помещаются на экране. Уменьшаем.
════════════════════════════════════════════════════ */
.msg-emoji-only,
body .msg-emoji-only {
font-size: 64px !important;
line-height: 1.1 !important;
padding: 6px 4px !important;
}
.msg-emoji-only.msg-emoji-2,
body .msg-emoji-only.msg-emoji-2 {
font-size: 52px !important;
}
.msg-emoji-only.msg-emoji-3,
body .msg-emoji-only.msg-emoji-3 {
font-size: 44px !important;
}
.msg-emoji-only.msg-emoji-4,
body .msg-emoji-only.msg-emoji-4 {
font-size: 38px !important;
}
.msg-emoji-only.msg-emoji-5,
body .msg-emoji-only.msg-emoji-5 {
font-size: 32px !important;
}
/* ════════════════════════════════════════════════════
EMOJI PICKER — скрыть поиск по эмодзи на мобильных
В CloudVox.js и CloudVox_channels.js поиск создаётся как
input с placeholder '🔍 Поиск эмодзи...' первым ребёнком
в #emojiPickerPanel и #chChatEmojiPanel. Скрываем через
attribute-селектор по placeholder.
════════════════════════════════════════════════════ */
.emoji-picker input[placeholder*="Поиск эмодзи"],
.emoji-panel input[placeholder*="Поиск эмодзи"],
#emojiPanel input[placeholder*="Поиск эмодзи"],
#emojiPickerPanel input[placeholder*="Поиск эмодзи"],
#chChatEmojiPanel input[placeholder*="Поиск эмодзи"],
body .emoji-picker input[placeholder*="Поиск эмодзи"],
body .emoji-panel input[placeholder*="Поиск эмодзи"],
body #emojiPanel input[placeholder*="Поиск эмодзи"],
body #emojiPickerPanel input[placeholder*="Поиск эмодзи"],
body #chChatEmojiPanel input[placeholder*="Поиск эмодзи"],
/* На случай если классы другие */
.emoji-search,
.emoji-search-input,
.emoji-filter,
.emoji-search-wrap {
display: none !important;
}
/* ════════════════════════════════════════════════════
ГОЛОСОВЫЕ СООБЩЕНИЯ — расширить на мобильных
════════════════════════════════════════════════════ */
.voice-message,
body .voice-message {
max-width: 90vw !important;
width: auto !important;
min-width: 220px !important;
padding: 10px 14px !important;
gap: 10px !important;
border-radius: 20px !important;
}
.voice-message .voice-progress-wrap,
.voice-message .voice-progress-bar {
min-width: 120px !important;
}
.voice-message .voice-play-btn {
width: 38px !important;
height: 38px !important;
flex-shrink: 0 !important;
}
.voice-message .voice-duration {
font-size: 12px !important;
white-space: nowrap !important;
}
/* ════════════════════════════════════════════════════
КАРТОЧКА ФАЙЛА + ПРЕДУПРЕЖДЕНИЕ ОБ ОПАСНОМ ФАЙЛЕ
════════════════════════════════════════════════════ */
.av-file-card,
body .av-file-card {
max-width: 90vw !important;
width: auto !important;
min-width: 0 !important;
padding: 12px 14px !important;
border-radius: 14px !important;
box-sizing: border-box !important;
}
.av-file-card.danger,
body .av-file-card.danger {
max-width: 90vw !important;
border-width: 1.5px !important;
}
.av-file-top {
gap: 10px !important;
}
.av-file-ext-badge {
width: 40px !important;
height: 40px !important;
flex-shrink: 0 !important;
}
.av-file-info {
flex: 1 1 0 !important;
min-width: 0 !important;
}
.av-file-name {
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
word-break: break-word !important;
font-size: 13px !important;
line-height: 1.3 !important;
}
.av-file-size {
font-size: 11px !important;
}
/* Кнопка скачать */
.av-file-dl-btn {
flex-shrink: 0 !important;
width: 36px !important;
height: 36px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Предупреждение об опасном файле — показать ПОЛНОСТЬЮ */
.av-file-danger-note,
body .av-file-danger-note {
display: flex !important;
align-items: flex-start !important;
gap: 8px !important;
margin-top: 10px !important;
padding: 10px 12px !important;
background: rgba(237, 66, 69, .1) !important;
border: 1px solid rgba(237, 66, 69, .25) !important;
border-radius: 10px !important;
font-size: 12px !important;
line-height: 1.4 !important;
color: #fca5a5 !important;
white-space: normal !important;
overflow: visible !important;
word-break: break-word !important;
max-width: 100% !important;
width: 100% !important;
box-sizing: border-box !important;
}
.av-file-danger-note span {
flex: 1 !important;
display: block !important;
white-space: normal !important;
word-break: break-word !important;
font-size: 12px !important;
line-height: 1.4 !important;
}
.av-file-danger-note svg {
flex-shrink: 0 !important;
margin-top: 1px !important;
}
/* Прогрессбар загрузки */
.av-upload-progress {
margin-top: 8px !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* ════════════════════════════════════════════════════
3 ТОЧКИ В ЧАТЕ — такого же размера как медиа/заметки/звонок
ch-chat-action-btn = 36x36 (или 38x38 в другой теме)
════════════════════════════════════════════════════ */
.av-header-more-btn,
.av-input-more-btn,
body .av-header-more-btn,
body .av-input-more-btn {
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
min-height: 36px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: var(--glass, rgba(255,255,255,0.06)) !important;
border: 1px solid var(--border, rgba(255,255,255,0.1)) !important;
border-radius: 10px !important;
color: var(--txt3, #fff) !important;
cursor: pointer !important;
flex-shrink: 0 !important;
padding: 0 !important;
font-size: 16px !important;
transition: all .2s !important;
}
/* SVG внутри 3 точек — центрировать */
.av-header-more-btn svg,
.av-input-more-btn svg {
width: 18px !important;
height: 18px !important;
}
/* Унифицируем все кнопки в .ch-chat-actions / .dm-chat-actions */
.ch-chat-actions button,
.dm-chat-actions button,
.ch-chat-actions .ch-chat-action-btn,
.dm-chat-actions .ch-chat-action-btn {
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
min-height: 36px !important;
border-radius: 10px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
padding: 0 !important;
}
/* SVG в кнопках действий — одинаковый размер */
.ch-chat-actions button svg,
.dm-chat-actions button svg,
.ch-chat-action-btn svg,
.dm-chat-action-btn svg {
width: 18px !important;
height: 18px !important;
}
/* ════════════════════════════════════════════════════
EMOJI PICKER — максимальная специфичность
В voicepanel.tpl есть inline-