/* ══════════════════════════════════════════════════════════════════════════════
   G4 Chat · widget.css — стили виджета чата GIANT4 для сайтов giant4.ae / giant4.ru
   Визуальный язык: чат G4 CRM (см. SPEC-STYLE.md). Тёмная сине-графитовая гамма,
   единственный «горячий» цвет — #FF6600, линейные SVG-иконки, эмодзи в интерфейсе НЕТ.

   ЖЕЛЕЗНОЕ ПРАВИЛО ИЗОЛЯЦИИ: ни одного глобального селектора.
   Всё живёт внутри #g4chat и #g4chat-launcher — иначе Bitrix/aspro_next
   переопределит шрифты, рамки и float'ы.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Токены ─────────────────────────────────────────────────────────────── */
/* Светлая тема — по умолчанию (сайт giant4 светлый).
   Тёмная включается атрибутом data-theme="dark" на #g4chat / #g4chat-launcher. */
#g4chat, #g4chat-launcher {
  --g4c-bg: #FFFFFF;
  --g4c-panel: #F7F8FA;
  --g4c-panel2: #EFF1F5;
  --g4c-line: #E3E6EC;
  --g4c-line2: #0000000f;
  /* рамка при наведении (карточка файла, превью ссылки, кнопки): в тёмной теме
     она была #4a4d58 и в светлой читалась как грязно-серая обводка */
  --g4c-line-hi: #C5CAD4;
  --g4c-scroll: #C3C8D2;      /* ползунок прокрутки — по светлой панели, а не почти чёрный */
  --g4c-red-line: #C0392B55;  /* рамка ошибки: тот же красный, что --g4c-red, с прозрачностью */
  --g4c-blue-soft: #2D6CB51f;
  --g4c-ink: #1C2430;
  --g4c-mut: #5A616D;
  --g4c-mut2: #656C79;   /* мелкий кегль (время, даты, домен) — контраст ≥ 4.5 и на белом, и на пузыре */
  --g4c-accent: #FF6600;
  --g4c-accent-soft: #FF66001a;
  --g4c-glow: #FF8A3D;
  --g4c-ok: #1F9D55;
  --g4c-ok-soft: #1F9D551f;
  --g4c-warn: #B7791F;
  --g4c-warn-soft: #B7791F1f;
  --g4c-red: #C0392B;
  --g4c-red-soft: #C0392B14;
  --g4c-blue: #2D6CB5;
  --g4c-blue-ink: #2D6CB5;
  --g4c-out-bg: #FFF0E4;
  --g4c-out-line: #FFD2B3;
  --g4c-bar: #FFFFFF;
  --g4c-field: #F2F4F7;
  --g4c-ring: #FFFFFF;

  --g4c-body: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --g4c-disp: 'Segoe UI Semibold', 'Segoe UI', system-ui, sans-serif;
  --g4c-mono: 'Cascadia Mono', 'Consolas', ui-monospace, monospace;

  --g4c-r: 12px;
  --g4c-r-sm: 8px;
  --g4c-r-win: 16px;
  --g4c-r-bub: 14px;
  --g4c-sh-win: 0 20px 60px rgba(20, 30, 50, .18), 0 2px 8px rgba(20, 30, 50, .10);
  --g4c-sh-pop: 0 14px 40px rgba(20, 30, 50, .20);
  --g4c-z: 2147480000;

  /* кольцо-отбивка бейджа непрочитанных (цвет страницы под кнопкой) */
  --g4c-ring: #FFFFFF;

  /* отступ снизу: поднимаемся над «липкой» панелью сайта (считает JS) */
  --g4c-lift: 0px;
}

/* Тёмная тема — включается data-theme="dark" (палитра чата CRM) */
#g4chat[data-theme="dark"], #g4chat-launcher[data-theme="dark"] {
  --g4c-bg: #0E1117;
  --g4c-panel: #161A21;
  --g4c-panel2: #1D222B;
  --g4c-line: #272D38;
  --g4c-line2: #34374233;
  --g4c-line-hi: #4a4d58;
  --g4c-scroll: #2c2f38;
  --g4c-red-line: #FF5D5D44;
  --g4c-blue-soft: #5AA7FF1f;
  --g4c-ink: #EDEEF2;
  --g4c-mut: #8B8E98;
  --g4c-mut2: #5C5F6A;
  --g4c-accent-soft: #FF660022;
  --g4c-ok: #3ECF8E;
  --g4c-ok-soft: #3ECF8E1f;
  --g4c-warn: #FFC24B;
  --g4c-warn-soft: #FFC24B1f;
  --g4c-red: #FF5D5D;
  --g4c-red-soft: #FF5D5D1f;
  --g4c-blue: #5AA7FF;
  --g4c-blue-ink: #9FC6FF;
  --g4c-out-bg: #3a2410;
  --g4c-out-line: #FF660044;
  --g4c-bar: #15161b;
  --g4c-field: #111216;
  --g4c-sh-win: 0 24px 70px rgba(0, 0, 0, .55), 0 2px 10px rgba(0, 0, 0, .4);
  --g4c-sh-pop: 0 14px 40px #000b;
  --g4c-ring: #0E1117;
}

/* ── 2. Локальный сброс (шаблон сайта иначе всё перекрасит) ─────────────────── */
/* <ymaps> — элементы Яндекс.Карт (карта пунктов выдачи в чате, 10.10.2026): сброс чата ломал бы их вёрстку */
#g4chat, #g4chat *:not(ymaps), #g4chat-launcher, #g4chat-launcher * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: var(--g4c-body);
  line-height: 1.45;
  letter-spacing: normal;
  text-transform: none;
  text-indent: 0;
  float: none;
  min-width: 0;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

#g4chat button, #g4chat-launcher button {
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  box-shadow: none;
  text-transform: none;
  border-radius: 0;
}

#g4chat input, #g4chat textarea, #g4chat select {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  outline: none;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}

#g4chat a {
  text-decoration: none;
  color: var(--g4c-accent);
  background: none;
}

#g4chat a:hover { text-decoration: none; }

#g4chat img, #g4chat svg, #g4chat-launcher svg {
  max-width: 100%;
  vertical-align: middle;
  border: 0;
}

#g4chat ul, #g4chat li { list-style: none; }

#g4chat :focus-visible, #g4chat-launcher:focus-visible {
  outline: 2px solid var(--g4c-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── 3. Кнопка-лаунчер (замещает собой #g4msgr) ─────────────────────────────── */
#g4chat-launcher {
  position: fixed;
  right: 22px;
  bottom: calc(22px + var(--g4c-lift));
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #FF8A3D, #FF6600);
  color: #fff;
  border: 0;
  cursor: pointer;
  z-index: calc(var(--g4c-z) - 1);
  box-shadow: 0 8px 26px rgba(255, 102, 0, .38), 0 2px 8px rgba(0, 0, 0, .35);
  transition: transform .15s cubic-bezier(.2, .8, .3, 1), box-shadow .15s, opacity .15s;
}

#g4chat-launcher svg { width: 28px; height: 28px; }
#g4chat-launcher:hover { transform: scale(1.06); box-shadow: 0 10px 30px rgba(255, 102, 0, .5); }
#g4chat-launcher:active { transform: scale(.94); }

/* спрятан, когда окно открыто */
#g4chat-launcher.g4c-hide {
  opacity: 0;
  visibility: hidden;
  transform: scale(.8) translateY(8px);
  pointer-events: none;
}

#g4chat-launcher .g4c-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--g4c-accent);
  color: #fff;
  /* кольцо-отбивка под цвет страницы: в светлой теме белое, в тёмной — фон чата */
  border: 2px solid var(--g4c-ring, #fff);
  font: 700 10.5px/16px var(--g4c-body);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

#g4chat-launcher .g4c-badge[hidden] { display: none; }

/* всплывающая подсказка у лаунчера (первый визит) */
#g4chat-launcher .g4c-tip {
  position: absolute;
  right: 72px;
  bottom: 10px;
  white-space: nowrap;
  background: var(--g4c-panel);
  color: var(--g4c-ink);
  border: 1px solid var(--g4c-line);
  border-radius: 10px;
  padding: 7px 12px;
  font-size: 12.5px;
  box-shadow: var(--g4c-sh-pop);
  animation: g4cPopIn .16s ease-out;
}

#g4chat-launcher .g4c-tip[hidden] { display: none; }

/* ── 4. Корень окна ────────────────────────────────────────────────────────── */
#g4chat {
  position: fixed;
  inset: 0;
  z-index: var(--g4c-z);
  pointer-events: none;
  display: none;
  font: 14px/1.45 var(--g4c-body);
  color: var(--g4c-ink);
}

#g4chat.g4c-on { display: block; }

#g4chat .g4c-win {
  position: absolute;
  right: 22px;
  bottom: calc(22px + var(--g4c-lift));
  width: min(380px, calc(100vw - 32px));
  height: min(640px, calc(100vh - 110px));
  min-height: 420px;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--g4c-panel);
  border: 1px solid var(--g4c-line);
  border-radius: var(--g4c-r-win);
  box-shadow: var(--g4c-sh-win);
  animation: g4cWinIn .2s cubic-bezier(.2, .8, .3, 1);
  transform-origin: 100% 100%;
}

/* ── 5. Шапка ──────────────────────────────────────────────────────────────── */
#g4chat .g4c-head {
  flex: none;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: var(--g4c-bar);
  border-bottom: 1px solid var(--g4c-line);
}

#g4chat .g4c-ava {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF6600, #FFB347);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 13px/1 var(--g4c-disp);
  letter-spacing: .02em;
  margin-top: 1px;
  position: relative;
  overflow: hidden;
}
/* иконка бота/GIANT4 поверх запасного «G4» (29.07); не загрузилась — виден градиент */
#g4chat .g4c-ava img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

#g4chat .g4c-hi {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 1px;
}

#g4chat .g4c-hi .nm {
  font-size: 14px;
  font-weight: 600;
  color: var(--g4c-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#g4chat .g4c-hi .st {
  font-size: 11.5px;
  color: var(--g4c-mut);
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#g4chat .g4c-hi .st svg { flex: none; width: 12px; height: 12px; }
#g4chat .g4c-hi .st.ai svg { color: var(--g4c-blue); }
#g4chat .g4c-hi .st.man svg { color: var(--g4c-accent); }
#g4chat .g4c-hi .st .dot {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--g4c-ok);
}

#g4chat .g4c-hact {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

#g4chat .g4c-hbtns { display: flex; gap: 4px; }

#g4chat .g4c-hb {
  width: 28px;
  height: 28px;
  border-radius: var(--g4c-r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--g4c-mut);
  transition: color .12s, background .12s;
}

#g4chat .g4c-hb svg { width: 17px; height: 17px; }
#g4chat .g4c-hb:hover { color: var(--g4c-ink); background: var(--g4c-panel2); }

/* «Написать нам напрямую» — мелкий ряд под кнопками окна (п.9 ТЗ) */
#g4chat .g4c-direct {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Подпись прячем визуально (иначе шапка распирается и режет заголовок),
   но оставляем для скринридеров — смысл иконок передаёт title на группе. */
#g4chat .g4c-direct .lb {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

#g4chat .g4c-direct .ic {
  display: flex;
  gap: 6px;
}

#g4chat .g4c-ch {
  display: inline-flex;
  opacity: .85;
  transition: opacity .12s, transform .12s;
  border-radius: 50%;
}

/* иконки мессенджеров чуть крупнее (владелец 28.07) */
#g4chat .g4c-ch svg { width: 20px; height: 20px; display: block; }
#g4chat .g4c-ch:hover { opacity: 1; transform: translateY(-1px); }

/* Подсказки при наведении: «Написать в Telegram», «Выключить звук…» — мгновенные,
   свои (родной title всплывает с секундной задержкой и легко пропустить) */
#g4chat .g4c-hb, #g4chat .g4c-ch { position: relative; }
#g4chat [data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 7px);
  right: -4px;
  background: var(--g4c-ink);
  color: #fff;
  font: 600 11px/1 var(--g4c-body);
  padding: 6px 9px;
  border-radius: 7px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-3px);
  transition: opacity .14s ease .12s, transform .14s ease .12s;
  z-index: 60;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .18);
}
#g4chat [data-tip]:hover::after { opacity: 1; transform: none; }
@media (hover: none) { #g4chat [data-tip]::after { display: none; } }

/* ── 6. Полоса «Позвать человека» ──────────────────────────────────────────── */
#g4chat .g4c-callbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: var(--g4c-bar);
  border-bottom: 1px solid var(--g4c-line);
}

#g4chat .g4c-callbar[hidden] { display: none; }

#g4chat .g4c-human {
  flex: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 12px/1 var(--g4c-body);
  padding: 6px 11px;
  border-radius: 20px;
  background: var(--g4c-accent-soft);
  border: 1px solid #FF660055;
  color: var(--g4c-accent);
  transition: background .12s, color .12s, border-color .12s;
}

#g4chat .g4c-human svg { width: 15px; height: 15px; }
/* Кнопка в ШАПКЕ, под статусом (владелец 30.07: под-шапка с дублирующим текстом убрана) */
#g4chat .g4c-hi .g4c-human { margin-top: 6px; padding: 3px 10px; font-size: 12px; }
/* Крестик закрытия: очевидное закрытие на мобильном (владелец 30.07); на десктопе скрыт —
   там есть «свернуть» и клик мимо окна */
#g4chat .g4c-x { display: none; }
#g4chat .g4c-human:hover { background: var(--g4c-accent-soft); color: var(--g4c-ink); }
#g4chat .g4c-human:disabled { opacity: 1; cursor: default; color: var(--g4c-ok); border-color: var(--g4c-ok); background: var(--g4c-ok-soft); }

#g4chat .g4c-callbar .hint {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 11px;
  color: var(--g4c-mut2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── 7. Лента ──────────────────────────────────────────────────────────────── */
#g4chat .g4c-thread {
  position: relative;
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 14px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: radial-gradient(1200px 500px at 80% -10%, #FF66000a, transparent 55%), var(--g4c-bg);
}

#g4chat .g4c-thread .g4c-load {
  align-self: center;
  font-size: 11px;
  color: var(--g4c-mut2);
  padding: 4px 0;
}

/* разделитель дат */
#g4chat .g4c-day {
  align-self: center;
  max-width: 90%;
  text-align: center;
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--g4c-mut2);
  background: var(--g4c-line2);
  border-radius: 12px;
  padding: 4px 12px;
  margin: 2px 0;
}

/* системная плашка */
#g4chat .g4c-sys {
  align-self: center;
  max-width: 92%;
  text-align: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--g4c-mut2);
  background: var(--g4c-line2);
  border-radius: 12px;
  padding: 5px 11px;
}

#g4chat .g4c-sys svg { flex: none; width: 13px; height: 13px; }
#g4chat .g4c-sys.warn { color: var(--g4c-warn); background: var(--g4c-warn-soft); }
#g4chat .g4c-sys.bad { color: var(--g4c-red); background: var(--g4c-red-soft); }
#g4chat .g4c-sys.good { color: var(--g4c-ok); background: var(--g4c-ok-soft); }
#g4chat .g4c-sys.acc { color: var(--g4c-accent); background: var(--g4c-accent-soft); }

/* ── 8. Пузырь ─────────────────────────────────────────────────────────────── */
#g4chat .g4c-wrap {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  max-width: 86%;
  align-self: flex-start;
}

#g4chat .g4c-wrap.mine {
  align-self: flex-end;
  flex-direction: row-reverse;
}

#g4chat .g4c-wrap.msg-new { animation: g4cMsgIn .22s cubic-bezier(.2, .8, .3, 1); }

#g4chat .g4c-bub {
  position: relative;
  background: var(--g4c-panel2);
  border: 1px solid var(--g4c-line);
  border-radius: var(--g4c-r-bub) var(--g4c-r-bub) var(--g4c-r-bub) 5px;
  padding: 8px 12px;
  font-size: 13.5px;
  line-height: 1.45;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  min-width: 70px;
  max-width: 100%;
}

#g4chat .g4c-wrap.mine .g4c-bub {
  background: var(--g4c-out-bg);
  border-color: var(--g4c-out-line);
  border-radius: var(--g4c-r-bub) var(--g4c-r-bub) 5px var(--g4c-r-bub);
}

#g4chat .g4c-bub.has-media { padding: 6px 6px 7px; }
#g4chat .g4c-bub.has-media .b-text, #g4chat .g4c-bub.has-media .b-quote, #g4chat .g4c-bub.has-media .b-author { padding-left: 6px; padding-right: 6px; }
#g4chat .g4c-bub.has-media .b-time { margin-right: 6px; }

#g4chat .g4c-bub.found {
  outline: 2px solid var(--g4c-accent);
  box-shadow: 0 0 0 4px #FF660033;
}

#g4chat .g4c-bub.pending { opacity: .72; }
#g4chat .g4c-bub.failed { border-color: var(--g4c-red); }

/* автор: ИИ подписан как ИИ, менеджер — именем (ТЗ п.4) */
#g4chat .b-author {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 700;
  margin-bottom: 2px;
  color: var(--g4c-accent);
}

#g4chat .b-author svg { width: 13px; height: 13px; flex: none; }
#g4chat .b-author.ai { color: var(--g4c-blue-ink); }
#g4chat .b-author.ai svg { width: 14px; height: 14px; color: var(--g4c-blue); }
/* мини-аватары авторов: бот у ИИ, катушка GIANT4 у менеджера (29.07) */
#g4chat .b-author .au-ava { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; flex: none; }

/* цитата «в ответ на» */
#g4chat .b-quote {
  border-left: 2px solid var(--g4c-accent);
  padding: 2px 8px;
  margin: 2px 0 5px;
  background: var(--g4c-line2);
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

#g4chat .b-quote b { display: block; color: var(--g4c-accent); font-size: 11.5px; font-weight: 700; }
#g4chat .b-quote .bq-t {
  color: var(--g4c-mut);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}

#g4chat .b-text { white-space: pre-wrap; word-break: break-word; display: block; }
#g4chat .b-text.emo-big { font-size: 34px; line-height: 1.2; }
#g4chat .b-text a { color: var(--g4c-accent); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
#g4chat .b-text a:hover { color: var(--g4c-glow); }
#g4chat .b-text code {
  font-family: var(--g4c-mono);
  font-size: 12.5px;
  background: var(--g4c-line2);
  border-radius: 4px;
  padding: 1px 5px;
}
#g4chat .b-text .spoiler {
  background: var(--g4c-mut2);
  color: transparent;
  border-radius: 3px;
  cursor: pointer;
  transition: color .15s, background .15s;
}
#g4chat .b-text .spoiler.open { background: transparent; color: inherit; }

/* время + статус */
#g4chat .b-time {
  display: inline-block;
  float: right;
  margin-left: 10px;
  margin-top: 6px;
  color: var(--g4c-mut2);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  user-select: none;
}

#g4chat .b-time svg { width: 12px; height: 12px; margin-left: 3px; }
#g4chat .b-time .st-fail { color: var(--g4c-red); cursor: pointer; }
#g4chat .b-time .st-ok { color: var(--g4c-ok); }
/* принято сервером, но получателю ещё не ушло: та же галочка, только бледная */
#g4chat .b-time .st-sent { opacity: .45; }
#g4chat .g4c-bub.has-media .b-time { float: none; display: block; text-align: right; margin-top: 3px; }

/* «⋯» — меню сообщения */
#g4chat .b-more {
  position: absolute;
  top: -9px;
  right: 16px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--g4c-panel);
  border: 1px solid var(--g4c-line);
  color: var(--g4c-mut);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

#g4chat .b-more svg { width: 12px; height: 12px; }
#g4chat .g4c-wrap:hover .b-more { display: flex; }
#g4chat .b-more:hover { color: var(--g4c-ink); border-color: var(--g4c-accent); }
#g4chat .g4c-wrap.mine .b-more { right: auto; left: 16px; }

#g4chat .g4c-bub.pressing { animation: g4cBPress .42s ease forwards; }
#g4chat .g4c-bub.press-pop { animation: g4cBPop .22s ease-out; }

/* меню сообщения */
#g4chat .msg-menu {
  position: absolute;
  top: 14px;
  right: -6px;
  background: var(--g4c-panel);
  border: 1px solid var(--g4c-line);
  border-radius: 10px;
  padding: 5px;
  box-shadow: var(--g4c-sh-pop);
  z-index: 6;
  min-width: 170px;
  max-width: calc(100vw - 48px);
  animation: g4cPopIn .12s ease-out;
}

#g4chat .g4c-wrap.mine .msg-menu { right: auto; left: -6px; }

#g4chat .msg-menu .menu-it {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  border-radius: 7px;
  font-size: 12.5px;
  white-space: nowrap;
  color: var(--g4c-ink);
  cursor: pointer;
  width: 100%;
  text-align: left;
}

#g4chat .msg-menu .menu-it svg { width: 15px; height: 15px; color: var(--g4c-mut); flex: none; }
#g4chat .msg-menu .menu-it:hover { background: var(--g4c-panel2); }
#g4chat .msg-menu .menu-it.red { color: var(--g4c-red); }
#g4chat .msg-menu .menu-it.red svg { color: var(--g4c-red); }

/* ── 9. «ИИ печатает…» ─────────────────────────────────────────────────────── */
#g4chat .g4c-typing .g4c-bub {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 13px;
  min-width: 0;
}

#g4chat .g4c-typing .tw { display: flex; gap: 4px; }

#g4chat .g4c-typing .td {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--g4c-mut);
  animation: g4cDotJump 1.1s infinite;
}

#g4chat .g4c-typing .td:nth-child(2) { animation-delay: .15s; }
#g4chat .g4c-typing .td:nth-child(3) { animation-delay: .3s; }
#g4chat .g4c-typing .lb { font-size: 11.5px; color: var(--g4c-mut); }

/* ── 10. Медиа ─────────────────────────────────────────────────────────────── */
#g4chat .chat-img {
  max-width: 100%;
  max-height: 340px;
  border-radius: 12px;
  display: block;
  margin: 3px 0;
  cursor: pointer;
  background: var(--g4c-panel2);
  transition: filter .12s;
}

#g4chat .chat-img:hover { filter: brightness(1.05); }

#g4chat .chat-vid-wrap {
  position: relative;
  display: block;
  max-width: 100%;
  margin: 3px 0;
  border-radius: 12px;
  overflow: hidden;
  line-height: 0;
  cursor: pointer;
  background: #000;
}

#g4chat .chat-vid { max-width: 100%; max-height: 340px; border-radius: 12px; background: #000; display: block; }

#g4chat .chat-vid-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: transform .15s;
}

#g4chat .chat-vid-play svg { width: 46px; height: 46px; }
#g4chat .chat-vid-wrap:hover .chat-vid-play { transform: scale(1.08); }

#g4chat .alb-grid { display: flex; flex-wrap: wrap; gap: 4px; margin: 3px 0; }
#g4chat .alb-img {
  width: calc(50% - 2px);
  height: 104px;
  object-fit: cover;
  border-radius: 7px;
  cursor: pointer;
  display: block;
  background: var(--g4c-panel2);
}
#g4chat .alb-grid.one .alb-img { width: 100%; height: auto; max-height: 320px; }

/* карточка файла */
#g4chat .g4c-file {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--g4c-field);
  border: 1px solid var(--g4c-line);
  border-radius: 10px;
  padding: 8px 10px;
  margin: 3px 0;
  color: var(--g4c-ink);
  transition: border-color .12s, background .12s;
}

#g4chat .g4c-file:hover { border-color: var(--g4c-line-hi); }

#g4chat .g4c-file .ic {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  flex: none;
  background: var(--g4c-accent-soft);
  color: var(--g4c-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 10px/1 var(--g4c-body);
  letter-spacing: .02em;
  position: relative;
}

#g4chat .g4c-file .ic svg { width: 19px; height: 19px; }
#g4chat .g4c-file .ic .ext { position: absolute; bottom: 4px; font-size: 8.5px; }
#g4chat .g4c-file .tx { flex: 1 1 auto; min-width: 0; }
#g4chat .g4c-file .nm { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#g4chat .g4c-file .sz { font-size: 11px; color: var(--g4c-mut); margin-top: 1px; }
#g4chat .g4c-file .dl { color: var(--g4c-mut); flex: none; display: flex; }
#g4chat .g4c-file .dl svg { width: 18px; height: 18px; }
#g4chat .g4c-file:hover .dl { color: var(--g4c-accent); }

#g4chat .g4c-file.bad { border-color: var(--g4c-red-line); background: var(--g4c-red-soft); }
#g4chat .g4c-file.bad .ic { background: var(--g4c-red-soft); color: var(--g4c-red); }

/* «PDF/DOC/XLS/ZIP» — цвет плашки по типу */
#g4chat .g4c-file .ic.pdf { background: var(--g4c-red-soft); color: var(--g4c-red); }
#g4chat .g4c-file .ic.doc { background: var(--g4c-blue-soft); color: var(--g4c-blue); }
#g4chat .g4c-file .ic.xls { background: var(--g4c-ok-soft); color: var(--g4c-ok); }
#g4chat .g4c-file .ic.zip { background: var(--g4c-warn-soft); color: var(--g4c-warn); }

/* обычное аудио (не голосовое) */
#g4chat .chat-aud {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 3px 0;
  background: var(--g4c-field);
  border: 1px solid var(--g4c-line);
  border-radius: 10px;
  padding: 7px 9px;
}

#g4chat .chat-aud svg { width: 18px; height: 18px; color: var(--g4c-accent); flex: none; }
#g4chat .chat-aud audio { width: 100%; height: 32px; }

/* ── 11. Голосовое: плеер ──────────────────────────────────────────────────── */
#g4chat .voice-player {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 3px 0;
  /* размеры CRM (style.css:613). Меньше нельзя: на волну остаётся столько,
     что время «0:14» печатается поверх столбиков */
  min-width: 220px;
  max-width: 340px;
}

#g4chat .voice-player .vp-btn {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 50%;
  border: none;
  background: var(--g4c-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s, transform .1s;
}

#g4chat .voice-player .vp-btn svg { width: 20px; height: 20px; }
#g4chat .voice-player .vp-btn:hover { background: var(--g4c-glow); }
#g4chat .voice-player .vp-btn:active { transform: scale(.94); }

#g4chat .vp-bars {
  position: relative;
  flex: 1 1 auto;
  height: 30px;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  /* Слой волны абсолютный, в расчёт ширины пузыря он не входит. Ширину, которая
     ему нужна, объявляем здесь: 40 столбиков × 2px + 39 промежутков × 2px = 158px
     (VP_BARS в widget.js). Иначе пузырь ужимается, а волна вылезает на время.
     overflow — страховка на совсем узких экранах: лучше подрезать хвост волны,
     чем печатать её поверх «0:14». */
  min-width: 158px;
  overflow: hidden;
}

#g4chat .vp-wave {
  position: absolute;
  inset: 0 0 auto 0;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 2px;
}

#g4chat .vp-played { clip-path: inset(0 100% 0 0); }
#g4chat .vp-bar { flex: 1 1 0; min-width: 2px; border-radius: 2px; height: 30%; }
#g4chat .vp-base .vp-bar { background: var(--g4c-mut2); }
#g4chat .vp-played .vp-bar { background: var(--g4c-accent); }

#g4chat .vp-time {
  font-size: 11.5px;
  color: var(--g4c-mut);
  min-width: 32px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  flex: none;
}

/* ── 12. Превью ссылки и карточка товара ───────────────────────────────────── */
#g4chat .g4c-lp {
  display: block;
  margin: 5px 0 2px;
  background: var(--g4c-field);
  border: 1px solid var(--g4c-line);
  border-left: 3px solid var(--g4c-accent);
  border-radius: 10px;
  overflow: hidden;
  transition: background .12s, border-color .12s;
}

#g4chat .g4c-lp:hover { background: var(--g4c-panel2); border-color: var(--g4c-line-hi); border-left-color: var(--g4c-glow); }
#g4chat .g4c-lp img { width: 100%; max-height: 160px; object-fit: cover; display: block; background: var(--g4c-panel2); }
#g4chat .g4c-lp .in { padding: 8px 11px; }
#g4chat .g4c-lp .st { font-size: 11px; color: var(--g4c-mut2); }
#g4chat .g4c-lp .ti {
  font-size: 13px; font-weight: 600; color: var(--g4c-ink); margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
#g4chat .g4c-lp .ds {
  font-size: 12px; color: var(--g4c-mut); margin-top: 3px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
#g4chat .g4c-lp .pr { font-size: 13px; font-weight: 700; color: var(--g4c-accent); margin-top: 5px; }

/* карточка товара со страницы — вверху ленты */
#g4chat .g4c-prod {
  align-self: stretch;
  display: flex;
  gap: 10px;
  background: var(--g4c-panel);
  border: 1px solid var(--g4c-line);
  border-left: 3px solid var(--g4c-accent);
  border-radius: 10px;
  padding: 9px 11px;
}

#g4chat .g4c-prod img { width: 52px; height: 52px; object-fit: contain; border-radius: 8px; background: #fff; flex: none; }
#g4chat .g4c-prod .tx { min-width: 0; }
#g4chat .g4c-prod .lb { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--g4c-mut2); }
#g4chat .g4c-prod .ti {
  font-size: 12.5px; font-weight: 600; color: var(--g4c-ink); margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
#g4chat .g4c-prod .pr { font-size: 12.5px; font-weight: 700; color: var(--g4c-accent); margin-top: 3px; }

/* ── 13. Быстрые ответы ────────────────────────────────────────────────────── */
#g4chat .g4c-quick { display: flex; flex-wrap: wrap; gap: 6px; align-self: flex-start; max-width: 92%; }

#g4chat .g4c-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 20px;
  padding: 6px 11px;
  background: var(--g4c-panel2);
  border: 1px solid var(--g4c-line);
  color: var(--g4c-mut);
  cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
}

#g4chat .g4c-chip:hover { border-color: #FF660066; color: var(--g4c-ink); }
#g4chat .g4c-chip.on { background: var(--g4c-accent-soft); border-color: #FF660088; color: var(--g4c-ink); }

/* ── 14. Форма контакта внутри ленты ───────────────────────────────────────── */
#g4chat .g4c-form {
  align-self: stretch;
  background: var(--g4c-panel);
  border: 1px solid var(--g4c-line);
  border-radius: 12px;
  padding: 12px;
  animation: g4cMsgIn .22s cubic-bezier(.2, .8, .3, 1);
}

#g4chat .g4c-form .ti { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
#g4chat .g4c-form .ds { font-size: 11.5px; color: var(--g4c-mut); margin-bottom: 9px; }
#g4chat .g4c-form label { display: block; font-size: 11px; color: var(--g4c-mut); margin: 8px 0 3px; }

#g4chat .g4c-form input {
  width: 100%;
  background: var(--g4c-field);
  border: 1px solid var(--g4c-line);
  border-radius: var(--g4c-r-sm);
  padding: 8px 11px;
  font-size: 13.5px;
  color: var(--g4c-ink);
}

#g4chat .g4c-form input:focus { border-color: var(--g4c-accent); }
#g4chat .g4c-form input.err { border-color: var(--g4c-red); }
#g4chat .g4c-form .row { display: flex; flex-wrap: wrap; gap: 6px; }
#g4chat .g4c-form .act { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
#g4chat .g4c-form .er { font-size: 11px; color: var(--g4c-red); margin-top: 6px; }
#g4chat .g4c-form .er[hidden] { display: none; }

#g4chat .g4c-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 600 13px/1 var(--g4c-body);
  color: var(--g4c-ink);
  background: var(--g4c-panel2);
  border: 1px solid var(--g4c-line);
  border-radius: var(--g4c-r-sm);
  padding: 9px 14px;
  white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}

#g4chat .g4c-btn:hover { border-color: var(--g4c-line-hi); }
#g4chat .g4c-btn.acc { background: var(--g4c-accent); border-color: var(--g4c-accent); color: #141414; }
#g4chat .g4c-btn.acc:hover { background: var(--g4c-glow); border-color: var(--g4c-glow); }
#g4chat .g4c-btn.ghost { background: transparent; color: var(--g4c-mut); }
#g4chat .g4c-btn.sm { padding: 5px 10px; font-size: 12px; }
#g4chat .g4c-btn:disabled { opacity: .5; cursor: default; }

/* ── 15. Кнопка «вниз» ─────────────────────────────────────────────────────── */
#g4chat .g4c-down {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--g4c-panel2);
  border: 1px solid var(--g4c-line);
  color: var(--g4c-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--g4c-sh-pop);
  z-index: 8;
  transition: opacity .15s, transform .15s;
}

#g4chat .g4c-down svg { width: 18px; height: 18px; }
#g4chat .g4c-down[hidden] { display: none; }
#g4chat .g4c-down .g4c-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--g4c-accent);
  color: #141414;
  border: 2px solid var(--g4c-panel);
  font: 700 10px/14px var(--g4c-body);
  text-align: center;
}
#g4chat .g4c-down .g4c-badge[hidden] { display: none; }

/* обёртка ленты (чтобы кнопка «вниз» позиционировалась) */
#g4chat .g4c-mid { position: relative; flex: 1 1 auto; display: flex; min-height: 0; }
#g4chat .g4c-mid > .g4c-thread { flex: 1 1 auto; }

/* ── 16. Строка ввода ──────────────────────────────────────────────────────── */
#g4chat .g4c-inp {
  position: relative;
  flex: none;
  border-top: 1px solid var(--g4c-line);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--g4c-bar);
}

/* плашка «Ответ: …» */
#g4chat .g4c-replybar {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--g4c-accent);
  padding: 2px 2px 8px;
}

#g4chat .g4c-replybar[hidden] { display: none; }
#g4chat .g4c-replybar svg { width: 15px; height: 15px; flex: none; }
#g4chat .g4c-replybar .tx { flex: 1 1 auto; min-width: 0; }
#g4chat .g4c-replybar .nm { font-size: 11.5px; font-weight: 700; }
#g4chat .g4c-replybar .bq-t {
  color: var(--g4c-mut);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#g4chat .g4c-replybar .x { color: var(--g4c-mut); display: flex; }
#g4chat .g4c-replybar .x:hover { color: var(--g4c-red); }

/* чипы вложений */
#g4chat .g4c-attach { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
#g4chat .g4c-attach:empty { display: none; }

#g4chat .attach-chip {
  position: relative;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  background: var(--g4c-field);
  border: 1px solid var(--g4c-line);
  border-radius: var(--g4c-r-sm);
  padding: 4px 8px;
  font-size: 12px;
  max-width: 100%;
  overflow: hidden;
}

#g4chat .attach-chip img { width: 26px; height: 26px; object-fit: cover; border-radius: 5px; flex: none; }
#g4chat .attach-chip svg.ic { width: 16px; height: 16px; color: var(--g4c-mut); flex: none; }
#g4chat .attach-chip .nm { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#g4chat .attach-chip .sz { color: var(--g4c-mut2); font-size: 11px; }
#g4chat .attach-chip .x { color: var(--g4c-mut); display: flex; flex: none; }
#g4chat .attach-chip .x svg { width: 12px; height: 12px; }
#g4chat .attach-chip .x:hover { color: var(--g4c-red); }
#g4chat .attach-chip.bad { border-color: var(--g4c-red-line); background: var(--g4c-red-soft); }

#g4chat .attach-chip .prog {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--g4c-line);
}
#g4chat .attach-chip .prog i { display: block; height: 100%; width: 0; background: var(--g4c-accent); transition: width .15s; }
#g4chat .attach-chip .prog[hidden] { display: none; }

/* ряд кнопок */
#g4chat .g4c-row { display: flex; gap: 7px; align-items: flex-end; flex-wrap: nowrap; }

/* Кнопки строки ввода: рамок нет (иначе в ряд встают четыре коробки),
   размер один и тот же — скрепка, эмодзи, микрофон и ➤ стоят на одной линии. */
#g4chat .g4c-ib {
  flex: none;
  width: 38px;
  height: 38px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 50%;
  color: var(--g4c-mut);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s, color .12s, transform .1s;
}

#g4chat .g4c-ib svg { width: 19px; height: 19px; }
#g4chat .g4c-ib:hover { background: var(--g4c-panel2); color: var(--g4c-accent); }
#g4chat .g4c-ib[hidden] { display: none; }

#g4chat .g4c-send {
  background: var(--g4c-accent);
  border-color: var(--g4c-accent);
  color: #fff;
}

#g4chat .g4c-send:hover { background: var(--g4c-glow); border-color: var(--g4c-glow); color: #fff; }
#g4chat .g4c-send:active { transform: scale(.94); }

#g4chat .g4c-ta {
  flex: 1 1 auto;
  min-width: 0;
  resize: none;
  /* Явные высоты с !important: шаблон сайта задаёт textarea { min-height:90px } и
     «раздувал» пустое поле ввода на три строки — тот самый «разъехавшийся» вид.
     Своя высота = одна строка; рост при наборе делает autoGrow() инлайном. */
  min-height: 38px !important;
  height: 38px;
  max-height: 120px !important;
  overflow-y: auto;
  background: var(--g4c-field);
  border: 1px solid var(--g4c-line);
  border-radius: var(--g4c-r-sm);
  padding: 8px 11px;
  font-size: 13.5px;
  color: var(--g4c-ink);
  line-height: 1.4;
  box-sizing: border-box !important;
  box-shadow: none !important;
}

#g4chat .g4c-ta::placeholder { color: var(--g4c-mut2); }
/* Поле теперь contenteditable-div (textarea дразнил полосу автозаполнения iOS — widget.js):
   плейсхолдер через :empty, перенос строк как в textarea, запертое состояние классом */
#g4chat .g4c-ta { white-space: pre-wrap; word-break: break-word; cursor: text; }
#g4chat .g4c-ta:empty::before { content: attr(data-ph); color: var(--g4c-mut2); pointer-events: none; }
#g4chat .g4c-ta.is-disabled { opacity: .55; cursor: default; }
/* ОДНА обводка: рамка самого поля. Системный focus-ring поверх неё снят —
   именно он давал «двойную обводку», о которой говорил владелец. */
#g4chat .g4c-ta:focus { border-color: var(--g4c-accent); }
#g4chat .g4c-ta:focus-visible,
#g4chat .g4c-form input:focus-visible,
#g4chat .emo-search:focus-visible { outline: none; }
#g4chat .g4c-form input:focus { border-color: var(--g4c-accent); }

/* Панель эмодзи перенесена из CRM целиком (202 живые гифки + 1867 apple-png,
   8 разделов, «часто используемые»). Её стили — в конце файла, раздел «Э2».
   Прежний комментарий «панели нет намеренно» снят: панель есть. */

/* ── 17. Запись голоса ─────────────────────────────────────────────────────── */
#g4chat .rec-bar {
  position: absolute;
  inset: 0;
  background: var(--g4c-panel);
  border-top: 1px solid var(--g4c-line);
  display: none;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  z-index: 20;
  animation: g4cRecIn .18s cubic-bezier(.2, .8, .25, 1);
}

#g4chat .rec-bar.on { display: flex; }

#g4chat .rec-dot {
  width: 11px;
  height: 11px;
  flex: none;
  border-radius: 50%;
  background: var(--g4c-red);
  animation: g4cRecPulse 1.4s infinite;
}

#g4chat .rec-time { font-size: 14px; color: var(--g4c-ink); min-width: 44px; font-variant-numeric: tabular-nums; flex: none; }
#g4chat .rec-wave { flex: 1 1 auto; display: flex; align-items: center; gap: 2px; height: 28px; overflow: hidden; }
#g4chat .rec-wb { flex: 1 1 0; min-width: 2px; background: var(--g4c-accent); border-radius: 2px; height: 8%; transition: height .09s linear; }

#g4chat .rec-hint {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--g4c-mut);
  font-size: 13px;
  flex: none;
  animation: g4cRecSlide 1.3s ease-in-out infinite;
}

#g4chat .rec-hint svg { width: 14px; height: 14px; }
#g4chat .rec-bar.locked .rec-hint { display: none; }
#g4chat .rec-locked { display: none; gap: 8px; align-items: center; flex: none; }
#g4chat .rec-bar.locked .rec-locked { display: flex; }

#g4chat .rec-ico {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--g4c-line);
  background: var(--g4c-panel2);
  color: var(--g4c-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

#g4chat .rec-ico svg { width: 18px; height: 18px; }
#g4chat .rec-ico.rec-send { background: var(--g4c-accent); color: #fff; border-color: var(--g4c-accent); }
#g4chat .rec-ico.rec-send:hover { background: var(--g4c-glow); }

#g4chat .rec-cancel-btn {
  height: 38px;
  padding: 0 15px 0 12px;
  border-radius: 19px;
  border: 1px solid var(--g4c-line);
  background: var(--g4c-panel2);
  color: var(--g4c-mut);
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}

#g4chat .rec-cancel-btn svg { width: 18px; height: 18px; }
#g4chat .rec-cancel-btn:hover { color: var(--g4c-red); border-color: var(--g4c-red-line); }

/* отмена «увели влево» */
#g4chat .g4c-inp.rec-cancel .rec-wb, #g4chat .g4c-inp.rec-cancel .rec-dot { background: var(--g4c-mut2); }
#g4chat .g4c-inp.rec-cancel .rec-hint { color: var(--g4c-red); font-weight: 600; }

#g4chat .rec-lock {
  position: absolute;
  right: 14px;
  bottom: 56px;
  width: 38px;
  height: 58px;
  border-radius: 19px;
  background: var(--g4c-panel2);
  border: 1px solid var(--g4c-line);
  color: var(--g4c-mut);
  box-shadow: var(--g4c-sh-pop);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  z-index: 21;
  pointer-events: none;
  transition: color .12s, border-color .12s, background .12s;
}

#g4chat .rec-lock.on { display: flex; }
#g4chat .rec-lock svg { width: 15px; height: 15px; }
#g4chat .rec-lock .rl-up { animation: g4cRecUp 1.3s ease-in-out infinite; display: flex; }
#g4chat .rec-lock.near { color: var(--g4c-accent); border-color: var(--g4c-accent); background: var(--g4c-accent-soft); }

/* ── 18. Лайтбокс ──────────────────────────────────────────────────────────── */
#g4chat .mv-ovl {
  position: absolute;
  inset: 0;
  z-index: 40;
  background: rgba(8, 9, 12, .94);
  opacity: 0;
  transition: opacity .2s;
  pointer-events: auto;
  display: block;
}

#g4chat .mv-ovl.show { opacity: 1; }

#g4chat .mv-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(#000a, transparent);
  z-index: 2;
}

#g4chat .mv-count { color: #fff; font-size: 13px; font-variant-numeric: tabular-nums; }
#g4chat .mv-top .sp { display: flex; gap: 8px; }

#g4chat .mv-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

#g4chat .mv-btn svg { width: 21px; height: 21px; }
#g4chat .mv-btn.mv-close svg { width: 24px; height: 24px; }
#g4chat .mv-btn:hover { background: rgba(255, 255, 255, .2); }

#g4chat .mv-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

#g4chat .mv-nav svg { width: 30px; height: 30px; }
#g4chat .mv-nav:hover { background: rgba(255, 255, 255, .2); }
#g4chat .mv-prev { left: 14px; }
#g4chat .mv-next { right: 14px; }
#g4chat .mv-nav[hidden] { display: none; }

#g4chat .mv-stage { position: absolute; inset: 56px 80px 24px; display: flex; align-items: center; justify-content: center; }
#g4chat .mv-box { display: flex; align-items: center; justify-content: center; max-width: 100%; max-height: 100%; }
#g4chat .mv-box.in { animation: g4cMvIn .18s ease-out; }
#g4chat .mv-media { max-width: 100%; max-height: calc(100% - 4px); border-radius: 8px; box-shadow: 0 12px 50px #000a; user-select: none; }

/* ── 19. Drag & drop ───────────────────────────────────────────────────────── */
#g4chat .g4c-drop {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  background: rgba(14, 17, 23, .88);
  border: 2px dashed var(--g4c-accent);
  border-radius: var(--g4c-r-win);
  color: var(--g4c-accent);
  font-size: 13px;
  font-weight: 600;
  pointer-events: none;
}

#g4chat .g4c-win.dragging .g4c-drop { display: flex; }
#g4chat .g4c-drop svg { width: 34px; height: 34px; }

/* ── 20. Тост ──────────────────────────────────────────────────────────────── */
#g4chat .g4c-toast {
  position: absolute;
  left: 50%;
  bottom: 84px;
  transform: translateX(-50%);
  max-width: calc(100% - 32px);
  background: var(--g4c-panel);
  border: 1px solid var(--g4c-line);
  color: var(--g4c-ink);
  font-size: 12.5px;
  padding: 8px 13px;
  border-radius: 10px;
  box-shadow: var(--g4c-sh-pop);
  z-index: 35;
  animation: g4cPopIn .14s ease-out;
  text-align: center;
}

#g4chat .g4c-toast.bad { border-color: var(--g4c-red-line); color: var(--g4c-red); background: var(--g4c-red-soft); }
#g4chat .g4c-toast[hidden] { display: none; }

/* ── 21. Скроллбар ─────────────────────────────────────────────────────────── */
#g4chat ::-webkit-scrollbar { width: 8px; height: 8px; }
#g4chat ::-webkit-scrollbar-thumb {
  background: var(--g4c-scroll);
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
#g4chat ::-webkit-scrollbar-track { background: transparent; }
#g4chat * { scrollbar-width: thin; scrollbar-color: var(--g4c-scroll) transparent; }

/* ── 22. Анимации ──────────────────────────────────────────────────────────── */
@keyframes g4cWinIn {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to { opacity: 1; transform: none; }
}

@keyframes g4cMsgIn {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to { opacity: 1; transform: none; }
}

@keyframes g4cPopIn {
  from { opacity: 0; transform: scale(.95) translateY(-3px); }
  to { opacity: 1; transform: none; }
}

@keyframes g4cMvIn {
  from { opacity: 0; transform: scale(.985); }
  to { opacity: 1; transform: none; }
}

@keyframes g4cRecIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@keyframes g4cRecPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .3; }
}

@keyframes g4cRecSlide {
  0%, 100% { transform: translateX(0); opacity: .5; }
  50% { transform: translateX(-5px); opacity: 1; }
}

@keyframes g4cRecUp {
  0%, 100% { transform: translateY(0); opacity: .35; }
  50% { transform: translateY(-3px); opacity: 1; }
}

@keyframes g4cDotJump {
  0%, 100% { transform: translateY(0); opacity: .45; }
  40% { transform: translateY(-4px); opacity: 1; }
}

@keyframes g4cBPress {
  to { transform: scale(.965); }
}

@keyframes g4cBPop {
  from { transform: scale(.965); }
  to { transform: none; }
}

/* ── 23. Адаптив ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  #g4chat .g4c-win {
    width: min(380px, calc(100vw - 24px));
    height: min(620px, calc(100dvh - 90px));
  }
}

@media (max-width: 480px) {
  #g4chat-launcher {
    width: 56px;
    height: 56px;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px) + var(--g4c-lift));
  }

  #g4chat-launcher svg { width: 26px; height: 26px; }
  #g4chat-launcher .g4c-tip { display: none; }

  /* окно на весь экран; высоту задаёт JS через --g4c-vh (клавиатура) */
  #g4chat .g4c-win {
    inset: 0;
    right: 0;
    bottom: 0;
    /* ОКНО ЕДЕТ ВСЛЕД ЗА ВИДИМОЙ ОБЛАСТЬЮ ЧЕРЕЗ top, А НЕ ЧЕРЕЗ transform
       (26.08.2026, вечер). Прежде сдвиг ставился в style.transform — и НИКОГДА не
       срабатывал: ниже стоит animation с fill-mode both, а анимация в каскаде
       сильнее inline-стиля и держит свой transform навсегда. Из-за этого на
       айфоне при вводе окно оставалось у вёрстки, а не у видимой области:
       на экране торчало одно поле ввода, а над ним пустота. */
    top: var(--g4c-pan, 0px);
    width: 100%;
    height: var(--g4c-vh, 100dvh);
    max-height: none;
    min-height: 0;
    border-radius: 0;
    border: none;
    /* 26.08.2026: было animation:none — окно появлялось рывком («промаргивание»),
       хотя закрывалось анимацией. Теперь раскрывается из угла с кнопкой чата. */
    animation: g4cWinInMob .22s cubic-bezier(.22, .61, .36, 1) both;
    transform-origin: 100% 100%;
    will-change: transform, opacity;
  }

  #g4chat .g4c-head { padding: 10px 12px; }
  #g4chat .g4c-thread { padding: 12px 10px 16px; }
  #g4chat .g4c-wrap { max-width: 92%; }
  /* на телефоне окно и так во весь экран — «развернуть» ни к чему */
  #g4chat .g4c-maxbtn { display: none; }
  #g4chat .g4c-hb { width: 34px; height: 34px; }
  #g4chat .g4c-hb svg { width: 19px; height: 19px; }
  #g4chat .g4c-x { display: flex; }
  #g4chat .g4c-ib { padding: 10px 11px; min-width: 42px; min-height: 42px; }
  #g4chat .g4c-ch svg { width: 18px; height: 18px; }
  #g4chat .g4c-direct .lb { display: none; }
  /* iOS зумит страницу при фокусе в поле со шрифтом <16px — от этого «всё съезжало»
     при каждом вводе (видео и скрины владельца 29.07). На мобиле все поля виджета 16px. */
  #g4chat .g4c-ta, #g4chat input, #g4chat select, #g4chat .emo-search { font-size: 16px; }
  #g4chat .mv-stage { inset: 56px 6px 14px; }
  #g4chat .mv-nav { width: 44px; height: 44px; }
  #g4chat .mv-prev { left: 6px; }
  #g4chat .mv-next { right: 6px; }
  #g4chat .voice-player { min-width: 180px; max-width: 260px; }
}

/* тач: долгое нажатие не должно выделять слова */
@media (pointer: coarse) {
  #g4chat .g4c-thread { user-select: none; -webkit-touch-callout: none; }
  #g4chat .g4c-thread .b-text, #g4chat .g4c-thread .g4c-file .nm { user-select: text; }
  /* на телефоне «⋯» и «☺» не нужны: работает долгое нажатие, как в Telegram */
  #g4chat .b-more, #g4chat .b-react { display: none !important; }
}

/* низкий экран (открыта клавиатура) */
@media (max-height: 520px) {
  #g4chat .g4c-win { min-height: 0; }
  #g4chat .g4c-callbar { padding: 5px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  #g4chat .rec-dot, #g4chat .rec-hint, #g4chat .rec-lock .rl-up, #g4chat .g4c-typing .td { animation: none; }
  #g4chat .g4c-win { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   ПЕРЕНОС ИЗ CRM: эмодзи, реакции, меню сообщения, меню шапки, анимация окна.
   Правила взяты из /opt/g4-crm/public/style.css (см. _crm-ref/PORT-*.md):
   структура, размеры, радиусы и анимации — оттуда, заменены только цвета
   тёмной темы на светлые (таблица замен — PORT-css §7).
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Э1. Эмодзи в тексте и в панели (style.css:762–787) ───────────────────── */
#g4chat .emo { width: 22px; height: 22px; vertical-align: -5px; display: inline-block; }
#g4chat .emo-txt { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; line-height: 1; }
#g4chat .emo.emo-txt { width: auto; height: auto; font-size: 19px; vertical-align: -3px; }
#g4chat .b-text.emo-big .emo { width: 52px; height: 52px; vertical-align: -8px; }
#g4chat .b-text.emo-big .emo.emo-txt { font-size: 46px; }
/* flex:none обязателен: .react-chip / .react-pop / .mm-reacts — флекс-контейнеры,
   а из-за сброса min-width:0 картинка эмодзи внутри них сжималась до нуля */
#g4chat .emo-r { width: 19px; height: 19px; vertical-align: -4px; display: inline-block; flex: none; }
#g4chat .emo-r.emo-txt { width: auto; height: auto; font-size: 17px; vertical-align: -2px; }
#g4chat .emo-p { width: 30px; height: 30px; display: block; margin: 0 auto; }
#g4chat .emo-p.emo-txt { width: 30px; height: 30px; font-size: 24px; line-height: 30px; text-align: center; }
#g4chat .emo-c { width: 20px; height: 20px; display: block; }
#g4chat .emo-c.emo-txt { width: 20px; height: 20px; font-size: 17px; line-height: 20px; text-align: center; }
#g4chat .spoiler .emo { visibility: hidden; }
#g4chat .spoiler.open .emo { visibility: visible; }

/* ── Э2. Панель эмодзи (style.css:774–787) ────────────────────────────────── */
#g4chat .emoji-pop {
  position: absolute;
  bottom: 58px;
  left: 10px;
  width: min(300px, calc(100% - 20px));
  max-height: 300px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--g4c-panel);
  border: 1px solid var(--g4c-line);
  border-radius: 12px;
  padding: 0 10px 10px;
  box-shadow: var(--g4c-sh-pop);
  z-index: 8;
  animation: g4cPopIn .12s ease-out;
}

#g4chat .emo-wait { padding: 22px 6px; text-align: center; color: var(--g4c-mut); font-size: 12.5px; }

/* шапка панели (поиск + вкладки + разделы iOS) прилипает к верху */
#g4chat .emo-head {
  position: sticky;
  top: 0;
  background: var(--g4c-panel);
  z-index: 3;
  border-bottom: 1px solid var(--g4c-line);
  margin-bottom: 2px;
}

#g4chat .emo-srow { padding: 10px 0 6px; }
#g4chat .emo-search {
  width: 100%;
  background: var(--g4c-field);
  border: 1px solid var(--g4c-line);
  border-radius: 14px;
  padding: 6px 11px;
  font-size: 12.5px;
  color: var(--g4c-ink);
}
#g4chat .emo-search::placeholder { color: var(--g4c-mut2); }
#g4chat .emo-search:focus { border-color: var(--g4c-accent); }
#g4chat .emo-search::-webkit-search-cancel-button { -webkit-appearance: none; }

#g4chat .emo-tabs { display: flex; gap: 6px; padding: 2px 0 8px; }
#g4chat .emo-tab {
  padding: 5px 12px;
  font-size: 12px;
  border-radius: 14px;
  border: 1px solid var(--g4c-line);
  background: var(--g4c-panel2);
  color: var(--g4c-mut);
  transition: background .12s, color .12s, border-color .12s;
}
#g4chat .emo-tab:hover { color: var(--g4c-ink); }
#g4chat .emo-tab.on { background: var(--g4c-accent); border-color: var(--g4c-accent); color: #fff; }

#g4chat .emo-cats { display: flex; gap: 2px; padding: 0 0 8px; justify-content: space-between; }
#g4chat .emo-cats .emo-cat { cursor: pointer; border-radius: 7px; padding: 3px 5px; flex: none; line-height: 0; }
#g4chat .emo-cats .emo-cat:hover { background: var(--g4c-accent-soft); }

#g4chat .emo-sec-h {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--g4c-mut2);
  padding: 10px 2px 5px;
}

#g4chat .emo-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
#g4chat .emo-head + .emo-grid, #g4chat .emo-found + .emo-grid { padding-top: 8px; }
#g4chat .emo-grid .emo-tile {
  cursor: pointer;
  text-align: center;
  border-radius: 6px;
  padding: 3px;
  transition: background .1s, transform .1s;
}
#g4chat .emo-grid .emo-tile:hover { background: var(--g4c-accent-soft); transform: scale(1.15); }

/* ── Р1. Реакции: «☺» на пузыре, всплывашка, чипы (style.css:583–597) ─────── */
#g4chat .b-react {
  position: absolute;
  top: -9px;
  right: -7px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--g4c-panel);
  border: 1px solid var(--g4c-line);
  color: var(--g4c-mut);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 3;
}
#g4chat .b-react svg { width: 13px; height: 13px; }
#g4chat .g4c-wrap:hover .b-react { display: flex; }
#g4chat .b-react:hover { color: var(--g4c-ink); border-color: var(--g4c-accent); }
#g4chat .g4c-wrap.mine .b-react { right: auto; left: -7px; }

#g4chat .react-pop {
  position: absolute;
  top: -40px;
  right: 0;
  background: var(--g4c-panel);
  border: 1px solid var(--g4c-line);
  border-radius: 18px;
  padding: 5px 8px;
  display: flex;
  gap: 6px;
  box-shadow: var(--g4c-sh-pop);
  z-index: 7;
  animation: g4cPopIn .12s ease-out;
}
#g4chat .g4c-wrap.mine .react-pop { right: auto; left: 0; }
#g4chat .react-pop span { cursor: pointer; transition: transform .1s; line-height: 0; flex: none; }
#g4chat .react-pop span:hover { transform: scale(1.35); }
#g4chat .react-pop .emo-r { width: 24px; height: 24px; }
#g4chat .react-pop .emo-r.emo-txt { width: 24px; height: 24px; font-size: 21px; line-height: 24px; text-align: center; }

/* Держатель чипов — третий элемент флекс-строки .g4c-wrap. Локальный сброс
   (#g4chat *{min-width:0}) разрешает флекс-детям съезжать в ноль, и рядом с
   широким пузырём держатель ужимался до 16–18px: чип превращался в пустой овал,
   картинка эмодзи получала width:0 при заданных 19px. Сжиматься ему нельзя. */
#g4chat .react-holder {
  margin-top: -4px;
  flex: 0 1 auto;
  min-width: -webkit-min-content;   /* старые Safari: без этого сработает сброс min-width:0 */
  min-width: min-content;           /* ужаться можно, но не уже одного целого чипа */
}
#g4chat .react-holder.mine { text-align: right; }
#g4chat .react-row { display: inline-flex; gap: 4px; flex-wrap: wrap; }
#g4chat .react-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--g4c-panel2);
  border: 1px solid var(--g4c-line);
  border-radius: 12px;
  padding: 1px 8px;
  font-size: 12px;
  color: var(--g4c-mut);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: border-color .12s, background .12s;
}
#g4chat .react-chip.mine { border-color: var(--g4c-accent); background: var(--g4c-accent-soft); color: var(--g4c-ink); }
#g4chat .react-chip:hover { border-color: var(--g4c-accent); }

/* ── Р2. Меню сообщения со строкой реакций (style.css:731–742) ────────────── */
#g4chat .mm-wrap {
  position: absolute;
  top: 14px;
  right: -6px;
  z-index: 7;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  max-width: calc(100vw - 40px);
  animation: g4cPopIn .12s ease-out;
}
#g4chat .mm-wrap.mine { right: auto; left: -6px; align-items: flex-start; }
#g4chat .mm-wrap .msg-menu { position: static; animation: none; right: auto; left: auto; }

#g4chat .mm-reacts {
  background: var(--g4c-panel);
  border: 1px solid var(--g4c-line);
  border-radius: 20px;
  padding: 6px 9px;
  display: flex;
  gap: 6px;
  align-items: center;
  box-shadow: var(--g4c-sh-pop);
}
#g4chat .mm-reacts span { cursor: pointer; transition: transform .1s; line-height: 0; flex: none; }
#g4chat .mm-reacts span:hover { transform: scale(1.3); }
#g4chat .mm-reacts .emo-r { width: 23px; height: 23px; }
#g4chat .mm-reacts .emo-r.emo-txt { width: 23px; height: 23px; font-size: 20px; line-height: 23px; text-align: center; }
#g4chat .mm-reacts .mm-more { color: var(--g4c-mut); font-size: 13px; padding: 0 3px; user-select: none; line-height: 1; }
#g4chat .mm-reacts.all {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  max-height: 190px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 14px;
  width: 240px;
}

#g4chat .msg-menu .menu-it.red { color: var(--g4c-red); }
#g4chat .msg-menu .menu-it.red:hover { background: var(--g4c-red-soft); }

/* ── Ш1. Меню шапки (звук, очистка) ──────────────────────────────────────── */
#g4chat .g4c-hbtns { position: relative; }
#g4chat .g4c-headmenu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: auto;
  min-width: 220px;
}

/* ── Ш2. Подтверждение очистки ───────────────────────────────────────────── */
#g4chat .g4c-confirm {
  position: absolute;
  inset: 0;
  z-index: 30;
  background: rgba(14, 17, 23, .35);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  animation: g4cPopIn .12s ease-out;
}
#g4chat .g4c-confirm .cd {
  background: var(--g4c-bar);
  border: 1px solid var(--g4c-line);
  border-radius: var(--g4c-r);
  box-shadow: var(--g4c-sh-pop);
  padding: 16px;
  max-width: 300px;
}
#g4chat .g4c-confirm .tx { font-size: 13px; color: var(--g4c-ink); margin-bottom: 14px; }
#g4chat .g4c-confirm .row { display: flex; gap: 8px; justify-content: flex-end; }
#g4chat .g4c-btn {
  padding: 7px 14px;
  border-radius: var(--g4c-r-sm);
  border: 1px solid var(--g4c-line);
  background: var(--g4c-panel2);
  color: var(--g4c-ink);
  font-size: 12.5px;
  transition: background .12s, border-color .12s;
}
#g4chat .g4c-btn:hover { border-color: var(--g4c-mut2); }
#g4chat .g4c-btn.acc { background: var(--g4c-accent); border-color: var(--g4c-accent); color: #fff; }
#g4chat .g4c-btn.acc:hover { background: var(--g4c-glow); border-color: var(--g4c-glow); }

/* ── В1. Родной выбор файла не должен быть виден: только скрепка ─────────── */
#g4chat .g4c-fi,
#g4chat input[type="file"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  border: 0 !important;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden !important;
  white-space: nowrap;
  opacity: 0 !important;
  pointer-events: none !important;
}
#g4chat [hidden] { display: none !important; }
#g4chat .g4c-fi[hidden] { display: block !important; }

/* ── А1. Раскрытие и сворачивание окна ───────────────────────────────────── */
#g4chat.g4c-closing { display: block; pointer-events: none; }
#g4chat.g4c-closing .g4c-win { animation: g4cWinOut .19s cubic-bezier(.4, 0, 1, 1) forwards; }

/* телефон: окно вырастает из кнопки в правом нижнем углу */
@keyframes g4cWinInMob {
  from { opacity: .35; transform: translate3d(22px, 26px, 0) scale(.55); border-radius: 30px; }
  to   { opacity: 1;   transform: none; border-radius: 0; }
}

@keyframes g4cWinOut {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(14px) scale(.94); }
}

/* кнопка ждёт ответа: мягкий пульс ободка, пока есть непрочитанное */
#g4chat-launcher.g4c-ring::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--g4c-accent);
  opacity: 0;
  animation: g4cRing 2s ease-out infinite;
  pointer-events: none;
}

@keyframes g4cRing {
  0% { transform: scale(.92); opacity: .55; }
  70% { transform: scale(1.18); opacity: 0; }
  100% { transform: scale(1.18); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  #g4chat-launcher.g4c-ring::after { animation: none; }
}

/* меню форматирования по правому клику в поле ввода (style.css:755–761) */
#g4chat .fmt-menu { position: absolute; bottom: 58px; left: 12px; right: auto; top: auto; min-width: 160px; }
#g4chat .fmt-menu .menu-it:nth-child(1) { font-weight: 800; }
#g4chat .fmt-menu .menu-it:nth-child(2) { font-style: italic; }
#g4chat .fmt-menu .menu-it:nth-child(3) { text-decoration: underline; }
#g4chat .fmt-menu .menu-it:nth-child(4) { text-decoration: line-through; }
#g4chat .fmt-menu .menu-it:nth-child(6) { font-family: var(--g4c-mono); }

/* ═══════════════════════════════════════════════════════════════════════════
   К. КАРТОЧКИ ТОВАРОВ В ЛЕНТЕ (разговорный шопинг) + плашка в корзине сайта

   Карточка КОМПАКТНАЯ и во всю ширину сообщения: wrap — flex-строка (аватар+пузырь),
   поэтому карточкам нужен перенос на свою строку (flex-basis:100%), иначе они
   зажимаются в столбик сбоку от пузыря — владелец это уже поймал.
   ═══════════════════════════════════════════════════════════════════════════ */

#g4chat .g4c-wrap { flex-wrap: wrap; }
#g4chat .g4c-cards {
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 2px;
}

#g4chat .g4c-card {
  display: flex;
  align-items: stretch;
  background: var(--g4c-bar, #fff);
  border: 1px solid var(--g4c-line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 6px rgba(15, 23, 42, .05);
}

/* фото слева, компактное, с листанием */
#g4chat .g4c-card .cardph {
  position: relative;
  flex: 0 0 92px;
  min-height: 108px;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  user-select: none;
  border-right: 1px solid var(--g4c-line);
}
#g4chat .g4c-card .cardph img {
  max-width: 84px; max-height: 96px;
  width: auto; height: auto;
  object-fit: contain;
  display: block;
}
#g4chat .g4c-card .cardph.noimg img { display: none; }
#g4chat .g4c-card .cardph.noimg::after { content: 'фото'; font-size: 11px; color: var(--g4c-mut2); }
#g4chat .g4c-card .cardph .nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid var(--g4c-line);
  background: rgba(255,255,255,.95);
  color: var(--g4c-ink);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
  opacity: .9;
}
#g4chat .g4c-card .cardph .nav svg { width: 11px; height: 11px; }
#g4chat .g4c-card .cardph .nav:hover { border-color: var(--g4c-accent); color: var(--g4c-accent); }
#g4chat .g4c-card .cardph .nav.prev { left: 2px; }
#g4chat .g4c-card .cardph .nav.next { right: 2px; }
#g4chat .g4c-card .cardph .dots {
  position: absolute; left: 0; right: 0; bottom: 3px;
  display: flex; gap: 3px; justify-content: center;
}
#g4chat .g4c-card .cardph .dots i { width: 4px; height: 4px; border-radius: 50%; background: rgba(15,23,42,.2); }
#g4chat .g4c-card .cardph .dots i.on { background: var(--g4c-accent); }

/* текстовая часть справа */
#g4chat .g4c-card .cardbody {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 10px 9px;
  display: flex; flex-direction: column; gap: 5px;
}
#g4chat .g4c-card .ttl {
  font-size: 12.5px; font-weight: 700; line-height: 1.25;
  color: var(--g4c-ink); text-decoration: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
#g4chat .g4c-card .ttl:hover { color: var(--g4c-accent); }
#g4chat .g4c-card .art { font-size: 10.5px; color: var(--g4c-mut2); }

#g4chat .g4c-card .offers { display: flex; flex-wrap: wrap; gap: 4px; max-height: 84px; overflow-y: auto; scrollbar-width: thin; }
#g4chat .g4c-card .offers.blink { animation: g4cBlink .5s ease 2; }
@keyframes g4cBlink { 50% { transform: scale(1.04); } }
#g4chat .g4c-card .ofchip {
  border: 1px solid var(--g4c-line);
  background: var(--g4c-field);
  color: var(--g4c-ink);
  border-radius: 999px;
  font-size: 10.5px; line-height: 1;
  padding: 5px 8px;
  cursor: pointer;
}
#g4chat .g4c-card .ofchip.on {
  background: var(--g4c-accent-soft);
  border-color: var(--g4c-accent);
  color: var(--g4c-accent);
  font-weight: 700;
}

/* Селекторы вариантов (29.07): ряд на каждую изменяемую характеристику —
   подпись + кнопки значений / свотчи с превью из свойств ТП / выпадающий список */
#g4chat .g4c-card .offers.vars { display: block; max-height: 132px; }
#g4chat .g4c-card .vrow { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin: 2px 0; }
#g4chat .g4c-card .vlab { font-size: 10px; color: var(--g4c-mut2); min-width: 62px; }
#g4chat .g4c-card .vbtn {
  border: 1px solid var(--g4c-line);
  background: var(--g4c-field);
  color: var(--g4c-ink);
  border-radius: 999px;
  font-size: 10.5px; line-height: 1;
  padding: 5px 8px;
  cursor: pointer;
}
#g4chat .g4c-card .vbtn.on { background: var(--g4c-accent-soft); border-color: var(--g4c-accent); color: var(--g4c-accent); font-weight: 700; }
#g4chat .g4c-card .vbtn:disabled { opacity: .35; cursor: not-allowed; }
#g4chat .g4c-card .vbtn.sw { padding: 2px; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
#g4chat .g4c-card .vbtn.sw img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; display: block; }
#g4chat .g4c-card .vbtn.sw.on { box-shadow: 0 0 0 2px var(--g4c-accent); border-color: var(--g4c-accent); }
#g4chat .g4c-card .vddl {
  border: 1px solid var(--g4c-line);
  background: var(--g4c-field);
  color: var(--g4c-ink);
  border-radius: 8px;
  font-size: 11px;
  padding: 4px 6px;
  max-width: 170px;
}

#g4chat .g4c-card .pricerow { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
#g4chat .g4c-card .pricerow .pr { font-size: 14.5px; font-weight: 800; color: var(--g4c-ink); }
#g4chat .g4c-card .pricerow s { font-size: 11px; color: var(--g4c-mut2); }
#g4chat .g4c-card .pricerow .stock { font-size: 10.5px; color: var(--g4c-mut2); margin-left: auto; }
#g4chat .g4c-card .pricerow .stock.ok { color: var(--g4c-ok); }

#g4chat .g4c-card .cardact { display: flex; align-items: center; gap: 8px; margin-top: auto; }
#g4chat .g4c-card .tocart {
  flex: 1 1 auto;
  background: var(--g4c-accent);
  color: #fff;
  border: 0; border-radius: 8px;
  font-size: 11.5px; font-weight: 700;
  padding: 7px 11px;
  cursor: pointer;
  white-space: nowrap;
}
#g4chat .g4c-card .tocart:hover:not(:disabled) { background: var(--g4c-glow); }
#g4chat .g4c-card .tocart:disabled { opacity: .55; cursor: default; }
#g4chat .g4c-card .tocart.done { background: var(--g4c-ok); opacity: 1; }

/* Выбор количества (вместо «Открыть на сайте», владелец 28.07): стрелки шагают
   кратно кратности продажи, ручной ввод округляется, цена пересчитывается */
#g4chat .g4c-card .qtyrow {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--g4c-line);
  border-radius: 8px;
  background: var(--g4c-field);
  overflow: hidden;
}
#g4chat .g4c-card .qbtn {
  width: 26px; height: 30px;
  border: 0; background: transparent;
  color: var(--g4c-ink);
  font-size: 15px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
}
#g4chat .g4c-card .qbtn:hover:not(:disabled) { color: var(--g4c-accent); background: var(--g4c-accent-soft); }
#g4chat .g4c-card .qbtn:disabled { opacity: .35; cursor: default; }
#g4chat .g4c-card .qinp {
  width: 32px; height: 30px;
  border: 0; background: transparent;
  text-align: center;
  font: 700 12.5px/1 var(--g4c-body);
  color: var(--g4c-ink);
  padding: 0;
}
#g4chat .g4c-card .qinp:focus { outline: none; }
#g4chat .g4c-card .qunit { font-size: 11px; color: var(--g4c-mut2); padding-right: 4px; }
#g4chat .g4c-card .pricerow .perunit { font-size: 10.5px; color: var(--g4c-mut2); }

/* ── Развёрнутый режим окна (кнопка «развернуть» в шапке, владелец 28.07) ────
   Чат раскрывается на большую часть экрана всплывающим окном: шире лента,
   крупнее карточки товаров — для тех, кто общается с ИИ всерьёз.
   На мобильных не действует: там окно и так во весь экран. */
@media (min-width: 761px) {
  #g4chat.g4c-max .g4c-win {
    width: min(940px, calc(100vw - 48px));
    height: min(calc(100vh - 48px), 1000px);
    max-height: calc(100vh - 48px);
  }
  #g4chat.g4c-max .g4c-thread { padding: 18px 22px 20px; }
  #g4chat.g4c-max .g4c-wrap { max-width: 76%; }
  #g4chat.g4c-max .g4c-card .cardph { flex-basis: 150px; min-height: 150px; }
  #g4chat.g4c-max .g4c-card .cardph img { max-width: 138px; max-height: 138px; }
  #g4chat.g4c-max .g4c-card .cardbody { padding: 10px 14px 11px; }
  #g4chat.g4c-max .g4c-card .ttl { font-size: 14px; }
  #g4chat.g4c-max .g4c-card .art { font-size: 11.5px; }
  #g4chat.g4c-max .g4c-card .pricerow .pr { font-size: 17px; }
  #g4chat.g4c-max .g4c-card .ofchip { font-size: 11.5px; padding: 6px 10px; }
  #g4chat.g4c-max .g4c-card .tocart { font-size: 12.5px; padding: 8px 14px; }
  #g4chat.g4c-max .g4c-card .offers { max-height: 120px; }
}

/* Кнопки быстрого ответа под сообщением ИИ («Позвать менеджера» / «Пока не надо») */
#g4chat .g4c-quick { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
#g4chat .g4c-quick button {
  border: 1px solid var(--g4c-accent);
  background: var(--g4c-bar, #fff);
  color: var(--g4c-accent);
  border-radius: 999px;
  font-size: 12.5px; font-weight: 600;
  padding: 8px 14px;
  cursor: pointer;
}
#g4chat .g4c-quick button:hover { background: var(--g4c-accent-soft); }

/* Плашка «Добавлено в чате» в корзине САЙТА — вне #g4chat; вешается в блок цены,
   чтобы её не перекрывал ховер-зум фотографии товара */
.g4c-cartmark {
  display: block;
  width: fit-content;
  margin: 3px 0 0;
  padding: 3px 9px;
  border-radius: 999px;
  background: #fff3e9;
  border: 1px solid #ffd3ae;
  color: #d35400;
  font: 700 10.5px/1.35 -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  white-space: nowrap;
}

/* Тост «Добавлено в корзину» поверх сайта (как родная плашка аспро, справа сверху) */
.g4c-carttoast {
  position: fixed;
  top: 18px; right: 18px;
  z-index: 100000;
  background: #fff;
  border: 1px solid #ffd3ae;
  border-left: 4px solid #FF6600;
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(15,23,42,.16);
  padding: 12px 16px;
  font: 600 13px/1.4 -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  color: #1C2430;
  max-width: 320px;
  animation: g4cToastIn .25s ease;
}
.g4c-carttoast b { color: #FF6600; }
@keyframes g4cToastIn { from { transform: translateY(-12px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ═══════════════════════════════════════════════════════════════════════════
   Э3. МИНИ-ПАНЕЛЬ ЭМОДЗИ (10 телеграммных гифок, решение владельца 27.07.2026)
   ═══════════════════════════════════════════════════════════════════════════ */

#g4chat .emoji-pop.emoji-pop-mini {
  width: auto;
  min-width: 0;
  max-height: none;
  padding: 8px;
  overflow: visible;
}
#g4chat .emoji-pop-mini .emo-grid { grid-template-columns: repeat(5, 1fr); gap: 6px; }
#g4chat .emoji-pop-mini .emo-tile { width: 40px; height: 40px; }
#g4chat .emoji-pop-mini .emo-p { width: 32px; height: 32px; }

/* ═══════════════════════════════════════════════════════════════════════════
   З1. КАРТОЧКА ЗАКАЗА В ЧАТЕ (оформление консультантом, владелец 07.10.2026, п.6)
   Только где сервер включил оформление (state.chat_order). Кнопка — цвет кнопок сайта.
   ═══════════════════════════════════════════════════════════════════════════ */
#g4chat .g4c-order {
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
  margin-top: 2px;
  background: var(--g4c-bar, #fff);
  border: 1px solid var(--g4c-line);
  border-radius: 12px;
  box-shadow: 0 1px 6px rgba(15, 23, 42, .05);
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--g4c-ink);
}
#g4chat .g4c-order.is-off { opacity: .62; }
#g4chat .g4c-order.is-done, #g4chat .g4c-order.is-final { border-color: var(--g4c-ok); }
#g4chat .g4c-order .go-h { font: 700 13.5px/1.3 var(--g4c-disp); }
#g4chat .g4c-order.is-done .go-h, #g4chat .g4c-order.is-final .go-h { color: var(--g4c-ok); }
#g4chat .g4c-order .go-items { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; scrollbar-width: thin; }
#g4chat .g4c-order .go-it { display: flex; align-items: center; gap: 8px; }
#g4chat .g4c-order .go-ph {
  flex: 0 0 44px; width: 44px; height: 44px;
  border-radius: 8px; border: 1px solid var(--g4c-line); background: #fff;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
#g4chat .g4c-order .go-ph img { width: 100%; height: 100%; object-fit: contain; display: block; }
#g4chat .g4c-order .go-ph.noimg::after { content: 'фото'; font-size: 10px; color: var(--g4c-mut2); }
#g4chat .g4c-order .go-n { flex: 1 1 auto; min-width: 0; }
#g4chat .g4c-order .go-t {
  font-size: 12px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
#g4chat .g4c-order .go-q { font-size: 11px; color: var(--g4c-mut2); margin-top: 1px; }
#g4chat .g4c-order .go-s { flex: 0 0 auto; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
#g4chat .g4c-order .go-rows { display: flex; flex-direction: column; gap: 3px; border-top: 1px solid var(--g4c-line); padding-top: 8px; }
#g4chat .g4c-order .go-r { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; }
#g4chat .g4c-order .go-r span { color: var(--g4c-mut); }
#g4chat .g4c-order .go-r b { font-weight: 600; text-align: right; }
#g4chat .g4c-order .go-sub { font-size: 11.5px; color: var(--g4c-mut); line-height: 1.35; }
#g4chat .g4c-order .go-total {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 1px solid var(--g4c-line); padding-top: 8px;
  font-size: 13px;
}
#g4chat .g4c-order .go-total b { font-size: 16px; font-weight: 800; }
#g4chat .g4c-order .go-btn {
  display: block; width: 100%;
  background: var(--g4c-accent); color: #fff;
  border: 0; border-radius: 8px;
  font: 700 14px/1.2 var(--g4c-body);
  padding: 11px 14px;
  text-align: center; text-decoration: none;
  cursor: pointer;
}
#g4chat .g4c-order .go-btn:hover:not(:disabled) { background: var(--g4c-glow); color: #fff; }
#g4chat .g4c-order .go-btn:disabled { opacity: .6; cursor: default; }
#g4chat .g4c-order .go-note { font-size: 11px; color: var(--g4c-mut2); text-align: center; }
#g4chat .g4c-order .go-err { font-size: 12px; color: var(--g4c-red); text-align: center; }
#g4chat .g4c-order .go-err[hidden] { display: none; }
#g4chat .g4c-order .go-link { font-size: 12px; color: var(--g4c-accent); text-align: center; text-decoration: none; }
#g4chat .g4c-order .go-link:hover { text-decoration: underline; }


/* ═══════════════════════════════════════════════════════════════════════════
   Пункты выдачи под ответом бота (10.10.2026, владелец, личка 1280): кнопка
   «Выбрать этот» у каждого названного пункта и квадратная карта пунктов под
   пузырём (сама карта — chatmap.js/chatmap.css, грузятся по требованию).
   ═══════════════════════════════════════════════════════════════════════════ */
#g4chat .g4c-pick-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 8px; }
#g4chat .g4c-pick {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 30px; padding: 6px 12px; border-radius: 8px; max-width: 100%;
  background: var(--g4c-accent); color: #fff;
  font-size: 13px; font-weight: 600; line-height: 1.25; white-space: normal; text-align: left;
}   /* 16.10.2026: длинная подпись («Выбрать: Почта, Барболина, 4 (отделение почты)») — в две строки, а не за край пузыря */
#g4chat .g4c-pick:hover { background: #e65c00; }
#g4chat .g4c-pick.done { background: var(--g4c-panel2); color: var(--g4c-mut); }
#g4chat .g4c-pmap { flex: 1 1 100%; width: 100%; min-width: 0; margin-top: 4px; }
#g4chat .g4c-pmap-in {
  position: relative; width: 100%; aspect-ratio: 1 / 1; max-height: 420px;
  border-radius: 12px; overflow: hidden; border: 1px solid var(--g4c-line); background: #eef1f5;
}
@supports not (aspect-ratio: 1 / 1) { #g4chat .g4c-pmap-in { height: 0; padding-bottom: 100%; } }
#g4chat .g4c-pmap-ld {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px;
  padding: 16px; text-align: center; font-size: 13px; color: var(--g4c-mut);
}
#g4chat .g4c-pmap-retry { color: var(--g4c-accent); font-weight: 600; text-decoration: underline; }
#g4chat .g4c-pmap img, #g4chat .g4c-pmap canvas { max-width: none; vertical-align: baseline; }