/* _shared/chat-thread.css — переиспользуемый ТГ-тред (spec 2026-06-20; v3 «Чаты-TG» 2026-07-09).
   Зависит от токенов base.css (--accent/--hair/--ink/--bg-*).
   У учителя своя система токенов — двойные фолбэки var(--x, var(--t-x)).
   v3: облик Telegram — шапка с аватаром, обои-дудлы, ряд+бабл без рамок
   с хвостом, закреп-бар, режим выделения, пересылка, лайтбокс, тосты. */

.ct-root, .ct-cpick, .ct-cp {
  --ct-accent: var(--accent, var(--t-accent, #2B4C8C));
  --ct-accent-wash: var(--accent-wash, var(--t-accent-wash, rgba(43, 76, 140, 0.12)));
  --ct-hair: var(--hair, var(--t-hair, #e2ddd2));
  --ct-hair-soft: var(--hair-soft, var(--t-hair-soft, #ece8de));
  --ct-hair-strong: var(--hair-strong, var(--t-hair-strong, #cfc9bb));
  --ct-ink: var(--ink, var(--t-ink, #1c2430));
  --ct-mute: var(--ink-mute, var(--t-ink-mute, #6f7783));
  --ct-bg: var(--bg-page, var(--t-canvas-2, #f4f1ea));
  --ct-canvas: var(--bg-canvas, var(--t-canvas, #fff));
  --ct-on-dark: var(--ink-on-dark, var(--t-ink-invert, #fff));
  --ct-bad: var(--garnet, var(--t-bad, #b53a3a));   /* --garnet тема-зависим (свет/тьма) */
  --ct-font: var(--font-body, var(--t-font-body, system-ui, sans-serif));
}

.ct-root {
  position: relative;
  display: flex; flex-direction: column;
  height: 100%; min-height: 0;
  background: var(--ct-canvas);
  overflow: hidden;
  font-family: var(--ct-font);
}
.ct-root.ct-fullscreen {
  position: fixed; inset: 0; z-index: 60;
  border: 0; border-radius: 0;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* ── палитра имён/аватаров (стабильный хэш по id, как в ТГ) ── */
.ct-av0 { background: linear-gradient(135deg, #e08a8a, #c25151); }
.ct-av1 { background: linear-gradient(135deg, #7fc389, #4d9457); }
.ct-av2 { background: linear-gradient(135deg, #e0b25e, #b98a2e); }
.ct-av3 { background: linear-gradient(135deg, #83aee0, #4a7cba); }
.ct-av4 { background: linear-gradient(135deg, #ab8ad8, #7d55b5); }
.ct-av5 { background: linear-gradient(135deg, #dc90bb, #b55a8c); }
.ct-av6 { background: linear-gradient(135deg, #74bfcd, #3d93a4); }
.ct-sc0 { color: #c25151; } .ct-sc1 { color: #4d9457; } .ct-sc2 { color: #b08023; }
.ct-sc3 { color: #4a7cba; } .ct-sc4 { color: #7d55b5; } .ct-sc5 { color: #b55a8c; }
.ct-sc6 { color: #3d93a4; }
/* тёмная тема: имена на navy-баблах — осветлённая палитра (контраст ≥ AA) */
:root[data-theme="dark"] .ct-sc0 { color: #f0908f; }
:root[data-theme="dark"] .ct-sc1 { color: #7fd191; }
:root[data-theme="dark"] .ct-sc2 { color: #e6b95c; }
:root[data-theme="dark"] .ct-sc3 { color: #86b6ee; }
:root[data-theme="dark"] .ct-sc4 { color: #c39ae8; }
:root[data-theme="dark"] .ct-sc5 { color: #e896c2; }
:root[data-theme="dark"] .ct-sc6 { color: #74c6d6; }

/* ── шапка треда (аватар · имя · статус · поиск) ── */
.ct-head {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--ct-hair);
  background: var(--ct-canvas);
  flex: 0 0 auto; min-height: 54px;
}
.ct-head__back {
  display: none;
  border: 0; background: transparent; color: var(--ct-accent);
  font: 600 24px/1 var(--ct-font); cursor: pointer; padding: 0;
  width: 44px; height: 44px; border-radius: 50%; place-items: center;
}
.ct-root.ct-fullscreen .ct-head__back { display: grid; }
@media (max-width: 720px) { .ct-head__back { display: grid; } }
.ct-head__ava {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; flex: 0 0 auto;
  font: 600 14px/1 var(--ct-font); color: #fff;
}
.ct-head__info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ct-head__title {
  font: 600 14px/1.25 var(--ct-font); color: var(--ct-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ct-head__sub {
  font: 12px/1.25 var(--ct-font); color: var(--ct-mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ct-head__search {
  border: 0; background: transparent; color: var(--ct-mute);
  cursor: pointer; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
}
.ct-head__search:hover { background: var(--ct-bg); color: var(--ct-ink); }

/* ── панель выделения (N выбрано · копировать/переслать/удалить) ── */
.ct-selbar {
  display: none; align-items: center; gap: 6px;
  padding: 8px 12px; min-height: 54px;
  border-bottom: 1px solid var(--ct-hair);
  background: var(--ct-canvas);
  flex: 0 0 auto;
  overflow-x: auto; scrollbar-width: none;   /* на телефоне 4 кнопки не режутся, а скроллятся */
}
.ct-selbar::-webkit-scrollbar { display: none; }
.ct-selbar button { flex: 0 0 auto; white-space: nowrap; }
.ct-root.ct-selmode .ct-selbar { display: flex; }
.ct-root.ct-selmode .ct-head { display: none; }
.ct-selbar button {
  border: 0; background: transparent; cursor: pointer;
  font: 500 13px var(--ct-font); color: var(--ct-accent);
  padding: 7px 9px; border-radius: 8px;
  display: inline-flex; align-items: center; gap: 5px;
}
.ct-selbar button:hover { background: var(--ct-bg); }
.ct-selbar button:disabled { opacity: 0.4; cursor: default; }
.ct-selbar button.danger { color: var(--ct-bad); }
.ct-selbar [data-sel="exit"] { color: var(--ct-mute); }
.ct-selbar__n { font: 600 13.5px var(--ct-font); color: var(--ct-ink); }
.ct-selbar__sp { flex: 1; }

/* ── закреп-бар (как в ТГ, под шапкой) ── */
.ct-pinbar {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 12px;
  border-bottom: 1px solid var(--ct-hair);
  background: var(--ct-canvas);
  flex: 0 0 auto;
}
.ct-pinbar[hidden] { display: none; }
.ct-pinbar__ic { color: var(--ct-accent); display: grid; place-items: center; }
.ct-pinbar__txt {
  flex: 1 1 auto; min-width: 0; cursor: pointer;
  border-left: 2px solid var(--ct-accent); padding-left: 8px;
  border-top:0;border-right:0;border-bottom:0;background:transparent;text-align:left;
}
.ct-pinbar__txt b {
  display: block; font: 600 11px var(--ct-font); color: var(--ct-accent);
}
.ct-pinbar__txt span {
  display: block; font: 12px var(--ct-font); color: var(--ct-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ct-pinbar__off {
  border: 0; background: transparent; color: var(--ct-mute); cursor: pointer;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
}
.ct-pinbar__off:hover { background: var(--ct-bg); }

/* ── лента: обои-дудлы (математические каракули, серый в обе темы) ── */
.ct-scroll {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  padding: 12px 12px 8px;
  display: flex; flex-direction: column; gap: 2px;
  background-color: var(--ct-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg fill='none' stroke='%23888' stroke-opacity='.13' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='38' cy='44' r='12'/%3E%3Cpath d='M38 26v36'/%3E%3Cpath d='M50 152l6 12 10-26h16'/%3E%3Ccircle cx='168' cy='152' r='7'/%3E%3Ccircle cx='182' cy='152' r='7'/%3E%3Cpath d='M198 92l11-19 11 19z'/%3E%3Cpath d='M92 56v12M86 62h12'/%3E%3Cpath d='M22 208q4-4 8 0t8 0M22 216q4-4 8 0t8 0'/%3E%3Cpath d='M216 26l-8 16M208 26l8 16'/%3E%3C/g%3E%3Cg fill='%23888' fill-opacity='.13' font-family='Georgia,serif' font-size='19'%3E%3Ctext x='100' y='112'%3Ex%C2%B2%3C/text%3E%3Ctext x='196' y='224'%3E%CE%A3%3C/text%3E%3Ctext x='140' y='48'%3E%CF%80%3C/text%3E%3C/g%3E%3C/svg%3E");
}
.ct-scroll::-webkit-scrollbar { width: 8px; }
/* --hair-strong в ДС = near-black; для деликатного бегунка берём --hair */
.ct-scroll::-webkit-scrollbar-thumb { background: var(--ct-hair); border-radius: 4px; }

/* липкие чипы-даты — полупрозрачная пилюля (ТГ) */
.ct-day {
  position: sticky; top: 6px; z-index: 3;
  align-self: center; margin: 10px 0 6px;
  pointer-events: none;
}
.ct-day span {
  display: inline-block;
  font: 600 11.5px/1 var(--ct-font);
  color: #fff; background: rgba(56, 56, 56, 0.62);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);   /* читаемость белого на светлых обоях */
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  border-radius: 999px; padding: 5px 11px;
}

.ct-load-earlier {
  align-self: center; margin: 6px 0;
  font: 11px var(--ct-font); color: var(--ct-mute);
  min-height:44px;padding:8px 14px;border:0;border-radius:999px;background:var(--ct-canvas);cursor:pointer;
}

/* ── ряд сообщения (full-width) + бабл ── */
.ct-msg {
  position: relative;
  display: flex; align-items: flex-end;
  justify-content: flex-start;
  width: 100%;
  padding: 1px 0;
  transition: background 0.15s, padding 0.15s;
  border-radius: 8px;
}
/* 04.09 (владелец): свои сообщения — у правого края. В row-reverse главная ось идёт справа налево,
   поэтому «к правому краю» = flex-start, а не flex-end (flex-end прижимал баблы к левому краю). */
.ct-msg--mine { justify-content: flex-start; flex-direction: row-reverse; }
.ct-msg + .ct-msg { margin-top: 1px; }

.ct-bub {
  position: relative;
  max-width: min(480px, 76%);
  background: var(--ct-canvas);
  border-radius: 12px 12px 12px 4px;
  padding: 6px 10px 5px;
  font: 13.5px/1.42 var(--ct-font); color: var(--ct-ink);
  word-break: break-word;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.09);
  will-change: transform;
}
/* текст своего бабла = цвет канвы: в светлой теме белый на тёмном акценте,
   в тёмной — тёмный на светлом акценте (контраст в обе стороны) */
.ct-msg--mine .ct-bub {
  background: var(--ct-accent); color: var(--ct-canvas);
  border-radius: 12px 12px 4px 12px;
}
/* группировка серий: тайтовые углы, плотнее */
.ct-msg--cont .ct-bub { border-radius: 6px 12px 12px 4px; }
.ct-msg--cont.ct-msg--mine .ct-bub { border-radius: 12px 6px 4px 12px; }
/* отступ продолжений серии под аватаром в группе */
.ct-msg--g-in.ct-msg--cont { padding-left: 38px; }

/* аватар собеседника в группе */
.ct-msg__ava {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; flex: 0 0 auto;
  align-self: flex-end; margin: 0 8px 2px 0;
  font: 600 11px/1 var(--ct-font); color: #fff;
  user-select: none;
}

.ct-msg__sender { font: 600 12px var(--ct-font); margin-bottom: 1px; }
.ct-msg__body { white-space: pre-wrap; }
.ct-msg__meta {
  display: inline-flex; align-items: center; gap: 4px;
  float: right; margin: 5px -2px 0 10px;
  font: 10.5px var(--ct-font); opacity: 0.6;
}
.ct-msg__meta .ct-edited { font-style: italic; }
/* галочки как в ТГ: разница ✓/✓✓, цвет наследуется от бабла */
.ct-tick { font-size: 11px; letter-spacing: -2px; color: inherit; }
.ct-tick--read { opacity: 1; }

/* подпись пересылки */
.ct-msg__fwd {
  display: flex; align-items: center; gap: 5px;
  font: italic 600 11.5px var(--ct-font); color: var(--ct-accent);
  margin-bottom: 3px;
}
.ct-msg--mine .ct-msg__fwd { color: inherit; opacity: 0.9; }

/* реплай-цитата */
.ct-msg__reply {
  border-left: 3px solid currentColor; opacity: 0.9;
  padding: 2px 8px; margin-bottom: 4px;
  font-size: 12px; border-radius: 4px;
  background: rgba(127, 127, 127, 0.09);
  cursor: pointer;
}
.ct-msg__reply b { display: block; font-size: 11px; font-weight: 600; }
.ct-msg__reply span { opacity: 0.8; }

/* вложения */
.ct-msg__media {
  display: block; max-width: 300px; max-height: 320px; width: 100%;
  object-fit: cover;
  border-radius: 8px; margin: 2px 0 4px; cursor: pointer;
  background: var(--ct-bg);
}
.ct-msg__file {
  display: flex; align-items: center; gap: 8px;
  text-decoration: none; color: inherit;
  border: 1px solid currentColor; border-radius: 8px;
  padding: 8px 10px; margin: 2px 0 4px; opacity: 0.92;
}
.ct-msg__file .ic { display: grid; place-items: center; }
.ct-msg__file .nm { font-size: 12px; }
.ct-msg__file .sz { font-size: 10px; opacity: 0.7; }

/* состояния */
.ct-msg--deleted .ct-bub { font-style: italic; opacity: 0.6; }
.ct-msg--pending .ct-bub { opacity: 0.7; }
.ct-msg--failed .ct-bub { box-shadow: 0 0 0 1px var(--ct-bad); }
.ct-tick--pending { font-size: 10px; letter-spacing: 0; font-style: italic; }
.ct-tick--failed { font-size: 10px; letter-spacing: 0; }
.ct-retry { color: inherit; cursor: pointer; font:600 11px var(--ct-font); margin-left:4px;padding:2px 4px;border:0;background:transparent; text-decoration: underline; text-underline-offset: 2px; }
/* новое сообщение (после первичной загрузки) въезжает снизу */
.ct-msg--in { animation: ct-msg-in 200ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes ct-msg-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* телефон: тред въезжает справа и уезжает обратно (без bounce) */
.ct-root.ct-fullscreen.ct-enter { animation: ct-slide-in 220ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.ct-root.ct-fullscreen.ct-leave { animation: ct-slide-out 200ms cubic-bezier(0.4, 0, 0.6, 1) both; pointer-events: none; }
@keyframes ct-slide-in { from { transform: translateX(40%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ct-slide-out { from { transform: none; opacity: 1; } to { transform: translateX(40%); opacity: 0; } }

/* иконка-ревил свайпа-на-реплай (Очаг) */
.ct-msg__rev {
  position: absolute; right: 8px; top: 50%;
  transform: translateY(-50%) scale(0.5);
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(90, 90, 90, 0.45); color: #fff;
  display: grid; place-items: center;
  opacity: 0; pointer-events: none;
}
.ct-msg--mine .ct-msg__rev { right: auto; left: 8px; }

/* подсветка при прыжке к цитате/поиску */
.ct-flash { animation: ct-flash 1.1s ease; }
@keyframes ct-flash {
  0%, 55% { background: var(--ct-accent-wash); }
  100% { background: transparent; }
}

/* ── режим выделения: чекбокс-кружки + тинт ряда (Очаг) ── */
.ct-root.ct-selmode .ct-msg { padding-left: 34px; cursor: pointer; }
.ct-root.ct-selmode .ct-msg::before {
  content: '';
  position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
  width: 19px; height: 19px; border-radius: 50%;
  border: 2px solid var(--ct-hair);   /* деликатное серое кольцо (не near-black) */
  background: var(--ct-canvas);
  transition: background 0.12s, border-color 0.12s;
}
.ct-root.ct-selmode .ct-msg--sel::before {
  content: '✓';
  border-color: var(--ct-accent); background: var(--ct-accent);
  color: var(--ct-canvas); font: 700 12px/17px var(--ct-font); text-align: center;
}
.ct-root.ct-selmode .ct-msg--sel { background: var(--ct-accent-wash); }
.ct-root.ct-selmode .ct-msg__ava { visibility: hidden; }
.ct-root.ct-selmode .ct-msg__menu-btn { display: none; }

/* ── реакции-пилюли (внутри бабла, как в ТГ) ── */
.ct-reacts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; clear: both; }
.ct-react {
  display: inline-flex; align-items: center; gap: 3px;
  border: 0; border-radius: 999px;
  background: var(--ct-accent-wash); color: var(--ct-ink);
  font: 12.5px var(--ct-font); padding: 3px 9px; cursor: pointer;
  animation: ct-react-in 0.16s ease;
}
.ct-react span { font-size: 10.5px; font-weight: 600; }
.ct-react.mine { background: var(--ct-accent); color: var(--ct-canvas); }
.ct-msg--mine .ct-react { background: rgba(127, 127, 127, 0.28); color: inherit; }
.ct-msg--mine .ct-react.mine { background: var(--ct-canvas); color: var(--ct-accent); }
@keyframes ct-react-in { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* дивайдер «непрочитанные» — лента во всю ширину (ТГ) */
.ct-unread {
  align-self: stretch; text-align: center;
  margin: 8px -12px 6px; padding: 4px 0;
  background: rgba(70, 70, 70, 0.18);
  color: var(--ct-ink);
  font: 600 11.5px var(--ct-font);
}
.ct-unread span { opacity: 0.85; }

/* FAB «вниз» + счётчик (Очаг) */
.ct-fab {
  position: absolute; right: 14px; bottom: 86px; z-index: 5;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--ct-hair);
  background: var(--ct-canvas); color: var(--ct-ink);
  font-size: 16px; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
  display: none; place-items: center;
}
.ct-fab.show { display: grid; animation: ct-fab-in 0.18s ease; }
.ct-fab__n {
  position: absolute; top: -6px; right: -4px;
  min-width: 17px; height: 17px; border-radius: 9px; padding: 0 4px;
  background: var(--ct-accent); color: var(--ct-canvas);
  font: 600 10px/17px var(--ct-font); text-align: center;
}
@keyframes ct-fab-in { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }

/* меню действий над сообщением */
.ct-msg__menu-btn {
  align-self: center;
  border: 0; background: transparent; cursor: pointer;
  color: var(--ct-mute); opacity: 0; font-size: 15px; line-height: 1;
  padding: 0; transition: opacity 0.12s, background-color 0.12s;
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
}
.ct-msg:hover .ct-msg__menu-btn { opacity: 0.8; }
.ct-msg__menu-btn:focus-visible{opacity:1}
@media (hover: none), (max-width: 720px) {
  .ct-msg__menu-btn { opacity: 0.72; }
}
.ct-menu {
  position: fixed; z-index: 70; min-width: 176px;
  background: var(--bg-canvas, var(--t-canvas, #fff));
  border: 1px solid var(--hair, var(--t-hair, #e2ddd2));
  border-radius: 12px; box-shadow: 0 10px 34px rgba(0, 0, 0, 0.22);
  padding: 5px; display: none;
  animation: ct-menu-in 0.14s ease;
}
.ct-menu.open { display: block; }
@keyframes ct-menu-in { from { transform: scale(0.92); opacity: 0; } to { transform: none; opacity: 1; } }
.ct-menu button {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  border: 0; background: transparent; cursor: pointer;
  font: 13px var(--font-body, var(--t-font-body, sans-serif));
  color: var(--ink, var(--t-ink, #222)); min-height: 44px;
  padding: 8px 12px; border-radius: 8px;
}
.ct-menu button:hover { background: var(--accent-wash, var(--t-accent-wash, #eef2fa)); }
.ct-menu button.danger { color: var(--garnet, var(--t-bad, #b53a3a)); }
.ct-menu__reacts {
  display: flex; gap: 2px; padding: 2px 4px 6px;
  border-bottom: 1px solid var(--hair-soft, var(--t-hair-soft, #eee)); margin-bottom: 4px;
}
.ct-menu__reacts button {
  width: 44px; min-width: 44px; height: 44px; padding: 0 !important; justify-content: center;
  font-size: 17px !important; border-radius: 8px;
}

/* ── строка-контекст реплая ── */
.ct-replybar {
  display: none; align-items: center; gap: 10px;
  padding: 8px 12px; border-top: 1px solid var(--ct-hair);
  background: var(--ct-canvas); font-size: 12px; color: var(--ct-mute);
  flex: 0 0 auto;
}
.ct-replybar.open { display: flex; }
.ct-replybar .txt { flex: 1; border-left: 3px solid var(--ct-accent); padding-left: 8px; min-width: 0; }
.ct-replybar .txt b { display: block; color: var(--ct-accent); font-size: 11px; }
.ct-replybar button { border: 0; background: transparent; cursor: pointer; font-size: 16px; color: var(--ct-mute); width: 44px; height: 44px; display: grid; place-items: center; }
.ct-replybar.ct-editmode .txt { border-left-color: var(--amber, var(--t-warn, #b98a2e)); }
.ct-replybar.ct-editmode .txt b { color: var(--amber, var(--t-warn, #b98a2e)); }

/* ── композер (ТГ: скрепка · поле-пилюля · круглая отправка) ── */
.ct-input {
  display: grid; grid-template-columns: auto 1fr auto; gap: 8px;
  align-items: end;
  padding: 9px 10px; border-top: 1px solid var(--ct-hair);
  background: var(--ct-canvas);
  flex: 0 0 auto;
}
.ct-input__attach {
  border: 0; background: transparent; color: var(--ct-mute);
  cursor: pointer; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
}
.ct-input__attach:hover { background: var(--ct-bg); color: var(--ct-ink); }
.ct-input__send {
  border: 0; background: var(--ct-accent); color: var(--ct-canvas);
  border-radius: 50%; cursor: pointer;
  width: 46px; height: 46px; display: grid; place-items: center;
  padding-left: 2px;
  transition: transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 160ms ease;
}
/* пустое поле — кнопка «спит»; появление текста оживляет её */
.ct-input__send--idle { opacity: 0.45; transform: scale(0.9); }
.ct-input__send:disabled { opacity: 0.45; cursor: default; }
.ct-input textarea {
  min-height: 46px; max-height: 130px; resize: none;
  border: 1px solid var(--ct-hair); border-radius: 23px;
  padding: 11px 15px; background: var(--ct-bg); color: var(--ct-ink);
  font: 13.5px/1.4 var(--ct-font);
}
.ct-input textarea:focus { outline: none; border-color: var(--ct-accent); }
.ct-input input[type=file] { display: none; }
.ct-input__send.pop { animation: ct-send-pop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes ct-send-pop { 0% { transform: scale(0.72); } 100% { transform: scale(1); } }

/* typing: 3 точки (Очаг) */
.ct-typing {
  align-self: flex-start; margin: 2px 4px;
  font: 12px var(--ct-font); color: var(--ct-mute);
  display: flex; align-items: center; gap: 6px;
}
.ct-typing__dots { display: inline-flex; gap: 3px; }
.ct-typing__dots i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--ct-mute);
  animation: ct-dot 1.1s infinite ease-in-out;
}
.ct-typing__dots i:nth-child(2) { animation-delay: 0.15s; }
.ct-typing__dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes ct-dot { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(-3px); } }

.ct-empty {
  margin: auto; text-align: center;
  font: 13px var(--ct-font); color: var(--ct-mute);
}
.ct-empty::first-line { font-size: 13px; }

/* ссылки в сообщениях */
.ct-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ct-msg:not(.ct-msg--mine) .ct-link { color: var(--ct-accent); }

/* ── поиск по сообщениям ── */
.ct-searchbar {
  display: none; position: relative; align-items: center; gap: 8px;
  padding: 8px 12px; border-top: 1px solid var(--ct-hair);
  background: var(--ct-canvas);
  flex: 0 0 auto;
}
.ct-searchbar.open { display: flex; }
.ct-searchbar input {
  flex: 1; height: 44px; border: 1px solid var(--ct-hair); border-radius: 22px;
  padding: 0 13px; background: var(--ct-bg); color: var(--ct-ink); font: 13px var(--ct-font);
}
.ct-search-close { border: 0; background: transparent; cursor: pointer; font-size: 17px; color: var(--ct-mute); width: 44px; height: 44px; display: grid; place-items: center; }
.ct-search-res {
  position: absolute; bottom: calc(100% + 4px); left: 8px; right: 8px; z-index: 8;
  background: var(--ct-canvas); border: 1px solid var(--ct-hair);
  border-radius: 12px; box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.12);
  max-height: 260px; overflow-y: auto;
}
.ct-search-res:empty { display: none; }
.ct-search-res button {
  display: block; width: 100%; text-align: left; border: 0; background: transparent;
  cursor: pointer; min-height: 44px; padding: 8px 12px; border-bottom: 1px solid var(--ct-hair-soft);
}
.ct-search-res button:hover { background: var(--ct-accent-wash); }
.ct-search-res .t { display: block; font: 600 10px var(--ct-font); color: var(--ct-accent); }
.ct-search-res .b { display: block; font: 12.5px var(--ct-font); color: var(--ct-ink); margin-top: 2px; }
.ct-search-empty { padding: 10px 12px; font: 12px var(--ct-font); color: var(--ct-mute); }

/* ── оверлеи внутри треда: пересылка и подтверждение удаления ── */
.ct-overlay {
  position: absolute; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20, 18, 14, 0.42);
  padding: 18px;
}
.ct-overlay[hidden] { display: none; }
.ct-card {
  background: var(--ct-canvas); border-radius: 14px;
  box-shadow: 0 12px 44px rgba(0, 0, 0, 0.26);
  width: min(340px, 100%);
  padding: 14px 16px;
  animation: ct-menu-in 0.16s ease;
}
.ct-card__h {
  display: flex; align-items: center; justify-content: space-between;
  font: 600 15px var(--ct-font); color: var(--ct-ink);
  margin-bottom: 10px;
}
.ct-card__h h2 { margin: 0; font: inherit; color: inherit; }
.ct-card__h button { border: 0; background: transparent; cursor: pointer; color: var(--ct-mute); padding: 0; width: 44px; height: 44px; display: grid; place-items: center; }
.ct-card__t { font: 13.5px/1.45 var(--ct-font); color: var(--ct-ink); margin: 4px 0 14px; }
.ct-card__btns { display: flex; gap: 8px; justify-content: flex-end; }
.ct-card__btns button {
  border: 0; cursor: pointer; border-radius: 9px;
  font: 600 13px var(--ct-font); min-height: 44px; padding: 8px 14px;
}
.ct-card__btns .ghost { background: transparent; color: var(--ct-accent); }
.ct-card__btns .ghost:hover { background: var(--ct-accent-wash); }
.ct-card__btns .danger { background: var(--ct-bad); color: #fff; }

.ct-fwd__list { max-height: 320px; overflow-y: auto; margin: 0 -6px; }
.ct-fwd__list button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  border: 0; background: transparent; cursor: pointer;
  min-height: 44px; padding: 7px 8px; border-radius: 10px; text-align: left;
}
.ct-fwd__list button:hover { background: var(--ct-accent-wash); }
.ct-fwd__list button:disabled { opacity: 0.5; }
.ct-fwd__ava {
  width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center;
  font: 600 12px/1 var(--ct-font); color: #fff;
}
.ct-fwd__nm { font: 500 13.5px var(--ct-font); color: var(--ct-ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-fwd__nm i { font-style: normal; color: var(--ct-mute); font-size: 11.5px; }

/* ── лайтбокс фото ── */
.ct-lightbox {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(14, 12, 10, 0.93);
  display: flex; align-items: center; justify-content: center;
}
.ct-lightbox[hidden] { display: none; }
.ct-lightbox img {
  max-width: 94vw; max-height: 88vh;
  border-radius: 6px;
  box-shadow: 0 10px 60px rgba(0, 0, 0, 0.5);
}
.ct-lightbox__top {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
}
.ct-lightbox__n { font: 600 13px var(--ct-font, sans-serif); color: rgba(255, 255, 255, 0.8); }
.ct-lightbox__close {
  border: 0; background: rgba(255, 255, 255, 0.12); color: #fff; cursor: pointer;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
}
.ct-lightbox__prev, .ct-lightbox__next {
  position: absolute; top: 50%; transform: translateY(-50%);
  border: 0; background: rgba(0, 0, 0, 0.4); color: #fff; cursor: pointer;
  width: 44px; height: 44px; border-radius: 50%;
  font: 300 26px/1 sans-serif; padding-bottom: 4px;
}
.ct-lightbox__prev { left: 12px; }
.ct-lightbox__next { right: 12px; }

/* ── пикер «Написать»: оверлей (ПК — диалог, телефон — шит снизу) ── */
.ct-cpick {
  position: fixed; inset: 0; z-index: 95;
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
  background: rgba(20, 18, 14, 0);
  transition: background 200ms ease;
  font-family: var(--ct-font);
}
.ct-cpick.open { background: rgba(20, 18, 14, 0.42); }
.ct-cpick__card {
  background: var(--ct-canvas); color: var(--ct-ink);
  border-radius: 14px; box-shadow: 0 12px 44px rgba(0, 0, 0, 0.26);
  width: min(460px, 100%); max-height: min(80vh, 640px);
  display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; transform: translateY(10px) scale(0.98);
  transition: opacity 180ms ease, transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ct-cpick.open .ct-cpick__card { opacity: 1; transform: none; }
.ct-cpick__head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 8px 8px 18px; border-bottom: 1px solid var(--ct-hair); flex: 0 0 auto;
}
.ct-cpick__head h2 { margin: 0; font: 600 16px/1.2 var(--ct-font); color: var(--ct-ink); }
.ct-cpick__close {
  border: 0; background: transparent; color: var(--ct-mute); cursor: pointer;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
}
.ct-cpick__close:hover { background: var(--ct-bg); color: var(--ct-ink); }
.ct-cpick__panel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

/* панель контактов (общая для оверлея и модалки преподавателя) */
.ct-cp { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; font-family: var(--ct-font); }
.ct-cp__controls { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 14px 6px; flex: 0 0 auto; }
.ct-cp__field { display: flex; flex-direction: column; gap: 4px; flex: 1 1 150px; min-width: 0; font: 11px var(--ct-font); color: var(--ct-mute); }
.ct-cp__select {
  height: 44px; border: 1px solid var(--ct-hair); border-radius: 10px; padding: 0 10px;
  background: var(--ct-canvas); color: var(--ct-ink); font: 13.5px var(--ct-font);
}
.ct-cp__search {
  display: flex; align-items: center; gap: 8px; flex: 1 1 200px; min-width: 0;
  height: 46px; border: 1px solid var(--ct-hair); border-radius: 23px; padding: 0 14px;
  background: var(--ct-bg); color: var(--ct-mute); align-self: flex-end;
}
.ct-cp__search:focus-within { border-color: var(--ct-accent); }
/* поле занимает всю высоту пилюли — цель касания ≥44px */
.ct-cp__search input { flex: 1; min-width: 0; height: 44px; border: 0; background: transparent; outline: none; color: var(--ct-ink); font: 13.5px var(--ct-font); }
.ct-cp__hint { margin: 0 14px 8px; font: 12px/1.4 var(--ct-font); color: var(--ct-mute); }
.ct-cp__status {
  margin: 0 14px 8px; padding: 10px 12px;
  border: 1px solid var(--ct-bad); border-radius: 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font: 12.5px/1.4 var(--ct-font); color: var(--ct-ink);
}
.ct-cp__status[hidden] { display: none; }
.ct-cp__status button {
  flex: 0 0 auto; min-height: 40px; padding: 0 12px; cursor: pointer;
  border: 1px solid var(--ct-bad); border-radius: 9px; background: transparent;
  color: var(--ct-bad); font: 600 12.5px var(--ct-font);
}
.ct-cp__list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 0 8px; }
.ct-cp__group-h {
  position: sticky; top: 0; z-index: 1;
  padding: 10px 14px 4px; background: var(--ct-canvas);
  font: 600 11px/1.3 var(--ct-font); color: var(--ct-mute); letter-spacing: 0.02em;
}
.ct-cp__row {
  position: relative; display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 56px; padding: 8px 14px;
  border: 0; border-radius: 0; background: transparent; color: inherit;
  font: inherit; text-align: left; cursor: pointer;
}
.ct-cp__row::after { content: ''; position: absolute; left: 66px; right: 0; bottom: 0; height: 1px; background: var(--ct-hair-soft); }
.ct-cp__row:hover { background: var(--ct-bg); }
.ct-cp__row:focus-visible { outline: 2px solid var(--ct-accent); outline-offset: -2px; }
.ct-cp__row:disabled { opacity: 0.55; cursor: default; }
.ct-cp__ava {
  width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; font: 600 14px/1 var(--ct-font); color: #fff;
}
.ct-cp__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ct-cp__name { font: 600 14px/1.3 var(--ct-font); color: var(--ct-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-cp__sub { font: 12px/1.3 var(--ct-font); color: var(--ct-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-cp__tag {
  flex: 0 0 auto; font: 600 10.5px var(--ct-font); color: var(--ct-accent);
  background: var(--ct-accent-wash); border-radius: 999px; padding: 3px 8px;
}
.ct-cp__empty { margin: 28px 14px; text-align: center; font: 13px/1.5 var(--ct-font); color: var(--ct-mute); }
@media (max-width: 720px) {
  .ct-cpick { align-items: flex-end; padding: 0; }
  .ct-cpick__card {
    width: 100%; height: 86vh; max-height: 90vh;
    border-radius: 18px 18px 0 0;
    opacity: 1; transform: translateY(100%);
    transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .ct-cpick.open .ct-cpick__card { transform: none; }
}

/* ── reduced motion: все анимации треда и пикера выключены ── */
@media (prefers-reduced-motion: reduce) {
  .ct-root.ct-fullscreen.ct-enter, .ct-root.ct-fullscreen.ct-leave, .ct-msg--in,
  .ct-react, .ct-menu, .ct-card, .ct-fab.show, .ct-input__send.pop, .ct-flash { animation: none !important; }
  .ct-input__send, .ct-cpick, .ct-cpick__card, .ct-toast, .ct-msg, .ct-msg__menu-btn { transition: none !important; }
}

/* ── внутренний тост ── */
.ct-toast {
  position: absolute; bottom: 76px; left: 50%; transform: translateX(-50%) translateY(6px);
  z-index: 45;
  background: rgba(26, 23, 20, 0.86); color: #fff;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  border-radius: 999px; padding: 8px 16px;
  font: 600 12.5px var(--ct-font);
  opacity: 0; transition: opacity 0.18s, transform 0.18s;
  pointer-events: none; max-width:calc(100vw - 32px); white-space:normal; text-align:center;
}
.ct-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }