/* ===== Общий чат — UI оболочка ===== */
#cchat{
    --cc-bg:#151722; --cc-elev:#1b1e2b; --cc-input:#1b1e2b; --cc-emoji:#252A3D;
    --cc-text:#e7e9f2; --cc-muted:#8b90a5; --cc-faint:#7E849D;
    --cc-accent:#4f5bff; --cc-accent2:#5b6bff; --cc-online:#3ddc84; --cc-danger:#ef4444;
    --cc-sys:rgba(88,101,242,.10); --cc-sys-b:rgba(88,101,242,.18);
    --cc-border:rgba(255,255,255,.06); --cc-border2:rgba(255,255,255,.09);
    position:fixed; right:0; top:50%; bottom:auto; z-index:99990;
    transform:translateY(-50%);
    font-family:inherit; color:var(--cc-text);
}
#cchat *{box-sizing:border-box;}
#cchat [hidden]{display:none !important;}

/* Плавающая кнопка */
.cchat-fab{
    width:82px; height:140px; border:1px solid rgba(255,255,255,.13); border-right:0;
    border-radius:26px 0 0 26px;
    background:linear-gradient(145deg,rgba(76,85,102,.96),rgba(47,55,69,.96));
    color:#fff; cursor:pointer; display:flex; flex-direction:column; gap:10px;
    align-items:center; justify-content:center;
    box-shadow:inset 5px 0 0 rgba(255,255,255,.08), 0 12px 34px rgba(0,0,0,.36);
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    transition:transform .15s ease, background .15s ease, box-shadow .15s; position:relative;
}
.cchat-fab:hover{transform:translateX(-3px); background:linear-gradient(145deg,rgba(86,96,115,.98),rgba(54,63,79,.98)); box-shadow:inset 5px 0 0 rgba(255,255,255,.11), 0 14px 38px rgba(0,0,0,.42);}
.cchat-fab:active{transform:translateX(-1px) scale(.98);}
.cchat-fab-label{font-size:27px; font-weight:800; line-height:1; letter-spacing:-.5px;}
.cchat-fab-badge{
    position:absolute; top:10px; right:8px; min-width:20px; height:20px; padding:0 5px;
    background:var(--cc-danger); color:#fff; border-radius:10px; font-size:11px; font-weight:700;
    display:flex; align-items:center; justify-content:center; border:2px solid #0e1016;
}

/* Окно */
.cchat-panel{
    position:fixed; right:22px; top:50%; bottom:auto;
    width:680px; max-width:calc(100vw - 32px);
    height:75vh; max-height:720px; min-height:460px;
    background:var(--cc-bg); border:1px solid var(--cc-border); border-radius:24px;
    box-shadow:0 30px 80px rgba(0,0,0,.55), 0 6px 24px rgba(0,0,0,.4);
    display:flex; flex-direction:column; overflow:hidden;
    transform-origin:center right; transition:opacity .18s ease, transform .18s ease;
}
#cchat.cchat-collapsed .cchat-panel{opacity:0; transform:translateY(-50%) translateX(16px) scale(.94); pointer-events:none;}
#cchat:not(.cchat-collapsed) .cchat-panel{opacity:1; transform:translateY(-50%);}

/* Шапка ~72px */
.cchat-head{
    height:72px; flex-shrink:0; display:flex; align-items:center; justify-content:space-between;
    padding:0 22px; border-bottom:1px solid var(--cc-border);
}
.cchat-head-info{display:flex; flex-direction:column; gap:4px; min-width:0;}
.cchat-title{font-size:17px; font-weight:600; letter-spacing:.2px; line-height:1.1;}
.cchat-online{display:flex; align-items:center; gap:7px; font-size:13px; color:var(--cc-muted); line-height:1;}
.cchat-online b{color:var(--cc-text); font-weight:600;}
.cchat-dot{width:8px; height:8px; border-radius:50%; background:var(--cc-online); box-shadow:0 0 8px rgba(61,220,132,.7); flex-shrink:0;}
.cchat-close{background:none; border:none; color:var(--cc-muted); cursor:pointer; padding:6px; border-radius:10px; display:flex;}
.cchat-close:hover{color:#fff; background:rgba(255,255,255,.06);}

/* Лента */
.cchat-body{flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; padding:24px 24px 14px; scroll-behavior:smooth;}
.cchat-body::before{content:''; margin-top:auto;} /* прижимает короткий список к низу, но НЕ клипает верх при переполнении */
.cchat-body::-webkit-scrollbar{width:8px;}
.cchat-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1); border-radius:8px;}
.cchat-body::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.16);}
.cchat-list{display:flex; flex-direction:column;}
.cchat-loading{color:var(--cc-muted); text-align:center; padding:40px 0; font-size:14px;}

/* Сообщение (Discord/Steam-стиль) */
.cc-group{display:flex; gap:12px; margin-bottom:18px;}
.cc-ava-link{display:block; flex-shrink:0; line-height:0;}
.cc-ava{width:44px; height:44px; border-radius:12px; object-fit:cover; background:#232838; cursor:pointer; transition:filter .12s;}
.cc-ava-fb{display:flex; align-items:center; justify-content:center; font-weight:700; font-size:18px; color:#cfd4ea; user-select:none;}
.cc-ava-link:hover .cc-ava{filter:brightness(1.12);}
.cc-col{min-width:0; flex:1;}
.cc-meta{display:flex; align-items:center; gap:8px; margin-bottom:4px;}
.cc-name{font-weight:700; font-size:15px; color:#D8DDF2; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
a.cc-name{text-decoration:none; cursor:pointer;}
a.cc-name:hover{text-decoration:underline; filter:brightness(1.1);}
.cc-badge{height:21px; display:inline-flex; align-items:center; font-size:11px; font-weight:800; letter-spacing:.3px; padding:0 8px; border-radius:999px; border:1px solid transparent; line-height:1; flex-shrink:0;}
.cc-time{font-size:13px; color:var(--cc-faint); flex-shrink:0; font-weight:400;}
.cc-msgs{display:flex; flex-direction:column; gap:2px;}
.cc-row{position:relative; display:flex; align-items:flex-start; gap:8px; padding:2px 8px; margin:0 -8px; border-radius:12px;}
.cc-row:hover{background:rgba(255,255,255,.025);}
.cc-text{font-size:15px; line-height:1.35; color:#F2F4FF; word-break:break-word; overflow-wrap:anywhere; flex:1;}
/* Админ-действия: ⋯ по hover + dropdown */
.cc-more{position:absolute; top:2px; right:4px; width:30px; height:30px; padding:0; border:none; border-radius:9px; background:rgba(255,255,255,.05); color:#AEB4CC; cursor:pointer; display:none; align-items:center; justify-content:center;}
.cc-row:hover .cc-more{display:flex;}
.cc-more:hover{background:rgba(255,255,255,.12); color:#fff;}
.cc-more svg{display:block;}
.cc-menu{position:absolute; width:220px; background:#202437; border:1px solid rgba(255,255,255,.08); border-radius:14px; box-shadow:0 18px 50px rgba(0,0,0,.35); padding:8px; z-index:200; display:flex; flex-direction:column; gap:2px;}
.cc-menu-item{display:flex; align-items:center; height:38px; width:100%; border:none; background:none; border-radius:10px; padding:0 12px; font-size:14px; font-family:inherit; color:#DDE3FF; cursor:pointer; text-align:left;}
.cc-menu-item:hover{background:rgba(255,255,255,.07);}
.cc-menu-item.cc-danger{color:#FF8A8A;}
.cc-menu-item.cc-danger:hover{background:rgba(255,107,107,.10);}
.cc-menu-item.cc-good{color:#7DFFB2;}
.cc-menu-item.cc-good:hover{background:rgba(125,255,178,.10);}
.cc-menu-sep{height:1px; background:rgba(255,255,255,.07); margin:6px 4px;}

/* Контекстное меню сообщения (ПКМ, как в Telegram) */
.cc-ctx{position:absolute; z-index:210; display:flex; flex-direction:column; gap:8px; align-items:flex-start;}
.cc-ctx-reacts{display:flex; gap:2px; background:#202437; border:1px solid rgba(255,255,255,.08); border-radius:22px; padding:5px 8px; box-shadow:0 18px 50px rgba(0,0,0,.35); width:max-content;}
.cc-ctx-reacts button{border:none; background:none; font-size:21px; line-height:1; padding:4px 5px; border-radius:50%; cursor:pointer; transition:transform .1s ease;}
.cc-ctx-reacts button:hover{transform:scale(1.3);}
.cc-ctx .cc-menu{position:static;}

/* Админ-меню настроек чата (⚙ в шапке) */
#cchat .cchat-gear{margin-right:2px;}
.cc-settings{position:absolute; top:56px; right:12px; z-index:220; width:310px; max-width:calc(100% - 24px); max-height:72%; overflow-y:auto; background:#202437; border:1px solid rgba(255,255,255,.08); border-radius:14px; box-shadow:0 18px 50px rgba(0,0,0,.35); padding:14px;}
.cc-settings-title{font-size:14px; font-weight:700; color:#DDE3FF; margin-bottom:8px;}
.cc-settings-row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 0; border-top:1px solid rgba(255,255,255,.05); cursor:default;}
.cc-settings-label{font-size:12.5px; color:#c6cbe6; display:flex; flex-direction:column; gap:2px;}
.cc-settings-label i{font-style:normal; font-size:10.5px; color:#8F96B3;}
.cc-settings-row input{width:76px; flex-shrink:0; background:#141723; border:1px solid rgba(255,255,255,.12); border-radius:8px; color:#fff; font-size:13px; padding:6px 8px; text-align:center; transition:border-color .2s; font-family:inherit;}
.cc-settings-row input:focus{outline:none; border-color:#7C5CFF;}
.cc-settings-row input.cc-saved{border-color:#7DFFB2;}
.cc-settings-hint{margin-top:10px; font-size:10.5px; color:#8F96B3; line-height:1.4;}
/* секция «события» в админ-меню */
.cc-settings-event{margin-bottom:10px; padding:12px; background:rgba(255,194,71,.06); border:1px solid rgba(255,194,71,.18); border-radius:12px;}
.cc-settings-event-name{font-size:13px; font-weight:700; color:#DDE3FF;}
.cc-settings-desc{font-size:11px; color:#a9afc9; line-height:1.4; margin:4px 0 10px;}
.cc-settings-event-row{display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap;}
/* конфетти при выигрыше дропа */
.cc-confetti{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:400; border-radius:inherit;}
.cc-confetti i{position:absolute; top:-14px; border-radius:2px; opacity:.95; animation:ccfall ease-in forwards;}
@keyframes ccfall{ to{ transform:translate(var(--cc-drift,0), 720px) rotate(var(--cc-rot,360deg)); opacity:.5; } }
.cc-settings-event-row label{display:flex; flex-direction:column; gap:4px; font-size:10.5px; color:#8F96B3; flex:1;}
.cc-settings-event-row input{width:100%; box-sizing:border-box; background:#141723; border:1px solid rgba(255,255,255,.12); border-radius:8px; color:#fff; font-size:13px; padding:6px 8px; text-align:center; font-family:inherit;}
.cc-settings-event-row input:focus{outline:none; border-color:#FFC247;}
.cc-drop-go{flex-shrink:0; background:#FFC247; color:#1b1f2f; border:none; border-radius:8px; font-size:13px; font-weight:700; font-family:inherit; padding:7px 14px; cursor:pointer; transition:filter .12s;}
.cc-drop-go:hover{filter:brightness(1.08);}
.cc-drop-go:disabled{opacity:.5; cursor:default;}
.cc-drop-status{margin-top:8px; font-size:11px; color:#c6cbe6; min-height:14px;}
.cc-drop-status:empty{display:none;}
/* кнопка «Забрать» в дроп-сообщении */
.cc-drop-cta{background:#FFC247 !important; color:#1b1f2f !important; font-weight:700;}
.cc-drop-cta:disabled{opacity:.6; cursor:default;}
.cc-text.cc-deleted{color:#7E849D; font-style:italic;}
.cc-toast{position:absolute; left:50%; bottom:110px; transform:translateX(-50%) translateY(10px); max-width:80%; background:#202437; border:1px solid rgba(255,255,255,.1); color:#e7e9f2; font-size:13px; padding:10px 16px; border-radius:12px; box-shadow:0 12px 34px rgba(0,0,0,.45); opacity:0; transition:opacity .22s, transform .22s; z-index:300; text-align:center; pointer-events:none;}
.cc-toast.cc-toast-show{opacity:1; transform:translateX(-50%) translateY(0);}
.cc-modal-ov{position:absolute; inset:0; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; padding:20px; z-index:400;}
.cc-modal{width:100%; max-width:320px; background:#1b1e2b; border:1px solid rgba(255,255,255,.08); border-radius:18px; padding:20px;}
.cc-modal-t{font-size:16px; font-weight:700; color:#fff; margin-bottom:8px;}
.cc-modal-x{font-size:13px; color:var(--cc-muted); line-height:1.4; margin-bottom:18px;}
.cc-modal-b{display:flex; gap:10px;}
.cc-mbtn{flex:1; height:44px; border:none; border-radius:12px; font-size:14px; font-weight:600; font-family:inherit; cursor:pointer;}
.cc-mcancel{background:rgba(255,255,255,.08); color:#e7e9f2;}
.cc-mcancel:hover{background:rgba(255,255,255,.14);}
.cc-mban{background:#e24b4a; color:#fff;}
.cc-mban:hover{background:#f0595a;}
@media(max-width:768px){ .cc-more{display:flex;} }

/* Системное сообщение */
.cc-sys{display:flex; justify-content:center; margin:2px 0 18px;}
.cc-sys-text{max-width:80%; margin:0 auto; background:var(--cc-sys); border:1px solid var(--cc-sys-b); border-radius:14px; padding:10px 14px; color:#DDE3FF; font-size:14px; line-height:1.35; text-align:center;}
.cc-sys-promo .cc-sys-text{display:inline-flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:center;}
.cc-sys-cta{flex-shrink:0; display:inline-flex; align-items:center; height:30px; margin-left:12px; padding:0 12px; border:none; border-radius:10px; background:#5865F2; color:#fff; font-size:13px; font-weight:800; cursor:pointer;}
.cc-sys-cta:hover{background:#6b76ff;}

/* Пин-баннер под header */
.cchat-pinned{flex-shrink:0; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 16px 10px 24px; background:linear-gradient(90deg, rgba(88,101,242,.18), rgba(199,125,255,.16)); border-bottom:1px solid rgba(255,255,255,.06); color:#DDE3FF; font-size:14px;}
.cchat-pinned-txt{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.cchat-pinned-actions{flex-shrink:0; display:flex; align-items:center; gap:8px;}
.cchat-pinned-btn{flex-shrink:0; background:rgba(255,255,255,.14); color:#fff; font-size:12px; font-weight:700; padding:7px 13px; border-radius:9px; text-decoration:none;}
.cchat-pinned-btn:hover{background:rgba(255,255,255,.24);}
.cchat-pinned-close{flex-shrink:0; width:32px; height:32px; padding:0; border:none; border-radius:10px; background:transparent; color:#AAB2D5; cursor:pointer; display:flex; align-items:center; justify-content:center;}
.cchat-pinned-close:hover{background:rgba(255,255,255,.08); color:#fff;}

/* Кнопка "вниз" */
.cchat-scrolldown{
    position:absolute; right:20px; bottom:96px; width:38px; height:38px; border-radius:50%;
    background:var(--cc-accent); color:#fff; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center;
    box-shadow:0 6px 18px rgba(0,0,0,.4);
}

/* Нижняя панель ввода */
.cchat-input{position:relative; flex-shrink:0; display:flex; flex-direction:column; gap:8px; padding:18px 24px 20px; border-top:1px solid var(--cc-border); background:rgba(20,23,35,.96);}
.cchat-inrow{display:flex; align-items:flex-end; gap:12px;}
.cchat-counter{align-self:flex-end; font-size:11px; font-weight:600; color:#8F96B3; letter-spacing:.3px; padding-right:2px; line-height:1;}
.cchat-counter.cc-counter-warn{color:#FFB86B;}
.cchat-counter.cc-counter-max{color:#FF6B6B;}
.cchat-input textarea{
    flex:1; resize:none; height:56px; min-height:56px; max-height:96px; overflow-y:auto;
    background:#1B1F2F; border:1px solid rgba(255,255,255,.08); color:#F2F4FF;
    border-radius:18px; padding:16px 18px; font-size:14px; font-family:inherit; line-height:1.35; outline:none;
    transition:border-color .12s, box-shadow .12s;
    scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.18) transparent;
}
.cchat-input textarea::-webkit-scrollbar{width:10px;}
.cchat-input textarea::-webkit-scrollbar-track{background:transparent;}
.cchat-input textarea::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16); border-radius:8px; border:3px solid transparent; background-clip:content-box;}
.cchat-input textarea::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.26); background-clip:content-box;}
.cchat-input textarea::placeholder{color:#6F768D;}
.cchat-input textarea:focus{border-color:rgba(88,101,242,.65); box-shadow:0 0 0 3px rgba(88,101,242,.14);}
.cchat-emoji-btn,.cchat-send-btn{width:56px; height:56px; flex-shrink:0; border:1px solid transparent; border-radius:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .12s, box-shadow .12s, color .12s, border-color .12s;}
.cchat-emoji-btn{background:#202437; color:#AAB2D5;}
.cchat-emoji-btn .cc-emoji-ico{font-size:24px; line-height:1;}
.cchat-emoji-btn:hover{background:#272C42;}
.cchat-emoji-btn.cc-open{border-color:rgba(88,101,242,.6); box-shadow:0 0 0 3px rgba(88,101,242,.12);}
.cchat-send-btn{background:#5865F2; color:#fff;}
.cchat-send-btn:hover:not(:disabled){background:#6b76ff;}
.cchat-send-btn:disabled{background:#2A2E42; color:#747B96; cursor:not-allowed;}

/* Emoji picker */
.cchat-emojis{
    position:absolute; right:24px; bottom:calc(100% + 8px);
    width:380px; max-width:calc(100% - 32px); max-height:260px; overflow-y:auto; z-index:100;
    background:#252A3D; border:1px solid rgba(255,255,255,.08); border-radius:18px; padding:14px;
    box-shadow:0 18px 50px rgba(0,0,0,.35);
    display:grid; grid-template-columns:repeat(8,1fr); gap:6px;
}
.cchat-emojis::-webkit-scrollbar{width:8px;}
.cchat-emojis::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12); border-radius:8px;}
.cchat-emojis span{width:36px; height:36px; margin:0 auto; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:25px; border-radius:10px; transition:background .1s;}
.cchat-emojis span:hover{background:rgba(255,255,255,.08);}
.cchat-hint{position:absolute; left:24px; right:24px; bottom:calc(100% + 4px); background:var(--cc-danger); color:#fff; font-size:12px; padding:8px 12px; border-radius:12px; text-align:center;}

/* Гость — кнопка входа */
/* Состояния ввода: гость / мут / подсказка */
.cchat-mutebar{align-self:stretch; font-size:12px; font-weight:600; color:#FFB86B; background:rgba(255,184,107,.08); border:1px solid rgba(255,184,107,.22); border-radius:12px; padding:8px 12px; text-align:center;}
.cchat-hint2{font-size:11px; color:#6F768D; padding:0 2px; line-height:1.3;}
.cchat-emoji-btn:disabled,.cchat-emoji-btn[disabled]{background:#202437; opacity:.55; cursor:not-allowed; box-shadow:none; border:none;}
.cchat-emoji-btn:disabled .cc-emoji-ico{filter:grayscale(.75);}
.cchat-input textarea:disabled{cursor:not-allowed; opacity:.7; color:#6F768D;}
/* гость: писать нельзя — прячем emoji/send, оставляем textarea + CTA входа */
.cchat-input[data-state="guest"] .cchat-emoji-btn,
.cchat-input[data-state="guest"] .cchat-send-btn{display:none;}
.cchat-login{display:flex; align-items:center; justify-content:center; gap:10px; width:100%; height:56px; padding:0 20px; background:#5865F2; border:none; border-radius:16px; color:#fff; font-weight:800; font-size:15px; font-family:inherit; cursor:pointer; transition:background .15s, transform .1s;}
.cchat-login:hover{background:#6b76ff;}
.cchat-login:active{transform:scale(.99);}
.cchat-login svg{width:22px; height:22px; fill:#fff; flex-shrink:0;}

/* Адаптив < 768px */
@media (max-width:768px){
    #cchat{right:0; top:50%; bottom:auto;}
    #cchat .cchat-fab{width:74px; height:128px; border-radius:24px 0 0 24px;}
    #cchat .cchat-fab-label{font-size:24px;}
    #cchat .cchat-fab svg{width:30px; height:30px;}
    .cchat-panel{position:fixed; top:12px; right:12px; bottom:12px; left:12px; width:auto; height:auto; max-height:none; min-height:0; border-radius:20px;}
    .cchat-body{padding:18px 16px 12px;}
    .cchat-input{padding:14px 16px 16px;}
    .cchat-emojis{left:16px; right:16px; width:auto; max-width:none; bottom:calc(100% + 12px);}
    .cchat-hint{left:16px; right:16px;}
    .cchat-pinned{padding:10px 12px 10px 16px; gap:8px;}
    .cchat-pinned-txt{white-space:normal; line-height:1.3;}
}

/* ===== Архитектура realtime: connection-статус + статусы отправки ===== */
/* индикатор подключения (по умолчанию .cchat-dot зелёный = connected) */
#cchat .cchat-dot.cc-dot-connecting,
#cchat .cchat-dot.cc-dot-reconnecting{ background:#FFC247; box-shadow:0 0 8px rgba(255,194,71,.7); }
#cchat .cchat-dot.cc-dot-disconnected{ background:var(--cc-danger); box-shadow:0 0 8px rgba(239,68,68,.7); }

/* статус своего сообщения (optimistic send) */
#cchat .cc-status{ font-size:11px; line-height:1; margin-top:3px; }
#cchat .cc-status-sending{ color:var(--cc-faint); }
#cchat .cc-status-failed{ color:var(--cc-danger); display:flex; align-items:center; gap:6px; }
#cchat .cc-retry{ background:none; border:0; padding:0; font:inherit; font-size:11px; color:#5DBBFF; cursor:pointer; text-decoration:underline; }
#cchat .cc-retry:hover{ color:#8fd0ff; }

/* лоадер подгрузки истории вверх */
#cchat .cc-loadprev{ text-align:center; color:var(--cc-muted); font-size:12px; padding:8px 0; }

/* ===== Реакции на сообщения ===== */
#cchat .cc-body{ display:flex; flex-direction:column; gap:4px; flex:1; min-width:0; }
#cchat .cc-row-actions{ position:absolute; top:2px; right:4px; display:none; gap:4px; align-items:flex-start; }
/* десктоп: ховер-кнопки убраны — действия в контекстном меню по ПКМ (мобайл показывает их тапом ниже) */
#cchat .cc-row-actions .cc-more{ position:static; top:auto; right:auto; display:flex; }

#cchat .cc-react-add{ height:30px; padding:0 9px; border:none; border-radius:10px; background:rgba(255,255,255,.05); color:#AAB2D5; font-size:13px; cursor:pointer; display:inline-flex; align-items:center; }
#cchat .cc-react-add:hover{ background:rgba(255,255,255,.10); }
#cchat.cchat-offline .cc-react-add{ display:none; }

#cchat .cc-reactions{ display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }
#cchat .cc-react{ display:inline-flex; align-items:center; gap:5px; height:26px; padding:0 8px; border-radius:999px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.06); color:#DDE3FF; font-size:13px; line-height:1; cursor:pointer; }
#cchat .cc-react:hover{ background:rgba(255,255,255,.09); }
#cchat .cc-react.cc-react-on{ background:rgba(88,101,242,.18); border-color:rgba(88,101,242,.45); color:#fff; }
#cchat .cc-react .cc-react-n{ font-size:12px; }

#cchat .cc-react-picker{ position:absolute; z-index:60; background:#202437; border:1px solid rgba(255,255,255,.08); border-radius:14px; box-shadow:0 18px 50px rgba(0,0,0,.35); padding:8px; display:flex; gap:4px; }
#cchat .cc-react-pick{ width:34px; height:34px; border:none; border-radius:10px; background:transparent; font-size:20px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
#cchat .cc-react-pick:hover{ background:rgba(255,255,255,.08); }

/* ===== @упоминания ===== */
#cchat .cc-mention{ color:#AFC4FF; background:rgba(88,101,242,.16); border-radius:5px; padding:0 3px; font-weight:500; }
#cchat .cc-mention.cc-mention-self{ color:#fff; background:rgba(88,101,242,.32); }
#cchat .cc-row.cc-mention-me{ background:rgba(88,101,242,.10); box-shadow:inset 2px 0 0 var(--cc-accent2); }

#cchat .cchat-mentions{ position:absolute; z-index:70; background:#202437; border:1px solid rgba(255,255,255,.08); border-radius:12px; box-shadow:0 18px 50px rgba(0,0,0,.35); padding:6px; max-height:184px; overflow-y:auto; }
#cchat .cc-mention-item{ display:flex; align-items:center; gap:8px; width:100%; padding:6px 8px; border:none; border-radius:8px; background:transparent; color:#DDE3FF; font-size:14px; text-align:left; cursor:pointer; }
#cchat .cc-mention-item:hover,
#cchat .cc-mention-item.cc-mention-active{ background:rgba(255,255,255,.06); }
#cchat .cc-mention-nick{ font-weight:500; white-space:nowrap; }

/* ===== Вкладки по серверам ===== */
#cchat .cchat-tabs{ flex-shrink:0; display:flex; gap:6px; padding:8px 12px; overflow-x:auto; border-bottom:1px solid var(--cc-border); scrollbar-width:none; }
#cchat .cchat-tabs::-webkit-scrollbar{ display:none; }
#cchat .cchat-tab{ flex:0 0 auto; padding:5px 12px; border:1px solid var(--cc-border2); border-radius:999px; background:rgba(255,255,255,.03); color:var(--cc-muted); font-size:13px; line-height:1.2; white-space:nowrap; cursor:pointer; }
#cchat .cchat-tab:hover{ background:rgba(255,255,255,.07); color:var(--cc-text); }
#cchat .cchat-tab.cchat-tab-active{ background:rgba(88,101,242,.18); border-color:rgba(88,101,242,.45); color:#fff; }

#cchat .cc-srv-badge{ display:inline-block; font-size:10px; font-weight:600; letter-spacing:.02em; color:#9FB0FF; border:1px solid rgba(88,101,242,.4); background:rgba(88,101,242,.12); border-radius:6px; padding:1px 5px; margin-right:2px; }
#cchat:not([data-tab="all"]) .cc-srv-badge{ display:none; }

#cchat .cc-empty{ text-align:center; color:var(--cc-muted); font-size:13px; padding:24px 12px; }

/* ===== Ответы на сообщения (reply) ===== */
#cchat .cc-reply{ width:30px; height:30px; padding:0; border:none; border-radius:10px; background:rgba(255,255,255,.05); color:#AAB2D5; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
#cchat .cc-reply:hover{ background:rgba(255,255,255,.10); color:#fff; }
#cchat.cchat-offline .cc-reply{ display:none; }

#cchat .cc-quote{ display:flex; align-items:baseline; gap:8px; max-width:100%; margin-bottom:3px; padding:5px 10px; border-left:3px solid var(--cc-accent2); border-radius:8px; background:rgba(88,101,242,.08); cursor:pointer; overflow:hidden; }
#cchat .cc-quote:hover{ background:rgba(88,101,242,.14); }
#cchat .cc-quote-a{ flex-shrink:0; font-size:12px; font-weight:700; color:#AFC4FF; }
#cchat .cc-quote-t{ min-width:0; font-size:12px; color:var(--cc-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#cchat .cc-quote-t i{ font-style:italic; color:var(--cc-faint); }

#cchat .cchat-replybar{ display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:12px; border:1px solid rgba(88,101,242,.35); background:rgba(88,101,242,.10); color:#AFC4FF; font-size:13px; }
#cchat .cchat-replybar svg{ flex-shrink:0; }
#cchat .cchat-replybar-a{ flex-shrink:0; font-weight:700; }
#cchat .cchat-replybar-t{ min-width:0; flex:1; color:var(--cc-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#cchat .cchat-replybar-x{ flex-shrink:0; width:26px; height:26px; padding:0; border:none; border-radius:8px; background:transparent; color:#AAB2D5; cursor:pointer; display:flex; align-items:center; justify-content:center; }
#cchat .cchat-replybar-x:hover{ background:rgba(255,255,255,.08); color:#fff; }

/* прыжок к оригиналу: вспышка */
@keyframes cc-flash-kf{ 0%{ background:rgba(88,101,242,.28); } 100%{ background:transparent; } }
#cchat .cc-row.cc-flash{ animation:cc-flash-kf 1.6s ease-out 1; }

/* ===== Разделители дат ===== */
#cchat .cc-day{ display:flex; align-items:center; gap:12px; margin:6px 0 16px; color:var(--cc-faint); font-size:12px; font-weight:600; letter-spacing:.3px; }
#cchat .cc-day::before, #cchat .cc-day::after{ content:''; flex:1; height:1px; background:rgba(255,255,255,.07); }

/* ===== «Кто печатает» ===== */
#cchat .cchat-typing{ display:flex; align-items:center; gap:4px; min-height:16px; padding:0 2px; font-size:12px; color:var(--cc-muted); }
#cchat .cchat-typing b{ color:#AFC4FF; font-weight:600; }
#cchat .cc-tdots{ display:inline-flex; gap:3px; margin-left:2px; align-items:center; }
#cchat .cc-tdots i{ width:4px; height:4px; border-radius:50%; background:var(--cc-muted); animation:cc-tdot 1.2s infinite ease-in-out; }
#cchat .cc-tdots i:nth-child(2){ animation-delay:.2s; }
#cchat .cc-tdots i:nth-child(3){ animation-delay:.4s; }
@keyframes cc-tdot{ 0%,60%,100%{ opacity:.3; transform:translateY(0); } 30%{ opacity:1; transform:translateY(-2px); } }

/* ===== Свои сообщения справа (мессенджер-стиль) ===== */
#cchat .cc-group.cc-mine{ flex-direction:row-reverse; }
#cchat .cc-group.cc-mine .cc-meta{ justify-content:flex-end; }
#cchat .cc-group.cc-mine .cc-row{ flex-direction:row-reverse; justify-content:flex-start; }
#cchat .cc-group.cc-mine .cc-body{
    flex:0 1 auto; max-width:85%;
    background:rgba(88,101,242,.14); border:1px solid rgba(88,101,242,.22);
    border-radius:16px 4px 16px 16px; padding:8px 12px;
}
#cchat .cc-group.cc-mine .cc-text{ text-align:right; }
#cchat .cc-group.cc-mine .cc-row-actions{ right:auto; left:4px; }
#cchat .cc-group.cc-mine .cc-reactions{ justify-content:flex-end; }
#cchat .cc-group.cc-mine .cc-status{ text-align:right; }
#cchat .cc-group.cc-mine .cc-status-failed{ justify-content:flex-end; }
#cchat .cc-group.cc-mine .cc-quote{ flex-direction:row-reverse; border-left:none; border-right:3px solid var(--cc-accent2); }

/* ===== Баблы всем (Telegram-стиль): чужие тёмные слева, свои синие справа ===== */
#cchat .cc-msgs{ gap:4px; }
#cchat .cc-row .cc-body{
    flex:0 1 auto; max-width:85%; min-width:0;
    background:var(--cc-elev); border:1px solid rgba(255,255,255,.05);
    border-radius:4px 16px 16px 16px; padding:8px 12px;
}
#cchat .cc-row:hover{ background:transparent; }
#cchat .cc-group.cc-mine .cc-row .cc-body{
    background:rgba(88,101,242,.16); border-color:rgba(88,101,242,.24);
    border-radius:16px 4px 16px 16px;
}
/* текст внутри бабла — по левому краю у всех (правое выравнивание текста читается плохо) */
#cchat .cc-group.cc-mine .cc-text{ text-align:left; }

/* свои сообщения — без аватарки (Telegram-стиль) */
#cchat .cc-group.cc-mine .cc-ava-link{ display:none; }

/* свои сообщения — без ника и бейджей, остаётся только время (и бейдж сервера во «Все») */
#cchat .cc-group.cc-mine .cc-meta .cc-name,
#cchat .cc-group.cc-mine .cc-meta .cc-badge{ display:none; }
#cchat .cc-group.cc-mine .cc-meta{ margin-bottom:2px; }

/* ===== Хвостик бабла — только у последнего сообщения группы ===== */
#cchat .cc-row .cc-body{ position:relative; border-radius:16px; }
/* свой бабл: непрозрачный цвет (rgba поверх фона = #202343), чтобы хвостик совпадал 1-в-1 */
#cchat .cc-group.cc-mine .cc-row .cc-body{ border-radius:16px; background:#202343; border-color:rgba(88,101,242,.24); }

/* чужие: скос и хвостик снизу-слева */
#cchat .cc-group:not(.cc-mine) .cc-msgs .cc-row:last-child .cc-body{ border-radius:16px 16px 16px 4px; }
#cchat .cc-group:not(.cc-mine) .cc-msgs .cc-row:last-child .cc-body::before{
    content:''; position:absolute; left:-6px; bottom:0; width:0; height:0;
    border-bottom:10px solid var(--cc-elev);
    border-left:7px solid transparent;
}

/* свои: скос и хвостик снизу-справа */
#cchat .cc-group.cc-mine .cc-msgs .cc-row:last-child .cc-body{ border-radius:16px 16px 4px 16px; }
#cchat .cc-group.cc-mine .cc-msgs .cc-row:last-child .cc-body::before{
    content:''; position:absolute; right:-6px; bottom:0; width:0; height:0;
    border-bottom:10px solid #202343;
    border-right:7px solid transparent;
}

/* ===== Время внутри бабла (в конце сообщения, как в Telegram) ===== */
#cchat .cc-msg-time{ float:right; font-size:11px; line-height:1; color:var(--cc-faint); margin:7px 0 0 8px; user-select:none; }
#cchat .cc-group.cc-mine .cc-msg-time{ color:rgba(175,196,255,.65); }
/* старое время в шапке группы больше не нужно */
#cchat .cc-meta .cc-time{ display:none; }
/* у своих сообщений шапка теперь пустая (ник/бейджи скрыты) — убираем совсем, кроме случая с бейджем сервера */
#cchat .cc-group.cc-mine .cc-meta:not(:has(.cc-srv-badge)){ display:none; }

/* кнопка «вниз»: выше панели ввода (она подросла) и поверх неё */
#cchat .cchat-scrolldown{ bottom:150px; z-index:50; }

/* иконка в плавающей кнопке чата — крупнее */
#cchat .cchat-fab svg{ width:32px; height:32px; }

/* ===== Мобильная адаптация ===== */
@media (max-width:768px){
    /*
     * transform на #cchat превращал контейнер в containing block для fixed-панели.
     * Из-за нулевой ширины контейнера открытый чат сжимался в полоску у правого края.
     */
    #cchat{
        inset:0;
        width:100%;
        height:100%;
        transform:none;
        pointer-events:none;
    }

    #cchat .cchat-fab{
        position:fixed;
        top:50%;
        right:0;
        width:60px;
        height:96px;
        border-radius:20px 0 0 20px;
        transform:translateY(-50%);
        pointer-events:auto;
    }
    #cchat .cchat-fab:hover{transform:translateY(-50%);}
    #cchat .cchat-fab:active{transform:translateY(-50%) scale(.98);}
    #cchat .cchat-fab-label{font-size:18px;}
    #cchat .cchat-fab svg{width:26px; height:26px;}
    #cchat:not(.cchat-collapsed) .cchat-fab{opacity:0; pointer-events:none;}

    /* панель на весь экран, без скруглений */
    #cchat .cchat-panel{
        position:fixed;
        inset:0;
        width:100vw;
        max-width:none;
        height:100vh;
        height:100dvh;
        max-height:none;
        min-height:0;
        border-radius:0;
        border:none;
        pointer-events:auto;
    }
    #cchat.cchat-collapsed .cchat-panel{ opacity:0; transform:translateX(100%); pointer-events:none; }
    #cchat:not(.cchat-collapsed) .cchat-panel{ opacity:1; transform:none; }
    #cchat .cchat-head{
        height:calc(56px + env(safe-area-inset-top));
        padding:env(safe-area-inset-top) calc(16px + env(safe-area-inset-right)) 0 calc(16px + env(safe-area-inset-left));
    }
    #cchat .cchat-title{ font-size:16px; }

    /* лента компактнее */
    #cchat .cchat-body{ padding:14px 12px 10px; }
    #cchat .cc-group{ gap:8px; margin-bottom:14px; }
    #cchat .cc-ava{ width:36px; height:36px; border-radius:10px; }
    #cchat .cc-ava-fb{ font-size:15px; }
    #cchat .cc-name{ font-size:14px; max-width:150px; }
    #cchat .cc-text{ font-size:14px; }
    #cchat .cc-row .cc-body{ max-width:92%; padding:7px 10px; }
    #cchat .cc-badge{ height:19px; font-size:10px; padding:0 6px; }

    /* на таче нет hover — кнопки действий видны всегда, но приглушённые */
    #cchat .cc-row-actions{ display:flex; opacity:.55; }
    #cchat .cc-row-actions .cc-reply,
    #cchat .cc-row-actions .cc-more{ width:26px; height:26px; }
    #cchat .cc-react-add{ height:26px; padding:0 7px; font-size:12px; }

    /* ввод: font-size 16px — иначе iOS зумит страницу при фокусе */
    #cchat .cchat-input{
        padding:10px calc(12px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));
        gap:6px;
    }
    #cchat .cchat-input textarea{ font-size:16px; height:48px; min-height:48px; max-height:84px; padding:13px 14px; border-radius:14px; }
    #cchat .cchat-emoji-btn, #cchat .cchat-send-btn{ width:48px; height:48px; border-radius:14px; }
    #cchat .cchat-emoji-btn .cc-emoji-ico{ font-size:20px; }
    #cchat .cchat-hint2{ display:none; } /* подсказка про Enter на мобиле не нужна */

    #cchat .cchat-scrolldown{ bottom:118px; right:14px; }
    #cchat .cc-quote-t{ font-size:11px; }
}

/* кнопка «вниз»: тёмная с окантовкой и крупной стрелкой (читабельнее синей точки) */
#cchat .cchat-scrolldown{
    width:46px; height:46px;
    background:#1b1f2f; border:1px solid rgba(255,255,255,.14); color:#e7e9f2;
    box-shadow:0 8px 24px rgba(0,0,0,.5);
    transition:background .12s, border-color .12s;
}
#cchat .cchat-scrolldown:hover{ background:#232838; border-color:rgba(255,255,255,.24); }
#cchat .cchat-scrolldown svg{ width:26px; height:26px; }
/* счётчик новых сообщений на кнопке «вниз» */
#cchat .cchat-scrolldown .cc-sd-count{
    position:absolute; top:-6px; right:-6px;
    min-width:18px; height:18px; padding:0 5px; box-sizing:border-box;
    display:flex; align-items:center; justify-content:center;
    background:#7C5CFF; color:#fff;
    font-size:11px; font-weight:700; line-height:1;
    border-radius:9px; border:1px solid rgba(255,255,255,.25);
    pointer-events:none;
}

/* ===== Мобильный скролл: жесты остаются внутри чата ===== */
#cchat .cchat-body{ overscroll-behavior:contain; -webkit-overflow-scrolling:touch; touch-action:pan-y; }
#cchat .cchat-tabs{ overscroll-behavior:contain; touch-action:pan-x; }
#cchat .cchat-panel{ overscroll-behavior:contain; }

/* разделители дат — только во вкладке «Все» (в отфильтрованных вкладках висели над пустотой) */
#cchat:not([data-tab="all"]) .cc-day{ display:none; }

/* бейдж @упоминания на кнопке чата — фиолетовый с пульсацией */
#cchat .cchat-fab-badge.cc-badge-mention{
    background:#C77DFF; color:#1b1030; font-weight:800;
    animation:cc-mention-pulse 1.4s infinite;
}
@keyframes cc-mention-pulse{
    0%,100%{ transform:scale(1); box-shadow:0 0 0 0 rgba(199,125,255,.55); }
    50%{ transform:scale(1.12); box-shadow:0 0 0 7px rgba(199,125,255,0); }
}

/* мобайл: без двойного тапа-зума внутри чата */
#cchat .cchat-panel{ touch-action:manipulation; }

/* мобайл: кнопки действий скрыты, появляются по тапу на бабл */
@media (max-width:768px){
    #cchat .cc-row-actions{ display:none; }
    #cchat .cc-row.cc-actions-open .cc-row-actions{ display:flex; opacity:1; }
}

/* галочки доставки/прочтения у своих сообщений */
#cchat .cc-ticks{ font-size:11px; letter-spacing:-2px; color:rgba(175,196,255,.55); }
#cchat .cc-ticks.cc-ticks-read{ color:#5DBBFF; }

/* ===== Правка/удаление своих + счётчики вкладок ===== */
#cchat .cc-edit, #cchat .cc-delown{ width:30px; height:30px; padding:0; border:none; border-radius:10px; background:rgba(255,255,255,.05); color:#AAB2D5; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
#cchat .cc-edit:hover{ background:rgba(255,255,255,.10); color:#fff; }
#cchat .cc-delown:hover{ background:rgba(255,107,107,.12); color:#FF8A8A; }
#cchat.cchat-offline .cc-edit, #cchat.cchat-offline .cc-delown{ display:none; }
#cchat .cc-edited{ font-size:10px; color:var(--cc-faint); font-style:italic; }
#cchat .cchat-editbar{ border-color:rgba(255,194,71,.35); background:rgba(255,194,71,.08); color:#FFD9A0; }

#cchat .cchat-tab{ position:relative; }
#cchat .cchat-tab-n{
    position:absolute; top:-5px; right:-5px; min-width:16px; height:16px; padding:0 4px;
    background:var(--cc-accent2); color:#fff; border-radius:8px;
    font-size:10px; font-weight:700; line-height:16px; text-align:center;
}

/* SVG-галочки: синие, читаемые на бабле */
#cchat .cc-ticks{ display:inline-flex; align-items:center; vertical-align:-3px; color:#5DBBFF; letter-spacing:normal; }
#cchat .cc-ticks svg{ display:block; fill:none; } /* fill:none обязателен: глобальный svg{fill:var(--text-default)} сайта заливает контурные иконки */
#cchat .cc-ticks.cc-ticks-read{ color:#6FD2FF; }

/* время + галочки: одной строкой с текстом, выровнены по центру между собой */
#cchat .cc-msg-time{
    float:right; display:inline-flex; align-items:center; gap:4px;
    margin:6px 0 0 8px; line-height:1;
}
#cchat .cc-ticks{ vertical-align:0; }

/* ===== Ссылки в сообщениях модераторов, онлайн-лист, колокольчик, клик-ник ===== */
#cchat .cc-link{ color:#8FB4FF; text-decoration:underline; word-break:break-all; }
#cchat .cc-link:hover{ color:#B3CDFF; }

#cchat .cc-name{ cursor:pointer; }

#cchat .cchat-online-click{ cursor:pointer; border-radius:8px; padding:2px 6px; margin:-2px -6px; transition:background .12s; }
#cchat .cchat-online-click:hover{ background:rgba(255,255,255,.06); }

#cchat .cchat-who{ position:absolute; top:64px; left:16px; z-index:250; width:260px; max-height:320px; overflow-y:auto; background:#202437; border:1px solid rgba(255,255,255,.08); border-radius:14px; box-shadow:0 18px 50px rgba(0,0,0,.4); padding:10px; }
#cchat .cchat-who-t{ font-size:12px; font-weight:700; color:var(--cc-muted); letter-spacing:.3px; text-transform:uppercase; padding:2px 8px 8px; }
#cchat .cchat-who-list{ display:flex; flex-direction:column; gap:2px; font-size:13px; color:var(--cc-muted); }
#cchat .cchat-who-item{ display:flex; align-items:center; gap:8px; width:100%; padding:7px 8px; border:none; border-radius:8px; background:transparent; color:#DDE3FF; font-size:14px; text-align:left; cursor:pointer; }
#cchat .cchat-who-item:hover{ background:rgba(255,255,255,.06); }

#cchat .cchat-bell{ margin-right:2px; }

/* шапка: инфо тянется, колокольчик и крестик прижаты вправо рядом */
#cchat .cchat-head-info{ flex:1; min-width:0; }
#cchat .cchat-bell{ margin-right:6px; }