/* ═══════════════════════════════════════════════════════════════════════════
   ПЕРЕПИСКА С ТРЕНЕРОМ — новый экран мини-аппа.
   Всё в токенах приложения (app.css): --font, --neutral-bg, --brand-strong,
   --content-strong/subtle, --positive, --r-*. Префикс классов cch-.
   Переносится в api/app/static/miniapp-v2/app.css целиком.
   ═══════════════════════════════════════════════════════════════════════════ */

.cch { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column;
  background: var(--neutral-bg); overflow: hidden; overscroll-behavior: none; }

/* ─── Шапка ─────────────────────────────────────────────────────────────── */
.cch-head { flex: 0 0 auto; display: flex; align-items: center; gap: 11px;
  padding: 10px 14px 10px 8px; background: rgba(255,247,253,.82);
  backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: 0 1px 0 rgba(12,14,18,.06); position: relative; z-index: 3; }
.cch-back { width: 38px; height: 38px; flex: 0 0 auto; border: 0; background: transparent;
  cursor: pointer; display: grid; place-items: center; border-radius: 50%; color: var(--content-strong);
  transition: background .15s ease, transform .12s ease; }
.cch-back:active { transform: scale(.92); background: rgba(12,14,18,.06); }
.cch-back svg { width: 22px; height: 22px; }
.cch-who { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto;
  border: 0; background: transparent; padding: 0; cursor: pointer; text-align: left; }
.cch-who__av { position: relative; width: 38px; height: 38px; flex: 0 0 auto; }
.cch-who__av img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; display: block;
  box-shadow: 0 0 0 1.5px rgba(255,255,255,.9), 0 1px 3px rgba(20,4,12,.16); }
.cch-who__dot { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px;
  border-radius: 50%; background: var(--positive); box-shadow: 0 0 0 2.5px var(--neutral-bg); }
.cch-who__b { min-width: 0; }
/* display:block обязателен: это span'ы, и без него имя и статус слипаются
   в одну строку без пробела. */
.cch-who__n { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.3px; line-height: 1.2;
  color: var(--content-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cch-who__s { display: block; font-size: 11.5px; line-height: 1.35; color: rgba(12,14,18,.62); margin-top: 1px;
  white-space: normal; overflow: hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.cch-who__s b { color: #4a8f1f; font-weight: 500; }

/* ─── Лента ─────────────────────────────────────────────────────────────── */
.cch-feed { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior-y: contain;
  padding: 12px 14px 8px; display: flex; flex-direction: column; gap: 3px; }
.cch-feed::-webkit-scrollbar { display: none; }

.cch-day { align-self: center; margin: 10px 0 8px; padding: 5px 12px; border-radius: 999px;
  background: rgba(29,2,12,.055); color: rgba(29,2,12,.5);
  font-size: 11px; font-weight: 500; letter-spacing: -.1px; }

/* Сообщение. gap 3px между соседними своими, 12px на смене автора — группировка
   читается без аватара у каждого пузыря. */
.cch-row { display: flex; align-items: flex-end; gap: 8px; max-width: 100%;
  animation: cchIn .34s cubic-bezier(.22,1,.36,1) both; }
.cch-row--me { flex-direction: row-reverse; }
.cch-row--turn { margin-top: 9px; }
.cch-row__av { width: 28px; height: 28px; flex: 0 0 auto; border-radius: 50%; object-fit: cover;
  object-position: 50% 12%; box-shadow: 0 0 0 1.5px rgba(255,255,255,.9); }
.cch-row__av--ghost { visibility: hidden; }

.cch-bub { position: relative; max-width: 268px; min-width: 62px; padding: 9px 12px 7px;
  border-radius: 18px; font-size: 14.5px; line-height: 1.38; letter-spacing: -.16px;
  word-break: break-word; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.cch-row:not(.cch-row--me) .cch-bub { background: #fff; color: var(--content-strong);
  border-bottom-left-radius: 7px;
  box-shadow: 0 4px 14px rgba(20,4,12,.06), inset 0 0 0 1px rgba(12,14,18,.035); }
.cch-row--me .cch-bub { background: linear-gradient(158deg, #37131f 0%, #1d020c 72%);
  color: #fff; border-bottom-right-radius: 7px;
  box-shadow: 0 6px 18px rgba(20,4,12,.20); }
/* Внутри группы хвостик только у последнего пузыря. */
.cch-row.is-mid:not(.cch-row--me) .cch-bub { border-bottom-left-radius: 18px; }
.cch-row.is-mid.cch-row--me .cch-bub { border-bottom-right-radius: 18px; }

.cch-bub__meta { display: flex; align-items: center; justify-content: flex-end; gap: 4px;
  margin-top: 3px; font-size: 10.5px; line-height: 1; font-variant-numeric: tabular-nums;
  color: rgba(12,14,18,.38); }
.cch-row--me .cch-bub__meta { color: rgba(255,255,255,.5); }
.cch-tick { width: 15px; height: 11px; display: block; position: relative; }
.cch-tick svg { position: absolute; inset: 0; width: 15px; height: 11px;
  opacity: 0; transform: scale(.7); transition: opacity .18s ease, transform .18s cubic-bezier(.22,1,.36,1); }
.cch-tick[data-s="sent"] .t-sent,
.cch-tick[data-s="got"] .t-got,
.cch-tick[data-s="read"] .t-read { opacity: 1; transform: none; }
.cch-tick[data-s="read"] .t-read { color: #7fc4ff; }

/* ─── Голосовое ─────────────────────────────────────────────────────────── */
.cch-voice { display: flex; align-items: center; gap: 10px; min-width: 218px; padding: 2px 0 1px; }
.cch-play { width: 36px; height: 36px; flex: 0 0 auto; border: 0; cursor: pointer; border-radius: 50%;
  display: grid; place-items: center; transition: transform .12s ease, background .2s ease; }
.cch-play:active { transform: scale(.9); }
.cch-row:not(.cch-row--me) .cch-play { background: var(--brand-strong); color: #fff; }
.cch-row--me .cch-play { background: rgba(255,255,255,.92); color: var(--brand-strong); }
.cch-play svg { width: 15px; height: 15px; display: block; }
.cch-play .ic-pause { display: none; }
.cch-play.is-on .ic-play { display: none; }
.cch-play.is-on .ic-pause { display: block; }

.cch-wave { position:relative; flex: 1 1 auto; min-width: 0; height: 26px; display: flex; align-items: center; gap: 2px;
  cursor: pointer; }
.cch-wave input[type=range]{position:absolute;left:0;right:0;top:50%;width:100%;height:44px;transform:translateY(-50%);opacity:.001;cursor:pointer}
.cch-play,.cch-speed,.cch-tr{position:relative}.cch-play::after,.cch-speed::after,.cch-tr::after{content:"";position:absolute;inset:50% auto auto 50%;width:44px;height:44px;transform:translate(-50%,-50%)}
.cch-wave i { flex: 1 1 auto; border-radius: 999px; transition: background .12s linear; }
.cch-row:not(.cch-row--me) .cch-wave i { background: rgba(29,2,12,.16); }
.cch-row:not(.cch-row--me) .cch-wave i.on { background: var(--brand-strong); }
.cch-row--me .cch-wave i { background: rgba(255,255,255,.28); }
.cch-row--me .cch-wave i.on { background: #fff; }

.cch-voice__r { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.cch-dur { font-size: 11px; font-variant-numeric: tabular-nums; letter-spacing: -.1px;
  color: rgba(12,14,18,.45); }
.cch-row--me .cch-dur { color: rgba(255,255,255,.55); }
/* Скорость. Цикл 1× → 1,5× → 2× → 3×. Пружинка на нажатии — чтобы попадание
   считывалось без подсветки, палец всё равно закрывает чип. */
.cch-speed { border: 0; cursor: pointer; font-family: var(--font); font-weight: 700;
  font-size: 10.5px; letter-spacing: -.2px; line-height: 1; padding: 4px 6px; border-radius: 7px;
  font-variant-numeric: tabular-nums; transition: transform .16s cubic-bezier(.3,1.4,.5,1), background .2s ease; }
.cch-row:not(.cch-row--me) .cch-speed { background: rgba(29,2,12,.07); color: rgba(29,2,12,.62); }
.cch-row--me .cch-speed { background: rgba(255,255,255,.18); color: rgba(255,255,255,.85); }
/* Специфичность здесь не косметика: правила тона выше идут через .cch-row,
   и без такого же веса ускоренный чип не подсвечивался бы вовсе. */
.cch-row:not(.cch-row--me) .cch-speed.is-fast,
.cch-row--me .cch-speed.is-fast { background: var(--positive); color: #1d020c; }
.cch-speed.bump { transform: scale(1.22); }
/* Непрослушанное голосовое от тренера: точка рядом с длительностью, а не в углу
   пузыря — в углу она налезала на саму длительность. */
.cch-dur { display: inline-flex; align-items: center; gap: 5px; }
.cch-new { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
  background: linear-gradient(180deg, #ff4b42, #e01423); box-shadow: 0 1px 4px rgba(210,20,35,.5); }

/* ─── Фото и видео ──────────────────────────────────────────────────────── */
.cch-bub--media { padding: 4px 4px 6px; }
.cch-media { display: grid; gap: 3px; border-radius: 15px; overflow: hidden; }
.cch-media--2 { grid-template-columns: 1fr 1fr; }
.cch-media--3 { grid-template-columns: 1fr 1fr; }
.cch-media--3 button:first-child { grid-row: span 2; }
.cch-media button { position: relative; border: 0; padding: 0; cursor: pointer; background: #eceaec;
  overflow: hidden; display: block; }
.cch-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cch-media--1 img { max-height: 260px; }
.cch-media--2 img, .cch-media--3 img { height: 104px; }
.cch-media--3 button:first-child img { height: 211px; }
.cch-media__more { position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(12,4,8,.5); color: #fff; font-size: 17px; font-weight: 600;
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.cch-play__over { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.cch-play__over span { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(12,4,8,.42); color: #fff;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }
.cch-play__over svg { width: 17px; height: 17px; margin-left: 2px; }
.cch-vlen { position: absolute; left: 8px; bottom: 8px; padding: 3px 7px; border-radius: 7px;
  background: rgba(12,4,8,.5); color: #fff; font-size: 10.5px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
/* Прогресс отправки вложения */
.cch-up { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(12,4,8,.42); }
.cch-up svg { width: 40px; height: 40px; transform: rotate(-90deg); }
.cch-up circle { fill: none; stroke-width: 3; }
.cch-up .bg { stroke: rgba(255,255,255,.3); }
.cch-up .fg { stroke: #fff; stroke-linecap: round; transition: stroke-dashoffset .2s linear; }

/* ─── Карточка разбора техники (наш домен, не мессенджерный тип) ─────────── */
.cch-check { display: flex; gap: 10px; align-items: center; width: 244px; margin: 1px 0 2px;
  border: 0; padding: 0; background: transparent; cursor: pointer; text-align: left; }
.cch-check__m { position: relative; width: 54px; height: 54px; flex: 0 0 auto; border-radius: 13px;
  overflow: hidden; background: #eceaec; }
.cch-check__m img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cch-check__b { min-width: 0; display: block; }
.cch-check__t { display: block; font-size: 13.5px; font-weight: 600; letter-spacing: -.2px; line-height: 1.25; }
.cch-check__s { display: block; font-size: 11.5px; line-height: 1.35; margin-top: 3px; opacity: .6;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cch-check__m .cch-play__over span { width: 30px; height: 30px; }
.cch-check__m .cch-play__over svg { width: 11px; height: 11px; }
.cch-chip { display: inline-flex; align-items: center; gap: 4px; margin-top: 5px; padding: 3px 8px;
  border-radius: 999px; font-size: 10.5px; font-weight: 600; letter-spacing: -.1px; }
.cch-chip--attn { background: #fdeee2; color: #a1560f; }
.cch-chip--ok { background: #eaf5d8; color: #4a7211; }

/* ─── Системная строка ──────────────────────────────────────────────────── */
.cch-sys { align-self: center; max-width: 280px; margin: 8px 0; padding: 8px 13px; border-radius: 13px;
  background: rgba(29,2,12,.045); color: rgba(29,2,12,.55);
  font-size: 11.5px; line-height: 1.45; text-align: center; }

/* ─── «Тренер печатает» ─────────────────────────────────────────────────── */
.cch-typing { display: flex; align-items: center; gap: 8px; margin-top: 9px;
  animation: cchIn .3s cubic-bezier(.22,1,.36,1) both; }
.cch-typing__b { display: flex; align-items: center; gap: 4px; padding: 13px 14px; background: #fff;
  border-radius: 18px 18px 18px 7px;
  box-shadow: 0 4px 14px rgba(20,4,12,.06), inset 0 0 0 1px rgba(12,14,18,.035); }
.cch-typing__b i { width: 6px; height: 6px; border-radius: 50%; background: rgba(29,2,12,.28);
  animation: cchDot 1.25s infinite; }
.cch-typing__b i:nth-child(2) { animation-delay: .16s; }
.cch-typing__b i:nth-child(3) { animation-delay: .32s; }

/* ─── Кнопка «вниз» ─────────────────────────────────────────────────────── */
.cch-down { position: absolute; right: 14px; bottom: 96px; z-index: 4; width: 42px; height: 42px;
  border: 0; cursor: pointer; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.9); color: var(--content-strong);
  backdrop-filter: blur(18px) saturate(170%); -webkit-backdrop-filter: blur(18px) saturate(170%);
  box-shadow: inset 0 0 0 1px rgba(12,14,18,.06), 0 6px 18px rgba(20,4,12,.14);
  opacity: 0; transform: translateY(10px) scale(.9); pointer-events: none;
  transition: opacity .2s ease, transform .24s cubic-bezier(.22,1,.36,1); }
.cch-down.on { opacity: 1; transform: none; pointer-events: auto; }
.cch-down svg { width: 19px; height: 19px; }
.cch-down b { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px;
  display: grid; place-items: center; border-radius: 999px; color: #fff; font-size: 10px; font-weight: 700;
  background: linear-gradient(180deg, #ff4b42, #e01423);
  box-shadow: 0 0 0 2px var(--neutral-bg), 0 2px 6px rgba(210,20,35,.4); }

/* ─── Композер ──────────────────────────────────────────────────────────── */
.cch-bar { flex: 0 0 auto; position: relative; z-index: 3;
  padding: 8px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,247,253,.9);
  backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: 0 -1px 0 rgba(12,14,18,.06); }
.cch-bar__in { display: flex; align-items: flex-end; gap: 8px; }
.cch-ico { width: 40px; height: 40px; flex: 0 0 auto; border: 0; cursor: pointer; border-radius: 50%;
  display: grid; place-items: center; background: rgba(29,2,12,.06); color: var(--content-strong);
  transition: transform .14s cubic-bezier(.3,1.3,.5,1), background .2s ease; }
.cch-ico:active { transform: scale(.9); }
.cch-ico svg { width: 21px; height: 21px; }
.cch-ico.is-open { transform: rotate(45deg); background: rgba(29,2,12,.11); }

.cch-input { flex: 1 1 auto; min-width: 0; display: flex; align-items: flex-end;
  background: #fff; border-radius: 21px; padding: 0 6px 0 14px;
  box-shadow: inset 0 0 0 1px rgba(12,14,18,.07); }
.cch-input textarea { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; resize: none;
  background: transparent; font: 400 14.5px/1.35 var(--font); letter-spacing: -.16px;
  color: var(--content-strong); padding: 11px 0 10px; max-height: 96px; overflow-y:auto; white-space:pre-wrap; overflow-wrap:anywhere; }
.cch-input textarea::placeholder { color: rgba(12,14,18,.35); }
.cch-pending--voice{position:relative;flex:1 0 100%;min-width:0;margin:0 0 7px;padding:8px 48px 8px 10px;border-radius:18px;background:#fff;box-shadow:inset 0 0 0 1px rgba(12,14,18,.07),0 4px 14px rgba(20,4,12,.05)}
.cch-pending--voice .cch-voice{width:100%;min-width:0;gap:9px;color:var(--content-strong)}.cch-pending--voice .cch-play{background:var(--brand-strong);color:#fff}.cch-pending--voice .cch-wave i{background:rgba(29,2,12,.16)}.cch-pending--voice .cch-wave i.on{background:var(--brand-strong)}.cch-pending--voice .cch-dur{color:rgba(12,14,18,.52)}.cch-pending--voice .cch-speed{background:rgba(29,2,12,.07);color:rgba(29,2,12,.68)}.cch-pending--voice .cch-pending__remove{position:absolute;right:2px;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;background:transparent;color:#3a0c22;font:500 22px/1 var(--font)}
.cch-menu__rx{max-width:calc(100vw - 28px);overflow-x:auto;scrollbar-width:none}.cch-menu__rx::-webkit-scrollbar{display:none}.cch-menu__rx button{min-width:44px;min-height:44px}
.cch-back,.cch-ico,.cch-act button,.cch-replybar button,.cch-rec__stop{position:relative}
.cch-back::after{content:"";position:absolute;inset:-3px}.cch-ico::after,.cch-act button::after{content:"";position:absolute;inset:-2px}.cch-replybar button::after,.cch-rec__stop::after{content:"";position:absolute;inset:-7px}

/* Микрофон и «отправить» — один слот, морф вместо двух кнопок. */
.cch-act { position: relative; width: 40px; height: 40px; flex: 0 0 auto; }
.cch-act button { position: absolute; inset: 0; border: 0; cursor: pointer; border-radius: 50%;
  display: grid; place-items: center;
  transition: opacity .16s ease, transform .24s cubic-bezier(.3,1.35,.5,1); }
.cch-act svg { width: 20px; height: 20px; }
.cch-mic { background: rgba(29,2,12,.06); color: var(--content-strong); }
.cch-send { background: linear-gradient(158deg, #37131f, #1d020c); color: #fff;
  box-shadow: 0 4px 14px rgba(20,4,12,.25); opacity: 0; transform: scale(.5) rotate(-25deg); pointer-events:none; }
.cch-act.is-send .cch-mic { opacity: 0; transform: scale(.5) rotate(25deg); pointer-events: none; }
.cch-act.is-send .cch-send { opacity: 1; transform: none; pointer-events: auto; }
.cch-send:active { transform: scale(.9); }

/* Запись голосового */
.cch-rec { position: absolute; inset: 8px 12px calc(10px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 8px; padding: 0 5px 0 13px; height: 40px;
  background: #fff; border-radius: 21px; box-shadow: inset 0 0 0 1px rgba(12,14,18,.07);
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity .18s ease, transform .22s cubic-bezier(.22,1,.36,1); }
.cch-rec.on { opacity: 1; transform: none; pointer-events: auto; }
.cch-rec__dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
  background: linear-gradient(180deg, #ff4b42, #e01423); animation: cchPulse 1.1s infinite; }
.cch-rec__t { font: 600 13px/1 var(--font); font-variant-numeric: tabular-nums; flex: 0 0 auto;
  color: var(--content-strong); }
.cch-rec__w { flex: 1 1 auto; min-width: 0; height: 22px; display: flex; align-items: center; gap: 2px; }
.cch-rec__w i { flex: 1 1 auto; border-radius: 999px; background: rgba(29,2,12,.22); }
.cch-rec__hint { flex: 0 1 auto; max-width: 112px; font-size: 11.5px; line-height: 1.05;
  color: rgba(12,14,18,.62); white-space: normal; text-align: center; }
.cch-rec__stop { width: 32px; height: 32px; flex: 0 0 auto; border: 0; cursor: pointer; border-radius: 50%;
  display: grid; place-items: center; background: linear-gradient(158deg, #37131f, #1d020c); color: #fff; }
.cch-rec__stop svg { width: 13px; height: 13px; }

/* ─── Шторка вложений ───────────────────────────────────────────────────── */
.cch-dim { position: absolute; inset: 0; z-index: 6; background: rgba(20,4,12,.28);
  opacity: 0; pointer-events: none; transition: opacity .24s ease; }
.cch-dim.on { opacity: 1; pointer-events: auto; }
.cch-att { position: absolute; left: 0; right: 0; bottom: 0; z-index: 7;
  padding: 10px 14px calc(16px + env(safe-area-inset-bottom));
  background: var(--neutral-bg); border-radius: 26px 26px 0 0;
  box-shadow: 0 -14px 40px rgba(20,4,12,.2);
  transform: translate3d(0,102%,0); will-change: transform;
  transition: transform .38s cubic-bezier(.22,1,.36,1); }
.cch-att.on { transform: none; }
.cch-att__g { width: 38px; height: 4px; border-radius: 999px; background: rgba(29,2,12,.14);
  margin: 2px auto 12px; }
.cch-att__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.cch-att__row button { border: 0; cursor: pointer; background: #fff; border-radius: 18px;
  padding: 15px 8px 13px; display: grid; justify-items: center; gap: 8px; font-family: var(--font);
  font-size: 12px; font-weight: 500; color: var(--content-strong);
  box-shadow: 0 6px 18px rgba(20,4,12,.06), inset 0 0 0 1px rgba(12,14,18,.04);
  transition: transform .14s cubic-bezier(.3,1.3,.5,1); }
.cch-att__row button:active { transform: scale(.95); }
.cch-att__row span { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; }
.cch-att__row svg { width: 21px; height: 21px; }
.cch-att__row .i1 { background: #eaf5d8; color: #4a7211; }
.cch-att__row .i2 { background: #fde9f2; color: #a8225f; }
.cch-att__row .i3 { background: #e7edfb; color: #2b4f9e; }
.cch-att__row .i4 { background:#ffe1ea; color:#b42552; }
.cch-att__g,.cch-att__row{position:relative;z-index:1}
.cch-safety-draft{display:flex;align-items:center;gap:10px;margin:0 12px 8px;padding:9px 10px 9px 12px;border-radius:15px;background:#fff0f4;color:#6f1836;box-shadow:inset 0 0 0 1px rgba(180,37,82,.12)}.cch-safety-draft[hidden]{display:none}.cch-safety-draft span{flex:1;font-size:11.5px;line-height:1.35}.cch-safety-draft b{display:block;font-size:12.5px}.cch-safety-draft button{min-height:44px;border:0;border-radius:12px;padding:0 10px;background:rgba(180,37,82,.09);color:#96214b;font:600 11.5px var(--font)}
.cch-sr{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* ─── Просмотр фото ─────────────────────────────────────────────────────── */
.cch-view { position: absolute; inset: 0; z-index: 9; background: rgba(8,4,10,.94);
  display: grid; place-items: center; padding: 20px;
  opacity: 0; pointer-events: none; transition: opacity .22s ease; }
.cch-view.on { opacity: 1; pointer-events: auto; }
.cch-view img { max-width: 100%; max-height: 100%; border-radius: 14px; display: block;
  transform: scale(.9); transition: transform .28s cubic-bezier(.22,1,.36,1); }
.cch-view.on img { transform: none; }
.cch-view video{max-width:100%;max-height:100%;border-radius:14px;background:#000}
.cch-view button { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border: 0;
  cursor: pointer; border-radius: 50%; background: rgba(255,255,255,.16); color: #fff;
  display: grid; place-items: center;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* ─── Анимации ──────────────────────────────────────────────────────────── */
@keyframes cchIn { from { opacity: 0; transform: translateY(14px) scale(.965); } to { opacity: 1; transform: none; } }
/* Своё сообщение выезжает из композера: не просто «появилось», а «улетело». */
@keyframes cchSend { from { opacity: 0; transform: translate(18px, 26px) scale(.9); } to { opacity: 1; transform: none; } }
.cch-row--fly { animation: cchSend .36s cubic-bezier(.22,1,.36,1) both; }
@keyframes cchDot { 0%,60%,100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes cchPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.82); } }
@keyframes cchBar { 0%,100% { height: 22%; } 50% { height: 92%; } }
.cch-rec.on .cch-rec__w i { animation: cchBar .85s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .cch-row, .cch-row--fly, .cch-typing { animation: none; }
  .cch-rec.on .cch-rec__w i, .cch-rec__dot, .cch-typing__b i { animation: none; }
  .cch-att, .cch-dim, .cch-view, .cch-view img, .cch-down, .cch-act button, .cch-speed, .cch-rec { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ВТОРОЙ СЛОЙ: то, без чего переписка остаётся «лентой», а не инструментом.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Цитата в пузыре ───────────────────────────────────────────────────── */
.cch-quote { display: block; margin: -1px 0 6px; padding: 5px 9px; border-radius: 9px;
  border-left: 2.5px solid currentColor; font-size: 12.5px; line-height: 1.35; }
.cch-row:not(.cch-row--me) .cch-quote { background: rgba(29,2,12,.05); color: #8a3358; }
.cch-row--me .cch-quote { background: rgba(255,255,255,.12); color: #e9b7cf; }
.cch-quote b { display: block; font-weight: 600; font-size: 11.5px; margin-bottom: 1px; }
.cch-quote span { display: block; color: var(--content-strong); opacity: .68;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cch-row--me .cch-quote span { color: #fff; opacity: .62; }

/* ─── Свайп-ответ ───────────────────────────────────────────────────────── */
.cch-row { transition: transform .22s cubic-bezier(.22,1,.36,1); touch-action: pan-y; }
.cch-row.is-drag { transition: none; }
.cch-row__rp { position: absolute; top: 50%; margin-top: -14px; width: 28px; height: 28px;
  border-radius: 50%; display: grid; place-items: center; background: rgba(29,2,12,.07);
  color: var(--brand-strong); opacity: 0; transform: scale(.6); pointer-events: none;
  transition: opacity .14s ease, transform .18s cubic-bezier(.3,1.4,.5,1); }
.cch-row:not(.cch-row--me) .cch-row__rp { left: -34px; }
.cch-row--me .cch-row__rp { right: -34px; }
.cch-row__rp svg { width: 15px; height: 15px; }
.cch-row__rp.on { opacity: 1; transform: none; }

/* ─── Реакция на пузыре ─────────────────────────────────────────────────── */
.cch-rx { position: absolute; bottom: -9px; display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 7px 2px 5px; border-radius: 999px; background: #fff; font-size: 12px; line-height: 1.3;
  box-shadow: 0 3px 10px rgba(20,4,12,.13), inset 0 0 0 1px rgba(12,14,18,.05);
  animation: cchPop .34s cubic-bezier(.3,1.5,.5,1) both; }
.cch-row:not(.cch-row--me) .cch-rx { left: 10px; }
.cch-row--me .cch-rx { right: 10px; }
.cch-rx b { font-size: 10.5px; font-weight: 600; color: rgba(12,14,18,.5); }
@keyframes cchPop { from { opacity: 0; transform: scale(.3) translateY(6px); } to { opacity: 1; transform: none; } }

/* ─── Контекстное меню по долгому нажатию ───────────────────────────────── */
.cch-menu { position: absolute; inset: 0; z-index: 8; opacity: 0; pointer-events: none;
  background: rgba(20,4,12,.22); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
  transition: opacity .2s ease; }
.cch-menu.on { opacity: 1; pointer-events: auto; }
.cch-menu__in { position: absolute; z-index:1; display: flex; flex-direction: column; gap: 9px; overscroll-behavior:contain;
  transform: scale(.92); opacity: 0; transition: transform .26s cubic-bezier(.3,1.35,.5,1), opacity .2s ease; }
.cch-menu.on .cch-menu__in { transform: none; opacity: 1; }
.cch-menu__rx { align-self: flex-start; display: flex; gap: 0; padding: 3px; border-radius: 999px;
  background: rgba(255,255,255,.96); box-shadow: 0 8px 26px rgba(20,4,12,.18); }
.cch-menu--me .cch-menu__rx, .cch-menu--me .cch-menu__acts { align-self: flex-end; }
.cch-menu__rx button { width: 44px; height: 44px; border: 0; cursor: pointer; border-radius: 50%;
  background: transparent; font-size: 20px; line-height: 1; transition: transform .16s cubic-bezier(.3,1.5,.5,1); }
.cch-menu__rx button:active { transform: scale(1.3); }
.cch-menu__ghost { pointer-events: none; max-height:42vh; overflow:hidden; }
.cch-dialog-close{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;color:transparent;z-index:0}
.cch-row__focus{position:absolute;inset:0;border:0;background:transparent;border-radius:18px;cursor:pointer;z-index:1;-webkit-touch-callout:none;user-select:none}.cch-row__focus:focus-visible,.cch button:focus-visible,.cch input[type=range]:focus-visible{outline:2px solid #7e2a55;outline-offset:2px}.cch-bub>*:not(.cch-row__focus):not(.cch-rx),.cch-bub>button:not(.cch-row__focus),.cch-bub>a{position:relative;z-index:2}.cch-rx{z-index:3}
.cch-menu__acts { align-self: flex-start; min-width: 186px; border-radius: 15px; overflow: hidden;
  background: rgba(255,255,255,.96); box-shadow: 0 12px 34px rgba(20,4,12,.2);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.cch-menu__acts button { width: 100%; border: 0; cursor: pointer; background: transparent;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; font: 500 14px var(--font); color: var(--content-strong); text-align: left; }
.cch-menu__acts button + button { box-shadow: inset 0 1px 0 rgba(12,14,18,.07); }
.cch-menu__acts button:active { background: rgba(29,2,12,.05); }
.cch-menu__acts svg { width: 18px; height: 18px; opacity: .5; }

/* ─── Разделитель непрочитанного ────────────────────────────────────────── */
.cch-unread { display: flex; align-items: center; gap: 9px; margin: 12px 2px 4px;
  font-size: 11px; font-weight: 600; letter-spacing: -.1px; color: #b03a6c; }
.cch-unread::before, .cch-unread::after { content: ""; height: 1px; flex: 1 1 auto;
  background: linear-gradient(90deg, rgba(176,58,108,0), rgba(176,58,108,.28)); }
.cch-unread::after { background: linear-gradient(90deg, rgba(176,58,108,.28), rgba(176,58,108,0)); }

/* Липкая дата: при скролле остаётся сверху, чтобы всегда было понятно, где ты. */
.cch-day { position: sticky; top: 0; z-index: 2;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

/* ─── Быстрые ответы ────────────────────────────────────────────────────── */
.cch-quick { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px 36px;
  animation: cchIn .3s cubic-bezier(.22,1,.36,1) both; }
.cch-quick button { border: 0; cursor: pointer; font-family: var(--font); font-size: 12.5px;
  font-weight: 500; padding: 7px 13px; border-radius: 999px; background: #fff; color: var(--brand-strong);
  box-shadow: inset 0 0 0 1px rgba(29,2,12,.1), 0 2px 8px rgba(20,4,12,.05);
  transition: transform .14s cubic-bezier(.3,1.3,.5,1), background .2s ease; }
.cch-quick button:active { transform: scale(.94); background: rgba(29,2,12,.05); }

/* ─── Транскрипт голосового ─────────────────────────────────────────────── */
.cch-tr { border: 0; cursor: pointer; background: transparent; padding: 2px 0 0; margin-top: 4px;
  font: 600 11.5px var(--font); letter-spacing: -.1px; display: inline-flex; align-items: center; gap: 5px; }
.cch-row:not(.cch-row--me) .cch-tr { color: #8a3358; }
.cch-row--me .cch-tr { color: rgba(255,255,255,.66); }
.cch-tr svg { width: 13px; height: 13px; }
.cch-trtext { margin-top: 6px; padding-top: 7px; font-size: 13.5px; line-height: 1.4;
  box-shadow: inset 0 1px 0 rgba(12,14,18,.08); overflow: hidden;
  animation: cchGrow .3s cubic-bezier(.22,1,.36,1) both; }
.cch-row--me .cch-trtext { box-shadow: inset 0 1px 0 rgba(255,255,255,.16); }
@keyframes cchGrow { from { max-height: 0; opacity: 0; } to { max-height: 180px; opacity: 1; } }

/* ─── Запись: фиксация и отмена ─────────────────────────────────────────── */
.cch-lock { position: static; z-index: auto; width: 28px; height: 28px; flex:0 0 auto;
  border-radius: 50%; display: none; place-items: center;
  background: rgba(29,2,12,.07); color: var(--brand-strong); box-shadow:none;
  opacity: 1; transform: none; pointer-events: none; transition: background .18s ease,color .18s ease; }
.cch-lock.on { display: grid; }
.cch-lock.is-locked { background: var(--brand-strong); color: #fff; }
.cch-lock svg { width: 15px; height: 15px; }
.cch-rec.is-cancel { background: #fff2f1; box-shadow: inset 0 0 0 1px rgba(224,20,35,.22); }
.cch-rec.is-cancel .cch-rec__hint { color: #d2202b; font-weight: 600; }

/* ─── Нет сети ──────────────────────────────────────────────────────────── */
.cch-net { flex: 0 0 auto; overflow: hidden; max-height: 0; transition: max-height .26s cubic-bezier(.22,1,.36,1); }
.cch-net.on { max-height: 40px; }
.cch-net div { padding: 8px 14px; background: #fdf0e6; color: #a1560f;
  font-size: 12px; font-weight: 500; text-align: center; }
.cch-bub.is-queued { opacity: .62; }

/* ─── Пустой чат ────────────────────────────────────────────────────────── */
.cch-empty { margin: auto; padding: 24px 22px; text-align: center; max-width: 280px; }
.cch-empty img { width: 66px; height: 66px; border-radius: 50%; object-fit: cover; margin-bottom: 14px;
  box-shadow: 0 0 0 2px #fff, 0 6px 20px rgba(20,4,12,.14); }
.cch-empty b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -.3px; margin-bottom: 6px; }
.cch-empty p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--content-subtle); }

@media (prefers-reduced-motion: reduce) {
  .cch-rx, .cch-quick, .cch-trtext, .cch-row, .cch-menu, .cch-menu__in, .cch-lock, .cch-net { animation: none; transition: none; }
}

/* Цитата в композере: тот же компонент, что в пузыре, плюс крестик. */
.cch-replybar { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 6px 8px 6px 0;
  animation: cchIn .24s cubic-bezier(.22,1,.36,1) both; }
.cch-replybar[hidden] { display: none; }
.cch-replybar .cch-quote { flex: 1 1 auto; min-width: 0; margin: 0; background: rgba(29,2,12,.05); color: #8a3358; }
.cch-replybar button { width: 30px; height: 30px; flex: 0 0 auto; border: 0; cursor: pointer;
  border-radius: 50%; background: rgba(29,2,12,.06); color: var(--content-strong);
  display: grid; place-items: center; }
.cch-replybar svg { width: 15px; height: 15px; }

/* ═══════════════════════════════════════════════════════════════════════════
   СОСТОЯНИЯ ЭКРАНА: пусто, загрузка, ожидание, сигнал, закрыто, ошибка.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Пустой диалог ─────────────────────────────────────────────────────── */
.cch-empty { margin: auto; padding: 24px 22px; text-align: center; max-width: 296px; }
.cch-empty img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: 50% 12%;
  margin-bottom: 14px; box-shadow: 0 0 0 2.5px #fff, 0 8px 24px rgba(20,4,12,.16); }
.cch-empty b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.4px; margin-bottom: 7px; }
.cch-empty p { margin: 0 0 4px; font-size: 13px; line-height: 1.5; color: var(--content-subtle); }
.cch-empty__sla { display: inline-flex; align-items: center; gap: 5px; margin-top: 12px;
  padding: 5px 11px; border-radius: 999px; background: rgba(163,213,70,.22); color: #4a7211;
  font-size: 11.5px; font-weight: 600; }
/* Подсказки-стартеры: пустой чат без них — стена, человек не знает, что спросить. */
.cch-starters { display: flex; flex-direction: column; gap: 7px; margin-top: 18px; }
.cch-starters button { border: 0; cursor: pointer; background: #fff; border-radius: 14px;
  padding: 11px 14px; font: 500 13px/1.35 var(--font); color: var(--content-strong); text-align: left;
  box-shadow: 0 4px 14px rgba(20,4,12,.06), inset 0 0 0 1px rgba(12,14,18,.04);
  transition: transform .14s cubic-bezier(.3,1.3,.5,1); }
.cch-starters button:active { transform: scale(.97); }

/* ─── Скелетон загрузки ─────────────────────────────────────────────────── */
.cch-skel { display: flex; flex-direction: column; gap: 10px; padding: 6px 0; }
.cch-skel i { display: block; border-radius: 16px; background: rgba(29,2,12,.055);
  position: relative; overflow: hidden; }
.cch-skel i::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
  transform: translateX(-100%); animation: cchShim 1.35s infinite; }
@keyframes cchShim { to { transform: translateX(100%); } }
.cch-skel .a { width: 78%; height: 62px; margin-left: 36px; }
.cch-skel .b { width: 56%; height: 40px; margin-left: 36px; }
.cch-skel .c { width: 62%; height: 44px; align-self: flex-end; }
.cch-skel .d { width: 70%; height: 56px; margin-left: 36px; }

/* ─── Системные плашки ──────────────────────────────────────────────────── */
.cch-sys--attn { background: #fdf0e6; color: #a1560f; }
.cch-sys--ok { background: #eaf5d8; color: #4a7211; }
.cch-sys b { display: block; font-weight: 600; margin-bottom: 2px; }

/* Сигнал самочувствия — самое громкое, что есть в разделе. Он не «ещё одно
   сообщение»: пока тренер не ответила, программа не двигается. */
.cch-safety { margin: 4px 0 6px; padding: 14px 15px; border-radius: 17px;
  background: linear-gradient(160deg, #fdeaea, #fdf3ee); color: #8c1c1c;
  box-shadow: inset 0 0 0 1px rgba(190,40,40,.16); }
.cch-safety b { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; letter-spacing: -.2px; }
.cch-safety b svg { width: 17px; height: 17px; flex: 0 0 auto; }
.cch-safety p { margin: 7px 0 0; font-size: 12.5px; line-height: 1.45; color: rgba(140,28,28,.82); }

/* ─── Ошибка загрузки ───────────────────────────────────────────────────── */
.cch-err { margin: auto; text-align: center; max-width: 260px; padding: 20px; }
.cch-err b { display: block; font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.cch-err p { margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: var(--content-subtle); }
.cch-err button { border: 0; cursor: pointer; padding: 10px 18px; border-radius: 999px;
  background: var(--brand-strong); color: #fff; font: 600 13px var(--font); }

/* ─── Композер заблокирован ─────────────────────────────────────────────── */
.cch-closed { display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border-radius: 21px; background: rgba(29,2,12,.045); color: var(--content-subtle);
  font-size: 12.5px; line-height: 1.4; }
.cch-closed svg { width: 18px; height: 18px; flex: 0 0 auto; opacity: .55; }
.cch-closed b { color: var(--content-strong); font-weight: 600; }

@media (prefers-reduced-motion: reduce) { .cch-skel i::after { animation: none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   СМЕНА ТРЕНЕРА И ЗАКРЫТЫЙ ДОСТУП
   ═══════════════════════════════════════════════════════════════════════════ */

/* Передача клиента другому тренеру. Событие, а не разделитель даты: клиент
   должен понять, что дальше отвечает ДРУГОЙ человек, и что старое не стёрлось. */
.cch-handover { align-self: stretch; margin: 18px 0 10px; padding: 15px 14px 14px; border-radius: 19px;
  background: #fff; text-align: center;
  box-shadow: 0 6px 20px rgba(20,4,12,.07), inset 0 0 0 1px rgba(12,14,18,.04); }
.cch-handover__av { display: flex; align-items: center; justify-content: center; gap: 9px; margin-bottom: 10px; }
.cch-handover__av img { border-radius: 50%; object-fit: cover; object-position: 50% 12%; display: block; }
.cch-handover__av .old { width: 32px; height: 32px; filter: grayscale(1); opacity: .5; }
.cch-handover__av .new { width: 42px; height: 42px; box-shadow: 0 0 0 2px #fff, 0 4px 12px rgba(20,4,12,.16); }
.cch-handover__av svg { width: 15px; height: 15px; color: rgba(12,14,18,.28); flex: 0 0 auto; }
.cch-handover b { display: block; font-size: 14.5px; font-weight: 600; letter-spacing: -.25px; }
.cch-handover p { margin: 5px 0 0; font-size: 12px; line-height: 1.45; color: var(--content-subtle); }

/* Метка «эры»: кто вёл этот кусок переписки. Липкая — при прокрутке архива
   всегда видно, чьи это сообщения, даже если аватар уехал вверх. */
.cch-era { position: sticky; top: 0; z-index: 2; align-self: center;
  display: inline-flex; align-items: center; gap: 7px;
  margin: 12px 0 6px; padding: 4px 12px 4px 4px; border-radius: 999px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 0 0 1px rgba(12,14,18,.06), 0 2px 8px rgba(20,4,12,.05);
  font-size: 11px; font-weight: 600; letter-spacing: -.1px; color: rgba(29,2,12,.6); }
.cch-era img { width: 21px; height: 21px; border-radius: 50%; object-fit: cover; object-position: 50% 12%; }
.cch-era i { font-style: normal; font-weight: 400; opacity: .62; }
/* Прошлый тренер: обесцвеченный аватар и приглушённая метка. Сами пузыри НЕ
   приглушаем — это переписка, а не «неважное»; тускнеть должна подпись. */
.cch-era--past { color: rgba(29,2,12,.42); }
.cch-era--past img { filter: grayscale(1); opacity: .72; }
.cch-row--past .cch-row__av { filter: grayscale(1); opacity: .82; }

/* Доступ закрыт: читать можно всё, писать нельзя. */
.cch-locked { display: flex; align-items: center; gap: 11px; padding: 11px 12px 11px 13px; border-radius: 20px;
  background: #fff; box-shadow: inset 0 0 0 1px rgba(12,14,18,.05), 0 4px 14px rgba(20,4,12,.05); }
.cch-locked__ic { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 11px; display: grid; place-items: center;
  background: rgba(29,2,12,.06); color: var(--content-strong); }
.cch-locked__ic svg { width: 17px; height: 17px; }
.cch-locked__b { min-width: 0; flex: 1 1 auto; }
.cch-locked b { display: block; font-size: 13px; font-weight: 600; letter-spacing: -.2px; }
.cch-locked span { display: block; font-size: 11.5px; line-height: 1.35; color: var(--content-subtle); margin-top: 2px; }
.cch-locked button { flex: 0 0 auto; border: 0; cursor: pointer; padding: 9px 14px; border-radius: 999px;
  background: linear-gradient(158deg, #37131f, #1d020c); color: #fff; font: 600 12.5px var(--font);
  transition: transform .14s cubic-bezier(.3,1.3,.5,1); }
.cch-locked button:active { transform: scale(.95); }
/* Метка режима в шапке — чтобы «почему не пишется» было понятно сразу сверху. */
.cch-ro { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px;
  background: rgba(29,2,12,.06); color: rgba(29,2,12,.5); font-size: 10.5px; font-weight: 600; }
/* Production adapter: only the host/safe-area/accessibility layer differs
   from the pixel source above. The resting 430px composition is unchanged. */
.detail--coach-chat{background:var(--neutral-bg);overflow:hidden;display:none;flex-direction:column}
.detail--coach-chat.is-open{display:flex}
.detail--coach-chat>.statusbar{position:relative;z-index:3;flex:0 0 max(14px,var(--safe-top))}
.detail--coach-chat>.cch{position:relative;inset:auto;flex:1 1 auto;min-height:0;height:auto;--cch-keyboard-inset:0px}
.detail--coach-chat .cch-bar{padding-bottom:calc(10px + env(safe-area-inset-bottom) + var(--cch-keyboard-inset))}
.cch-sr{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.cch-dialog-close{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;color:transparent;z-index:0}
.cch-safety-action{position:relative;z-index:1;display:block;width:calc(100% - 32px);margin:0 16px 16px;border:0;border-radius:12px;padding:11px 14px;background:#fff1f1;color:#b4232d;font:600 13px var(--font);cursor:pointer}
.cch-row__focus{position:absolute;inset:0;border:0;background:transparent;border-radius:18px;cursor:pointer;z-index:1}
.cch-row__focus:focus-visible,.cch button:focus-visible,.cch input[type=range]:focus-visible{outline:2px solid #7e2a55!important;outline-offset:2px!important}
.cch-input:focus-within{box-shadow:inset 0 0 0 1px rgba(12,14,18,.13),0 0 0 3px rgba(126,42,85,.08)}
.cch-input textarea:focus,.cch-input textarea:focus-visible{outline:0!important;box-shadow:none!important}
.cch-bub>*:not(.cch-row__focus):not(.cch-rx),.cch-bub>button:not(.cch-row__focus),.cch-bub>a{position:relative;z-index:2}.cch-rx{position:absolute;z-index:3}
.cch-hit{position:relative}.cch-hit:after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
.cch-archive{display:flex;justify-content:center;padding:8px 0 12px}.cch-archive button{border:0;border-radius:999px;background:rgba(29,2,12,.07);color:var(--content-strong);font:500 12px var(--font);padding:8px 13px;cursor:pointer}
.cch-empty,.cch-error{margin:auto;padding:34px 28px;text-align:center;color:var(--content-subtle);font-size:14px;line-height:1.5}.cch-empty b,.cch-error b{display:block;color:var(--content-strong);font-size:17px;margin-bottom:7px}.cch-error button{margin-top:12px;border:0;border-radius:999px;background:var(--content-strong);color:#fff;padding:10px 16px;font:600 13px var(--font)}
.cch-upload{display:flex;align-items:center;gap:8px;min-width:180px}.cch-upload__bar{height:3px;flex:1;border-radius:3px;background:rgba(255,255,255,.22);overflow:hidden}.cch-upload__bar i{display:block;height:100%;background:#fff;border-radius:inherit;transition:width .18s}
.cch-file{display:flex;align-items:center;gap:10px;min-width:210px}.cch-file svg{width:26px;height:26px}.cch-file__b{min-width:0}.cch-file__b b,.cch-file__b span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cch-file__b span{font-size:11px;opacity:.7;margin-top:2px}
.cch-wave-range{position:absolute;inset:0;width:100%;height:100%;opacity:.001;cursor:pointer}
.cch-readonly{padding:12px 20px calc(14px + env(safe-area-inset-bottom));text-align:center;color:var(--content-subtle);font-size:12.5px;line-height:1.4;background:rgba(255,255,255,.9);border-top:1px solid rgba(12,14,18,.06)}
.cch-bar.is-cch-locked>:not(.cch-locked),.cch-bar.is-cch-closed>:not(.cch-closed){display:none!important}
.cch-bar>.cch-locked,.cch-bar>.cch-closed{margin:0 10px calc(env(safe-area-inset-bottom) + var(--cch-keyboard-inset))}
button.cch-closed{width:calc(100% - 20px);border:0;text-align:left;font-family:var(--font);cursor:pointer}
.cch-pending{display:flex;gap:8px;overflow-x:auto;padding:1px 0 9px;scrollbar-width:none}
.cch-pending[hidden]{display:none}.cch-pending::-webkit-scrollbar{display:none}
.cch-pending__item{position:relative;flex:0 0 auto;width:62px;height:62px;border-radius:14px;overflow:hidden;background:#fff;box-shadow:inset 0 0 0 1px rgba(12,14,18,.07)}
.cch-pending__item img,.cch-pending__item video{width:100%;height:100%;display:block;object-fit:cover;border-radius:14px}
.cch-pending__file{width:150px;display:flex;align-items:center;gap:8px;padding:8px 28px 8px 9px;color:var(--content-strong)}
.cch-pending__file svg{width:25px;height:25px;flex:0 0 auto}.cch-pending__file span{min-width:0;font-size:11.5px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cch-pending__remove{position:absolute!important;right:0!important;top:0!important;width:44px!important;height:44px!important;border:0!important;border-radius:0!important;background:transparent!important;color:#fff!important;display:grid!important;place-items:center!important;box-shadow:none!important}
.cch-pending__remove:before{content:"";position:absolute;width:24px;height:24px;border-radius:50%;background:rgba(20,4,12,.72);box-shadow:0 2px 7px rgba(20,4,12,.22)}
.cch-rec__stop:after,.cch-view button:after{content:"";position:absolute}
.cch-rec__stop{position:relative}.cch-rec__stop:after{inset:-7px}.cch-view button:after{inset:-4px}
.cch-pending__remove svg{width:13px;height:13px}.cch-mic{touch-action:none}
.cch-pending--voice .cch-pending__remove{right:2px!important;top:50%!important;transform:translateY(-50%)!important;color:#3a0c22!important}
@media (max-width:390px){.cch-head{padding-left:12px;padding-right:12px}.cch-feed{padding-left:12px;padding-right:12px}.cch-bub{max-width:268px}}