/* The shared composer. Used by the Inbox and by the Lead Workspace.
 *
 * Measured PASS at 1440x900 and 1920x1080 before it was shared: 156px block,
 * 80px textarea, Send beside the field, popovers opening upward so they can
 * never cover the transcript.
 *
 * Neither screen's stylesheet may restyle .ck-* — one composer means one set of
 * rules, which is the whole point of extracting it.
 */

.ck-composer, .ck-composer *, .ck-composer *::before, .ck-composer *::after { box-sizing: border-box; }

.ck-composer {
  position: relative;
  min-height: 156px;
  flex: 0 0 auto;
  padding: 10px 16px 12px;
  border-top: 1px solid rgb(var(--ch-line) / .16);
  display: flex; flex-direction: column; gap: 8px;
}

.ck-row { display: flex; gap: 10px; align-items: stretch; }
.ck-input {
  flex: 1; height: 80px; min-height: 80px; max-height: 80px; resize: none;
  border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 14px; line-height: 1.45;
  background: rgb(var(--ch-lift) / .04); border: 1px solid rgb(var(--ch-line) / .24); color: var(--lw-ink);
}
.ck-input[disabled] { opacity: .55; }
.ck-send-col {
  display: flex; flex-direction: column; align-items: stretch; justify-content: center;
  gap: 6px; min-width: 132px;
}
.ck-send {
  height: 44px; padding: 0 18px; border-radius: 12px; cursor: pointer;
  border: 1px solid rgb(var(--ch-accent) / .45); background: var(--pk-blue); color: var(--rp-on-accent);
  font: inherit; font-size: 14px; font-weight: 600;
}
.ck-send[disabled] { opacity: .45; cursor: not-allowed; }

/* WRAP, NOT CLIP. overflow-x:auto hid the last tools behind a scrollbar
   nobody looks for and cut their labels mid-word. Below 1400px the three
   least-used fold behind «Ещё» instead. */
.ck-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; row-gap: 6px; }
.ck-tool-label { overflow: visible; text-overflow: clip; }
.ck-mode {
  height: 30px; border-radius: 8px; padding: 0 8px; font: inherit; font-size: 12px;
  background: rgb(var(--ch-lift) / .04); border: 1px solid rgb(var(--ch-line) / .24); color: var(--lw-ink);
}
.ck-tool {
  position: relative; height: 30px; padding: 0 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgb(var(--ch-line) / .2); background: rgb(var(--ch-lift) / .03); color: var(--lw-ink-bright);
  font: inherit; font-size: 12px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.ck-tool.is-open { border-color: rgb(var(--ch-accent) / .6); background: rgb(var(--ch-blue) / .16); }
.ck-tool-ico { font-size: 14px; line-height: 1; }
.ck-file { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.ck-drafts { display: flex; flex-wrap: wrap; gap: 6px; }
.ck-draft-item {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 9px;
  background: rgb(var(--ch-lift) / .04); border: 1px solid rgb(var(--ch-line) / .2);
  font-size: 12px; color: var(--lw-ink-bright);
}
.ck-x { background: none; border: 0; color: var(--lw-ink-soft); cursor: pointer; font-size: 14px; line-height: 1; }
.ck-dim { color: var(--lw-ink-dim); }

/* Anchored to the composer and opening upward: the only positioned thing over
   the centre column, and it can never reach the transcript's scroll area. */
.ck-pop {
  position: absolute; bottom: calc(100% - 6px); inset-inline-start: 16px; z-index: 30; padding: 12px;
  border-radius: 14px; background: var(--lw-panel); border: 1px solid rgb(var(--ch-line) / .28);
  box-shadow: 0 18px 44px rgb(var(--ch-drop)); max-height: 340px; overflow-y: auto;
}
/* Enlarged 2026-08-25 (owner ask: bigger emoji picker). Width grew 320 -> 380
   and the flat 8x3 grid became three grouped, headed sections of 38px cells
   (was 32px) laid out with auto-fill/minmax so the column count adapts to
   whatever width is actually available — never a fixed 8 or 9 that could
   overflow or leave a lopsided last column. max-height grew alongside it but
   stays capped at min(...,60vh): same overflow-y:auto scroll as before, so on
   a short window the picker still scrolls internally instead of spilling
   past the top of the viewport. The anchor point (bottom/left, opening
   upward) is untouched. */
.ck-pop-emoji { width: 380px; max-height: min(420px, 60vh); }
/* 11 Sep 2026: groups and search need room — a little wider and taller,
   still capped by the viewport. */
.ck-pop-templates { width: 380px; max-height: min(480px, 64vh); }
.ck-pop-ai, .ck-pop-voice { width: 280px; }
.ck-emoji-group + .ck-emoji-group { margin-top: 10px; }
.ck-emoji-group-title {
  margin: 0 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .02em;
  text-transform: uppercase; color: var(--lw-ink-dim);
}
.ck-emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); gap: 6px; }
.ck-emoji { width: 38px; height: 38px; font-size: 20px; border: 0; background: none; cursor: pointer; border-radius: 9px; justify-self: center; }
.ck-emoji:hover { background: rgb(var(--ch-lift) / .07); }
.ck-pop-note { margin: 10px 0 0; font-size: 11px; color: var(--lw-ink-dim); line-height: 1.45; }
.ck-pop-group h4 { margin: 8px 0 5px; font-size: 12px; color: var(--lw-ink-soft); }
.ck-pop-group ul, .ck-pop-ai ul { list-style: none; margin: 0; padding: 0; }
.ck-pop-group button, .ck-pop-ai button {
  width: 100%; text-align: start; padding: 7px 8px; border-radius: 8px; border: 0;
  background: none; color: var(--lw-ink-bright); font: inherit; font-size: 13px; cursor: pointer;
}
.ck-pop-group button:hover, .ck-pop-ai button:hover:not([disabled]) { background: rgb(var(--ch-lift) / .06); }
.ck-pop-ai button[disabled] { opacity: .45; cursor: not-allowed; }
/* The moving gradient the owner pointed at on the marketing site's own
   "Routing lead -> CRM" bar — a real request typed live during the same
   session as this file's own AI tools shipped. Reserved for the one moment
   in this popover something is actually in flight (an AI call genuinely
   running); every other button in this list stays exactly as plain as
   before. Blue-to-cyan matches the reference's own palette rather than
   inventing a new one. */
@keyframes ck-ai-flow-sweep { to { background-position: -200% 0; } }
.ck-ai-flow {
  background: linear-gradient(90deg, var(--rp-blue, #2f7bff) 0%, #37d2ff 50%, var(--rp-blue, #2f7bff) 100%) !important;
  background-size: 200% 100% !important;
  animation: ck-ai-flow-sweep 1.6s linear infinite;
  color: #fff !important;
  opacity: 1 !important;
}
.ck-voice-actions { display: flex; gap: 6px; margin-top: 8px; }
.ck-voice-state { margin: 0; font-size: 13px; color: var(--lw-ink-bright); }

.ck-btn {
  height: 30px; padding: 0 10px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 12px;
  border: 1px solid rgb(var(--ch-line) / .28); background: rgb(var(--ch-lift) / .03); color: var(--lw-ink-bright);
}
.ck-chip {
  display: inline-flex; align-items: center; justify-content: center; height: 22px; padding: 0 9px;
  border-radius: 999px; background: rgb(var(--ch-lift) / .05);
  border: 1px solid rgb(var(--ch-line) / .2); color: var(--lw-ink-bright); font-size: 11px; white-space: nowrap;
}
.ck-chip-warn { color: var(--lw-warm); border-color: rgb(var(--ch-warm) / .4); background: rgb(var(--ch-warm) / .1); }
.ck-empty { color: var(--lw-ink-dim); font-size: 12px; margin: 8px 0 0; }
.ck-warn { color: var(--lw-warm); }

/* The real Meta template list, when the host can actually send one — see
   composerKit.js's Popover, onSendTemplate. Same row shape as the group
   buttons above it; the fill panel borrows the lead workspace's own
   .lw-template-fill-panel proportions so a template with variables looks
   the same whether it is reached from here or from the CRM card's own
   fallback. */
.ck-tpl-list { list-style: none; margin: 0; padding: 0; }
/* Группы, поиск и язык (11 Sep 2026): «много шаблонов, путается человек». */
.ck-tpl-tools {
  position: sticky; top: -12px; z-index: 2; display: flex; flex-direction: column; gap: 6px;
  margin: 0 -12px 6px; padding: 8px 12px; background: var(--lw-panel, var(--surface));
  border-bottom: 1px solid rgb(var(--ch-line) / .16);
}
.ck-tpl-search {
  width: 100%; box-sizing: border-box; height: 32px; padding: 0 10px; border-radius: 9px;
  border: 1px solid rgb(var(--ch-line) / .28); background: rgb(var(--ch-lift) / .04);
  color: var(--lw-ink-bright); font: inherit; font-size: 13px;
}
.ck-tpl-search:focus { outline: none; border-color: var(--accent); }
.ck-tpl-langs { display: flex; flex-wrap: wrap; gap: 4px; }
.ck-tpl-lang-chip {
  height: 24px; padding: 0 10px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 11.5px; font-weight: 600;
  border: 1px solid rgb(var(--ch-line) / .28); background: transparent; color: var(--lw-ink-dim);
}
.ck-tpl-lang-chip.is-on { border-color: var(--accent); color: var(--lw-ink-bright); background: rgb(var(--ch-lift) / .08); }
.ck-tpl-group + .ck-tpl-group { margin-top: 6px; }
.ck-tpl-group-title {
  width: 100%; display: flex; align-items: center; gap: 6px; padding: 6px 4px; border: 0; background: none;
  color: var(--lw-ink-dim); font: inherit; font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
  text-transform: uppercase; cursor: pointer; text-align: start;
}
.ck-tpl-group-title:hover { color: var(--lw-ink-bright); }
.ck-tpl-group-caret { width: 10px; font-size: 10px; }
.ck-tpl-group-label { flex: 1; }
.ck-tpl-group-count {
  min-width: 20px; height: 18px; padding: 0 6px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  background: rgb(var(--ch-lift) / .08); color: var(--lw-ink-dim); font-size: 11px; font-weight: 600; letter-spacing: 0;
}
.ck-tpl-row + .ck-tpl-row { margin-top: 2px; }
.ck-tpl-name {
  width: 100%; text-align: start; padding: 7px 8px; border-radius: 8px;
  border: 1px solid transparent; background: none; color: var(--lw-ink-bright);
  font: inherit; font-size: 13px; cursor: pointer;
}
.ck-tpl-name:hover:not([disabled]) { background: rgb(var(--ch-lift) / .06); }
.ck-tpl-name[disabled] { opacity: .55; cursor: not-allowed; }
.ck-tpl-name.is-armed { border-color: var(--t217); color: var(--t450); background: rgba(255, 120, 100, 0.09); }

/* СТРОКА ШАБЛОНА — ЧЕТЫРЕ УРОВНЯ, А НЕ ОДНО МАШИННОЕ ИМЯ.
   Раньше здесь стояло ровно то, что Meta хранит как имя:
   «ai_lead_demo_followup_en_3q0qvd», «new_whatsapp_template_21_05_2026_…».
   Владелец 31 августа: «названия странные, 1 в скобках, где русские шаблоны
   непонятно». Переименовать в Meta нельзя — она не разрешает менять имя
   одобренного шаблона, — поэтому имя уходит вниз мелким, а наверх выходит
   смысл: о чём текст, на каком он языке и что в нём заполнять. */
.ck-tpl-name { display: flex; flex-direction: column; gap: 3px; line-height: 1.35; }
.ck-tpl-title { font-weight: 600; font-size: 13px; }
.ck-tpl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 10.5px; }
.ck-tpl-lang {
  text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
  padding: 1px 5px; border-radius: 4px;
  background: rgb(var(--ch-lift) / .10); color: var(--lw-ink-dim);
}
/* Расхождение имени и текста — предупреждение, а не украшение: по такому
   шаблону человек выбирает язык письма клиенту. */
.ck-tpl-mismatch {
  padding: 1px 5px; border-radius: 4px; font-weight: 600;
  background: rgba(232, 177, 85, .14); color: light-dark(#8a5a00, #e8b155);
}
.ck-tpl-vars { color: var(--lw-ink-dim); }
.ck-tpl-snippet {
  color: var(--lw-ink-dim); font-size: 11.5px; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Имя в Meta нужно, чтобы найти шаблон там и поправить. Оно последнее и
   самое тихое — сноска, а не подпись. */
.ck-tpl-rawname {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; opacity: .5; word-break: break-all;
}
/* Одна строка сверху, отвечающая на «когда это вообще нужно». */
/* ПЕРЕНЕСЁННЫЙ ЧЕРНОВИК. Жёлтый, а не красный: ничего не сломалось, но одно
   нажатие отделяет внутреннюю заметку от отправки её клиенту. */
.ck-carried {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 6px; padding: 7px 9px; border-radius: 8px;
  background: rgba(232, 177, 85, .12); border: 1px solid rgba(232, 177, 85, .3);
  color: light-dark(#7a4d00, #e8b155); font-size: 11.5px; line-height: 1.45;
}
.ck-carried span { flex: 1 1 200px; }
.ck-carried-x, .ck-carried-ok {
  flex: 0 0 auto; height: 24px; padding: 0 10px; border-radius: 999px;
  cursor: pointer; font: inherit; font-size: 11.5px;
  border: 1px solid rgba(232, 177, 85, .45); background: none; color: inherit;
}
.ck-carried-x { padding: 0 8px; }

.ck-tpl-why {
  margin: 0 0 8px; padding: 7px 9px; border-radius: 8px;
  background: rgb(var(--ch-line) / .06); border: 1px solid rgb(var(--ch-line) / .16);
  color: var(--lw-ink-dim); font-size: 11px; line-height: 1.5;
}
.ck-tpl-fill-panel {
  display: flex; flex-direction: column; gap: 6px; margin: 0 0 8px; padding: 10px;
  border-radius: 10px; background: rgb(var(--ch-line) / .06);
  border: 1px solid rgb(var(--ch-line) / .18);
}
.ck-tpl-fill-name { margin: 0; font-size: 12px; font-weight: 600; color: var(--lw-ink-bright); }
.ck-tpl-preview { margin: 0 0 2px; color: var(--lw-ink-dim); font-size: 11px; line-height: 1.5; font-style: italic; }
.ck-tpl-input {
  width: 100%; box-sizing: border-box; padding: 6px 8px; font-size: 12px;
  border-radius: 8px; border: 1px solid rgb(var(--ch-line) / .2);
  background: transparent; color: var(--lw-ink-bright);
}
.ck-tpl-send {
  height: 28px; padding: 0 12px; border-radius: 8px; cursor: pointer; font: inherit; font-size: 12px;
  border: 1px solid rgb(var(--ch-line) / .28); background: rgb(var(--ch-lift) / .03); color: var(--lw-ink-bright);
}
.ck-tpl-send[disabled] { opacity: .5; cursor: not-allowed; }
/* Quiet by default, legible on demand. 16px, no border, half-visible until it
   is wanted — a hint that shouts is clutter with a question mark on it. */
.ck-hint {
  position: relative; width: 16px; height: 16px; border-radius: 50%; cursor: help;
  flex: 0 0 auto; border: 0; background: rgb(var(--ch-lift) / .06); color: var(--lw-ink-soft);
  font-size: 11px; line-height: 16px; padding: 0; opacity: .55; transition: opacity .12s;
}
.ck-hint:hover, .ck-hint:focus-visible { opacity: 1; color: var(--lw-ink-bright); outline: none; }

/* Our tooltip, not the browser default: instant, in our font, beside the
   control rather than at the cursor. Shows on hover AND on keyboard focus. */
/* rtl-exempt: центрирование left: 50% + translateX(-50%) симметрично и в RTL даёт тот же центр; inset-inline-start: 50% с тем же сдвигом в RTL уезжает на половину ширины (подсказки и окна в арабском, 15.09.2026). */
.ck-hint::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  width: 260px; padding: 9px 11px; border-radius: 10px; z-index: 60;
  background: var(--lw-panel); border: 1px solid rgb(var(--ch-line) / .28); color: var(--lw-ink-bright);
  font-size: 12px; line-height: 1.45; text-align: start; white-space: normal;
  box-shadow: 0 14px 34px rgb(var(--ch-drop));
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s;
}
.ck-hint:hover::after, .ck-hint:focus-visible::after { opacity: 1; visibility: visible; }

/* Draft-only: a state under the button, not a badge beside it. The grey button
   already carries most of the message. */
.ck-send-note { font-size: 11px; color: var(--lw-ink-mid); text-align: center; line-height: 1.3; }

/* «Ещё». Above 1400px this wrapper disappears and its tools flow inline —
   one DOM, no duplicated buttons that could drift apart. */
.ck-more { display: contents; }
.ck-more-btn { display: none; }
.ck-more-list { display: contents; }
@media (max-width: 1399px) {
  .ck-more { display: block; position: relative; }
  .ck-more-btn {
    display: inline-flex; align-items: center; height: 30px; padding: 0 10px;
    border-radius: 999px; cursor: pointer; white-space: nowrap;
    border: 1px solid rgb(var(--ch-line) / .2); background: rgb(var(--ch-lift) / .03);
    color: var(--lw-ink-bright); font: inherit; font-size: 12px;
  }
  .ck-more-list {
    display: none; position: absolute; bottom: calc(100% + 8px); inset-inline-end: 0; z-index: 40;
    flex-direction: column; gap: 6px; padding: 10px; border-radius: 12px;
    background: var(--lw-panel); border: 1px solid rgb(var(--ch-line) / .28);
    box-shadow: 0 14px 34px rgb(var(--ch-drop));
  }
  .ck-more-list.is-open { display: flex; }
  .ck-more-list .ck-tool { justify-content: flex-start; }
}

/* The channel's own refusal, under the composer where the operator is looking.
   Never replaces the draft — the text they typed stays in the box. */
.ck-send-error {
  margin: 0; font-size: 12px; line-height: 1.45; color: var(--lw-late-2);
  padding: 7px 10px; border-radius: 9px;
  background: rgb(var(--ch-late) / .09); border: 1px solid rgb(var(--ch-late) / .28);
}

/* ═══ ONE FRAME (2026-09-04) ══════════════════════════════════════════════════
   The composer is one bordered box, the way a message field is in amoCRM: the
   text area on top with no border of its own, and one row inside the box —
   mode segment on the left, «+» with every tool behind it, «Отправить» on the
   right. Nothing sits under the box. Layered after the original rules so the
   anchors the suites hold (.ck-row is flex, .ck-tools wraps, «Ещё» exists,
   .ck-more is display:contents in its own rule) all stay true; the composer-
   scoped selectors below simply outrank them. */
.ck-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "drafts drafts" "input input" "error error" "tools send";
  gap: 6px 10px;
  min-height: 0;
  margin: 0 16px 12px;
  padding: 8px 10px 8px;
  border: 1px solid rgb(var(--ch-line) / .28);
  border-top: 1px solid rgb(var(--ch-line) / .28);
  border-radius: 14px;
  background: rgb(var(--ch-lift) / .03);
}
.ck-composer:focus-within { border-color: rgb(var(--ch-accent) / .55); }
.ck-composer > .ck-drafts { grid-area: drafts; }
.ck-composer > .ck-row { display: contents; }
.ck-composer .ck-input {
  grid-area: input;
  height: 64px; min-height: 64px; max-height: 64px;
  padding: 6px 4px;
  border: 0; border-radius: 0; background: transparent;
}
.ck-composer .ck-input:focus { outline: none; }
.ck-composer > .ck-send-error, .ck-composer > .ck-send-notice { grid-area: error; }
.ck-composer > .ck-tools { grid-area: tools; align-self: center; }
.ck-composer > .ck-row > .ck-send-col { grid-area: send; align-self: center; min-width: 0; }
.ck-composer .ck-send { height: 32px; padding: 0 16px; border-radius: 10px; font-size: 13px; }
.ck-composer .ck-send-note { font-size: 11px; }
/* «+» is the only tool button in the row, at every width. */
.ck-composer .ck-more { display: block; position: relative; }
.ck-composer .ck-more-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border-radius: 999px; cursor: pointer;
  border: 1px solid rgb(var(--ch-line) / .28); background: rgb(var(--ch-lift) / .05);
  color: var(--lw-ink-bright); font: inherit; font-size: 18px; line-height: 1;
}
.ck-composer .ck-more-btn[aria-expanded="true"] { border-color: rgb(var(--ch-accent) / .6); background: rgb(var(--ch-blue) / .16); }
.ck-composer .ck-more-list {
  display: none; position: absolute; bottom: calc(100% + 8px); inset-inline-start: 0; z-index: 40;
  flex-direction: column; gap: 6px; padding: 10px; border-radius: 12px; min-width: 180px;
  background: var(--lw-panel); border: 1px solid rgb(var(--ch-line) / .28);
  box-shadow: 0 14px 34px rgb(var(--ch-drop));
}
.ck-composer .ck-more-list.is-open { display: flex; }
.ck-composer .ck-more-list .ck-tool { justify-content: flex-start; }

/* ── HALF THE HEIGHT, HALF THE BUTTONS, A GRIP TO PULL (2026-09-04, evening) ─
   Owner: «поле где писать — ещё уменьшим наполовину, бегунок растягивать
   оставить, кнопки в два раза меньше». One line of text by default; the grip
   at the corner pulls it open to 240px when a long message needs room. */
.ck-composer .ck-input {
  height: 32px; min-height: 32px; max-height: 240px; resize: vertical;
}
.ck-composer { gap: 4px 8px; padding: 6px 8px 6px; margin: 0 8px 8px; }
.ck-composer .ck-send { height: 24px; padding: 0 10px; font-size: 12px; border-radius: 8px; }
.ck-composer .ck-more-btn { width: 22px; height: 22px; font-size: 14px; }

/* ── BUTTONS ON THE FRAME'S EDGE (2026-09-05) ────────────────────────────────
   Owner: «"+" и Send — на нижнюю кромку, само поле не увеличивать, а места
   писать внутри станет больше». The action row drops half its height below
   the frame; the padding it used to occupy goes to the text. The frame keeps
   its size. */
.ck-composer { overflow: visible; padding: 4px 8px 2px; margin-bottom: 18px; row-gap: 0; }
.ck-composer > .ck-tools,
.ck-composer > .ck-row > .ck-send-col { position: relative; z-index: 2; margin-bottom: -13px; }
.ck-composer .ck-more-btn, .ck-composer .ck-send { box-shadow: 0 0 0 3px var(--lw-panel, #0f1622); }
/* The text area is the block: one line of chrome around it, nothing more. */
.ck-composer .ck-input { min-height: 56px; padding: 4px 2px; }

/* ── BRAND-COLOURED CHANNEL CHIP (2026-09-05) ────────────────────────────────
   `--chip-brand` is set inline by Chip() from channelMarks' brand table. */
.ck-chip-brand {
  color: var(--chip-brand);
  border-color: color-mix(in srgb, var(--chip-brand) 45%, transparent);
  background: color-mix(in srgb, var(--chip-brand) 14%, transparent);
  font-weight: 600;
}

/* ── FLAT BUTTONS ON THE EDGE (2026-09-05, owner: «Send прямоугольником, вытяни,
   чтобы лёг ровно; вертикально — не очень») ─────────────────────────────────
   A legacy `button { min-height: 40px }` outranked the 24px height and drew
   both buttons tall. Explicit min-height: 0, wide and low. */
.ck-composer .ck-send { min-height: 0; height: 24px; line-height: 24px; padding: 0 18px; border-radius: 8px; }
.ck-composer .ck-more-btn { min-height: 0; height: 22px; width: 34px; border-radius: 8px; }
.ck-composer > .ck-tools,
.ck-composer > .ck-row > .ck-send-col { margin-bottom: -12px; }

/* «Мария отправит» — шаблон по расписанию (5 сентября). */
.ck-tpl-when { margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(255, 255, 255, 0.14); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ck-tpl-when-title { flex-basis: 100%; font-weight: 600; font-size: 13px; }
.ck-tpl-when-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.ck-tpl-when-chip { border: 1px solid rgba(255, 255, 255, 0.16); background: none; color: inherit; border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 12.5px; cursor: pointer; }
.ck-tpl-when-chip.is-on { border-color: #6d5dfc; background: rgba(109, 93, 252, 0.16); }
.ck-tpl-when-at { flex-basis: 100%; }
.ck-tpl-schedule { border: 1px solid #6d5dfc; background: rgba(109, 93, 252, 0.16); color: inherit; border-radius: 10px; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.ck-tpl-schedule[disabled] { opacity: .5; cursor: not-allowed; }
.ck-tpl-when-note { flex-basis: 100%; font-size: 12px; }

/* Голосовое (6 сентября): плеер предпросмотра и главная кнопка. */
.ck-voice-audio { display: block; width: 100%; margin-top: 8px; height: 36px; }
.ck-btn-primary { background: var(--lw-accent, #78beff); color: #0b1220; border-color: transparent; }
.ck-btn-primary:disabled { opacity: .55; cursor: default; }