/* ============================================================================
   THE ESSENCE — Support module («Поддержка, которая слышит»).
   All support-specific visual design. Depends on essence.css (tokens +
   components) and shell.css (chrome). House style: warm, calm, human.
   Client sees a DIALOGUE (never a ticket); machinery (SLA, queues, buckets)
   is staff-only. Signature motif — the «care thread» (нить заботы): a thin
   rose-gold thread with knot-stages. Zero raw hex — tokens + color-mix only,
   so dark theme and personas come for free.
   Ported to prod: П-PR-0 (S-B-99). Colours (--sup-*) live in THIS file's
   :root / [data-theme="dark"] below (pattern --cal-*), NOT in essence.css.
   ========================================================================= */

:root {
  /* module layout variables */
  --sup-rail-w:   264px;   /* staff queue sidebar content width          */
  --sup-meta-w:   332px;   /* ticket card meta rail (PM slide-over spec) */
  --sup-msg-max:  78%;     /* bubble max width inside a thread           */
  --sup-knot:     10px;    /* care-thread knot diameter                  */

  /* ---- SUPPORT COLOUR PALETTE — module tokens (pattern --cal-*): the concept
     kept these in essence.css; on prod their home is THIS file, BOTH theme
     blocks. Statuses ride the existing semantic families → personas + dark come
     for free; only SLA-breach and Yuia hues are new. --sup-waiting needs
     --color-info* (added to _design_tokens.css in this same PR). */
  --sup-new:     var(--color-accent);            /* «Получили» — тёплый accent    */
  --sup-open:    var(--color-warning);           /* «Разбираемся» — амбер          */
  --sup-waiting: var(--color-info);              /* «Ждём тебя» — info-семья       */
  --sup-solved:  var(--color-success);           /* «Решено»                       */
  --sup-snoozed: var(--color-fg-subtle);         /* отложено / на контроле         */
  --sup-sla-ok:          var(--color-success);
  --sup-sla-warn:        var(--color-warning);
  --sup-sla-breach:      #D2553F;                /* просрочка — семья --cal-now    */
  --sup-sla-breach-soft: color-mix(in oklch, #D2553F 14%, white);
  --sup-sla-breach-text: #A63C29;                /* AA на soft и на bg             */
  --sup-thread: var(--color-accent-decorative);  /* «нить заботы»                  */
  --sup-ai:      #C77A8A;                        /* Юя — тёплый blush, НЕ фиолет   */
  --sup-ai-soft: color-mix(in oklch, #C77A8A 13%, white);
  --sup-ai-text: #A35E6F;                        /* AA-текст blush-семьи           */
}

[data-theme="dark"] {
  /* Support palette — dark. Status hues lift to the *-text pastels; breach
     follows --cal-now dark; thread → clay; Yuia → dark blush. Softs mix against
     bg-elevated, never black (mirrors the --cal-* dark block). */
  --sup-new:     var(--color-accent);            /* #E8B898 — светлый rose-gold */
  --sup-open:    var(--color-warning-text);      /* #E8C271 */
  --sup-waiting: var(--color-info-text);         /* #9CC6E6 */
  --sup-solved:  var(--color-success-text);      /* #88D6AB */
  --sup-snoozed: var(--color-fg-subtle);         /* #948A80 */
  --sup-sla-ok:          var(--color-success-text);
  --sup-sla-warn:        var(--color-warning-text);
  --sup-sla-breach:      #F0765F;                /* как --cal-now dark */
  --sup-sla-breach-soft: color-mix(in oklch, #F0765F 16%, var(--color-bg-elevated));
  --sup-sla-breach-text: #F5A28E;
  --sup-thread: #C9A088;                         /* = --cal-clay dark */
  --sup-ai:      #E4A3AF;                        /* = --cal-blush dark */
  --sup-ai-soft: color-mix(in oklch, #E4A3AF 15%, var(--color-bg-elevated));
  --sup-ai-text: #ECB6C0;
}

/* ============================================================================
   ═══ CORE ═══  shared components used by several pages (.sup- prefix).
   Page-specific CSS lives in assets/pages/<prefix>.css (builders) and is
   merged below into the PAGES section by the assembler.
   ========================================================================= */

/* ---- APP FRAME — layout wiring around the real shell.css chrome ---------- */
/* nav labels: <button> rail items inherit UA text-align:center → align left
   so label hugs its icon (matches <a> items + bucket sub-rows). Prod override,
   shell.css stays verbatim. Fixes support/analytics/settings sidebars at once. */
.shell-nav__item { text-align: left; }
.sup-app  { display: flex; flex-direction: column; height: 100dvh; overflow: hidden;
            background: var(--color-bg); color: var(--color-fg); }
.sup-body { flex: 1; display: flex; min-height: 0; overflow: hidden; }
.sup-main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--color-bg); overflow: hidden; }

/* mobile hamburger lives at the very start of the real .shell-topbar */
.sup-menu-btn { display: none; }

/* view sections — one visible at a time, soft enter (same as calendar) */
.sup-view { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.sup-view.is-entering { animation: sup-view-in var(--motion-duration-base) var(--motion-ease); }
@keyframes sup-view-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---- MESSAGE BUBBLES (.sup-msg) — the unified conversation ----------------
   Voice = colour: --client (warm accent-soft), --agent (elevated card),
   --yuia (blush ai-soft + «ассистент» badge), --system (centred quiet line),
   --note (internal, warning-soft, «Не видно клиенту»).
   Direction = layout: default incoming (left), .sup-msg--out flips right
   (client.html: client is out; support.html: agent is out).             */
.sup-msg { display: flex; align-items: flex-start; gap: 10px; max-width: var(--sup-msg-max); }
.sup-msg--out { margin-left: auto; flex-direction: row-reverse; }
.sup-msg__bubble {
  position: relative; padding: 10px 14px; font-size: 13.5px; line-height: 1.55;
  border-radius: var(--radius-xl); background: var(--color-bg-elevated);
  border: var(--hairline-width) solid var(--color-border);
  box-shadow: var(--shadow-soft); min-width: 0; overflow-wrap: break-word;
}
.sup-msg--client .sup-msg__bubble {
  background: var(--color-accent-soft); border-color: transparent;
  color: color-mix(in oklch, var(--color-fg) 92%, var(--color-accent));
}
.sup-msg--agent .sup-msg__bubble { border-bottom-left-radius: var(--radius-xs); }
.sup-msg--client.sup-msg--out .sup-msg__bubble { border-bottom-right-radius: var(--radius-xs); }
.sup-msg--yuia .sup-msg__bubble {
  background: var(--sup-ai-soft);
  border-color: color-mix(in oklch, var(--sup-ai) 32%, transparent);
  border-bottom-left-radius: var(--radius-xs);
}
.sup-msg__author { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
                   color: var(--color-fg-muted); margin-bottom: 3px; }
.sup-msg__meta { display: flex; align-items: center; gap: 5px; margin-top: 4px;
                 font-family: var(--font-mono); font-feature-settings: var(--num-tabular);
                 font-size: 10.5px; color: var(--color-fg-subtle); }
.sup-msg--out .sup-msg__meta { justify-content: flex-end; }
.sup-msg__meta .icon { width: 13px; height: 13px; }
.sup-msg__meta .is-read { color: var(--sup-solved); } /* honest read receipt only */
.sup-msg__attach { display: block; margin-top: 8px; border-radius: var(--radius-md);
                   border: var(--hairline-width) solid var(--color-border); max-width: 280px; overflow: hidden; }
.sup-msg__attach img { width: 100%; display: block; }

/* system line — quiet centred narration («Юя позвала Аню — она уже читает») */
.sup-msg--system { max-width: 100%; align-self: center; display: flex; align-items: center; gap: 8px;
                   font-size: 11.5px; color: var(--color-fg-subtle); padding: 2px 0; text-align: center; }
.sup-msg--system::before, .sup-msg--system::after {
  content: ""; width: 28px; height: var(--hairline-width); background: var(--color-border); flex: none; }
.sup-msg--system .icon { width: 13px; height: 13px; color: var(--sup-thread); }

/* internal note — staff-only, loudly marked (law №1: machinery is invisible) */
.sup-msg--note { max-width: 92%; }
.sup-msg--note .sup-msg__bubble {
  background: var(--color-warning-soft);
  border: var(--hairline-width) dashed color-mix(in oklch, var(--color-warning) 55%, transparent);
}
.sup-msg__note-tag { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; width: fit-content;
  font-family: var(--font-display); font-size: 9.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--color-warning-text); }
.sup-msg__note-tag .icon { width: 11px; height: 11px; }

/* ---- CARE THREAD (.sup-thread) — the signature «нить заботы» --------------
   Thin rose-gold thread with knot-stages: Получили ● Разбираемся ● Решено.
   Horizontal (thread header, hub cards) + --vertical (history, status page). */
.sup-thread { display: flex; align-items: flex-start; }
.sup-thread__stage { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;
                     min-width: 0; text-align: center; }
.sup-thread__stage::before { /* the thread itself — hairline between knots */
  content: ""; position: absolute; top: calc(var(--sup-knot) / 2);
  left: calc(-50% + var(--sup-knot)); right: calc(50% + var(--sup-knot)); height: var(--hairline-width);
  background: color-mix(in oklch, var(--sup-thread) 45%, var(--color-border));
}
.sup-thread__stage:first-child::before { display: none; }
.sup-thread__stage.is-done::before { background: var(--sup-thread); height: 1px; }
.sup-thread__knot { position: relative; z-index: 1; width: var(--sup-knot); height: var(--sup-knot); border-radius: 50%;
  background: var(--color-bg-elevated); border: 1.5px solid color-mix(in oklch, var(--sup-thread) 55%, var(--color-border-strong));
  transition: background var(--motion-duration-base) var(--motion-ease), box-shadow var(--motion-duration-base) var(--motion-ease); }
.sup-thread__stage.is-done .sup-thread__knot { background: var(--sup-thread); border-color: var(--sup-thread); }
.sup-thread__stage.is-active .sup-thread__knot {
  background: var(--sup-thread); border-color: var(--sup-thread);
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--sup-thread) 22%, transparent);
  animation: sup-knot-glow 2.4s var(--motion-ease) infinite;
}
@keyframes sup-knot-glow {
  0%, 100% { box-shadow: 0 0 0 4px color-mix(in oklch, var(--sup-thread) 22%, transparent); }
  50%      { box-shadow: 0 0 0 6px color-mix(in oklch, var(--sup-thread) 12%, transparent); }
}
.sup-thread__label { font-size: 11px; color: var(--color-fg-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sup-thread__stage.is-active .sup-thread__label { color: var(--color-accent-strong); font-weight: 600; }
.sup-thread__stage.is-done .sup-thread__label { color: var(--color-fg-muted); }
.sup-thread__when { font-family: var(--font-mono); font-feature-settings: var(--num-tabular); font-size: 10px; color: var(--color-fg-subtle); }

/* vertical thread — timeline flavour («Мои обращения», история, статус) */
.sup-thread--vertical { flex-direction: column; align-items: stretch; }
.sup-thread--vertical .sup-thread__stage { flex-direction: row; align-items: center; gap: 10px; text-align: left; padding: 7px 0; }
.sup-thread--vertical .sup-thread__stage::before {
  top: auto; bottom: calc(50% + var(--sup-knot)); left: calc(var(--sup-knot) / 2); right: auto;
  width: var(--hairline-width); height: calc(100% - var(--sup-knot) - 6px); transform: translateX(-50%);
}
.sup-thread--vertical .sup-thread__label { font-size: 12.5px; }

/* ---- STATUS BADGES (.sup-status--*) — on top of prod .status-badge --------
   Usage: <span class="status-badge sup-status--open">Разбираемся</span>
   Staff sees open/waiting/…; the CLIENT wording is dual-labeled in markup.  */
.sup-status--new     { background: var(--color-accent-soft);  color: var(--color-accent-strong); }
.sup-status--open    { background: var(--color-warning-soft); color: var(--color-warning-text); }
.sup-status--waiting { background: var(--color-info-soft);    color: var(--color-info-text); }
.sup-status--solved  { background: var(--color-success-soft); color: var(--color-success-text); }
.sup-status--snoozed { background: var(--color-bg-muted);     color: var(--color-fg-muted);
                       border: var(--hairline-width) solid var(--color-border); }
.sup-status__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

/* ---- SLA STRIP + TICKING TIMER (.sup-sla) — STAFF-ONLY machinery ----------
   <span class="sup-sla sup-sla--warn"><span class="sup-sla__track">
     <span class="sup-sla__fill" style="--w:64%"></span></span>
   <span class="sup-sla__timer" data-numeric="true">07:12</span></span>      */
.sup-sla { --_sla: var(--sup-sla-ok); --_sla-text: var(--color-success-text);
           display: inline-flex; align-items: center; gap: 8px; }
.sup-sla--warn   { --_sla: var(--sup-sla-warn);   --_sla-text: var(--color-warning-text); }
.sup-sla--breach { --_sla: var(--sup-sla-breach); --_sla-text: var(--sup-sla-breach-text); }
.sup-sla__track { width: 56px; height: 4px; border-radius: var(--radius-full);
                  background: var(--color-bg-muted); border: var(--hairline-width) solid var(--color-border);
                  overflow: hidden; flex: none; }
.sup-sla__fill { display: block; height: 100%; width: var(--w, 0%); border-radius: inherit; background: var(--_sla);
                 transition: width var(--motion-duration-slow) var(--motion-ease); }
.sup-sla__timer { font-family: var(--font-mono); font-feature-settings: var(--num-tabular);
                  font-size: 12px; color: var(--_sla-text); white-space: nowrap; }
.sup-sla--breach .sup-sla__timer { font-weight: 700; }
.sup-sla--breach .sup-sla__fill { animation: sup-sla-pulse 1.6s var(--motion-ease) infinite; }
@keyframes sup-sla-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* ---- CHANNEL ICONS (.sup-chan--*) — tinted mini-plates (bell-icon style) --
   Colour is DISTINCTIVE only, not semantic: widget=accent, tg=info,
   max=amber, email=neutral.                                                 */
.sup-chan { display: inline-grid; place-items: center; width: 22px; height: 22px;
            border-radius: 7px; flex: none; }
.sup-chan .icon { width: 13px; height: 13px; }
.sup-chan--widget { background: var(--color-accent-soft);  color: var(--color-accent-strong); }
.sup-chan--tg     { background: var(--color-info-soft);    color: var(--color-info-text); }
.sup-chan--max    { background: var(--color-warning-soft); color: var(--color-warning-text); }
.sup-chan--email  { background: color-mix(in oklch, var(--color-fg-subtle) 14%, var(--color-bg-elevated)); color: var(--color-fg);
                    border: var(--hairline-width) solid var(--color-border); }
/* The concept drew four channels; the product has seven. Same plate system, tokens
   only, colour still distinctive-not-semantic. `cabinet` and `contact` are both
   «written from our own site» and share one neutral plate — the icon tells them apart. */
.sup-chan--vk     { background: var(--color-success-soft); color: var(--color-success-text); }
.sup-chan--site   { background: var(--color-bg-muted);     color: var(--color-fg-muted); }

/* ---- CSAT (.sup-csat) — 5 signature rose-gold line smileys ----------------
   NEVER yellow emoji. One tap = rated (law №8). Touch targets ≥48px.
   <fieldset class="sup-csat" role="radiogroup" aria-label="Как всё прошло?">
     <label class="sup-csat__item"><input class="sup-csat__input" type="radio"
       name="csat" value="5"><svg class="icon"><use href="#i-csat-5"/></svg>
       <span class="sup-csat__cap">Отлично</span></label> × 5              */
.sup-csat { display: flex; gap: 6px; border: none; padding: 0; }
.sup-csat__item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
                  width: 52px; padding: 8px 0 6px; border-radius: var(--radius-lg); cursor: pointer;
                  color: color-mix(in oklch, var(--color-accent) 42%, var(--color-fg-subtle));
                  transition: color var(--motion-duration-fast) var(--motion-ease),
                              background var(--motion-duration-fast) var(--motion-ease),
                              transform var(--motion-duration-fast) var(--ease-pop); }
.sup-csat__item .icon { width: 30px; height: 30px; stroke-width: 1.5; }
.sup-csat__input { position: absolute; opacity: 0; pointer-events: none; }
.sup-csat__cap { font-size: 10px; line-height: 1.2; opacity: 0; transform: translateY(-2px);
                 transition: opacity var(--motion-duration-fast) var(--motion-ease),
                             transform var(--motion-duration-fast) var(--motion-ease); }
.sup-csat__item:hover { color: var(--color-accent); background: var(--color-bg-muted); transform: translateY(-2px); }
.sup-csat__item:hover .sup-csat__cap { opacity: 1; transform: none; }
.sup-csat__item:has(.sup-csat__input:checked) {
  color: var(--color-accent-strong); background: var(--color-accent-soft);
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--color-accent) 35%, transparent),
              0 0 18px color-mix(in oklch, var(--color-accent) 18%, transparent); }
.sup-csat__item:has(.sup-csat__input:checked) .sup-csat__cap { opacity: 1; transform: none; font-weight: 600; }
.sup-csat__item:has(.sup-csat__input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* ---- KB ARTICLE CARD (.sup-article-card) — suggest-first, never a wall ----
   Used by: hub search, composer live-suggest, widget, 404.                  */
.sup-article-card { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; text-align: left;
  width: 100%; 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),
              transform var(--motion-duration-fast) var(--motion-ease),
              box-shadow var(--motion-duration-fast) var(--motion-ease); }
.sup-article-card:hover { border-color: color-mix(in oklch, var(--color-accent) 45%, var(--color-border));
                          transform: translateY(-1px); box-shadow: var(--shadow-card); }
.sup-article-card__icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-md);
                          background: var(--color-accent-soft); color: var(--color-accent-strong); flex: none; }
.sup-article-card__icon .icon { width: 16px; height: 16px; }
.sup-article-card__body { flex: 1; min-width: 0; }
.sup-article-card__title { font-size: 13.5px; font-weight: 600; color: var(--color-fg); }
.sup-article-card__snippet { font-size: 12.5px; color: var(--color-fg-muted); margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sup-article-card__meta { display: flex; align-items: center; gap: 8px; margin-top: 6px;
                          font-size: 11px; color: var(--color-fg-subtle); }
.sup-article-card__meta .icon { width: 12px; height: 12px; }
.sup-article-card > .icon:last-child { color: var(--color-fg-subtle); margin-top: 2px; } /* chevron */

/* ---- INCIDENT BANNER (.sup-incident) — «Кого касается / Что делать / Что делаем» */
.sup-incident { position: relative; padding: 14px 16px 14px 19px; border-radius: var(--radius-lg);
  background: var(--color-warning-soft); border: var(--hairline-width) solid color-mix(in oklch, var(--color-warning) 35%, transparent);
  overflow: hidden; }
.sup-incident::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
                        background: var(--color-warning); }
.sup-incident--resolved { background: var(--color-success-soft);
                          border-color: color-mix(in oklch, var(--color-success) 35%, transparent); }
.sup-incident--resolved::before { background: var(--color-success); }
.sup-incident__head { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700;
                      color: var(--color-warning-text); margin-bottom: 8px; }
.sup-incident--resolved .sup-incident__head { color: var(--color-success-text); }
.sup-incident__head .icon { width: 16px; height: 16px; flex: none; }
.sup-incident__row { display: grid; grid-template-columns: 118px 1fr; gap: 4px 12px; padding: 4px 0; font-size: 12.5px; }
.sup-incident__q { font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: .07em;
                   text-transform: uppercase; color: var(--color-warning-text); padding-top: 2px; }
.sup-incident__a { color: var(--color-fg); line-height: 1.5; }
.sup-incident__updates { margin-top: 8px; padding-top: 8px; border-top: var(--hairline-width) solid color-mix(in oklch, var(--color-warning) 25%, transparent);
                         font-size: 11.5px; color: var(--color-fg-muted); }
.sup-incident__updates time { font-family: var(--font-mono); font-feature-settings: var(--num-tabular); color: var(--color-fg-subtle); }
@media (max-width: 560px) { .sup-incident__row { grid-template-columns: 1fr; gap: 1px; } }

/* ---- YUIA BADGE (.sup-ai-badge) — honest «ассистент», never a human ------- */
.sup-ai-badge { display: inline-flex; align-items: center; gap: 4px; height: 17px; padding: 0 7px;
  border-radius: var(--radius-full); background: var(--sup-ai-soft); color: var(--sup-ai-text);
  font-family: var(--font-display); font-size: 9.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; border: var(--hairline-width) solid color-mix(in oklch, var(--sup-ai) 30%, transparent); }
.sup-ai-badge .icon { width: 10px; height: 10px; }

/* ---- LABOR ILLUSION (.sup-labor) — show the work (+22% perceived quality) -
   «Аня читает → разбираемся → готовим ответ», thin progress underneath.    */
.sup-labor { padding: 14px 16px; border-radius: var(--radius-lg);
             background: color-mix(in oklch, var(--color-bg-muted) 55%, var(--color-bg-elevated));
             border: var(--hairline-width) solid var(--color-border); }
.sup-labor__title { font-family: var(--font-italic); font-style: italic; font-size: 13.5px;
                    color: var(--color-accent-strong); margin-bottom: 10px; }
.sup-labor__stage { position: relative; display: flex; align-items: center; gap: 10px; padding: 5px 0;
                    font-size: 12.5px; color: var(--color-fg-subtle); }
.sup-labor__dot { position: relative; z-index: 1; width: 8px; height: 8px; border-radius: 50%; flex: none;
                  background: var(--color-bg-elevated); border: 1.5px solid var(--color-border-strong);
                  margin: 0 3px; }
.sup-labor__stage.is-done { color: var(--color-fg-muted); }
.sup-labor__stage.is-done .sup-labor__dot { background: var(--sup-thread); border-color: var(--sup-thread); }
.sup-labor__stage.is-active { color: var(--color-fg); font-weight: 600; }
.sup-labor__stage.is-active .sup-labor__dot { background: var(--sup-thread); border-color: var(--sup-thread);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--sup-thread) 25%, transparent);
  animation: sup-knot-glow 2.4s var(--motion-ease) infinite; }
.sup-labor__stage .icon { width: 14px; height: 14px; color: var(--sup-solved); }
.sup-labor__bar { height: 3px; border-radius: var(--radius-full); background: var(--color-bg-muted);
                  overflow: hidden; margin-top: 10px; }
.sup-labor__bar-fill { display: block; height: 100%; width: 40%; border-radius: inherit;
  background: linear-gradient(90deg, var(--sup-thread), var(--color-accent));
  transition: width var(--motion-duration-slow) var(--motion-ease); }

/* ---- TYPING INDICATOR (.sup-typing) — honest, only on REAL input ----------
   PORT → prod already has .typing-indicator (same API); on lift, drop this
   block and use the prod class.                                             */
.sup-typing { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--color-fg-muted); }
.sup-typing__dots { display: inline-flex; align-items: center; gap: 3px; }
.sup-typing__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--color-fg-subtle);
                   animation: sup-typing-bounce 1.2s var(--motion-ease) infinite; }
.sup-typing__dot:nth-child(2) { animation-delay: .15s; }
.sup-typing__dot:nth-child(3) { animation-delay: .3s; }
@keyframes sup-typing-bounce { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }

/* ---- CONSENT CHECKBOX (.sup-consent) — guest form, quiet legal line ------- */
.sup-consent { position: relative; display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
               font-size: 12.5px; line-height: 1.5; color: var(--color-fg-muted); }
.sup-consent__input { position: absolute; opacity: 0; width: 0; height: 0; }
.sup-consent__box { display: grid; place-items: center; width: 18px; height: 18px; margin-top: 1px;
  border-radius: var(--radius-xs); background: var(--color-bg-elevated);
  border: var(--hairline-width) solid var(--color-border-strong); flex: none;
  transition: background var(--motion-duration-fast) var(--motion-ease),
              border-color var(--motion-duration-fast) var(--motion-ease); }
.sup-consent__box .icon { width: 12px; height: 12px; stroke-width: 2.6; color: var(--color-accent-on);
                          opacity: 0; transform: scale(.4);
                          transition: opacity var(--motion-duration-fast) var(--motion-ease),
                                      transform var(--motion-duration-fast) var(--ease-pop); }
.sup-consent__input:checked + .sup-consent__box { background: var(--color-accent); border-color: var(--color-accent); }
.sup-consent__input:checked + .sup-consent__box .icon { opacity: 1; transform: none; }
.sup-consent__input:focus-visible + .sup-consent__box { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.sup-consent a, .sup-consent .text-link { color: var(--color-accent-strong); text-decoration: underline; text-underline-offset: 2px; }

/* ---- AI SUGGEST PLATE (.sup-ai-suggest) — draft answer / soften tone ------
   PORT → prod .ai-suggest (left accent bar, soft bg, __source, __actions).  */
.sup-ai-suggest { position: relative; padding: 12px 14px 12px 17px; border-radius: var(--radius-md);
                  background: var(--sup-ai-soft); overflow: hidden; }
.sup-ai-suggest::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--sup-ai); }
.sup-ai-suggest__source { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700;
                          letter-spacing: .06em; text-transform: uppercase; color: var(--sup-ai-text); margin-bottom: 6px; }
.sup-ai-suggest__source .icon { width: 12px; height: 12px; }
.sup-ai-suggest__text { font-size: 13px; line-height: 1.55; color: var(--color-fg); }
.sup-ai-suggest__actions { display: flex; gap: 8px; margin-top: 10px; }

/* ---- CELEBRATION (.sup-celebrate) — quiet shine, no confetti noise --------
   PORT → prod .magic-moment--celebration pattern.                           */
.sup-celebrate { position: relative; text-align: center; padding: 18px 16px; }
.sup-celebrate__line { font-family: var(--font-italic); font-style: italic; font-size: 16px;
                       color: var(--color-accent-strong); }
.sup-celebrate::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: var(--radius-lg);
  background: radial-gradient(ellipse 65% 90% at 50% 0%, color-mix(in oklch, var(--color-accent) 14%, transparent), transparent 70%);
  animation: sup-shine var(--motion-duration-slow) var(--motion-ease) both; }
@keyframes sup-shine { from { opacity: 0; } to { opacity: 1; } }

/* ---- PRESENCE + ETA line (.sup-presence) — the honest-time promise -------- */
.sup-presence { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--color-fg-muted); }
.sup-presence__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-success); flex: none;
                     box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-success) 18%, transparent); }
.sup-presence--off .sup-presence__dot { background: var(--color-fg-subtle); box-shadow: none; }
.sup-presence b { color: var(--color-fg); font-weight: 600; }

/* ============================================================================
   SHARED CHROME — command palette · toasts · kbd help · scrim · mobile
   (same mechanics as calendar-concepts; class names match its engine)
   ========================================================================= */
.sup-scrim { position: fixed; inset: 0; background: rgba(20,15,10,.4); backdrop-filter: blur(2px); z-index: var(--z-overlay); }

.cmdk-overlay { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; justify-content: center;
                align-items: flex-start; padding: 11vh 16px 16px; background: rgba(20,15,10,.42); backdrop-filter: blur(4px); }
.cmdk { width: min(640px, 96vw); max-height: 68vh; display: flex; flex-direction: column; overflow: hidden;
        background: var(--color-bg-elevated); border: var(--hairline-width) solid var(--color-border-strong);
        border-radius: var(--radius-2xl); box-shadow: var(--shadow-pop); animation: modal-in var(--motion-duration-base) var(--ease-spring); }
.cmdk__input-row { display: flex; align-items: center; gap: 12px; padding: 15px 18px; flex: none;
                   border-bottom: var(--hairline-width) solid var(--color-border); }
.cmdk__input-row .icon { color: var(--color-fg-subtle); }
.cmdk__input { flex: 1; border: none; background: none; font-size: 17px; color: var(--color-fg); }
.cmdk__input::placeholder { color: var(--color-fg-subtle); }
.cmdk__esc { font-family: var(--font-mono); font-size: 10px; color: var(--color-fg-subtle);
             border: var(--hairline-width) solid var(--color-border-strong); border-radius: 6px; padding: 3px 7px; }
.cmdk__body { overflow-y: auto; padding: 8px; }
.cmdk__section { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
                 color: var(--color-fg-subtle); padding: 10px 10px 4px; }
.cmdk__item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-md); cursor: pointer; }
.cmdk__item:hover, .cmdk__item.is-active { background: var(--color-bg-muted); }
.cmdk__item .icon { color: var(--color-fg-subtle); flex: none; }
.cmdk__item--create { background: var(--color-accent-soft); }
.cmdk__item--create:hover, .cmdk__item--create.is-active { background: color-mix(in oklch, var(--color-accent) 30%, var(--color-bg-elevated)); }
.cmdk__item--create .icon { color: var(--color-accent-strong); }
.cmdk__main { flex: 1; min-width: 0; }
.cmdk__title { font-size: 14px; font-weight: 500; color: var(--color-fg); }
.cmdk__title .nlp-token { color: var(--color-accent-strong); font-weight: 600; }
.cmdk__sub { font-size: 12px; color: var(--color-fg-subtle); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk__kbd { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--color-fg-subtle);
             border: var(--hairline-width) solid var(--color-border-strong); border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; flex: none; }

.sup-toast-wrap { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: var(--z-toast);
              display: flex; flex-direction: column; gap: 8px; align-items: center; }
.sup-toast { display: flex; align-items: center; gap: 14px; padding: 10px 12px 10px 16px; border-radius: var(--radius-full);
         background: var(--color-fg); color: var(--color-bg-elevated); box-shadow: var(--shadow-pop); font-size: 13.5px;
         animation: sup-toast-in var(--motion-duration-base) var(--ease-spring); }
@keyframes sup-toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.sup-toast__undo { font-weight: 700; color: var(--color-accent); padding: 4px 10px; border-radius: var(--radius-full); }
.sup-toast__undo:hover { background: color-mix(in oklch, var(--color-accent) 18%, transparent); }

.kbd-overlay { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: 20px;
               background: rgba(20,15,10,.42); backdrop-filter: blur(4px); }
.kbd-overlay .card { width: 640px; max-width: 96vw; max-height: 88vh; overflow: auto; }
.kbd-help__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 32px; }
.kbd-help__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 0;
                 border-bottom: var(--hairline-width) solid var(--color-border); font-size: 13px; }
.kbd-help__keys { display: flex; align-items: center; gap: 4px; }
.kbd-help__section { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
                     color: var(--color-fg-subtle); margin: 16px 0 6px; grid-column: 1 / -1; }

/* mobile: real shell → drawer sidebar, hidden app-rail; bottom-nav + FAB */
.sup-bottomnav { display: none; }
.sup-fab { display: none; position: fixed; right: 18px; bottom: 78px; width: 56px; height: 56px; border-radius: 18px;
           background: var(--color-accent); color: var(--color-accent-on); box-shadow: var(--shadow-pop);
           place-items: center; z-index: var(--z-sticky); }
.sup-fab .icon { width: 26px; height: 26px; stroke-width: 2.2; }
@media (max-width: 900px) {
  .sup-menu-btn { display: grid; }
  /* УБРАНЫ переопределения ОБЩИХ классов шелла (.shell-apprail, .shell-sidebar,
     .shell-search, .shell-topbar__timer).
     Они описывали мобильный drawer для концепта модуля поддержки, разметка
     которого в приложении отсутствует: .sup-menu-btn / .sup-bottomnav / .sup-fab
     не встречаются ни в одном шаблоне (0 совпадений по app/). При этом
     .shell-sidebar — ОБЩИЙ класс, его рендерят PM, CRM, рассылки, база знаний,
     календарь и видео. Правило вешало на него transform: translateX(-100%) с
     тумблером .is-open, которого не ставит НИКТО (0 совпадений в JS), — то есть
     ниже 900px боковое меню этих модулей уезжало за экран навсегда.
     Симптом (замерен на 390px): тап по гамбургеру или табу «Ещё» затемнял фон,
     но панель не появлялась — обёртка #mobile-sidebar выезжала на 0, а сам
     .shell-sidebar внутри оставался на -288px. Мобильная навигация PM была
     мертва. Свои .sup-* правила ниже не тронуты. */
  .sup-fab { display: grid; }
  .sup-bottomnav { display: grid; grid-template-columns: repeat(4, 1fr); flex: none; height: 60px;
                   padding-bottom: env(safe-area-inset-bottom);
                   background: var(--color-bg-elevated); border-top: var(--hairline-width) solid var(--color-border); }
  .sup-bottomnav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
                          font-size: 10px; color: var(--color-fg-subtle); min-height: 48px; }
  .sup-bottomnav button.is-active { color: var(--color-accent-strong); }
}
@media (max-width: 620px) {
  .shell-search__placeholder, .shell-search__kbd { display: none; }
  .shell-search { flex: none; width: 40px; padding: 0; justify-content: center; }
  .shell-topbar { gap: 8px; }
}

/* ---- NO-DEBT CORE: skeleton shimmer + empty (pages add their own states) -- */
.sup-skel { background: linear-gradient(90deg, var(--color-bg-muted) 25%,
            color-mix(in oklch, var(--color-bg-muted) 55%, var(--color-bg-elevated)) 37%, var(--color-bg-muted) 63%);
            background-size: 400% 100%; animation: sup-skel-sh 1.4s ease infinite; border-radius: var(--radius-sm); }
@keyframes sup-skel-sh { from { background-position: 100% 0; } to { background-position: 0 0; } }
.sup-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
             padding: 48px 24px; text-align: center; color: var(--color-fg-muted); }
.sup-empty__quote { font-family: var(--font-italic); font-style: italic; font-size: 17px; color: var(--color-accent-strong); }

/* ---- REDUCED MOTION — every core animation must survive ------------------- */
@media (prefers-reduced-motion: reduce) {
  .sup-thread__stage.is-active .sup-thread__knot,
  .sup-labor__stage.is-active .sup-labor__dot,
  .sup-sla--breach .sup-sla__fill,
  .sup-typing__dot,
  .sup-celebrate::before,
  .sup-skel { animation: none; }
  .sup-csat__item:hover, .sup-article-card:hover { transform: none; }
}

/* ============================================================================
   ═══ PAGES (собрано сборщиком из assets/pages/, каталог удалён) ═══
   Order: aw (support) → cx (client) → wg (widget) → st (status) →
   an (analytics) → se (settings) → rt/nf (rate+404).
   Every page keeps its own prefix — no cross-page selector collisions
   (verified: zero duplicate selectors across sections at merge time).
   ========================================================================= */

/* ============================================================================
   ═══ PAGE: support.html — стафф-воркспейс очереди (.aw-) ═══
   Merged from assets/pages/aw.css by the assembler.
   ========================================================================= */

/* ============================================================================
   ═══ SUPPORT.HTML — стафф-воркспейс очереди (.aw-*) ═══
   Page CSS for the agent workspace: queue list (Mail-row pattern), ticket
   card (PM slide-over pattern, 1180×92vh), meta rail 332px, client 360°,
   composer with AI plate, collision, snooze, escalation, bulk bar.
   Depends on: essence.css (tokens+components), shell.css (chrome),
   support.css (.sup-* core). Zero raw hex — tokens + color-mix only.
   Lift target: app/assets/stylesheets/support/_workspace.css
   ========================================================================= */

/* ---- LIST TOOLBAR (над очередью, как тулбар Почты 52px) ------------------- */
.aw-toolbar { flex: none; display: flex; align-items: center; gap: 10px; height: 52px;
  padding: 0 16px; border-bottom: var(--hairline-width) solid var(--color-border);
  background: var(--color-bg-elevated); }
.aw-toolbar__title { font-family: var(--font-display); font-size: 15px; font-weight: 600; white-space: nowrap; }
.aw-toolbar__count { font-family: var(--font-mono); font-feature-settings: var(--num-tabular);
  font-size: 11.5px; color: var(--color-fg-subtle); }
.aw-toolbar__pills { display: flex; align-items: center; gap: 6px; margin-left: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.aw-toolbar__pills::-webkit-scrollbar { display: none; }
.aw-pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px;
  border-radius: var(--radius-full); font-size: 12px; font-weight: 500; white-space: nowrap;
  color: var(--color-fg-muted); border: var(--hairline-width) solid var(--color-border);
  transition: background var(--motion-duration-fast) var(--motion-ease), color var(--motion-duration-fast) var(--motion-ease); }
.aw-pill:hover { background: var(--color-bg-muted); color: var(--color-fg); }
.aw-pill.is-active { background: var(--color-accent-soft); color: var(--color-accent-strong); border-color: transparent; }
.aw-toolbar__spacer { flex: 1; }
.aw-toolbar__shift { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--color-fg-subtle); white-space: nowrap; }
.aw-toolbar__shift b { color: var(--color-fg-muted); font-weight: 600; }

/* ---- QUEUE LIST (паттерн строки Почты: h-48, unread-точка, hover-actions) -- */
.aw-list { flex: 1; overflow-y: auto; min-height: 0; }
.aw-group { padding: 14px 16px 4px; display: flex; align-items: center; gap: 8px; }
.aw-group__label { font-family: var(--font-display); font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--color-fg-subtle); }
.aw-group__label.is-breach { color: var(--sup-sla-breach-text); }
.aw-group__n { font-family: var(--font-mono); font-feature-settings: var(--num-tabular);
  font-size: 10px; color: var(--color-fg-subtle); }
.aw-group__line { flex: 1; height: var(--hairline-width); background: var(--color-border); }

.aw-row { position: relative; display: grid; align-items: center;
  grid-template-columns: 34px 10px 34px 176px 26px minmax(0,1fr) 116px 128px;
  height: 48px; padding-right: 12px; cursor: pointer; text-align: left; width: 100%;
  border-bottom: var(--hairline-width) solid var(--color-border);
  transition: background var(--motion-duration-fast) var(--motion-ease); }
.aw-row:hover { background: var(--color-bg-muted); }
.aw-row.is-cursor { box-shadow: inset 2.5px 0 0 var(--color-accent); background: color-mix(in oklch, var(--color-accent) 5%, transparent); }
.aw-row.is-checked { background: var(--color-accent-soft); }
.aw-row__check { display: grid; place-items: center; }
.aw-row__check input { width: 15px; height: 15px; accent-color: var(--color-accent); cursor: pointer; }
.aw-row__unread { width: 7px; height: 7px; border-radius: 50%; background: transparent; justify-self: center; }
.aw-row.is-unread .aw-row__unread { background: var(--color-accent); box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-accent) 18%, transparent); }
.aw-row__who { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding-left: 10px; }
.aw-row__name { font-size: 13px; font-weight: 500; color: var(--color-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aw-row.is-unread .aw-row__name { font-weight: 700; }
.aw-row__meta { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--color-fg-subtle);
  font-family: var(--font-mono); font-feature-settings: var(--num-tabular); white-space: nowrap; }
.aw-row__text { min-width: 0; display: flex; align-items: baseline; gap: 6px; padding-right: 10px; }
.aw-row__subj { font-size: 13px; color: var(--color-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: none; max-width: 62%; }
.aw-row.is-unread .aw-row__subj { font-weight: 600; }
.aw-row__prev { font-size: 12.5px; color: var(--color-fg-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.aw-row__status { justify-self: start; }
.aw-row__sla { justify-self: end; display: inline-flex; align-items: center; }
.aw-row__wait { font-size: 11px; color: var(--color-fg-subtle); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.aw-row__wait .icon { width: 12px; height: 12px; }
.aw-row__assignee { position: absolute; right: 148px; top: 50%; transform: translateY(-50%); display: none; }
/* hover quick-actions заменяют SLA-колонку (тот же паттерн, что .mail-row-actions
   в _mobile.css — CSS-only reveal; Stimulus-контроллер mailing--quick-actions удалён) */
/* Hover-reveal that a KEYBOARD can reach too. `display: none` removes the buttons from
   the tab order, so an agent without a mouse could never take, answer, park or close
   from the queue (the concept compensated with a j/k cursor we do not port) — and it
   also means `:focus-within` can never fire, because nothing inside can be focused.
   Hidden by opacity instead: focusable, announced, invisible until hover or focus. */
.aw-row__actions { position: absolute; right: 8px; top: 0; bottom: 0; display: flex; align-items: center; gap: 2px;
  opacity: 0; pointer-events: none;
  padding-left: 22px;
  background: linear-gradient(90deg, transparent, var(--color-bg-muted) 22px); }
.aw-row:hover .aw-row__actions, .aw-row:focus-within .aw-row__actions,
.aw-row.is-hoverdemo .aw-row__actions { opacity: 1; pointer-events: auto; }
.aw-row:hover .aw-row__sla, .aw-row:hover .aw-row__status,
.aw-row:focus-within .aw-row__sla, .aw-row:focus-within .aw-row__status,
.aw-row.is-hoverdemo .aw-row__sla, .aw-row.is-hoverdemo .aw-row__status { visibility: hidden; }
.aw-row.is-hoverdemo { background: var(--color-bg-muted); }
.aw-qa { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--radius-sm);
  color: var(--color-fg-muted); transition: background var(--motion-duration-fast) var(--motion-ease), color var(--motion-duration-fast) var(--motion-ease); }
.aw-qa:hover { background: var(--color-bg-elevated); color: var(--color-accent-strong); box-shadow: var(--shadow-soft); }
.aw-qa .icon { width: 15px; height: 15px; }
.aw-row.is-dim .aw-row__name, .aw-row.is-dim .aw-row__subj { color: var(--color-fg-muted); font-weight: 500; }
.aw-row.is-dim .aw-row__prev { color: var(--color-fg-subtle); }
.aw-row.is-dim .avatar { opacity: .72; }

/* ---- BULK BAR (появляется при чекбоксах, как в Почте) ---------------------- */
.aw-bulkbar { position: sticky; bottom: 12px; z-index: var(--z-sticky); margin: 8px auto 12px; width: max-content; max-width: 94%;
  display: flex; align-items: center; gap: 4px; padding: 6px 8px 6px 14px;
  background: var(--color-fg); color: var(--color-bg-elevated); border-radius: var(--radius-full);
  box-shadow: var(--shadow-pop); animation: sup-toast-in var(--motion-duration-base) var(--ease-spring); }
.aw-bulkbar__n { font-size: 12.5px; font-weight: 600; margin-right: 6px; white-space: nowrap; }
.aw-bulkbar button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px;
  border-radius: var(--radius-full); font-size: 12.5px; color: var(--color-bg-elevated); white-space: nowrap; }
.aw-bulkbar button:hover { background: color-mix(in oklch, var(--color-bg-elevated) 16%, transparent); }
.aw-bulkbar button .icon { width: 14px; height: 14px; }
.aw-bulkbar__x { margin-left: 4px; }

/* ---- TICKET CARD — центр-модалка 1180×92vh (паттерн PM slide-over) --------- */
.aw-card-overlay { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center;
  padding: 18px; background: rgba(20,15,10,.44); backdrop-filter: blur(3px); }
.aw-card { display: flex; flex-direction: column; width: min(1180px, 97vw); height: min(92vh, 940px);
  background: var(--color-bg-elevated); border: var(--hairline-width) solid var(--color-border);
  border-radius: 18px; box-shadow: var(--shadow-pop); overflow: hidden;
  animation: modal-in var(--motion-duration-base) var(--ease-spring); }
.aw-card__head { flex: none; display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 20px;
  border-bottom: var(--hairline-width) solid var(--color-border); }
.aw-card__idbox { display: flex; align-items: center; gap: 12px; min-width: 0; }
.aw-card__title { font-family: var(--font-display); font-size: 15.5px; font-weight: 600; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aw-card__sub { display: flex; align-items: center; gap: 7px; margin-top: 2px; font-size: 11px; color: var(--color-fg-subtle);
  font-family: var(--font-mono); font-feature-settings: var(--num-tabular); white-space: nowrap; }
.aw-card__sub .sup-chan { width: 18px; height: 18px; border-radius: 6px; }
.aw-card__sub .sup-chan .icon { width: 11px; height: 11px; }
.aw-card__thread { flex: 1; display: flex; justify-content: center; min-width: 220px; max-width: 330px; margin: 0 auto; }
.aw-card__thread .sup-thread { width: 100%; }
.aw-card__btns { display: flex; align-items: center; gap: 6px; flex: none; margin-left: auto; }
.aw-card__body { flex: 1; display: flex; min-height: 0; }
.aw-card__main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--color-bg); }
.aw-railtoggle { display: none; }

/* дневной разделитель + лента диалога */
.aw-dialog { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 26px 14px; display: flex; flex-direction: column; gap: 13px; }
.aw-day { align-self: center; display: flex; align-items: center; gap: 10px; font-size: 10.5px; letter-spacing: .07em;
  text-transform: uppercase; font-weight: 600; color: var(--color-fg-subtle); padding: 2px 0; }
.aw-day::before, .aw-day::after { content: ""; width: 44px; height: var(--hairline-width); background: var(--color-border); }
.aw-dialog .sup-msg--agent.sup-msg--out .sup-msg__bubble { border-bottom-left-radius: var(--radius-xl); border-bottom-right-radius: var(--radius-xs); }
.aw-action-line { align-self: center; display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px;
  color: var(--color-fg-muted); background: var(--color-bg-muted); border: var(--hairline-width) solid var(--color-border);
  border-radius: var(--radius-full); padding: 3px 12px; }
.aw-action-line .icon { width: 12px; height: 12px; color: var(--color-accent-strong); }
.aw-action-line time { font-family: var(--font-mono); font-feature-settings: var(--num-tabular); color: var(--color-fg-subtle); }

/* голосовое сообщение + честная автотранскрипция (whisper уже на платформе) */
.aw-voice { display: flex; align-items: center; gap: 10px; min-width: 218px; }
.aw-voice__play { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; flex: none;
  background: var(--color-accent); color: var(--color-accent-on); transition: transform var(--motion-duration-fast) var(--ease-pop); }
.aw-voice__play:hover { transform: scale(1.06); }
.aw-voice__play .icon { width: 14px; height: 14px; }
.aw-voice__bars { display: flex; align-items: center; gap: 2px; height: 26px; flex: 1; }
.aw-voice__bar { width: 3px; border-radius: var(--radius-full); background: color-mix(in oklch, var(--color-accent) 55%, var(--color-border-strong)); }
.aw-voice.is-playing .aw-voice__bar { animation: aw-eq .9s var(--motion-ease) infinite alternate; }
.aw-voice.is-playing .aw-voice__bar:nth-child(2n) { animation-delay: .18s; }
.aw-voice.is-playing .aw-voice__bar:nth-child(3n) { animation-delay: .33s; }
@keyframes aw-eq { from { transform: scaleY(1); } to { transform: scaleY(.45); } }
.aw-voice__dur { font-family: var(--font-mono); font-feature-settings: var(--num-tabular); font-size: 11px; color: var(--color-fg-muted); }
.aw-voice-trans { margin-top: 8px; padding-top: 8px; border-top: var(--hairline-width) dashed var(--color-border); }
.aw-voice-trans__tag { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-display);
  font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-fg-subtle); margin-bottom: 3px; }
.aw-voice-trans__tag .icon { width: 10px; height: 10px; }
.aw-voice-trans__text { font-family: var(--font-italic); font-style: italic; font-size: 13px; color: var(--color-fg-muted); }

/* скриншот-вложение с подписью */
.aw-shot-cap { display: flex; align-items: center; gap: 5px; margin-top: 5px; font-size: 10.5px; color: var(--color-fg-subtle); }
.aw-shot-cap .icon { width: 11px; height: 11px; }

/* ---- COMPOSER --------------------------------------------------------------- */
.aw-composer { flex: none; border-top: var(--hairline-width) solid var(--color-border); background: var(--color-bg-elevated); }
.aw-composer__inner { padding: 10px 16px 12px; display: flex; flex-direction: column; gap: 8px; }
.aw-composer .sup-ai-suggest { margin-top: 2px; }

/* коллизия: «Марк уже отвечает…» + блокировка отправки (Help Scout-паттерн) */
.aw-collision { display: flex; align-items: center; gap: 9px; padding: 7px 16px;
  background: var(--color-warning-soft); border-bottom: var(--hairline-width) solid color-mix(in oklch, var(--color-warning) 30%, transparent);
  font-size: 12px; color: var(--color-warning-text); }
.aw-collision .avatar { width: 20px; height: 20px; font-size: 8px; }
.aw-collision .sup-typing__dot { background: var(--color-warning-text); }
.aw-collision__hint { margin-left: auto; font-size: 11px; color: var(--color-fg-subtle); white-space: nowrap; }

.aw-composer__tabs { display: flex; align-items: center; gap: 2px; }
.aw-ctab { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 600; color: var(--color-fg-subtle); }
.aw-ctab:hover { color: var(--color-fg); background: var(--color-bg-muted); }
.aw-ctab.is-active { color: var(--color-accent-strong); background: var(--color-accent-soft); }
.aw-ctab .icon { width: 13px; height: 13px; }
.aw-composer__hint { margin-left: auto; font-size: 11px; color: var(--color-fg-subtle); display: inline-flex; align-items: center; gap: 5px; }
.aw-composer__hint .icon { width: 12px; height: 12px; }
.aw-composer__field { position: relative; }
.aw-composer__ta { width: 100%; min-height: 66px; max-height: 180px; resize: vertical; padding: 10px 12px;
  font-size: 13.5px; line-height: 1.55; color: var(--color-fg);
  background: var(--color-bg); border: var(--hairline-width) solid var(--color-border-strong); border-radius: var(--radius-md);
  transition: border-color var(--motion-duration-fast) var(--motion-ease), box-shadow var(--motion-duration-fast) var(--motion-ease),
              background var(--motion-duration-fast) var(--motion-ease); }
.aw-composer__ta:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-accent) 16%, transparent); }
.aw-composer.is-note .aw-composer__ta { background: var(--color-warning-soft);
  border-color: color-mix(in oklch, var(--color-warning) 45%, transparent); }
.aw-composer__ta::placeholder { color: var(--color-fg-subtle); }
.aw-composer__bar { display: flex; align-items: center; gap: 2px; }
.aw-tool { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 9px; border-radius: var(--radius-sm);
  font-size: 12px; color: var(--color-fg-muted); white-space: nowrap;
  transition: background var(--motion-duration-fast) var(--motion-ease), color var(--motion-duration-fast) var(--motion-ease); }
.aw-tool:hover { background: var(--color-bg-muted); color: var(--color-fg); }
.aw-tool .icon { width: 14px; height: 14px; }
.aw-tool--ai { color: var(--sup-ai-text); }
.aw-tool--ai:hover { background: var(--sup-ai-soft); color: var(--sup-ai-text); }
.aw-composer__send { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.aw-send-split { display: inline-flex; }
.aw-send-split .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.aw-send-split .btn:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; width: 30px; padding: 0;
  border-left: var(--hairline-width) solid color-mix(in oklch, var(--color-accent-on) 25%, transparent); }

/* ---- POPOVERS страницы (шаблоны · KB-саджест · snooze · назначение) --------- */
.aw-pop { position: fixed; z-index: var(--z-popover); min-width: 250px; max-width: 348px; padding: 6px;
  background: var(--color-bg-elevated); border: var(--hairline-width) solid var(--color-border-strong);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-pop);
  animation: modal-in var(--motion-duration-fast) var(--motion-ease); }
.aw-pop__label { padding: 7px 10px 4px; font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--color-fg-subtle); }
.aw-pop__item { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 8px 10px;
  border-radius: var(--radius-sm); font-size: 13px; color: var(--color-fg); text-align: left; cursor: pointer; }
.aw-pop__item:hover, .aw-pop__item.is-active { background: var(--color-bg-muted); }
.aw-pop__item .icon { width: 15px; height: 15px; color: var(--color-fg-subtle); flex: none; margin-top: 1px; }
.aw-pop__main { flex: 1; min-width: 0; }
.aw-pop__title { font-weight: 500; }
.aw-pop__sub { font-size: 11.5px; color: var(--color-fg-subtle); margin-top: 1px;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.aw-pop__kbd { margin-left: auto; align-self: center; }
.aw-pop__sep { height: var(--hairline-width); background: var(--color-border); margin: 5px 4px; }
.aw-pop__search { margin: 4px 4px 6px; }
.aw-pop__search .input { height: 32px; font-size: 13px; }
.aw-pop .sup-article-card { border: none; padding: 8px 10px; background: transparent; }
.aw-pop .sup-article-card:hover { background: var(--color-bg-muted); transform: none; box-shadow: none; }

/* ---- META RAIL 332px (PM slide-over spec) ----------------------------------- */
.aw-rail { width: var(--sup-meta-w); flex: none; overflow-y: auto; min-height: 0;
  border-left: var(--hairline-width) solid var(--color-border);
  background: color-mix(in oklch, var(--color-bg-muted) 38%, var(--color-bg-elevated)); }
.aw-rail__sec { padding: 14px 16px; border-bottom: var(--hairline-width) solid var(--color-border); }
.aw-rail__sec > .eyebrow { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.aw-rail__sec > .eyebrow .icon { width: 12px; height: 12px; }
.aw-kv { display: grid; grid-template-columns: 92px 1fr; gap: 6px 10px; align-items: center; padding: 4px 0; font-size: 12.5px; }
.aw-kv__k { color: var(--color-fg-subtle); font-size: 11.5px; }
.aw-kv__v { min-width: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--color-fg); }
.aw-chipbtn { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; cursor: pointer;
  border-radius: var(--radius-full); transition: box-shadow var(--motion-duration-fast) var(--motion-ease); }
.aw-chipbtn:hover { box-shadow: 0 0 0 2px color-mix(in oklch, var(--color-accent) 22%, transparent); }
.aw-chipbtn .icon { width: 11px; height: 11px; color: var(--color-fg-subtle); }
.aw-prio { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; }
.aw-prio__bar { width: 4px; height: 15px; border-radius: 2px; background: var(--color-fg-subtle); }
.aw-prio--p1 .aw-prio__bar { background: var(--color-warning); }
.aw-prio--p1 { color: var(--color-warning-text); }
.aw-prio--p0 .aw-prio__bar { background: var(--color-danger); }
.aw-prio--p0 { color: var(--color-danger-text); }
.aw-prio--p2 .aw-prio__bar { background: var(--color-accent); }
.aw-prio--p2 { color: var(--color-accent-strong); }

/* большой SLA-блок */
.aw-slabig { margin-top: 4px; }
.aw-slabig .sup-sla { width: 100%; }
.aw-slabig .sup-sla__track { flex: 1; width: auto; height: 5px; }
.aw-slabig__cap { display: flex; justify-content: space-between; gap: 8px; margin-top: 5px;
  font-size: 11px; color: var(--color-fg-subtle); }
.aw-slabig__cap b { color: var(--color-fg-muted); font-weight: 600; }

/* назначение + тэги */
.aw-assign { display: flex; align-items: center; gap: 9px; }
.aw-assign__who { flex: 1; min-width: 0; }
.aw-assign__name { font-size: 13px; font-weight: 600; }
.aw-assign__role { font-size: 11px; color: var(--color-fg-subtle); }
.aw-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.aw-tag-add { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; font-size: 11.5px;
  color: var(--color-fg-subtle); border: var(--hairline-width) dashed var(--color-border-strong);
  border-radius: var(--radius-full); }
.aw-tag-add:hover { color: var(--color-accent-strong); border-color: var(--color-accent); }
.aw-tag-add .icon { width: 11px; height: 11px; }

/* эскалация: обязательная «Суть для коллеги» (Sprinthost-протокол) */
.aw-esc { margin-top: 10px; padding: 12px; border-radius: var(--radius-md);
  background: var(--color-bg-elevated); border: var(--hairline-width) solid var(--color-border-strong);
  display: flex; flex-direction: column; gap: 9px; animation: modal-in var(--motion-duration-fast) var(--motion-ease); }
.aw-esc__who { display: flex; gap: 6px; }
.aw-esc__whobtn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px;
  border-radius: var(--radius-md); border: var(--hairline-width) solid var(--color-border); font-size: 11.5px;
  color: var(--color-fg-muted); }
.aw-esc__whobtn.is-active { border-color: var(--color-accent); background: var(--color-accent-soft); color: var(--color-accent-strong); }
.aw-esc__req { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--color-fg-subtle); }
.aw-esc__req .icon { width: 11px; height: 11px; color: var(--color-warning); }
.aw-esc .textarea { min-height: 64px; font-size: 12.5px; }
.aw-esc__foot { display: flex; gap: 8px; justify-content: flex-end; }

/* связка с PM-задачей + обратная петля */
.aw-pmlink { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 8px 10px;
  border-radius: var(--radius-md); background: var(--color-bg-elevated);
  border: var(--hairline-width) solid var(--color-border); font-size: 12px; }
.aw-pmlink .icon { width: 14px; height: 14px; color: var(--color-accent-strong); flex: none; }
.aw-pmlink__id { font-family: var(--font-mono); font-feature-settings: var(--num-tabular); font-weight: 600; color: var(--color-accent-strong); }
.aw-pmlink__t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--color-fg-muted); }
.aw-loop-hint { margin-top: 7px; font-size: 11px; line-height: 1.45; color: var(--color-fg-subtle);
  display: flex; gap: 6px; }
.aw-loop-hint .icon { width: 12px; height: 12px; flex: none; margin-top: 1px; color: var(--sup-thread); }

/* ---- КЛИЕНТ 360° ------------------------------------------------------------ */
.aw-client__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.aw-client__name { font-size: 13.5px; font-weight: 600; }
.aw-client__since { font-size: 11px; color: var(--color-fg-subtle); }
.aw-msgrs { display: flex; gap: 5px; margin-left: auto; }
.aw-msgr { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 6px; border-radius: 7px;
  font-size: 10px; font-weight: 700; }
.aw-msgr .icon { width: 11px; height: 11px; }
.aw-msgr--ok { background: var(--color-success-soft); color: var(--color-success-text); }
.aw-msgr--no { background: var(--color-bg-muted); color: var(--color-fg-subtle);
  border: var(--hairline-width) solid var(--color-border); }
.aw-360 { display: flex; flex-direction: column; }
.aw-360__row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0;
  border-top: var(--hairline-width) solid var(--color-border); font-size: 12.5px; }
.aw-360__row > .icon { width: 15px; height: 15px; color: var(--color-fg-subtle); flex: none; margin-top: 2px; }
.aw-360__main { flex: 1; min-width: 0; }
.aw-360__t { display: flex; align-items: center; gap: 6px; font-weight: 500; color: var(--color-fg); }
.aw-360__t .aw-ext { margin-left: auto; }
.aw-360__sub { font-size: 11.5px; color: var(--color-fg-subtle); margin-top: 1px; }
.aw-360__sub b { color: var(--color-fg-muted); font-weight: 600; }
.aw-360__sub.is-danger { color: var(--color-danger-text); }
.aw-ext { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: var(--radius-xs);
  color: var(--color-fg-subtle); }
.aw-ext:hover { background: var(--color-bg-muted); color: var(--color-accent-strong); }
.aw-ext .icon { width: 12px; height: 12px; }
.aw-mini-thread { display: flex; align-items: center; gap: 0; margin-top: 7px; }
.aw-mini-thread .sup-thread { flex: 1; }
.aw-mini-thread .sup-thread__label { font-size: 9.5px; }
.aw-mini-thread .sup-thread__knot { width: 8px; height: 8px; }
.aw-mini-thread .sup-thread__stage::before { top: 4px; left: calc(-50% + 8px); right: calc(50% + 8px); }
.aw-flag { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: var(--radius-sm);
  background: var(--color-danger-soft); color: var(--color-danger-text); font-size: 11px; font-weight: 600; }
.aw-flag .icon { width: 11px; height: 11px; }
.aw-flag--warn { background: var(--color-warning-soft); color: var(--color-warning-text); }

/* ---- «ДЕЙСТВИЯ» — консьерж-суперсила (не «сходи в админку») ------------------ */
.aw-actions { display: flex; flex-direction: column; gap: 5px; }
.aw-action { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; text-align: left;
  border-radius: var(--radius-md); background: var(--color-bg-elevated);
  border: var(--hairline-width) solid var(--color-border); cursor: pointer;
  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); }
.aw-action:hover { border-color: color-mix(in oklch, var(--color-accent) 45%, var(--color-border));
  transform: translateY(-1px); box-shadow: var(--shadow-soft); }
.aw-action__ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-sm);
  background: var(--color-accent-soft); color: var(--color-accent-strong); flex: none; }
.aw-action__ic .icon { width: 14px; height: 14px; }
.aw-action__main { flex: 1; min-width: 0; }
.aw-action__t { font-size: 12.5px; font-weight: 600; color: var(--color-fg); }
.aw-action__sub { font-size: 11px; color: var(--color-fg-subtle); margin-top: 1px; }
.aw-action > .icon:last-child { width: 13px; height: 13px; color: var(--color-fg-subtle); }
.aw-action.is-off { opacity: .55; cursor: default; }
.aw-action.is-off:hover { border-color: var(--color-border); transform: none; box-shadow: none; }
/* «Действия» пока в разработке (§3): текстовая пометка, не кнопки-заглушки. */
.aw-360__soon { margin: 10px 0 0; padding-top: 10px; border-top: var(--hairline-width) solid var(--color-border);
  font-size: 11.5px; color: var(--color-fg-subtle); }
.aw-360__soon b { color: var(--color-fg-muted); font-weight: 600; }

/* ---- МИНИ-ДИАЛОГИ (возврат · дата рождения · передача смены · новое обращение) */
.aw-mini-overlay { position: fixed; inset: 0; z-index: var(--z-popover); display: grid; place-items: center;
  padding: 20px; background: rgba(20,15,10,.4); backdrop-filter: blur(2px); }
.aw-mini { width: 440px; max-width: 96vw; max-height: 88vh; overflow: auto; display: flex; flex-direction: column;
  background: var(--color-bg-elevated); border: var(--hairline-width) solid var(--color-border);
  border-radius: var(--radius-2xl); box-shadow: var(--shadow-pop);
  animation: modal-in var(--motion-duration-base) var(--ease-spring); }
.aw-mini--md { width: 560px; }
.aw-mini__body { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.aw-mini__note { display: flex; gap: 8px; padding: 9px 11px; border-radius: var(--radius-md);
  background: var(--color-warning-soft); color: var(--color-warning-text); font-size: 12px; line-height: 1.45; }
.aw-mini__note .icon { width: 14px; height: 14px; flex: none; margin-top: 1px; }
.aw-mini__note--ok { background: var(--color-success-soft); color: var(--color-success-text); }
.aw-shift-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.aw-shift-stat { padding: 10px; border-radius: var(--radius-md); background: var(--color-bg-muted); text-align: center; }
.aw-shift-stat__v { font-family: var(--font-mono); font-feature-settings: var(--num-tabular); font-size: 20px; font-weight: 500; }
.aw-shift-stat__k { font-size: 10.5px; color: var(--color-fg-subtle); margin-top: 2px; }
.aw-shift-stat.is-breach .aw-shift-stat__v { color: var(--sup-sla-breach-text); }

/* ---- SIDEBAR ДОБАВКИ: бакеты + смена ----------------------------------------- */
.aw-buckets { margin: 0 0 4px; padding-left: 14px; display: flex; flex-direction: column; gap: 1px;
  border-left: var(--hairline-width) solid var(--color-border); margin-left: 19px; }
.aw-bucket { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 8px; border-radius: var(--radius-sm);
  font-size: 12.5px; color: var(--color-fg-muted); width: 100%; text-align: left; }
.aw-bucket:hover { background: var(--color-bg-muted); color: var(--color-fg); }
.aw-bucket.is-active { background: var(--color-accent-soft); color: var(--color-accent-strong); font-weight: 600; }
.aw-bucket__n { margin-left: auto; font-family: var(--font-mono); font-feature-settings: var(--num-tabular);
  font-size: 10.5px; color: var(--color-fg-subtle); }
.aw-bucket .icon { width: 13px; height: 13px; opacity: .8; }
.aw-shiftbox { display: flex; flex-direction: column; gap: 2px; padding: 2px 0 8px; }
.aw-agent { display: flex; align-items: center; gap: 9px; padding: 5px 10px; border-radius: var(--radius-sm);
  font-size: 12.5px; width: 100%; text-align: left; color: var(--color-fg); }
.aw-agent:hover { background: var(--color-bg-muted); }
.aw-agent .avatar { width: 24px; height: 24px; font-size: 9px; }
.aw-agent__name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aw-agent__name small { display: block; font-size: 10px; color: var(--color-fg-subtle); }
.aw-agent__load { font-family: var(--font-mono); font-feature-settings: var(--num-tabular); font-size: 10.5px; color: var(--color-fg-subtle); }
.aw-nav-danger { color: var(--sup-sla-breach-text); font-weight: 700; }

/* ---- SKELETON / EMPTY / NO-DEBT ---------------------------------------------- */
.aw-skel-toolbar { height: 52px; display: flex; align-items: center; gap: 12px; padding: 0 16px;
  border-bottom: var(--hairline-width) solid var(--color-border); background: var(--color-bg-elevated); }
.aw-skel-row { display: grid; grid-template-columns: 34px 34px 176px 1fr 116px; gap: 10px; align-items: center;
  height: 48px; padding: 0 16px; border-bottom: var(--hairline-width) solid var(--color-border); }
.aw-skel-row .sup-skel--round { border-radius: 50%; }
.aw-empty-wrap { flex: 1; display: grid; place-items: center; }
.aw-empty-sub { font-size: 12.5px; color: var(--color-fg-subtle); max-width: 300px; }

/* read-only (наблюдатель support_viewer) — концепт-хук */
.aw-ro .aw-composer, .aw-ro .aw-actions, .aw-ro .aw-row__actions, .aw-ro .aw-bulkbar { display: none !important; }

/* ---- MOBILE ------------------------------------------------------------------- */
@media (max-width: 900px) {
  .aw-toolbar { height: 48px; padding: 0 10px; gap: 8px; }
  .aw-toolbar__shift { display: none; }
  .aw-row { grid-template-columns: 12px 34px minmax(0,1fr) auto; grid-template-rows: auto auto;
    height: auto; row-gap: 1px; padding: 9px 12px 9px 2px; }
  .aw-row__check, .aw-row__status, .aw-row__chan-cell { display: none; }
  .aw-row__unread { grid-row: 1 / 3; }
  .aw-row > .avatar { grid-row: 1 / 3; align-self: center; }
  .aw-row__who { grid-column: 3; grid-row: 1; padding-left: 10px;
    flex-direction: row; align-items: baseline; gap: 7px; }
  .aw-row__text { grid-column: 3; grid-row: 2; padding-left: 10px; padding-right: 6px; }
  .aw-row__sla { grid-column: 4; grid-row: 1 / 3; align-self: center; }
  .aw-row__actions { display: none !important; }
  .aw-row:hover .aw-row__sla, .aw-row.is-cursor .aw-row__sla { visibility: visible; }
  .aw-card-overlay { padding: 0; }
  .aw-card { width: 100vw; height: 100dvh; border-radius: 0; border: none; }
  .aw-card__thread { display: none; }
  .aw-railtoggle { display: inline-flex; }
  .aw-rail { display: none; }
  .aw-card.is-rail .aw-rail { display: block; width: 100%; border-left: none; }
  .aw-card.is-rail .aw-card__main { display: none; }
  .aw-dialog { padding: 14px 14px 10px; }
  .aw-composer__hint { display: none; }
  .aw-composer__bar { flex-wrap: wrap; row-gap: 6px; }
  /* тач-цели ≥48px в нижней зоне */
  .aw-tool { height: 44px; min-width: 44px; justify-content: center; }
  .aw-tool span { display: none; }
  .aw-composer__send .btn.btn--sm { height: 44px; }
  .aw-ctab { height: 36px; }
  .aw-mini { width: 100%; }
  .aw-bulkbar { bottom: 74px; }
}
@media (max-width: 620px) {
  /* компактный бренд: топбар обязан уместиться в 390 без h-скролла
     (скоуп .aw-body — правило живёт только на этой странице) */
  .aw-body .shell-topbar { padding: 0 10px; }
  .aw-body .shell-topbar__x, .aw-body .shell-topbar__module { display: none; }
  .aw-row { grid-template-columns: 10px 30px minmax(0,1fr) auto; }
  .aw-row__sla .sup-sla__track { display: none; }
  .aw-toolbar__pills .aw-pill { padding: 0 9px; }
  .aw-card__head { gap: 8px; padding: 10px 10px; }
  .aw-card__idbox { flex: 1; min-width: 0; }
  .aw-card__sub .aw-hide-xs { display: none; }
  .aw-card__btns { gap: 2px; }
  .aw-card__btns .btn .btn__label { display: none; }
  .aw-card__btns .btn.btn--sm { width: 32px; padding: 0; }
}

/* ---- PRINT — карточка обращения печатается как переписка ----------------------- */
@media print {
  .shell-topbar, .shell-sidebar, .shell-apprail, .sup-bottomnav, .sup-fab,
  .aw-toolbar, .aw-composer, .aw-row__actions, .aw-bulkbar { display: none !important; }
  .aw-card-overlay { position: static; padding: 0; background: none; }
  .aw-card { width: 100%; height: auto; box-shadow: none; border: none; }
  .aw-rail { display: none; }
  .aw-dialog { overflow: visible; }
}

/* reduced-motion добивка для страницы */
@media (prefers-reduced-motion: reduce) {
  .aw-voice.is-playing .aw-voice__bar { animation: none; }
  .aw-action:hover { transform: none; }
}

/* ============================================================================
   ═══ PAGE: client.html — клиентская «Помощь» в кабинете (.cx-) ═══
   Merged from assets/pages/cx.css by the assembler.
   ========================================================================= */

/* ============================================================================
   ═══ CLIENT.HTML (.cx-*) — клиентская «Помощь» в кабинете ═══
   Тёплый лёгкий шелл (topbar «Суть ✕ Помощь», БЕЗ стаффового sidebar/apprail),
   контент-колонка ~880px. Четыре вида: hub · new · thread · list.
   Клиент видит ДИАЛОГ и слова-обещания — никакой машинерии (SLA, очередей,
   бакетов, «тикетов»). Опирается на .sup-* ядро (support.css) + essence/shell.
   Zero raw hex — только токены и color-mix (тёмная тема и персоны бесплатно).
   Lift target: app/assets/stylesheets/support/_client.css
   ========================================================================= */

/* ---- FRAME — лёгкий клиентский шелл (только topbar) ----------------------- */
.cx-main { flex: 1; min-height: 0; display: flex; flex-direction: column;
           background: var(--color-bg); color: var(--color-fg); }
.cx-view { flex: 1; min-height: 0; }
.cx-view.is-entering { animation: cx-view-in var(--motion-duration-base) var(--motion-ease); }
@keyframes cx-view-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.cx-view--scroll { overflow-y: auto; }
.cx-view--thread { display: flex; flex-direction: column; }
.cx-wrap { width: 100%; max-width: 880px; margin: 0 auto; padding: 30px 24px 88px; }
.cx-wrap--tight { max-width: 720px; }

/* client topbar echoes the real shell brand but reads «Суть ✕ Помощь» */
.cx-topbar__back { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 8px;
  border-radius: var(--radius-full); font-size: 12.5px; color: var(--color-fg-muted); white-space: nowrap; }
.cx-topbar__back:hover { background: var(--color-bg-muted); color: var(--color-fg); }
.cx-topbar__back .icon { width: 16px; height: 16px; }
@media (max-width: 560px) { .cx-topbar__back .cx-topbar__back-label { display: none; } }

/* ---- OFFLINE BANNER (?offline=1) — переподключение (research/04 З-32) ------ */
.cx-offline { display: flex; align-items: center; justify-content: center; gap: 10px; flex: none;
  padding: 9px 16px; font-size: 12.5px; color: var(--color-warning-text);
  background: var(--color-warning-soft);
  border-bottom: var(--hairline-width) solid color-mix(in oklch, var(--color-warning) 32%, transparent); }
.cx-offline__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-warning); flex: none;
  animation: cx-offline-pulse 1.4s var(--motion-ease) infinite; }
@keyframes cx-offline-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
.cx-offline b { font-weight: 700; }
.cx-offline__note { color: color-mix(in oklch, var(--color-warning-text) 74%, transparent); }
@media (max-width: 560px) { .cx-offline__note { display: none; } }

/* ============================================================================
   ═══ HUB (?view=hub) — тёплый вход в помощь ═══
   ========================================================================= */
.cx-hero { position: relative; text-align: center; padding: 34px 0 4px; }
.cx-hero::before { /* soft warm breath behind the hero — decor only */
  content: ""; position: absolute; left: 50%; top: 8px; width: 460px; height: 200px; transform: translateX(-50%);
  background: radial-gradient(ellipse 60% 70% at 50% 40%, color-mix(in oklch, var(--color-accent) 12%, transparent), transparent 72%);
  pointer-events: none; z-index: 0; }
.cx-hero > * { position: relative; z-index: 1; }
.cx-hero__eyebrow { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono);
  font-size: 9.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--color-fg-subtle); }
.cx-hero__eyebrow .icon { width: 13px; height: 13px; color: var(--color-accent); }
.cx-hero__title { margin-top: 12px; font-size: 40px; font-weight: 600; letter-spacing: -.018em; line-height: 1.08; color: var(--color-fg); }
.cx-hero__title em { font-family: var(--font-italic); font-style: italic; font-weight: 500; color: var(--color-accent-strong); }
.cx-hero__sub { margin: 12px auto 0; max-width: 540px; font-size: 14.5px; line-height: 1.6; color: var(--color-fg-muted); }
.cx-hero__presence { margin-top: 15px; display: inline-flex; }

/* ---- big search «Что случилось?» + live KB suggest (закон §1.5 мягкий) ---- */
.cx-search { position: relative; max-width: 640px; margin: 24px auto 0; }
.cx-search__box { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 10px 0 18px;
  background: var(--color-bg-elevated); border: var(--hairline-width) solid var(--color-border-strong);
  border-radius: var(--radius-full); box-shadow: var(--shadow-card);
  transition: border-color var(--motion-duration-fast) var(--motion-ease), box-shadow var(--motion-duration-fast) var(--motion-ease); }
.cx-search__box:focus-within { border-color: var(--color-accent); box-shadow: 0 0 0 4px color-mix(in oklch, var(--color-accent) 15%, transparent), var(--shadow-card); }
.cx-search__box > .icon { color: var(--color-fg-subtle); flex: none; }
.cx-search__input { flex: 1; min-width: 0; border: none; background: none; font-size: 15px; color: var(--color-fg); }
.cx-search__input::placeholder { color: var(--color-fg-subtle); }
.cx-search__clear { display: none; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-full);
  color: var(--color-fg-subtle); flex: none; }
.cx-search__clear:hover { background: var(--color-bg-muted); color: var(--color-fg); }
.cx-search__clear .icon { width: 16px; height: 16px; }
.cx-search.has-value .cx-search__clear { display: grid; }
.cx-search__kbd { font-family: var(--font-mono); font-size: 11px; color: var(--color-fg-subtle);
  border: var(--hairline-width) solid var(--color-border-strong); border-radius: 6px; padding: 2px 7px; flex: none; }
.cx-search.has-value .cx-search__kbd { display: none; }
.cx-search__pop { position: absolute; top: calc(100% + 10px); left: 0; right: 0; z-index: var(--z-popover);
  padding: 8px; background: var(--color-bg-elevated); border: var(--hairline-width) solid var(--color-border-strong);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-pop); animation: modal-in var(--motion-duration-fast) var(--motion-ease); }
.cx-search__pop .sup-article-card { border: none; box-shadow: none; }
.cx-search__pop .sup-article-card:hover { background: var(--color-bg-muted); transform: none; box-shadow: none; }
.cx-search__cap { padding: 7px 10px 3px; font-family: var(--font-mono); font-size: 9.5px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--color-fg-subtle); }
/* «Всё равно написать людям» — всегда виден (закон §1.5) */
.cx-search__human { display: flex; align-items: center; gap: 11px; padding: 12px; width: 100%; text-align: left;
  margin-top: 4px; border-radius: var(--radius-lg); background: var(--color-accent-soft); color: var(--color-accent-strong); }
.cx-search__human:hover { background: color-mix(in oklch, var(--color-accent) 30%, var(--color-bg-elevated)); }
.cx-search__human .cx-search__human-ic { display: grid; place-items: center; width: 30px; height: 30px; flex: none;
  border-radius: var(--radius-md); background: color-mix(in oklch, var(--color-accent) 22%, var(--color-bg-elevated)); }
.cx-search__human .cx-search__human-ic .icon { width: 15px; height: 15px; }
.cx-search__human-main { flex: 1; min-width: 0; }
.cx-search__human-t { font-size: 13.5px; font-weight: 600; }
.cx-search__human-s { font-size: 11.5px; font-weight: 400; color: color-mix(in oklch, var(--color-accent-strong) 78%, transparent); }
.cx-search__human > .icon { flex: none; }
.cx-search__empty { padding: 14px 12px 4px; text-align: center; }
.cx-search__empty-quote { font-family: var(--font-italic); font-style: italic; font-size: 14.5px; color: var(--color-accent-strong); }
.cx-search__empty-sub { margin-top: 4px; font-size: 12.5px; color: var(--color-fg-muted); }

/* ---- TOPIC CARDS — живой контекст (нить-мини на «Мой разбор») -------------- */
.cx-topics { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 40px; }
.cx-topic { display: flex; align-items: flex-start; gap: 14px; padding: 17px; text-align: left; width: 100%;
  background: var(--color-bg-elevated); border: var(--hairline-width) solid var(--color-border);
  border-radius: var(--radius-xl); cursor: pointer;
  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); }
.cx-topic:hover { border-color: color-mix(in oklch, var(--color-accent) 42%, var(--color-border));
  transform: translateY(-2px); box-shadow: var(--shadow-card); }
.cx-topic:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.cx-topic--wide { grid-column: 1 / -1; }
.cx-topic__icon { display: grid; place-items: center; width: 40px; height: 40px; flex: none;
  border-radius: var(--radius-lg); background: var(--color-accent-soft); color: var(--color-accent-strong); }
.cx-topic__icon .icon { width: 19px; height: 19px; }
.cx-topic__body { flex: 1; min-width: 0; }
.cx-topic__title { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; color: var(--color-fg); }
.cx-topic__ctx { margin-top: 4px; font-size: 12.5px; line-height: 1.5; color: var(--color-fg-muted); }
.cx-topic__ctx b { font-weight: 600; color: var(--color-fg); }
.cx-topic > .cx-topic__chev { color: var(--color-fg-subtle); margin-top: 3px; flex: none; align-self: center; }
/* pipeline mini-нить прямо на карточке «Мой разбор» (бриф §7.2) */
.cx-topic__pipe { margin-top: 13px; padding: 12px 6px 3px; border-top: var(--hairline-width) solid var(--color-border); }
.cx-topic__pipe .sup-thread__label { font-size: 10.5px; }
.cx-topic__pipe-cap { display: flex; align-items: center; gap: 6px; margin-bottom: 9px; font-size: 11px; color: var(--color-fg-subtle); }
.cx-topic__pipe-cap .icon { width: 12px; height: 12px; color: var(--sup-thread); }
.cx-topic__pipe-cap b { color: var(--color-fg-muted); font-weight: 600; }

/* ---- SECTION scaffold (Сделаем за тебя · Мои обращения) -------------------- */
.cx-sect { margin-top: 44px; }
.cx-sect__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.cx-sect__titlebox { min-width: 0; }
.cx-sect__title { font-size: 16.5px; font-weight: 600; color: var(--color-fg); }
.cx-sect__title em { font-family: var(--font-italic); font-style: italic; color: var(--color-accent-strong); }
.cx-sect__sub { font-size: 12.5px; color: var(--color-fg-subtle); margin-top: 3px; }
.cx-sect__link { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600;
  color: var(--color-accent-strong); white-space: nowrap; padding: 4px 8px; border-radius: var(--radius-full); }
.cx-sect__link:hover { background: var(--color-bg-muted); }
.cx-sect__link .icon { width: 13px; height: 13px; }

/* ---- CONCIERGE «Сделаем за тебя» — суперсила, не форма (Sprinthost ДНК) ---- */
.cx-concierge { padding: 18px; border-radius: var(--radius-xl);
  background: color-mix(in oklch, var(--color-accent) 7%, var(--color-bg-elevated));
  border: var(--hairline-width) solid color-mix(in oklch, var(--color-accent) 22%, var(--color-border)); }
.cx-concierge__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 2px; }
.cx-do { display: flex; flex-direction: column; gap: 8px; padding: 13px; text-align: left; height: 100%;
  background: var(--color-bg-elevated); border: var(--hairline-width) solid var(--color-border); border-radius: var(--radius-lg);
  transition: border-color var(--motion-duration-fast) var(--motion-ease), transform var(--motion-duration-fast) var(--motion-ease); }
.cx-do:hover { border-color: color-mix(in oklch, var(--color-accent) 45%, var(--color-border)); transform: translateY(-1px); }
.cx-do:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.cx-do__icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-md);
  background: var(--color-accent-soft); color: var(--color-accent-strong); }
.cx-do__icon .icon { width: 17px; height: 17px; }
.cx-do__label { font-size: 13px; font-weight: 600; color: var(--color-fg); }
.cx-do__sub { font-size: 11.5px; line-height: 1.45; color: var(--color-fg-subtle); }

/* ---- MY CONVERSATIONS «Мои обращения» — статусы-обещания + грейс ----------- */
.cx-cases { display: flex; flex-direction: column; gap: 10px; }
.cx-case { display: flex; align-items: center; gap: 14px; padding: 14px 16px; text-align: left; width: 100%;
  background: var(--color-bg-elevated); border: var(--hairline-width) solid var(--color-border); border-radius: var(--radius-lg);
  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); }
.cx-case:hover { border-color: color-mix(in oklch, var(--color-accent) 38%, var(--color-border)); transform: translateY(-1px); box-shadow: var(--shadow-soft); }
.cx-case:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.cx-case__knot { position: relative; width: 26px; flex: none; align-self: stretch; display: grid; place-items: center; }
.cx-case__knot::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: var(--hairline-width);
  background: color-mix(in oklch, var(--sup-thread) 40%, var(--color-border)); transform: translateX(-50%); }
.cx-case:first-child .cx-case__knot::before { top: 50%; }
.cx-case:last-child .cx-case__knot::before { bottom: 50%; }
.cx-case__dot { position: relative; z-index: 1; width: 12px; height: 12px; border-radius: 50%;
  background: var(--color-bg-elevated); border: 1.5px solid color-mix(in oklch, var(--sup-thread) 55%, var(--color-border-strong)); }
.cx-case.is-open .cx-case__dot { background: var(--sup-thread); border-color: var(--sup-thread);
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--sup-thread) 20%, transparent); }
.cx-case.is-solved .cx-case__dot { background: color-mix(in oklch, var(--color-success) 60%, var(--color-bg-elevated)); border-color: var(--color-success); }
.cx-case__main { flex: 1; min-width: 0; }
.cx-case__subj { font-size: 13.5px; font-weight: 600; color: var(--color-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-case__meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 11.5px; color: var(--color-fg-subtle); flex-wrap: wrap; }
.cx-case__meta .cx-case__num { font-family: var(--font-mono); font-feature-settings: var(--num-tabular); }
.cx-case__meta .cx-dot-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--color-border-strong); }
.cx-case__grace { color: color-mix(in oklch, var(--color-success-text) 82%, transparent); }
.cx-case__right { display: flex; align-items: center; gap: 12px; flex: none; }
.cx-case__chev { color: var(--color-fg-subtle); flex: none; }
.cx-case__chev .icon { width: 17px; height: 17px; }
@media (max-width: 560px) { .cx-case__right .status-badge { display: none; } }

/* ============================================================================
   ═══ NEW (?view=new) — прогрессивная форма ═══
   Категория/приоритет — система (клиент подтверждает); 3 поля; черновик сам;
   человек читает; подтверждение с ETA + labor-illusion. (research/04 §2, З-6..13)
   ========================================================================= */
.cx-form__head { margin-bottom: 22px; }
.cx-form__title { font-size: 26px; font-weight: 600; letter-spacing: -.01em; color: var(--color-fg); }
.cx-form__title em { font-family: var(--font-italic); font-style: italic; color: var(--color-accent-strong); }
.cx-form__sub { margin-top: 8px; font-size: 13.5px; line-height: 1.55; color: var(--color-fg-muted); }
.cx-form__sub .cx-humanchip { display: inline-flex; align-items: center; gap: 5px; vertical-align: baseline;
  color: var(--color-accent-strong); font-weight: 600; }
.cx-form__sub .cx-humanchip .icon { width: 14px; height: 14px; }

.cx-form__block { margin-bottom: 20px; }
.cx-form__label { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13.5px; font-weight: 600; color: var(--color-fg); }
.cx-form__label .cx-step { display: grid; place-items: center; width: 20px; height: 20px; flex: none;
  border-radius: 50%; background: var(--color-accent-soft); color: var(--color-accent-strong);
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; }
.cx-form__hint { font-size: 12px; color: var(--color-fg-subtle); font-weight: 400; }

/* auto-category chip «Похоже, это про оплату — верно?» (система ставит) */
.cx-autocat { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-lg);
  background: var(--sup-ai-soft); border: var(--hairline-width) solid color-mix(in oklch, var(--sup-ai) 30%, transparent); }
.cx-autocat__icon { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: var(--radius-md);
  background: color-mix(in oklch, var(--sup-ai) 20%, var(--color-bg-elevated)); color: var(--sup-ai-text); }
.cx-autocat__icon .icon { width: 16px; height: 16px; }
.cx-autocat__text { flex: 1; min-width: 0; font-size: 13px; color: var(--color-fg); }
.cx-autocat__text b { font-weight: 700; color: var(--sup-ai-text); }
.cx-autocat__text small { display: block; margin-top: 1px; font-size: 11px; color: var(--color-fg-subtle); }
.cx-autocat__actions { display: flex; align-items: center; gap: 6px; flex: none; }
.cx-autocat.is-confirmed { background: var(--color-success-soft); border-color: color-mix(in oklch, var(--color-success) 32%, transparent); }
.cx-autocat.is-confirmed .cx-autocat__icon { background: color-mix(in oklch, var(--color-success) 20%, var(--color-bg-elevated)); color: var(--color-success-text); }
.cx-autocat.is-confirmed .cx-autocat__text b { color: var(--color-success-text); }
.cx-catpick { display: none; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.cx-autocat.is-picking + .cx-catpick { display: flex; }

/* live-подсказки статей аккордеоном под темой (Coveo: отдельный шаг ×2,5) */
.cx-suggest-acc { margin-top: 10px; border-radius: var(--radius-lg); overflow: hidden;
  border: var(--hairline-width) solid var(--color-border); background: var(--color-bg-muted); }
.cx-suggest-acc__head { display: flex; align-items: center; gap: 8px; padding: 10px 13px; font-size: 12px; color: var(--color-fg-muted); }
.cx-suggest-acc__head .icon { width: 14px; height: 14px; color: var(--color-accent); }
.cx-suggest-acc__head b { color: var(--color-fg); font-weight: 600; }
.cx-suggest-acc__list { display: flex; flex-direction: column; gap: 8px; padding: 0 10px 10px; }
.cx-suggest-acc__list .sup-article-card { background: var(--color-bg-elevated); }
/* «Всё равно написать людям» — на КАЖДОМ шаге (закон §1.5) */
.cx-writepeople { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 10px;
  padding: 9px; width: 100%; font-size: 12.5px; font-weight: 600; color: var(--color-accent-strong);
  border-radius: var(--radius-md); border: var(--hairline-width) dashed color-mix(in oklch, var(--color-accent) 40%, var(--color-border)); }
.cx-writepeople:hover { background: var(--color-accent-soft); }
.cx-writepeople .icon { width: 14px; height: 14px; }

/* description completeness — «сила описания» (Coveo, З-13) */
.cx-strength { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.cx-strength__track { flex: 1; height: 4px; border-radius: var(--radius-full); background: var(--color-bg-muted); overflow: hidden; }
.cx-strength__fill { display: block; height: 100%; width: 20%; border-radius: inherit;
  background: linear-gradient(90deg, var(--sup-thread), var(--color-accent));
  transition: width var(--motion-duration-slow) var(--motion-ease); }
.cx-strength__tip { font-size: 11.5px; color: var(--color-fg-subtle); white-space: nowrap; }
.cx-strength__tip b { color: var(--color-accent-strong); font-weight: 600; }

/* drag&drop вложения — превью + per-file прогресс (NN/g, З-10) */
.cx-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 20px; text-align: center; cursor: pointer;
  border: 1.5px dashed var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-bg-muted);
  transition: border-color var(--motion-duration-fast) var(--motion-ease), background var(--motion-duration-fast) var(--motion-ease); }
.cx-drop:hover { border-color: color-mix(in oklch, var(--color-accent) 50%, var(--color-border-strong)); }
.cx-drop.is-over { border-color: var(--color-accent); background: var(--color-accent-soft); }
.cx-drop__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-full);
  background: var(--color-bg-elevated); color: var(--color-accent-strong); box-shadow: var(--shadow-soft); }
.cx-drop__icon .icon { width: 19px; height: 19px; }
.cx-drop__text { font-size: 13px; color: var(--color-fg-muted); margin-top: 4px; }
.cx-drop__text b { color: var(--color-accent-strong); font-weight: 600; }
.cx-drop__hint { font-size: 11px; color: var(--color-fg-subtle); }
.cx-files { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.cx-file { display: flex; align-items: center; gap: 12px; padding: 9px 11px; border-radius: var(--radius-md);
  background: var(--color-bg-elevated); border: var(--hairline-width) solid var(--color-border); }
.cx-file__thumb { width: 40px; height: 40px; flex: none; border-radius: var(--radius-sm); object-fit: cover;
  border: var(--hairline-width) solid var(--color-border); background: var(--color-bg-muted); }
.cx-file__body { flex: 1; min-width: 0; }
.cx-file__name { font-size: 12.5px; font-weight: 500; color: var(--color-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-file__sub { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 11px; color: var(--color-fg-subtle);
  font-family: var(--font-mono); font-feature-settings: var(--num-tabular); }
.cx-file__bar { height: 4px; border-radius: var(--radius-full); background: var(--color-bg-muted); overflow: hidden; margin-top: 6px; }
.cx-file__bar-fill { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--color-accent);
  transition: width var(--motion-duration-slow) linear; }
.cx-file.is-done .cx-file__bar { display: none; }
.cx-file__done { display: none; align-items: center; gap: 4px; font-size: 11px; color: var(--color-success-text); }
.cx-file__done .icon { width: 13px; height: 13px; }
.cx-file.is-done .cx-file__done { display: inline-flex; }
.cx-file__x { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: var(--radius-sm);
  color: var(--color-fg-subtle); }
.cx-file__x:hover { background: var(--color-bg-muted); color: var(--color-danger-text); }
.cx-file__x .icon { width: 15px; height: 15px; }

/* auto entity chip «Заказ №4812 · Разбор» (авто-привязка сущности) */
.cx-entity { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: var(--radius-lg);
  background: var(--color-bg-elevated); border: var(--hairline-width) solid var(--color-border); }
.cx-entity__icon { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: var(--radius-md);
  background: var(--color-accent-soft); color: var(--color-accent-strong); }
.cx-entity__icon .icon { width: 17px; height: 17px; }
.cx-entity__main { flex: 1; min-width: 0; }
.cx-entity__t { font-size: 13px; font-weight: 600; color: var(--color-fg); }
.cx-entity__t .cx-entity__num { font-family: var(--font-mono); font-feature-settings: var(--num-tabular); }
.cx-entity__s { font-size: 11.5px; color: var(--color-fg-subtle); margin-top: 1px; }
.cx-entity__x { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--color-fg-subtle);
  padding: 5px 8px; border-radius: var(--radius-full); flex: none; }
.cx-entity__x:hover { background: var(--color-bg-muted); color: var(--color-fg-muted); }
.cx-entity__x-ic { display: none; width: 15px; height: 15px; }

/* honest «прочитает живой человек» line (Coveo: снимает страх «пишу в пустоту») */
.cx-human-line { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin: 20px 0 16px;
  border-radius: var(--radius-lg); background: var(--color-bg-muted); }
.cx-human-line__av { flex: none; }
.cx-human-line__t { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.5; color: var(--color-fg-muted); }
.cx-human-line__t b { color: var(--color-fg); font-weight: 600; }

/* submit row + autosave (Сохранён · только что) */
.cx-formbar { display: flex; align-items: center; gap: 14px; }
.cx-formbar .btn { flex: none; }
.cx-autosave { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-fg-subtle); }
.cx-autosave .icon { width: 13px; height: 13px; color: var(--color-success); }
.cx-autosave.is-saving .icon { color: var(--color-fg-subtle); animation: cx-spin 1s linear infinite; }
@keyframes cx-spin { to { transform: rotate(360deg); } }
.cx-formbar__spacer { flex: 1; }

/* submit → подтверждение с ETA + labor-illusion (закон §1.3, §1.4) */
.cx-sent { text-align: center; padding: 12px 0 0; animation: cx-view-in var(--motion-duration-base) var(--ease-spring); }
.cx-sent__badge { display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto 16px; border-radius: 50%;
  background: var(--color-success-soft); color: var(--color-success-text); }
.cx-sent__badge .icon { width: 30px; height: 30px; stroke-width: 2.2; }
.cx-sent__title { font-size: 24px; font-weight: 600; color: var(--color-fg); }
.cx-sent__title em { font-family: var(--font-italic); font-style: italic; color: var(--color-accent-strong); }
.cx-sent__eta { margin: 10px auto 0; max-width: 460px; font-size: 14px; line-height: 1.6; color: var(--color-fg-muted); }
.cx-sent__eta b { color: var(--color-fg); font-weight: 600; }
.cx-sent__num { font-family: var(--font-mono); font-feature-settings: var(--num-tabular); }
.cx-sent .sup-labor { max-width: 460px; margin: 22px auto 0; text-align: left; }
.cx-sent__actions { display: flex; gap: 10px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }
.cx-sent__async { margin-top: 18px; font-size: 12px; color: var(--color-fg-subtle); }

/* ============================================================================
   ═══ THREAD (?view=thread&t=…&state=…) — нить заботы ═══
   Диалог + care-thread шапка; человек виден; «Позвать человека» всегда;
   состояния yuia/human/waiting/solved/rate. (законы §1.2 §1.6, research/04 §3)
   ========================================================================= */
.cx-thread { display: flex; flex-direction: column; height: 100%; min-height: 0; }

/* care-thread header — нить + живой агент + статус + «Позвать человека» */
.cx-thread__head { flex: none; background: var(--color-bg-elevated); border-bottom: var(--hairline-width) solid var(--color-border); }
.cx-thread__headwrap { max-width: 880px; margin: 0 auto; padding: 12px 24px 14px; }
.cx-thread__toprow { display: flex; align-items: center; gap: 12px; }
.cx-thread__back { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: var(--radius-full);
  color: var(--color-fg-muted); }
.cx-thread__back:hover { background: var(--color-bg-muted); color: var(--color-fg); }
.cx-thread__agent { display: flex; align-items: center; gap: 11px; min-width: 0; flex: 1; }
.cx-thread__agent-info { min-width: 0; }
.cx-thread__agent-name { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--color-fg); }
.cx-thread__agent-sub { display: flex; align-items: center; gap: 6px; margin-top: 1px; font-size: 11.5px; color: var(--color-fg-subtle); }
.cx-thread__agent-sub .cx-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-success); flex: none;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-success) 18%, transparent); }
.cx-thread__status { flex: none; }
/* «Позвать человека» — всегда виден, без условий (закон §1.2) */
.cx-callhuman { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; flex: none;
  border-radius: var(--radius-full); font-size: 12.5px; font-weight: 600; color: var(--color-accent-strong);
  background: var(--color-accent-soft); border: var(--hairline-width) solid color-mix(in oklch, var(--color-accent) 30%, transparent);
  transition: background var(--motion-duration-fast) var(--motion-ease); }
.cx-callhuman:hover { background: color-mix(in oklch, var(--color-accent) 28%, var(--color-bg-elevated)); }
.cx-callhuman .icon { width: 15px; height: 15px; }
.cx-thread__nith { margin-top: 14px; }

/* messages scroll region (aria-live) */
.cx-thread__scroll { flex: 1; min-height: 0; overflow-y: auto; }
.cx-thread__msgs { max-width: 820px; margin: 0 auto; padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 13px; }
.cx-day { align-self: center; display: flex; align-items: center; gap: 10px; font-size: 10.5px; letter-spacing: .07em;
  text-transform: uppercase; font-weight: 600; color: var(--color-fg-subtle); padding: 2px 0 6px; }
.cx-day::before, .cx-day::after { content: ""; width: 42px; height: var(--hairline-width); background: var(--color-border); }

/* client voice message (own bubble, honest — no fake transcription to client) */
.cx-voice { display: flex; align-items: center; gap: 10px; min-width: 190px; }
.cx-voice__play { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; flex: none;
  background: color-mix(in oklch, var(--color-accent) 30%, var(--color-bg-elevated)); color: var(--color-accent-strong);
  transition: transform var(--motion-duration-fast) var(--ease-pop); }
.cx-voice__play:hover { transform: scale(1.06); }
.cx-voice__play .icon { width: 14px; height: 14px; }
.cx-voice__wave { display: flex; align-items: center; gap: 2px; height: 24px; flex: 1; }
.cx-voice__bar { width: 3px; border-radius: var(--radius-full); background: color-mix(in oklch, var(--color-accent) 50%, var(--color-border-strong)); }
.cx-voice.is-playing .cx-voice__bar { animation: cx-eq .9s var(--motion-ease) infinite alternate; }
.cx-voice.is-playing .cx-voice__bar:nth-child(2n) { animation-delay: .18s; }
.cx-voice.is-playing .cx-voice__bar:nth-child(3n) { animation-delay: .33s; }
@keyframes cx-eq { from { transform: scaleY(1); } to { transform: scaleY(.4); } }
.cx-voice__dur { font-family: var(--font-mono); font-feature-settings: var(--num-tabular); font-size: 11px; color: var(--color-fg-muted); }
.cx-shot-cap { display: flex; align-items: center; gap: 5px; margin-top: 5px; font-size: 10.5px; color: var(--color-fg-subtle); }
.cx-shot-cap .icon { width: 11px; height: 11px; }

/* «Ждём тебя» callout — что именно нужно (dual-label, З-23) */
.cx-waiting { display: flex; align-items: flex-start; gap: 12px; align-self: stretch; max-width: 100%; padding: 14px 16px;
  border-radius: var(--radius-lg); background: var(--color-info-soft);
  border: var(--hairline-width) solid color-mix(in oklch, var(--color-info) 30%, transparent); }
.cx-waiting__icon { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: var(--radius-md);
  background: color-mix(in oklch, var(--color-info) 18%, var(--color-bg-elevated)); color: var(--color-info-text); }
.cx-waiting__icon .icon { width: 17px; height: 17px; }
.cx-waiting__body { flex: 1; min-width: 0; }
.cx-waiting__title { font-size: 13px; font-weight: 700; color: var(--color-info-text); }
.cx-waiting__text { font-size: 12.5px; line-height: 1.5; color: var(--color-fg); margin-top: 2px; }

/* solved — магический момент + CSAT + грейс 5 дней (закон §1.6 §1.8) */
.cx-solved { align-self: stretch; margin-top: 6px; padding: 20px 18px; border-radius: var(--radius-xl);
  background: color-mix(in oklch, var(--color-accent) 5%, var(--color-bg-elevated));
  border: var(--hairline-width) solid color-mix(in oklch, var(--color-accent) 20%, var(--color-border)); }
.cx-solved__csat { text-align: center; }
.cx-solved__csat-q { font-size: 13.5px; font-weight: 600; color: var(--color-fg); margin-bottom: 12px; }
.cx-solved .sup-csat { justify-content: center; }
.cx-solved__grace { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; padding-top: 14px;
  border-top: var(--hairline-width) solid color-mix(in oklch, var(--color-accent) 18%, var(--color-border));
  font-size: 12px; color: var(--color-fg-muted); text-align: center; }
.cx-solved__grace .icon { width: 14px; height: 14px; color: var(--color-success); flex: none; }
.cx-solved__grace b { color: var(--color-fg); font-weight: 600; }

/* rate comment step (комментарий вторым шагом) */
.cx-ratecomment { align-self: stretch; margin-top: 6px; padding: 18px; border-radius: var(--radius-xl);
  background: var(--color-bg-elevated); border: var(--hairline-width) solid var(--color-border); text-align: center; }
.cx-ratecomment__chosen { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 13px; color: var(--color-accent-strong); font-weight: 600; }
.cx-ratecomment__chosen .icon { width: 26px; height: 26px; stroke-width: 1.5; }
.cx-ratecomment__field { max-width: 440px; margin: 0 auto; text-align: left; }
.cx-ratecomment__foot { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 12px; }

/* composer — reply + attach + «Позвать человека» (тач ≥48px внизу) */
.cx-composer { flex: none; background: var(--color-bg-elevated); border-top: var(--hairline-width) solid var(--color-border); }
.cx-composer__wrap { max-width: 880px; margin: 0 auto; padding: 12px 24px calc(12px + env(safe-area-inset-bottom)); }
.cx-composer__field { position: relative; display: flex; align-items: flex-end; gap: 8px; padding: 8px 8px 8px 14px;
  border-radius: var(--radius-xl); background: var(--color-bg); border: var(--hairline-width) solid var(--color-border-strong);
  transition: border-color var(--motion-duration-fast) var(--motion-ease), box-shadow var(--motion-duration-fast) var(--motion-ease); }
.cx-composer__field:focus-within { border-color: var(--color-accent); box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-accent) 15%, transparent); }
.cx-composer__ta { flex: 1; min-width: 0; min-height: 24px; max-height: 140px; resize: none; border: none; background: none;
  font-size: 14px; line-height: 1.5; color: var(--color-fg); padding: 6px 0; }
.cx-composer__ta::placeholder { color: var(--color-fg-subtle); }
.cx-composer__attach { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: var(--radius-full);
  color: var(--color-fg-subtle); }
.cx-composer__attach:hover { background: var(--color-bg-muted); color: var(--color-accent-strong); }
.cx-composer__attach .icon { width: 19px; height: 19px; }
.cx-composer__send { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: var(--radius-full);
  background: var(--color-accent); color: var(--color-accent-on); transition: transform var(--motion-duration-fast) var(--ease-pop), opacity var(--motion-duration-fast) var(--motion-ease); }
.cx-composer__send:hover { transform: scale(1.06); }
.cx-composer__send:disabled { opacity: .4; transform: none; }
.cx-composer__send .icon { width: 18px; height: 18px; }
.cx-composer__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 9px; }
.cx-composer__async { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--color-fg-subtle); }
.cx-composer__async .icon { width: 13px; height: 13px; color: var(--color-accent); }
@media (max-width: 560px) { .cx-composer__async-label { display: none; } }

/* offline queued message (research/04 З-32: «отправим, когда появится сеть») */
.cx-queued .sup-msg__bubble { opacity: .72; border-style: dashed; }
.cx-queued__tag { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 10.5px; color: var(--color-warning-text); }
.cx-queued__tag .icon { width: 12px; height: 12px; }

/* ============================================================================
   ═══ LIST (?view=list) — Мои обращения, вертикальный таймлайн ═══
   ========================================================================= */
.cx-listhead { margin-bottom: 20px; }
.cx-listhead__title { font-size: 26px; font-weight: 600; letter-spacing: -.01em; color: var(--color-fg); }
.cx-listhead__title em { font-family: var(--font-italic); font-style: italic; color: var(--color-accent-strong); }
.cx-listhead__sub { margin-top: 8px; font-size: 13px; color: var(--color-fg-muted); }
.cx-listgroup { margin-top: 24px; }
.cx-listgroup__label { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-family: var(--font-mono);
  font-size: 9.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--color-fg-subtle); }
.cx-listgroup__label::after { content: ""; flex: 1; height: var(--hairline-width); background: var(--color-border); }

/* ============================================================================
   ═══ NO-DEBT STATES — skeleton · empty · reduced-motion · print ═══
   ========================================================================= */
.cx-skel-hero { display: block; height: 40px; width: 260px; margin: 40px auto 14px; border-radius: var(--radius-md); }
.cx-skel-line { display: block; height: 13px; border-radius: var(--radius-full); }
.cx-skel-search { display: block; height: 56px; max-width: 640px; margin: 22px auto 0; border-radius: var(--radius-full); }
.cx-skel-topics { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 40px; }
.cx-skel-card { display: block; height: 96px; border-radius: var(--radius-xl); }
.cx-skel-msg { display: block; height: 54px; border-radius: var(--radius-xl); }
.cx-skel-msg--out { margin-left: auto; width: 62%; }
.cx-skel-msg--in { width: 70%; }

.cx-empty { padding: 40px 24px; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .cx-offline__dot, .cx-voice.is-playing .cx-voice__bar, .cx-autosave.is-saving .icon,
  .cx-view.is-entering { animation: none; }
  .cx-topic:hover, .cx-case:hover, .cx-do:hover, .cx-composer__send:hover, .cx-voice__play:hover { transform: none; }
}

@media print {
  .shell-topbar, .cx-composer, .cx-callhuman, .cx-offline, .cx-thread__back { display: none !important; }
  .cx-thread__scroll { overflow: visible; }
  .cx-view { overflow: visible; }
}

/* ============================================================================
   ═══ RESPONSIVE — мобайл 390×844 без h-scroll, тач ≥48px ═══
   ========================================================================= */
@media (max-width: 720px) {
  .cx-topics { grid-template-columns: 1fr; }
  .cx-concierge__grid { grid-template-columns: 1fr; }
  .cx-hero__title { font-size: 32px; }
  .cx-form__title, .cx-listhead__title { font-size: 22px; }
}
@media (max-width: 560px) {
  .cx-wrap { padding: 22px 16px 72px; }
  .cx-thread__headwrap, .cx-thread__msgs, .cx-composer__wrap { padding-left: 16px; padding-right: 16px; }
  .cx-hero { padding-top: 24px; }
  .cx-hero__title { font-size: 28px; }
  .cx-search__box { height: 52px; }
  /* touch targets ≥48px at the bottom edge */
  .cx-composer__attach, .cx-composer__send { width: 48px; height: 48px; }
  /* thread header: care-thread already shows the stage → drop the badge,
     make «Позвать человека» icon-only so the name never wraps */
  .cx-thread__toprow { flex-wrap: nowrap; gap: 8px; }
  .cx-thread__agent-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cx-thread__status { display: none; }
  .cx-thread__toprow .cx-callhuman { width: 40px; padding: 0; justify-content: center; }
  .cx-thread__toprow .cx-callhuman__label { display: none; }
  .cx-thread__back { width: 32px; }
  .sup-msg { max-width: 90%; }
  /* auto-category: drop the confirm buttons to their own line */
  .cx-autocat { flex-wrap: wrap; }
  .cx-autocat__text { min-width: 60%; }
  .cx-autocat__actions { width: 100%; justify-content: flex-start; padding-left: 44px; }
  /* entity chip: «Открепить» → icon-only, чтобы не тесно у края */
  .cx-entity__x-label { display: none; }
  .cx-entity__x-ic { display: block; }
  .cx-entity__x { width: 32px; height: 32px; padding: 0; justify-content: center; }
}

/* ============================================================================
   ═══ PAGE: widget.html — плавающий виджет поддержки (.wg-) ═══
   Merged from assets/pages/wg.css by the assembler.
   ========================================================================= */

/* ============================================================================
   ═══ WIDGET.HTML (.wg-) — плавающий виджет поддержки поверх кабинета ═══
   Фон — упрощённый кабинет клиента (правдоподобная витрина), поверх него:
   launcher (rose-gold пуговица) → окно 380×640 (home + единый тред) →
   мобайл: полноэкранный bottom-sheet. Инцидент: баннер в виджете + плашка
   над launcher. Только токены, ни одного сырого hex.
   Lift target: app/assets/stylesheets/support/_widget.css
   ========================================================================= */

/* ---- ФОН: кабинет клиента --------------------------------------------------
   PORT → app/views/dashboard/show.html.erb (клиентский dashboard-layout,
   Shell::TopBarComponent без стаффового sidebar/apprail).                    */
.wg-page { min-height: 100dvh; display: flex; flex-direction: column; background: var(--color-bg); }
.wg-page > .shell-topbar { position: sticky; top: 0; z-index: var(--z-header); }
/* виджет открыт → кабинет мягко приглушается (фокус на диалоге) */

.wg-hello { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.wg-hello h1 { font-size: 26px; letter-spacing: -.02em; }
.wg-hello__date { font-family: var(--font-mono); font-feature-settings: var(--num-tabular);
                  font-size: 12px; color: var(--color-fg-subtle); }
.wg-hello__sub { margin-top: 6px; font-family: var(--font-italic); font-style: italic;
                 font-size: 14.5px; color: var(--color-fg-muted); }

.wg-grid { display: grid; grid-template-columns: 1fr 300px; gap: 18px; margin-top: 26px; align-items: start; }
.wg-aside { display: flex; flex-direction: column; gap: 18px; }

/* карточка разбора — живой pipeline на нити заботы */
.wg-order { position: relative; overflow: hidden; }
.wg-order::after { /* тёплое свечение угла — атмосфера, не шум */
  content: ""; position: absolute; top: -70px; right: -70px; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklch, var(--color-accent) 10%, transparent), transparent 68%);
  pointer-events: none; }
.wg-order__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.wg-order__title { font-size: 18px; font-weight: 600; margin: 2px 0 4px; }
.wg-order__meta { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono);
                  font-feature-settings: var(--num-tabular); font-size: 11.5px; color: var(--color-fg-subtle); }
.wg-order__num { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: var(--radius-full);
                 background: var(--color-bg-muted); border: var(--hairline-width) solid var(--color-border);
                 cursor: pointer; transition: border-color var(--motion-duration-fast) var(--motion-ease); }
.wg-order__num:hover { border-color: var(--color-border-strong); color: var(--color-fg-muted); }
.wg-order__num .icon { width: 11px; height: 11px; }
.wg-order__thread { padding: 18px 6px 6px; }
.wg-order__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px;
                  margin-top: 14px; padding-top: 14px; border-top: var(--hairline-width) solid var(--color-border);
                  flex-wrap: wrap; }
.wg-order__note { font-family: var(--font-italic); font-style: italic; font-size: 13px;
                  color: var(--color-fg-muted); min-width: 0; }

/* aside: каналы доставки + сессия */
.wg-side-card .eyebrow { display: block; margin-bottom: 12px; }
.wg-chanrow { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 13px; }
.wg-chanrow + .wg-chanrow { border-top: var(--hairline-width) solid var(--color-border); }
.wg-chanrow__name { flex: 1; min-width: 0; }
.wg-chanrow__state { font-size: 11.5px; color: var(--color-success-text); display: inline-flex; align-items: center; gap: 4px; }
.wg-chanrow__state .icon { width: 12px; height: 12px; }
.wg-chanrow__state--off { color: var(--color-fg-subtle); }
.wg-chanrow__link { font-size: 11.5px; color: var(--color-accent-strong); cursor: pointer; }
.wg-chanrow__link:hover { text-decoration: underline; text-underline-offset: 2px; }
.wg-session__empty { font-size: 12.5px; color: var(--color-fg-muted); margin-bottom: 12px; }

/* полоса статей «Почитать, пока ждёшь» */
.wg-read { margin-top: 26px; }
.wg-read .eyebrow { display: block; margin-bottom: 12px; }
.wg-read__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

/* Виджет (.wg-ланчер/окно/тред/мобайл-sheet) переехал в support/widget.css —
   его подключают и app-бандл (import в application.tailwind.css), и публичные
   layout'ы marketing/legal (Propshaft, вместе с токенами). Здесь осталась
   только фон-витрина концепта (.wg-page и спутники) выше. */


/* ============================================================================
   ═══ PAGE: status.html — публичная страница статуса (.st-) ═══
   Merged from assets/pages/st.css by the assembler.
   ========================================================================= */

/* ============================================================================
   ═══ STATUS PAGE (.st-) — status.the-essence.ai ═══
   Public, chromeless status page («Суть Души · статус»). Lives on a SEPARATE
   domain so it opens even when the platform itself is down (sprinthost.online
   pattern, research/01 §7). Depends on essence.css + support.css core only —
   NO shell.css. Signature piece: the 90-day «нить доступности» — the care
   thread re-read as an uptime calendar: every day is a stitch, every incident
   a knot. Zero raw hex — tokens + color-mix only.
   Lift target: app/assets/stylesheets/support/_status.css
   ========================================================================= */

/* ---- PAGE FRAME — normal document flow (public page scrolls) ------------- */
.st-page { min-height: 100dvh; display: flex; flex-direction: column;
           background: var(--color-bg); color: var(--color-fg); }
/* quiet warm atmosphere behind the hero — accent glow, fades out */
.st-page::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 420px; pointer-events: none;
  background: radial-gradient(ellipse 70% 100% at 50% -20%, var(--accent-glow), transparent 70%); }
.st-main { position: relative; width: 100%; max-width: 880px; margin: 0 auto; padding: 0 20px 48px; flex: 1; }
.st-main > * + * { margin-top: 26px; }

/* soft entrance — the page settles like fabric (reduced-motion safe) */
@keyframes st-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.st-main > section, .st-footer { animation: st-rise .45s var(--motion-ease) backwards; }
.st-main > section:nth-child(2) { animation-delay: .05s; }
.st-main > section:nth-child(3) { animation-delay: .1s; }
.st-main > section:nth-child(4) { animation-delay: .15s; }
.st-main > section:nth-child(5) { animation-delay: .2s; }
.st-main > section:nth-child(6) { animation-delay: .25s; }

/* ---- HEADER — own light chrome (brand · status, back-link, theme) -------- */
.st-header { position: sticky; top: 0; z-index: var(--z-header);
  background: var(--bg-glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: var(--hairline-width) solid var(--color-border); }
.st-header__inner { max-width: 880px; margin: 0 auto; padding: 0 20px; height: 56px;
  display: flex; align-items: center; gap: 12px; }
.st-brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
/* brand seal — same radial rose «печать» as .shell-topbar__mark */
.st-brand__mark { width: 24px; height: 24px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 32% 28%,
              color-mix(in oklch, var(--color-accent-decorative) 55%, var(--color-bg)) 0%,
              var(--color-accent-decorative) 42%, var(--color-accent-strong) 100%);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--color-accent-on) 22%, transparent),
              0 1px 4px color-mix(in oklch, var(--color-accent) 30%, transparent); }
.st-brand__name { font-family: var(--font-display); font-size: 15px; font-weight: 600;
  letter-spacing: -.01em; white-space: nowrap; }
.st-brand__module { font-family: var(--font-italic); font-style: italic; font-size: 14.5px;
  color: var(--color-accent-decorative); white-space: nowrap; }
.st-header__spacer { flex: 1; }
.st-back { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
  border-radius: var(--radius-full); font-size: 12.5px; font-weight: 500; color: var(--color-fg-muted);
  border: var(--hairline-width) solid transparent;
  transition: background var(--motion-duration-fast) var(--motion-ease),
              color var(--motion-duration-fast) var(--motion-ease),
              border-color var(--motion-duration-fast) var(--motion-ease); }
.st-back:hover { background: var(--color-bg-muted); color: var(--color-fg);
                 border-color: var(--color-border); }
.st-theme { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-md);
  color: var(--color-fg-muted);
  transition: background var(--motion-duration-fast) var(--motion-ease), color var(--motion-duration-fast) var(--motion-ease); }
.st-theme:hover { background: var(--color-bg-muted); color: var(--color-fg); }
.st-theme .icon { width: 17px; height: 17px; }

/* ---- HERO — one big knot on the thread = current state ------------------- */
.st-hero { text-align: center; padding: 44px 16px 8px; }
.st-hero__threadline { position: relative; height: 20px; margin: 0 auto 20px; max-width: 560px; }
.st-hero__threadline::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, transparent,
              color-mix(in oklch, var(--sup-thread) 55%, transparent) 22%,
              color-mix(in oklch, var(--sup-thread) 55%, transparent) 78%, transparent); }
.st-hero__knot { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 16px; height: 16px; border-radius: 50%; background: var(--color-success);
  border: 2.5px solid var(--color-bg); }
.st-hero__knot::after { content: ""; position: absolute; inset: -7px; border-radius: 50%;
  border: 1px solid color-mix(in oklch, var(--color-success) 45%, transparent);
  animation: st-halo 2.6s var(--motion-ease) infinite; }
.st-hero--warn .st-hero__knot { background: var(--color-warning); }
.st-hero--warn .st-hero__knot::after { border-color: color-mix(in oklch, var(--color-warning) 55%, transparent); }
@keyframes st-halo { 0% { transform: scale(.75); opacity: 0; } 40% { opacity: 1; }
                     100% { transform: scale(1.5); opacity: 0; } }
.st-hero__eyebrow { margin-bottom: 12px; }
.st-hero h1 { font-size: 30px; letter-spacing: -.015em; }
.st-hero__badges { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 12px; }
.st-hero__line { font-family: var(--font-italic); font-style: italic; font-size: 16px;
  color: var(--color-accent-strong); margin-top: 12px; }
.st-hero__meta { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 14px;
  margin-top: 14px; font-size: 12.5px; color: var(--color-fg-muted); }
.st-hero__meta time { font-family: var(--font-mono); font-feature-settings: var(--num-tabular);
  font-size: 12px; color: var(--color-fg-subtle); }
.st-live { display: inline-flex; align-items: center; gap: 7px; }
.st-live__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-success); flex: none;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-success) 18%, transparent);
  animation: st-live-pulse 2.4s var(--motion-ease) infinite; }
.st-hero--warn .st-live__dot { background: var(--color-warning);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-warning) 20%, transparent); }
@keyframes st-live-pulse { 0%, 100% { box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-success) 18%, transparent); }
  50% { box-shadow: 0 0 0 5px color-mix(in oklch, var(--color-success) 8%, transparent); } }
.st-hero__actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 8px 18px; margin-top: 20px; }

/* ---- SECTION HEADS -------------------------------------------------------- */
.st-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
               margin-bottom: 10px; }
.st-sec-title { font-size: 16px; font-weight: 600; }
.st-sec-sub { font-size: 11.5px; color: var(--color-fg-subtle); }
.st-sec-sub time { font-family: var(--font-mono); font-feature-settings: var(--num-tabular); }

/* ---- ACTIVE INCIDENT POST (extends core .sup-incident) -------------------- */
.st-incident .sup-incident__head { align-items: center; flex-wrap: wrap; }
.st-incident .sup-incident__head .status-badge { margin-left: auto; }
/* timestamped updates — a small vertical thread of its own */
.st-updates { margin-top: 12px; padding: 14px 18px 8px; }
.st-updates__title { font-size: 12px; font-weight: 600; color: var(--color-fg-muted); margin-bottom: 8px; }
.st-upd { position: relative; display: flex; gap: 14px; padding: 0 0 16px; }
.st-upd::before { content: ""; position: absolute; left: 4.5px; top: 14px; bottom: -2px; width: var(--hairline-width);
  background: color-mix(in oklch, var(--sup-thread) 45%, var(--color-border)); }
.st-upd:last-child { padding-bottom: 8px; }
.st-upd:last-child::before { display: none; }
.st-upd__knot { position: relative; z-index: 1; width: 10px; height: 10px; border-radius: 50%; flex: none;
  margin-top: 4px; background: var(--sup-thread); border: 1.5px solid var(--sup-thread); }
.st-upd:first-child .st-upd__knot { box-shadow: 0 0 0 4px color-mix(in oklch, var(--sup-thread) 22%, transparent);
  animation: sup-knot-glow 2.4s var(--motion-ease) infinite; }
.st-upd__body { flex: 1; min-width: 0; }
.st-upd__head { display: flex; align-items: center; gap: 10px; margin-bottom: 2px; }
.st-upd__time { font-family: var(--font-mono); font-feature-settings: var(--num-tabular);
  font-size: 12px; color: var(--color-fg-subtle); }
.st-upd__tag { font-family: var(--font-display); font-size: 9.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--color-fg-subtle); }
.st-upd__tag--ok { color: var(--color-success-text); }
.st-upd__tag--warn { color: var(--color-warning-text); }
.st-upd__text { font-size: 13px; line-height: 1.55; color: var(--color-fg); }

/* ---- SERVICES — five rows with state dots --------------------------------- */
.st-svc { display: flex; align-items: center; gap: 14px; padding: 13px 18px;
          border-top: var(--hairline-width) solid var(--color-border); }
.st-svc:first-child { border-top: none; }
.st-svc--degraded { background: color-mix(in oklch, var(--color-warning) 6%, transparent); }
.st-svc__icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-md);
  background: var(--color-accent-soft); color: var(--color-accent-strong); flex: none; }
.st-svc__icon .icon { width: 16px; height: 16px; }
.st-svc--degraded .st-svc__icon { background: var(--color-warning-soft); color: var(--color-warning-text); }
.st-svc__body { flex: 1; min-width: 0; }
.st-svc__name { font-size: 13.5px; font-weight: 600; }
.st-svc__desc { font-size: 12px; color: var(--color-fg-muted); margin-top: 1px; }
.st-svc__uptime { font-family: var(--font-mono); font-feature-settings: var(--num-tabular);
  font-size: 11.5px; color: var(--color-fg-subtle); white-space: nowrap; }
.st-state { display: inline-flex; align-items: center; gap: 7px; min-width: 96px; justify-content: flex-end;
  font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.st-state__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.st-state--ok   { color: var(--color-success-text); }
.st-state--ok .st-state__dot { background: var(--color-success);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-success) 16%, transparent); }
.st-state--warn { color: var(--color-warning-text); }
.st-state--warn .st-state__dot { background: var(--color-warning);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-warning) 20%, transparent);
  animation: st-live-pulse 2s var(--motion-ease) infinite; }
.st-state--down { color: var(--sup-sla-breach-text); }
.st-state--down .st-state__dot { background: var(--sup-sla-breach);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--sup-sla-breach) 20%, transparent); }

/* ---- THE 90-DAY AVAILABILITY THREAD («нить доступности») ------------------
   Horizontal calendar strip: a continuous rose-gold thread; each day a stitch.
   Quiet days — short thread-coloured stitches; partial — amber knots; outages
   — clay-red knots. Hover/focus grows the stitch and shows the day tooltip.  */
.st-uptime__card { padding: 18px 18px 14px; }
.st-uptime__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.st-uptime__pct { font-family: var(--font-display); font-size: 30px; font-weight: 600;
  letter-spacing: -.01em; font-feature-settings: var(--feature-tabular); line-height: 1.05; }
.st-uptime__cap { font-size: 11.5px; color: var(--color-fg-muted); margin-top: 3px; }
.st-legend { display: flex; flex-direction: column; gap: 5px; padding-top: 4px; }
.st-legend__item { display: inline-flex; align-items: center; gap: 8px; font-size: 11px;
  color: var(--color-fg-muted); white-space: nowrap; }
.st-legend__mark { width: 3px; border-radius: var(--radius-full); flex: none; }
.st-legend__mark--ok   { height: 11px; background: color-mix(in oklch, var(--sup-thread) 62%, var(--color-border)); }
.st-legend__mark--part { height: 16px; background: var(--sup-open); }
.st-legend__mark--out  { height: 20px; background: var(--sup-sla-breach); }

.st-strip-wrap { position: relative; margin-top: 18px; }
.st-strip { position: relative; display: flex; align-items: center; height: 48px; }
/* the thread itself — continuous hairline behind the stitches */
.st-strip::before { content: ""; position: absolute; left: -6px; right: -6px; top: 50%; height: 1px;
  transform: translateY(-50%); pointer-events: none;
  background: linear-gradient(90deg, transparent,
              color-mix(in oklch, var(--sup-thread) 45%, var(--color-border)) 3%,
              color-mix(in oklch, var(--sup-thread) 45%, var(--color-border)) 97%, transparent); }
.st-day { position: relative; flex: 1 1 0; min-width: 2px; height: 48px;
          display: grid; place-items: center; padding: 0; border-radius: 4px; cursor: pointer; }
.st-day::before { content: ""; width: 3px; height: 12px; border-radius: var(--radius-full);
  background: color-mix(in oklch, var(--sup-thread) 62%, var(--color-border));
  transition: transform var(--motion-duration-fast) var(--motion-ease),
              background var(--motion-duration-fast) var(--motion-ease); }
.st-day[data-grade="part"]::before { height: 20px; background: var(--sup-open); }
.st-day[data-grade="out"]::before  { height: 26px; background: var(--sup-sla-breach); }
.st-day:hover::before, .st-day:focus-visible::before { transform: scaleY(1.3) scaleX(1.4); }
.st-day[data-grade="ok"]:hover::before, .st-day[data-grade="ok"]:focus-visible::before { background: var(--sup-thread); }
.st-day:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
/* today — a round knot still being tied at the thread’s end */
.st-day.is-today::before { width: 7px; height: 7px; border-radius: 50%; background: var(--sup-thread);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--sup-thread) 22%, transparent);
  animation: sup-knot-glow 2.4s var(--motion-ease) infinite; }
.st-day.is-today[data-grade="part"]::before { width: 9px; height: 9px; background: var(--sup-open);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--sup-open) 26%, transparent); }

/* day tooltip — same voice as prod .tooltip__bubble, JS-positioned */
.st-tip { position: absolute; bottom: calc(100% + 6px); left: 0; transform: translateX(-50%);
  padding: 7px 11px; border-radius: var(--radius-sm); background: var(--color-fg);
  color: var(--color-bg-elevated); font-size: 11.5px; line-height: 1.45; white-space: nowrap;
  box-shadow: var(--shadow-pop); pointer-events: none; z-index: var(--z-popover); }
.st-tip b { font-weight: 600; }
.st-tip__sub { display: block; font-size: 10.5px; opacity: .72; }
.st-tip time { font-family: var(--font-mono); font-feature-settings: var(--num-tabular); }

.st-months { position: relative; height: 16px; margin-top: 4px; }
.st-months span { position: absolute; top: 0; left: var(--o); font-size: 10px; letter-spacing: .04em;
  color: var(--color-fg-subtle); text-transform: lowercase; }
.st-months span.is-end { left: auto; right: 0; }
.st-uptime__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 12px; padding-top: 12px; border-top: var(--hairline-width) solid var(--color-border); }
.st-uptime__quote { font-family: var(--font-italic); font-style: italic; font-size: 12.5px;
  color: var(--color-fg-muted); }
.st-kbdhint { display: inline-flex; align-items: center; gap: 5px; font-size: 11px;
  color: var(--color-fg-subtle); white-space: nowrap; }
.st-uptime__note { margin-top: 8px; font-size: 11px; color: var(--color-fg-subtle); }

/* ---- INCIDENT HISTORY — knots along a vertical thread --------------------- */
.st-hist { position: relative; padding-left: 4px; }
.st-hist::before { content: ""; position: absolute; left: 9px; top: 10px; bottom: 6px;
  width: var(--hairline-width);
  background: color-mix(in oklch, var(--sup-thread) 45%, var(--color-border)); }
.st-hist__month { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px;
  padding: 14px 0 8px; }
.st-hist__month:first-child { padding-top: 2px; }
.st-hist__month .eyebrow { background: var(--color-bg); padding: 2px 0; }
.st-hist__month::before { content: ""; width: 11px; height: 11px; border-radius: 50%; flex: none;
  margin-left: -0.5px; background: var(--color-bg);
  border: 1.5px solid color-mix(in oklch, var(--sup-thread) 55%, var(--color-border-strong)); }
.st-hist__item { position: relative; display: flex; gap: 16px; padding: 4px 0 18px; }
.st-hist__knot { position: relative; z-index: 1; width: 11px; height: 11px; border-radius: 50%; flex: none;
  margin: 5px 0 0 4px; background: var(--sup-thread); border: 2px solid var(--color-bg); }
.st-hist__knot[data-grade="part"] { background: var(--sup-open); }
.st-hist__knot[data-grade="out"]  { background: var(--sup-sla-breach); }
.st-hist__knot.is-live { box-shadow: 0 0 0 4px color-mix(in oklch, var(--sup-open) 25%, transparent);
  animation: sup-knot-glow 2.4s var(--motion-ease) infinite; }
.st-hist__card { flex: 1; min-width: 0; padding: 12px 16px; }
.st-hist__row1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.st-hist__title { font-size: 13.5px; font-weight: 600; }
.st-hist__row1 .status-badge { margin-left: auto; }
.st-hist__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: 4px;
  font-size: 11.5px; color: var(--color-fg-subtle); }
.st-hist__meta time, .st-hist__meta [data-numeric] { font-family: var(--font-mono);
  font-feature-settings: var(--num-tabular); }
.st-hist__fix { margin-top: 8px; font-size: 12.5px; line-height: 1.55; color: var(--color-fg-muted); }
.st-hist__link { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px;
  font-size: 12px; font-weight: 600; color: var(--color-accent-strong); }
.st-hist__link:hover { text-decoration: underline; text-underline-offset: 2px; }
.st-hist__link .icon { width: 13px; height: 13px; }
.st-hist__quiet { position: relative; z-index: 1; display: flex; align-items: center; gap: 16px;
  padding: 2px 0 16px; font-family: var(--font-italic); font-style: italic; font-size: 13px;
  color: var(--color-fg-subtle); }
.st-hist__quiet::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none;
  margin: 0 2px 0 6px; background: var(--color-bg);
  border: 1.5px solid color-mix(in oklch, var(--sup-thread) 50%, var(--color-border)); }
/* flash highlight when jumped to from a strip knot */
@keyframes st-flash { 0% { box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-accent) 40%, transparent); }
  100% { box-shadow: 0 0 0 3px transparent; } }
.st-hist__card.is-flash { animation: st-flash 1.6s var(--motion-ease) both; }

/* ---- SUBSCRIBE ------------------------------------------------------------ */
.st-subscribe { text-align: center; }
.st-subscribe__line { font-family: var(--font-italic); font-style: italic; font-size: 17px;
  color: var(--color-accent-strong); }
.st-subscribe__sub { font-size: 12.5px; color: var(--color-fg-muted); margin-top: 6px; }
.st-sub-row { display: flex; align-items: flex-start; justify-content: center; flex-wrap: wrap;
  gap: 10px 12px; margin-top: 18px; }
.st-sub-or { align-self: center; font-size: 11.5px; color: var(--color-fg-subtle); }
.st-sub-form { display: flex; align-items: flex-start; gap: 8px; }
.st-sub-form .input { width: 250px; }
.st-sub-form .input.is-error { border-color: var(--color-danger);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-danger) 14%, transparent); }
.st-sub-error { font-size: 11.5px; color: var(--color-danger-text); text-align: left; margin-top: 6px; }
.st-sub-done { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px;
  padding: 10px 16px; border-radius: var(--radius-full);
  background: var(--color-success-soft); color: var(--color-success-text); font-size: 13px; }
.st-sub-done .icon { width: 15px; height: 15px; flex: none; }
.st-sub-done .btn--link { font-size: 12px; color: var(--color-success-text); text-decoration: underline;
  text-underline-offset: 2px; }
.st-subscribe__note { margin-top: 14px; font-size: 11px; color: var(--color-fg-subtle); }

/* ---- FOOTER ---------------------------------------------------------------- */
.st-footer { border-top: var(--hairline-width) solid var(--color-border);
  padding: 22px 20px calc(26px + env(safe-area-inset-bottom)); text-align: center; }
.st-footer__links { display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 6px 20px; font-size: 12.5px; color: var(--color-fg-muted); }
.st-footer__links a, .st-footer__links button { display: inline-flex; align-items: center; gap: 6px;
  color: var(--color-fg-muted); font-size: 12.5px;
  transition: color var(--motion-duration-fast) var(--motion-ease); }
.st-footer__links a:hover, .st-footer__links button:hover { color: var(--color-accent-strong); }
.st-footer__links .icon { width: 13px; height: 13px; }
.st-footer__quiet { margin-top: 12px; font-family: var(--font-italic); font-style: italic;
  font-size: 12.5px; color: var(--color-fg-subtle); }
.st-footer__copy { margin-top: 8px; font-size: 11px; color: var(--color-fg-subtle); }

/* ---- MOBILE ---------------------------------------------------------------- */
@media (max-width: 700px) {
  .st-main { padding: 0 14px 40px; }
  .st-main > * + * { margin-top: 20px; }
  .st-hero { padding-top: 32px; }
  .st-hero h1 { font-size: 24px; }
  .st-uptime__top { flex-direction: column; gap: 10px; }
  .st-legend { flex-direction: row; gap: 14px; padding-top: 0; }
  .st-day::before { width: 2px; }
  .st-day[data-grade="ok"]::before { height: 10px; }
  .st-strip { height: 44px; }
  .st-svc { padding: 12px 14px; flex-wrap: wrap; }
  .st-svc__uptime { display: none; }
  .st-state { min-width: 0; }
  .st-uptime__foot { flex-direction: column; align-items: flex-start; gap: 8px; }
  .st-kbdhint { display: none; }   /* keyboard hint is meaningless on touch */
  .st-sub-form { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; }
  .st-sub-form .input { width: 100%; }
  .st-sub-row { flex-direction: column; align-items: center; }
  /* touch targets ≥48px in the bottom action zone (law §1.10) */
  .st-sub-form .input, .st-sub-form .btn, .st-subscribe #tgBtn { height: 48px; }
  .st-back span { display: none; }              /* «в кабинет» → arrow only */
  .st-back, .st-theme { width: 44px; height: 44px; padding: 0; justify-content: center; }
}

/* ---- NO-DEBT STATES: skeleton · empty · print ------------------------------ */
/* ?loading=1 — the page breathes while the snapshot loads */
.st-skel-knot { width: 16px; height: 16px; border-radius: 50%; margin: 0 auto; }
.st-skel-line { height: 14px; margin: 12px auto 0; }
.st-skel-strip { height: 48px; margin-top: 18px; border-radius: var(--radius-md); }
.st-skel-row { display: flex; align-items: center; gap: 14px; padding: 13px 18px;
  border-top: var(--hairline-width) solid var(--color-border); }
.st-skel-row:first-child { border-top: none; }
.st-skel-row .st-skel-a { width: 34px; height: 34px; border-radius: var(--radius-md); flex: none; }
.st-skel-row .st-skel-b { height: 12px; flex: 1; max-width: 220px; }
.st-skel-row .st-skel-c { height: 12px; width: 72px; margin-left: auto; }

/* history with zero incidents in 90 days — the quiet is the message */
.st-hist-empty .sup-empty__quote { font-size: 15px; }

@media print {
  .st-header, .st-subscribe, .st-hero__actions, .st-theme, .st-back, .st-kbdhint { display: none !important; }
  .st-page::before { display: none; }
  .st-main > section, .st-footer { animation: none; }
  .st-day.is-today::before, .st-hero__knot::after, .st-live__dot, .st-state__dot { animation: none; box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  .st-main > section, .st-footer { animation: none; }
  .st-hero__knot::after, .st-live__dot, .st-state--warn .st-state__dot,
  .st-day.is-today::before, .st-upd:first-child .st-upd__knot, .st-hist__knot.is-live { animation: none; }
  .st-day:hover::before, .st-day:focus-visible::before { transform: none; }
}

/* ============================================================================
   ═══ PAGE: analytics.html — метрики и смена (.an-) ═══
   Merged from assets/pages/an.css by the assembler.
   ========================================================================= */

/* ============================================================================
   ═══ PAGE: analytics.html — метрики и смена (.an-*) ═══
   Staff analytics: KPI-карточки (первый ответ vs обещание, CSAT-распределение,
   FCR, честная доля Юи с вычетом возвратов 48ч, переоткрытия), инлайн-SVG
   график объёма, heatmap часы×дни, загрузка бакетов и каналов, борд смены
   с передачей, «Узкие места» (просроченные SLA → переход в очередь).
   Depends on: essence.css (tokens+components), shell.css (chrome),
   support.css (.sup-* core). Zero raw hex — tokens + color-mix only, so dark
   theme and personas come for free.
   Lift target: app/assets/stylesheets/support/_analytics.css
   ========================================================================= */

/* ---- VIEW SHELL (toolbar 52px like the Mail toolbar + scroll body) -------- */
.an-view { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.an-toolbar { flex: none; display: flex; align-items: center; gap: 12px; height: 52px;
  padding: 0 18px; border-bottom: var(--hairline-width) solid var(--color-border);
  background: var(--color-bg-elevated); }
.an-toolbar__title { font-family: var(--font-display); font-size: 15px; font-weight: 600; white-space: nowrap; }
.an-toolbar__sub { font-size: 11.5px; color: var(--color-fg-subtle); white-space: nowrap;
  font-family: var(--font-mono); font-feature-settings: var(--num-tabular); }
.an-toolbar__spacer { flex: 1; }
.an-toolbar__live { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--color-fg-subtle); white-space: nowrap; }
.an-toolbar__live .sup-presence__dot { width: 6px; height: 6px; }
.an-toolbar__live b { color: var(--color-fg-muted); font-weight: 600; font-family: var(--font-mono); }
@media (max-width: 720px) { .an-toolbar__sub, .an-toolbar__live { display: none; } }

.an-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 16px 18px 40px; }

/* Lora-italic honest one-line takeaway that changes with the range */
.an-insight { display: flex; align-items: flex-start; gap: 10px; margin: 0 2px 14px; }
.an-insight__mark { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 8px;
  background: var(--color-accent-soft); color: var(--color-accent-strong); margin-top: 1px; }
.an-insight__mark .icon { width: 15px; height: 15px; }
.an-insight__text { font-family: var(--font-italic); font-style: italic; font-size: 15px; line-height: 1.45;
  color: var(--color-accent-strong); }
.an-insight__text b { font-style: normal; font-weight: 600; font-family: var(--font-mono);
  font-feature-settings: var(--num-tabular); color: var(--color-fg); }

/* ============================================================================
   KPI CARDS — the five headline metrics (auto-fit responsive row)
   ========================================================================= */
.an-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); gap: 12px; }
.an-kpi { display: flex; flex-direction: column; gap: 8px; padding: 14px 15px 13px;
  background: var(--color-bg-elevated); border: var(--hairline-width) solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); min-width: 0; position: relative; overflow: hidden; }
.an-kpi__head { display: flex; align-items: center; gap: 8px; }
.an-kpi__ico { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 8px;
  background: var(--color-accent-soft); color: var(--color-accent-strong); }
.an-kpi__ico .icon { width: 15px; height: 15px; }
.an-kpi--ai .an-kpi__ico { background: var(--sup-ai-soft); color: var(--sup-ai-text); }
.an-kpi__name { font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--color-fg-subtle); flex: 1; min-width: 0; line-height: 1.25; }
.an-kpi__valrow { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.an-kpi__val { font-family: var(--font-mono); font-feature-settings: var(--num-tabular);
  font-size: 30px; font-weight: 500; line-height: 1; color: var(--color-fg); letter-spacing: -.01em; }
.an-kpi__val small { font-size: 15px; color: var(--color-fg-muted); font-weight: 500; margin-left: 1px; }
.an-delta { display: inline-flex; align-items: center; gap: 3px; height: 19px; padding: 0 7px 0 5px;
  border-radius: var(--radius-full); font-family: var(--font-mono); font-feature-settings: var(--num-tabular);
  font-size: 11px; font-weight: 600; white-space: nowrap; }
.an-delta .icon { width: 12px; height: 12px; }
.an-delta.is-good { background: var(--color-success-soft); color: var(--color-success-text); }
.an-delta.is-bad  { background: var(--color-danger-soft);  color: var(--color-danger-text); }
.an-delta.is-flat { background: var(--color-bg-muted); color: var(--color-fg-muted); }
.an-kpi__vs { font-size: 11.5px; color: var(--color-fg-subtle); line-height: 1.4; }
.an-kpi__vs b { color: var(--color-success-text); font-weight: 600; }
.an-kpi__vs .an-vs-target { color: var(--color-fg-muted); font-family: var(--font-mono); font-feature-settings: var(--num-tabular); }
.an-kpi__foot { margin-top: auto; font-size: 11px; color: var(--color-fg-subtle); line-height: 1.4; }

/* mini sparkline inside a KPI card */
.an-spark { width: 100%; height: 34px; display: block; overflow: visible; }
.an-spark__line { fill: none; stroke: var(--color-accent); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.an-spark__area { stroke: none; }
.an-spark__dot { fill: var(--color-accent); stroke: var(--color-bg-elevated); stroke-width: 1.6; }

/* CSAT distribution (5 signature faces, sentiment-tinted bars) */
.an-dist { display: flex; flex-direction: column; gap: 3px; margin-top: 1px; }
.an-dist__row { display: grid; grid-template-columns: 18px 1fr 30px; align-items: center; gap: 8px; }
.an-dist__face { width: 18px; height: 18px; color: var(--_c, var(--color-fg-subtle)); }
.an-dist__face .icon { width: 18px; height: 18px; stroke-width: 1.5; }
.an-dist__bar { height: 7px; border-radius: var(--radius-full); background: var(--color-bg-muted); overflow: hidden; }
.an-dist__fill { display: block; height: 100%; border-radius: inherit; background: var(--_c, var(--color-accent));
  transition: width var(--motion-duration-slow) var(--motion-ease); }
.an-dist__n { font-family: var(--font-mono); font-feature-settings: var(--num-tabular); font-size: 10.5px;
  color: var(--color-fg-subtle); text-align: right; }
.an-dist__row--v5 { --_c: var(--color-success-text); }
.an-dist__row--v4 { --_c: var(--color-success); }
.an-dist__row--v3 { --_c: var(--color-warning); }
.an-dist__row--v2 { --_c: var(--sup-sla-warn); }
.an-dist__row--v1 { --_c: var(--sup-sla-breach); }

/* Две честные цифры из ленты оценок (§9): первичный CSAT и отработка недовольных —
   их не перекупить бонусом, поэтому вынесены отдельным блоком над распределением. */
.an-fair { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 12px;
  padding-bottom: 10px; border-bottom: 1px solid var(--color-border-subtle, var(--color-bg-muted)); }
.an-fair__row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0; }
.an-fair__label { font-size: 12px; color: var(--color-fg-muted, var(--color-fg-subtle)); }
.an-fair__val { margin: 0; font-family: var(--font-mono); font-feature-settings: var(--num-tabular);
  font-size: 15px; font-weight: 600; color: var(--color-fg); }
.an-fair__sub { font-family: var(--font-sans); font-size: 11px; font-weight: 400;
  color: var(--color-fg-subtle); margin-left: 4px; }

/* Honest Yuia bar: raw deflection with the 48h-returns carved out */
.an-yuia { margin-top: 1px; }
.an-yuia__bar { position: relative; height: 9px; border-radius: var(--radius-full); overflow: hidden;
  background: var(--color-bg-muted); display: flex; }
.an-yuia__net { height: 100%; background: var(--sup-ai); }
.an-yuia__ret { height: 100%; background: repeating-linear-gradient(-45deg,
  color-mix(in oklch, var(--sup-sla-warn) 55%, transparent) 0 4px, transparent 4px 8px);
  border-left: var(--hairline-width) solid var(--color-bg-elevated); }
.an-yuia__legend { display: flex; gap: 12px; margin-top: 7px; font-size: 10.5px; color: var(--color-fg-subtle); }
.an-yuia__legend span { display: inline-flex; align-items: center; gap: 5px; }
.an-yuia__sw { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.an-yuia__sw--net { background: var(--sup-ai); }
.an-yuia__sw--ret { background: repeating-linear-gradient(-45deg,
  color-mix(in oklch, var(--sup-sla-warn) 65%, transparent) 0 3px, transparent 3px 6px),
  var(--color-bg-muted); }

/* ============================================================================
   GRID — 12-col dashboard for the panels below the KPIs
   ========================================================================= */
.an-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.an-span-4 { grid-column: span 4; } .an-span-5 { grid-column: span 5; }
.an-span-7 { grid-column: span 7; } .an-span-8 { grid-column: span 8; }
.an-span-12 { grid-column: 1 / -1; }

.an-panel { display: flex; flex-direction: column; min-width: 0; overflow: hidden; padding: 15px 16px 16px;
  background: var(--color-bg-elevated); border: var(--hairline-width) solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); }
.an-panel__head { display: flex; align-items: center; gap: 8px 10px; margin-bottom: 12px; flex-wrap: wrap; }
.an-panel__title { font-family: var(--font-display); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.an-panel__sub { font-size: 11px; color: var(--color-fg-subtle); font-family: var(--font-mono);
  font-feature-settings: var(--num-tabular); white-space: nowrap; }
.an-panel__spacer { flex: 1; }

/* shared inline legend (chart + heatmap) */
.an-legend { display: inline-flex; align-items: center; gap: 12px; }
.an-legend__i { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--color-fg-muted); }
.an-legend__sw { width: 12px; height: 3px; border-radius: var(--radius-full); flex: none; }
.an-legend__sw--recv { background: var(--color-accent); }
.an-legend__sw--solv { background: var(--sup-thread); }
.an-legend__sw--dot { width: 8px; height: 8px; }

/* ============================================================================
   VOLUME CHART — hand-built inline SVG, smooth curve + gradient area
   ========================================================================= */
.an-chart-wrap { position: relative; width: 100%; }
.an-chart { display: block; width: 100%; height: auto; overflow: visible; }
.an-chart__grid { stroke: var(--color-border); stroke-width: var(--hairline-width); }
.an-chart__ylab, .an-chart__xlab { font-family: var(--font-mono); font-size: 9.5px; fill: var(--color-fg-subtle); }
.an-chart__area { stroke: none; }
.an-chart__line { fill: none; stroke: var(--color-accent); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.an-chart__line--solv { stroke: var(--sup-thread); stroke-width: 1.6; stroke-dasharray: 4 3; }
.an-chart__knot { fill: var(--color-bg-elevated); stroke: var(--color-accent); stroke-width: 1.6; }
.an-chart__knot--peak { fill: var(--color-accent); }
.an-chart__guide { stroke: var(--color-border-strong); stroke-width: var(--hairline-width); stroke-dasharray: 3 3; opacity: 0; transition: opacity var(--motion-duration-fast) var(--motion-ease); }
.an-chart__cursor { fill: var(--color-accent); stroke: var(--color-bg-elevated); stroke-width: 2; opacity: 0; }
.an-chart.is-hover .an-chart__guide, .an-chart.is-hover .an-chart__cursor { opacity: 1; }
.an-chart__hit { fill: transparent; cursor: crosshair; }

/* ============================================================================
   HEATMAP — hours × days, accent-opacity cells
   ========================================================================= */
.an-heat-scroll { overflow-x: auto; scrollbar-width: thin; margin: -2px; padding: 2px; }
.an-heat { display: grid; gap: 3px; min-width: 340px;
  grid-template-columns: 30px repeat(12, minmax(20px, 1fr)); }
.an-heat__corner { }
.an-heat__hh { font-family: var(--font-mono); font-size: 9px; color: var(--color-fg-subtle); text-align: center;
  padding-bottom: 2px; }
.an-heat__dd { font-family: var(--font-mono); font-size: 10px; color: var(--color-fg-subtle); display: flex;
  align-items: center; height: 22px; }
.an-heat__cell { height: 22px; border-radius: 4px; cursor: default;
  background: color-mix(in oklch, var(--color-accent) calc(var(--_v, 0) * 1%), var(--color-bg-muted));
  transition: transform var(--motion-duration-fast) var(--ease-pop); }
.an-heat__cell:hover { transform: scale(1.12); outline: var(--hairline-width) solid var(--color-accent); outline-offset: 1px; }
.an-heat__cell.is-peak { box-shadow: inset 0 0 0 1.5px var(--color-accent-strong); }
.an-heat__foot { display: flex; align-items: center; gap: 8px; margin-top: 11px; font-size: 10.5px; color: var(--color-fg-subtle); }
.an-heat__scale { display: flex; gap: 2px; }
.an-heat__scale span { width: 14px; height: 10px; border-radius: 3px;
  background: color-mix(in oklch, var(--color-accent) calc(var(--_v) * 1%), var(--color-bg-muted)); }

/* ============================================================================
   BUCKETS + CHANNELS — horizontal load bars
   ========================================================================= */
.an-bars { display: flex; flex-direction: column; gap: 12px; }
.an-bar { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 10px; }
.an-bar__ico { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px;
  background: var(--color-bg-muted); color: var(--color-fg-muted); flex: none; }
.an-bar__ico .icon { width: 15px; height: 15px; }
.an-bar__body { min-width: 0; }
.an-bar__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.an-bar__label { font-size: 12.5px; color: var(--color-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-bar__n { font-family: var(--font-mono); font-feature-settings: var(--num-tabular); font-size: 12px; color: var(--color-fg-muted); flex: none; }
.an-bar__track { height: 7px; border-radius: var(--radius-full); background: var(--color-bg-muted); overflow: hidden; }
.an-bar__fill { display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--sup-thread), var(--color-accent));
  transition: width var(--motion-duration-slow) var(--motion-ease); }
.an-bar__meta { font-family: var(--font-mono); font-feature-settings: var(--num-tabular); font-size: 10.5px;
  color: var(--color-fg-subtle); white-space: nowrap; text-align: right; min-width: 52px; }
.an-bar__meta .icon { width: 11px; height: 11px; vertical-align: -1px; }

/* per-channel SLA compliance chip */
.an-sla-ok   { color: var(--color-success-text); }
.an-sla-warn { color: var(--color-warning-text); }
.an-chan-sla { display: inline-flex; align-items: center; gap: 4px; }
.an-chan-sla .an-bar__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ============================================================================
   SHIFT BOARD — agents (взято/решено/среднее/CSAT + presence) + Вера старшая
   ========================================================================= */
.an-agents { display: flex; flex-direction: column; gap: 8px; }
.an-agent { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: center;
  padding: 11px 12px; border-radius: var(--radius-md);
  border: var(--hairline-width) solid var(--color-border); background: var(--color-bg); }
.an-agent.is-me { border-color: color-mix(in oklch, var(--color-accent) 40%, var(--color-border)); background: color-mix(in oklch, var(--color-accent) 4%, var(--color-bg)); }
.an-agent.is-lead { border-color: color-mix(in oklch, var(--sup-thread) 45%, var(--color-border)); }
.an-agent__id { min-width: 0; }
.an-agent__name { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--color-fg); }
.an-agent__role { font-size: 10.5px; color: var(--color-fg-subtle); margin-top: 1px; }
.an-lead-badge { display: inline-flex; align-items: center; gap: 3px; height: 16px; padding: 0 6px; border-radius: var(--radius-full);
  background: color-mix(in oklch, var(--sup-thread) 16%, var(--color-bg-elevated)); color: var(--color-accent-strong);
  font-family: var(--font-display); font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  border: var(--hairline-width) solid color-mix(in oklch, var(--sup-thread) 32%, transparent); }
.an-lead-badge .icon { width: 9px; height: 9px; }
.an-me-tag { font-size: 10px; font-weight: 500; color: var(--color-accent-strong); }
.an-agent__stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 4px; }
.an-stat { display: flex; flex-direction: column; gap: 1px; }
.an-stat__v { font-family: var(--font-mono); font-feature-settings: var(--num-tabular); font-size: 15px; font-weight: 500; color: var(--color-fg); }
.an-stat__k { font-size: 9.5px; color: var(--color-fg-subtle); letter-spacing: .02em; }
.an-stat--csat .an-stat__v { color: var(--color-success-text); }

/* shift handoff card — mini care-thread + report + передать смену */
.an-handoff__thread { margin-bottom: 12px; }
.an-handoff__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.an-hstat { display: flex; flex-direction: column; gap: 2px; padding: 9px 10px; border-radius: var(--radius-md);
  background: var(--color-bg-muted); }
.an-hstat__v { font-family: var(--font-mono); font-feature-settings: var(--num-tabular); font-size: 20px; font-weight: 500; color: var(--color-fg); line-height: 1; }
.an-hstat__k { font-size: 10px; color: var(--color-fg-subtle); }
.an-hstat.is-breach { background: var(--sup-sla-breach-soft); }
.an-hstat.is-breach .an-hstat__v { color: var(--sup-sla-breach-text); }
.an-handoff__field .textarea { min-height: 62px; font-size: 12.5px; }
.an-handoff__hint { display: flex; align-items: flex-start; gap: 7px; margin: 9px 0 12px; font-size: 11px; color: var(--color-fg-subtle); line-height: 1.45; }
.an-handoff__hint .icon { width: 13px; height: 13px; flex: none; margin-top: 1px; color: var(--color-accent-strong); }

/* ============================================================================
   BOTTLENECKS — «Узкие места»: overdue SLA rows + process stalls → to queue
   ========================================================================= */
.an-bottle { display: flex; flex-direction: column; gap: 8px; }
.an-brow { display: grid; grid-template-columns: 34px minmax(0,1fr) auto auto; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--radius-md); text-align: left; width: 100%;
  border: var(--hairline-width) solid var(--color-border); background: var(--color-bg);
  position: relative; overflow: hidden;
  transition: border-color var(--motion-duration-fast) var(--motion-ease), background var(--motion-duration-fast) var(--motion-ease); }
.an-brow::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--sup-sla-breach); }
.an-brow:hover { border-color: color-mix(in oklch, var(--color-accent) 40%, var(--color-border)); background: var(--color-bg-muted); }
.an-brow__id { min-width: 0; }
.an-brow__name { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--color-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-brow__theme { font-size: 11.5px; color: var(--color-fg-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.an-brow__num { font-family: var(--font-mono); font-feature-settings: var(--num-tabular); color: var(--color-fg-subtle); font-weight: 500; }
.an-brow__mid { display: flex; align-items: center; gap: 8px; }
.an-brow__open { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px 0 12px; flex: none;
  border-radius: var(--radius-sm); font-size: 12px; font-weight: 500; color: var(--color-accent-strong);
  border: var(--hairline-width) solid var(--color-border-strong); background: var(--color-bg-elevated); white-space: nowrap;
  transition: border-color var(--motion-duration-fast) var(--motion-ease), background var(--motion-duration-fast) var(--motion-ease); }
.an-brow__open:hover { border-color: var(--color-accent); background: var(--color-accent-soft); }
.an-brow__open .icon { width: 13px; height: 13px; }
.an-brow--auto::before { background: var(--color-warning); }

/* ── Порт-фиксы к строке «узкого места» (B6, срез 8/2) ────────────────────────
   1. `.an-brow__name` — flex-контейнер, а `overflow`/`text-overflow` на нём НЕ работают:
      длинное имя обрубалось бы насухо, без многоточия. Режет внутренний блочный бокс.
   2. `.an-brow__theme` — <span>, то есть незаменяемый inline-бокс, к которому
      `overflow`/`text-overflow` НЕ ПРИМЕНЯЮТСЯ вовсе: длинная тема ехала горизонтально
      поверх «ждёт …» и кнопки «Открыть» вместо того, чтобы обрезаться.
   3. Красная полоса слева = «мы опоздали». В «узких местах» лежат те, кто ДОЛЬШЕ ВСЕХ
      ждёт первого слова, — не обязательно просроченные. Красить десятиминутное обращение
      в «просрочено» — врать (закон о честных индикаторах). */
.an-brow__who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-brow__name .an-brow__num { flex: none; }
.an-brow__theme { display: block; }
.an-brow--waiting::before { background: var(--sup-sla-warn); }

.an-bottle-sub { margin: 16px 0 8px; display: flex; align-items: center; gap: 8px; }
.an-bottle-sub .eyebrow { color: var(--color-fg-subtle); }
.an-bottle-sub__line { flex: 1; height: var(--hairline-width); background: var(--color-border); }
.an-proc { display: grid; grid-template-columns: 28px minmax(0,1fr) auto; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--radius-md); text-align: left; width: 100%;
  border: var(--hairline-width) solid var(--color-border); background: var(--color-bg); }
.an-proc:hover { border-color: color-mix(in oklch, var(--color-accent) 40%, var(--color-border)); background: var(--color-bg-muted); }
.an-proc__ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px;
  background: var(--color-warning-soft); color: var(--color-warning-text); flex: none; }
.an-proc__ico .icon { width: 15px; height: 15px; }
.an-proc__t { display: block; font-size: 12.5px; color: var(--color-fg); }
.an-proc__t b { font-weight: 600; }
.an-proc__d { display: block; font-size: 11px; color: var(--color-fg-subtle); margin-top: 2px; }
.an-proc__go { color: var(--color-fg-subtle); flex: none; }
.an-proc__go .icon { width: 16px; height: 16px; }

/* ============================================================================
   FLOATING TOOLTIP — chart + heatmap
   ========================================================================= */
.an-tip { position: fixed; z-index: var(--z-popover); pointer-events: none; opacity: 0;
  padding: 7px 10px; border-radius: var(--radius-sm); background: var(--color-fg); color: var(--color-bg-elevated);
  font-size: 11.5px; line-height: 1.4; box-shadow: var(--shadow-pop); white-space: nowrap;
  transform: translate(-50%, -112%); transition: opacity var(--motion-duration-fast) var(--motion-ease); }
.an-tip.is-on { opacity: 1; }
.an-tip__d { font-family: var(--font-mono); font-feature-settings: var(--num-tabular); font-weight: 600; margin-bottom: 2px; }
.an-tip__r { display: flex; align-items: center; gap: 6px; }
.an-tip__r + .an-tip__r { margin-top: 1px; }
.an-tip__sw { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.an-tip__sw--recv { background: var(--color-accent); }
.an-tip__sw--solv { background: var(--sup-thread); }
.an-tip__n { font-family: var(--font-mono); font-feature-settings: var(--num-tabular); margin-left: auto; }

/* sidebar analytics scrollspy nav (reuses .shell-nav) */
.an-navsec .shell-nav__item.is-active { color: var(--color-accent-strong); }

/* ============================================================================
   RESPONSIVE — collapse the 12-col grid, then hand over to core mobile shell
   ========================================================================= */
@media (max-width: 1180px) {
  .an-span-8, .an-span-7 { grid-column: span 12; }
  .an-span-4, .an-span-5 { grid-column: span 6; }
}
@media (max-width: 820px) {
  .an-span-4, .an-span-5 { grid-column: span 12; }
  .an-scroll { padding: 12px 12px 96px; }
  .an-agent__stats { gap: 6px; }
}
@media (max-width: 620px) {
  .an-kpis { grid-template-columns: 1fr 1fr; gap: 8px; }
  .an-kpi__val { font-size: 25px; }
  .an-insight__text { font-size: 13.5px; }
  /* toolbar must fit a narrow phone: icon-only export, tighter gaps */
  .an-tb-label { display: none; }
  .an-toolbar { gap: 8px; padding: 0 12px; }
  .an-toolbar__title { flex: none; }
  /* wide bottleneck rows stack onto two lines */
  .an-brow { grid-template-columns: 34px minmax(0,1fr); row-gap: 10px; }
  .an-brow__mid { grid-column: 1 / -1; flex-wrap: wrap; }
  .an-brow__open { grid-column: 1 / -1; justify-content: center; }
}
@media (max-width: 430px) {
  .an-kpis { grid-template-columns: 1fr; }
}

/* ============================================================================
   NO-DEBT STATES — skeleton (?loading=1) · print · reduced-motion (бриф §6.5)
   ========================================================================= */
.an-skel-kpi { display: flex; flex-direction: column; gap: 10px; padding: 14px 15px;
  background: var(--color-bg-elevated); border: var(--hairline-width) solid var(--color-border);
  border-radius: var(--radius-lg); }
.an-skel-panel { padding: 15px 16px; background: var(--color-bg-elevated);
  border: var(--hairline-width) solid var(--color-border); border-radius: var(--radius-lg); }
.an-skel-row { display: flex; align-items: center; gap: 10px; }

@media print {
  .shell-topbar, .shell-sidebar, .shell-apprail, .sup-bottomnav, .sup-fab,
  .an-toolbar__live, .an-brow__open { display: none !important; }
  .an-scroll { overflow: visible; padding: 0; }
  .an-panel, .an-kpi, .an-agent, .an-brow { box-shadow: none; break-inside: avoid; }
  .an-grid { display: block; }
  .an-panel { margin-bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .an-heat__cell, .an-bar__fill, .an-dist__fill, .an-chart__guide, .an-chart__cursor,
  .an-spark__dot { transition: none; }
}

/* ============================================================================
   ═══ PAGE: settings.html — настройки модуля Поддержки (.se-) ═══
   Merged from assets/pages/se.css by the assembler.
   ========================================================================= */

/* ============================================================================
   PAGE: settings.html — настройки модуля Поддержки (стафф). Префикс .se-
   Строит на ядре .sup-* (support.css) + essence/shell. ТОЛЬКО токены, ноль hex.
   Сборщик сольёт этот файл в support.css и снимет последний <link>.
   PORT → app/views/support/settings/*.html.erb (layout support.html.erb),
          секции = tab-панели SettingsNavComponent; строки = SettingRowComponent.
   ============================================================================ */

/* ── scroll shell (sup-main = overflow:hidden → свой скролл-контейнер) ──────── */
.se-scroll { flex: 1; min-height: 0; overflow-y: auto; scroll-behavior: smooth; }
.se-wrap { max-width: 840px; margin: 0 auto; padding: 30px 30px 110px; }
@media (max-width: 900px) { .se-wrap { padding: 18px 16px 84px; } }
@media (prefers-reduced-motion: reduce) { .se-scroll { scroll-behavior: auto; } }

/* ── hero ──────────────────────────────────────────────────────────────────── */
.se-hero { margin-bottom: 8px; }
.se-hero .eyebrow { display: block; margin-bottom: 11px; }
.se-h1 { font-family: var(--font-display); font-weight: 600; font-size: 27px; letter-spacing: -.01em; line-height: 1.12; }
.se-lead { margin-top: 9px; color: var(--color-fg-muted); font-size: 14.5px; line-height: 1.55; max-width: 62ch; }
.se-lead em { color: var(--color-accent-strong); }
/* фирменная «нить заботы» — тонкая rose-gold-линия с узелками под hero */
.se-thread-deco { display: flex; align-items: center; gap: 0; margin: 20px 0 4px; }
.se-thread-deco__knot { width: 9px; height: 9px; border-radius: 50%; background: var(--color-bg); border: 1.5px solid var(--sup-thread); flex: none; }
.se-thread-deco__knot.is-lit { background: var(--sup-thread); box-shadow: 0 0 0 4px color-mix(in oklch, var(--sup-thread) 18%, transparent); }
.se-thread-deco__seg { flex: 1; height: var(--hairline-width); background: linear-gradient(90deg, var(--sup-thread), color-mix(in oklch, var(--sup-thread) 40%, transparent)); }

/* ── section nav (sticky scroll-spy sidebar настроек) ──────────────────────── */
.se-nav__label { padding: 0 11px 8px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-fg-subtle); }
.se-navlink { display: flex; align-items: center; gap: 9px; padding: 7px 11px; border-radius: 9px; font-size: 13.5px; line-height: 1.3; color: var(--color-fg-muted); text-decoration: none; transition: background .12s ease, color .12s ease; }
.se-navlink:hover { background: var(--color-bg-muted); color: var(--color-fg); }
.se-navlink.is-active { background: var(--color-accent-soft); color: var(--color-accent-strong); font-weight: 500; }

/* ── section ───────────────────────────────────────────────────────────────── */
.se-section { padding-top: 18px; margin-top: 30px; scroll-margin-top: 16px; border-top: var(--hairline-width) solid var(--color-border); }
.se-section--first { border-top: none; margin-top: 22px; padding-top: 0; }
.se-section__title { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: -.01em; }
.se-section__title .icon { color: var(--color-accent); width: 19px; height: 19px; flex: none; }
.se-section__sub { margin: 6px 0 16px; color: var(--color-fg-subtle); font-size: 13px; line-height: 1.5; max-width: 64ch; }
.se-section__sub em { font-family: var(--font-italic); font-style: italic; color: var(--color-accent-strong); }
.se-blockhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 24px 2px 11px; }
.se-blockhead__t { font-weight: 600; font-size: 13px; color: var(--color-fg-muted); display: flex; align-items: center; gap: 7px; }
.se-blockhead__t .icon { width: 15px; height: 15px; color: var(--color-fg-subtle); }

/* ── row (label/desc + control) ────────────────────────────────────────────── */
.se-row { display: flex; align-items: center; gap: 20px; padding: 14px 0; border-bottom: var(--hairline-width) solid var(--color-border); }
.se-row:last-child { border-bottom: none; }
.se-row--top { align-items: flex-start; }
.se-row__text { flex: 1; min-width: 0; }
.se-row__label { font-weight: 500; font-size: 14px; }
.se-row__desc { margin-top: 3px; color: var(--color-fg-subtle); font-size: 12.5px; line-height: 1.5; }
.se-row__desc b { color: var(--color-fg-muted); font-weight: 600; }
.se-row__control { flex: none; display: flex; align-items: center; gap: 10px; }
.se-input-sm { width: 74px; text-align: center; font-family: var(--font-mono); }
.se-input-time { width: 108px; font-family: var(--font-mono); }

/* ── team: role legend ─────────────────────────────────────────────────────── */
.se-roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 720px) { .se-roles { grid-template-columns: 1fr; } }
.se-role { border: var(--hairline-width) solid var(--color-border); border-radius: var(--radius-lg); padding: 13px 14px; background: var(--color-bg); }
.se-role__name { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; }
.se-role__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.se-role__dot--admin { background: var(--color-accent); }
.se-role__dot--agent { background: var(--color-info); }
.se-role__dot--viewer { background: var(--color-fg-subtle); }
.se-role__code { display: block; margin-top: 5px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .02em; color: var(--color-fg-subtle); }
.se-role__desc { margin-top: 6px; color: var(--color-fg-subtle); font-size: 12px; line-height: 1.5; }

/* ── team: member row ──────────────────────────────────────────────────────── */
.se-member { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: var(--hairline-width) solid var(--color-border); }
.se-member:last-child { border-bottom: none; }
.se-member__main { flex: 1; min-width: 0; }
.se-member__name { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 13.5px; }
.se-member__email { color: var(--color-fg-subtle); font-size: 12px; margin-top: 2px; font-family: var(--font-mono); }
.se-member__ctrl { flex: none; display: flex; align-items: center; gap: 8px; }
.se-you { font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--color-accent-strong); background: var(--color-accent-soft); padding: 2px 6px; border-radius: var(--radius-full); flex: none; }
.se-role-select { width: 172px; height: 34px; }
@media (max-width: 620px) { .se-member { flex-wrap: wrap; } .se-role-select { width: 100%; } .se-member__ctrl { width: 100%; } }

/* shift roster */
.se-shifts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 620px) { .se-shifts { grid-template-columns: 1fr; } }
.se-shift { border: var(--hairline-width) solid var(--color-border); border-radius: var(--radius-lg); padding: 13px 14px; background: var(--color-bg); }
.se-shift__when { display: flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 12px; color: var(--color-fg-muted); }
.se-shift__when .icon { width: 14px; height: 14px; color: var(--color-accent); }
.se-shift__who { display: flex; align-items: center; gap: 8px; margin-top: 11px; flex-wrap: wrap; }
.se-shift__person { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; }
.se-shift__senior { font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-warning-text); background: var(--color-warning-soft); padding: 2px 6px; border-radius: var(--radius-full); }

/* ── queues: bucket row ────────────────────────────────────────────────────── */
.se-bucket { display: flex; align-items: center; gap: 13px; padding: 12px 0; border-bottom: var(--hairline-width) solid var(--color-border); }
.se-bucket:last-child { border-bottom: none; }
.se-bucket__ic { width: 34px; height: 34px; border-radius: var(--radius-md); display: grid; place-items: center; background: var(--color-accent-soft); color: var(--color-accent-strong); flex: none; }
.se-bucket__ic .icon { width: 18px; height: 18px; }
.se-bucket__main { flex: 1; min-width: 0; }
.se-bucket__name { font-weight: 500; font-size: 13.5px; }
.se-bucket__meta { color: var(--color-fg-subtle); font-size: 12px; margin-top: 2px; }
.se-bucket__meta b { color: var(--color-accent-strong); font-weight: 600; }
.se-grip { color: var(--color-fg-subtle); cursor: grab; display: grid; place-items: center; width: 22px; height: 30px; flex: none; opacity: .55; }
.se-grip:hover { opacity: 1; }
.se-grip .icon { width: 16px; height: 16px; }

/* routing rule */
.se-rule { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 0; border-bottom: var(--hairline-width) solid var(--color-border); }
.se-rule:last-child { border-bottom: none; }
.se-rule__when { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.se-cond { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 4px 9px; border-radius: var(--radius-full); background: var(--color-bg-muted); }
.se-cond__k { font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--color-fg-subtle); }
.se-arrow { color: var(--color-fg-subtle); display: inline-flex; }
.se-arrow .icon { width: 15px; height: 15px; }
.se-rule__then { font-weight: 500; font-size: 12.5px; color: var(--color-accent-strong); }
.se-rule__x { margin-left: auto; }

/* VIP callout */
.se-vip { display: flex; align-items: flex-start; gap: 13px; padding: 15px; border-radius: var(--radius-lg); background: var(--color-accent-soft); margin-top: 16px; }
.se-vip__ic { flex: none; width: 38px; height: 38px; border-radius: var(--radius-md); display: grid; place-items: center; background: var(--color-bg-elevated); color: var(--color-accent-strong); }
.se-vip__main { flex: 1; min-width: 0; }
.se-vip__t { font-weight: 600; font-size: 13.5px; color: var(--color-accent-strong); display: flex; align-items: center; gap: 8px; }
.se-vip__d { margin-top: 5px; font-size: 12.5px; color: var(--color-accent-strong); line-height: 1.5; opacity: .92; }
.se-vip__ctrl { flex: none; }

/* ── SLA ───────────────────────────────────────────────────────────────────── */
.se-sla { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: var(--hairline-width) solid var(--color-border); }
.se-sla:last-child { border-bottom: none; }
.se-sla__chan { display: flex; align-items: center; gap: 11px; min-width: 0; flex: 1; }
.se-sla__label { font-weight: 500; font-size: 13.5px; }
.se-sla__client { color: var(--color-fg-subtle); font-size: 12px; margin-top: 2px; font-family: var(--font-italic); font-style: italic; }
.se-sla__inp { display: flex; align-items: center; gap: 8px; flex: none; }
.se-sla__unit { color: var(--color-fg-muted); font-size: 13px; min-width: 30px; }

/* promise «нить обещания» */
.se-promise { margin-top: 18px; padding: 16px 18px; border-radius: var(--radius-lg); border: var(--hairline-width) solid var(--color-border); background: var(--color-bg); }
.se-promise__cap { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--color-fg-subtle); margin-bottom: 14px; }

/* ── templates ─────────────────────────────────────────────────────────────── */
.se-tplbar { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
.se-catchip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: var(--radius-full); border: var(--hairline-width) solid var(--color-border); background: var(--color-bg); font-size: 12.5px; color: var(--color-fg-muted); cursor: pointer; transition: all var(--motion-duration-fast) var(--motion-ease); }
.se-catchip:hover { border-color: var(--color-border-strong); color: var(--color-fg); }
.se-catchip.is-active { background: var(--color-accent-soft); border-color: transparent; color: var(--color-accent-strong); font-weight: 500; }
.se-catchip__n { font-family: var(--font-mono); font-size: 10.5px; opacity: .7; }
.se-tpl { border: var(--hairline-width) solid var(--color-border); border-radius: var(--radius-lg); padding: 13px 15px; background: var(--color-bg); margin-bottom: 10px; cursor: pointer; transition: border-color var(--motion-duration-fast), box-shadow var(--motion-duration-fast), transform var(--motion-duration-fast); }
.se-tpl:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-soft); transform: translateY(-1px); }
.se-tpl:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.se-tpl__head { display: flex; align-items: center; gap: 9px; }
.se-tpl__title { font-weight: 600; font-size: 13.5px; }
.se-tpl__used { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--color-fg-subtle); display: inline-flex; align-items: center; gap: 4px; }
.se-tpl__used .icon { width: 13px; height: 13px; }
.se-tpl__body { margin-top: 8px; font-size: 12.5px; color: var(--color-fg-muted); line-height: 1.6; }
.se-var { font-family: var(--font-mono); font-size: .9em; color: var(--color-accent-strong); background: var(--color-accent-soft); padding: 1px 5px; border-radius: var(--radius-xs); white-space: nowrap; }
.se-varkeys { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.se-varkeys__lab { font-size: 12px; color: var(--color-fg-subtle); margin-right: 2px; }
/* Раскрывающиеся формы (шаблоны): summary — носитель кнопки, без disclosure-маркера. */
.se-section details > summary { list-style: none; display: inline-block; cursor: pointer; }
.se-section details > summary::-webkit-details-marker { display: none; }
.se-section details > summary::marker { content: ""; }

/* ── channels ──────────────────────────────────────────────────────────────── */
.se-chan { display: flex; align-items: center; gap: 14px; padding: 15px 0; border-bottom: var(--hairline-width) solid var(--color-border); }
.se-chan:last-child { border-bottom: none; }
.se-chan__ic { width: 42px; height: 42px; border-radius: var(--radius-md); display: grid; place-items: center; flex: none; }
.se-chan__ic .icon { width: 21px; height: 21px; }
.se-chan__ic--widget { background: var(--color-accent-soft); color: var(--color-accent-strong); }
.se-chan__ic--tg { background: var(--color-info-soft); color: var(--color-info-text); }
.se-chan__ic--max { background: var(--color-warning-soft); color: var(--color-warning-text); }
.se-chan__ic--email { background: var(--color-bg-muted); color: var(--color-fg-muted); }
.se-chan__main { flex: 1; min-width: 0; }
.se-chan__name { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 9px; }
.se-chan__sub { color: var(--color-fg-subtle); font-size: 12px; margin-top: 3px; font-family: var(--font-mono); }
.se-chan__ctrl { flex: none; display: flex; align-items: center; gap: 12px; }
@media (max-width: 620px) { .se-chan { flex-wrap: wrap; } .se-chan__ctrl { width: 100%; justify-content: space-between; } }
.se-conn { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--color-fg-muted); }
.se-conn__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-success); box-shadow: 0 0 0 3px var(--color-success-soft); flex: none; }
.se-conn--off { color: var(--color-fg-subtle); }
.se-conn--off .se-conn__dot { background: var(--color-fg-subtle); box-shadow: none; }

/* 152-ФЗ consent note */
.se-consent-note { margin-top: 18px; padding: 16px; border-radius: var(--radius-lg); border: var(--hairline-width) solid var(--color-border); background: var(--color-bg-muted); }
.se-consent-note__t { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 13px; }
.se-consent-note__t .icon { width: 16px; height: 16px; color: var(--color-accent); }
.se-consent-note__d { margin: 7px 0 13px; color: var(--color-fg-subtle); font-size: 12.5px; line-height: 1.55; }
.se-consent-note__log { margin-top: 11px; display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--color-fg-subtle); flex-wrap: wrap; }
.se-consent-note__log .se-var { font-size: 11px; }

/* connect-flow steps (modal) */
.se-steps { display: flex; flex-direction: column; }
.se-step { display: flex; gap: 13px; padding: 12px 0; border-bottom: var(--hairline-width) solid var(--color-border); }
.se-step:last-child { border-bottom: none; }
.se-step__n { width: 26px; height: 26px; border-radius: 50%; background: var(--color-accent-soft); color: var(--color-accent-strong); display: grid; place-items: center; font-family: var(--font-mono); font-size: 12px; font-weight: 600; flex: none; }
.se-step__t { font-weight: 600; font-size: 13px; }
.se-step__d { color: var(--color-fg-subtle); font-size: 12px; margin-top: 3px; line-height: 1.5; }
.se-copyfield { display: flex; align-items: center; gap: 6px; margin-top: 8px; border: var(--hairline-width) solid var(--color-border); border-radius: var(--radius-md); padding: 4px 4px 4px 11px; background: var(--color-bg); }
.se-copyfield input { flex: 1; border: none; background: transparent; color: var(--color-fg); font-family: var(--font-mono); font-size: 11.5px; min-width: 0; outline: none; }

/* ── Юя ────────────────────────────────────────────────────────────────────── */
.se-master { display: flex; align-items: center; gap: 15px; padding: 17px 18px; border-radius: var(--radius-xl); background: var(--sup-ai-soft); }
.se-master__ic { width: 46px; height: 46px; border-radius: var(--radius-lg); display: grid; place-items: center; background: var(--color-bg-elevated); color: var(--sup-ai-text); flex: none; }
.se-master__ic .icon { width: 24px; height: 24px; }
.se-master__main { flex: 1; min-width: 0; }
.se-master__t { font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.se-master__d { margin-top: 5px; font-size: 12.5px; color: var(--sup-ai-text); line-height: 1.5; }
.se-master__ctrl { flex: none; }

.se-stops { display: flex; flex-wrap: wrap; gap: 8px; }
.se-stop { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: var(--radius-full); border: var(--hairline-width) solid var(--color-border); background: var(--color-bg); cursor: pointer; font-size: 12.5px; user-select: none; transition: background var(--motion-duration-fast) var(--motion-ease), color var(--motion-duration-fast), border-color var(--motion-duration-fast); }
.se-stop:hover { border-color: var(--color-border-strong); }
.se-stop input { position: absolute; opacity: 0; width: 0; height: 0; }
.se-stop__check { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--color-border-strong); display: grid; place-items: center; flex: none; transition: all var(--motion-duration-fast); }
.se-stop__check .icon { width: 11px; height: 11px; opacity: 0; color: var(--color-accent-on); }
.se-stop.is-on { background: var(--color-accent-soft); border-color: transparent; color: var(--color-accent-strong); font-weight: 500; }
.se-stop.is-on .se-stop__check { background: var(--color-accent); border-color: var(--color-accent); }
.se-stop.is-on .se-stop__check .icon { opacity: 1; }
.se-stop:focus-within { outline: 2px solid var(--color-accent); outline-offset: 2px; }
/* чекбокс-чипы (доп. стоп-темы) сами красятся от состояния input — без JS */
.se-stop:has(input:checked) { background: var(--color-accent-soft); border-color: transparent; color: var(--color-accent-strong); font-weight: 500; }
.se-stop:has(input:checked) .se-stop__check { background: var(--color-accent); border-color: var(--color-accent); }
.se-stop:has(input:checked) .se-stop__check .icon { opacity: 1; }

/* enforced laws */
.se-law { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: var(--hairline-width) solid var(--color-border); }
.se-law:last-child { border-bottom: none; }
.se-law__ic { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--color-success-soft); color: var(--color-success-text); }
.se-law__ic .icon { width: 16px; height: 16px; }
.se-law__main { flex: 1; min-width: 0; }
.se-law__t { font-weight: 500; font-size: 13px; }
.se-law__d { color: var(--color-fg-subtle); font-size: 12px; margin-top: 3px; line-height: 1.5; }
.se-law__tag { flex: none; font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-success-text); background: var(--color-success-soft); padding: 3px 7px; border-radius: var(--radius-full); display: inline-flex; align-items: center; gap: 4px; }
.se-law__tag .icon { width: 11px; height: 11px; }

/* ── message preview (client's-eye view) ───────────────────────────────────── */
.se-preview { margin-top: 13px; padding: 15px; border-radius: var(--radius-lg); background: var(--color-bg-muted); }
.se-preview__cap { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--color-fg-subtle); margin-bottom: 12px; display: flex; align-items: center; gap: 7px; }
.se-preview__cap .icon { width: 14px; height: 14px; }

/* ── day-of-week chips ─────────────────────────────────────────────────────── */
.se-days { display: flex; gap: 6px; flex-wrap: wrap; }
.se-day { position: relative; min-width: 42px; height: 38px; padding: 0 8px; border-radius: var(--radius-md); border: var(--hairline-width) solid var(--color-border); background: var(--color-bg); display: grid; place-items: center; font-size: 12.5px; cursor: pointer; user-select: none; transition: all var(--motion-duration-fast); }
.se-day:hover { border-color: var(--color-border-strong); }
.se-day input { position: absolute; opacity: 0; width: 0; height: 0; }
.se-day.is-on,
.se-day:has(input:checked) { background: var(--color-accent); color: var(--color-accent-on); border-color: transparent; font-weight: 600; }
.se-day:focus-within { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* ── add-row / footer buttons ──────────────────────────────────────────────── */
.se-addrow { display: flex; gap: 10px; padding-top: 15px; flex-wrap: wrap; }

/* ── skeleton (?loading=1) ─────────────────────────────────────────────────── */
.se-skel-h1 { height: 30px; width: 340px; max-width: 80%; }
.se-skel-lead { height: 15px; width: 480px; max-width: 90%; margin-top: 12px; }
.se-skelcard { border: var(--hairline-width) solid var(--color-border); border-radius: var(--radius-lg); padding: 16px; margin-top: 18px; background: var(--color-bg-elevated); }
.se-skelrow { display: flex; align-items: center; gap: 14px; padding: 12px 0; }
.se-skelrow > .sup-skel:first-child { flex: 1; }

/* ── print / reduced-motion ────────────────────────────────────────────────── */
@media print {
  .shell-topbar, .shell-sidebar, .shell-apprail, .sup-bottomnav, .sup-fab, .sup-toast-wrap, .se-addrow { display: none !important; }
  .se-wrap { max-width: 100%; padding: 0; }
  .se-section { break-inside: avoid; }
}
@media (prefers-reduced-motion: reduce) {
  .se-tpl:hover { transform: none; }
}

/* ============================================================================
   ═══ PAGE: rate.html + 404.html — оценка и «страница потерялась» (.rt- / .nf-) ═══
   Merged from assets/pages/rt.css by the assembler.
   ========================================================================= */

/* ============================================================================
   ═══ RATE.HTML (.rt-) — оценка из письма/мессенджера (chromeless) ═══
   One warm portrait card: «Аня помогла тебе с обращением про разбор — как всё
   прошло?» → 5 signature smileys (.sup-csat core) → optional comment →
   result. score≤2 = service recovery (Вера, старшая смены; тред НЕ
   закрывается), score≥4 = quiet celebration («Передадим Ане»).
   Depends on: essence.css (tokens+components), support.css (.sup-* core).
   NO shell.css — the page opens from an email, outside the app chrome.
   Zero raw hex — tokens + color-mix only (dark theme + personas free).
   Lift target: app/assets/stylesheets/support/_csat_page.css
   ========================================================================= */

/* ---- STAGE — full-height centred, warm breath from accent tokens ---------- */
.rt-stage {
  min-height: 100dvh; display: grid; place-items: center;
  padding: clamp(20px, 4vh, 48px) 22px;
  background:
    radial-gradient(110% 70% at 50% -12%, color-mix(in oklch, var(--color-accent) 11%, var(--color-bg)) 0%, transparent 56%),
    radial-gradient(90% 55% at 50% 114%, color-mix(in oklch, var(--color-accent-decorative) 9%, var(--color-bg)) 0%, transparent 52%),
    var(--color-bg);
}

/* floating theme toggle — the only «chrome» of a chromeless page */
.rt-theme { position: fixed; top: 16px; right: 16px; z-index: var(--z-sticky); }

.rt-shell { width: 100%; max-width: 560px; display: flex; flex-direction: column;
            align-items: center; gap: 20px;
            animation: rt-in var(--motion-duration-slow) var(--ease-spring); }
@keyframes rt-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---- BRAND «Суть ✕ Помощь» (chromeless echo of .shell-topbar__brand) ------ */
.rt-brand { display: inline-flex; align-items: center; gap: 10px; }
.rt-brand__mark { width: 32px; height: 32px; border-radius: 10px; color: var(--color-accent-on);
  background: radial-gradient(circle at 30% 28%, var(--color-accent-decorative), var(--color-accent-strong));
  display: grid; place-items: center; box-shadow: var(--shadow-soft); }
.rt-brand__mark .icon { width: 17px; height: 17px; stroke-width: 1.7; }
.rt-brand__wm { font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: -.01em; }
.rt-brand__x { font-family: var(--font-italic); font-style: italic; color: var(--color-accent-decorative); margin: 0 2px; }
.rt-brand__module { font-weight: 400; color: var(--color-fg-muted); }

/* ---- CARD ------------------------------------------------------------------ */
.rt-card { position: relative; width: 100%; text-align: center; overflow: hidden;
  background: var(--color-bg-elevated); border: var(--hairline-width) solid var(--color-border);
  border-radius: var(--radius-2xl); box-shadow: var(--shadow-card);
  padding: 38px 40px 32px; }
.rt-card::before { /* faint warm shine at the top — decor only */
  content: ""; position: absolute; inset: 0 0 auto; height: 130px; pointer-events: none;
  background: radial-gradient(ellipse 70% 100% at 50% 0%,
    color-mix(in oklch, var(--color-accent) 6%, transparent), transparent 75%); }

/* step swap — soft crossfade between rate / comment / result */
.rt-step { animation: rt-step-in var(--motion-duration-base) var(--motion-ease); }
@keyframes rt-step-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---- AGENT IDENTITY (закон §1.2 — человек виден) --------------------------- */
.rt-agent { position: relative; display: flex; flex-direction: column; align-items: center; gap: 9px; }
.rt-agent__name { font-size: 13px; font-weight: 600; color: var(--color-fg); }
.rt-agent__sub { font-size: 11.5px; color: var(--color-fg-subtle); margin-top: 1px; }

/* ---- GREETING + QUESTION ---------------------------------------------------- */
.rt-hello { font-family: var(--font-italic); font-style: italic; font-size: 14.5px;
            color: var(--color-accent-strong); margin-top: 20px; }
.rt-title { font-family: var(--font-display); font-size: 23px; font-weight: 600;
            letter-spacing: -.012em; line-height: 1.34; margin: 8px auto 0; max-width: 26ch; }
.rt-title em { font-family: var(--font-italic); font-style: italic; font-weight: 500;
               color: var(--color-accent-strong); }

/* ---- CONTEXT — обращение + мини-нить заботы --------------------------------- */
.rt-ctx { margin: 22px auto 0; padding: 14px 18px 12px; max-width: 400px;
  border-radius: var(--radius-lg);
  background: color-mix(in oklch, var(--color-bg-muted) 45%, var(--color-bg-elevated));
  border: var(--hairline-width) solid var(--color-border); }
.rt-ctx__row { display: flex; align-items: center; justify-content: center; gap: 8px;
               font-size: 12px; color: var(--color-fg-muted); min-width: 0; }
.rt-ctx__row .icon { width: 13px; height: 13px; color: var(--color-fg-subtle); flex: none; }
.rt-ctx__subject { font-weight: 600; color: var(--color-fg); white-space: nowrap;
                   overflow: hidden; text-overflow: ellipsis; }
.rt-ctx__num { font-family: var(--font-mono); font-feature-settings: var(--num-tabular);
               font-size: 11px; color: var(--color-fg-subtle); white-space: nowrap; }
.rt-ctx .sup-thread { margin-top: 13px; }

/* ---- CSAT ZONE (core .sup-csat, centred; закон §1.8 «один тап») -------------
   Страница одного действия для аудитории 45+: смайлы КРУПНЕЕ ядра и подписи
   видны всегда (в треде подписи по hover — тут они и есть интерфейс). */
.rt-csat-zone { margin-top: 26px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.rt-csat-zone .sup-csat { justify-content: center; gap: 8px; }
.rt-csat-zone .sup-csat__item { width: 64px; padding: 10px 0 8px; color: var(--color-fg-muted); }
.rt-csat-zone .sup-csat__item .icon { width: 37px; height: 37px; }
.rt-csat-zone .sup-csat__cap { opacity: 1; transform: none; font-size: 10.5px; }
.rt-csat-zone .sup-csat__item:has(.sup-csat__input:checked) .icon { animation: rt-pop var(--motion-duration-base) var(--ease-pop); }
@keyframes rt-pop { 0% { transform: scale(.82); } 60% { transform: scale(1.12); } 100% { transform: none; } }
.rt-kbd-hint { display: inline-flex; align-items: center; gap: 7px;
               font-size: 11px; color: var(--color-fg-subtle); }
.rt-kbd-hint .kbd { font-size: 9.5px; padding: 1px 5px; }

/* ---- REACTION BLOCKS (comment step) ------------------------------------------ */
/* chosen score recap — small, with a way back («Изменить оценку») */
.rt-chosen { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 18px; }
.rt-chosen__face { display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 14px 0 10px; border-radius: var(--radius-full);
  background: var(--color-accent-soft); color: var(--color-accent-strong);
  font-size: 12.5px; font-weight: 600; }
.rt-chosen__face .icon { width: 20px; height: 20px; stroke-width: 1.5; }
.rt-chosen .btn--link { font-size: 12px; }

/* service recovery (score ≤ 2) — warm apology, NEVER alarm-red (тон §4) */
.rt-recovery { position: relative; text-align: left; overflow: hidden;
  padding: 18px 20px 16px 24px; border-radius: var(--radius-lg);
  background: color-mix(in oklch, var(--color-accent) 6%, var(--color-bg-elevated));
  border: var(--hairline-width) solid color-mix(in oklch, var(--color-accent) 22%, var(--color-border)); }
.rt-recovery::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
                       background: var(--sup-thread); }
.rt-recovery__lead { font-family: var(--font-italic); font-style: italic; font-size: 17px;
                     color: var(--color-accent-strong); }
.rt-recovery__text { font-size: 13px; line-height: 1.55; color: var(--color-fg); margin-top: 6px; }
.rt-recovery__who { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-top: 13px;
  border-top: var(--hairline-width) solid color-mix(in oklch, var(--color-accent) 16%, var(--color-border)); }
.rt-recovery__who-name { font-size: 12.5px; font-weight: 600; color: var(--color-fg); text-align: left; }
.rt-recovery__who-sub { font-size: 11px; color: var(--color-fg-subtle); margin-top: 1px; text-align: left; }
.rt-recovery__promise { margin-left: auto; font-family: var(--font-mono);
  font-feature-settings: var(--num-tabular); font-size: 11px; color: var(--color-fg-subtle);
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.rt-recovery__promise .icon { width: 12px; height: 12px; }

/* «тред не закрыт» — quiet reassurance line (закон §1.8) */
.rt-open-note { display: flex; align-items: flex-start; justify-content: center; gap: 7px;
                margin-top: 14px; font-size: 12px; color: var(--color-fg-muted); line-height: 1.5; }
.rt-open-note .icon { width: 13px; height: 13px; margin-top: 2px; color: var(--sup-thread); flex: none; }

/* praise line under the celebration (score ≥ 4) */
.rt-praise { font-size: 13px; color: var(--color-fg-muted); margin-top: 2px; }
.rt-praise b { color: var(--color-fg); font-weight: 600; }

/* neutral thanks (score = 3) */
.rt-neutral { font-family: var(--font-italic); font-style: italic; font-size: 16px;
              color: var(--color-accent-strong); padding: 10px 0 2px; }
.rt-neutral-sub { font-size: 13px; color: var(--color-fg-muted); margin-top: 6px; }

/* ---- COMMENT FORM — опциональный второй шаг ----------------------------------- */
.rt-form { margin-top: 20px; text-align: left; display: flex; flex-direction: column; gap: 7px; }
.rt-form .textarea { min-height: 96px; font-size: 13.5px; }
.rt-form__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rt-form__hint { font-size: 11.5px; color: var(--color-fg-subtle); }
.rt-count { font-family: var(--font-mono); font-feature-settings: var(--num-tabular);
            font-size: 10.5px; color: var(--color-fg-subtle); }
.rt-count.is-limit { color: var(--color-warning-text); font-weight: 700; }
.rt-actions { display: flex; align-items: center; justify-content: center; gap: 10px;
              margin-top: 20px; flex-wrap: wrap; }

/* send error (?error=1) — honest async-fail state, role="alert" */
.rt-error { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px;
  padding: 12px 14px; border-radius: var(--radius-md); text-align: left;
  background: var(--color-danger-soft); color: var(--color-danger-text); font-size: 12.5px; line-height: 1.5; }
.rt-error .icon { width: 15px; height: 15px; flex: none; margin-top: 1px; }
.rt-error__retry { margin-left: auto; flex: none; font-weight: 700; font-size: 12px;
  color: var(--color-danger-text); text-decoration: underline; text-underline-offset: 2px;
  border-radius: var(--radius-sm); padding: 2px 6px; }
.rt-error__retry:hover { background: color-mix(in oklch, var(--color-danger) 12%, transparent); }

/* ---- RESULT STEP ---------------------------------------------------------------- */
/* «медаль» — выбранный смайл (или галочка) в тёплом круге над итогом */
.rt-medal { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  background: var(--color-accent-soft); color: var(--color-accent-strong); margin-bottom: 6px;
  box-shadow: 0 0 0 7px color-mix(in oklch, var(--color-accent) 7%, transparent);
  animation: rt-pop var(--motion-duration-slow) var(--ease-pop); }
.rt-medal .icon { width: 34px; height: 34px; stroke-width: 1.4; }
.rt-result-lead { font-family: var(--font-italic); font-style: italic; font-size: 18px;
                  color: var(--color-accent-strong); }
.rt-result-text { font-size: 13.5px; line-height: 1.6; color: var(--color-fg-muted);
                  max-width: 40ch; margin: 10px auto 0; }
.rt-result-text b { color: var(--color-fg); font-weight: 600; }
.rt-result .sup-labor { text-align: left; max-width: 400px; margin: 20px auto 0; }
.rt-result .sup-celebrate { padding-top: 6px; }
/* сияние ядра на широкой карточке растягивается в грязную полосу —
   на этой странице тепло дают медаль и Lora, сияние глушим на обоих шагах */
.rt-card .sup-celebrate::before { display: none; }
/* и верхний свет карточки: на плотных шагах он за контентом, на разреженном
   итоге его нижний край читается «грязной кромкой» под медалью */
.rt-result.rt-card::before { display: none; }
.rt-return { margin-top: 24px; }
/* «мы на связи» — copy-able support email under the result */
.rt-mail { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px;
           font-size: 11.5px; color: var(--color-fg-subtle); }
.rt-mail code { font-family: var(--font-mono); font-size: 11px; color: var(--color-fg-muted); }
.rt-mail__copy { display: inline-grid; place-items: center; width: 26px; height: 26px;
  border-radius: var(--radius-sm); color: var(--color-fg-subtle);
  transition: background var(--motion-duration-fast) var(--motion-ease), color var(--motion-duration-fast) var(--motion-ease); }
.rt-mail__copy:hover { background: var(--color-bg-muted); color: var(--color-fg); }
.rt-mail__copy .icon { width: 13px; height: 13px; }

/* ---- FOOT — quiet privacy line under the card ------------------------------------ */
.rt-foot { text-align: center; font-size: 11.5px; color: var(--color-fg-subtle);
           line-height: 1.65; max-width: 420px; }
.rt-foot a { color: var(--color-fg-muted); text-decoration: underline; text-underline-offset: 2px; }
.rt-foot a:hover { color: var(--color-accent-strong); }

/* ============================================================================
   ═══ 404.HTML (.nf-) — «Страница потерялась» (chromeless, поэтичная) ═══
   Lora-голос, поиск по помощи (KB live-suggest, мягкий deflection §1.5),
   CTA «Напиши нам — найдём вместе» → client.html?view=new, мини-нить как
   декор-нарратив: Страница потерялась ● Ты здесь ● Найдём вместе.
   Lift target: app/views/errors/not_found.html.erb (+ support/_404.css)
   ========================================================================= */

.nf-stage {
  min-height: 100dvh; display: grid; place-items: center;
  padding: clamp(20px, 5vh, 48px) 22px;
  background:
    radial-gradient(110% 72% at 50% -14%, color-mix(in oklch, var(--color-accent) 12%, var(--color-bg)) 0%, transparent 56%),
    radial-gradient(90% 55% at 50% 115%, color-mix(in oklch, var(--color-accent-decorative) 10%, var(--color-bg)) 0%, transparent 52%),
    var(--color-bg);
}
.nf-theme { position: fixed; top: 16px; right: 16px; z-index: var(--z-sticky); }

.nf-card { width: 100%; max-width: 640px; text-align: center;
           animation: nf-in var(--motion-duration-slow) var(--ease-spring); }
@keyframes nf-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* brand (same chromeless echo as rate) */
.nf-brand { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.nf-brand__mark { width: 32px; height: 32px; border-radius: 10px; color: var(--color-accent-on);
  background: radial-gradient(circle at 30% 28%, var(--color-accent-decorative), var(--color-accent-strong));
  display: grid; place-items: center; box-shadow: var(--shadow-soft); }
.nf-brand__mark .icon { width: 17px; height: 17px; stroke-width: 1.7; }
.nf-brand__wm { font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: -.01em; }
.nf-brand__x { font-family: var(--font-italic); font-style: italic; color: var(--color-accent-decorative); margin: 0 2px; }
.nf-brand__module { font-weight: 400; color: var(--color-fg-muted); }

/* hero number — warm, glowing, tabular */
.nf-404 { font-family: var(--font-display); font-weight: 600; line-height: .95;
  letter-spacing: -.05em; font-size: clamp(92px, 17vh, 148px);
  color: var(--color-accent-strong); font-feature-settings: var(--num-tabular);
  text-shadow: 0 22px 56px var(--accent-glow); margin-top: 10px; }

.nf-title { font-family: var(--font-italic); font-style: italic; font-weight: 500;
            font-size: clamp(24px, 4.5vw, 30px); letter-spacing: -.005em;
            color: var(--color-fg); margin-top: 10px; }
.nf-sub { font-size: 14px; line-height: 1.6; color: var(--color-fg-muted);
          max-width: 46ch; margin: 10px auto 0; }

/* ---- HELP SEARCH — live suggest over KB (мягкий deflection §1.5) ------------- */
.nf-search { position: relative; max-width: 470px; margin: 26px auto 0; text-align: left; }
.nf-search__box { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 10px 0 16px;
  border-radius: var(--radius-xl); background: var(--color-bg-elevated);
  border: var(--hairline-width) solid var(--color-border-strong); box-shadow: var(--shadow-soft);
  transition: border-color var(--motion-duration-fast) var(--motion-ease),
              box-shadow var(--motion-duration-fast) var(--motion-ease); }
.nf-search__box:focus-within { border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-accent) 16%, transparent); }
.nf-search__box > .icon { color: var(--color-fg-subtle); flex: none; }
.nf-search__input { flex: 1; min-width: 0; border: none; background: none; font-size: 14.5px; color: var(--color-fg); }
.nf-search__input::placeholder { color: var(--color-fg-subtle); }
.nf-search__kbd { font-family: var(--font-mono); font-size: 10px; color: var(--color-fg-subtle); flex: none;
  border: var(--hairline-width) solid var(--color-border-strong); border-radius: 6px; padding: 3px 7px; }
.nf-search__clear { display: none; place-items: center; width: 30px; height: 30px; flex: none;
  border-radius: var(--radius-sm); color: var(--color-fg-subtle); }
.nf-search__clear:hover { background: var(--color-bg-muted); color: var(--color-fg); }
.nf-search__clear .icon { width: 14px; height: 14px; }
.nf-search.has-value .nf-search__clear { display: grid; }
.nf-search.has-value .nf-search__kbd { display: none; }

/* suggest popover — article cards from the core */
.nf-suggest { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: var(--z-dropdown);
  display: flex; flex-direction: column; gap: 2px; padding: 6px; max-height: 350px; overflow-y: auto;
  background: var(--color-bg-elevated); border: var(--hairline-width) solid var(--color-border-strong);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-pop);
  animation: nf-pop var(--motion-duration-base) var(--ease-spring); }
@keyframes nf-pop { from { opacity: 0; transform: translateY(-4px) scale(.99); } to { opacity: 1; transform: none; } }
.nf-suggest .sup-article-card { border: none; background: transparent; box-shadow: none; padding: 10px 12px; }
.nf-suggest .sup-article-card:hover { background: var(--color-bg-muted); transform: none; }
/* компактнее, чем в хабе: сниппет в одну строку — панель не упирается в низ */
.nf-suggest .sup-article-card__snippet { -webkit-line-clamp: 1; }
.nf-suggest .sup-article-card__meta { margin-top: 3px; }
.nf-suggest__cap { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--color-fg-subtle); padding: 8px 12px 4px; }
/* empty result — не тупик: сразу дорога к людям (закон §1.5) */
.nf-suggest__empty { padding: 16px 14px 14px; text-align: center; }
.nf-suggest__empty-quote { font-family: var(--font-italic); font-style: italic; font-size: 14px;
                           color: var(--color-accent-strong); }
.nf-suggest__empty-sub { font-size: 12px; color: var(--color-fg-muted); margin-top: 4px; }
.nf-suggest__empty .btn { margin-top: 12px; }

/* ---- ACTIONS ------------------------------------------------------------------ */
.nf-actions { display: flex; align-items: center; justify-content: center; gap: 12px;
              margin-top: 26px; flex-wrap: wrap; }

/* ---- MINI CARE-THREAD — decor narrative («мы рядом» в три узелка) ------------- */
.nf-thread { max-width: 420px; margin: 36px auto 0; }
.nf-thread .sup-thread__label { font-family: var(--font-italic); font-style: italic; font-size: 11.5px; }

/* ---- FINE PRINT ----------------------------------------------------------------- */
.nf-fine { margin-top: 24px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.nf-fine__status { display: inline-flex; align-items: center; gap: 6px;
                   font-size: 11.5px; color: var(--color-fg-subtle); }
.nf-fine__status .icon { width: 12px; height: 12px; }
.nf-fine__status a { color: var(--color-fg-muted); text-decoration: underline; text-underline-offset: 2px; }
.nf-fine__status a:hover { color: var(--color-accent-strong); }

/* ============================================================================
   NO-DEBT STATES — skeleton · empty · read-only · print (бриф §6.5)
   ========================================================================= */
/* skeleton (?loading=1) — token-validation moment before the card paints;
   resolves into content (concept: ~0.6s) */
.rt-skel-card { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 10px 0 6px; }
.rt-skel-avatar { width: 48px; height: 48px; border-radius: 50%; }
.rt-skel-line { height: 13px; border-radius: var(--radius-full); }
.rt-skel-csat { display: flex; gap: 14px; margin-top: 16px; }
.rt-skel-face { width: 44px; height: 44px; border-radius: 50%; }
.nf-skel { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 30px 0; }
.nf-skel-hero { width: 220px; height: 96px; border-radius: var(--radius-lg); }
.nf-skel-search { width: min(470px, 100%); height: 52px; border-radius: var(--radius-xl); }
/* empty — на 404 «пусто» = поиск без результата (.nf-suggest__empty выше);
   на rate «read-only» = ?state=expired (оценка уже записана, CSAT скрыт) */
/* print — карточка как тихая квитанция */
@media print {
  .rt-theme, .nf-theme, .sup-toast-wrap, .rt-kbd-hint, .nf-search, .nf-actions { display: none !important; }
  .rt-stage, .nf-stage { background: none; min-height: auto; }
  .rt-card { box-shadow: none; }
}

/* ---- MOBILE ≤ 480 ---------------------------------------------------------------- */
@media (max-width: 480px) {
  .rt-card { padding: 28px 18px 24px; }
  .rt-title { font-size: 20px; }
  .rt-ctx { padding: 12px 10px 10px; }
  .rt-ctx .sup-thread__when { display: none; }
  .rt-csat-zone .sup-csat { gap: 2px; }
  .rt-csat-zone .sup-csat__item { width: 56px; }   /* 5×56+8 = 288 — влезает в 390 без h-scroll */
  .rt-csat-zone .sup-csat__item .icon { width: 33px; height: 33px; }
  .rt-kbd-hint__keys { display: none; }            /* на таче клавиши не в тему */
  .rt-actions { flex-direction: column; align-items: stretch; }
  .rt-actions .btn { width: 100%; }
  .rt-recovery__promise { display: none; }
  .rt-form__foot { flex-wrap: wrap; }
  .nf-404 { font-size: clamp(84px, 26vw, 110px); }
  .nf-search__kbd { display: none; }               /* на таче клавиша «/» не в тему */
  .nf-actions { flex-direction: column; align-items: stretch; margin-top: 22px; }
  .nf-actions .btn { width: 100%; }
  .nf-thread .sup-thread__label { font-size: 10px; }
}

/* ---- REDUCED MOTION ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .rt-shell, .rt-step, .rt-medal, .nf-card, .nf-suggest,
  .rt-csat-zone .sup-csat__item:has(.sup-csat__input:checked) .icon { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FIX-ROUND — pixel-critique corrections (art-director pass, 06.07).
   Merged verbatim from assets/pages/*.fix.css (loaded last → same cascade
   weight). Grouped by page; tokens only, no raw hex. Core-level fixes already
   applied in the CORE section above (.sup-msg align, .shell-nav__item align,
   .sup-incident__q, .sup-chan--email, .sup-csat idle, .sup-msg__note-tag).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───── support.html (.aw-) ───── */

/* [P1a] Страховка от горизонтального скролла документа на мобиле.
   .sup-app / .sup-main уже overflow:hidden — это добивает уровень <body>,
   чтобы FAB и нижняя навигация не уезжали за правый край при узком вьюпорте. */
.aw-body { overflow-x: hidden; }

/* [P1b] min-width:0 по flex-цепочкам — контент ужимается вместо распора
   вьюпорта (шапка карточки уже имеет min-width:0 на idbox/main; добавляем
   тулбар-пилюли и композер, чтобы ничего не держало ширину ~420px). */
.aw-toolbar { min-width: 0; }
.aw-toolbar__pills { min-width: 0; }
.aw-composer__inner,
.aw-composer__bar,
.aw-composer__field { min-width: 0; }

/* [P2] Лента диалога прижата к НИЗУ — нет пустой дыры над композером при
   1–2 сообщениях. Через margin-top:auto на первом элементе (НЕ
   justify-content:flex-end): flex-end ломает скролл длинных тредов —
   контент, вылезший за ВЕРХНИЙ край, становится недостижим (scrollHeight
   схлопывается до clientHeight, первые сообщения не проскроллить). При
   margin-top:auto короткий тред прижат к низу, а длинный — с полноценным
   скроллом вверх; d.scrollTop=d.scrollHeight (renderDialog) так же
   показывает низ при открытии. Верифицировано CDP на t-4812 (long) и
   t-4809 (short): firstReachable=true, pinnedBottom=true. */
.aw-dialog > *:first-child { margin-top: auto; }

/* [P2] Empty-state центрируется по вертикали: делаем список flex-колонкой,
   тогда .aw-empty-wrap{flex:1} (уже в support.css) растягивается и центрирует.
   На заполненном списке ряды/группы/стики-bulkbar ведут себя как прежде. */
.aw-list { display: flex; flex-direction: column; }

/* Перенесённые в «…»-меню пункты (Решить/Отложить) — по умолчанию скрыты
   (десктоп держит их в шапке карточки). */
.aw-only-xs { display: none; }

/* ---------------------------------------------------------------------------
   [P1c] + [P2] МОБИЛЬНАЯ ШАПКА КАРТОЧКИ ОБРАЩЕНИЯ (≤620px)
   Кризис: 5 кнопок не влезают → «Закрыть» уезжает за край, обращение
   не закрыть. Оставляем всегда видимыми ×(Закрыть) и Клиент360(railToggle),
   а Решить/Отложить уносим в «…»-меню. Тач-цели icon-btn → 44×44.
   Тот же брейкпоинт 620px, что и в support.css.
   --------------------------------------------------------------------------- */
@media (max-width: 620px) {
  .aw-card__btns #resolveBtn,
  .aw-card__btns #snoozeBtn { display: none; }
  .aw-card__btns .icon-btn { width: 44px; height: 44px; }
  .aw-card__title { min-width: 0; }

  /* показать перенесённые действия в поповере «…» только на мобиле */
  .aw-pop__item.aw-only-xs { display: flex; }
  .aw-pop__sep.aw-only-xs { display: block; }

  /* [P1d] Модалка «Новое обращение — за клиента» влезает в 390 без среза
     справа: чуть уже поле overlay + селекты/инпуты могут ужиматься. */
  .aw-mini-overlay { padding: 12px; }
  .aw-mini .select,
  .aw-mini .input,
  .aw-mini .field { min-width: 0; }
}

/* [P1d] Ширина модалки не превышает вьюпорт (страховка к overlay-паддингу). */
.aw-mini { max-width: 100vw; }

/* ───── client.html (.cx-) ───── */

/* [P2] Короткий тред (yuia, 2 сообщения): реплики висели у верха, между
   последним пузырём и composer зияла дыра ~370px. min-height растягивает
   flex-колонку на высоту скролл-области, margin-top:auto на первом элементе
   толкает весь контент вниз к composer. На длинных тредах свободного места
   нет → auto схлопывается в 0, контент течёт сверху, скролл не ломается. */
.cx-thread__msgs { min-height: 100%; }
.cx-thread__msgs > :first-child { margin-top: auto; }

/* [nit] Ветки solved/rate: зелёная live-точка (var(--color-success)) рядом с
   «обращение решено» противоречила статусу («живой/онлайн» ≠ «решено»).
   Меняем на статичный muted-чек — спокойный маркер завершённости. */
.cx-thread__agent-sub .cx-agent-done { width: 13px; height: 13px; flex: none; color: var(--color-fg-subtle); }

/* [P2] «Позвать человека»: короткая подпись «Человек» — только на мобиле. */
.cx-callhuman__label-short { display: none; }

/* [nit] Composer async: короткая подпись — только на мобиле. */
.cx-composer__async-short { display: none; }

@media (max-width: 560px) {
  /* [P2] Флагманская кнопка закона §1.2 на мобиле: подписанная пилюля
     «Человек» с тач-целью ≥44×44, а не безымянная иконка-человечек 40×36
     (которая путалась с профилем). Длинную подпись оставляем скрытой
     (правило support.css:1410), показываем короткую. */
  .cx-thread__toprow .cx-callhuman { width: auto; min-width: 44px; height: 44px; padding: 0 12px; justify-content: center; }
  .cx-thread__toprow .cx-callhuman__label-short { display: inline; }

  /* [nit] Вместо голого колокола (support.css:1342 прячет длинную подпись) —
     короткая честная подпись «Ответ придёт в Telegram». */
  .cx-composer__async .cx-composer__async-short { display: inline; }
}

/* ───── status.html (.st-) ───── */

/* [P2] Dark-theme header: «· статус» was accent-decorative (#9A6E55) on the
   dark bg ≈3.9:1 (< AA) and diverged from the care-thread colour. Unify with
   --sup-thread: in dark = #C9A088 (~7:1, matches the thread everywhere on the
   page); in light --sup-thread === accent-decorative → no visual change. */
.st-brand__module { color: var(--sup-thread); }

@media (max-width: 700px) {
  /* [P2] Hero contact CTA «Написать нам» (.btn--sm base height 32px) was below
     the 44px touch minimum. Keep the ghost look; min-height overrides the fixed
     32px height, padding-block:0 keeps it from growing further. */
  .st-hero__actions .btn { min-height: 44px; padding-block: 0; }

  /* [P2] Subscribe block: «Подписаться в Telegram» (#tgBtn) sat at content
     auto-width (~213px) while the field + submit below are full-width (max 320),
     leaving a ragged column. Match its width to the form. */
  .st-subscribe #tgBtn { width: 100%; max-width: 320px; }

  /* [nit] Chrome controls → DoD ≥48px touch targets (were 44×44). */
  .st-back, .st-theme { width: 48px; height: 48px; }

  /* [nit] Active thread days (стежок ~2–4px wide) had a hairline tap zone.
     Expand it with a transparent, absolutely-positioned ::after that overflows
     the host — it is hit-tested as the host <button>, so the tap area grows
     without touching the stitch geometry. (.st-day is position:relative.) */
  .st-day[data-grade="part"]::after,
  .st-day[data-grade="out"]::after,
  .st-day.is-today::after { content: ""; position: absolute; inset: -8px -5px; }

  /* [nit] ?incident=1: the «Разбираемся» badge (margin-left:auto) was orphaned
     hard against the right edge once the incident head wraps on narrow screens.
     Drop the auto push so it sits with the title. */
  .st-incident .sup-incident__head .status-badge { margin-left: 0; }
}

/* ───── analytics.html (.an-) + settings.html (.se-) ───── */

/* ── analytics.html (.an-) ────────────────────────────────────────────────── */

/* [P1] Load-bars were invisible: .an-bar__track is a <span> (inline) → height:7px
   ignored, so the gradient .an-bar__fill collapsed to 0. Blockify the track. */
.an-bar__track { display: block; }

/* [P2] Bucket meta (clock icon + median) broke onto 2 lines because the global
   img,svg{display:block} pushed the icon out of the inline flow. Flex it back. */
.an-bar__meta { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; }

/* [P2] «Каналы и скорость» stretched to the heatmap's height (default stretch)
   → ~100px empty interior. Let each panel take its own content height. */
.an-grid { align-items: start; }

/* ── settings.html (.se-) ─────────────────────────────────────────────────── */

/* [P2] Role dot «Агент» was blue (var(--color-info)) — blue is reserved (§3).
   admin=accent, viewer=fg-subtle stay untouched. */
.se-role__dot--agent { background: var(--color-success); }

/* [P2] Hero «нить заботы»: 0.5px hairline fading into transparency was almost
   invisible. Make it a connected 1px thread (55% rose-gold, no fade-out). */
.se-thread-deco__seg { height: 1px; background: color-mix(in oklch, var(--sup-thread) 55%, transparent); }

/* [P2] Mobile (?sec=sla): the «Путь обещания» thread cramped 4 horizontal stages
   → «Решено — проверь» truncated to «прове…». On ≤620px lay the signature thread
   out vertically (same mechanism as the design-system .sup-thread--vertical). */
@media (max-width: 620px) {
  .se-promise-thread { flex-direction: column; align-items: stretch; }
  .se-promise-thread .sup-thread__stage { flex-direction: row; align-items: center; gap: 10px; text-align: left; padding: 7px 0; }
  .se-promise-thread .sup-thread__stage::before {
    top: auto; bottom: calc(50% + var(--sup-knot)); left: calc(var(--sup-knot) / 2); right: auto;
    width: var(--hairline-width); height: calc(100% - var(--sup-knot) - 6px); transform: translateX(-50%);
  }
  .se-promise-thread .sup-thread__label { font-size: 12.5px; white-space: normal; overflow: visible; text-overflow: clip; }
}

/* ───── rate.html (.rt-) + 404.html (.nf-) ───── */

/* [P2] Мобилка (390): главные CTA — тач-таргет ≥48px.
   .btn--lg = 44px < DoD 48. rate: .rt-actions / .rt-return, 404: .nf-actions.
   Брейкпоинт тот же, что уже в support.css (@media max-width:480px).
   min-height (не height) — гарантирует ≥48 и не клипает, если ярлык переносится. */
@media (max-width: 480px) {
  .rt-actions .btn,
  .rt-return .btn,
  .nf-actions .btn { min-height: 48px; }
}

/* [nit] Переключатель темы — icon-тоггл (.btn--icon.btn--ghost) вместо голого «Тема».
   Цвет fg-muted→hover fg даёт сам .btn--ghost (иконка наследует currentColor);
   здесь только размер иконки 18px — по образцу продуктового shared--theme-toggle. */
.rt-theme .icon,
.nf-theme .icon { width: 18px; height: 18px; }

/* [nit] 404 мини-нить: коннектор К активному узлу «Ты здесь» — сплошной rose-gold.
   Узел is-active (без is-done), а солид-коннектор в ядре ждёт .is-done::before →
   сегмент оставался бледным hairline. Скоуп .nf-thread не задевает нить rate.html
   (там активный узел ещё и is-done, коннектор уже сплошной).
   Правый сегмент («Найдём вместе») НЕ трогаем — остаётся hairline. */
.nf-thread .sup-thread__stage.is-active::before {
  background: var(--sup-thread);
  height: 1px;
}

/* ── Настройки ТП: утилиты, вынесенные из inline-стилей (гейты 60/202) ──────────
   Один-в-один переносы `style="…"` из app/views/support/settings/*.erb — значения
   не менялись. Секция стоит В КОНЦЕ файла намеренно: все базовые классы (.se-row,
   .se-wrap, .se-tpl, .se-stop) объявлены выше, а глобальные .field/.select/.toggle/
   .card — в _components.css, который импортируется РАНЬШЕ support/_support.css.
   При равной специфичности (0,1,0) выигрывает последнее правило — ровно тот же
   результат, что давал inline-атрибут, включая @media-блоки .se-wrap. */

/* Блок-заголовок и подзаголовок: срез верхней отбивки внутри карточки / доводка. */
.se-blockhead--flush { margin-top: 0; }
.se-section__sub--flush { margin-top: 0; }
.se-section__sub--pending { display: flex; align-items: center; gap: 6px; margin-top: -8px; color: var(--color-fg-muted); }
.se-section__sub--pending .icon { width: 14px; height: 14px; flex: none; opacity: .7; }
.se-section__sub--note { margin-top: 8px; }
.se-section__sub--gap { margin-top: 12px; }

/* Строки настроек: первая/последняя без внешнего padding, отбивки и разделитель. */
.se-row--flush-top { padding-top: 0; }
.se-row--flush-bottom { padding-bottom: 0; }
.se-row--spaced { margin-top: 20px; }
.se-row--divided { border-top: var(--hairline-width) solid var(--color-border); margin-top: 14px; padding-bottom: 0; }
.se-row__label--chan { display: flex; align-items: center; gap: 9px; }
.se-row__label--regular { font-weight: 400; }

/* Футер секции: единственная кнопка Save прижата вправо. */
.se-addrow--end { justify-content: flex-end; }

/* Read-only чип/карточка — не кликабельны, курсор обычный. */
.se-stop--static { cursor: default; }
.se-tpl--static { cursor: default; }
.se-tpl__actions { display: flex; gap: 8px; margin-top: 11px; flex-wrap: wrap; }

/* Правило маршрутизации: шапка карточки и поля формы. */
.se-rulehead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.se-rulefields { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; }

/* Нативный <details> «добавить / править». --tight объявлен ПОСЛЕ базы: на
   элементе стоят оба класса, выигрывает модификатор. */
.se-disclosure { margin-top: 14px; }
.se-disclosure--tight { margin-top: 10px; }
.se-disclosure__body { margin-top: 12px; }
.se-disclosure__card { margin-top: 12px; background: var(--color-bg-muted); }

/* Точечное сужение глобальных .field / .select / .toggle — паттерн .se-input-sm. */
.se-field-mb12 { margin-bottom: 12px; }
.se-field-mb10 { margin-bottom: 10px; }
.se-field-mt4 { margin-top: 4px; }
.se-field-flush { margin: 0; }
.se-field-grow { margin: 0; flex: 1; min-width: 150px; }
.se-select-w130 { width: 130px; }
.se-select-w160 { width: 160px; }
.se-select-w230 { width: 230px; }
.se-select-w250 { width: 250px; }
.se-toggle-tight { margin-bottom: 2px; }
.se-toggle-text { font-size: 13px; margin-left: 9px; }

/* Список переменных над textarea шаблона. */
.se-varkeys--tight { margin: 2px 0 8px; }

/* Роль текущего пользователя в строке участника — по верху строки. */
.se-role__code--flush { margin-top: 0; }

/* Контент-колонка страницы настроек: внешние отступы даёт .container из layout. */
.se-wrap--settings { max-width: 840px; margin: 0; padding: 0 0 60px; }