/* ═══════════════════════════════════════ FAB ═══════════════════════════════════════ */ .chat-fab { position: fixed; bottom: 24px; right: 24px; width: 50px; height: 50px; background: var(--gradient-accent); border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 200; transition: all 0.2s; box-shadow: 0 4px 20px rgba(var(--accent-rgb),0.45); } .chat-fab:hover { transform: scale(1.08); box-shadow: 0 6px 28px rgba(var(--accent-rgb),0.6); } #chat-container { display: contents; } /* На десктопе сдвигаем основной контент, когда чат открыт. Сдвиг включается только если viewport действительно недостаточен, чтобы чат уместился рядом без перекрытия контента (contains body.no-chat-shift через JS — см. chat.js, переменная _CHAT_SHIFT_W). По умолчанию сдвигаем. */ @media (min-width: 901px) { .layout > main, .layout > .page, .layout > #dep, .main { transition: padding-left 0.28s cubic-bezier(0.4, 0, 0.2, 1), padding-right 0.28s cubic-bezier(0.4, 0, 0.2, 1); } /* .page имеет max-width:1200 + margin:0 auto (центрирован). Для него ниже используем не padding-right, а max-width + translateX — поэтому анимируем ещё и эти свойства, иначе при открытии чата страница «телепортируется». */ .layout > .page { transition: padding-left 0.28s cubic-bezier(0.4, 0, 0.2, 1), padding-right 0.28s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.28s cubic-bezier(0.4, 0, 0.2, 1), transform 0.28s cubic-bezier(0.4, 0, 0.2, 1); } /* Во время замера натуральных позиций (см. updatePanelShifts в chat.js) отключаем transition, иначе getBoundingClientRect прочитает интерполированное значение padding и overlap-чек вернёт неверный результат. */ body.panels-measuring .layout > main, body.panels-measuring .layout > .page, body.panels-measuring .layout > #dep, body.panels-measuring .main { transition: none !important; } /* Сдвигом контента управляет JS (updatePanelShifts) через body.chat-shifts. Не используем здесь body.chat-open / :has(.gsb:not(.hidden)) напрямую, иначе toggleChat / setSidebarState стартовали бы transition ДО замера, а panels-measuring её бы обрезал — итоговое движение получалось бы рывком. */ body.chat-shifts .layout > main, body.chat-shifts .layout > #dep, body.chat-shifts .main { padding-right: 356px; } /* .page (профиль, кейсы, депозит, и т.д.) центрирована через max-width:1200 + margin:0 auto. Если ей просто задать padding-right:356, внутренний контент сжимается на 324px справа, а сам блок остаётся в центре viewport — визуально содержимое прыгает влево на всю ширину чата (это «слишком сильный сдвиг»). Решение: вернуть родное padding-right, сузить max-width до chat-free пространства и сдвинуть весь блок влево на половину ширины чата (translateX) — страница перецентрируется в свободной зоне без компрессии изнутри. */ body.chat-shifts .layout > .page { padding-right: 32px; max-width: min(1200px, calc(100vw - 356px)); transform: translateX(-178px); } /* Preload-сдвиг до загрузки чата (см. theme-init.js). Транзишен глушим, чтобы первая отрисовка происходила в финальном состоянии без анимации; после updatePanelShifts класс снимается с , и body.chat-shifts без помех берёт управление на себя. */ html.pre-chat-shifts .layout > main, html.pre-chat-shifts .layout > #dep, html.pre-chat-shifts .main { padding-right: 356px; transition: none !important; } html.pre-chat-shifts .layout > .page { padding-right: 32px; max-width: min(1200px, calc(100vw - 356px)); transform: translateX(-178px); transition: none !important; } } /* ═══════════════════════════════════════ ЧАТ — боковая панель ═══════════════════════════════════════ */ .chat-panel { position: fixed; top: 60px; right: 0; /* zoom на html также масштабирует position:fixed-элементы и их vh-высоту, поэтому делим на --app-zoom (см. theme-init.js). */ height: calc(100vh / var(--app-zoom, 1) - 60px); width: 340px; min-width: 340px; background: var(--bg-card); border-left: 1px solid var(--border); border-top-left-radius: 16px; display: flex; flex-direction: column; overflow: hidden; transform: translateX(100%); transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), top 0.28s cubic-bezier(0.4, 0, 0.2, 1), height 0.28s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: -8px 0 30px rgba(0,0,0,0.45); z-index: 1500; /* Базовый шрифт чата — фиксируем на корневом контейнере, чтобы все дочерние элементы (шапка, сообщения, инпут, системные оповещения) наследовали одинаковый шрифт на всех страницах сайта. !important гарантирует, что даже на upgrade.html (где грузится Orbitron) или других страницах с локально-предзагруженными шрифтами чат остаётся в Space Grotesk единообразно. */ font-family: 'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif !important; } .chat-panel * { /* Все потомки тоже принудительно — на случай если страничный CSS перебивает font-family на каком-то конкретном теге внутри чата. */ font-family: inherit; } .chat-panel.open { transform: translateX(0); } /* Когда шапка скрыта — чат «доезжает» до верха экрана */ body.topbar-hidden .chat-panel { top: 0; height: calc(100dvh / var(--app-zoom, 1)); border-top-left-radius: 0; } /* ── Шапка ── */ .chat-hdr { padding: 14px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; flex-shrink: 0; background: var(--bg-raised); } .chat-hdr-title { font-size: 15px; font-weight: 700; color: var(--text); white-space: nowrap; } .chat-online-wrap { display: flex; align-items: center; gap: 6px; flex: 1; font-size: 13px; color: var(--text-dim); } .chat-online-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex-shrink: 0; box-shadow: 0 0 7px rgba(74,212,118,0.6); } .chat-close-btn { background: rgba(0,0,0,0.3); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 4px 8px; border-radius: 20px; color: var(--text-dim); transition: color 0.2s, background 0.2s; flex-shrink: 0; } .chat-close-btn:hover { color: var(--text); background: rgba(0,0,0,0.5); } /* ── Кнопка стоп/пуск чата (только для admin/moderator) ── */ .chat-pause-btn { display: none; /* по умолчанию скрыта; показывается у персонала через body.cs2-staff */ align-items: center; justify-content: center; background: rgba(0,0,0,0.3); border: 1px solid transparent; cursor: pointer; padding: 4px 8px; border-radius: 20px; color: var(--text-dim); transition: color 0.15s, background 0.15s, border-color 0.15s; flex-shrink: 0; margin-right: 4px; } body.cs2-staff .chat-pause-btn { display: flex; } .chat-pause-btn:hover { color: var(--text); background: rgba(0,0,0,0.5); } .chat-pause-btn .chat-pause-ico-play { display: none; } .chat-pause-btn .chat-pause-ico-pause { display: block; } .chat-pause-btn.is-paused { color: #d4634a; border-color: rgba(212,99,74,0.55); background: rgba(212,99,74,0.12); } .chat-pause-btn.is-paused .chat-pause-ico-pause { display: none; } .chat-pause-btn.is-paused .chat-pause-ico-play { display: block; } /* Когда чат на паузе — лёгкая красная подсветка заголовка */ .chat-panel.is-paused .chat-hdr { box-shadow: inset 0 -1px 0 rgba(212,99,74,0.45); } /* Запароленный (paused) инпут — визуально как mute, чуть тише */ .chat-inp-row.paused .chat-inp-inner { border-color: rgba(212,99,74,0.4); background: rgba(212,99,74,0.06); } .chat-inp-row.paused input { color: #d4634a; cursor: not-allowed; } .chat-inp-row.paused .chat-send { opacity: 0.4; pointer-events: none; } /* Кулдаун анти-спама — мягкая жёлтая подсветка и явный disabled */ .chat-inp-row.cooldown .chat-inp-inner { border-color: rgba(232,200,74,0.45); background: rgba(232,200,74,0.06); } .chat-inp-row.cooldown input { color: #e8c84a; cursor: not-allowed; } .chat-inp-row.cooldown .chat-send { opacity: 0.4; pointer-events: none; } /* ── Список сообщений ── */ .chat-msgs { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px 0; display: flex; flex-direction: column; /* contain — чтобы overscroll внутри ленты не пробрасывался в body и iOS rubber-band не показывал сайт «под» панелью чата. */ overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* То же — на самой панели: защита от прокрутки за её пределы. */ .chat-panel { overscroll-behavior: contain; } .chat-msgs::-webkit-scrollbar { width: 3px; } .chat-msgs::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb),0.18); border-radius: 2px; } .chat-msgs::-webkit-scrollbar-track { background: transparent; } /* ── Сообщение ── */ .cmsg { display: flex; align-items: flex-start; gap: 12px; padding: 8px 16px; transition: background 0.15s; } .cmsg:hover { background: rgba(var(--accent-rgb),0.04); } .cmsg-avatar-wrap { position: relative; flex-shrink: 0; width: 42px; margin-top: 10px; /* место под бейдж сверху */ } .cmsg-avatar { width: 42px; height: 42px; border-radius: 10px; border: 2px solid rgba(var(--accent-rgb),0.2); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.5); overflow: hidden; } .cmsg-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .cmsg-lvl { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); width: 20px; height: 20px; background: var(--accent); border-radius: 50%; font-size: 9px; font-weight: 700; color: #fff; display: flex; align-items: center; justify-content: center; line-height: 1; border: 2px solid var(--bg-card); box-shadow: 0 0 6px rgba(var(--accent-rgb),0.5); } .cmsg-body { flex: 1; min-width: 0; padding-top: 10px; } .cmsg-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 0; } .cmsg-nick { font-size: 13px; font-weight: 700; color: #ffffff !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: 'Space Grotesk', sans-serif; letter-spacing: 0.01em; /* Сжимаемся в flex-контейнере: длинный ник не должен выпирать роль/время за край */ flex: 0 1 auto; min-width: 0; } .cmsg-nick-click { cursor: pointer; } .cmsg-nick-click:hover { opacity: 0.8; } .cmsg-avatar-click { cursor: pointer; } .cmsg-avatar-click:hover .cmsg-avatar { opacity: 0.8; } .cmsg-time { font-size: 11px; color: var(--text-dim); flex-shrink: 0; background: rgba(0,0,0,0.3); border-radius: 20px; padding: 1px 7px; font-family: 'Space Grotesk', sans-serif; } .cmsg-text { font-size: 13px; color: #a0a8bc; line-height: 1.45; word-break: break-word; margin-top: 2px; font-family: 'Space Grotesk', sans-serif; } .cmsg-mention { color: #60c8ff; font-weight: 600; } .cmsg-server { font-size: 13px; color: var(--green); text-align: center; width: 100%; padding: 5px 16px; font-style: italic; opacity: 0.75; } /* ── Big-win карточка в чате (kind='bigwin') ── Стиль luxury — адаптируется к текущей теме сайта через --bw-* CSS-переменные. Дефолт (этот блок) — синий, под :root. Фиолетовая палитра — в блоке html[data-theme="purple"] ниже. Карточка намеренно НЕ выглядит как сообщение игрока: отдельный визуальный блок с трофеем, никнеймом и подсветкой скина по редкости. */ :root { /* Синяя тема — base */ --bw-bg-1: rgba(8, 28, 60, 0.92); --bw-bg-2: rgba(5, 18, 42, 0.92); --bw-bg-3: rgba(4, 12, 30, 0.92); --bw-glow: rgba(96, 200, 255, 0.22); --bw-glow-2: rgba(96, 200, 255, 0.6); --bw-border: rgba(96, 165, 250, 0.55); --bw-border-2: rgba(96, 200, 255, 0.15); --bw-icon-1: rgba(96, 200, 255, 0.35); --bw-icon-2: rgba(59, 130, 246, 0.25); --bw-accent-1: #6ec9ff; /* основной акцент (заголовок, иконка) */ --bw-accent-2: #b8e4ff; /* светлее (ник) */ --bw-accent-3: #95dbff; /* для свечения текста */ --bw-body: #c5dcf3; --bw-body-mute: rgba(197, 220, 243, 0.6); --bw-foot: rgba(197, 220, 243, 0.45); --bw-mult-bg-1: rgba(0, 207, 255, 0.22); --bw-mult-bg-2: rgba(26, 159, 255, 0.22); --bw-mult-bord: rgba(0, 207, 255, 0.6); --bw-mult-clr: #9ee9ff; --bw-mult-glow: rgba(0, 207, 255, 0.55); --bw-amount: #6ee7a8; /* сумма — зелёная для контраста */ --bw-amount-gl: rgba(110, 231, 168, 0.5); --bw-case-clr: #6ec9ff; /* название кейса */ } html[data-theme="purple"] { /* Фиолетовая тема — пурпурно-розовый luxury */ --bw-bg-1: rgba(48, 25, 80, 0.92); --bw-bg-2: rgba(28, 14, 50, 0.92); --bw-bg-3: rgba(20, 10, 36, 0.92); --bw-glow: rgba(196, 117, 255, 0.12); --bw-glow-2: rgba(196, 117, 255, 0.35); --bw-border: rgba(168, 85, 247, 0.28); --bw-border-2: rgba(196, 117, 255, 0.15); --bw-icon-1: rgba(196, 117, 255, 0.35); --bw-icon-2: rgba(147, 51, 234, 0.25); --bw-accent-1: #e9b3ff; --bw-accent-2: #f3d8ff; --bw-accent-3: #c896ff; --bw-body: #d5c5ee; --bw-body-mute: rgba(213, 197, 238, 0.6); --bw-foot: rgba(213, 197, 238, 0.45); --bw-mult-bg-1: rgba(232, 121, 249, 0.22); --bw-mult-bg-2: rgba(168, 85, 247, 0.22); --bw-mult-bord: rgba(232, 121, 249, 0.6); --bw-mult-clr: #f0b8ff; --bw-mult-glow: rgba(232, 121, 249, 0.55); --bw-amount: #6ee7a8; --bw-amount-gl: rgba(110, 231, 168, 0.5); --bw-case-clr: #c896ff; } /* .cmsg сам по себе flex-container — карточка внутри занимает только ширину контента (короткий Crash-текст → узкая, длинный Cases-текст → широкая). Перебиваем на block + width:100%, чтобы карточка всегда занимала всю ширину чата независимо от длины контента. */ .cmsg.cmsg-bigwin { display: block; padding: 0; margin: 8px 6px; background: none !important; border: none !important; } .cmsg-bigwin-card { position: relative; width: 100%; box-sizing: border-box; padding: 11px 13px 10px; background: radial-gradient(120% 80% at 0% 0%, var(--bw-glow), transparent 55%), linear-gradient(160deg, var(--bw-bg-1) 0%, var(--bw-bg-2) 60%, var(--bw-bg-3) 100%); border: 1px solid var(--bw-border); border-radius: 12px; box-shadow: 0 0 20px var(--bw-glow), 0 0 0 1px var(--bw-border-2) inset, 0 1px 0 rgba(255, 255, 255, 0.04) inset; overflow: hidden; } .cmsg-bigwin-card::before { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, var(--bw-glow-2), transparent); pointer-events: none; } .cmsg-bigwin-card::after { content: ''; position: absolute; right: -4px; bottom: -10px; width: 90px; height: 90px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 1l3.5 7L22 5l-3 12H5L2 5l6.5 3L12 1z'/%3E%3Crect x='5' y='18' width='14' height='3' rx='1'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; opacity: 0.045; pointer-events: none; z-index: 0; } .cmsg-bigwin-head { position: relative; display: flex; align-items: center; gap: 8px; margin-bottom: 7px; } .cmsg-bigwin-icon { flex-shrink: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--bw-icon-1), var(--bw-icon-2)); border-radius: 50%; color: var(--bw-accent-1); /* Свечение убрано — было 0 0 10px, теперь только мягкая обводка-тень. */ box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04); } .cmsg-bigwin-title { font-family: 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 800; letter-spacing: 0.14em; color: var(--bw-accent-1); text-transform: uppercase; text-shadow: 0 0 4px var(--bw-glow); } a.cmsg-bigwin-title--link { text-decoration: none; cursor: pointer; transition: opacity 0.15s; } a.cmsg-bigwin-title--link:hover { opacity: 0.75; text-decoration: none; } .cmsg-bigwin-body { position: relative; font-family: 'Space Grotesk', sans-serif; font-size: 12.5px; font-weight: 500; color: var(--bw-body); line-height: 1.45; word-break: break-word; } .cmsg-bigwin-nick { font-weight: 700; color: var(--bw-accent-2); font-family: 'Space Grotesk', sans-serif; letter-spacing: 0.02em; text-shadow: 0 0 6px var(--bw-glow); } .cmsg-bigwin-verb { color: var(--bw-body-mute); margin: 0 3px; } /* Сумма — зелёная во всех темах: контрастный поощряющий цвет. */ .cmsg-bigwin-amount { font-weight: 800; color: var(--bw-amount); font-family: 'Space Grotesk', sans-serif; text-shadow: 0 0 8px var(--bw-amount-gl); } /* Множитель — рамка без заливки. */ .cmsg-bigwin-mult { display: inline-block; margin-left: 5px; padding: 1px 7px; border-radius: 7px; background: transparent; border: 1px solid currentColor; opacity: 0.85; font-weight: 800; font-family: 'Space Grotesk', sans-serif; font-size: 11.5px; letter-spacing: 0.04em; text-shadow: 0 0 8px var(--bw-mult-glow); } /* «из кейса ‹название›» — мелкая строка (только для cases). */ .cmsg-bigwin-source { position: relative; margin-top: 5px; font-family: 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 500; color: var(--bw-body-mute); letter-spacing: 0.02em; } .cmsg-bigwin-source-name { color: var(--bw-case-clr); font-weight: 600; } .cmsg-bigwin-foot { position: relative; margin-top: 7px; font-family: 'Space Grotesk', sans-serif; font-size: 10.5px; font-weight: 500; color: var(--bw-foot); letter-spacing: 0.05em; } /* Скин по редкости — text-shadow для свечения + цвет. Дефолтный (если rarity не определена) — серебристо-белый, чтобы НЕ читался как другой rarity. Knife/gloves через ★ или 'Exceedingly Rare' → жёлтый по запросу. Свечение приглушено (было 8px blur + brightness 1.08) — теперь мягкое 3px без brightness, чтобы не «жгло» в глаза. */ .cmsg-bigwin-skin { font-weight: 700; font-family: 'Space Grotesk', sans-serif; color: var(--bw-accent-1); text-shadow: 0 0 4px var(--bw-glow); } /* Постоянное уведомление о паузе/возобновлении чата */ .cmsg-pause-notice, .cmsg-pause-notice.paused, .cmsg-pause-notice.resumed { width: calc(100% - 24px); margin: 4px 12px; padding: 2px 0; text-align: center; font-size: 10px; font-weight: 600; line-height: 1.2; letter-spacing: 0.04em; background: transparent; border: none; font-family: 'Space Grotesk', sans-serif; color: var(--text-mute); } /* ── Кнопка прокрутки вниз ── */ .chat-scroll-btn { position: absolute; bottom: 72px; left: 50%; transform: translateX(-50%) translateY(8px); background: var(--bg-raised); border: 1px solid var(--border); border-radius: 20px; padding: 6px 14px 6px 10px; color: var(--text); font-size: 12px; font-family: var(--font); font-weight: 500; cursor: pointer; white-space: nowrap; display: flex; align-items: center; gap: 6px; opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; box-shadow: 0 4px 16px rgba(0,0,0,0.4); z-index: 10; } .chat-scroll-btn.visible { opacity: 1; pointer-events: all; transform: translateX(-50%) translateY(0); } .chat-scroll-btn:hover { background: var(--bg-card); border-color: var(--border-h); } /* ── Ввод ── */ .chat-inp-row { padding: 10px 12px 14px; display: flex; flex-shrink: 0; background: var(--bg-card); } .chat-auth-row { padding: 10px 12px 14px; flex-shrink: 0; background: var(--bg-card); } .chat-auth-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 11px 0; background: var(--gradient-accent); border: none; border-radius: 12px; color: #fff; font-size: 13px; font-weight: 700; font-family: var(--font); cursor: pointer; text-decoration: none; box-shadow: 0 4px 18px rgba(var(--accent-rgb),0.35); transition: box-shadow 0.2s, filter 0.2s; } .chat-auth-btn:hover { filter: brightness(1.1); box-shadow: 0 6px 24px rgba(var(--accent-rgb),0.5); } .chat-inp-inner { flex: 1; display: flex; align-items: center; gap: 6px; background: var(--bg-raised); border: 1px solid var(--border); border-radius: 12px; padding: 5px 5px 5px 14px; } .chat-inp-inner input { flex: 1; background: transparent; border: none; outline: none; color: var(--text); font-size: 13px; font-family: var(--font); padding: 6px 0; } .chat-inp-inner input::placeholder { color: var(--text-dim); } .chat-send { background: var(--accent); border: none; border-radius: 8px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: background 0.2s; } .chat-send:hover { background: #3ab0ff; } /* ── Бейджи роли (admin/mod) ── Дизайн совпадает с .cmsg-time: тёмная пилюля той же высоты, цвет — акцент роли. Лежат в .cmsg-top-right слева от времени, чтобы не ломать выравнивание ника. */ .cmsg-top-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .cmsg-role { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; padding: 2px 8px; border-radius: 20px; line-height: 1.4; flex-shrink: 0; font-family: 'Space Grotesk', sans-serif; border: 1px solid transparent; white-space: nowrap; } .cmsg-role-admin { letter-spacing: 0.08em; text-transform: uppercase; } .cmsg-role-admin { color: #ffe88a; background: transparent; border-color: rgba(232,200,74,0.55); text-shadow: 0 0 6px rgba(232,200,74,0.55); } .cmsg-role-mod { color: #8ec8ee; background: transparent; border-color: rgba(74,159,212,0.55); text-shadow: 0 0 6px rgba(74,159,212,0.5); } /* ── Попап действий модерации (мут/упоминание) ── Позиционируется absolute внутри .chat-panel (у него уже position:fixed, так что absolute-потомки относятся именно к панели). */ .cmsg-modpop { position: absolute; z-index: 50; width: 240px; background: #14181f; border: 1px solid #2a313e; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.55); padding: 10px; font-family: 'Space Grotesk', sans-serif; color: #d6dae3; } .cmsg-modpop-head { font-size: 12px; color: #a0a8bc; margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cmsg-modpop-head b { color: #fff; } .cmsg-modpop-section { margin-bottom: 8px; } .cmsg-modpop-label { font-size: 10px; color: #6c7488; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; } .cmsg-modpop-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-bottom: 6px; } .cmsg-modpop-btn { background: #1d232c; border: 1px solid #2a313e; color: #d6dae3; font-size: 11px; font-weight: 600; padding: 5px 4px; border-radius: 6px; cursor: pointer; transition: all 0.15s; font-family: inherit; } .cmsg-modpop-btn:hover { background: #d4634a; border-color: #d4634a; color: #fff; } .cmsg-modpop-unmute { width: 100%; } .cmsg-modpop-unmute:hover { background: #4ad476; border-color: #4ad476; } .cmsg-modpop-input { width: 100%; box-sizing: border-box; background: #1d232c; border: 1px solid #2a313e; border-radius: 6px; color: #d6dae3; padding: 5px 8px; font-size: 11px; font-family: inherit; outline: none; } .cmsg-modpop-input:focus { border-color: #4a9fd4; } .cmsg-modpop-mention { width: 100%; margin-top: 4px; background: transparent; border: 1px solid #2a313e; color: #a0a8bc; font-size: 11px; font-weight: 600; padding: 6px; border-radius: 6px; cursor: pointer; transition: all 0.15s; font-family: inherit; } .cmsg-modpop-mention:hover { background: #1d232c; color: #fff; } /* ── Кнопка удаления сообщения (×) — видна только персоналу при ховере ── */ .cmsg { position: relative; } .cmsg-delete { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,0.55); border: 1px solid rgba(212,99,74,0.4); border-radius: 50%; color: #d4634a; font-size: 14px; font-weight: 700; line-height: 1; cursor: pointer; padding: 0; font-family: 'Space Grotesk', sans-serif; transition: background 0.15s, color 0.15s, border-color 0.15s; } .cmsg-delete:hover { background: #d4634a; border-color: #d4634a; color: #fff; } body.cs2-staff .cmsg:hover .cmsg-delete { display: flex; } /* ── Кнопка «закрепить» рядом с × — видна только персоналу при ховере ── */ .cmsg-pin { position: absolute; top: 6px; right: 30px; width: 20px; height: 20px; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,0.55); border: 1px solid rgba(74,159,212,0.45); border-radius: 50%; color: #4a9fd4; cursor: pointer; padding: 0; transition: background 0.15s, color 0.15s, border-color 0.15s; } .cmsg-pin:hover { background: #4a9fd4; border-color: #4a9fd4; color: #fff; } body.cs2-staff .cmsg:hover .cmsg-pin { display: flex; } /* ── Баннер закреплённого сообщения (между шапкой чата и лентой) ── */ .chat-pinned { position: relative; display: flex; gap: 8px; padding: 8px 12px 8px 10px; background: rgba(74,159,212,0.08); border-bottom: 1px solid rgba(74,159,212,0.25); font-family: 'Space Grotesk', sans-serif; flex-shrink: 0; } .chat-pinned[hidden] { display: none; } .chat-pinned-icon { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; color: #4a9fd4; flex-shrink: 0; margin-top: 1px; } .chat-pinned-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .chat-pinned-head { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-dim); } .chat-pinned-avatar { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #fff; overflow: hidden; flex-shrink: 0; } .chat-pinned-avatar img { width: 100%; height: 100%; object-fit: cover; } .chat-pinned-nick { font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; } .chat-pinned-text { font-size: 12px; color: var(--text); word-wrap: break-word; line-height: 1.35; } .chat-pinned-close { position: absolute; top: 6px; right: 6px; width: 18px; height: 18px; display: none; align-items: center; justify-content: center; background: transparent; border: 1px solid rgba(212,99,74,0.4); border-radius: 50%; color: #d4634a; font-size: 13px; font-weight: 700; line-height: 1; cursor: pointer; padding: 0; font-family: 'Space Grotesk', sans-serif; transition: background 0.15s, color 0.15s, border-color 0.15s; } .chat-pinned-close:hover { background: #d4634a; border-color: #d4634a; color: #fff; } body.cs2-staff .chat-pinned-close { display: flex; } /* ── Замьюченный инпут чата ── */ .chat-inp-row.muted .chat-inp-inner { border-color: rgba(212,99,74,0.55); background: rgba(212,99,74,0.08); } .chat-inp-row.muted input { color: #d4634a; cursor: not-allowed; } .chat-inp-row.muted .chat-send { opacity: 0.4; pointer-events: none; }