/* ============================================================================
   ═══ ВИДЖЕТ ПОДДЕРЖКИ (.wg-) — ланчер, окно 380×640, тред; мобайл sheet ═══
   Вынесен из _support.css (lift target, PORTING §4.3). Файл САМОДОСТАТОЧЕН —
   только правила, без @import: его подключают и app-бандл (через
   application.tailwind.css), и публичные layout'ы marketing/legal напрямую
   (Propshaft) вместе с токенами (_design_tokens.css, tokens/_semantic.css).
   ========================================================================= */

/* ============================================================================
   ЛАУНЧЕР — rose-gold пуговица с presence-точкой и unread-бейджем
   PORT → app/views/shared/_support_widget.html.erb (рендер в layout на всех
   клиентских страницах) + Stimulus support--widget_controller.js
   ========================================================================= */
/* bottom — из общей лестницы плавающих элементов (--float-slot-1), а не
   фиксированные 22px: в модулях с нижним таб-баром ланчер садился прямо на
   навигацию и перекрывал её кнопку. См. _design_tokens.css. */
.wg-launcher { position: fixed; right: 22px; bottom: var(--float-slot-1); z-index: var(--z-popover);
  width: 58px; height: 58px; border-radius: var(--radius-full);
  display: grid; place-items: center; color: var(--color-accent-on);
  background: radial-gradient(circle at 34% 28%,
      color-mix(in oklch, var(--color-accent) 58%, white),
      var(--color-accent) 58%, var(--color-accent-strong) 130%);
  box-shadow: var(--shadow-pop), 0 0 0 1px color-mix(in oklch, var(--color-accent-strong) 35%, transparent);
  transition: transform var(--motion-duration-fast) var(--ease-spring),
              box-shadow var(--motion-duration-fast) var(--motion-ease); }
.wg-launcher:hover { transform: translateY(-2px) scale(1.04);
  box-shadow: var(--shadow-pop), 0 0 26px color-mix(in oklch, var(--color-accent) 30%, transparent); }
.wg-launcher:active { transform: scale(.97); }
.wg-launcher .icon { width: 26px; height: 26px; stroke-width: 1.9; grid-area: 1 / 1;
  transition: opacity var(--motion-duration-fast) var(--motion-ease),
              transform var(--motion-duration-base) var(--ease-spring); }
.wg-launcher__ic-close { opacity: 0; transform: rotate(-60deg) scale(.5); }
.wg-launcher.is-open .wg-launcher__ic-chat { opacity: 0; transform: rotate(60deg) scale(.5); }
.wg-launcher.is-open .wg-launcher__ic-close { opacity: 1; transform: none; }
/* unread — тёплый бейдж-счётчик (не «пожарный» danger) */
.wg-launcher__badge { position: absolute; top: -5px; left: -7px; min-width: 22px; height: 22px; padding: 0 6px;
  display: grid; place-items: center; border-radius: var(--radius-full);
  font-family: var(--font-mono); font-feature-settings: var(--num-tabular); font-size: 11.5px; font-weight: 600;
  background: var(--color-bg-elevated); color: var(--color-accent-strong);
  border: var(--hairline-width) solid var(--color-border-strong);
  /* кольцо цвета фона страницы отделяет чип от свеса ланчера в dark ([nit]-фикс);
     в light оно бесшовно к фону. */
  box-shadow: var(--shadow-card), 0 0 0 2px var(--color-bg); }
[data-theme="dark"] .wg-launcher__badge { background: var(--color-bg-muted); }
.wg-launcher__ring { position: absolute; inset: -5px; border-radius: 50%; pointer-events: none;
  border: 1.5px solid color-mix(in oklch, var(--color-accent) 45%, transparent);
  opacity: 0; }
.wg-launcher.has-unread .wg-launcher__ring { animation: wg-ring 2.8s var(--motion-ease) infinite; }
@keyframes wg-ring { 0% { opacity: .8; transform: scale(.92); } 70% { opacity: 0; transform: scale(1.22); } 100% { opacity: 0; } }

/* ЗАДЕЛ (gap-лист PR: nudge/deep-links) — разметка приедет follow-up'ом.
   ---- ПЛАШКА ИНЦИДЕНТА над launcher (закрытое состояние) --------------------
   PORT → Support::IncidentBannerComponent.new(variant: :compact) — тот же
   компонент, что баннер в виджете и пост на status.html                      */
.wg-nudge { position: fixed; right: 22px; bottom: 94px; z-index: var(--z-popover); width: 330px;
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 12px 12px 15px;
  background: var(--color-bg-elevated); border: var(--hairline-width) solid var(--color-border-strong);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-pop); overflow: hidden; text-align: left; cursor: pointer;
  animation: wg-pop-in var(--motion-duration-slow) var(--ease-spring) both; }
.wg-nudge::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--color-warning); }
.wg-nudge:hover { border-color: color-mix(in oklch, var(--color-warning) 50%, var(--color-border-strong)); }
.wg-nudge__icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--radius-md);
  background: var(--color-warning-soft); color: var(--color-warning-text); flex: none; }
.wg-nudge__icon .icon { width: 15px; height: 15px; }
.wg-nudge__title { font-size: 13px; font-weight: 700; color: var(--color-fg); }
.wg-nudge__text { font-size: 12px; color: var(--color-fg-muted); line-height: 1.45; margin-top: 2px; }
.wg-nudge__more { font-size: 12px; color: var(--color-accent-strong); font-weight: 600; margin-top: 5px; display: inline-block; }
.wg-nudge__x { flex: none; width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: var(--radius-sm); color: var(--color-fg-subtle); margin: -3px -3px 0 0; }
.wg-nudge__x:hover { background: var(--color-bg-muted); color: var(--color-fg); }
.wg-nudge__x .icon { width: 13px; height: 13px; }
body.wg-open .wg-nudge { display: none; }

/* ============================================================================
   ОКНО ВИДЖЕТА 380×640 — home + тред; мобайл: полноэкранный bottom-sheet
   PORT → turbo_frame_tag "support_widget", src: support_widget_path,
   loading: :lazy — frame ОБЯЗАН иметь box (display:inline-flex!), иначе
   IntersectionObserver его не видит (урок shell-topbar lazy-frame)
   ========================================================================= */
.wg-scrim { position: fixed; inset: 0; z-index: var(--z-overlay);
  background: color-mix(in oklch, var(--color-fg) 34%, transparent); backdrop-filter: blur(2px);
  display: none; }
.wg-win { position: fixed; right: 22px; bottom: 94px; z-index: var(--z-popover);
  width: 380px; height: min(640px, calc(100dvh - 122px));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--color-bg); color: var(--color-fg);
  border: var(--hairline-width) solid var(--color-border-strong);
  border-radius: var(--radius-2xl); box-shadow: var(--shadow-pop);
  transform-origin: 100% 100%;
  animation: wg-pop-in var(--motion-duration-slow) var(--ease-spring) both; }
@keyframes wg-pop-in { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
.wg-grab { display: none; }
.wg-hint { display: none; }

/* вью внутри окна (home / thread) */
.wg-view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.wg-view.is-entering { animation: wg-view-in var(--motion-duration-base) var(--motion-ease); }
@keyframes wg-view-in { from { opacity: 0; transform: translateX(6px); } to { opacity: 1; transform: none; } }
.wg-body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 16px 16px; display: flex; flex-direction: column; gap: 14px; }
.wg-body > * { flex: none; } /* скролл вместо сжатия детей (flex-shrink ловушка) */

/* ---- HOME: тёплая шапка + приветствие -------------------------------------
   PORT → Support::Widget::HomeComponent (health: presence + ETA из медианы
   first-reply за 7 дней — Support::EtaBadgeComponent, тот же на client.html) */
.wg-head { flex: none; padding: 14px 14px 0;
  background: linear-gradient(180deg, color-mix(in oklch, var(--color-accent) 13%, var(--color-bg)), var(--color-bg) 86%); }
.wg-head__row { display: flex; align-items: center; gap: 10px; }
.wg-head__brand { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; }
.wg-head__brand .shell-topbar__mark { width: 26px; height: 26px; border-radius: 8px; }
.wg-head__brand .shell-topbar__mark::after { inset: 6px; }
.wg-head__brand .shell-topbar__mark::before { inset: 9.5px; }
.wg-head__spacer { flex: 1; }
.wg-x { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--radius-md);
        color: var(--color-fg-muted); flex: none; }
.wg-x:hover { background: color-mix(in oklch, var(--color-fg) 7%, transparent); color: var(--color-fg); }
.wg-greet { padding: 18px 4px 14px; }
.wg-greet__hi { font-family: var(--font-display); font-size: 23px; font-weight: 600; letter-spacing: -.02em; }
.wg-greet__line { font-family: var(--font-italic); font-style: italic; font-size: 14px;
                  color: var(--color-accent-strong); margin-top: 3px; }
.wg-team { display: flex; align-items: center; gap: 10px; margin-top: 12px; }

/* поиск + живые подсказки статей (мягкий deflection, закон §5) */
.wg-search { position: relative; }
.wg-search .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
                   width: 16px; height: 16px; color: var(--color-fg-subtle); pointer-events: none; }
.wg-search__input { width: 100%; height: 42px; padding: 0 36px 0 38px;
  background: var(--color-bg-elevated); color: var(--color-fg);
  border: var(--hairline-width) solid var(--color-border-strong); border-radius: var(--radius-lg);
  font-size: 13.5px; transition: border-color var(--motion-duration-fast) var(--motion-ease),
                                 box-shadow var(--motion-duration-fast) var(--motion-ease); }
.wg-search__input::placeholder { color: var(--color-fg-subtle); }
.wg-search__input:focus { border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-accent) 16%, transparent); }
.wg-search__clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--radius-sm);
  color: var(--color-fg-subtle); }
.wg-search__clear:hover { background: var(--color-bg-muted); color: var(--color-fg); }
.wg-search__clear .icon { position: static; transform: none; width: 14px; height: 14px; pointer-events: none; }
.wg-suggest { display: flex; flex-direction: column; gap: 8px; }
.wg-suggest .sup-article-card { padding: 10px 12px; }
.wg-suggest__human { align-self: center; margin-top: 2px; }
.wg-suggest__empty { text-align: center; padding: 10px 8px 2px; color: var(--color-fg-muted); font-size: 12.5px; }
.wg-suggest__empty .sup-empty__quote { font-size: 14.5px; display: block; margin-bottom: 4px; }

/* секции home */
.wg-home-rest { display: flex; flex-direction: column; gap: 12px; }
.wg-cap { font-family: var(--font-mono); font-size: 9.5px; font-weight: 500; letter-spacing: .2em;
          text-transform: uppercase; color: var(--color-fg-subtle); padding: 2px 2px 0; }

/* быстрые темы 2×2 (guided-вход, Apple/Linear-паттерн карточками) */
.wg-topics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wg-topic { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px;
  min-height: 88px; background: var(--color-bg-elevated);
  border: var(--hairline-width) solid var(--color-border); border-radius: var(--radius-lg);
  cursor: pointer; text-align: left;
  transition: border-color var(--motion-duration-fast) var(--motion-ease),
              transform var(--motion-duration-fast) var(--motion-ease),
              box-shadow var(--motion-duration-fast) var(--motion-ease); }
.wg-topic:hover { border-color: color-mix(in oklch, var(--color-accent) 45%, var(--color-border));
                  transform: translateY(-1px); box-shadow: var(--shadow-card); }
.wg-topic__icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-md);
                  background: var(--color-accent-soft); color: var(--color-accent-strong); }
.wg-topic__icon .icon { width: 15px; height: 15px; }
.wg-topic__t { font-size: 13px; font-weight: 600; line-height: 1.25; }
/* margin-top:auto — подпись прижата к низу карточки: при 2-строчном заголовке
   («Сессии со специалистом») базовые линии подписей ряда выравниваются ([nit]-фикс). */
.wg-topic__s { font-size: 11px; color: var(--color-fg-subtle); line-height: 1.35; margin-top: auto; }

/* mini-«Мои обращения» — вход в ЕДИНЫЙ тред
   PORT → тот же partial support/conversations/_row.html.erb, что и список
   «Мои обращения» на client.html (?view=list)                               */
.wg-mini { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 12px;
  background: var(--color-bg-elevated); border: var(--hairline-width) solid var(--color-border);
  border-radius: var(--radius-lg); cursor: pointer;
  transition: border-color var(--motion-duration-fast) var(--motion-ease),
              box-shadow var(--motion-duration-fast) var(--motion-ease); }
.wg-mini:hover { border-color: color-mix(in oklch, var(--color-accent) 45%, var(--color-border));
                 box-shadow: var(--shadow-card); }
.wg-mini.has-unread { background: color-mix(in oklch, var(--color-accent) 5%, var(--color-bg-elevated));
                      border-color: color-mix(in oklch, var(--color-accent) 30%, var(--color-border)); }
.wg-mini__body { flex: 1; min-width: 0; }
.wg-mini__title { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wg-mini__sub { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 11.5px; color: var(--color-fg-muted); }
.wg-mini__new { display: inline-flex; align-items: center; height: 17px; padding: 0 7px; border-radius: var(--radius-full);
  background: var(--color-accent); color: var(--color-accent-on); font-size: 10px; font-weight: 700; }
.wg-mini > .icon { color: var(--color-fg-subtle); }
.wg-foot-line { text-align: center; font-size: 11px; color: var(--color-fg-subtle); padding: 2px 0 0; }
.wg-foot-line button { color: var(--color-fg-muted); cursor: pointer; font-size: 11px; }
.wg-foot-line button:hover { color: var(--color-accent-strong); text-decoration: underline; text-underline-offset: 2px; }

/* ---- ТРЕД — тот же диалог, что client.html --------------------------------
   PORT → ЕДИНЫЙ ТРЕД: turbo_frame_tag "support_thread_a-201" — ТОТ ЖЕ frame,
   что рендерит client.html?view=thread&t=a-201; broadcast долетает в оба
   места одним turbo_stream_from "support_conversation_a-201"                */
.wg-thread-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 9px 10px;
  background: var(--color-bg-elevated); border-bottom: var(--hairline-width) solid var(--color-border); }
.wg-back { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--radius-md);
           color: var(--color-fg-muted); flex: none; }
.wg-back:hover { background: var(--color-bg-muted); color: var(--color-fg); }
.wg-agent { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.wg-agent__name { font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wg-agent__sub { font-size: 11px; color: var(--color-fg-muted); display: flex; align-items: center; gap: 5px; margin-top: 1px; }

/* нить заботы в шапке треда (общий мотив с client.html) */
.wg-threadline { flex: none; padding: 12px 22px 9px; border-bottom: var(--hairline-width) solid var(--color-border);
                 background: color-mix(in oklch, var(--color-bg-muted) 40%, var(--color-bg)); }
.wg-threadline .sup-thread__label { font-size: 10.5px; }

/* «можно закрыть страницу» — асинхронность как в мессенджере (RU-паттерн) */
.wg-asyncline { flex: none; display: flex; align-items: flex-start; gap: 8px; padding: 8px 16px;
  font-size: 11.5px; line-height: 1.45; color: var(--color-fg-muted);
  background: color-mix(in oklch, var(--color-info-soft) 45%, var(--color-bg));
  border-bottom: var(--hairline-width) solid var(--color-border); }
.wg-asyncline .icon { width: 13px; height: 13px; flex: none; margin-top: 1.5px; color: var(--color-info-text); }

/* компакт-строка инцидента в треде (proactive, Intercom outbound-паттерн) */
.wg-inc-strip { flex: none; display: flex; align-items: flex-start; gap: 8px; padding: 8px 16px;
  font-size: 11.5px; line-height: 1.45; color: var(--color-warning-text);
  background: var(--color-warning-soft); border-bottom: var(--hairline-width) solid var(--color-border); }
.wg-inc-strip .icon { width: 13px; height: 13px; flex: none; margin-top: 1.5px; }
.wg-inc-strip b { font-weight: 700; }

.wg-msgs { display: flex; flex-direction: column; gap: 12px; padding-top: 12px; }
.wg-msg-spacer { width: 28px; flex: none; }
.wg-msgs .sup-msg--agent + .sup-msg--agent { margin-top: -6px; } /* группировка серий */
.wg-day { align-self: center; font-family: var(--font-mono); font-feature-settings: var(--num-tabular);
          font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-fg-subtle);
          padding: 2px 10px; border-radius: var(--radius-full); background: var(--color-bg-muted); }
.wg-msg-actions { display: flex; gap: 8px; margin-top: 8px; }
.wg-new { display: flex; align-items: center; gap: 10px; margin: 2px 0; }
.wg-new::before, .wg-new::after { content: ""; flex: 1; height: var(--hairline-width);
  background: color-mix(in oklch, var(--color-accent) 45%, var(--color-border)); }
.wg-new b { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
            color: var(--color-accent-strong); }

/* composer — поле прижато к низу, тач-цели крупные */
.wg-composer { flex: none; display: flex; align-items: flex-end; gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: var(--color-bg-elevated); border-top: var(--hairline-width) solid var(--color-border); }
.wg-composer__field { flex: 1; min-width: 0; max-height: 96px; overflow-y: auto; resize: none;
  padding: 10px 12px; font-size: 13.5px; line-height: 1.45; color: var(--color-fg);
  background: var(--color-bg); border: var(--hairline-width) solid var(--color-border-strong);
  border-radius: var(--radius-xl);
  transition: border-color var(--motion-duration-fast) var(--motion-ease),
              box-shadow var(--motion-duration-fast) var(--motion-ease); }
.wg-composer__field::placeholder { color: var(--color-fg-subtle); }
.wg-composer__field:focus { border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-accent) 16%, transparent); }
.wg-composer .icon-btn { width: 40px; height: 40px; flex: none; }
.wg-send { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: var(--radius-full);
  background: var(--color-accent); color: var(--color-accent-on); box-shadow: var(--shadow-soft);
  transition: background var(--motion-duration-fast) var(--motion-ease),
              transform var(--motion-duration-fast) var(--ease-pop),
              opacity var(--motion-duration-fast) var(--motion-ease); }
.wg-send:hover { background: var(--color-accent-strong); }
.wg-send:active { transform: scale(.92); }
.wg-send:disabled { opacity: var(--opacity-disabled); pointer-events: none; }
.wg-send .icon { width: 18px; height: 18px; }

/* нижние вкладки Домой / Разговор (Intercom Messenger spaces) */
.wg-tabbar { flex: none; display: grid; grid-template-columns: 1fr 1fr;
  background: var(--color-bg-elevated); border-top: var(--hairline-width) solid var(--color-border); }
.wg-tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; min-height: 52px; padding: 7px 0 8px; font-size: 10.5px; font-weight: 500;
  color: var(--color-fg-subtle);
  transition: color var(--motion-duration-fast) var(--motion-ease); }
.wg-tab .icon { width: 19px; height: 19px; }
.wg-tab:hover { color: var(--color-fg-muted); }
.wg-tab.is-active { color: var(--color-accent-strong); }
.wg-tab__dot { position: absolute; top: 7px; right: calc(50% - 19px); width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-accent); border: 1.5px solid var(--color-bg-elevated); opacity: 0;
  transition: opacity var(--motion-duration-fast) var(--motion-ease); }
.wg-tab.has-unread .wg-tab__dot { opacity: 1; }

/* ============================================================================
   МОБАЙЛ ≤640 — полноэкранный bottom-sheet (NN/g: фокус внутрь, явный крестик
   + Esc, не только swipe; тач ≥48px у нижней кромки)
   PORT → mobile/bottom_sheet_controller.js + focus-trap как в shared/modal
   ========================================================================= */
/* S-B-151: на страницах с правым app-rail ланчер садился прямо на его нижнюю иконку —
   шестерёнку «Настройки». Лестница слотов (--float-slot-*) разводит плавающие элементы
   по ВЕРТИКАЛИ, а рельс мешает по ГОРИЗОНТАЛИ: он не плавающий, он часть шелла, и в
   лестницу его не посадить. Сдвигаем ланчер на ширину рельса — и только там, где рельс
   реально виден: на мобиле он скрыт (но остаётся в DOM, поэтому одного `:has` мало), а
   публичные страницы рендерятся вовсе без него. */
/* Правка интегратора (w4) поверх S-B-151: рельс включается РАЗНЫМИ брейкпоинтами,
   и одного правила на 768px мало. Обёртка рельса в разметке:
     hidden md:block  (768px)  — pm, admin_panel, mailing, kb
     hidden lg:block (1024px)  — application, dashboard
   При 768-1023px на дашборде рельса уже нет, а сдвиг по правилу на 768px уже был —
   справа оставалась дыра ровно в ширину рельса (замерено: зазор 72px при рельсе
   шириной 0). Это тот же промах, что автор верно предусмотрел для телефона.
   Поэтому каждое правило привязано к ТОМУ ЖЕ брейкпоинту, которым разметка гейтит
   рельс: разъедутся — сдвиг просто не применится, и вернётся видимое перекрытие,
   а не незаметная дыра. */
/* Рельс включается ОДНИМ брейкпоинтом (md) во всех лэйаутах — раньше их было
   два (md в pm/kb/mailing, lg в application/dashboard), и на планшете 768–1023px
   ланчер уже был сдвинут, а рельса ещё не было: справа зияла дыра ровно в его
   ширину. Правило привязано к тому же `.md\:block`, которым разметка гейтит
   рельс: разъедутся — сдвиг просто не применится, и вернётся видимое
   перекрытие, а не незаметная дыра. */
@media (min-width: 768px) {
  body:has(.md\:block > .shell-apprail) .wg-launcher { right: calc(var(--app-rail-w) + 16px); }
}

@media (max-width: 640px) {
  .wg-content { padding: 22px 16px 120px; }
  .wg-grid { grid-template-columns: 1fr; }
  .wg-read__grid { grid-template-columns: 1fr; }
  .wg-hello h1 { font-size: 22px; }

  .wg-launcher { right: 16px; }
  .wg-nudge { left: 16px; right: 16px; width: auto; bottom: calc(var(--float-slot-1) + 72px); }
  body.wg-open .wg-launcher { display: none; }
  body.wg-open .wg-scrim { display: block; }
  body.wg-open { overflow: hidden; } /* sheet открыт → фон не скроллится */

  .wg-win { inset: 0; width: auto; height: 100dvh; border-radius: 0; border: none;
            padding-top: env(safe-area-inset-top);
            animation: wg-sheet-in var(--motion-duration-slow) var(--ease-spring) both; }
  .wg-grab { display: block; flex: none; width: 44px; height: 4px; margin: 8px auto 0;
             border-radius: var(--radius-full); background: var(--color-border-strong); }
  .wg-head { padding-top: 8px; }
  .wg-hint.is-on { display: block; text-align: center; font-size: 10.5px; color: var(--color-fg-subtle); padding: 6px 16px 0; }
  .wg-x, .wg-back { width: 48px; height: 48px; }
  .wg-tab { min-height: 56px; }
  .wg-composer .icon-btn, .wg-send { width: 48px; height: 48px; }
  /* [P2] Открытый тред: мессенджеры показывают у низа только composer —
     таб-бар прячется (класс wg-thread ставит switchTab), инпут садится к кромке. */
  body.wg-thread .wg-tabbar { display: none; }
  .wg-composer__field { min-height: 48px; padding: 13px 14px; }
  .wg-topic { min-height: 96px; }
}
@keyframes wg-sheet-in { from { opacity: .4; transform: translateY(48px); } to { opacity: 1; transform: none; } }

/* ============================================================================
   NO-DEBT STATES — skeleton (?loading=1) · пустой поиск · print · reduced
   ========================================================================= */
.wg-skel-block { display: flex; flex-direction: column; gap: 12px; }
.wg-skel-row { display: flex; gap: 10px; align-items: flex-end; }
.wg-skel-row--r { flex-direction: row-reverse; }
.wg-skel-av { width: 28px; height: 28px; border-radius: 50%; flex: none; }
.wg-skel-b1 { width: 68%; height: 56px; border-radius: var(--radius-xl); }
.wg-skel-b2 { width: 52%; height: 40px; border-radius: var(--radius-xl); }
.wg-skel-line { height: 14px; border-radius: var(--radius-xs); }
.wg-skel-card { height: 88px; border-radius: var(--radius-lg); }
.wg-skel-input { height: 42px; border-radius: var(--radius-lg); }

@media print {
  .wg-launcher, .wg-win, .wg-nudge, .wg-scrim, .sup-toast-wrap { display: none !important; }
  .wg-page > .shell-topbar { position: static; }
  body.wg-open .wg-content { opacity: 1; filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  .wg-win, .wg-nudge, .wg-view.is-entering { animation: none; }
  .wg-launcher.has-unread .wg-launcher__ring { animation: none; opacity: 0; }
  .wg-launcher:hover, .wg-topic:hover { transform: none; }
  body.wg-open .wg-content { transition: none; }
}

/* ============================================================================
   ДОПОЛНЕНИЯ ПОРТА (не из концепта): коробки turbo-frame'ов, защита [hidden],
   самодостаточность на публичных страницах, мелочи, которых в макете не было.
   ========================================================================= */

/* Ленивые фреймы обязаны иметь box (IntersectionObserver не видит
   display:contents — урок shell-topbar) и тянуться на всю высоту окна. */
turbo-frame#support_widget,
turbo-frame#support_widget_thread { display: flex; flex-direction: column; flex: 1; min-height: 0; }

/* Защита hidden: глобального [hidden]-правила в бандле нет, а display:flex/grid
   этих блоков перебил бы UA-стиль — окно «не закрывалось» бы. */
.wg-win[hidden] { display: none !important; }
.wg-win [hidden] { display: none !important; }
.wg-launcher__badge[hidden] { display: none !important; }

/* Базовая геометрия .icon для публичных страниц (_components.css там нет;
   в app-бандле каскад совпадает). Размеры конкретных мест задают .wg-правила. */
.wg-win .icon, .wg-launcher .icon, .wg-nudge .icon { display: inline-block; flex: none; }
.wg-win .icon--sm { width: 16px; height: 16px; }

/* Марка бренда (shared/brand/seal) в шапке — просто выровнять. */
.wg-head__brand svg { flex: none; }

/* Честная строка доступности (вместо вычеркнутого presence — срез 10). */
.wg-avail { font-size: 12px; color: var(--color-fg-muted); }

/* Обёртка имени/статуса в шапке треда. */
.wg-agent__body { min-width: 0; flex: 1; }
.wg-agent__sub .status-badge { font-size: 10px; }

/* Ссылка «Все обращения» под мини-списком. */
.wg-alllink { align-self: center; font-size: 12px; color: var(--color-accent-strong); }
.wg-alllink:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Пустые состояния вкладок. */
.wg-thread-empty { flex: none; display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 22px 16px; text-align: center; font-size: 13px; color: var(--color-fg-muted); }

/* CTA гостевого виджета — самодостаточная (на публичных страницах .btn нет). */
.wg-guest-cta { align-self: center; display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: var(--radius-full); font-size: 13.5px; font-weight: 600;
  background: var(--color-accent); color: var(--color-accent-on); box-shadow: var(--shadow-soft);
  cursor: pointer; text-decoration: none;
  transition: background var(--motion-duration-fast) var(--motion-ease); }
.wg-guest-cta:hover { background: var(--color-accent-strong); }
.wg-guest-cta .icon { width: 16px; height: 16px; }

/* Скелетон: сетка карточек и короткая строка (в концепте были инлайн-стилем,
   CSP-гигиена им не рада). */
.wg-skel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wg-skel-line--third { width: 34%; }

/* Карточки подсказок в виджете — самодостаточная копия ядра .sup-article-card
   (_support.css на публичные страницы не едет; в app-бандле scoped-версия
   выигрывает специфичностью и выглядит так же). */
.wg-suggest .sup-article-card { display: flex; align-items: center; gap: 11px; width: 100%;
  text-align: left; padding: 10px 12px; background: var(--color-bg-elevated);
  border: var(--hairline-width) solid var(--color-border); border-radius: var(--radius-lg);
  cursor: pointer; text-decoration: none; color: inherit;
  transition: border-color var(--motion-duration-fast) var(--motion-ease); }
.wg-suggest .sup-article-card:hover { border-color: color-mix(in oklch, var(--color-accent) 45%, var(--color-border)); }
.wg-suggest .sup-article-card__icon { display: grid; place-items: center; width: 28px; height: 28px;
  flex: none; border-radius: var(--radius-md); background: var(--color-accent-soft); color: var(--color-accent-strong); }
.wg-suggest .sup-article-card__icon .icon { width: 15px; height: 15px; }
.wg-suggest .sup-article-card__body { flex: 1; min-width: 0; }
.wg-suggest .sup-article-card__title { display: block; font-size: 13px; font-weight: 600; line-height: 1.3; }
.wg-suggest .sup-article-card__snippet { display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; font-size: 11.5px; color: var(--color-fg-muted); margin-top: 2px; }

/* Композер страницы внутри фрейма треда: тот же Trix (единый путь записи),
   ужатый под 380 px; тулбар в мессенджер-окне прячем — текст и переносы живут,
   у полной страницы тулбар остаётся. */
turbo-frame#support_widget_thread .cx-composer { flex: none;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: var(--color-bg-elevated); border-top: var(--hairline-width) solid var(--color-border); }
turbo-frame#support_widget_thread .cx-composer trix-toolbar { display: none; }
turbo-frame#support_widget_thread .cx-composer trix-editor { min-height: 44px; max-height: 120px; overflow-y: auto; }

/* Открытое окно: бейдж на ланчере гаснет (концепт-паттерн — крестик без цифры);
   непрочитанное продолжает жить точкой на вкладке «Разговор». */
.wg-launcher.is-open .wg-launcher__badge { display: none !important; }

/* Подвал композера повторяет asyncline тредa («можно закрыть страницу») —
   в 640px-окне одной честной строки достаточно. */
turbo-frame#support_widget_thread .cx-composer__foot { display: none; }

/* Изоляция от editorial-CSS публичных страниц (legal красит и подчёркивает
   все <a>): внутри окна ссылки живут нашими правилами. */
.wg-win a { color: inherit; text-decoration: none; }