/* ============================================================================
   chat-kit.css — Общая дизайн-система чата
   Используется в: lk/chat.php, lk/edu.php (правая панель), любые будущие
                   места с чат-функциональностью.
   ----------------------------------------------------------------------------
   Префикс всех классов: .ck-* (chat-kit), чтобы не конфликтовать с
   существующими .chat-*, .room-* стилями в lk/chat.php при постепенной миграции.
   ============================================================================ */

/* ---- Design tokens (переменные из lk/chat.php — единый источник правды) ---- */
:root{
  --ck-primary:           #0066cc;
  --ck-primary-dark:      #004d99;
  --ck-bg:                #f5f9ff;
  --ck-card:              #ffffff;
  --ck-text:              #333333;
  --ck-text-light:        #666666;
  --ck-border:            #e0e9f5;
  --ck-success:           #00aa55;
  --ck-error:             #ff4444;
  --ck-warn:              #d97706;

  --ck-bubble-own:        #e1ffc7;
  --ck-bubble-other:      #ffffff;
  --ck-send:              #4fae4e;
  --ck-send-hover:        #429943;
  --ck-ai:                #7c3aed;

  /* Read-status (✓ / ✓✓): по умолчанию зелёные тоны под зелёный own-пузырь.
     Страница может переопределить через --ck-check-sent / --ck-check-read
     (например, если фон собственного пузыря не зелёный). */
  --ck-check-sent:        rgba(0,100,0,.35);
  --ck-check-read:        #4fae4e;

  --ck-radius-card:       16px;
  --ck-radius-bubble:     12px;
  --ck-radius-pill:       20px;
  --ck-radius-input:      20px;

  --ck-shadow-island:     0 2px 12px rgba(0,0,0,.06);
  --ck-shadow-bubble:     0 1px 1px rgba(0,0,0,.08);
  --ck-shadow-popover:    0 4px 20px rgba(0,0,0,.15);

  --ck-z-popover:         5000;
  --ck-z-emoji:           6000;
  --ck-z-selection:       7000;
}

/* ============================================================================
   1. ISLAND CONTAINER — карточка-остров (для правой панели и chat-wrap)
   ============================================================================ */
.ck-island{
  background: var(--ck-card);
  border-radius: var(--ck-radius-card);
  box-shadow: var(--ck-shadow-island);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ============================================================================
   2. ROOM/THREAD LIST — список комнат или тредов (chat.php sidebar)
   ============================================================================ */
.ck-list{
  flex: 1;
  overflow-y: auto;
  background: var(--ck-bg);
  scrollbar-width: thin;
}
.ck-list::-webkit-scrollbar{ width: 6px; }
.ck-list::-webkit-scrollbar-thumb{ background: #cbd5e1; border-radius: 3px; }

.ck-list-header{
  padding: 14px 16px 12px;
  background: var(--ck-card);
  flex-shrink: 0;
  border-bottom: 1px solid var(--ck-border);
}
.ck-list-header-row{
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 10px;
}
.ck-list-title{
  font-size: 17px; font-weight: 700;
  color: var(--ck-text); flex: 1; line-height: 1.2;
}
.ck-list-subtitle{
  font-size: 11.5px; color: var(--ck-text-light);
  font-weight: 500; margin-top: 2px;
}

/* circle icon button (поиск, плюс, etc) */
.ck-icon-btn{
  width: 36px; height: 36px; border-radius: 50%;
  border: none; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #8e9aa5; flex-shrink: 0;
  transition: background .12s, color .12s;
}
.ck-icon-btn:hover{ background: var(--ck-bg); color: var(--ck-primary); }
.ck-icon-btn.is-primary{ background: var(--ck-primary); color: #fff; }
.ck-icon-btn.is-primary:hover{ background: var(--ck-primary-dark); color: #fff; }

/* search input row */
.ck-search{
  display: flex; align-items: center; gap: 7px;
  background: var(--ck-bg); border-radius: var(--ck-radius-pill);
  padding: 7px 12px;
}
.ck-search input{
  border: none; background: none; outline: none;
  font-size: 13px; color: var(--ck-text); width: 100%;
  font-family: inherit;
}

/* filter chips row */
.ck-chips{ display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.ck-chip{
  padding: 4px 11px; border-radius: 14px;
  border: 1px solid var(--ck-border); background: #fff;
  font-size: 11.5px; font-weight: 600; color: var(--ck-text-light);
  cursor: pointer; font-family: inherit;
  display: flex; align-items: center; gap: 4px;
  transition: all .12s;
}
.ck-chip.is-active{
  background: rgba(0,102,204,.08);
  border-color: rgba(0,102,204,.3);
  color: var(--ck-primary);
}
.ck-chip-cnt{
  font-size: 10.5px; background: rgba(0,0,0,.06);
  padding: 1px 5px; border-radius: 7px; font-weight: 700;
}
.ck-chip.is-active .ck-chip-cnt{
  background: rgba(0,102,204,.15); color: var(--ck-primary);
}

/* ============================================================================
   3. ROOM/THREAD ITEM — карточка в списке (chat.php-style)
   ============================================================================ */
.ck-item{
  display: flex; gap: 12px;
  padding: 12px 14px;
  background: #fff; cursor: pointer;
  position: relative;
  border-bottom: 1px solid #f0f0f0;
  transition: background .12s;
}
.ck-item:hover{ background: var(--ck-bg); }
.ck-item.is-active{ background: rgba(0,102,204,.08); }
.ck-item.is-pinned{ background: linear-gradient(to right, #fffbeb 0, #fff 60%); }
.ck-item.is-pinned:hover{ background: #fff8e1; }
.ck-item.is-resolved .ck-item-avatar{ opacity: .55; }

.ck-item-avatar{
  width: 44px; height: 44px; border-radius: 50%;
  flex-shrink: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 16px; font-weight: 600;
  letter-spacing: -.3px;
}
.ck-item-avatar-img{
  width: 100%; height: 100%; border-radius: 50%;
  object-fit: cover; display: block;
}
.ck-item-body{
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  justify-content: center; gap: 3px;
}
.ck-item-author{
  font-size: 14.5px; font-weight: 600;
  color: var(--ck-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.25;
}
.ck-item-preview{
  font-size: 13px; color: var(--ck-text-light);
  line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ck-item-preview .ck-prev-sender{ color: var(--ck-text-light); }

/* status badges row (Открыт / Решён / Группа / Закреплён / count) */
.ck-item-badges{
  display: flex; align-items: center; gap: 5px;
  flex-wrap: wrap; margin-top: 3px;
}
.ck-badge{
  font-size: 10px; font-weight: 700; letter-spacing: .2px;
  padding: 1.5px 7px; border-radius: 7px;
  display: inline-flex; align-items: center; gap: 3px;
  line-height: 1.4;
}
.ck-badge.is-open    { background: #fef3c7; color: #92400e; }
.ck-badge.is-done    { background: #dcfce7; color: #166534; }
.ck-badge.is-group   { background: #f1f5f9; color: #475569; }
.ck-badge.is-pin     { background: #fde68a; color: #92400e; }
.ck-badge.is-count   { background: rgba(0,102,204,.08); color: var(--ck-primary); }

/* right column: date stacked above unread badge */
.ck-item-right{
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 6px; flex-shrink: 0; padding-top: 2px;
}
.ck-item-time{ font-size: 11.5px; color: #9aa0a6; font-weight: 500; }
.ck-item-unread{
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 10px; background: var(--ck-primary); color: #fff;
  font-size: 11px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}

.ck-list-empty{
  text-align: center; padding: 40px 20px;
  color: #cbd5e1; font-size: 12.5px;
  background: var(--ck-bg);
}

/* ============================================================================
   4. CHAT VIEW — переписка (header + messages + composer)
   ============================================================================ */
.ck-chat{
  display: flex; flex-direction: column;
  height: 100%; background: var(--ck-bg);
  overflow: hidden;
}

/* header */
.ck-chat-header{
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--ck-border);
  flex-shrink: 0; background: var(--ck-card);
}
.ck-chat-header-info{ flex: 1; min-width: 0; }
.ck-chat-header-title{
  font-size: 14px; font-weight: 700; color: var(--ck-text);
  line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.ck-chat-header-sub{
  font-size: 11.5px; color: var(--ck-text-light);
  display: flex; align-items: center; gap: 5px; margin-top: 2px;
}
.ck-chat-header-sub .ck-dot{
  width: 3px; height: 3px; border-radius: 50%; background: #cbd5e1;
}
.ck-chat-header-actions{ display: flex; gap: 2px; flex-shrink: 0; }

/* messages area */
.ck-msgs{
  flex: 1; overflow-y: auto;
  padding: 8px 14px;
  background: var(--ck-bg);
  display: flex; flex-direction: column; gap: 1px;
  scrollbar-width: thin;
  /* container-type: inline-size — позволяет вложенным элементам
     опираться на ширину .ck-msgs через container query units (cqw).
     Используется в .ck-msg-image / .ck-msg-video-iframe — медиа-вложения
     занимают минимум 50% ширины ленты на десктопе, как Telegram-style. */
  container-type: inline-size;
}
.ck-msgs::-webkit-scrollbar{ width: 6px; }
.ck-msgs::-webkit-scrollbar-thumb{ background: #cbd5e1; border-radius: 3px; }

/* date separator */
.ck-date-sep{
  display: flex; justify-content: center;
  margin: 10px 0 6px;
  position: sticky; top: 4px; z-index: 1;
}
.ck-date-sep span{
  font-size: 11px; color: #fff;
  background: rgba(0,0,0,.2);
  padding: 3px 12px; border-radius: 10px; font-weight: 600;
  backdrop-filter: blur(4px);
}

/* ============================================================================
   5. MESSAGE — пузырь (Telegram-style)
   ============================================================================ */
.ck-msg-row{
  display: flex; flex-direction: column;
  max-width: 85%; margin-bottom: 1px;
}
.ck-msg-row.is-own{ align-self: flex-end; align-items: flex-end; }
.ck-msg-row.is-other{ align-self: flex-start; align-items: flex-start; }
/* AI — такой же left-alignment, как у обычных other-сообщений. Без
   этого правила row растягивается на всю ширину (default align-self:
   stretch), а .ck-msg-author и .ck-msg-group внутри плавают каждый
   по своей логике — пузырь оказывается оторван от имени отправителя. */
.ck-msg-row.is-ai{ align-self: flex-start; align-items: flex-start; }
.ck-msg-row.is-system{ align-self: center; max-width: 80%; }

.ck-msg-author{
  font-size: 12px; font-weight: 700;
  color: var(--ck-primary);
  padding: 4px 12px 2px 0;
  display: flex; align-items: center; gap: 6px;
}
.ck-msg-author.is-clickable{ cursor: pointer; }
.ck-msg-author.is-clickable:hover .ck-msg-author-name{ text-decoration: underline; }
.ck-msg-row.is-ai .ck-msg-author{
  color: var(--ck-ai);
}
.ck-msg-author-avatar{
  width: 24px; height: 24px;
  border-radius: 50%;
  flex-shrink: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
  color: #fff;
}
.ck-msg-author-avatar img{
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.ck-msg-author-name{ display: inline-flex; align-items: center; gap: 6px; }
.ck-msg-author-tag{
  font-size: 9px; padding: 1px 6px; border-radius: 6px;
  font-weight: 700;
}
.ck-msg-author-tag.is-private{ background: #f3e8ff; color: var(--ck-ai); }
.ck-msg-author-tag.is-question{ background: #fef3c7; color: #92400e; }

.ck-msg-group{ display: flex; flex-direction: column; gap: 2px; }

/* msg-wrap = column-flex: пузырь сверху, реакции (.ck-reactions) и
   actions (absolutely positioned) снизу. Telegram-style — реакции под
   пузырём, не сбоку. align-items в is-own/is-other ниже задаёт сторону. */
.ck-msg-wrap{
  position: relative;
  display: flex; flex-direction: column; gap: 2px;
  /* min-width: 0 — flex-item в column-flex иначе по умолчанию имеет
     min-width: auto = min-content, что в combo с word-break:break-word
     и container-type на .ck-msgs (для cqw images) приводит к рендеру
     текста по одной букве в столбец. Явное min-width:0 + max-width
     возвращают шрейк-ту-фит. */
  min-width: 0; max-width: 100%;
}
.ck-msg-row.is-own .ck-msg-wrap{ align-items: flex-end; }
.ck-msg-row.is-other .ck-msg-wrap,
.ck-msg-row.is-ai .ck-msg-wrap{ align-items: flex-start; }

.ck-bubble{
  padding: 7px 10px 6px;
  border-radius: var(--ck-radius-bubble);
  font-size: 14px; line-height: 1.4;
  color: var(--ck-text);
  background: var(--ck-bubble-other);
  box-shadow: var(--ck-shadow-bubble);
  /* Явная ширина по контенту, ограниченная 100% wrap'а. Без width
     fit-content сходит на min-content (= 1 char wide) когда
     контейнерный контекст .ck-msgs не даёт нормального шрейк-ту-фит. */
  width: fit-content; max-width: 100%;
  word-wrap: break-word; overflow-wrap: anywhere;
  position: relative;
}
.ck-msg-row.is-own .ck-bubble{ background: var(--ck-bubble-own); }
/* AI = такой же белый пузырь, как у обычных other (раньше — пурпурный
   #faf5ff с border, выделение «AI как отдельная личность»; убрано —
   AI обычный участник чата). */
.ck-msg-row.is-ai .ck-bubble{
  background: var(--ck-bubble-other);
  color: var(--ck-text);
}
.ck-msg-row.is-ai .ck-msg-author{ color: var(--ck-primary); }
.ck-msg-row.is-question .ck-bubble{
  background: #fffbeb;
  border: 1px solid #fde68a;
}
.ck-msg-row.is-system .ck-bubble{
  background: transparent; box-shadow: none;
  text-align: center; font-size: 11px;
  color: #9aa0a6; font-style: italic;
  padding: 6px 12px;
}

/* Хвостик на КАЖДОМ пузыре в группе (не только :last-child) — выглядит
   как Telegram. При group-mode='sender-change' с gapMs:Infinity все
   подряд идущие сообщения одного user'а попадают в один блок, и без
   этого правила хвостик был бы только на последнем — остальные стали
   бы «коробочками» со всеми углами 12px. */
.ck-msg-row.is-other .ck-bubble,
.ck-msg-row.is-ai .ck-bubble{ border-bottom-left-radius: 4px; }
.ck-msg-row.is-own .ck-bubble{ border-bottom-right-radius: 4px; }

/* meta inside bubble (chat.php-style float-right) */
.ck-msg-text{ white-space: pre-wrap; word-break: break-word; }
/* Кликабельные ссылки в обычных текстовых сообщениях (linkifyPlainText в
   computed:linkedPlainText превращает http(s)-URL в <a class=ck-msg-link>). */
.ck-msg-link{
  color: #1a73e8;
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-all;
}
.ck-msg-link:hover{ text-decoration: none; }
.ck-msg-row.is-own .ck-msg-link{ color: #0a6620; }
.ck-msgs.dark-bg .ck-msg-link{ color: #8ab4f8; }
.ck-msg-meta{
  float: right; font-size: 11px; color: rgba(0,0,0,.4);
  margin-left: 8px; padding-top: 4px;
  display: inline-flex; align-items: center; gap: 3px;
}
/* Read-status: телеграм-стиль — две FA-иконки внахлёст. Цвета лежат
   в --ck-check-sent / --ck-check-read (см. design tokens вверху). */
.ck-msg-meta .ck-check{
  display: inline-flex; align-items: center;
  color: var(--ck-check-sent);
  margin-left: 3px;
}
.ck-msg-meta .ck-check.is-read{ color: var(--ck-check-read); }
.ck-msg-meta .ck-check .ck-check-svg{ display: block; }
.ck-msg-meta .ck-check .ck-check-2{ margin-left: -5px; }
.ck-msg-edited{ font-style: italic; margin-right: 4px; }

/* reply quote inside bubble */
.ck-reply{
  border-left: 3px solid var(--ck-primary);
  background: rgba(0,102,204,.06);
  padding: 5px 8px; border-radius: 4px;
  margin-bottom: 5px; cursor: pointer;
}
.ck-msg-row.is-own .ck-reply{
  border-left-color: var(--ck-send);
  background: rgba(78,164,78,.08);
}
.ck-msg-row.is-ai .ck-reply{
  border-left-color: var(--ck-ai);
  background: rgba(124,58,237,.06);
}
.ck-reply-author{
  font-size: 11.5px; font-weight: 700;
  color: var(--ck-primary); margin-bottom: 1px;
}
.ck-msg-row.is-own .ck-reply-author{ color: var(--ck-send); }
.ck-msg-row.is-ai .ck-reply-author{ color: var(--ck-ai); }
.ck-reply-text{
  font-size: 11.5px; color: var(--ck-text-light);
  line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 240px;
}

/* Документ-карточка для длинного структурированного AI-ответа.
   Стилистика — как у Telegram-карточки файла: иконка слева на цветном
   квадрате, в центре заголовок (первая markdown-строка) и подпись типа,
   справа — мета (время + чек). Клик по карточке (handler в шаблоне)
   эмитит doc-open — страница открывает модалку с полным просмотром. */
.ck-doc-card{
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: rgba(0,102,204,.08);
  border-radius: 10px;
  cursor: pointer; transition: background .12s;
  min-width: 260px; max-width: 100%;
  user-select: none;
}
.ck-doc-card:hover{ background: rgba(0,102,204,.14); }
.ck-doc-card-icon{
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ck-primary);
  color: #fff; border-radius: 8px;
  font-size: 18px; flex-shrink: 0;
}
.ck-doc-card-body{
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.ck-doc-card-title{
  font-size: 14px; font-weight: 600; color: var(--ck-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.3;
}
.ck-doc-card-preview{
  font-size: 12.5px; color: var(--ck-text-light);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 1px;
}
.ck-doc-card-sub{
  font-size: 11px; color: var(--ck-text-light);
  text-transform: uppercase; letter-spacing: .4px;
  font-weight: 600; opacity: .7;
}
.ck-doc-card-meta{
  flex-shrink: 0; align-self: flex-end;
  font-size: 11px; color: rgba(0,0,0,.4);
  display: inline-flex; align-items: center; gap: 3px;
  margin-left: auto;
}

/* AI markdown HTML: компактные defaults, чтобы внутри пузыря шрифты и
   отступы совпадали с обычными сообщениями. Без этих правил браузер
   ставит h1/h2/h3 = 1.5em+ и большие margin'ы — заголовок «съедает»
   половину пузыря. */
.ck-msg-html{ line-height: 1.4; font-size: 14px; }
.ck-msg-html p{ margin: 0 0 6px; }
.ck-msg-html p:last-child{ margin-bottom: 0; }
.ck-msg-html strong{ font-weight: 700; }
.ck-msg-html em{ font-style: italic; }
.ck-msg-html h1, .ck-msg-html h2, .ck-msg-html h3,
.ck-msg-html h4, .ck-msg-html h5, .ck-msg-html h6{
  margin: 6px 0 3px; font-size: 15px; font-weight: 700; line-height: 1.3;
}
.ck-msg-html ul, .ck-msg-html ol{ margin: 4px 0; padding-left: 20px; }
.ck-msg-html li{ margin-bottom: 2px; }
.ck-msg-html code{
  background: rgba(0,0,0,.06); padding: 1px 5px; border-radius: 4px;
  font-size: 12.5px; font-family: 'Courier New', monospace;
}
.ck-msg-html pre{
  background: rgba(0,0,0,.06); padding: 8px 10px; border-radius: 6px;
  overflow-x: auto; margin: 4px 0; font-size: 12.5px; line-height: 1.4;
}
.ck-msg-html pre code{ background: none; padding: 0; font-size: inherit; }
.ck-msg-html blockquote{
  border-left: 3px solid rgba(0,0,0,.15);
  margin: 4px 0; padding: 2px 8px;
  color: inherit; opacity: .85;
}
.ck-msg-html table{ border-collapse: collapse; margin: 4px 0; font-size: 12.5px; }
.ck-msg-html th, .ck-msg-html td{ border: 1px solid rgba(0,0,0,.12); padding: 3px 6px; }
.ck-msg-html a{ color: var(--ck-primary); text-decoration: underline; }
.ck-msg-html img{ max-width: 100%; border-radius: 6px; margin: 4px 0; }

/* ck-msg-text-html — block-режим (вместо inline span), нужен под
   block-children из markdown. Меняем display и расположение меты. */
.ck-msg-text-html{ display: block; }
.ck-msg-text-html > .ck-msg-meta{
  display: inline-flex; float: right;
  margin-top: 0; padding-top: 4px;
}

/* ============================================================================
   5b. ATTACHMENTS / FORWARD / AI MODEL (chat.php-extension)
   ============================================================================ */

/* «Переслано от X» — лейбл над пузырём */
.ck-msg-fwd{
  font-size: 11px; color: var(--ck-text-light);
  margin-bottom: 4px; opacity: .85;
}
.ck-msg-fwd i{ margin-right: 4px; font-size: 10px; }
.ck-msg-row.is-own .ck-msg-fwd{ color: rgba(0,100,0,.5); }

/* Картинка inline. Размер «адаптивный»: занимает половину ширины ленты
   (.ck-msgs) через container-query unit cqw, ограничено 60vh по высоте,
   но не меньше 280px (для мобилки/узкой панели discussion-panel).
   width:auto — естественная ширина картинки, если она меньше клампа. */
.ck-msg-image{
  display: block;
  width: auto; height: auto;
  max-width: max(280px, 50cqw);
  max-height: 60vh;
  border-radius: 8px; cursor: pointer;
  margin-bottom: 4px;
}
.ck-msg-row.is-own .ck-msg-image{ margin-left: auto; }

/* Видео (iframe из appcloud). У iframe нет «естественной» ширины —
   задаём фиксированный width:50cqw (но не уже 280px), aspect-ratio 16/9
   определяет высоту автоматически. */
.ck-msg-video-iframe{
  display: block;
  width: max(280px, 50cqw);
  aspect-ratio: 16 / 9; height: auto;
  max-height: 60vh;
  border: none; border-radius: 8px;
  background: #000;
  margin-bottom: 4px;
}
.ck-msg-row.is-own .ck-msg-video-iframe{ margin-left: auto; }

/* Карточка файла (не картинка/видео) */
.ck-msg-file-card{
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: rgba(0,102,204,.06);
  border-radius: 8px;
  margin-bottom: 4px;
  min-width: 220px;
}
.ck-msg-row.is-own .ck-msg-file-card{ background: rgba(0,0,0,.05); }
.ck-msg-file-icon{
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border-radius: 8px; flex-shrink: 0;
  font-size: 16px; color: var(--ck-primary);
}
.ck-msg-file-body{
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
}
.ck-msg-file-title{
  font-size: 13px; font-weight: 500; color: var(--ck-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ck-msg-file-sub{
  font-size: 11px; color: var(--ck-text-light);
  text-transform: uppercase; letter-spacing: .3px;
}
.ck-msg-file-save{
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; color: var(--ck-text-light);
  text-decoration: none; transition: background .15s;
  flex-shrink: 0;
}
.ck-msg-file-save:hover{ background: rgba(0,0,0,.06); color: var(--ck-primary); }

/* AI-model badge под AI-сообщением */
.ck-msg-ai-model{
  font-size: 10.5px; color: var(--ck-text-light);
  margin-top: 4px; opacity: .8;
  font-style: italic;
}
.ck-msg-ai-model span{ font-weight: 600; font-style: normal; }

/* Если в пузыре только attachment без текста — сужаем мета */
.ck-msg-meta-attach-only{
  display: flex; justify-content: flex-end;
  margin-top: 2px;
}

/* attached quote (lesson paragraph reference, panel-specific) */
.ck-quote-attach{
  border-left: 3px solid var(--ck-warn);
  background: rgba(251,191,36,.12);
  padding: 6px 9px; border-radius: 4px;
  margin-bottom: 6px;
  font-size: 12px; color: #92400e;
  font-style: italic; line-height: 1.4;
  cursor: pointer;
}
.ck-quote-attach:hover{ background: rgba(251,191,36,.2); }
.ck-quote-attach-label{
  font-style: normal; font-weight: 700;
  font-size: 10.5px; color: #b45309;
  text-transform: uppercase; letter-spacing: .4px;
  margin-bottom: 2px;
  display: flex; align-items: center; gap: 4px;
}

/* ============================================================================
   6. REACTIONS (chat.php-style chips)
   ============================================================================ */
.ck-reactions{
  display: flex; gap: 4px; flex-wrap: wrap;
  margin-top: 4px; padding: 0 4px;
}
.ck-reaction{
  display: inline-flex; align-items: center; gap: 3px;
  background: rgba(0,0,0,.06);
  border-radius: 12px; padding: 2px 8px;
  font-size: 12px; cursor: pointer;
  border: 1px solid transparent;
  transition: transform .12s;
}
.ck-reaction:hover{ transform: scale(1.05); }
.ck-reaction.is-mine{
  background: rgba(0,102,204,.14);
  border-color: rgba(0,102,204,.3);
  color: var(--ck-primary);
}
.ck-reaction-emoji{ font-size: 13px; line-height: 1; display: inline-flex; align-items: center; }
/* Twemoji img — заменяет нативный unicode-эмодзи на одинаковый SVG во всех ОС.
   Высота кратна font-size родителя; vertical-align baseline + относительный
   nudge вверх, чтобы картинка визуально совпадала со строкой. */
img.ck-twemoji{
  height: 1em; width: 1em;
  vertical-align: -0.15em;
  margin: 0 0.05em;
  display: inline-block;
}
/* <ck-star> — кастомная inline-SVG звезда (золотой градиент). Используется
   вместо fa-star/⭐ в кнопке «Выдать звезду», в заголовке модалки выдачи,
   в футере, в истории звёзд. Базово ведёт себя как inline-icon: сидит
   на baseline текста, занимает 1em если size не задан. */
.ck-star{
  display: inline-block;
  vertical-align: -0.18em;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.18));
}
.ck-reaction-cnt{
  font-size: 11px; font-weight: 700; color: #475569;
}
.ck-reaction.is-mine .ck-reaction-cnt{ color: var(--ck-primary); }
.ck-reaction-add{
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.04);
  border: 1px dashed rgba(0,0,0,.15);
  border-radius: 12px; padding: 2px 8px;
  cursor: pointer; color: #6b7280;
  height: 22px; font-size: 13px; line-height: 1;
  transition: all .12s;
}
.ck-reaction-add i{ line-height: 1; }
.ck-reaction-add:hover{
  background: rgba(0,102,204,.08);
  color: var(--ck-primary);
  border-color: rgba(0,102,204,.25);
}

/* hover toolbar above bubble */
.ck-msg-actions{
  position: absolute; top: -12px;
  display: flex; gap: 1px;
  background: #fff;
  border: 1px solid var(--ck-border);
  border-radius: 14px; padding: 2px;
  box-shadow: 0 3px 10px rgba(0,0,0,.1);
  opacity: 0; pointer-events: none;
  transition: opacity .12s; z-index: 5;
}
.ck-msg-row.is-other .ck-msg-actions{ right: -4px; }
.ck-msg-row.is-own .ck-msg-actions{ left: -4px; }
.ck-msg-wrap:hover .ck-msg-actions{
  opacity: 1; pointer-events: auto;
}
.ck-msg-actions .ck-icon-btn{ width: 26px; height: 26px; }
.ck-msg-actions .ck-icon-btn svg{ width: 14px; height: 14px; }

/* emoji palette popup */
.ck-emoji-palette{
  position: fixed; display: none;
  background: #fff;
  border: 1px solid var(--ck-border);
  border-radius: 12px;
  padding: 6px 8px;
  box-shadow: var(--ck-shadow-popover);
  z-index: var(--ck-z-emoji); gap: 3px;
}
.ck-emoji-palette.is-open{ display: flex; }
.ck-emoji-pick{
  font-size: 20px; cursor: pointer;
  padding: 4px; border-radius: 50%;
  transition: transform .1s;
  display: inline-flex; align-items: center; justify-content: center;
}
.ck-emoji-pick:hover{ transform: scale(1.3); background: var(--ck-bg); }
/* В палитре эмодзи Twemoji-img выводится покрупнее (палитра — это
   именно «выбор», нужен крупный кликабельный таргет). Перебивает
   общее правило img.ck-twemoji выше. */
.ck-emoji-pick img.ck-twemoji{
  height: 22px; width: 22px;
  vertical-align: middle; margin: 0;
}

/* AI streaming + typing */
.ck-ai-stream{ background: #fff !important; border: none !important; }
.ck-ai-cursor{
  display: inline-block; width: 2px; height: 1em;
  background: var(--ck-ai); vertical-align: middle;
  animation: ck-blink .7s infinite;
}
@keyframes ck-blink { 50% { opacity: 0; } }

/* ============================================================================
   <ck-ai-thinking> — индикатор «AI думает», без пузыря, лежит на чат-bg.
   Точка пульсирует, слово плывёт shimmer-градиентом и кроссфейдится при
   ротации (transition fade). Шрифт/цвета совпадают с прежним .ai-thinking
   из main/lk/chat.php (тот теперь алиасит на эти классы).
   ============================================================================ */
.ck-ai-thinking{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 4px;
  align-self: flex-start;
  font-family: inherit;
}
.ck-ai-thinking-dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: #7c3aed;
  animation: ck-ai-thinking-pulse 1.4s ease-in-out infinite;
  flex-shrink: 0;
}
.ck-ai-thinking-text{
  font-size: 13px; font-weight: 500;
  background: linear-gradient(90deg,
    rgba(124,58,237,.35) 0%,
    rgba(124,58,237,.35) 30%,
    rgba(124,58,237,1)   50%,
    rgba(124,58,237,.35) 70%,
    rgba(124,58,237,.35) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: ck-ai-thinking-shimmer 1.8s linear infinite;
  display: inline-block; min-width: 0;
}
@keyframes ck-ai-thinking-pulse{
  0%,100% { transform: scale(1);    box-shadow: 0 0 0 0   rgba(124,58,237,.45); }
  50%     { transform: scale(1.35); box-shadow: 0 0 0 6px rgba(124,58,237,0);   }
}
@keyframes ck-ai-thinking-shimmer{
  from{ background-position:  200% 0; }
  to  { background-position: -200% 0; }
}
/* Vue <transition name="ck-ai-thinking-fade"> — плавный кроссфейд
   слов при ротации. mode=out-in (пер. слово уходит → новое появляется). */
.ck-ai-thinking-fade-enter-active,
.ck-ai-thinking-fade-leave-active{
  transition: opacity .25s ease, transform .25s ease;
}
.ck-ai-thinking-fade-enter-from{ opacity: 0; transform: translateY(2px); }
.ck-ai-thinking-fade-leave-to  { opacity: 0; transform: translateY(-2px); }
/* На тёмном фоне (chat.php — chat-background=dark) текст светлеет, чтобы
   не сливаться с тёмными обоями. */
.dark-bg .ck-ai-thinking-text{
  background: linear-gradient(90deg,
    rgba(180,150,250,.5) 0%,
    rgba(180,150,250,.5) 30%,
    rgba(220,200,255,1)  50%,
    rgba(180,150,250,.5) 70%,
    rgba(180,150,250,.5) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.dark-bg .ck-ai-thinking-dot{ background: #a78bfa; }

.ck-typing{
  display: flex; gap: 0; margin-bottom: 4px;
  align-self: flex-start; max-width: 85%;
}
.ck-typing .ck-bubble{
  padding: 10px 12px;
  border-bottom-left-radius: 4px;
}
.ck-typing-dots{ display: inline-flex; gap: 4px; }
.ck-typing-dots span{
  width: 6px; height: 6px; border-radius: 50%;
  background: #94a3b8; animation: ck-td 1.2s infinite;
}
.ck-typing-dots span:nth-child(2){ animation-delay: .2s; }
.ck-typing-dots span:nth-child(3){ animation-delay: .4s; }
@keyframes ck-td {
  0%, 60%, 100% { transform: translateY(0);  opacity: .5; }
  30%           { transform: translateY(-4px); opacity: 1; }
}

/* ============================================================================
   AI-stream ghost-row — растущий пузырь с ответом ИИ во время стрима.
   ----------------------------------------------------------------------------
   Рендерится в <ck-message-list> после реальных сообщений (см. props
   aiStream / aiThinking / aiStreamUserId). Пузырь визуально такой же как
   обычный .ck-msg-row.is-ai — никаких .ck-msg-row-stream-overrides не
   нужно, кроме самого текста + каретки. white-space:pre-wrap сохраняет
   переносы строк partial-markdown'а; word-wrap:break-word защищает от
   длинных no-space строк (например, недописанных URL в ответе).
   ============================================================================ */
.ck-ai-stream-text{
  white-space: pre-wrap;
  word-wrap: break-word;
}
.ck-ai-stream-caret{
  display: inline-block;
  width: 6px; height: 14px;
  margin-left: 2px;
  vertical-align: text-bottom;
  background: #7c3aed;
  border-radius: 1px;
  animation: ck-ai-stream-blink 1s step-end infinite;
}
@keyframes ck-ai-stream-blink{ 50%{ opacity: 0 } }
[data-ck-theme="dark"] .ck-ai-stream-caret{ background: #a78bfa; }

/* ============================================================================
   AI-actions — Telegram-style inline keyboard под пузырём
   ----------------------------------------------------------------------------
   .ck-ai-actions — flex-grid кнопок, visually прикреплён к НИЖНЕЙ грани
   соседнего .ck-bubble. .ck-ai-action-btn — одна кнопка. Имитирует inline
   keyboard у Telegram-бота: горизонтальный ряд равных по ширине кнопок,
   светлый фон, скругления только снизу (чтобы выглядели как продолжение
   пузыря). Алиасы .ck-ai-apply / .ck-ai-apply-btn — для обратной
   совместимости старых вызовов (msg.aiActions=true, без массива).
   ============================================================================ */
.ck-ai-actions{
  display: flex; gap: 2px; flex-wrap: wrap;
  /* небольшой отрицательный отступ сверху, чтобы кнопки визуально
     «склеивались» с пузырём (только если родитель — column flex). */
  margin-top: 1px;
  /* Ширина пузыря — у .ck-bubble max-width:max-content; держим row-кнопки
     в этой же ширине. align-self:flex-start чтобы у AI-сообщения (other-side)
     лежать у левого края. */
  align-self: flex-start;
  max-width: 100%;
}
.ck-ai-action-btn{
  flex: 1 1 auto; min-width: 0;
  padding: 6px 10px;
  background: rgba(255,255,255,.92);
  color: #1f2937;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 10px;
  font-size: 12px; font-weight: 600; line-height: 1.2;
  cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background .12s, color .12s, border-color .12s, transform .08s;
  -webkit-tap-highlight-color: transparent;
}
.ck-ai-action-btn:hover{
  background: #f0f5ff;
  color: var(--ck-primary, #1a73e8);
  border-color: rgba(26,115,232,.4);
}
.ck-ai-action-btn:active{ transform: translateY(1px); }
.ck-ai-action-btn.is-primary{
  background: var(--ck-primary, #1a73e8);
  color: #fff; border-color: transparent;
}
.ck-ai-action-btn.is-primary:hover{ background: #1557b0; color: #fff; }
.ck-ai-action-btn.is-secondary{
  background: rgba(255,255,255,.92);
  color: #1f2937; border-color: rgba(15,23,42,.08);
}
.ck-ai-action-btn.is-secondary:hover{
  background: #f0f5ff; color: var(--ck-primary, #1a73e8);
  border-color: rgba(26,115,232,.4);
}
.ck-ai-action-btn.is-danger{
  background: rgba(255,255,255,.92); color: #b91c1c;
  border-color: rgba(185,28,28,.25);
}
.ck-ai-action-btn.is-danger:hover{ background: #fef2f2; }
.ck-ai-action-btn.is-applied{
  background: #dcfce7; color: #166534; border-color: #bbf7d0; cursor: default;
}
.ck-ai-action-btn[disabled]{ opacity: .55; cursor: not-allowed; transform: none; }
.ck-ai-action-icon{
  display: inline-flex; align-items: center; flex-shrink: 0;
}
.ck-ai-action-icon svg, .ck-ai-action-icon i{ font-size: 11px; }
/* На узком контейнере (например discussion-panel ≤340px) кнопки
   переносятся flex-wrap-ом — каждая кнопка сама занимает свою строку,
   потому что flex:1 + min-width:0 + flex-wrap:wrap. Container query
   тут не используем: container-type:inline-size на .ck-msg-wrap
   ломает шрейк-ту-фит ширины пузыря в column-flex родителе и
   приводит к рендеру текста по одной букве в строку. */

/* highlight pulse for scrollToMsg */
@keyframes ck-pulse{ 0% { background: #fef3c7; } 100% { background: inherit; } }
.ck-bubble.is-pulse{ animation: ck-pulse 1s ease-out; }

/* ============================================================================
   7. COMPOSER — поле ввода
   ============================================================================ */
.ck-composer{
  flex-shrink: 0;
  background: #fff;
  border-top: 1px solid rgba(0,0,0,.08);
  padding: 6px 14px 8px;
}
.ck-composer.is-disabled .ck-textarea{ opacity: .65; cursor: not-allowed; }
.ck-composer-footer{
  display: flex; justify-content: flex-end;
  margin-top: 4px; padding: 0 4px;
}
.ck-char-counter{
  font-size: 11px; color: var(--ck-text-light);
  letter-spacing: .2px;
}
.ck-char-counter.is-over{ color: #d93025; font-weight: 600; }

/* banners (reply / edit / quote / ai-mode) */
.ck-composer-banner{
  display: flex; align-items: flex-start; gap: 8px;
  border-left: 3px solid var(--ck-send);
  background: rgba(78,164,78,.06);
  border-radius: 0 8px 8px 0;
  padding: 6px 10px; margin-bottom: 6px;
}
.ck-composer-banner.is-edit{
  border-left-color: var(--ck-warn);
  background: #fffbeb;
}
.ck-composer-banner.is-quote{
  border-left-color: var(--ck-warn);
  background: rgba(251,191,36,.1);
}
.ck-composer-banner.is-ai{
  background: linear-gradient(to right, #faf5ff, #f5f3ff);
  border: 1px solid #e9d5ff; border-left: 1px solid #e9d5ff;
  border-radius: 8px;
  padding: 6px 10px;
  align-items: center;
}
.ck-composer-banner-body{ flex: 1; min-width: 0; }
.ck-composer-banner-label{
  font-size: 11px; font-weight: 700;
  letter-spacing: .2px;
  color: var(--ck-send);
}
.ck-composer-banner.is-edit .ck-composer-banner-label{ color: var(--ck-warn); }
.ck-composer-banner.is-quote .ck-composer-banner-label{ color: #b45309; }
.ck-composer-banner.is-ai .ck-composer-banner-label{ color: #6d28d9; }
.ck-composer-banner-text{
  font-size: 12px; color: var(--ck-text-light);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 240px; margin-top: 1px;
}
.ck-composer-banner.is-quote .ck-composer-banner-text{
  color: #92400e; font-style: italic;
}
.ck-composer-banner-close{
  width: 24px; height: 24px; border-radius: 50%;
  border: none; background: none; cursor: pointer;
  color: #94a3b8; font-size: 18px; line-height: 1;
  flex-shrink: 0;
}
.ck-composer-banner-close:hover{ background: #e8edf5; color: #475569; }

/* ai mode icon at start of banner */
.ck-composer-ai-ico{
  width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px; flex-shrink: 0;
}
.ck-composer-banner.is-ai .ck-composer-banner-text{
  color: #a78bfa; margin-top: 0; font-style: normal;
  font-size: 10.5px; font-weight: 500;
}

/* quick actions row (under banners) */
.ck-quick-row{
  display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 6px;
}
.ck-quick-btn{
  padding: 4px 10px; border-radius: 12px;
  border: 1px solid #ddd6fe;
  background: #faf5ff;
  font-size: 11.5px; font-weight: 600;
  color: var(--ck-ai); cursor: pointer;
  font-family: inherit;
}
.ck-quick-btn:hover{ background: #f5f3ff; }

/* input row */
/* align-items: flex-end — для multiline, чтобы side-btns / send «прижались»
   к нижнему краю выросшего input-wrap, а не центрировались внутри. Для
   одного ряда (single-line) всё имеет высоту 40px и flex-end совпадает с
   center: paperclip / textarea / smiley / send выровнены по одной линии. */
.ck-composer-row{
  display: flex; align-items: flex-end; gap: 6px;
}
.ck-composer-side-btn{
  width: 40px; height: 40px; border-radius: 50%;
  background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #8e9aa5; flex-shrink: 0;
}
.ck-composer-side-btn:hover{
  color: var(--ck-send); background: var(--ck-bg);
}

/* Input-wrap = same height as side-btns в single-line (40px = textarea
   с min-height:22 + padding 9+9). align-items:center центрирует smiley/
   AI-tool по вертикали, чтобы они стояли на одной осевой линии с
   paperclip/send (раньше flex-end опускал их к нижней кромке wrap'а,
   smiley оказывался ниже центра). Для multiline textarea растягивается,
   smiley остаётся в центре растущего wrap — visually OK. */
.ck-input-wrap{
  flex: 1;
  display: flex; align-items: center;
  background: #fff;
  border: 1.5px solid var(--ck-border);
  border-radius: var(--ck-radius-input);
  padding: 0 6px 0 14px;
  transition: border .15s;
  position: relative;
}
/* Выпадашка @-mention над композером. Открывается, когда пользователь
   печатает «@xxx» после пробела/начала строки. */
.ck-mention-menu{
  position: absolute; left: 0; right: 0; bottom: calc(100% + 6px);
  background: #fff; border: 1px solid var(--ck-border);
  border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.12);
  padding: 4px; z-index: 60; max-height: 240px; overflow-y: auto;
}
.ck-mention-item{
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 8px; cursor: pointer;
  font-size: 13px; color: var(--ck-text); user-select: none;
}
.ck-mention-item.is-active{ background: rgba(26,115,232,.10); }
.ck-mention-avatar{
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 11px; font-weight: 700;
  flex-shrink: 0; overflow: hidden;
}
.ck-mention-avatar img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.ck-mention-name{ flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
/* Кликабельный @-mention в пузыре сообщения. */
.ck-msg-mention{
  color: #1a73e8; font-weight: 600; cursor: pointer; text-decoration: none;
  padding: 0 2px; border-radius: 4px;
}
.ck-msg-mention:hover{ background: rgba(26,115,232,.10); text-decoration: underline; }
.ck-input-wrap:focus-within{ border-color: #a8d4a0; }
.ck-input-wrap.is-ai{ border-color: #ddd6fe; background: #faf5ff; }
.ck-input-wrap.is-ai:focus-within{ border-color: #a78bfa; background: #fff; }

.ck-textarea{
  flex: 1; border: none; background: none; outline: none;
  font-size: 14px; font-family: inherit;
  color: var(--ck-text); resize: none;
  padding: 9px 0; max-height: 120px; min-height: 22px;
  line-height: 1.4;
}

.ck-input-tool{
  width: 30px; height: 30px; border-radius: 50%;
  border: none; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #94a3b8; flex-shrink: 0;
}
.ck-input-tool:hover{ background: var(--ck-bg); color: var(--ck-send); }
.ck-input-tool.is-ai{ color: #a78bfa; }
.ck-input-tool.is-ai:hover{ background: #f5f3ff; color: var(--ck-ai); }
.ck-input-tool.is-ai.is-active{ background: var(--ck-ai); color: #fff; }

.ck-send{
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--ck-send); color: #fff;
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all .15s;
}
.ck-send:hover{ background: var(--ck-send-hover); }
.ck-send.is-ai{ background: linear-gradient(135deg, #8b5cf6, #6366f1); }
.ck-send.is-ai:hover{ background: linear-gradient(135deg, #7c3aed, #4f46e5); }
.ck-send:disabled{ background: #cbd5e1; cursor: not-allowed; }

/* ============================================================================
   8. COLLAPSIBLE PANEL — сворачивание в рейл (специфично для правой панели)
   ============================================================================ */
.ck-collapsible{
  position: relative;
  transition: width .28s cubic-bezier(.2,.7,.2,1);
}
.ck-collapsible.is-collapsed{ width: 52px !important; }

/* toggle "tongue" on left edge */
.ck-toggle-tongue{
  position: absolute; left: -12px; top: 90px;
  width: 24px; height: 48px;
  background: #fff;
  border: 1px solid var(--ck-border); border-right: none;
  border-radius: 8px 0 0 8px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 50; color: #94a3b8;
  box-shadow: -2px 2px 8px rgba(0,0,0,.04);
  transition: all .15s;
}
.ck-toggle-tongue:hover{
  color: var(--ck-primary); width: 28px; left: -16px;
}
.ck-toggle-tongue svg{ transition: transform .28s cubic-bezier(.2,.7,.2,1); }
.ck-collapsible.is-collapsed .ck-toggle-tongue svg{ transform: rotate(180deg); }

/* rail (visible when collapsed) */
.ck-rail{
  display: none;
  flex-direction: column; align-items: center;
  padding: 14px 0 10px;
  height: 100%; overflow: hidden;
  background: linear-gradient(to bottom, #fff 0, #fafcff 100%);
}
.ck-collapsible.is-collapsed .ck-rail{ display: flex; }
.ck-collapsible.is-collapsed .ck-stack{ display: none; }

.ck-rail-title{
  font-size: 9px; font-weight: 700; color: #94a3b8;
  writing-mode: vertical-rl; transform: rotate(180deg);
  letter-spacing: 1.5px; text-transform: uppercase;
  margin-bottom: 10px;
}
.ck-rail-divider{
  width: 24px; height: 1px;
  background: var(--ck-border); margin: 6px 0;
}
.ck-rail-new{
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--ck-primary); color: #fff;
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 8px; flex-shrink: 0;
  transition: all .15s;
}
.ck-rail-new:hover{ background: var(--ck-primary-dark); transform: scale(1.06); }

.ck-rail-list{
  flex: 1; width: 100%; overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; padding: 4px 0 6px;
}
.ck-rail-list::-webkit-scrollbar{ width: 0; }

.ck-rail-item{
  width: 38px; height: 38px; border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px; font-weight: 700;
  cursor: pointer; position: relative;
  transition: all .15s;
  letter-spacing: -.3px;
}
.ck-rail-item:hover{ transform: scale(1.08); border-radius: 14px; }
.ck-rail-item.has-unread::before{
  content: ''; position: absolute;
  left: -7px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 18px; border-radius: 2px;
  background: #fff;
}
.ck-rail-item.has-unread::after{
  content: ''; position: absolute;
  left: -9px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 20px; border-radius: 2px;
  background: var(--ck-primary);
}
.ck-rail-pin{
  position: absolute; top: -2px; right: -2px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #f59e0b;
  display: flex; align-items: center; justify-content: center;
  font-size: 8px; color: #fff; border: 2px solid #fff;
}
.ck-rail-badge{
  position: absolute; bottom: -2px; right: -2px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; background: var(--ck-error); color: #fff;
  font-size: 9px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff;
}
.ck-rail-tip{
  position: absolute; right: 60px; top: 50%;
  transform: translateY(-50%) translateX(-6px);
  background: #1e293b; color: #fff;
  padding: 6px 10px; border-radius: 8px;
  font-size: 12px; font-weight: 500; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: all .15s;
  z-index: 60;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
  max-width: 240px; overflow: hidden; text-overflow: ellipsis;
}
.ck-rail-tip::after{
  content: ''; position: absolute; right: -4px; top: 50%;
  transform: translateY(-50%);
  width: 0; height: 0;
  border-left: 5px solid #1e293b;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
.ck-rail-item:hover .ck-rail-tip{
  opacity: 1; transform: translateY(-50%) translateX(0);
}

/* ============================================================================
   9. SLIDE-NAVIGATION (двухэкранная навигация: список → переписка)
   ============================================================================ */
.ck-stack{
  position: relative; flex: 1; overflow: hidden;
}
.ck-screen{
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  background: var(--ck-card);
  transition: transform .28s cubic-bezier(.2,.7,.2,1);
}
.ck-screen.is-list{ transform: translateX(0); }
.ck-screen.is-list.is-back{
  transform: translateX(-20%); opacity: .5;
}
.ck-screen.is-detail{ transform: translateX(100%); }
.ck-screen.is-detail.is-open{ transform: translateX(0); }

/* ============================================================================
   10. SELECTION POPOVER — Google-Docs-style "Спросить про это"
   ============================================================================ */
.ck-sel-popover{
  position: fixed; display: none;
  background: #1e293b; color: #fff;
  border-radius: 10px; padding: 0;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  z-index: var(--ck-z-selection);
  animation: ck-sel-fade .15s ease-out;
}
@keyframes ck-sel-fade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ck-sel-popover.is-open{ display: flex; }
.ck-sel-btn{
  padding: 9px 14px;
  background: none; border: none; color: #fff;
  font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: inherit;
  display: flex; align-items: center; gap: 6px;
  border-radius: 10px;
}
.ck-sel-btn:hover{ background: rgba(255,255,255,.1); }

/* ============================================================================
   11. PARAGRAPH ANCHOR FLASH — подсветка абзаца урока
   ============================================================================ */
@keyframes ck-pflash {
  0%   { background: rgba(251,191,36,0); }
  20%  { background: rgba(251,191,36,.5); }
  100% { background: rgba(251,191,36,0); }
}
.ck-paragraph-flash{ animation: ck-pflash 1.6s ease-out; }

/* ============================================================================
   12. THREAD QUOTE PIN — цитата прикреплённая к треду (показывается над лентой)
   ============================================================================ */
.ck-thread-quote{
  display: flex; gap: 8px; align-items: flex-start;
  padding: 8px 12px;
  background: #fffbeb;
  border-bottom: 1px solid #fde68a;
  font-size: 11.5px; color: #92400e;
  cursor: pointer; flex-shrink: 0;
}
.ck-thread-quote:hover{ background: #fef3c7; }
.ck-thread-quote-ico{
  flex-shrink: 0; color: var(--ck-warn); margin-top: 1px;
}
.ck-thread-quote-body{ flex: 1; min-width: 0; }
.ck-thread-quote-label{
  font-weight: 700; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .4px;
  margin-bottom: 2px; color: #b45309;
}
.ck-thread-quote-text{
  font-style: italic; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.ck-thread-quote-link{
  font-size: 10.5px; color: var(--ck-primary);
  font-weight: 600; margin-top: 3px;
  display: inline-flex; align-items: center; gap: 3px;
}

/* ============================================================================
   13. ATTACH PREVIEW — превью файлов в композере
   ============================================================================ */
.ck-attach-preview{ display:flex; gap:8px; flex-wrap:wrap; padding:8px 0; }
.ck-attach-item{
  display:flex; align-items:center; gap:8px;
  background:var(--ck-bg); border:1px solid var(--ck-border);
  border-radius:8px; padding:6px 8px;
  min-width:200px; max-width:280px; position:relative;
}
.ck-attach-item.is-uploading{ opacity:.85; padding-bottom:12px; }
.ck-attach-item.is-error{ border-color:var(--ck-error); }
.ck-attach-thumb{ width:32px; height:32px; border-radius:6px; object-fit:cover; flex-shrink:0; }
.ck-attach-icon{
  width:32px; height:32px; border-radius:6px;
  background:var(--ck-card); display:flex; align-items:center; justify-content:center;
  color:var(--ck-text-light); flex-shrink:0;
}
.ck-attach-body{ flex:1; min-width:0; }
.ck-attach-name{
  font-size:12.5px; color:var(--ck-text); font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ck-attach-size{ font-size:11px; color:var(--ck-text-light); margin-top:2px; }
/* Прогресс-бар прижат к самой нижней кромке чипа, тонкий, на всю ширину —
   чтобы не залезал на подпись с размером файла. Сам чип во время аплоада
   получает padding-bottom (см. .is-uploading выше), резервирующий место. */
.ck-attach-progress{
  position:absolute; left:0; right:0; bottom:0; height:3px;
  background:rgba(0,0,0,.06); border-radius:0 0 8px 8px; overflow:hidden;
}
.ck-attach-progress-fill{
  height:100%;
  background:linear-gradient(90deg, var(--ck-send), var(--ck-success));
  transition:width .25s ease-out;
  position:relative; overflow:hidden;
}
.ck-attach-progress-fill::after{
  content:'';
  position:absolute; inset:0;
  background-image: linear-gradient(
    45deg,
    rgba(255,255,255,.25) 25%, transparent 25%,
    transparent 50%, rgba(255,255,255,.25) 50%,
    rgba(255,255,255,.25) 75%, transparent 75%, transparent
  );
  background-size: 14px 14px;
  animation: ckProgressStripes 1s linear infinite;
}
@keyframes ckProgressStripes{
  from { background-position: 0 0; }
  to   { background-position: 14px 0; }
}
.ck-attach-remove{
  width:20px; height:20px; border:none; background:none;
  color:var(--ck-text-light); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  border-radius:4px; flex-shrink:0;
}
.ck-attach-remove:hover{ background:var(--ck-bg); color:var(--ck-error); }

/* ============================================================================
   14. CONTEXT MENU — меню действий для сообщения / комнаты (position:fixed)
   ============================================================================ */
.ck-ctx-menu{
  position:fixed; min-width:180px;
  background:var(--ck-card); border:1px solid var(--ck-border);
  border-radius:10px; box-shadow:0 8px 28px rgba(0,0,0,.16);
  padding:4px; z-index:5000;
  display:flex; flex-direction:column; gap:1px;
  font-family:inherit; font-size:13px;
}
.ck-ctx-menu-item{
  display:flex; align-items:center; gap:8px;
  padding:7px 10px; border-radius:6px; border:none;
  background:none; color:var(--ck-text); text-align:left;
  cursor:pointer; font:inherit;
}
.ck-ctx-menu-item:hover:not(:disabled){ background:var(--ck-bg); color:var(--ck-primary); }
.ck-ctx-menu-item.is-danger{ color:var(--ck-error); }
.ck-ctx-menu-item.is-danger:hover:not(:disabled){ background:rgba(255,68,68,.08); }
.ck-ctx-menu-item.is-disabled{ opacity:.4; cursor:not-allowed; }
.ck-ctx-menu-icon{
  width:16px; height:16px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; color:currentColor;
}

/* ============================================================================
   15. FORWARD MODAL — внутренние стили (модальная оболочка из /static/modal.css)
   ============================================================================ */
.ck-fwd-rooms{
  max-height:240px; overflow-y:auto;
  border:1px solid var(--ck-border); border-radius:8px; padding:4px;
}
.ck-fwd-room{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:6px; cursor:pointer;
  transition:background .1s;
}
.ck-fwd-room:hover{ background:var(--ck-bg); }
.ck-fwd-room.is-active{ background:rgba(0,102,204,.1); color:var(--ck-primary); }
.ck-fwd-room-avatar{
  width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:11px; font-weight:700; flex-shrink:0;
}
.ck-fwd-room-name{ flex:1; font-size:13px; font-weight:500; }
.ck-fwd-empty{ padding:16px; text-align:center; color:var(--ck-text-light); font-size:12.5px; }

/* ============================================================================
   16. NEW CHAT MODAL — поиск пользователей и chip-list
   ============================================================================ */
.ck-newchat-results{
  max-height:200px; overflow-y:auto;
  border:1px solid var(--ck-border); border-radius:8px;
  margin-top:6px;
}
.ck-newchat-result{
  display:flex; flex-direction:column;
  padding:7px 10px; cursor:pointer; transition:background .1s;
}
.ck-newchat-result:hover{ background:var(--ck-bg); }
.ck-newchat-result-name{ font-size:13px; color:var(--ck-text); font-weight:500; }
.ck-newchat-result-email{ font-size:11.5px; color:var(--ck-text-light); }
.ck-newchat-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; background:var(--ck-bg); border-radius:14px;
  font-size:12.5px; color:var(--ck-text); margin:2px 4px 2px 0;
}
.ck-newchat-chip-x{ cursor:pointer; color:var(--ck-text-light); font-size:14px; line-height:1; }
.ck-newchat-chip-x:hover{ color:var(--ck-error); }

/* ============================================================================
   17. GROUP PANEL — drawer с участниками (position:absolute right:0)
   ----------------------------------------------------------------------------
   Родитель должен иметь position:relative и overflow:hidden, чтобы панель
   не выходила за его границы.
   ============================================================================ */
.ck-group-panel{
  position:absolute; right:0; top:0; height:100%; width:340px;
  background:var(--ck-card); border-left:1px solid var(--ck-border);
  display:flex; flex-direction:column;
  box-shadow:-4px 0 16px rgba(0,0,0,.06);
  z-index:50; font-family:inherit;
}
.ck-gp-header{
  display:flex; align-items:center; gap:10px;
  padding:14px 16px; border-bottom:1px solid var(--ck-border);
  flex-shrink:0;
}
.ck-gp-title{
  flex:1; font-size:16px; font-weight:600;
  color:var(--ck-text); margin:0;
}
.ck-gp-close{
  width:28px; height:28px; border:none; background:none;
  color:var(--ck-text-light); cursor:pointer; border-radius:6px;
  display:flex; align-items:center; justify-content:center;
}
.ck-gp-close:hover{ background:var(--ck-bg); color:var(--ck-text); }
.ck-gp-body{ flex:1; overflow-y:auto; padding:16px; }
.ck-gp-avatar-wrap{ position:relative; width:88px; height:88px; margin:0 auto 16px; }
.ck-gp-avatar{
  width:100%; height:100%; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:32px; font-weight:600; overflow:hidden;
}
.ck-gp-avatar img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }
.ck-gp-avatar-edit{
  position:absolute; right:0; bottom:0;
  width:30px; height:30px; border-radius:50%;
  background:var(--ck-primary); color:#fff;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.16);
}
.ck-gp-avatar-edit:hover{ background:var(--ck-primary-dark); }
.ck-gp-section-title{
  display:flex; align-items:center; gap:6px;
  font-size:11px; text-transform:uppercase; letter-spacing:.4px;
  color:var(--ck-text-light); font-weight:700; margin:14px 0 8px;
}
.ck-gp-count{
  background:var(--ck-bg); padding:1px 7px; border-radius:8px; font-size:10.5px;
}
.ck-gp-members{ display:flex; flex-direction:column; gap:4px; }
.ck-gp-member{
  display:flex; align-items:center; gap:10px;
  padding:6px 8px; border-radius:8px;
}
.ck-gp-member:hover{ background:var(--ck-bg); }
.ck-gp-member.is-clickable{ cursor:pointer; }
.ck-gp-member.is-clickable:hover{ background:rgba(26,115,232,.08); }
.ck-gp-member-avatar{
  width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:12px; font-weight:700; flex-shrink:0;
  overflow:hidden;
}
.ck-gp-member-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.ck-gp-member-name{
  flex:1; font-size:13px; color:var(--ck-text); font-weight:500;
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ck-gp-member-role{
  font-size:10.5px; color:var(--ck-text-light);
  padding:2px 7px; background:var(--ck-bg); border-radius:8px;
}
.ck-gp-member-remove{
  width:24px; height:24px; border:none; background:none;
  color:var(--ck-text-light); cursor:pointer; border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .15s;
}
.ck-gp-member:hover .ck-gp-member-remove{ opacity:1; }
.ck-gp-member-remove:hover{ background:rgba(255,68,68,.1); color:var(--ck-error); }
.ck-gp-add{ margin-top:6px; }
.ck-gp-search{
  width:100%; padding:8px 12px;
  border:1px solid var(--ck-border); border-radius:8px;
  font:inherit; font-size:13px;
  background:var(--ck-card); color:var(--ck-text);
}
.ck-gp-search:focus{ outline:none; border-color:var(--ck-primary); }
.ck-gp-results{
  margin-top:6px; max-height:200px; overflow-y:auto;
  border:1px solid var(--ck-border); border-radius:8px;
}
.ck-gp-result{
  display:flex; flex-direction:column;
  padding:7px 10px; cursor:pointer; transition:background .1s;
}
.ck-gp-result:hover{ background:var(--ck-bg); }
.ck-gp-result-email{ font-size:11.5px; color:var(--ck-text-light); }

/* ============================================================================
   18. MOBILE (<768px) — sidebar full-width
   ============================================================================ */
@media (max-width: 768px) {
  .ck-msgs{ padding: 8px 12px; }
  .ck-msg-row{ max-width: 90%; }
  .ck-composer{ padding: 6px 10px 8px; }
  .ck-group-panel{ width: 100%; }
}

/* ============================================================================
   19. DARK THEME — переопределение токенов через [data-ck-theme="dark"]
   ----------------------------------------------------------------------------
   Применяется на любом предке chat-kit разметки:
     <div data-ck-theme="dark">
       <ck-message-list ... />
     </div>
   ============================================================================ */
[data-ck-theme="dark"]{
  --ck-bg:                #1a1f2e;
  --ck-card:              #232838;
  --ck-text:              #e6e8eb;
  --ck-text-light:        #9aa3b1;
  --ck-border:            #353b4a;
  --ck-bubble-own:        #2c4d3a;
  --ck-bubble-other:      #2a2f3f;
}
[data-ck-theme="dark"] .ck-bubble{ color:var(--ck-text); }
[data-ck-theme="dark"] .ck-attach-icon{ background:var(--ck-bg); }
[data-ck-theme="dark"] .ck-msg-author{ color:var(--ck-text-light); }
[data-ck-theme="dark"] .ck-list-header{ border-bottom-color:var(--ck-border); }
[data-ck-theme="dark"] .ck-chat-header{ border-bottom-color:var(--ck-border); }
[data-ck-theme="dark"] .ck-composer{ border-top-color:var(--ck-border); background:var(--ck-card); }
[data-ck-theme="dark"] .ck-textarea{ background:var(--ck-bg); color:var(--ck-text); }

/* ============================================================================
   <ck-msg-combo-menu> — Telegram-style составной popup (палитра + меню).
   Открывается на правый клик / long-press по сообщению. Обе панели —
   «стеклянные» (translucent + backdrop-blur), позиционируются стопкой
   через teleport-to-body (чтобы overflow родительских контейнеров не
   обрезал).
   ============================================================================ */
.ck-combo-palette,
.ck-combo-menu{
  position: fixed;
  background: rgba(255,255,255,.88);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 30px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.06);
  animation: ckComboFadeIn .12s;
}
.ck-combo-palette{
  z-index: 6000;
  border-radius: 22px;
  padding: 6px;
  /* flex-wrap + max-width: расширенный набор эмодзи (см. EMOJI_PALETTE в
     main/lk/chat.php) переносится на новые строки. 8 кнопок по 34px +
     гэп 2px + padding 12px ≈ 304px → max-width 312 даёт ровно 8 в ряд. */
  display: flex; flex-wrap: wrap; gap: 2px;
  max-width: 312px;
}
.ck-combo-palette-btn{
  width: 34px; height: 34px;
  border: none; background: none;
  border-radius: 50%;
  font-size: 20px; line-height: 1;
  cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background .1s, transform .1s;
}
.ck-combo-palette-btn:hover{
  background: rgba(0,102,204,.08);
  transform: scale(1.15);
}
/* Twemoji-img внутри пикера реакций — крупнее, чем в чипах под пузырём,
   потому что это «выбор» (нужен большой кликабельный таргет). Перебивает
   общий .ck-twemoji {height:1em} (см. начало файла). */
.ck-combo-palette-btn img.ck-twemoji{
  height: 22px; width: 22px;
  vertical-align: middle; margin: 0;
}

.ck-combo-menu{
  z-index: 5000;
  border-radius: 14px;
  padding: 6px;
}
.ck-combo-menu-item{
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13.5px; color: #1a1a1a;
  display: flex; align-items: center; gap: 12px;
  border-radius: 8px;
  transition: background .1s;
  user-select: none;
}
.ck-combo-menu-item:hover{ background: rgba(0,102,204,.08); }
.ck-combo-menu-item.is-danger{ color: #d93025; }
.ck-combo-menu-item.is-danger:hover{ background: rgba(217,48,37,.08); }
.ck-combo-menu-item.is-disabled{ opacity: .5; cursor: not-allowed; }
.ck-combo-menu-icon{
  width: 18px; display: flex; align-items: center; justify-content: center;
  color: #6b7280; font-size: 14px; flex-shrink: 0;
}
.ck-combo-menu-item:hover .ck-combo-menu-icon{ color: var(--ck-primary); }
.ck-combo-menu-icon svg{ width: 14px; height: 14px; }

@keyframes ckComboFadeIn{
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: scale(1); }
}