/* Экран чата: размытый аватар персонажа фоном, стеклянные шапка (52 px) и композер в одну строку,
   на планшете/десктопе — колонка комфортной ширины по центру. В fullscreen на телефоне шапка ложится
   в полосу кнопок Telegram (html.is-fullscreen, --sat-sys/--sat-tg/--tg-band-*). «Персонаж пишет первым» — chat-nudge.css */
@import url("./chat-nudge.css");
@import url("./chat-funnel.css");

.chat {
  --col: 760px;
  --pad-x: max(var(--gutter), calc((100% - var(--col)) / 2));
  --me: linear-gradient(165deg, var(--violet), #6d3df0);
  --me-end: #6d3df0;
  --them: color-mix(in srgb, var(--card-2) 88%, transparent);
  --glass: color-mix(in srgb, var(--bg) 64%, transparent);
  position: relative; isolation: isolate;
  height: 100%; display: flex; flex-direction: column; overflow: hidden;
}

/* Фон: самый маленький WebP аватара, размытый и затемнённый — рисуется один раз, прокрутку не нагружает */
.chat__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--bg); }
.chat__bg-img {
  position: absolute; left: -10%; top: -10%; width: 120%; height: 120%;
  object-fit: cover;
  filter: blur(30px) saturate(1.3);
  opacity: 0.6;
}
.chat__bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(90% 45% at 50% 0%, rgba(139, 92, 246, 0.2), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 50%, transparent), color-mix(in srgb, var(--bg) 80%, transparent) 45%, color-mix(in srgb, var(--bg) 93%, transparent));
}

/* ---------- Шапка (стекло поверх фона — как и композер) ---------- */
.chat__head, .composer {
  position: relative; z-index: 2; flex: 0 0 auto;
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
}
.chat__head { padding-top: var(--sat); border-bottom: 1px solid var(--line); }
.chat__head-in {
  display: flex; align-items: center; gap: 2px;
  max-width: calc(var(--col) + 2 * var(--gutter));
  margin: 0 auto;
  min-height: 52px;
  padding: 4px 4px 4px var(--gutter);
}
.chat__back { margin-left: -10px; }
.chat__back .icon { width: 22px; height: 22px; }
.chat__head .btn--icon { background: transparent; border-color: transparent; color: var(--text); }
.chat__head .btn--icon:active { background: var(--card-2); }
.chat__who-btn { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 44px; padding: 2px 6px 2px 0; text-align: left; color: inherit; border-radius: 14px; }
.chat__who-btn:active { opacity: 0.7; }
.chat__ava-wrap { position: relative; flex: 0 0 auto; width: 38px; height: 38px; padding: 2px; border-radius: 50%; background: var(--grad-diag); }
.chat__ava { width: 100%; height: 100%; border-radius: 50%; border: 2px solid var(--bg); }
.chat__ava .avatar-fallback { font-size: 14px; }
.chat__ava-wrap::after {
  content: ""; position: absolute; right: -1px; bottom: -1px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 0 2px var(--bg), 0 0 6px var(--green);
}
.chat__who { display: flex; flex-direction: column; min-width: 0; }
/* Имя и пометка «ИИ» (components/aiBadge.js) в одну строку: имя сокращается, пометка всегда видна */
.chat__name-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.chat__name { font-weight: 800; font-size: 15.5px; line-height: 1.2; }
.ai-badge {
  flex: 0 0 auto;
  padding: 2px 5px;
  border-radius: 6px;
  border: 1px solid var(--line-2);
  font-size: 10px; font-weight: 800; line-height: 1; letter-spacing: 0.04em;
  color: var(--muted);
}
.chat__status { display: flex; align-items: center; gap: 2px; margin-top: 1px; font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--green); white-space: nowrap; }
.chat__status:not([data-kind="online"]) { color: var(--pink); }
.typing--inline { padding: 0 0 0 3px; gap: 2.5px; align-self: flex-end; margin-bottom: 4px; }
.typing--inline i { width: 3.5px; height: 3.5px; background: currentColor; }

/* Fullscreen на телефоне (К1): шапка — в полосе кнопок Telegram, между «Назад» слева и «⌄ ⋯» справа.
   Там помещаются имя и звонок; меню открывается тапом по имени (header.js), своя кнопка меню спрятана */
@media (max-width: 599px) {
  .is-fullscreen .chat__head { padding-top: var(--sat-sys, var(--sat)); }
  .is-fullscreen .chat__head-in {
    min-height: var(--sat-tg, 46px);
    padding: 0 var(--tg-band-r, 96px) 0 var(--tg-band-l, 116px);
  }
  .is-fullscreen .chat__head .chat__more { display: none; }
  .is-fullscreen .chat__who-btn { gap: 8px; min-height: 40px; }
  .is-fullscreen .chat__ava-wrap { width: 34px; height: 34px; }
  .is-fullscreen .chat__name { font-size: 14.5px; }
  .is-fullscreen .chat__status { font-size: 11.5px; }
  .is-fullscreen .chat__head .btn--icon { width: 40px; height: 40px; min-height: 40px; }
}
/* Планшет в fullscreen: полоса широкая — вся шапка в ней, между кнопками Telegram */
@media (min-width: 600px) {
  .is-fullscreen .chat__head { padding-top: var(--sat-sys, var(--sat)); }
  .is-fullscreen .chat__head-in {
    min-height: var(--sat-tg, 46px);
    padding: 0 max(var(--tg-band-r, 96px), 4px) 0 max(var(--tg-band-l, 116px), var(--gutter));
  }
}

/* ---------- Лента ---------- */
.chat__body { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.chat__list {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding: 14px var(--pad-x) 14px;
}
.chat__track { margin-top: auto; display: flex; flex-direction: column; }
.chat__loading-top { display: flex; justify-content: center; padding: 2px 0 12px; }

.chat__day { align-self: center; margin: 18px 0 2px; }
.chat__day:first-child { margin-top: 2px; }
.chat__day span {
  display: inline-block; padding: 5px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 700; color: var(--muted);
  background: var(--glass); border: 1px solid var(--line);
}

/* ---------- Сообщения ---------- */
@keyframes msg-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
.msg { display: flex; flex-direction: column; max-width: min(84%, 560px); margin-top: 14px; animation: msg-in 260ms var(--ease) both; }
.msg--static { animation: none; }
.msg:first-child, .chat__day + .msg { margin-top: 10px; }
.msg--cont { margin-top: 3px; }
.msg--user { align-self: flex-end; align-items: flex-end; transform-origin: 100% 100%; }
.msg--assistant { align-self: flex-start; align-items: flex-start; transform-origin: 0 100%; }
.msg--system { align-self: center; max-width: 92%; text-align: center; margin: 4px 0 6px; }
.msg--pending { opacity: 0.72; }
/* Не отправлено персонажу (например, голосовое отклонил фильтр): красная обводка и подпись под пузырём */
.msg--error .bubble { box-shadow: 0 0 0 2px var(--red); }
.msg--error::after { content: "⚠ Не отправлено персонажу"; margin-top: 4px; padding: 0 6px; font-size: 12px; line-height: 1.35; color: var(--red); font-weight: 600; }
.msg--user.msg--error::after { text-align: right; }

.bubble {
  position: relative; padding: 8px 13px; border-radius: 20px;
  font-size: 15.5px; line-height: 1.42; overflow-wrap: anywhere;
  user-select: text; -webkit-user-select: text;
}
.bubble__text { white-space: pre-wrap; }
.msg--user .bubble { color: #fff; background: var(--me); box-shadow: 0 6px 20px rgba(109, 61, 240, 0.28); }
.msg--assistant .bubble { color: var(--text); background: var(--them); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); }

/* Группа: у соседних углы «склеены», хвостик — только у последнего */
.msg--user:not(.msg--tail) .bubble { border-bottom-right-radius: 6px; }
.msg--user.msg--cont .bubble { border-top-right-radius: 6px; }
.msg--assistant:not(.msg--tail) .bubble { border-bottom-left-radius: 6px; }
.msg--assistant.msg--cont .bubble { border-top-left-radius: 6px; }
.msg--tail:not(.msg--media) .bubble::before {
  content: "";
  position: absolute; bottom: 0;
  width: 11px; height: 18px;
  -webkit-mask: var(--tail) center / 100% 100% no-repeat;
  mask: var(--tail) center / 100% 100% no-repeat;
}
.msg--user.msg--tail .bubble { border-bottom-right-radius: 0; }
.msg--user.msg--tail .bubble::before {
  right: -11px; background: var(--me-end);
  --tail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 18'%3E%3Cpath d='M0 0C0 10 3 15 11 18H0Z'/%3E%3C/svg%3E");
}
.msg--assistant.msg--tail .bubble { border-bottom-left-radius: 0; }
.msg--assistant.msg--tail .bubble::before {
  left: -11px; background: var(--them);
  --tail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 18'%3E%3Cpath d='M11 0C11 10 8 15 0 18H11Z'/%3E%3C/svg%3E");
}

/* *Действия*: курсив, мягкий лавандовый; строка-ремарка целиком — отдельным блоком */
.act { font-style: italic; color: color-mix(in srgb, var(--violet) 32%, var(--muted)); }
.act--line { display: block; margin: 1px 0; font-size: 14.5px; }
.rt-gap { display: block; height: 8px; }
.msg--user .act { color: rgba(255, 255, 255, 0.78); }

/* Время в углу пузыря; распорка той же ширины в конце текста освобождает под него место */
.bubble__pad, .bubble__meta { font-size: 11px; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bubble__pad { display: inline-block; visibility: hidden; padding-left: 12px; user-select: none; -webkit-user-select: none; }
.bubble__meta {
  position: absolute; right: 12px; bottom: 7px;
  color: var(--muted-2);
  pointer-events: none; user-select: none; -webkit-user-select: none;
}
.msg--user .bubble__meta { color: rgba(255, 255, 255, 0.7); }
.bubble__cost { display: inline-flex; align-items: center; margin-right: 5px; }
.bubble__cost .icon { width: 10px; height: 10px; margin-right: 1px; }
.bubble__meta--static { position: static; display: block; margin-top: 4px; text-align: right; }
.bubble__meta--sending::before {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 4px; vertical-align: -1px;
  border: 1.5px solid currentColor; border-top-color: transparent; border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
.bubble__meta--glass {
  right: 8px; bottom: 8px; padding: 4px 7px; border-radius: 999px; color: #fff;
  background: rgba(10, 8, 20, 0.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

/* 🔊 в строке времени ответа: видимая иконка 15 px, а сама кнопка — 40×40 с отрицательными полями (в строке
   занимает 15×15 + 6 px до цены/времени). Распорка .bubble__tts-pad держит под неё место в конце текста;
   кнопка над соседями (z-index 2 — выше и «тапа» карточки фото .media-card__tap с z-index 1: закрытое превью и
   открытое фото часто идут сразу за репликой), чтобы следующий пузырь не отнимал у неё край. Список обрезает своё
   содержимое (overflow), так что над шапкой и композером кнопка не окажется. Остальное — в меню долгого тапа */
.bubble__tts-pad { display: inline-block; width: 21px; }
.bubble__meta--tts { display: inline-flex; align-items: center; }
.msg__btn--tts {
  position: relative; z-index: 2; pointer-events: auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin: -12.5px -6.5px -12.5px -12.5px; border-radius: 50%;
  color: var(--muted);
  transition: color var(--t-fast), transform var(--t-fast) var(--ease);
}
.msg__btn--tts .icon { width: 15px; height: 15px; }
.msg__btn--tts.is-active { color: var(--pink); }
.msg__btn--tts.is-loading { animation: blink 0.9s infinite; }
.msg__btn--tts:active { transform: scale(0.9); color: var(--text); }
@media (hover: hover) { .msg__btn--tts:hover { color: var(--text); } }
/* На тач-устройствах долгий тап открывает наше меню («Копировать» в нём) — системное выделение текста не мешает */
@media (hover: none) { .bubble { user-select: none; -webkit-user-select: none; } }
.msg__note { margin-top: 4px; padding: 0 6px; font-size: 12px; line-height: 1.35; color: var(--muted); }

.msg-sys {
  padding: 7px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 600; color: var(--muted);
  background: var(--glass);
  border: 1px solid rgba(139, 92, 246, 0.3);
}

/* Печатает: три точки, затем текст с кареткой */
.bubble--streaming { min-width: 60px; }
.bubble--streaming .typing { padding: 7px 4px 5px; }
.bubble--streaming.has-text .bubble__text::after {
  content: ""; display: inline-block;
  width: 2px; height: 1.05em; margin-left: 2px; vertical-align: text-bottom;
  border-radius: 1px; background: var(--pink);
  animation: blink 0.9s infinite;
}
.bubble--sending { display: flex; align-items: center; gap: 10px; }

/* ---------- Голосовые ---------- */
.bubble--voice { min-width: 232px; }
.voice { display: flex; align-items: center; gap: 10px; min-width: 200px; padding: 2px 0; }
.voice__play {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.2); color: #fff;
  transition: transform var(--t-fast) var(--ease);
}
.voice__play:active { transform: scale(0.92); }
.voice__play .icon { width: 17px; height: 17px; }
.msg--assistant .voice__play { background: var(--grad-diag); box-shadow: 0 4px 14px rgba(255, 45, 120, 0.35); }
.voice__wave { --p: 0%; position: relative; flex: 1 1 auto; min-width: 90px; max-width: 170px; height: 30px; cursor: pointer; color: #fff; }
.msg--assistant .voice__wave { color: var(--pink); }
.voice__bars { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; gap: 2px; }
.voice__bars i { flex: 0 1 3px; min-width: 2px; border-radius: 2px; background: currentColor; opacity: 0.35; }
.msg--assistant .voice__bars:not(.voice__bars--fill) i { background: var(--muted); }
.voice__bars--fill { clip-path: inset(0 calc(100% - var(--p)) 0 0); transition: clip-path 250ms linear; }
.voice__bars--fill i { opacity: 1; }
.voice__dur { min-width: 30px; font-size: 12px; opacity: 0.85; font-variant-numeric: tabular-nums; text-align: right; }
.voice__transcript { margin-top: 6px; font-size: 14px; opacity: 0.9; }
.voice__text { margin-top: 8px; }
/* «записывает голосовое…», пока озвучиваются последние фразы */
.voice-status {
  display: flex; align-items: center; gap: 6px;
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line);
  font-size: 12px; font-weight: 600; color: var(--pink); white-space: nowrap;
}
.voice-status .icon { width: 14px; height: 14px; animation: blink 1.2s infinite; }
.voice-status .typing { padding: 0; gap: 3px; }
.voice-status .typing i { width: 4px; height: 4px; background: var(--pink); }

/* ---------- Фото и видео ---------- */
.media-card, .gen-card { position: relative; width: min(72vw, 300px); border-radius: 20px; overflow: hidden; }
.media-card { background: var(--them); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }
.media-card__frame {
  position: relative; width: 100%;
  background: linear-gradient(90deg, var(--card) 25%, var(--card-2) 50%, var(--card) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}
.media-card__frame.is-loaded, .media-card__frame.is-broken { animation: none; background: var(--card); }
.media-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.35s var(--ease); }
.media-card__frame.is-loaded .media-card__img { opacity: 1; }
.media-card__frame.is-broken::after { content: "Не удалось загрузить"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--muted); }
.media-card__play {
  position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff;
  background: rgba(10, 8, 20, 0.45); border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.media-card__play .icon { width: 24px; height: 24px; margin-left: 3px; }
.media-card__badge {
  position: absolute; left: 8px; top: 8px; display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; color: #fff;
  background: rgba(10, 8, 20, 0.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.media-card__badge .icon { width: 13px; height: 13px; }
.media-card__caption { position: relative; padding: 9px 13px 8px; font-size: 14.5px; line-height: 1.4; }
.media-card__tap { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.media-card__tap:active { background: rgba(255, 255, 255, 0.06); }

/* Генерация: размытый аватар, мерцание, прогресс и таймер — того же размера, что и будущее фото */
.gen-card { isolation: isolate; background: var(--card); border: 1px solid rgba(139, 92, 246, 0.35); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }
.gen-card__bg { position: absolute; left: -20%; top: -20%; width: 140%; height: 140%; z-index: -2; object-fit: cover; filter: blur(22px) saturate(1.3); opacity: 0.8; }
.gen-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.09) 50%, transparent 70%) 0 0 / 200% 100%,
    linear-gradient(180deg, rgba(11, 10, 20, 0.2), rgba(11, 10, 20, 0.6));
  animation: shimmer 1.8s linear infinite;
}
.gen-card__body { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 18px; text-align: center; }
.gen-card__icon {
  position: relative; width: 58px; height: 58px; margin-bottom: 4px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  color: #fff; background: var(--grad-diag); box-shadow: var(--glow);
}
.gen-card__icon .icon { width: 26px; height: 26px; }
.gen-card__icon::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--pink); animation: pulse-ring 1.6s var(--ease) infinite; }
.gen-card__title { font-size: 15px; font-weight: 800; color: var(--text); }
.gen-card__hint { font-size: 12.5px; line-height: 1.4; color: var(--muted); overflow-wrap: anywhere; }
.gen-card__progress { width: 68%; height: 4px; margin-top: 6px; border-radius: 2px; overflow: hidden; background: rgba(255, 255, 255, 0.12); }
.gen-card__progress i { display: block; height: 100%; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform 1s linear; }
.gen-card__timer { font-size: 12px; font-weight: 700; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.gen-card--failed { background: color-mix(in srgb, var(--red) 12%, var(--card)); border-color: rgba(255, 77, 94, 0.4); }
.gen-card--failed::before { display: none; }
.gen-card--failed .gen-card__body { position: static; padding: 20px 18px; }
.gen-card--failed .gen-card__icon { width: 48px; height: 48px; background: rgba(255, 77, 94, 0.2); box-shadow: none; color: var(--red); }
.gen-card--failed .gen-card__icon::after { display: none; }
.gen-card--failed .gen-card__hint { color: rgba(242, 240, 255, 0.82); }
.gen-card__retry { margin-top: 6px; }
/* Закрытая генерация: «Заплатишь, только когда откроешь»; сбой — «Гемы не списаны» / «Гемы вернули» */
.gen-card__note { font-size: 12px; font-weight: 700; color: var(--gem); }
.gen-card--failed .gen-card__note { color: var(--green); }

/* ---------- Кнопка «вниз» ---------- */
.chat__jump {
  position: absolute; z-index: 3; bottom: 12px; right: var(--pad-x);
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text); background: color-mix(in srgb, var(--card-2) 88%, transparent);
  border: 1px solid var(--line-2); box-shadow: var(--shadow);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; transform: translateY(10px) scale(0.9); pointer-events: none;
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
.chat__jump.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.chat__jump .icon { width: 20px; height: 20px; transform: rotate(-90deg); }
.chat__jump-badge {
  position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px; padding: 0 5px;
  display: flex; align-items: center; justify-content: center; border-radius: 10px;
  font-size: 11px; font-weight: 800; color: #fff; background: var(--pink); box-shadow: 0 0 0 2px var(--bg);
}

/* ---------- Скелетон загрузки: те же размеры, что у готовой шапки ---------- */
.chat__sk-ava { width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto; }
.chat__sk-name { display: block; width: 96px; height: 14px; margin: 2px 0 3px; }
.chat__sk-status { display: block; width: 56px; height: 10px; margin-top: 3px; }
.chat__sk-btn { flex: 0 0 auto; width: 44px; height: 44px; }
.chat__who-btn--sk { pointer-events: none; }
.chat__sk-track { gap: 12px; }
.chat__sk-bubble { width: 62%; height: 60px; border-radius: 20px; }
.chat__sk-bubble--me { align-self: flex-end; width: 42%; height: 42px; }
.chat__sk-bubble--long { width: 74%; height: 92px; }

@media (min-width: 600px) {
  .media-card, .gen-card { width: 320px; }
  .bubble { font-size: 15px; }
}

/* ---------- Композер: одна строка — поле с кнопкой «Фото / Видео» внутри и круглая кнопка справа ---------- */
.composer { padding: 8px 0 calc(8px + var(--sab)); border-top: 1px solid var(--line); }
.composer__in { max-width: calc(var(--col, 760px) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.composer__price {
  display: inline-flex; align-items: center; gap: 1px; margin-left: 2px;
  padding: 3px 7px 3px 4px; border-radius: 999px;
  font-size: 12px; font-weight: 800; color: var(--amber); background: rgba(255, 181, 71, 0.14);
}
.composer__price .icon { width: 12px; height: 12px; }

.composer__row { display: flex; align-items: flex-end; gap: 8px; }
.composer__field {
  flex: 1; min-width: 0; display: flex; align-items: flex-end;
  border-radius: 22px;
  background: color-mix(in srgb, var(--card) 90%, transparent);
  border: 1px solid var(--line-2);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
/* Подсветка — только когда фокус в самом поле (не на кнопке «Фото / Видео» после закрытия шторки) */
.composer.is-focused .composer__field { border-color: var(--violet); box-shadow: var(--glow-violet); }
/* Поле растёт до 132 px, но не выше четверти доступной высоты: с клавиатурой переписка остаётся видна */
.composer__input {
  flex: 1; min-width: 0; min-height: 44px;
  max-height: min(132px, calc(var(--app-usable-h, var(--app-h)) * 0.25));
  padding: 11px 2px 11px 16px;
  border: 0; outline: none; resize: none; background: transparent;
  font-size: 16px; line-height: 1.4; color: var(--text);
}
.composer__input::placeholder { color: var(--muted-2); }
.composer__media {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
  transition: color var(--t-fast), transform var(--t-fast) var(--ease);
}
.composer__media .icon { width: 22px; height: 22px; }
.composer__media:active { transform: scale(0.92); color: var(--pink); }
.composer__media:disabled { opacity: 0.45; }
@media (hover: hover) { .composer__media:hover:not(:disabled) { color: var(--text); } }
.composer__btn {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; background: var(--grad); box-shadow: var(--glow);
  transition: opacity 160ms var(--ease), transform 220ms var(--ease), box-shadow var(--t-fast), background var(--t-fast);
}
.composer__btn .icon { width: 20px; height: 20px; }
.composer__btn:active { transform: scale(0.92); }
.composer__btn:disabled { opacity: 1; color: var(--muted); background: var(--card-2); box-shadow: none; }
.composer__btn--send .icon { transform: translateX(-1px) rotate(0deg); }
/* Одна кнопка на двух ролях: микрофон, пока пусто, и «отправить», когда есть текст */
.composer__action { position: relative; flex: 0 0 auto; width: 44px; height: 44px; margin-bottom: 1px; }
.composer__action .composer__btn { position: absolute; inset: 0; }
.composer:not(.has-text) .composer__action .composer__btn--send,
.composer.has-text .composer__action .composer__btn--mic {
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: scale(0.4) rotate(-60deg);
  transition: opacity 140ms var(--ease), transform 200ms var(--ease), visibility 0s linear 200ms;
}

/* Запись голосового — та же строка той же высоты (46 = поле с рамкой): лента не прыгает */
.composer__rec {
  display: flex; align-items: center; gap: 10px;
  min-height: 46px; padding: 0 2px 0 14px; border-radius: 22px;
  background: color-mix(in srgb, var(--red) 10%, var(--card));
  border: 1px solid rgba(255, 77, 94, 0.45);
  animation: fade-in var(--t) var(--ease) both;
}
.composer__rec-dot { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--red); box-shadow: 0 0 10px var(--red); }
.composer__rec-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--red); animation: pulse-ring 1.2s ease-out infinite; }
.composer__rec-time { font-variant-numeric: tabular-nums; font-weight: 700; }
.composer__rec-hint { flex: 1; font-size: 13px; color: var(--muted); }
.composer__rec-cancel { width: 40px; height: 40px; min-height: 40px; border-color: transparent; }
.composer__row--rec .composer__btn--rec { margin-bottom: 1px; }

/* Подсказки-ответы — в конце ленты, справа (как будущие реплики). Прячутся, пока в поле текст,
   при открытой клавиатуре (kb-open; до каркаса — фокус поля на тач-устройстве); во время записи — неактивны */
.composer__suggest {
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px;
  margin-top: 12px;
}
.composer__suggest .chip { flex: 0 1 auto; min-width: 0; max-width: 100%; min-height: 40px; color: var(--text); }
.composer__hint {
  white-space: normal; text-align: left; line-height: 1.25; padding-top: 8px; padding-bottom: 8px;
  background: var(--grad-soft); border-color: rgba(139, 92, 246, 0.4); animation: rise-in 300ms var(--ease) both;
}
.composer__hint:active { transform: scale(0.96); }
.composer__hint:nth-child(2) { animation-delay: 40ms; }
.composer__hint:nth-child(3) { animation-delay: 80ms; }
.composer__hint:nth-child(4) { animation-delay: 120ms; }
.composer__suggest.is-typing, .kb-open .composer__suggest { display: none; }
@media (pointer: coarse) { .composer__suggest.is-focused { display: none; } }
.composer__suggest.is-inert { opacity: 0.45; }

/* Шторка «Фото и видео»: что это, сколько ждать и цена */
.media-pick__row { gap: 12px; min-height: 60px; }
.media-pick__icon {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--pink); background: var(--grad-soft);
}
.media-pick__icon .icon { width: 20px; height: 20px; }
.media-pick__row .list-row__title, .media-pick__row .list-row__sub { display: block; }
.media-pick__row .composer__price { flex: 0 0 auto; font-size: 13px; }