/* ── Chat page (full-screen) ──────────────────── */
#chat-page {
  display: flex; flex-direction: column; height: 100%;
}

.cp-header {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  background: rgba(22,10,4,0.97); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.cp-header-support {
  background: rgba(16,7,2,0.99);
  border-bottom: 1px solid rgba(232,160,48,0.35);
  box-shadow: 0 1px 12px rgba(232,160,48,0.1);
}

.cp-header-actions {
  display: flex; gap: 6px; margin-left: auto; flex-shrink: 0;
}

.cp-action-btn {
  width: 34px; height: 34px; border-radius: 8px; border: none;
  background: var(--bg-tertiary); color: var(--text-muted);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: var(--transition);
}
.cp-action-btn svg { width: 18px; height: 18px; fill: currentColor; }
.cp-action-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.cp-action-danger:hover { background: rgba(232,96,122,0.15); color: var(--danger); }

/* Back button — does NOT overlap avatar */
.cp-back-btn {
  background: rgba(13,6,2,0.70); backdrop-filter: blur(10px);
  border: 1px solid var(--border); border-radius: 20px;
  color: var(--text-secondary); font-size: 13px; font-weight: 600;
  padding: 6px 14px; cursor: pointer; transition: var(--transition);
  flex-shrink: 0; white-space: nowrap;
}
.cp-back-btn:hover { color: var(--text-primary); background: rgba(232,160,48,0.12); border-color: var(--glow-border); }
.cp-avatar {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent), var(--glow));
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: #fff;
}
.cp-title-block { flex: 1; }
.cp-title   { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.cp-subtitle { font-size: 12px; color: var(--text-muted); }

/* ── Messages ─────────────────────────────────── */
.cp-messages {
  flex: 1; overflow-y: auto; padding: 20px;
  display: flex; flex-direction: column; gap: 12px;
}

.cp-support-banner {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 11px; color: var(--glow); font-weight: 600;
  padding: 6px 12px; border-radius: 20px; align-self: center;
  background: rgba(232,160,48,0.08); border: 1px solid rgba(232,160,48,0.2);
  margin-bottom: 6px;
}
.cp-messages::-webkit-scrollbar { width: 4px; }
.cp-messages::-webkit-scrollbar-thumb { background: var(--bg-active); border-radius: 2px; }

.cp-msg-row { display: flex; align-items: flex-end; gap: 10px; max-width: 70%; }
.cp-msg-row.own   { align-self: flex-end; flex-direction: row; }
.cp-msg-row.other { align-self: flex-start; }

.cp-avatar-sm {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff;
}
.own-av   { background: linear-gradient(135deg, var(--accent), var(--glow)); }
.other-av { background: linear-gradient(135deg, #4a3060, #2d1b5e); }

.cp-msg-group { display: flex; flex-direction: column; gap: 2px; position: relative; }
.cp-msg-row.own .cp-msg-group { align-items: flex-end; }

.cp-sender { font-size: 11px; color: var(--glow); font-weight: 600; padding-left: 4px; }

.cp-bubble {
  padding: 10px 14px; border-radius: 18px;
  font-size: 14px; line-height: 1.5; word-break: break-word;
  max-width: 100%;
}
.cp-bubble.own {
  background: linear-gradient(135deg, var(--accent), var(--bg-active));
  color: #fff; border-bottom-right-radius: 4px;
}
.cp-bubble.other {
  background: var(--bg-tertiary); color: var(--text-primary);
  border: 1px solid var(--border); border-bottom-left-radius: 4px;
}
.cp-time {
  font-size: 10px; opacity: 0.6; margin-left: 10px;
  display: inline-block; vertical-align: bottom; white-space: nowrap;
}

/* Выделение/копирование: текст сообщения выделяется, время/футер — нет */
.cp-bubble { -webkit-user-select: text; user-select: text; }
.cp-time, .cp-bubble-footer { -webkit-user-select: none; user-select: none; }

/* ── Контекстное меню сообщения (ПКМ) ── */
#cp-ctx-menu {
  position: fixed; z-index: 4000; min-width: 210px; padding: 6px;
  background: var(--bg-tertiary, #1a1410); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 10px 34px rgba(0,0,0,.5);
  animation: cpCtxIn .12s ease;
}
@keyframes cpCtxIn { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: scale(1); } }
.cp-ctx-reactions { display: flex; gap: 2px; padding: 2px 2px 6px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.cp-ctx-react { font-size: 18px; line-height: 1; padding: 5px; border: none; background: transparent; cursor: pointer; border-radius: 8px; transition: transform .1s, background .1s; }
.cp-ctx-react:hover { background: var(--bg-hover); transform: scale(1.25); }
.cp-ctx-list { display: flex; flex-direction: column; }
.cp-ctx-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 12px; border: none; background: transparent; color: var(--text-primary); font-size: 14px; text-align: left; cursor: pointer; border-radius: 8px; }
.cp-ctx-item:hover { background: var(--bg-hover); }
.cp-ctx-item svg { flex-shrink: 0; color: var(--text-secondary); }
.cp-ctx-item[data-act="delete"], .cp-ctx-item[data-act="delete"] svg { color: #e06c5c; }
.cp-ctx-soonbadge { margin-left: auto; font-size: 10px; opacity: .5; }
.cp-ctx-soon { opacity: .75; }

/* ── Режим выделения сообщений ── */
.chat-selecting .cp-msg-row { position: relative; cursor: pointer; -webkit-user-select: none; user-select: none; }
.cp-msg-row.cp-selected .cp-bubble { outline: 2px solid var(--glow); outline-offset: 1px; }
.cp-msg-row.cp-selected::after {
  content: '✓'; position: absolute; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: #0a0a15; background: var(--glow); border-radius: 50%;
}
.cp-msg-row.own.cp-selected::after   { left: -26px; }
.cp-msg-row.other.cp-selected::after { right: -26px; }

#cp-sel-bar {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  z-index: 4000; display: flex; align-items: center; gap: 14px;
  padding: 8px 10px 8px 16px;
  background: var(--bg-tertiary, #1a1410); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: 0 10px 34px rgba(0,0,0,.5);
}
.cp-sel-count { font-size: 13px; color: var(--text-secondary); white-space: nowrap; }
.cp-sel-actions { display: flex; gap: 4px; }
.cp-sel-actions button { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--text-primary); border-radius: 9px; cursor: pointer; font-size: 15px; }
.cp-sel-actions button:hover:not(:disabled) { background: var(--bg-hover); }
.cp-sel-actions button:disabled { opacity: .35; cursor: default; }

/* ── Ответы (reply) ── */
.cp-reply-quote {
  display: block; margin-bottom: 5px; padding: 3px 8px;
  border-left: 3px solid var(--glow); border-radius: 4px;
  background: rgba(255,255,255,.06); cursor: pointer; max-width: 260px;
}
.cp-bubble.own .cp-reply-quote { background: rgba(0,0,0,.18); border-left-color: rgba(255,255,255,.75); }
.cp-reply-quote-sender { display: block; font-size: 11px; font-weight: 600; color: var(--glow); }
.cp-bubble.own .cp-reply-quote-sender { color: #fff; }
.cp-reply-quote-text { display: block; font-size: 12px; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

#cp-reply-bar, #cp-edit-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px; border-top: 1px solid var(--border);
  background: rgba(19,10,4,.92);
}
.cp-edited { font-size: 10px; font-style: italic; opacity: .55; margin-left: 6px; }
.cp-bubble.own .cp-edited { opacity: .7; }
.cp-reply-bar-body { flex: 1; min-width: 0; border-left: 3px solid var(--glow); padding-left: 10px; }
.cp-reply-bar-sender { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--glow); }
.cp-reply-bar-sender svg { width: 13px; height: 13px; flex-shrink: 0; }
.cp-reply-bar-text { font-size: 12px; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-reply-bar-x { width: 30px; height: 30px; border: none; background: transparent; color: var(--text-secondary); border-radius: 8px; cursor: pointer; font-size: 14px; flex-shrink: 0; }
.cp-reply-bar-x:hover { background: var(--bg-hover); color: var(--text-primary); }

@keyframes cpFlash { 0%, 100% { background: transparent; } 30% { background: rgba(232,160,48,.20); } }
.cp-msg-flash .cp-bubble { animation: cpFlash 1.4s ease; }
/* Появление нового (живого) сообщения */
.cp-msg-in { animation: cpMsgIn .26s cubic-bezier(.2,.7,.3,1); }
@keyframes cpMsgIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ── Реакции (эмодзи) ── */
.cp-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.cp-reactions:empty { display: none; }
.cp-reaction {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 6px; border-radius: 12px; cursor: pointer;
  font-size: 14px; line-height: 1.4; color: var(--text-primary);
  background: transparent; border: none;
  transition: transform .1s, background .12s;
}
.cp-reaction:hover { background: rgba(255,255,255,.12); transform: scale(1.06); }
.cp-bubble.own .cp-reaction:hover { background: rgba(0,0,0,.22); }
.cp-reaction span { font-size: 11px; font-weight: 600; opacity: .85; }
.cp-reaction.mine span { color: var(--glow); opacity: 1; }
.cp-bubble.own .cp-reaction.mine span { color: #fff; }

/* ── Markdown ── */
.cp-bubble code { font-family: ui-monospace, 'Cascadia Code', Menlo, Consolas, monospace; font-size: 88%; background: rgba(0,0,0,.28); padding: 1px 5px; border-radius: 5px; }
.cp-bubble.own code { background: rgba(0,0,0,.25); }
.cp-quote { margin: 4px 0; padding: 2px 0 2px 10px; border-left: 3px solid var(--glow); opacity: .92; }
.cp-bubble.own .cp-quote { border-left-color: rgba(255,255,255,.7); }
.cp-spoiler { border-radius: 4px; cursor: pointer; background: rgba(150,150,150,.5); color: transparent; user-select: none; transition: background .2s, color .2s; }
.cp-spoiler.revealed { background: transparent; color: inherit; user-select: text; cursor: text; }
.cp-bubble.own .cp-spoiler { background: rgba(255,255,255,.4); }
.cp-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; word-break: break-all; }

/* ── Превью ссылок ── */
.cp-link-preview {
  display: block; margin-top: 7px; max-width: 320px;
  border-radius: 10px; overflow: hidden; text-decoration: none; color: inherit;
  background: rgba(0,0,0,.22); border-left: 3px solid var(--glow);
}
.cp-bubble.own .cp-link-preview { background: rgba(0,0,0,.2); border-left-color: rgba(255,255,255,.7); }
.cp-link-preview:hover { filter: brightness(1.08); }
.cp-lp-img { width: 100%; height: 150px; background-size: cover; background-position: center; }
.cp-lp-body { padding: 8px 11px; }
.cp-lp-site { font-size: 11px; font-weight: 600; color: var(--glow); }
.cp-bubble.own .cp-lp-site { color: #fff; }
.cp-lp-title { font-size: 13px; font-weight: 600; margin-top: 2px; }
.cp-lp-desc { font-size: 12px; opacity: .82; line-height: 1.4; margin-top: 3px; }

/* YouTube: встроенный плеер по клику */
.cp-yt .cp-lp-body { display: block; text-decoration: none; color: inherit; }
.cp-yt-thumb { position: relative; height: auto; aspect-ratio: 16 / 9; cursor: pointer; }
.cp-yt-noimg { background: linear-gradient(135deg, #2a2030, #18121c); }
.cp-yt-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 54px; height: 54px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(0,0,0,.6); color: #fff; font-size: 20px; padding-left: 3px;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, transform .15s;
}
.cp-yt-thumb:hover .cp-yt-play { background: #e63b3b; transform: translate(-50%, -50%) scale(1.08); }
.cp-yt-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; }
.cp-yt-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ── @упоминания ── */
.cp-mention { color: var(--glow); font-weight: 600; cursor: pointer; }
.cp-mention:hover { text-decoration: underline; }
.cp-bubble.own .cp-mention { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.cp-bubble.cp-mention-me { box-shadow: inset 3px 0 0 var(--glow); }
.cp-bubble.own.cp-mention-me { box-shadow: inset -3px 0 0 #fff; }

#cp-mention {
  position: fixed; z-index: 4500; display: none; padding: 5px;
  max-height: 232px; overflow-y: auto; min-width: 180px;
  background: var(--bg-tertiary, #1a1410); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 8px 26px rgba(0,0,0,.5);
}
.cp-mention-item { display: flex; align-items: center; gap: 9px; padding: 6px 9px; border-radius: 8px; cursor: pointer; }
.cp-mention-item.active, .cp-mention-item:hover { background: var(--bg-hover); }
.cp-mention-av { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--bg-active); font-size: 12px; }
.cp-mention-av img { width: 100%; height: 100%; object-fit: cover; }
.cp-mention-item > span:last-child { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Поиск по истории чата ── */
#cp-search {
  position: fixed; z-index: 4600; width: 360px; max-width: 92vw; max-height: 70vh;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg-tertiary, #1a1410); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 12px 36px rgba(0,0,0,.55);
}
.cp-search-top { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--border); }
.cp-search-ico { color: var(--text-secondary); flex-shrink: 0; }
.cp-search-input { flex: 1; min-width: 0; border: none; background: transparent; color: var(--text-primary); font-size: 14px; outline: none; }
.cp-search-x { border: none; background: transparent; color: var(--text-secondary); font-size: 14px; cursor: pointer; }
.cp-search-x:hover { color: var(--text-primary); }
.cp-search-results { overflow-y: auto; }
.cp-search-count { padding: 8px 14px; font-size: 12px; color: var(--text-secondary); border-bottom: 1px solid var(--border); }
.cp-search-empty { padding: 28px 14px; text-align: center; color: var(--text-secondary); font-size: 13px; }
.cp-search-item { display: flex; gap: 10px; padding: 8px 12px; cursor: pointer; }
.cp-search-item:hover { background: var(--bg-hover); }
.cp-search-av { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--bg-active); font-size: 13px; }
.cp-search-av img { width: 100%; height: 100%; object-fit: cover; }
.cp-search-body { flex: 1; min-width: 0; }
.cp-search-row { display: flex; justify-content: space-between; gap: 8px; }
.cp-search-name { font-size: 13px; font-weight: 600; color: var(--glow); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-search-date { font-size: 11px; color: var(--text-secondary); white-space: nowrap; flex-shrink: 0; }
.cp-search-snip { font-size: 13px; color: var(--text-primary); opacity: .9; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-search-snip mark { background: transparent; color: var(--glow); font-weight: 700; }

/* ── Закреплённое сообщение (плашка сверху чата) ── */
#cp-pinbar {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  padding: 7px 14px; border-bottom: 1px solid var(--border);
  background: rgba(19,10,4,.6); cursor: pointer;
}
#cp-pinbar:hover { background: rgba(232,160,48,.07); }
.cp-pinbar-line { width: 3px; align-self: stretch; min-height: 26px; background: var(--glow); border-radius: 2px; flex-shrink: 0; }
.cp-pinbar-body { flex: 1; min-width: 0; }
.cp-pinbar-title { font-size: 12px; font-weight: 600; color: var(--glow); }
.cp-pinbar-text { font-size: 13px; color: var(--text-primary); opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-pinbar-x { border: none; background: transparent; color: var(--text-secondary); cursor: pointer; padding: 4px; border-radius: 6px; display: flex; align-items: center; flex-shrink: 0; }
.cp-pinbar-x:hover { background: var(--bg-hover); color: var(--text-primary); }
.cp-pinbar-list { border: none; background: transparent; color: var(--text-secondary); cursor: pointer; padding: 4px; border-radius: 6px; display: flex; align-items: center; flex-shrink: 0; }
.cp-pinbar-list:hover { background: var(--bg-hover); color: var(--text-primary); }

/* ── Список закреплённых (панель размером с чат) ── */
#chat-page { position: relative; }
#cp-pinlist {
  position: absolute; inset: 0; z-index: 30;
  display: flex; flex-direction: column;
  background: var(--bg-primary, #130a04);
}
.cp-pinlist-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.cp-pinlist-back { border: none; background: transparent; color: var(--text-primary); cursor: pointer; display: flex; padding: 4px; border-radius: 8px; }
.cp-pinlist-back:hover { background: var(--bg-hover); }
.cp-pinlist-htitle { font-size: 15px; font-weight: 600; }
.cp-pinlist-body { flex: 1; overflow-y: auto; padding: 6px 0; }
.cp-pinlist-item { display: flex; gap: 10px; padding: 9px 16px; cursor: pointer; align-items: flex-start; }
.cp-pinlist-item:hover { background: var(--bg-hover); }
.cp-pinlist-av { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--bg-active); font-size: 14px; }
.cp-pinlist-av img { width: 100%; height: 100%; object-fit: cover; }
.cp-pinlist-main { flex: 1; min-width: 0; }
.cp-pinlist-row { display: flex; justify-content: space-between; gap: 8px; }
.cp-pinlist-name { font-size: 14px; font-weight: 600; color: var(--glow); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-pinlist-date { font-size: 11px; color: var(--text-secondary); flex-shrink: 0; }
.cp-pinlist-text { font-size: 14px; color: var(--text-primary); margin-top: 2px; word-break: break-word; }
.cp-pinlist-unpin { border: none; background: transparent; color: var(--text-secondary); cursor: pointer; padding: 4px; border-radius: 6px; flex-shrink: 0; opacity: 0; }
.cp-pinlist-item:hover .cp-pinlist-unpin { opacity: .7; }
.cp-pinlist-unpin:hover { opacity: 1; color: var(--text-primary); }
.cp-pinlist-unpinall { border: none; background: transparent; color: #e06c5c; font-weight: 600; font-size: 14px; padding: 14px; cursor: pointer; border-top: 1px solid var(--border); flex-shrink: 0; }
.cp-pinlist-unpinall:hover { background: rgba(224,108,92,.08); }

/* ── Медиа-вложения ── */
.cp-attach-btn { width: 38px; height: 44px; border: none; background: transparent; color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; align-self: flex-end; transition: color var(--transition); }
.cp-attach-btn:hover { color: var(--glow); }
#cp-att-bar { display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-top: 1px solid var(--border); background: rgba(19,10,4,.92); }
.cp-att-strip { display: flex; gap: 6px; overflow-x: auto; flex: 1; padding: 2px; }
.cp-att-thumb { position: relative; width: 48px; height: 48px; border-radius: 8px; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--bg-active); color: var(--text-secondary); }
.cp-att-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cp-att-thumb-x { position: absolute; top: 1px; right: 1px; width: 16px; height: 16px; border: none; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: 9px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.cp-att-thumb-x:hover { background: rgba(0,0,0,.85); }
.cp-att-thumb-loading::after { content: ''; width: 18px; height: 18px; border: 2px solid var(--border); border-top-color: var(--glow); border-radius: 50%; animation: cpSpin .7s linear infinite; }
@keyframes cpSpin { to { transform: rotate(360deg); } }
.cp-att-bar-x { width: 30px; height: 30px; border: none; background: transparent; color: var(--text-secondary); border-radius: 8px; cursor: pointer; flex-shrink: 0; }
.cp-att-bar-x:hover { background: var(--bg-hover); color: var(--text-primary); }

.cp-att { display: block; margin-bottom: 5px; max-width: 400px; }
.cp-att-image { border-radius: 10px; overflow: hidden; cursor: zoom-in; }
.cp-att-image img { display: block; width: 100%; max-height: 440px; object-fit: cover; border-radius: 10px; }
.cp-att-video { width: 100%; max-width: 400px; max-height: 440px; border-radius: 10px; background: #000; display: block; }
/* Встроенный плеер в палитре платформы: постер + большая кнопка ▶ */
.cp-att-video-wrap { position: relative; display: block; max-width: 400px; border-radius: 10px; overflow: hidden; cursor: pointer; line-height: 0; }
.cp-att-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); border: 0; background: none; padding: 0; cursor: pointer; filter: drop-shadow(0 2px 8px rgba(0,0,0,.45)); }
.cp-play-bg { fill: var(--accent); transition: fill .15s, transform .15s; }
.cp-att-video-wrap:hover .cp-play-bg { fill: var(--glow); }
.cp-att-video-wrap.playing .cp-att-play,
.cp-att-video-wrap.playing .cp-att-cell-play { display: none; }
.cp-att-video-wrap.playing { cursor: default; }
/* Видео из альбома при воспроизведении разворачивается на всю ширину */
.cp-att-cell.cp-att-video-wrap.playing { grid-column: 1 / -1; aspect-ratio: auto; }
.cp-att-cell.cp-att-video-wrap.playing video { height: auto; max-height: 440px; object-fit: contain; background: #000; }
/* Кастомный аудиоплеер в палитре платформы */
.cp-att.cp-aud { display: flex; align-items: center; gap: 11px; padding: 10px 13px; border-radius: 14px; background: rgba(0,0,0,.22); width: 320px; max-width: 100%; }
.cp-bubble.own .cp-att.cp-aud { background: rgba(0,0,0,.2); }
.cp-aud audio { display: none; }
.cp-aud-btn { width: 42px; height: 42px; flex-shrink: 0; border: 0; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--glow)); color: #0a0a15; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: filter .15s; }
.cp-aud-btn:hover { filter: brightness(1.08); }
.cp-aud-btn svg { width: 22px; height: 22px; fill: #0a0a15; }
.cp-aud .cp-aud-ico-pause { display: none; }
.cp-aud.playing .cp-aud-ico-play { display: none; }
.cp-aud.playing .cp-aud-ico-pause { display: block; }
.cp-aud-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cp-aud-seek { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 2px; background: rgba(240,223,191,.25); cursor: pointer; outline: none; }
.cp-aud-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 13px; height: 13px; border-radius: 50%; background: var(--glow); cursor: pointer; }
.cp-aud-seek::-moz-range-thumb { width: 13px; height: 13px; border: 0; border-radius: 50%; background: var(--glow); cursor: pointer; }
.cp-aud-name { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-aud-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cp-aud-time { flex-shrink: 0; font-size: 11px; opacity: .75; font-variant-numeric: tabular-nums; }
.cp-aud-ctrls { display: flex; align-items: center; gap: 2px; }
.cp-aud-mini { width: 26px; height: 26px; padding: 0; border: 0; border-radius: 7px; background: none; color: var(--text-primary); opacity: .7; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: opacity .15s, background .15s; text-decoration: none; font-size: 11px; font-weight: 700; }
.cp-aud-mini:hover { opacity: 1; background: rgba(240,223,191,.12); }
.cp-aud-mini svg { width: 17px; height: 17px; fill: currentColor; }
.cp-aud-speed { min-width: 28px; width: auto; padding: 0 5px; }
.cp-aud .cp-aud-ico-mute { display: none; }
.cp-aud.muted .cp-aud-ico-vol { display: none; }
.cp-aud.muted .cp-aud-ico-mute { display: block; }
.cp-aud.muted .cp-aud-vol { opacity: 1; color: var(--glow); }
/* Всплывающий слайдер громкости */
.cp-aud-vol-wrap { position: relative; display: flex; align-items: center; }
.cp-aud-volpop { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); display: flex; align-items: center; padding: 9px 11px; border-radius: 11px; background: var(--bg-tertiary, #1a1410); border: 1px solid var(--border); box-shadow: 0 6px 18px rgba(0,0,0,.45); opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 30; }
.cp-aud-volpop::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 8px; }
.cp-aud-vol-wrap:hover .cp-aud-volpop { opacity: 1; pointer-events: auto; }
.cp-aud-volslider { width: 84px; height: 4px; margin: 0; -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; }
.cp-aud-volslider::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: rgba(240,223,191,.25); }
.cp-aud-volslider::-webkit-slider-thumb { -webkit-appearance: none; margin-top: -4px; width: 12px; height: 12px; border-radius: 50%; background: var(--glow); cursor: pointer; }
.cp-aud-volslider::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--glow); cursor: pointer; }
.cp-aud-volslider::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(240,223,191,.25); }

/* Лайтбокс изображений (как в Telegram) */
#cp-lightbox { position: fixed; inset: 0; z-index: 6000; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.88); }
#cp-lightbox.open { display: flex; }
.cp-lb-img { max-width: 92vw; max-height: 92vh; object-fit: contain; border-radius: 6px; box-shadow: 0 10px 50px rgba(0,0,0,.6); }
.cp-lb-x { position: absolute; top: 18px; right: 22px; width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; font-size: 20px; cursor: pointer; transition: background .15s; }
.cp-lb-x:hover { background: rgba(255,255,255,.2); }
.cp-lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border: 0; border-radius: 50%; background: rgba(255,255,255,.08); color: #fff; font-size: 34px; line-height: 1; cursor: pointer; transition: background .15s; }
.cp-lb-nav:hover { background: rgba(255,255,255,.18); }
.cp-lb-prev { left: 24px; }
.cp-lb-next { right: 24px; }
.cp-att-file { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 10px; background: rgba(0,0,0,.22); text-decoration: none; color: inherit; }
.cp-bubble.own .cp-att-file { background: rgba(0,0,0,.2); }
.cp-att-file:hover { filter: brightness(1.08); }
.cp-att-file-ic { width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: var(--glow); color: #0a0a15; flex-shrink: 0; }
.cp-att-file-info { display: flex; flex-direction: column; min-width: 0; }
.cp-att-file-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.cp-att-file-size { font-size: 11px; opacity: .7; }

/* Карточка-приглашение в лобби (в пузыре чата) */
.cp-invite-card { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; background: rgba(0,0,0,.22); border: none; min-width: 320px; max-width: 440px; min-height: 92px; box-sizing: border-box; overflow: hidden; }
.cp-invite-card > * { position: relative; z-index: 1; }
.cp-bubble.own .cp-invite-card { background: rgba(0,0,0,.18); }
.cp-invite-ic { width: 50px; height: 50px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--accent), var(--glow)); color: #0a0a15; }
.cp-invite-ic svg { width: 27px; height: 27px; }
.cp-invite-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cp-invite-title { font-size: 16px; font-weight: 700; color: var(--glow); }
.cp-invite-name { font-size: 13px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-invite-join { flex-shrink: 0; border: 0; border-radius: 10px; padding: 11px 22px; font-weight: 700; font-size: 14px; cursor: pointer; background: linear-gradient(135deg, var(--accent), var(--glow)); color: #0a0a15; transition: filter .15s; }
.cp-invite-join:hover { filter: brightness(1.08); }
/* Пузырь с приглашением — карточка сама рамка, золотой фон пузыря убираем */
.cp-bubble-invite { padding: 0; background: none; border: none; }
.cp-bubble-invite .cp-text { display: block; }
.cp-bubble-invite .cp-invite-card { max-width: 440px; }
.cp-bubble-invite .cp-time, .cp-bubble-invite .cp-bubble-footer { padding: 4px 8px 2px; }
.cp-bubble-invite .cp-reactions { padding: 2px 6px; }
/* Фон карточки = обложка игры; картинка плавно уходит в прозрачность к низу */
.cp-invite-bg, .cp-bubble.own .cp-invite-bg { background: transparent; }
.cp-invite-bg::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(180deg, rgba(10,10,21,.5), rgba(10,10,21,.12) 50%, rgba(10,10,21,0)), var(--inv-bg);
  background-size: cover; background-position: center;
  -webkit-mask-image: linear-gradient(to bottom, #000 8%, transparent 72%);
  mask-image: linear-gradient(to bottom, #000 8%, transparent 72%); }
.cp-invite-bg .cp-invite-title { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.cp-invite-bg .cp-invite-name { color: rgba(255,255,255,.92); opacity: 1; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
/* Заголовки секций в пикере приглашения */
.cp-invite-section { padding: 9px 6px 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted, #9a8a70); }
.cp-invite-section:first-child { padding-top: 2px; }

/* Всплывающее уведомление о приглашении */
.invite-toast { display: flex; align-items: center; gap: 11px; padding: 12px 14px; margin-top: 10px; width: 360px; max-width: 92vw; border-radius: 14px; background: var(--bg-tertiary, #1a1410); border: 1px solid var(--glow-border); box-shadow: 0 10px 34px rgba(0,0,0,.5); animation: cpInviteIn .25s ease; }
@keyframes cpInviteIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
.invite-toast-ic { width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--accent), var(--glow)); color: #0a0a15; }
.invite-toast-body { flex: 1; min-width: 0; }
.invite-toast-title { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.invite-toast-sub { font-size: 12px; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.invite-toast-join { flex-shrink: 0; border: 0; border-radius: 9px; padding: 8px 16px; font-weight: 700; font-size: 13px; cursor: pointer; background: linear-gradient(135deg, var(--accent), var(--glow)); color: #0a0a15; transition: filter .15s; }
.invite-toast-join:hover { filter: brightness(1.08); }
.invite-toast-x { flex-shrink: 0; width: 28px; height: 28px; border: 0; border-radius: 7px; background: none; color: var(--text-primary); opacity: .6; cursor: pointer; font-size: 14px; transition: opacity .15s, background .15s; }
.invite-toast-x:hover { opacity: 1; background: rgba(240,223,191,.12); }

/* Перетаскивание файлов в чат */
.cp-dragover { position: relative; }
.cp-dragover::after { content: 'Отпустите файлы, чтобы прикрепить'; position: absolute; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: rgba(10,10,21,.55); color: var(--text-primary); font-weight: 600; font-size: 15px; border: 2px dashed var(--glow-border); border-radius: 12px; pointer-events: none; }

/* Альбом (сетка) */
.cp-att-grid { display: grid; gap: 2px; border-radius: 10px; overflow: hidden; margin-bottom: 5px; max-width: 400px; }
.cp-att-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.cp-att-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.cp-att-cell { position: relative; aspect-ratio: 1; overflow: hidden; display: block; }
.cp-att-cell img, .cp-att-cell video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cp-att-cell-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 36px; height: 36px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; pointer-events: none; }

/* ── Пересылка (forward) ── */
.cp-fwd-label { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--glow); margin-bottom: 4px; opacity: .9; }
.cp-bubble.own .cp-fwd-label { color: #fff; }
.cp-fwd-label svg { width: 12px; height: 12px; flex-shrink: 0; }

.cp-modal-ov { position: fixed; inset: 0; z-index: 5000; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; animation: cpCtxIn .12s ease; }
/* Подтверждение/ввод — всегда поверх любых модалок (подписка z-index 5200 и т.п.) */
#cp-confirm.cp-modal-ov, #cp-prompt.cp-modal-ov { z-index: 6500; }
.cp-modal { width: 360px; max-width: 92vw; max-height: 70vh; display: flex; flex-direction: column; background: var(--bg-tertiary, #1a1410); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 14px 44px rgba(0,0,0,.55); overflow: hidden; animation: cpModalPop .18s cubic-bezier(.2,.8,.3,1); }
@keyframes cpModalPop { from { opacity: 0; transform: scale(.94) translateY(8px); } to { opacity: 1; transform: none; } }
.cp-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; font-weight: 600; border-bottom: 1px solid var(--border); }
.cp-modal-x { border: none; background: transparent; color: var(--text-secondary); font-size: 16px; cursor: pointer; }
.cp-modal-x:hover { color: var(--text-primary); }
.cp-fwd-search { margin: 10px 12px 6px; padding: 9px 12px; border-radius: 9px; border: 1px solid var(--border); background: rgba(0,0,0,.25); color: var(--text-primary); font-size: 13px; outline: none; }
.cp-fwd-search:focus { border-color: var(--glow); }
.cp-fwd-list { overflow-y: auto; padding: 6px; }
.cp-fwd-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: none; background: transparent; color: var(--text-primary); border-radius: 9px; cursor: pointer; text-align: left; }
.cp-fwd-item:hover { background: var(--bg-hover); }
.cp-fwd-av { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; font-size: 16px; background: var(--bg-active); }
.cp-fwd-av img { width: 100%; height: 100%; object-fit: cover; }
.cp-fwd-name { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-fwd-empty { padding: 24px; text-align: center; color: var(--text-secondary); font-size: 13px; }

/* Модальное подтверждение */
.cp-confirm-box { width: 330px; max-width: 90vw; padding: 22px; }
.cp-confirm-title { font-size: 16px; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; }
.cp-confirm-text { font-size: 13px; color: var(--text-secondary); line-height: 1.45; margin-bottom: 20px; }
.cp-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }
.cp-confirm-actions button { padding: 9px 18px; border-radius: 9px; border: none; cursor: pointer; font-size: 14px; }
.cp-confirm-cancel { background: var(--bg-hover); color: var(--text-primary); }
.cp-confirm-cancel:hover { background: var(--bg-active); }
.cp-confirm-ok { background: var(--glow); color: #0a0a15; font-weight: 600; }
.cp-confirm-ok.danger { background: #e06c5c; color: #fff; }
.cp-confirm-ok:hover { filter: brightness(1.08); }

/* ── Input ────────────────────────────────────── */
.cp-input-row {
  display: flex; gap: 10px; padding: 12px 18px;
  flex-shrink: 0;
  background: rgba(19,10,4,0.92); backdrop-filter: blur(8px);
  align-items: flex-end;
}
/* Telegram-пилюля: капсула с эмодзи, текстом и скрепкой */
.cp-input-pill {
  flex: 1; display: flex; align-items: flex-end; gap: 2px;
  background: var(--bg-primary); border: 1px solid var(--border);
  border-radius: 22px; padding: 0 6px; min-height: 46px;
  transition: border-color var(--transition);
}
.cp-input-pill:focus-within { border-color: var(--glow); }
.cp-input-pill #cp-input, .cp-input-pill #lp-input {
  flex: 1; background: transparent; border: none; border-radius: 0;
  color: var(--text-primary); padding: 12px 4px; font-size: 14px; outline: none;
  resize: none; font-family: inherit; line-height: 1.4; overflow: hidden;
  min-height: 22px; max-height: 120px;
}
.cp-input-pill #cp-input::placeholder, .cp-input-pill #lp-input::placeholder { color: var(--text-muted); }
.cp-emoji-btn {
  width: 38px; height: 44px; border: none; background: transparent;
  color: var(--text-secondary); cursor: pointer; flex-shrink: 0; align-self: flex-end;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  transition: color var(--transition);
}
.cp-emoji-btn:hover { color: var(--glow); }
/* Эмодзи-пикер */
.cp-emoji-pop {
  position: fixed; z-index: 4600; width: 332px; max-width: 92vw; max-height: 248px;
  overflow-y: auto; display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px;
  padding: 10px; background: var(--bg-tertiary, #1a1410); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: 0 12px 38px rgba(0,0,0,.55);
}
.cp-emoji-item {
  border: none; background: none; cursor: pointer; font-size: 22px; line-height: 1;
  padding: 5px 0; border-radius: 8px; transition: background .12s;
}
.cp-emoji-item:hover { background: rgba(240,223,191,.12); }
.cp-send-btn {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent), var(--glow));
  border: none; color: #fff; font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition);
}
.cp-send-btn:hover { filter: brightness(1.15); transform: scale(1.05); }
.cp-send-btn:disabled { opacity: 0.4; cursor: default; transform: none; filter: none; }
.cp-char-count {
  font-size: 11px; color: var(--text-muted); flex-shrink: 0;
  align-self: flex-end; padding-bottom: 12px; display: none;
}
.cp-char-count.cp-char-warn { color: #e3a000; display: block; }
.cp-char-count.cp-char-over { color: #f85149; display: block; }

/* ── Bubble footer (time + check inside bubble) ── */
.cp-bubble-footer {
  display: inline-flex; align-items: center; gap: 3px;
  float: right; margin-left: 8px; margin-top: 4px; margin-bottom: -2px;
  vertical-align: bottom;
}

/* ✓ single — sent, not yet read (white semi-transparent on blue bubble) */
.cp-check-sent,
.cp-check-read {
  display: inline-block;
  width: 16px; height: 11px;
  position: relative; flex-shrink: 0;
}

/* Both use SVG double-check via background */
.cp-check-sent::before,
.cp-check-sent::after,
.cp-check-read::before,
.cp-check-read::after {
  content: '✓';
  position: absolute; top: 0;
  font-size: 11px; font-weight: 700; line-height: 1;
}

/* First tick — left */
.cp-check-sent::before,
.cp-check-read::before { left: 0; }

/* Second tick — overlapping right */
.cp-check-sent::after,
.cp-check-read::after  { left: 5px; }

/* Not read: both ticks white semi-transparent */
.cp-check-sent::before,
.cp-check-sent::after  { color: rgba(255,255,255,0.55); }

/* Read: both ticks bright white */
.cp-check-read::before,
.cp-check-read::after  { color: #ffffff; }

/* ── Group read receipts (below bubble) ────────── */
.cp-receipts {
  display: flex; align-items: center; gap: 2px;
  margin-top: 3px; justify-content: flex-end; flex-wrap: wrap;
}

.cp-reader-avatar {
  width: 16px; height: 16px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--glow));
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 8px; font-weight: 700; color: #fff;
  border: 1.5px solid var(--bg-secondary);
  cursor: default;
}

/* ── Unread dot on panel contacts ─────────────── */
.unread-dot {
  min-width: 18px; height: 18px; border-radius: 9px;
  background: var(--glow); color: #0A0402;
  font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px; flex-shrink: 0;
  box-shadow: 0 0 8px rgba(232,160,48,0.5);
}
.unread-at {
  width: 18px; height: 18px; border-radius: 9px; margin-right: 4px;
  background: var(--glow); color: #0A0402;
  font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  box-shadow: 0 0 8px rgba(232,160,48,0.5);
}

/* Свёрнутая панель: один бейдж в правом-нижнем углу аватара (@ при упоминании, иначе цифра) */
.panel.collapsed .player-card { position: relative; }
.panel.collapsed .player-card .unread-dot,
.panel.collapsed .player-card .unread-at {
  position: absolute; left: calc(50% + 13px); top: 31px;
  transform: translate(-50%, -50%); margin: 0;
  min-width: 16px; width: auto; height: 16px; padding: 0 3px;
  border-radius: 8px; font-size: 9px;
  box-shadow: 0 0 0 2px var(--bg-secondary);
}
.panel.collapsed .player-card .unread-at ~ .unread-dot { display: none; }

/* ── Left panel extras ────────────────────────── */

.player-actions { display: flex; gap: 4px; opacity: 0; transition: var(--transition); }
.player-card:hover .player-actions { opacity: 1; }
.player-action-btn {
  background: none; border: none; cursor: pointer;
  font-size: 14px; padding: 3px 5px; border-radius: 4px;
  transition: var(--transition); line-height: 1;
}
.player-action-btn:hover { background: var(--bg-active); }

.panel-empty {
  padding: 20px 12px; color: var(--text-muted);
  font-size: 13px; text-align: center; line-height: 1.6;
}

.panel-section-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.8px; color: var(--text-muted);
  padding: 8px 8px 4px; display: block;
}

/* Panel action row */
.panel-actions-row {
  display: flex; gap: 8px; padding: 8px 12px 6px;
  flex-shrink: 0;
}

.panel-action-btn {
  width: 36px; height: 36px;
  border-radius: 10px; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  flex-shrink: 0;
}
.panel-action-btn svg {
  width: 18px; height: 18px;
  fill: currentColor;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.4));
  transition: var(--transition);
}
.panel-action-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.panel-action-btn:hover svg {
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.3));
}

/* Glow variant — same style as other buttons */
.panel-action-glow {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border: none;
}
.panel-action-glow:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* Notification variant */
.panel-action-notif { position: relative; }
.panel-action-notif .notif-count {
  position: absolute; top: -3px; right: -3px;
  background: var(--danger); color: #fff;
  font-size: 9px; font-weight: 700;
  min-width: 14px; height: 14px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 2px; border: 2px solid var(--bg-secondary);
}
.panel-action-notif.notif-glow { color: var(--warning); animation: notif-pulse 1.8s ease infinite; }
.panel-action-notif.notif-glow svg { filter: drop-shadow(0 0 5px var(--warning)); }

/* Collapsed: hide action row */
.panel.collapsed .panel-actions-row { display: none; }

/* Find player modal */
.find-search-wrap { margin-bottom: 10px; }
.find-search-wrap input {
  width: 100%; background: var(--bg-tertiary); border: 1px solid var(--border);
  border-radius: 20px; color: var(--text-primary); padding: 10px 16px;
  font-size: 14px; outline: none; transition: var(--transition);
}
.find-search-wrap input:focus { border-color: var(--glow); }
.find-search-wrap input::placeholder { color: var(--text-muted); }

.find-results { max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; min-height: 40px; }
.find-hint { color: var(--text-muted); font-size: 13px; text-align: center; padding: 12px; }

.find-user-item {
  display: flex; align-items: center; gap: 10px; padding: 8px;
  border-radius: 8px; transition: var(--transition); cursor: default;
}
.find-user-item:hover { background: var(--bg-hover); }
.find-user-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent), var(--glow));
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff;
}
.find-user-info { flex: 1; }
.find-user-name   { font-size: 14px; font-weight: 600; }
.find-user-rating { font-size: 11px; color: var(--text-muted); }
.find-user-actions { display: flex; gap: 5px; align-items: center; }
.find-add-btn {
  font-size: 11px; font-weight: 600; padding: 4px 8px; border-radius: 12px;
  background: var(--accent-light); color: var(--accent);
  border: 1px solid var(--glow-border); cursor: pointer; transition: var(--transition);
  white-space: nowrap;
}
.find-add-btn:hover:not(:disabled) { background: var(--accent); color: #fff; }
.find-add-btn:disabled { opacity: 0.6; cursor: default; }
.find-friend-badge { font-size: 11px; color: var(--glow); font-weight: 600; }
.find-msg-btn {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex-shrink: 0; padding: 0;
  border: none; border-radius: 9px; cursor: pointer; color: #0a0a15;
  background: linear-gradient(135deg, var(--accent), var(--glow));
  transition: filter .15s, transform .15s;
}
.find-msg-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }

.find-create-group-row {
  width: 100%; padding: 10px 14px; background: var(--bg-tertiary);
  border: 1px solid var(--border); border-radius: 8px;
  color: var(--text-secondary); font-size: 14px; font-weight: 500;
  cursor: pointer; display: flex; align-items: center; gap: 10px;
  transition: var(--transition); text-align: left;
}
.find-create-group-row:hover { background: var(--bg-hover); color: var(--text-primary); }
.find-icon { font-size: 18px; }

/* Аватар группы в шапке — кликабелен (настройки группы) */
.cp-avatar-group { cursor: pointer; transition: filter .15s; }
.cp-avatar-group:hover { filter: brightness(1.1); }
/* Панель настроек группы */
.gs-av { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto; background: linear-gradient(135deg, var(--accent), var(--glow)); display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; color: #fff; overflow: hidden; }
.gs-actions { display: flex; flex-direction: column; gap: 6px; }
.gs-btn { display: block; width: 100%; text-align: left; padding: 10px 13px; border-radius: 9px; border: 1px solid var(--border); background: var(--bg-tertiary); color: var(--text-primary); font-size: 13px; font-weight: 600; cursor: pointer; transition: background .12s, border-color .12s; }
.gs-btn:hover { background: var(--bg-hover); border-color: var(--glow-border); }
.gs-danger { color: var(--danger); }
.gs-danger:hover { border-color: var(--danger); background: rgba(232,96,122,.1); }
/* Поле ввода в простой модалке (переименование) */
.cp-prompt-input { width: 100%; margin: 4px 0 16px; padding: 10px 13px; border-radius: 9px; border: 1px solid var(--border); background: var(--bg-primary); color: var(--text-primary); font-size: 14px; outline: none; box-sizing: border-box; }
.cp-prompt-input:focus { border-color: var(--glow); }
/* Модалка участников группы */
.gmem-list { max-height: 320px; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.gmem-row { display: flex; align-items: center; gap: 11px; padding: 7px 8px; border-radius: 9px; transition: background .12s; }
.gmem-row:hover { background: var(--bg-hover); }
.gmem-av { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #4a3060, #2d1b5e); font-size: 13px; font-weight: 700; color: var(--text-primary); }
.gmem-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gmem-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.gmem-owner { font-size: 11px; font-weight: 600; color: var(--glow); }
.gmem-act { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 8px; background: none; cursor: pointer; color: var(--text-secondary); transition: background .12s, color .12s; }
.gmem-crown:hover { background: rgba(232,160,48,.14); color: var(--glow); }
.gmem-remove:hover { background: rgba(232,96,122,.14); color: var(--danger); }
.gmem-add { margin: 8px 12px 12px; padding: 10px; border: 1px solid var(--glow-border); border-radius: 9px; background: var(--bg-tertiary); color: var(--glow); font-size: 13px; font-weight: 600; cursor: pointer; transition: background .12s; }
.gmem-add:hover { background: var(--bg-hover); }

/* Выбор участников (Telegram-стиль): поиск, статус, галочка, чипы выбранных */
.gm-picker { background: var(--bg-primary); border-radius: 10px; overflow: hidden; }
.gm-empty { color: var(--text-muted); font-size: 13px; padding: 10px; background: var(--bg-primary); border: 1px solid var(--border); border-radius: 10px; }
.gm-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 8px 4px; }
.gm-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; background: var(--bg-tertiary); border: 1px solid var(--glow-border); border-radius: 16px; font-size: 12px; font-weight: 600; cursor: pointer; max-width: 170px; }
.gm-chip-av { width: 22px; height: 22px; border-radius: 50%; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #4a3060, #2d1b5e); font-size: 9px; font-weight: 700; }
.gm-chip-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-chip-x { opacity: .6; font-size: 11px; }
.gm-chip:hover .gm-chip-x { opacity: 1; color: var(--danger); }
.gm-search-wrap { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--border); }
.gm-search-ic { color: var(--text-muted); flex-shrink: 0; }
.gm-picker .gm-search { flex: 1; width: auto; background: none; border: none; outline: none; box-shadow: none; padding: 0; border-radius: 0; color: var(--text-primary); font-size: 14px; }
.gm-picker .gm-search:focus { border: none; box-shadow: none; }
.gm-search::placeholder { color: var(--text-muted); }
.gm-list { display: flex; flex-direction: column; max-height: 280px; overflow-y: auto; padding: 4px; }
.gm-item { display: flex; align-items: center; gap: 11px; padding: 7px 8px; border-radius: 9px; cursor: pointer; user-select: none; transition: background .12s; }
.gm-item:hover { background: var(--bg-hover); }
.gm-av { position: relative; width: 40px; height: 40px; flex-shrink: 0; }
.gm-av-inner { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #4a3060, #2d1b5e); font-size: 14px; font-weight: 700; color: var(--text-primary); }
.gm-check { position: absolute; right: -2px; bottom: -2px; width: 18px; height: 18px; border-radius: 50%; background: var(--glow); color: #0a0a15; display: none; align-items: center; justify-content: center; border: 2px solid var(--bg-primary); }
.gm-item.selected .gm-check { display: flex; }
.gm-item.selected .gm-av-inner { box-shadow: 0 0 0 2px var(--glow); }
.gm-meta { flex: 1; min-width: 0; }
.gm-name { font-size: 14px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-item.selected .gm-name { color: var(--glow); }
.gm-status { font-size: 12px; color: var(--text-muted); }
.gm-online { color: var(--glow); }

/* ── Голосовой звонок: плавающий оверлей (voicecall.js) ───────────────────── */
.cp-call-btn svg { width: 18px; height: 18px; }

.vc-overlay {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  overflow: hidden;
}
/* Плавающий режим — перетаскиваемый оверлей */
.vc-overlay.vc-floating {
  position: fixed;
  bottom: 20px; left: 50%; transform: translateX(-50%);
  z-index: 1200;
  width: min(440px, calc(100vw - 32px));
  border-radius: var(--border-radius-lg);
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
  animation: vc-pop .18s ease;
}
@keyframes vc-pop { from { opacity: 0; transform: translateX(-50%) translateY(10px); } }
/* Встроенный режим — плашка сверху чата (как в Discord) */
.vc-overlay.vc-docked {
  position: relative;
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
}
.vc-overlay.vc-docked .vc-min { display: none; }
.vc-overlay.vc-docked .vc-ring { width: 42px; height: 42px; }
.vc-overlay.vc-docked .vc-av { width: 36px; height: 36px; font-size: 14px; }
.vc-overlay.vc-docked .vc-tiles { padding: 12px; gap: 10px; }
.vc-overlay.vc-docked .vc-controls { padding: 8px 12px; }

.vc-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  user-select: none;
}
.vc-floating .vc-head { cursor: grab; touch-action: none; }
.vc-floating .vc-head:active { cursor: grabbing; }
.vc-pop { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 4px; border-radius: var(--border-radius-sm); display: flex; }
.vc-pop:hover { color: var(--text-primary); background: var(--bg-hover); }
.vc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 6px var(--success); flex-shrink: 0; }
.vc-title { font-weight: 600; font-size: 14px; color: var(--text-primary); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vc-min { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 4px; border-radius: var(--border-radius-sm); display: flex; }
.vc-min:hover { color: var(--text-primary); background: var(--bg-hover); }

.vc-tiles {
  display: flex; flex-wrap: wrap; gap: 14px;
  padding: 18px 14px;
  justify-content: center;
}
/* Свёрнутый плавающий вид — прозрачный фон, аватары + «...» (кнопки по ховеру) */
.vc-overlay .vc-expand { display: none; }   /* выше .vc-ctl по специфичности */
.vc-dots { display: none; }

/* Свёрнутый: аватары — поток (стоят на месте), кнопки — абсолютно справа (выезжают, не двигая аватары) */
.vc-floating.vc-collapsed {
  background: transparent; border: none; box-shadow: none; width: auto;
  overflow: visible; /* чтобы кнопки за краем не обрезались */
}
.vc-floating.vc-collapsed .vc-head { display: none; }
.vc-floating.vc-collapsed .vc-name { display: none; }
.vc-floating.vc-collapsed .vc-tiles { flex-direction: column; align-items: center; padding: 0; gap: 6px; }
.vc-floating.vc-collapsed .vc-tile { width: auto; }
.vc-floating.vc-collapsed .vc-ring { width: 32px; height: 32px; border-width: 1.5px; }
.vc-floating.vc-collapsed .vc-av { width: 26px; height: 26px; font-size: 10px; }
.vc-floating.vc-collapsed .vc-mute-badge { width: 13px; height: 13px; border-width: 1.5px; }
.vc-floating.vc-collapsed .vc-mute-badge svg { width: 8px; height: 8px; }
.vc-floating.vc-collapsed .vc-stub { display: none; }
.vc-overlay .vc-dockbtn { display: none; }              /* в чате/развёрнутом — скрыта */
.vc-floating.vc-collapsed .vc-dockbtn { display: flex; }

/* Кнопки — абсолютная колонка справа от аватаров, раскрываются вверх по ховеру */
.vc-floating.vc-collapsed .vc-controls {
  position: absolute; left: 100%; bottom: 0; margin-left: 8px;
  flex-direction: column; align-items: center;
  width: 30px; padding: 0; gap: 0;
  transition: gap .2s ease;
}
.vc-floating.vc-collapsed .vc-dots {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--bg-quaternary); color: var(--text-primary);
  position: absolute; left: 0; bottom: 0;
  transition: opacity .15s ease;
}
.vc-floating.vc-collapsed .vc-ctl {
  width: 30px; height: 30px;
  max-height: 0; opacity: 0; transform: scale(.5); pointer-events: none;
  transition: max-height .2s ease, opacity .2s ease, transform .2s ease;
}
.vc-floating.vc-collapsed .vc-ctl svg { width: 15px; height: 15px; }
.vc-floating.vc-collapsed .vc-expand { display: flex; }

.vc-floating.vc-collapsed:hover .vc-controls,
.vc-floating.vc-collapsed.vc-revealed .vc-controls { gap: 6px; }
.vc-floating.vc-collapsed:hover .vc-ctl,
.vc-floating.vc-collapsed.vc-revealed .vc-ctl {
  max-height: 30px; opacity: 1; transform: scale(1); pointer-events: auto;
}
.vc-floating.vc-collapsed:hover .vc-dots,
.vc-floating.vc-collapsed.vc-revealed .vc-dots { opacity: 0; pointer-events: none; }

.vc-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 84px; }
.vc-ring {
  position: relative;
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid transparent;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.vc-tile.vc-speaking .vc-ring { border-color: var(--success); box-shadow: 0 0 0 3px rgba(67,181,129,.35); }
.vc-av {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; text-transform: uppercase;
}
/* Бейдж на аватаре: микрофон выключен / звук выключен (deafen) — как в Discord */
.vc-mute-badge {
  display: none;
  position: absolute; right: -2px; bottom: -2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--danger); color: #fff;
  align-items: center; justify-content: center;
  border: 2px solid var(--bg-secondary);
  overflow: hidden;
}
.vc-mute-badge svg { width: 10px; height: 10px; }
.vc-tile.muted .vc-mute-badge,
.vc-tile.deafened .vc-mute-badge { display: flex; }
/* deafen заменяет микрофон на наушники */
.vc-badge-deaf { display: none; }
.vc-tile.deafened .vc-badge-mic { display: none; }
.vc-tile.deafened .vc-badge-deaf { display: block; }
.vc-tile.deafened .vc-mute-badge::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 140%; height: 2.5px; background: var(--danger);
  transform: translate(-50%, -50%) rotate(45deg);
}
.vc-name { font-size: 12px; color: var(--text-secondary); max-width: 84px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vc-you { color: var(--text-muted); }

.vc-controls {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 12px;
}
.vc-ctl {
  width: 44px; height: 44px; border-radius: 50%;
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-quaternary); color: var(--text-primary);
  transition: background .12s ease, transform .08s ease;
}
.vc-ctl:hover { background: var(--bg-hover); }
.vc-ctl:active { transform: scale(.93); }
.vc-mic.vc-muted { background: var(--danger); color: #fff; }
.vc-deaf.vc-deafened { background: var(--danger); color: #fff; }
.vc-hangup { background: var(--danger); color: #fff; }
.vc-hangup:hover { background: var(--danger); filter: brightness(1.1); }
.vc-stub { opacity: .4; cursor: not-allowed; }
.vc-stub:hover { background: var(--bg-quaternary); }

/* Круглая зелёная кнопка «Присоединиться» (для тех, кто ещё не в звонке) */
.vc-join-btn { background: var(--success); color: #fff; }
.vc-join-btn:hover { background: var(--success); filter: brightness(1.1); }

/* Входящий звонок */
.vc-incoming {
  position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
  z-index: 1300;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: var(--border-radius-lg);
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
  animation: vc-inc-pop .2s ease;
}
@keyframes vc-inc-pop { from { opacity: 0; transform: translateX(-50%) translateY(-12px); } }
.vc-inc-av {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px; text-transform: uppercase; flex-shrink: 0;
}
.vc-inc-title { font-size: 12px; color: var(--text-muted); }
.vc-inc-sub {
  font-size: 14px; font-weight: 600; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px;
}
.vc-inc-actions { display: flex; gap: 8px; margin-left: 6px; }
.vc-inc-accept { background: var(--success); color: #fff; animation: vc-inc-jiggle 1s ease-in-out infinite; }
.vc-inc-accept:hover { background: var(--success); filter: brightness(1.1); }
.vc-inc-decline { background: var(--danger); color: #fff; }
.vc-inc-decline:hover { background: var(--danger); filter: brightness(1.1); }
@keyframes vc-inc-jiggle { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-11deg); } 75% { transform: rotate(11deg); } }

/* Системное сообщение «X начал звонок» */
.cp-sys-row { display: flex; justify-content: center; margin: 10px 0; }
.cp-sys-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 999px;
  background: var(--bg-tertiary); color: var(--text-muted);
  font-size: 12px;
}
.cp-sys-pill svg { color: var(--success); flex-shrink: 0; }
.cp-sys-pill b { color: var(--text-secondary); font-weight: 600; }

/* Кликабельный аватар (открывает профиль) */
.av-clk { cursor: pointer; }

/* Кнопки профиля спрятаны за «...» (снизу карточки), раскрываются по наведению */
.prof-actions {
  position: relative;
  display: flex; justify-content: center; align-items: center;
  min-height: 40px;
}
.prof-dots {
  width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-tertiary); color: var(--text-secondary);
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  transition: opacity .15s ease, color .12s ease;
}
.prof-dots:hover { color: var(--text-primary); }
.prof-dots svg { width: 19px; height: 19px; }

.prof-act {
  width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-tertiary); color: var(--text-secondary);
}
.prof-act:active { transform: scale(.92); }
.prof-act:disabled { opacity: .55; cursor: default; }
.prof-act svg { width: 19px; height: 19px; }
#pa-friend-slot { display: inline-flex; gap: 8px; }

/* свёрнуто: группы спрятаны, по центру виден только «...» */
.prof-grp {
  display: flex; gap: 8px;
  max-width: 0; opacity: 0; overflow: hidden; pointer-events: none;
  transition: max-width .25s ease, opacity .2s ease;
}
/* тонкий разделитель между группами (по центру промежутка) */
.prof-divider {
  width: 1px; align-self: stretch; margin: 7px 0;
  background: var(--border);
  opacity: 0; transition: opacity .2s ease;
}
/* раскрытие по наведению/тапу: группы расходятся по краям карточки */
.prof-actions:hover, .prof-actions.revealed { justify-content: space-between; }
.prof-actions:hover .prof-grp,
.prof-actions.revealed .prof-grp { max-width: 260px; opacity: 1; pointer-events: auto; }
.prof-actions:hover .prof-divider,
.prof-actions.revealed .prof-divider { opacity: .6; }
.prof-actions:hover .prof-dots,
.prof-actions.revealed .prof-dots { opacity: 0; pointer-events: none; }

/* ховеры действий */
.prof-act:hover { background: var(--bg-hover); color: var(--text-primary); }
.prof-act-call:hover,
.prof-act-accept:hover { background: var(--success); color: #fff; }
[data-fa="add"]:hover { background: var(--accent); color: #fff; }
.prof-act-rmfriend:hover,
.prof-act-decline:hover,
.prof-act-block:hover { background: var(--danger); color: #fff; }

/* Жёлтая рамка в списке у чата с активным звонком, к которому не присоединились */
.player-card.call-available {
  background: rgba(240,173,78,.10);
  box-shadow: inset 0 0 0 1.5px rgba(240,173,78,.45);
}

/* Чат в списке, где идёт активный звонок */
.player-card.in-call {
  background: rgba(67,181,129,.10);
  box-shadow: inset 0 0 0 1.5px rgba(67,181,129,.4);
}
.player-card.in-call .name::after {
  content: '';
  display: inline-block;
  width: 7px; height: 7px; margin-left: 6px;
  border-radius: 50%; background: var(--success);
  box-shadow: 0 0 5px var(--success);
  vertical-align: middle;
}