/* ============================================================================
   cc-composer.css — ЕДИНЫЙ композер (поле ввода) строго по ЭТАЛОНУ р.11
   (clike-эталон-ленты.html §11 + CSS .cv .cc-* строки 408-490).

   ОДИН компонент для всех поверхностей (общий чат · ЛС · лента-канал ·
   комментарии · поддержка · гостевая). Заменяет дубли cc-box (community-chat.css,
   scoped #cchat) и легаси-dcx (снесён). Портативный: свои токены (--ccx-*),
   работает в родительском документе И в iframe ленты, не зависит от палитры surface.

   Разметка: <form class="cc-composer" data-cc> …
     .cc-reply (плашка ответа/правки) · .cc-preview (превью вложения) ·
     .cc-box (пилюля: .cc-attach · textarea.cc-input · .cc-emoji · .cc-act) ·
     .cc-recbar / .cc-circ / .cc-trim (запись) · .cc-emojigrid (панель эмодзи) ·
     .cc-menu (меню вложения) · .cc-fmt (форматирование) · .cc-ac (автодополнение) ·
     .cc-slow (медленный режим).
   ============================================================================ */

/* ── Токены компонента (тёмная = дефолт, эталон .cv) ───────────────────────── */
.cc-composer{
  --ccx-pill:#121b28;      /* фон пилюли = эталон --cc-panel2 (s2) */
  --ccx-panel3:#1a2433;    /* hover кнопок = s3 */
  --ccx-line:#1f2a3a;      /* бордер = --cc-line */
  --ccx-text:#e6eaf0;
  --ccx-muted:#8b97a9;     /* иконки кнопок */
  --ccx-faint:#5a6578;     /* placeholder / подсказки */
  --ccx-brand:#e8651c;
  --ccx-brand2:#f5872e;
  --ccx-accent:#6ab3f3;    /* правка (edit-chip) · ссылки */
  --ccx-pm:#ff5a5f;        /* запись: точка / отмена */
  --ccx-send-sh:0 5px 14px rgba(232,101,28,.4);
  --ccx-pop-sh:0 14px 34px rgba(0,0,0,.42);
  --ccx-ui:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,sans-serif;
}
/* ── Светлая тема (эталон :root[data-theme=light] .cv) ─────────────────────── */
:root[data-theme="light"] .cc-composer{
  --ccx-pill:#eef1f5; --ccx-panel3:#e2e7ee; --ccx-line:#dde3ea;
  --ccx-text:#12161c; --ccx-muted:#67707c; --ccx-faint:#9aa4b0;
  --ccx-accent:#2b8ad6;
  --ccx-pop-sh:0 10px 28px rgba(16,22,32,.16);
}

/* ── Обёртка (якорь для absolute-попапов) ─────────────────────────────────── */
.cc-composer{ position:relative; font-family:var(--ccx-ui); }
.cc-composer *{ box-sizing:border-box; }
/* [hidden] должен побеждать display:flex/grid состояний (иначе скрытые плашки/recbar/попапы видны) */
.cc-composer [hidden]{ display:none !important; }

/* ── A. Пилюля (эталон .cc-box 430: r999 · pad 2/4 · gap 5 · фон panel2) ───── */
.cc-composer .cc-box{
  display:flex; align-items:center; gap:5px;
  padding:2px 4px; border-radius:999px;
  background:var(--ccx-pill); border:1px solid var(--ccx-line);
  transition:border-color .15s;
}
.cc-composer .cc-box:focus-within{ border-color:var(--ccx-brand); }        /* фокус — рамка брендовая */

/* D. Многострочный: растёт вверх, радиус 20 (эталон .cc-box--multi 423) */
.cc-composer .cc-box.is-multi{ align-items:flex-end; border-radius:20px; }

/* ── Кнопки-зоны attach / emoji / mic (эталон 432/458: 28×28 круг, muted) ──── */
.cc-composer .cc-attach,
.cc-composer .cc-emoji,
.cc-composer .cc-act{
  width:28px; height:28px; flex:none; border:0; border-radius:50%;
  background:transparent; color:var(--ccx-muted); cursor:pointer;
  display:grid; place-items:center; padding:0;
  -webkit-tap-highlight-color:transparent; transition:background .15s,color .15s;
}
.cc-composer .cc-attach:hover,
.cc-composer .cc-emoji:hover,
.cc-composer .cc-act:not(.is-send):hover{ background:var(--ccx-panel3); color:var(--ccx-brand); }
.cc-composer .cc-attach svg,
.cc-composer .cc-act svg{ width:16px; height:16px; display:block;  /* = чат/ЛС (cc-box) 16px */
  stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.cc-composer .cc-emoji{ font-size:17px; line-height:1; }                    /* эталон .cc-emoji 458: глиф 😊 17px */
.cc-composer .cc-emoji.is-active{ background:var(--ccx-panel3); color:var(--ccx-brand); }

/* ── textarea (эталон .cc-box textarea 434: 14/18 · pad 5/4 · max 150) ─────── */
.cc-composer .cc-input{
  flex:1; min-width:0; background:transparent; border:0; outline:none; resize:none;
  color:var(--ccx-text); font:400 14px/18px var(--ccx-ui); padding:5px 4px;
  max-height:150px; overflow-y:auto; scrollbar-width:none;
}
.cc-composer .cc-input::-webkit-scrollbar{ display:none; }
.cc-composer .cc-input::placeholder{ color:var(--ccx-faint); }

/* ── B. Правая кнопка — ОДНА, морфит по состоянию (эталон: пусто 🎤 → тап 📷 →
      текст ✈️ → правка ✓). Иконки переключаются классами формы. ───────────── */
.cc-composer .cc-act .cc-ic{ display:none; }
.cc-composer .cc-act .cc-ic-mic{ display:block; }                          /* дефолт: микрофон */
.cc-composer.is-video   .cc-act .cc-ic-mic{ display:none; }
.cc-composer.is-video   .cc-act .cc-ic-video{ display:block; }             /* админ: тап 🎤 → камера */
.cc-composer.has-text   .cc-act .cc-ic-mic,
.cc-composer.has-text   .cc-act .cc-ic-video{ display:none; }
.cc-composer.has-text   .cc-act .cc-ic-send{ display:block; }              /* есть текст → ✈️ */
.cc-composer.is-edit    .cc-act .cc-ic-mic,
.cc-composer.is-edit    .cc-act .cc-ic-video,
.cc-composer.is-edit    .cc-act .cc-ic-send{ display:none; }
.cc-composer.is-edit    .cc-act .cc-ic-check{ display:block; }             /* правка → ✓ */
/* Вид кнопки-отправки: градиент бренда + белый + тень (эталон .cc-send 437) */
.cc-composer.has-text .cc-act,
.cc-composer.is-edit  .cc-act{
  color:#fff; background:linear-gradient(135deg,var(--ccx-brand),var(--ccx-brand2));
  box-shadow:var(--ccx-send-sh);
}
.cc-composer .cc-act:disabled{ opacity:.4; box-shadow:none; cursor:default; }
/* Без голоса (комментарии/ЛС-текст): правая кнопка = всегда ✈️; пусто → приглушённая disabled */
.cc-composer.cc-novoice .cc-act .cc-ic-mic{ display:none; }
.cc-composer.cc-novoice:not(.has-text):not(.is-edit) .cc-act .cc-ic-send{ display:block; }
.cc-composer.cc-novoice:not(.has-text):not(.is-edit) .cc-act{ color:var(--ccx-muted); background:transparent; box-shadow:none; }
/* CTA (гостевая): кнопка всегда ✈️ активна (тап = действие/переход) */
.cc-composer.cc-cta .cc-act .cc-ic-mic{ display:none; }
.cc-composer.cc-cta .cc-act .cc-ic-send{ display:block; }
.cc-composer.cc-cta .cc-act{ color:#fff; background:linear-gradient(135deg,var(--ccx-brand),var(--ccx-brand2)); box-shadow:var(--ccx-send-sh); }

/* ── E. Плашка ответа/правки (эталон .cc-reply-chip 439 / .cc-edit-chip 451) ── */
.cc-composer .cc-reply{
  display:flex; align-items:center; gap:11px; margin-bottom:8px;
  background:var(--ccx-pill); border:1px solid var(--ccx-line);
  border-left:3px solid var(--ccx-brand); border-radius:11px; padding:8px 12px;
}
.cc-composer .cc-reply .rc-name{ font-size:12px; font-weight:700; color:var(--ccx-brand2); display:flex; align-items:center; gap:5px; }
.cc-composer .cc-reply .rc-text{ font-size:12px; color:var(--ccx-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cc-composer .cc-reply .rc-x{ margin-left:auto; width:28px; height:28px; flex:none; border:0; border-radius:8px; background:var(--ccx-panel3); color:var(--ccx-muted); cursor:pointer; }
.cc-composer .cc-reply.is-edit{ border-left-color:var(--ccx-accent); }     /* правка — синий accent */
.cc-composer .cc-reply.is-edit .rc-name{ color:var(--ccx-accent); }

/* ── F. Превью вложения (эталон .cc-attach-preview 453) ────────────────────── */
.cc-composer .cc-preview{
  display:flex; align-items:center; gap:11px; margin-bottom:8px;
  background:var(--ccx-pill); border:1px solid var(--ccx-line); border-radius:14px; padding:8px 10px;
}
.cc-composer .cc-preview .ap-thumb{ width:44px; height:44px; flex:none; border-radius:10px; object-fit:cover; border:1px solid var(--ccx-line); background:var(--ccx-panel3); }
.cc-composer .cc-preview .ap-name{ font-size:13px; font-weight:600; color:var(--ccx-text); }
.cc-composer .cc-preview .ap-sub{ font-size:11.5px; color:var(--ccx-faint); }             /* размер файла */
.cc-composer .cc-preview .ap-x{ margin-left:auto; width:28px; height:28px; flex:none; border:0; border-radius:8px; background:var(--ccx-panel3); color:var(--ccx-muted); cursor:pointer; }

/* ── H. Запись голоса — recbar (эталон .cc-recbar 443) ─────────────────────── */
.cc-composer .cc-recbar,
.cc-composer .cc-circ{
  display:flex; align-items:center; gap:8px; padding:2px 4px 2px 12px;
  border-radius:999px; background:var(--ccx-pill); border:1px solid var(--ccx-line);
}
.cc-composer .cc-circ{ padding-left:6px; }
.cc-composer .cc-circ .circ-preview{ width:26px; height:26px; flex:none; border-radius:50%; border:2px solid var(--ccx-brand2); background:radial-gradient(circle at 50% 35%,#3a2f5c,#201a34); }
.cc-composer .rec-dot{ width:9px; height:9px; flex:none; border-radius:50%; background:var(--ccx-pm); animation:ccx-blink 1s steps(2,start) infinite; }
.cc-composer .rec-time{ font-variant-numeric:tabular-nums; color:var(--ccx-text); font-size:13px; min-width:44px; }
.cc-composer .rec-hint{ flex:1; color:var(--ccx-faint); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cc-composer .rec-cancel{ width:28px; height:28px; flex:none; border:0; border-radius:50%; background:transparent; color:var(--ccx-pm); cursor:pointer; display:grid; place-items:center; }
.cc-composer .rec-send{ width:28px; height:28px; flex:none; border:0; border-radius:50%; cursor:pointer; color:#fff; display:grid; place-items:center; background:linear-gradient(135deg,var(--ccx-brand),var(--ccx-brand2)); box-shadow:var(--ccx-send-sh); }
.cc-composer .rec-send svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
@keyframes ccx-blink{ 50%{ opacity:.25; } }
/* замок (эталон .rec-lock 467) */
.cc-composer .rec-lock{ display:inline-flex; flex-direction:column; align-items:center; gap:3px; color:var(--ccx-faint); font-size:9.5px; text-align:center; flex:none; }
.cc-composer .rec-lock .lk{ width:30px; height:34px; border-radius:16px; background:var(--ccx-pill); border:1px solid var(--ccx-line); display:grid; place-items:center; color:var(--ccx-muted); }

/* ── H. Триммер кружка (эталон .cc-trim 479 / .ct-* 480-490) ───────────────── */
.cc-composer .cc-trim{ display:flex; align-items:center; gap:7px; padding:2px 4px 2px 8px; border-radius:999px; background:var(--ccx-pill); border:1px solid var(--ccx-line); }
.cc-composer .ct-strip{ position:relative; flex:1; min-width:0; display:flex; height:28px; border-radius:7px; overflow:hidden; }
.cc-composer .ct-strip>i{ flex:1; min-width:0; display:block; }
.cc-composer .ct-dim{ position:absolute; top:0; bottom:0; background:rgba(0,0,0,.5); z-index:1; }
.cc-composer .ct-dim-l{ left:0; } .cc-composer .ct-dim-r{ right:0; }
.cc-composer .ct-sel{ position:absolute; top:0; bottom:0; border-top:2px solid #f5c542; border-bottom:2px solid #f5c542; display:flex; align-items:center; justify-content:center; box-sizing:border-box; z-index:2; }
.cc-composer .ct-h{ position:absolute; top:-2px; bottom:-2px; width:14px; background:#f5c542; display:grid; place-items:center; }
.cc-composer .ct-h-l{ left:-2px; border-radius:8px 0 0 8px; } .cc-composer .ct-h-r{ right:-2px; border-radius:0 8px 8px 0; }
.cc-composer .ct-h>span{ width:3px; height:16px; background:rgba(40,30,0,.55); border-radius:3px; }
.cc-composer .ct-time{ font-size:11.5px; font-weight:700; color:#fff; background:rgba(0,0,0,.55); padding:2px 10px; border-radius:999px; font-variant-numeric:tabular-nums; }

/* ── эмодзи-панель (эталон р.18: сетка 7×28, cc-emoji-panel; де-скоуп) ─────── */
.cc-composer .cc-emojigrid{
  position:absolute; right:6px; bottom:calc(100% + 6px); z-index:40;
  display:grid; grid-template-columns:repeat(7,28px); gap:3px; padding:8px;
  background:var(--ccx-pill); border:1px solid var(--ccx-line); border-radius:14px; box-shadow:var(--ccx-pop-sh);
}
.cc-composer .cc-emojigrid[hidden]{ display:none; }
.cc-composer .cc-emojigrid button{ width:28px; height:28px; border:0; background:transparent; border-radius:7px; font-size:19px; line-height:1; cursor:pointer; display:grid; place-items:center; -webkit-tap-highlight-color:transparent; }
.cc-composer .cc-emojigrid button:hover{ background:var(--ccx-panel3); }

/* ── G. Меню вложения (эталон .cmenu 411) ─────────────────────────────────── */
.cc-composer .cc-menu{
  position:absolute; left:6px; bottom:calc(100% + 6px); z-index:40;
  width:238px; padding:6px; background:var(--ccx-pill); border:1px solid var(--ccx-line);
  border-radius:12px; box-shadow:var(--ccx-pop-sh);
}
.cc-composer .cc-menu[hidden]{ display:none; }
.cc-composer .cc-menu-i{ display:flex; align-items:center; gap:11px; height:38px; padding:0 10px; border-radius:9px; font:500 13.5px/1 var(--ccx-ui); color:var(--ccx-text); cursor:pointer; }
.cc-composer .cc-menu-i:hover{ background:var(--ccx-panel3); }
.cc-composer .cc-menu-i .ic{ width:20px; height:20px; flex:none; display:grid; place-items:center; color:var(--ccx-brand); }
.cc-composer .cc-menu-i .ic svg{ width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; display:block; }
.cc-composer .cc-menu-i .chev{ margin-left:auto; opacity:.55; font-weight:700; }

/* ── J. Форматирование по выделению (эталон .fmtbar 416) ───────────────────── */
.cc-composer .cc-fmt{
  position:absolute; z-index:45; display:inline-flex; gap:2px; padding:5px 6px;
  background:var(--ccx-pill); border:1px solid var(--ccx-line); border-radius:999px; box-shadow:var(--ccx-pop-sh);
}
.cc-composer .cc-fmt[hidden]{ display:none; }
.cc-composer .cc-fmt button{ min-width:30px; height:30px; padding:0 7px; border:0; background:none; border-radius:7px; cursor:pointer; color:var(--ccx-text); font:600 13px/1 var(--ccx-ui); display:grid; place-items:center; }
.cc-composer .cc-fmt button:hover{ background:var(--ccx-panel3); }
.cc-composer .cc-fmt .i{ font-style:italic; } .cc-composer .cc-fmt .u{ text-decoration:underline; } .cc-composer .cc-fmt .s{ text-decoration:line-through; }

/* ── K. Автодополнение @ (эталон .cc-ac 461) ──────────────────────────────── */
.cc-composer .cc-ac{
  position:absolute; left:0; bottom:calc(100% + 6px); z-index:44;
  width:100%; max-width:300px; padding:5px; background:var(--ccx-pill);
  border:1px solid var(--ccx-line); border-radius:12px; box-shadow:var(--ccx-pop-sh);
}
.cc-composer .cc-ac[hidden]{ display:none; }
.cc-composer .cc-ac-i{ display:flex; align-items:center; gap:9px; height:38px; padding:0 9px; border-radius:9px; cursor:pointer; font-size:13.5px; color:var(--ccx-text); }
.cc-composer .cc-ac-i:hover,.cc-composer .cc-ac-i.on{ background:var(--ccx-panel3); }
.cc-composer .cc-ac-i .av{ width:26px; height:26px; flex:none; border-radius:50%; display:grid; place-items:center; font-size:11.5px; font-weight:700; color:#fff; }
.cc-composer .cc-ac-i .u{ color:var(--ccx-muted); font-size:12px; }
.cc-composer .cc-ac-i .em{ font-size:19px; width:26px; text-align:center; }

/* ── M. Медленный режим (эталон .cc-slow 458) ─────────────────────────────── */
.cc-composer .cc-slow{ display:flex; align-items:center; gap:10px; padding:8px 14px; border-radius:999px; background:var(--ccx-pill); border:1px solid var(--ccx-line); color:var(--ccx-muted); font-size:13px; }
.cc-composer .cc-slow svg{ width:18px; height:18px; flex:none; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.cc-composer .cc-slow .sm-timer{ margin-left:auto; font-variant-numeric:tabular-nums; color:var(--ccx-brand2); font-weight:700; }

/* ── Адаптив (эталон: мобилка эмодзи-сетка 6 колонок) ──────────────────────── */
@media (max-width:420px){
  .cc-composer .cc-emojigrid{ grid-template-columns:repeat(6,28px); }
}