/* Huginn dock — TG iOS pixel chrome (ATLAS). Gold ONLY on rail chrome. */

:root {
  --hg-rail-w: 56px;
  --hg-panel-w: 400px;

  /* Liquid Glass F1–F5 TARGET (HUGINN-LIQUID-GLASS-TOKENS hg_token_diff_proposal) */
  --hg-tg-tool-size: 40px;
  --hg-tg-tool-bg: var(--bg3, #1C2130); /* fill via .hg-glass composer */
  --hg-tg-input-h: 40px;
  --hg-tg-input-radius: 20px;
  --hg-tg-input-bg: var(--bg3, #1C2130); /* fill via .hg-glass composer */
  --hg-tg-composer-gap: 6px;
  --hg-tg-composer-pad: 4px 8px 0;
  --hg-tg-composer-bar-bg: color-mix(in srgb, var(--bg2, #151922) 18%, transparent);
  --hg-tg-composer-blur: 72px;
  --hg-tg-nav-inset: 12px;
  --hg-tg-nav-h: 64px;
  --hg-tg-nav-radius: 32px;
  --hg-tg-nav-bg: color-mix(in srgb, var(--bg3, #1C2130) 90%, transparent); /* fill via .hg-glass nav */
  --hg-tg-nav-blur: 40px;
  --hg-tg-fab-size: 64px;
  --hg-tg-fab-gap: 8px;
  --hg-tg-fab-bg: color-mix(in srgb, var(--bg3, #1C2130) 90%, transparent);
  /* Active tab = charcoal selection disc (DS: bg3 92% + t1) */
  --hg-tg-active-circle: color-mix(in srgb, var(--bg3, #1C2130) 92%, var(--t1, #fff));
  --hg-tg-badge: var(--red, #FF3B30);
  --hg-tg-nav-icon-active: var(--blue-l, #4A90D9);
  --hg-tg-nav-muted: color-mix(in srgb, var(--t1, #fff) 88%, transparent);
  --hg-tg-header-inset: 16px;
  --hg-tg-header-radius: 22px;
  --hg-tg-header-h: 44px;
  --hg-tg-header-bg: rgba(22, 19, 20, 0.48);
  --hg-tg-header-blur: 36px;
  --hg-tg-pin-h: 48px;
  --hg-tg-pin-radius: 20px;
  --hg-tg-pin-bg: rgba(29, 27, 28, 0.72);
  --hg-tg-pin-gap: 8px;
  --hg-tg-back-badge-bg: #FFFFFF;
  --hg-tg-back-badge-fg: #000000;
  --hg-tg-bubble-radius: 17px;
  --hg-tg-bubble-tail-radius: 7px;
  /* DS §5.5: mixes against --bg3 (not transparent) so dark theme stops looking dirty */
  --hg-tg-bubble-them: color-mix(in srgb, var(--bg3, #2C2C2E) 92%, transparent);
  --hg-tg-bubble-me: color-mix(in srgb, var(--blue-l, #5B8DEF) 72%, var(--bg3, #2C2C2E));
  --hg-tg-av-msg: 32px;
  --hg-tg-row-h: 72px;
  --hg-tg-contact-row-h: 53px;

  /* CRM dark — match main content canvas (bg2 #151922), not pure black bg1 */
  --hg-bg: var(--bg2, #151922);
  --hg-thread-bg: var(--bg2, #151922);
  --hg-panel: var(--bg2, #151922);
  --hg-elev: var(--bg3, #1C2130);
  --hg-surface: var(--bg3, #1C2130);
  --hg-input-bg: var(--bg3, #1C2130);
  --hg-composer-bg: transparent;
  --hg-bubble-them: var(--hg-tg-bubble-them);
  --hg-bubble-me: var(--hg-tg-bubble-me);
  --hg-text: var(--t1, #FFFFFF);
  --hg-muted: var(--t2, #8E8E93);
  --hg-faint: var(--t3, #8E8E93);
  --hg-border: var(--brd-m, rgba(255, 255, 255, 0.08));
  --hg-sep: var(--brd-m, rgba(84, 84, 88, 0.45));
  --hg-accent-chat: var(--blue-l, #4A90D9);
  --hg-badge: var(--hg-tg-badge);
  --hg-badge-muted: var(--t3, #8E8E93);
  --hg-accent: var(--gold, #D4A843); /* rail chrome ONLY */
  --hg-danger: var(--red, #FF453A);
  --hg-online: var(--green, #4ADE80);
  --hg-meta-in-bubble: rgba(255, 255, 255, 0.55);
  --hg-ticks-read: var(--blue-l, #5288C1);
  --hg-ticks-dim: rgba(255, 255, 255, 0.55);

  --hg-radius-bubble: var(--hg-tg-bubble-radius);
  --hg-row-h: var(--hg-tg-row-h);
  --hg-av-msg: var(--hg-tg-av-msg);
  --hg-radius-panel: 16px;
  --hg-radius-popup: 12px;
  --hg-radius-pill: 999px;
  --hg-radius: 10px;
  --hg-radius-input: 20px;

  /* Liquid Glass F0 — one material + role vars (DS HUGINN-LIQUID-GLASS) */
  --hg-side-inset: 16px;
  --hg-glass-fill-pct: 58%;
  --hg-glass-blur: 40px;
  --hg-glass-rim-pct: 16%;
  --hg-glass-radius: 20px;
  --hg-glass-sat: 200%;
  /* Compat aliases (ROUND-7 selectors) — derived from role vars */
  --hg-glass-bg: color-mix(in srgb, var(--bg3, #1C2130) var(--hg-glass-fill-pct), transparent);
  --hg-glass-bg-strong: color-mix(in srgb, var(--bg3, #1C2130) 88%, transparent);
  --hg-glass-border: color-mix(in srgb, var(--t1, #fff) var(--hg-glass-rim-pct), transparent);
  --hg-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
  --hg-fx: full;

  --hg-pad-bubble: 10px 16px;
  --hg-pad-panel: 12px 16px;
  --hg-pad-menu-item: 10px 12px;
  --hg-head-h: 56px;
  --hg-av-list: 60px;
  --hg-av-head: 36px;
  --hg-av-contact: 48px;
  --hg-msg-indent: 40px;

  --hg-blur-float: 24px;
  --hg-blur-menu: 16px;
  --hg-blur-sticky: 20px;
  --hg-gap-msg-group: 2px;
  --hg-gap-msg-between: 8px;

  --hg-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, sans-serif;
  --hg-font-meta: 11px/1.2;
  --hg-font-name: 17px/1.25;
  --hg-font-preview: 15px/1.35;
  --hg-font-body: 17px/1.4;
  --hg-font-title: 17px/1.3;
  --hg-font-status: 12px/1.3;
  --hg-font-screen: 18px/1.2;

  --hg-ease-ui: cubic-bezier(0.4, 0, 0.2, 1);
  --hg-ease: var(--hg-ease-ui);
  --hg-dur-hover: 100ms;
  --hg-dur-menu: 150ms;
  --hg-dur-bubble: 200ms;
  --hg-dur-tab: 200ms;
  --hg-dur-react: 300ms;

  --hg-hover: var(--bg-hover, var(--bg3, rgba(255, 255, 255, 0.04)));
  --hg-press: rgba(255, 255, 255, 0.06);
  /* ── Depth & Juice (DS §11) — «сочность» на CRM-токенах, без TG-hex ── */
  /* Elevation: нейтральные тени для поверхностей… */
  --hg-elev-1: 0 1px 2px rgba(0, 0, 0, 0.22);
  --hg-elev-2: 0 4px 12px rgba(0, 0, 0, 0.26), 0 1px 3px rgba(0, 0, 0, 0.18);
  --hg-elev-3: 0 10px 30px rgba(0, 0, 0, 0.34), 0 2px 8px rgba(0, 0, 0, 0.2);
  --hg-elev-4: 0 18px 48px rgba(0, 0, 0, 0.42), 0 4px 14px rgba(0, 0, 0, 0.24);
  /* …и ЦВЕТНАЯ акцентная тень для CTA/активных элементов (от --blue-l). */
  --hg-glow-accent: 0 4px 14px color-mix(in srgb, var(--blue-l, #4A90D9) 40%, transparent);
  --hg-glow-accent-soft: 0 2px 10px color-mix(in srgb, var(--blue-l, #4A90D9) 26%, transparent);
  --hg-focus-ring: 0 0 0 2px var(--blue-l, #4A90D9);
  --hg-focus-glow: 0 0 0 3px color-mix(in srgb, var(--blue-l, #4A90D9) 22%, transparent);
  /* Градиенты поверхностей (объём из color-mix, не hex). */
  --hg-grad-surface: linear-gradient(180deg,
    color-mix(in srgb, var(--t1, #fff) 5%, transparent) 0%,
    transparent 55%);
  --hg-grad-accent: linear-gradient(180deg,
    color-mix(in srgb, var(--blue-l, #4A90D9) 92%, #fff) 0%,
    var(--blue-l, #4A90D9) 100%);
  --hg-rim-specular: inset 0 0.5px 0 color-mix(in srgb, var(--t1, #fff) 22%, transparent);
  --hg-inset-hairline: inset 0 0 0 1px color-mix(in srgb, var(--t1, #fff) 12%, transparent);
  /* Токены канона DS §11.3/§11.4 (использовались в доке с fallback — теперь определены). */
  --hg-glass-specular-pct: 22%;
  --hg-ripple-x: 50%;
  --hg-ripple-y: 50%;
  --hg-segment-offset: 0;
  /* Motion (единый ритм интерактива). */
  --hg-dur-fast: 140ms;
  --hg-dur-mid: 200ms;
  --hg-dur-slow: 300ms;
  --hg-ease-std: cubic-bezier(0.4, 0, 0.2, 1);
  --hg-ease-spring: cubic-bezier(0.34, 1.36, 0.64, 1);
  /* Алиасы имён из DS §11.1/§11.4 (канон) — чтобы документ и код совпадали. */
  --hg-elev-0: none;
  --hg-elev-accent: var(--hg-glow-accent);
  --hg-elev-accent-active: 0 2px 8px color-mix(in srgb, var(--blue-l, #4A90D9) 32%, transparent);
  --hg-dur-press: 90ms;
  --hg-dur-base: 180ms;
  --hg-ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --hg-ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);
  --hg-ease-exit: cubic-bezier(0.4, 0, 1, 1);
  /* List active: CRM charcoal/blue edge — gold ONLY on rail (DS §9.9) */
  --hg-active-row: color-mix(in srgb, var(--bg3, #1C2130) 88%, var(--t1, #fff));
  --hg-active-edge: var(--blue-l, #4A90D9);
  --hg-sticky-bg: color-mix(in srgb, var(--bg2, #151922) 92%, transparent);
  --hg-nav-bg: color-mix(in srgb, var(--bg3, #1C2130) 88%, transparent);
  --hg-quick-bg: var(--bg3, #1C2130);
  --hg-date-pill-bg: rgba(0, 0, 0, 0.3);
  --hg-date-pill-fg: #FFFFFF;
  --hg-reply-bg: rgba(255, 255, 255, 0.04);
  --hg-reply-fg: rgba(255, 255, 255, 0.7);
}

/* Single glass primitive — colours from CRM; geometry/fill per data-role */
.hg-glass {
  background: color-mix(in srgb, var(--bg3, #1C2130) var(--hg-glass-fill-pct), transparent);
  -webkit-backdrop-filter: blur(var(--hg-glass-blur)) saturate(var(--hg-glass-sat));
          backdrop-filter: blur(var(--hg-glass-blur)) saturate(var(--hg-glass-sat));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t1, #fff) var(--hg-glass-rim-pct), transparent);
  border-radius: var(--hg-glass-radius);
  border: 0;
  transform: none; /* transforms kill backdrop-filter sampling */
}
/* Specular top highlight — the «expensive glass» cue (composer/nav/fab/menu/header). */
.hg-glass[data-role="composer"],
.hg-glass[data-role="nav"],
.hg-glass[data-role="fab"],
.hg-glass[data-role="header"],
.hg-glass[data-role="menu"],
.hg-glass[data-role="pin"] {
  box-shadow:
    inset 0 0.5px 0 color-mix(in srgb, var(--t1, #fff) var(--hg-glass-specular-pct, 22%), transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--t1, #fff) var(--hg-glass-rim-pct), transparent);
}
.hg-glass[data-role="composer"] {
  --hg-glass-fill-pct: 65%;
  --hg-glass-blur: 20px;
  --hg-glass-rim-pct: 11%;
  --hg-glass-radius: 20px;
  --hg-glass-sat: 180%;
}
.hg-glass[data-role="nav"] {
  /* E4: по канону HUGINN-LIQUID-GLASS-TOKENS (roles.nav: 82/40/12). */
  --hg-glass-fill-pct: 82%;
  --hg-glass-blur: 40px;
  --hg-glass-rim-pct: 12%;
  --hg-glass-radius: 32px;
  --hg-glass-sat: 220%;
}
.hg-glass[data-role="fab"] {
  --hg-glass-fill-pct: 82%;
  --hg-glass-blur: 40px;
  --hg-glass-rim-pct: 12%;
  --hg-glass-radius: 50%;
  --hg-glass-sat: 220%;
}
.hg-glass[data-role="edit-action"] {
  --hg-glass-fill-pct: 55%;
  --hg-glass-blur: 40px;
  --hg-glass-rim-pct: 14%;
  --hg-glass-radius: 32px;
  --hg-glass-sat: 200%;
}
.hg-glass[data-role="header"] {
  --hg-glass-fill-pct: 48%;
  --hg-glass-blur: 32px;
  --hg-glass-rim-pct: 10%;
  --hg-glass-radius: 22px;
  --hg-glass-sat: 160%;
}
.hg-glass[data-role="pin"] {
  --hg-glass-fill-pct: 72%;
  --hg-glass-blur: 20px;
  --hg-glass-rim-pct: 8%;
  --hg-glass-radius: 20px;
  --hg-glass-sat: 160%;
}
.hg-glass[data-role="menu"] {
  --hg-glass-fill-pct: 80%;
  --hg-glass-blur: 32px;
  --hg-glass-rim-pct: 10%;
  --hg-glass-radius: 18px;
  --hg-glass-sat: 180%;
}
.hg-glass[data-role="card"] {
  --hg-glass-fill-pct: 100%;
  --hg-glass-blur: 0px;
  --hg-glass-rim-pct: 0%;
  --hg-glass-radius: 26px;
  --hg-glass-sat: 100%;
  background: var(--bg3, #1C2130);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  box-shadow: none;
  border: 0;
  border-bottom: 0.5px solid var(--brd-m, rgba(255, 255, 255, 0.08));
}
.hg-glass[data-role="segment"] {
  --hg-glass-fill-pct: 55%;
  --hg-glass-blur: 16px;
  --hg-glass-rim-pct: 10%;
  --hg-glass-radius: 20px;
  --hg-glass-sat: 160%;
}
.hg-glass[data-role="media-chrome"] {
  --hg-glass-fill-pct: 70%;
  --hg-glass-blur: 28px;
  --hg-glass-rim-pct: 10%;
  --hg-glass-radius: 16px;
  --hg-glass-sat: 180%;
}

html[data-theme="light"] {
  --hg-tg-tool-bg: rgba(255, 255, 255, 0.72);
  --hg-tg-input-bg: rgba(255, 255, 255, 0.78);
  --hg-tg-nav-bg: color-mix(in srgb, var(--bg2, #FDFAF5) 85%, transparent);
  --hg-tg-fab-bg: color-mix(in srgb, var(--bg2, #FDFAF5) 90%, transparent);
  --hg-tg-header-bg: color-mix(in srgb, var(--bg2, #FDFAF5) 78%, transparent);
  --hg-tg-pin-bg: color-mix(in srgb, var(--bg3, #EDE8DC) 82%, transparent);
  --hg-tg-active-circle: color-mix(in srgb, var(--bg3, #EDE8DC) 92%, var(--t1, #1A1510));
  --hg-tg-nav-icon-active: var(--blue-l, #2B5F9E);
  --hg-tg-bubble-them: color-mix(in srgb, var(--bg3, #EDE8DC) 92%, transparent);
  --hg-tg-bubble-me: color-mix(in srgb, var(--blue-l, #2B5F9E) 72%, var(--bg3, #EDE8DC));
  /* CRM light — match main parchment/card (bg2), not cool TG #E6EBEE */
  --hg-bg: var(--bg2, #FDFAF5);
  --hg-thread-bg: var(--bg2, #FDFAF5);
  --hg-panel: var(--bg2, #FDFAF5);
  --hg-elev: var(--bg3, #EDE8DC);
  --hg-surface: var(--bg2, #FDFAF5);
  --hg-input-bg: var(--bg3, #EDE8DC);
  --hg-composer-bg: transparent;
  --hg-bubble-them: var(--hg-tg-bubble-them);
  --hg-bubble-me: var(--hg-tg-bubble-me);
  --hg-text: var(--t1, #1A1510);
  --hg-muted: var(--t2, #4A5361);
  --hg-faint: var(--t3, #5F6B7A);
  --hg-border: var(--brd-m, rgba(15, 23, 42, 0.10));
  --hg-sep: var(--brd-m, rgba(15, 23, 42, 0.10));
  --hg-accent-chat: var(--blue, #1D4ED8);
  --hg-danger: var(--red, #E53935);
  --hg-online: var(--green, #31B545);
  --hg-hover: var(--bg-hover, var(--bg3, rgba(0, 0, 0, 0.04)));
  --hg-press: rgba(0, 0, 0, 0.06);
  --hg-active-row: color-mix(in srgb, var(--bg3, #EDE8DC) 85%, var(--t1, #1A1510));
  --hg-active-edge: var(--blue-l, #2B5F9E);
  --hg-sticky-bg: color-mix(in srgb, var(--bg2, #FDFAF5) 92%, transparent);
  --hg-nav-bg: color-mix(in srgb, var(--bg2, #FDFAF5) 78%, transparent);
  --hg-quick-bg: var(--bg2, #FDFAF5);
  --hg-meta-in-bubble: rgba(0, 0, 0, 0.45);
  --hg-ticks-read: #3390EC;
  --hg-ticks-dim: rgba(0, 0, 0, 0.45);
  --hg-date-pill-bg: rgba(0, 0, 0, 0.1);
  --hg-date-pill-fg: #000000;
  --hg-reply-bg: rgba(0, 0, 0, 0.04);
  --hg-reply-fg: rgba(0, 0, 0, 0.55);
  --hg-glass-fill-pct: 78%;
  --hg-glass-bg: color-mix(in srgb, var(--bg3, #EDE8DC) var(--hg-glass-fill-pct), transparent);
  --hg-glass-bg-strong: color-mix(in srgb, var(--bg2, #FDFAF5) 88%, transparent);
  --hg-glass-border: color-mix(in srgb, var(--t1, #1A1510) var(--hg-glass-rim-pct), transparent);
  --hg-glass-shadow: 0 8px 28px rgba(80, 60, 30, 0.12);
  /* Depth & Juice (light): мягкие тёплые тени на пергаменте CRM (DS §11) */
  --hg-elev-1: 0 1px 2px rgba(80, 60, 30, 0.1);
  --hg-elev-2: 0 4px 12px rgba(80, 60, 30, 0.14), 0 1px 3px rgba(80, 60, 30, 0.08);
  --hg-elev-3: 0 10px 30px rgba(80, 60, 30, 0.16), 0 2px 8px rgba(80, 60, 30, 0.1);
  --hg-elev-4: 0 18px 48px rgba(80, 60, 30, 0.2), 0 4px 14px rgba(80, 60, 30, 0.12);
  --hg-glow-accent: 0 4px 14px color-mix(in srgb, var(--blue-l, #2B5F9E) 34%, transparent);
  --hg-glow-accent-soft: 0 2px 10px color-mix(in srgb, var(--blue-l, #2B5F9E) 22%, transparent);
  --hg-grad-surface: linear-gradient(180deg,
    color-mix(in srgb, var(--t1, #1A1510) 3%, transparent) 0%,
    transparent 55%);
  --hg-grad-accent: linear-gradient(180deg,
    color-mix(in srgb, var(--blue-l, #2B5F9E) 90%, #fff) 0%,
    var(--blue-l, #2B5F9E) 100%);
  --hg-rim-specular: inset 0 0.5px 0 color-mix(in srgb, var(--t1, #1A1510) 6%, transparent);
  --hg-inset-hairline: inset 0 0 0 1px color-mix(in srgb, var(--t1, #1A1510) 8%, transparent);
  --hg-focus-ring: 0 0 0 2px var(--blue-l, #2B5F9E);
  --hg-focus-glow: 0 0 0 3px color-mix(in srgb, var(--blue-l, #2B5F9E) 18%, transparent);
  --hg-elev-accent: var(--hg-glow-accent);
}
html[data-theme="light"] .hg-glass {
  background: color-mix(in srgb, var(--bg3, #EDE8DC) var(--hg-glass-fill-pct), transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t1, #1A1510) var(--hg-glass-rim-pct), transparent);
}
html[data-theme="light"] .hg-glass[data-role="card"] {
  background: var(--bg3, #EDE8DC);
  box-shadow: none;
  border-bottom: 0.5px solid var(--brd-m, rgba(139, 120, 90, 0.14));
}

@media (max-width: 768px) {
  :root {
    --hg-head-h: 56px;
  }
}

/* ── Chrome: floating dock (desktop). Panel then rail (rail = outer right). ── */
.hg-chrome {
  position: fixed;
  top: 12px;
  right: 12px;
  bottom: 12px;
  height: auto;
  z-index: 1200;
  display: flex;
  flex-direction: row;
  pointer-events: none;
  font-family: var(--hg-font);
  color: var(--hg-text);
  border-radius: 16px;
  overflow: hidden;
  background: var(--hg-bg, var(--bg2, #151922));
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.20),
    0 12px 32px rgba(0, 0, 0, 0.28),
    0 24px 64px rgba(0, 0, 0, 0.20);
  /* CRITICAL: no transform when open — any transform kills backdrop-filter glass (nav/header) */
  transform: none;
  opacity: 1;
  transition: transform 200ms ease-out, opacity 200ms ease-out;
}
.hg-chrome.is-offscreen {
  transform: translateX(calc(100% + 12px));
  opacity: 0;
  pointer-events: none;
  transition: transform 200ms ease-in, opacity 200ms ease-in;
}
.hg-chrome * { box-sizing: border-box; }

/* Rail 56px — outer right of dock; gold chrome OK here */
.hg-rail {
  width: var(--hg-rail-w);
  height: 100%;
  background: var(--hg-bg);
  border-left: 1px solid var(--hg-border);
  border-right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 8px;
  gap: 8px;
  pointer-events: auto;
  order: 1;
  flex: 0 0 var(--hg-rail-w);
}
.hg-rail-btn {
  position: relative;
  width: 40px;
  min-height: 48px;
  border: 0;
  background: transparent;
  color: var(--hg-muted);
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font: 500 10px/1.2 var(--hg-font);
  transition: background 120ms var(--hg-ease-ui), color 120ms var(--hg-ease-ui);
}
.hg-rail-btn:hover { background: var(--hg-hover); color: var(--hg-text); }
.hg-rail-btn:focus-visible { outline: 2px solid var(--hg-accent-chat); outline-offset: 2px; }
.hg-rail-btn.is-active {
  color: var(--hg-accent-chat);
  background: color-mix(in srgb, var(--hg-accent-chat) 12%, transparent);
  transition: background 150ms var(--hg-ease-ui), color 150ms var(--hg-ease-ui);
}
.hg-rail-btn svg { width: 24px; height: 24px; stroke-width: 1.75; }
.hg-rail-badge {
  position: absolute;
  top: 2px; right: 2px;
  z-index: 2;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: var(--hg-radius-pill);
  background: var(--hg-tg-badge, var(--hg-danger, #FF3B30));
  color: #fff;
  font: 700 10px/16px var(--hg-font);
  text-align: center;
  box-shadow: 0 0 0 1.5px var(--hg-bg, #151922);
}
html[data-theme="light"] .hg-rail-badge {
  box-shadow: 0 0 0 1.5px var(--hg-bg, #FDFAF5);
}

/* PBX phone button (state from phone_ui.js via HuginnDock.setPhoneRail) */
.hg-rail-btn[hidden] { display: none; }
.hg-rail-badge[data-rail-badge="phone"],
.hg-rail-badge[data-rail-badge="huginn"] {
  background: var(--hg-tg-badge, var(--hg-danger, #FF3B30));
  color: #fff;
}
.hg-rail-dot {
  display: none;
  position: absolute;
  top: 8px; left: 6px;
  width: 8px; height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--hg-bg);
}
.hg-rail-btn[data-phone-status="online"] .hg-rail-dot { display: block; background: var(--hg-online); }
.hg-rail-btn[data-phone-status="incall"] .hg-rail-dot { display: block; background: var(--hg-accent-chat); }
.hg-rail-btn[data-phone-status="ring"] {
  color: var(--hg-accent);
  animation: hg-phone-ring 1.2s ease-in-out infinite;
}
.hg-rail-btn[data-phone-status="ring"] .hg-rail-dot { display: block; background: var(--hg-accent); }
@keyframes hg-phone-ring {
  0%, 100% { background: transparent; }
  50% { background: color-mix(in srgb, var(--hg-accent) 22%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .hg-rail-btn[data-phone-status="ring"] { animation: none; background: color-mix(in srgb, var(--hg-accent) 18%, transparent); }
}

.hg-panel {
  order: 0;
  position: relative;
  width: var(--hg-panel-w);
  height: 100%;
  background: var(--hg-panel);
  border: 0;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  transform: none;
  transition: width 0.2s var(--hg-ease-ui), opacity 150ms var(--hg-ease-ui);
  box-shadow: none;
  color: var(--hg-text);
  overflow: hidden;
}
.hg-chrome.is-collapsed .hg-panel {
  width: 0;
  min-width: 0;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  border: 0;
  box-shadow: none;
}

.hg-panel-head {
  /* Дизайн-ревью P1: шапка списка была 61px и «съедала» верх (S01: NavBar ~44).
     Компактнее + единый ритм с floating-капсулами. */
  min-height: 48px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  border-bottom: 1px solid var(--hg-border);
  background: var(--bg3, var(--hg-panel));
  flex: 0 0 auto;
}
.hg-panel-head h2 {
  margin: 0;
  font: 600 var(--hg-font-title) var(--hg-font);
  text-align: center;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hg-list-head-hybrid .hg-head-edit {
  border: 0;
  background: transparent;
  color: var(--hg-accent-chat, var(--blue, #1D4ED8));
  font: 600 15px/1 var(--hg-font);
  cursor: pointer;
  padding: 8px 4px;
  white-space: nowrap;
}
.hg-list-head-hybrid .hg-head-actions {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
/* S46 — floating edit-action island (not tabbar; not inline chips) */
.hg-list-edit-bar {
  position: fixed;
  left: var(--hg-tg-nav-inset);
  right: var(--hg-tg-nav-inset);
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  z-index: 1302;
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  gap: 0;
  height: var(--hg-tg-nav-h);
  margin: 0;
  padding: 0 10px;
  border-radius: var(--hg-tg-nav-radius);
  font: 600 15px/1.1 var(--hg-font);
  color: var(--hg-text);
  pointer-events: auto;
}
.hg-list-edit-bar .hg-edit-action {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--t1, #fff);
  font: inherit;
  cursor: pointer;
  padding: 0 6px;
  border-radius: 22px;
}
.hg-list-edit-bar .hg-edit-action:disabled {
  opacity: 0.35;
  cursor: default;
}
.hg-list-edit-bar .hg-edit-action.is-danger {
  /* REF S46: all three labels white on glass island */
  color: var(--t1, #fff);
}
body.hg-list-edit .hg-bottom-nav,
body.hg-list-edit .hg-nav-search {
  display: none !important;
}

.hg-icon-btn {
  width: 36px; height: 36px;
  border: 0;
  border-radius: var(--hg-radius-popup);
  background: transparent;
  color: var(--hg-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: color var(--hg-dur-hover) var(--hg-ease-ui), background var(--hg-dur-hover) var(--hg-ease-ui);
}
.hg-icon-btn:hover { color: var(--hg-accent-chat); background: var(--hg-hover); }
.hg-icon-btn:focus-visible { outline: 2px solid var(--hg-accent-chat); outline-offset: 2px; }
.hg-icon-btn svg { width: 20px; height: 20px; stroke-width: 1.75; }

/* Presence */
.hg-presence-wrap {
  border-bottom: 1px solid var(--hg-border);
  background: var(--hg-panel);
  display: flex;
  flex-direction: column;
}
.hg-presence-wrap[hidden] { display: none; }
.hg-presence-caption {
  padding: 8px 16px 0;
  font: 600 var(--hg-font-meta) var(--hg-font);
  color: var(--hg-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.hg-presence {
  display: flex;
  gap: 10px;
  padding: 8px 16px 10px;
  overflow-x: auto;
  scrollbar-width: none;
}
.hg-presence::-webkit-scrollbar { display: none; }
.hg-presence-item {
  flex: 0 0 auto;
  width: 56px;
  text-align: center;
  cursor: pointer;
  font: 500 var(--hg-font-meta) var(--hg-font);
  color: var(--hg-muted);
  border: 0;
  background: transparent;
  padding: 0;
}
.hg-presence-item:hover { color: var(--hg-text); }
.hg-presence-label {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 56px;
  margin: 0 auto;
}
.hg-presence-av {
  width: 40px; height: 40px;
  margin: 0 auto 4px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 12px/1 var(--hg-font);
  color: var(--hg-text);
  position: relative;
  border: 1.5px solid transparent;
}
.hg-presence-av.is-online::after {
  content: '';
  position: absolute;
  right: 0; bottom: 0;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--ok-t, #4ADE80);
  border: 2px solid var(--hg-panel);
}

/* F10 folder capsules */
.hg-folder-row {
  display: flex;
  gap: 8px;
  margin: 8px 12px 0;
  padding: 0 0 4px;
  overflow-x: auto;
  scrollbar-width: thin;
}
/* .hg-folder-cap / .hg-folder-add удалены вместе с пользовательскими папками (решение 12.10). */

/* Stories rail + birthday banners (visual wave; no geo) */
.hg-stories-rail {
  display: flex;
  gap: 12px;
  margin: 8px 0 4px;
  padding: 4px 12px 8px;
  overflow-x: auto;
  scrollbar-width: none;
  /* ТЗ Часть 5: панель прячется ПРИВЯЗАННО к позиции скролла.
     ВАЖНО (фикс лагов): скролл-драйв идёт ТОЛЬКО по compositor-свойствам
     (transform/opacity) через --hg-rail-hide. Анимация max-height на каждом
     кадре скролла вызывала layout-reflow → кружочки «прыгали» и моргали.
     Высота схлопывается один раз классом .is-hidden (см. ниже). */
  --hg-rail-hide: 0;
  height: 96px;
  opacity: calc(1 - var(--hg-rail-hide));
  transform: translateY(calc(-100% * var(--hg-rail-hide)));
  will-change: transform, opacity;
  /* Без transition на базовом состоянии: var обновляется каждый кадр скролла,
     transition «догонял» бы её → панель отставала и дёргалась.
     Переходы живут только на .is-hidden / .is-spring. */
  transition: none;
}
/* Полностью скрыта: высоту убираем ОДИН раз (не на каждый кадр скролла). */
.hg-stories-rail.is-hidden {
  height: 0;
  min-height: 0;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  transform: translateY(-100%);
  overflow: hidden;
  transition: height 140ms var(--hg-ease-std, ease), margin 140ms var(--hg-ease-std, ease),
    opacity 120ms linear, transform 120ms linear;
}
/* Пружинистое появление при «потягивании» в самом верху (overscroll, ТЗ §5.4) */
.hg-stories-rail.is-spring {
  transition: height 320ms var(--hg-ease-spring, cubic-bezier(.34,1.36,.64,1)),
    margin 320ms var(--hg-ease-spring, cubic-bezier(.34,1.36,.64,1)),
    opacity 260ms var(--hg-ease-std, ease),
    transform 320ms var(--hg-ease-spring, cubic-bezier(.34,1.36,.64,1));
}
.hg-stories-rail::-webkit-scrollbar { display: none; }
.hg-story-item {
  flex: 0 0 auto;
  width: 64px;
  border: 0;
  background: transparent;
  color: var(--hg-text);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0;
}
.hg-story-ring {
  /* Дизайн-ревью: кольцо Ø60 (S36/S01: аватар 60). */
  width: 60px; height: 60px;
  border-radius: 50%;
  padding: 2px;
  background: color-mix(in srgb, var(--hg-muted) 35%, transparent);
}
.hg-story-item.is-unread .hg-story-ring {
  background: linear-gradient(135deg, var(--blue-l, #4A90D9), color-mix(in srgb, var(--blue-l, #4A90D9) 40%, #fff));
}
/* Own story ring + brand gradient (TG-like). */
.hg-story-ring.is-mine {
  background: linear-gradient(135deg, var(--blue-l, #4A90D9), color-mix(in srgb, var(--blue-l, #4A90D9) 35%, #fff));
}
.hg-story-ring.is-add {
  background: color-mix(in srgb, var(--hg-muted) 30%, transparent);
}
/* Direct peer without a story: quiet ring, online = soft accent. */
.hg-story-ring.is-peer { background: color-mix(in srgb, var(--hg-muted) 28%, transparent); }
.hg-story-ring.is-peer.is-online { background: color-mix(in srgb, var(--ok-t, #4ADE80) 55%, transparent); }
.hg-story-av {
  width: 100%; height: 100%;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font: 600 14px/1 var(--hg-font);
  color: #fff;
  background: var(--bg3, #1C2130);
  border: 2px solid var(--bg2, #151922);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hg-story-av.is-add {
  background: color-mix(in srgb, var(--bg3, #1C2130) 80%, transparent);
  color: var(--blue-l, #4A90D9);
  font-size: 22px;
}
.hg-story-label {
  font: 500 11px/1.1 var(--hg-font);
  color: var(--hg-muted);
  max-width: 64px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hg-story-viewer {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: color-mix(in srgb, var(--bg1, #0b0e14) 92%, transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}
/* Прогресс-бары историй (ТЗ §2.6): сегменты сверху, активный заполняется. */
.hg-story-bars {
  position: absolute;
  top: calc(8px + env(safe-area-inset-top, 0px));
  left: 12px;
  right: 12px;
  display: flex;
  gap: 4px;
  z-index: 3;
}
.hg-story-bar {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--t1, #fff) 28%, transparent);
  overflow: hidden;
}
.hg-story-bar b { display: block; width: 0; height: 100%; background: #fff; border-radius: 2px; }
.hg-story-bar.is-done b { width: 100%; }
/* Тап-зоны: левая треть — назад, правая — вперёд. */
.hg-story-nav {
  position: absolute;
  top: 56px; bottom: 56px;
  width: 33%;
  z-index: 2;
  cursor: pointer;
}
.hg-story-nav-prev { left: 0; }
.hg-story-nav-next { right: 0; }
.hg-story-viewer-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 36px; height: 36px;
  border: 0; border-radius: 50%;
  background: color-mix(in srgb, var(--bg3) 70%, transparent);
  color: var(--t1, #fff);
  cursor: pointer;
}
.hg-story-viewer-meta {
  position: absolute;
  top: 16px; left: 16px;
  font: 600 15px/1.2 var(--hg-font);
  color: var(--t1, #fff);
}
.hg-story-viewer-body img,
.hg-story-viewer-body video {
  max-width: 100%;
  max-height: 70vh;
  border-radius: 16px;
}
.hg-story-viewer-text {
  font: 500 18px/1.35 var(--hg-font);
  color: var(--t1, #fff);
  text-align: center;
  padding: 24px;
}
.hg-bday-rail {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 12px 0;
}
.hg-bday-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 14px;
}
.hg-bday-av {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font: 600 12px/1 var(--hg-font);
  flex: 0 0 auto;
}
.hg-bday-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font: 500 12px/1.2 var(--hg-font);
  color: var(--hg-muted);
}
.hg-bday-meta strong {
  font: 600 13px/1.2 var(--hg-font);
  color: var(--hg-text);
}
.hg-bday-x {
  border: 0;
  background: transparent;
  color: var(--hg-muted);
  cursor: pointer;
  padding: 6px;
}
.hg-pinned-block {
  margin: 0 0 4px;
  padding: 6px 0 2px;
  background: color-mix(in srgb, var(--bg3, #1C2130) 55%, transparent);
  border-radius: 12px;
}
.hg-pinned-label {
  padding: 4px 16px 6px;
  font: 600 12px/1.2 var(--hg-font);
  color: var(--hg-muted);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.hg-list-sep {
  height: 8px;
}
.hg-chat-row.is-edit {
  grid-template-columns: 28px var(--hg-av-list) 1fr auto;
  padding-left: 8px;
}
.hg-chat-row.is-edit .hg-chat-check {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: center;
}
.hg-chat-row.is-edit .hg-chat-av { grid-column: 2; }
.hg-chat-row.is-edit .hg-chat-name,
.hg-chat-row.is-edit .hg-chat-prev { grid-column: 3; }
.hg-chat-row.is-edit .hg-chat-time,
.hg-chat-row.is-edit .hg-badge { grid-column: 4; }
.hg-chat-check {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid var(--hg-muted);
  box-sizing: border-box;
}
.hg-chat-check.is-on {
  background: var(--blue-l, #4A90D9);
  border-color: var(--blue-l, #4A90D9);
  box-shadow: inset 0 0 0 3px var(--bg2, #151922);
}
.hg-chat-row.is-selected {
  background: color-mix(in srgb, var(--blue-l, #4A90D9) 12%, transparent);
}
.hg-composer-left {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.hg-ai-btn {
  position: relative;
  width: 36px; height: 36px;
  border-radius: 50%;
}
.hg-ai-btn-label {
  position: absolute;
  bottom: -2px; right: -2px;
  font: 700 8px/1 var(--hg-font);
  color: var(--blue-l, #4A90D9);
  background: var(--bg2, #151922);
  border-radius: 4px;
  padding: 1px 2px;
}
.hg-ai-tab {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 44px;
}
.hg-ai-tab-ico {
  width: 16px; height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.hg-ai-tab-ico svg { width: 14px; height: 14px; }
.hg-ai-result-tools {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hg-ai-tool-btn {
  width: 28px; height: 28px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--blue-l, #4A90D9);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hg-ai-error {
  margin-top: 8px;
  font: 500 12px/1.3 var(--hg-font);
  color: var(--hg-danger, #FF453A);
}
.hg-ai-sheet.is-expanded {
  max-height: min(92%, 860px);
  top: 8px;
  bottom: 8px;
}
.hg-ai-style-sheet {
  position: absolute;
  left: 12px; right: 12px; bottom: 12px;
  z-index: 45;
  max-height: min(88%, 720px);
  display: flex;
  flex-direction: column;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}
.hg-ai-style-avatar {
  position: relative;
  width: 88px; height: 88px;
  margin: 12px auto 18px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--bg3) 88%, transparent);
  color: var(--t2, #c7c7cc);
  font-size: 42px;
}
.hg-ai-style-face { line-height: 1; opacity: 0.85; }
.hg-ai-style-plus {
  position: absolute; right: 2px; bottom: 2px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--hg-accent-chat, var(--blue-l, #4A90D9)); color: #fff;
  font: 700 16px/26px var(--hg-font); text-align: center;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bg3) 90%, #000);
}
.hg-ai-close--circle {
  width: 36px; height: 36px; border-radius: 50% !important;
  background: rgba(120,120,128,0.36) !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  color: #fff !important;
  font: 600 18px/1 var(--hg-font) !important;
  border: 0 !important;
  box-shadow: none !important;
}
.hg-ai-actions--stack {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 10px !important;
}
.hg-ai-actions--stack .hg-ai-profile-tog {
  margin: 0 2px 2px !important;
  padding: 4px 2px;
  text-transform: none !important;
}
.hg-ai-body--new-style { padding: 4px 16px 8px; }
.hg-ai-field {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 10px 12px;
  border: 0;
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg2) 70%, transparent);
  color: var(--t1, #fff);
  font: 400 15px/1.3 var(--hg-font);
  box-sizing: border-box;
}
.hg-ai-field--pill { border-radius: 22px; padding: 14px 16px; margin: 0 0 10px; }
.hg-ai-field-area { resize: vertical; min-height: 88px; }
.hg-ai-field-area.hg-ai-field--pill { min-height: 72px; border-radius: 22px; }
.hg-ai-primary--pill { border-radius: 24px !important; height: 48px; }
.hg-ai-profile-tog { display: flex; align-items: center; gap: 8px; margin: 12px 0; }
.hg-ai-emoji-radio { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.hg-ai-emoji-radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.hg-ai-radio {
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--t1, #fff) 40%, transparent);
  display: inline-block; box-sizing: border-box;
}
.hg-ai-emoji-radio input:checked + .hg-ai-radio {
  border-color: var(--blue-l, #4A90D9);
  box-shadow: inset 0 0 0 4px var(--blue-l, #4A90D9);
}
.hg-ai-style-avatar {
  width: 112px !important; height: 112px !important;
  font-size: 56px !important;
}
.hg-ai-style-plus { display: none !important; }
.hg-ai-profile-tog {
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin: 14px 4px 8px;
  font: 400 15px/1.3 var(--hg-font);
  color: var(--t1, #fff);
  visibility: visible !important;
  opacity: 1 !important;
}
.hg-ai-link {
  border: 0; background: transparent;
  color: var(--blue-l, #0A84FF);
  font: 500 13px/1.2 var(--hg-font);
  cursor: pointer; padding: 0;
}
.hg-ai-lang-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: 10px;
}
.hg-ai-lang {
  border: 0; border-radius: 10px;
  background: color-mix(in srgb, var(--bg2) 70%, transparent);
  color: var(--t1, #fff);
  font: 500 14px/1.2 var(--hg-font);
  padding: 8px 10px;
}
.hg-ai-orig.is-expanded { max-height: none; }
.hg-ai-orig { max-height: 88px; overflow: hidden; }
.hg-settings-toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
}
.hg-settings-toggle-row input { margin-left: auto; }
.hg-file-card {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.hg-file-dl {
  color: var(--blue-l, #4A90D9);
  display: inline-flex;
  align-items: center;
}
.hg-bubble.is-pin-flash {
  outline: 2px solid var(--blue-l, #4A90D9);
  outline-offset: 2px;
}

/* F11 AI editor sheet */
.hg-ai-sheet {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 40;
  max-height: min(78%, 640px);
  display: flex;
  flex-direction: column;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}
.hg-ai-sheet-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px 8px;
}
.hg-ai-sheet-head strong {
  flex: 1;
  text-align: center;
  font: 700 17px/1.2 var(--hg-font);
  color: var(--t1, #fff);
}
.hg-ai-close, .hg-ai-info {
  width: 36px; height: 36px;
  border: 0;
  background: rgba(120,120,128,0.32);
  border-radius: 50%;
  color: var(--t1, #fff);
  cursor: pointer;
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hg-ai-tabs {
  display: flex;
  gap: 6px;
  padding: 0 12px 10px;
}
.hg-ai-tab {
  flex: 1;
  height: 44px;
  border: 0;
  border-radius: 18px;
  background: transparent;
  color: var(--hg-muted);
  font: 500 12px/1 var(--hg-font);
  cursor: pointer;
}
.hg-ai-tab.is-active {
  background: color-mix(in srgb, var(--bg3, #1C2130) 72%, var(--t1, #fff));
  color: var(--t1, #fff);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.10),
    0 0 18px color-mix(in srgb, var(--blue-l, #4A90D9) 28%, transparent);
}
.hg-ai-body {
  flex: 1;
  overflow-y: auto;
  padding: 0 14px 12px;
}
.hg-ai-label, .hg-ai-label-row {
  font: 500 12px/1.3 var(--hg-font);
  color: var(--hg-muted);
  margin: 8px 0 4px;
}
.hg-ai-label-row { display: flex; justify-content: space-between; align-items: center; }
.hg-ai-orig, .hg-ai-result {
  font: 400 15px/1.35 var(--hg-font);
  color: var(--t1, #fff);
  white-space: pre-wrap;
  word-break: break-word;
}
.hg-ai-result-box {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg2, #151922) 70%, transparent);
}
.hg-ai-styles {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 6px 0 10px;
}
.hg-ai-style {
  flex: 0 0 auto;
  width: 72px;
  border: 0;
  background: transparent;
  color: var(--t1, #fff);
  font: 500 11px/1.2 var(--hg-font);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.hg-ai-style.is-active .hg-ai-style-ico {
  outline: 2px solid var(--blue-l, #4A90D9);
}
.hg-ai-style-ico {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--bg3, #1C2130) 90%, transparent);
  font-size: 22px;
}
.hg-ai-actions {
  display: flex;
  gap: 8px;
  padding: 10px 14px 14px;
  align-items: center;
}
.hg-ai-primary {
  flex: 1;
  height: 48px;
  border: 0;
  border-radius: 24px;
  background: var(--blue-l, #4A90D9);
  color: #fff;
  font: 700 16px/1 var(--hg-font);
  cursor: pointer;
}
.hg-ai-round {
  width: 48px; height: 48px;
  border: 0; border-radius: 50% !important;
  background: var(--blue-l, #4A90D9);
  color: #fff;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 48px;
}
.hg-ai-round svg { width: 22px; height: 22px; }
.hg-ai-btn[hidden],
.hg-ai-round[hidden],
.hg-ai-primary[hidden],
.hg-profile-more-gal[hidden] { display: none !important; }
.hg-emoji-tog { font: 500 12px/1 var(--hg-font); color: var(--hg-muted); }

/* Вкладки списка удалены (решение заказчика) — правила .hg-tabs/.hg-tab убраны. */

/* ТЗ §1.2: поиск прижать ближе к вкладкам; канон §11.7 — h=40, радиус 20. */
.hg-search {
  margin: 4px 16px 8px;
  height: 40px;
  border-radius: 20px;
  border: 1px solid var(--hg-border);
  padding: 0 16px;
  background: var(--bg3, var(--hg-elev));
  color: var(--hg-text);
  font: 400 var(--hg-font-preview) var(--hg-font);
  outline: none;
}
.hg-search::placeholder { color: var(--hg-faint); }
.hg-search:focus { border-color: var(--hg-accent-chat); }

/* B10 list density */
.hg-list {
  flex: 1;
  overflow-y: auto;
  padding: 0;
  scrollbar-width: thin;
}
.hg-chat-row {
  display: grid;
  grid-template-columns: var(--hg-av-list) 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 2px;
  height: var(--hg-row-h);
  min-height: var(--hg-row-h);
  max-height: var(--hg-row-h);
  padding: 0 12px;
  margin: 0;
  cursor: pointer;
  border: 0;
  border-left: 2px solid transparent;
  border-bottom: 1px solid var(--hg-sep);
  width: 100%;
  background: transparent;
  text-align: left;
  color: inherit;
  align-items: center;
  transition: background var(--hg-dur-hover) var(--hg-ease-ui);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}
.hg-chat-row::after {
  content: '';
  position: absolute;
  left: 88px;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--hg-sep);
  pointer-events: none;
}
.hg-chat-row { border-bottom-color: transparent; }
.hg-chat-row:hover,
.hg-contact-row:hover { background: var(--hg-hover); }
.hg-chat-row.is-active,
.hg-contact-row.is-active {
  background: var(--hg-active-row);
  border-left: 2px solid var(--hg-active-edge, var(--blue-l, #4A90D9));
}
.hg-chat-row:focus-visible,
.hg-contact-row:focus-visible {
  outline: 2px solid var(--hg-active-edge, var(--blue-l, #4A90D9));
  outline-offset: -2px;
}

.hg-chat-av {
  grid-row: 1 / span 2;
  width: var(--hg-av-list);
  height: var(--hg-av-list);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 15px/1 var(--hg-font);
  color: #fff;
  flex: 0 0 auto;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hg-chat-name {
  grid-column: 2;
  grid-row: 1;
  font: 600 17px/1.25 var(--hg-font);
  color: var(--hg-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  padding-right: 8px;
}
.hg-chat-time {
  grid-column: 3;
  grid-row: 1;
  font: 400 12px/1.2 var(--hg-font);
  color: var(--hg-muted);
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.hg-chat-prev {
  grid-column: 2;
  grid-row: 2;
  font: 400 15px/1.35 var(--hg-font);
  color: var(--hg-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  max-height: 1.35em;
}
.hg-chat-prev.is-unread { color: var(--hg-text); font-weight: 600; }
.hg-chat-prev .hg-draft {
  color: var(--hg-danger);
  font-weight: 500;
}
.hg-chat-prev .hg-ticks {
  color: var(--hg-ticks-dim);
  margin-right: 4px;
  font-size: 13px;
  letter-spacing: -1px;
}
.hg-chat-prev .hg-ticks.is-read { color: var(--hg-ticks-read); }
.hg-chat-prev .hg-chat-seen {
  color: var(--hg-accent);
  font-weight: 500;
  margin-left: 6px;
}
.hg-chat-icons {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: 4px;
  color: var(--hg-faint);
  vertical-align: -1px;
}
.hg-chat-icons svg { width: 14px; height: 14px; }
.hg-badge {
  grid-column: 3;
  grid-row: 2;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: var(--hg-radius-pill);
  background: var(--hg-tg-badge, var(--hg-danger, #FF3B30));
  color: #fff;
  font: 700 12px/1 var(--hg-font);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
}
.hg-badge.is-muted { background: #8E8E93; color: #fff; }
.hg-chat-name .hg-chat-icons {
  margin-left: 4px;
  color: #8E8E93;
}
.hg-chat-name .hg-chat-icons svg { width: 14px; height: 14px; }
.hg-chat-av { position: relative; }
.hg-chat-av.is-online::after {
  content: '';
  position: absolute;
  right: 0; bottom: 0;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--hg-online);
  border: 2px solid var(--hg-panel);
}

/* B11 thread header — Telegram sticky */
.hg-thread {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  position: relative;
  /* R167: revert thread wallpaper (R166 header +1.04); msgs owns field */
  background: transparent;
  overflow: hidden;
}
/* thread-head / pin visuals → P8 floating pills (ниже по файлу) */
.hg-thread-title span.is-online { color: var(--hg-online); }
.hg-thread-actions .hg-icon-btn { width: 32px; height: 32px; color: var(--hg-muted); }
.hg-thread-actions .hg-icon-btn:hover { color: var(--hg-accent-chat); }

.hg-msgs-wrap { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.hg-msgs {
  flex: 1;
  overflow-y: auto;
  overflow-x: clip;
  padding: 12px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 0; /* CRIT3: gaps on groups, not container */
  /* R167/R188: msgs wallpaper + TG-doodle */
  background-color: var(--hg-thread-bg, var(--bg2, #151922));
  /* CRM field — no TG charcoal wash that made panel darker than shell */
  background-image: url('/assets/img/hg-chat-pattern.svg');
  background-size: 140px 140px;
  background-repeat: repeat;
  background-attachment: local;
  background-position: 0 0;
  scrollbar-width: thin;
}
html[data-theme="light"] .hg-msgs {
  background-color: var(--hg-thread-bg, var(--bg2, #FDFAF5));
  background-image: url('/assets/img/hg-chat-pattern-light.svg');
  background-size: 240px 240px;
  background-repeat: repeat;
  background-attachment: local;
  background-position: 0 0;
}
.hg-msg-group {
  display: flex;
  flex-direction: column;
  gap: var(--hg-gap-msg-group, 2px); /* S11: same-author tight */
  max-width: 100%;
  margin-bottom: var(--hg-gap-msg-between, 8px); /* S11: between authors */
}
.hg-msg-group:last-child { margin-bottom: 0; }
.hg-msg-group.me { align-items: flex-end; }
.hg-msg-group.them {
  align-items: stretch;
  align-self: stretch;
  max-width: 100%;
}
.hg-msg-row {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 8px;
  max-width: 100%;
  width: 100%;
}
.hg-msg-row.me { justify-content: flex-end; }
.hg-msg-row.them { justify-content: flex-start; }
.hg-msg-row.them.is-cont {
  padding-left: var(--hg-msg-indent); /* CRIT2: no avatar → same left as lead bubble */
}
.hg-msg-stack {
  display: block;
  max-width: min(82%, 320px);
  min-width: 0;
  /* not a flex item for the bubble — bubble shrink-wraps as inline-block */
}
.hg-msg-row.me .hg-msg-stack { margin-left: auto; text-align: right; }
.hg-msg-row.them .hg-msg-stack { margin-right: auto; text-align: left; }
.hg-msg-av {
  width: var(--hg-av-msg);
  height: var(--hg-av-msg);
  border-radius: 50%;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 12px/1 var(--hg-font);
  color: #fff;
}

.hg-bubble {
  display: inline-block;
  width: auto;
  max-width: 100%;
  min-width: 0;
  padding: var(--hg-pad-bubble);
  border-radius: var(--hg-radius-bubble);
  border: 0 !important;
  outline: none;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 2px 8px rgba(0, 0, 0, 0.22);
  font: 400 var(--hg-font-body) var(--hg-font);
  animation: hg-bubble-in var(--hg-dur-bubble) ease-out;
  word-wrap: break-word;
  overflow-wrap: break-word;
  position: relative;
  color: var(--hg-text);
  box-sizing: border-box;
  text-align: left;
  vertical-align: bottom;
}
html[data-theme="light"] .hg-bubble {
  /* TG S04/S05/S57 §7: у пузырей нет ни тени, ни обводки (глубину даёт
     градиентная заливка). Было: inset-блик + внешняя тень. */
  box-shadow: none;
}
@keyframes hg-bubble-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes hg-send-bounce {
  0% { transform: scale(0.92); opacity: 0.7; }
  60% { transform: scale(1.04); }
  100% { transform: scale(1); opacity: 1; }
}
.hg-bubble.is-bounce {
  animation: hg-send-bounce 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hg-bubble.me {
  align-self: flex-end;
  background: var(--hg-tg-bubble-me);
  opacity: 1;
  /* base radius is uniform; the tail is only on .is-last (Telegram: one tail per series) */
  border-radius: var(--hg-tg-bubble-radius) var(--hg-tg-bubble-radius)
    var(--hg-tg-bubble-radius) var(--hg-tg-bubble-radius);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  box-shadow:
    inset 0 0.5px 0 color-mix(in srgb, var(--t1, #fff) 22%, transparent),
    inset 0 0 0 0.5px color-mix(in srgb, var(--t1, #fff) 14%, transparent),
    0 2px 10px rgba(0, 0, 0, 0.18);
  /* clip-path (SVG tail in objectBoundingBox) removed: it scaled with bubble height,
     sheared the right edge, clipped box-shadow and cut the time row. */
}
.hg-bubble.them {
  align-self: flex-start;
  background: var(--hg-tg-bubble-them);
  opacity: 1;
  border-radius: var(--hg-tg-bubble-radius) var(--hg-tg-bubble-radius)
    var(--hg-tg-bubble-radius) var(--hg-tg-bubble-radius);
  max-width: min(82%, 320px);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  box-shadow:
    inset 0 0.5px 0 color-mix(in srgb, var(--t1, #fff) 16%, transparent),
    inset 0 0 0 0.5px color-mix(in srgb, var(--t1, #fff) 12%, transparent),
    0 2px 10px rgba(0, 0, 0, 0.16);
}
/* Tail corner: only the last bubble of a run and only for plain text/voice,
   never for media (square corners fight the tail). */
.hg-bubble.me.is-last {
  border-bottom-right-radius: var(--hg-tg-bubble-tail-radius);
}
.hg-bubble.them.is-last {
  border-bottom-left-radius: var(--hg-tg-bubble-tail-radius);
}
.hg-bubble.me.is-last.image,
.hg-bubble.me.is-last.file,
.hg-bubble.me.is-last.document,
.hg-bubble.me.is-last.voice,
.hg-bubble.them.is-last.image,
.hg-bubble.them.is-last.file,
.hg-bubble.them.is-last.document,
.hg-bubble.them.is-last.voice {
  border-bottom-right-radius: var(--hg-tg-bubble-radius);
  border-bottom-left-radius: var(--hg-tg-bubble-radius);
}
/* media/file bubbles keep soft rect (no tail for square media) */
.hg-bubble.me.image,
.hg-bubble.me.file,
.hg-bubble.me.document,
.hg-bubble.me.voice,
.hg-bubble.them.image,
.hg-bubble.them.file,
.hg-bubble.them.document,
.hg-bubble.them.voice {
  border-radius: var(--hg-tg-bubble-radius);
  clip-path: none;
  -webkit-clip-path: none;
}
.hg-bubble.system {
  align-self: center;
  max-width: 90%;
  background: transparent;
  color: var(--hg-muted);
  font: 500 var(--hg-font-meta) var(--hg-font);
  text-align: center;
  padding: 6px 12px;
}
.hg-bubble .hg-time {
  font-variant-numeric: tabular-nums;
}
.hg-bubble .hg-meta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  float: right;
  clear: none;
  margin: 2px 0 0 10px;
  padding: 0;
  font: 400 11px/1.2 var(--hg-font);
  color: var(--hg-meta-in-bubble);
  text-align: right;
  white-space: nowrap !important;
  width: max-content !important;
  min-width: max-content;
  max-width: none;
  letter-spacing: normal;
  word-break: keep-all;
  overflow-wrap: normal;
  overflow: visible;
  height: auto !important;
  max-height: 14px;
  line-height: 1.2;
  vertical-align: bottom;
}
.hg-bubble .hg-meta .hg-ticks {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  line-height: 1;
  letter-spacing: -1px;
  color: var(--hg-ticks-dim);
}
.hg-bubble .hg-meta .hg-ticks svg {
  width: 12px;
  height: 12px;
  stroke-width: 2;
}
.hg-bubble .hg-meta .hg-ticks.is-read { color: var(--hg-ticks-read); }
.hg-bubble .hg-meta .hg-ticks.is-failed {
  color: var(--hg-danger);
  letter-spacing: 0;
  cursor: pointer;
}
.hg-bubble .hg-meta .hg-ticks.is-sending { opacity: 0.7; }
.hg-forwarded {
  font: 500 12px/1.3 var(--hg-font);
  color: var(--hg-muted);
  padding-top: 2px;
  margin-bottom: 6px;
}
.hg-voice {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  grid-template-rows: 1fr auto;
  column-gap: 10px;
  row-gap: 3px;
  align-items: center;
  min-width: 216px;
  min-height: 54px;
  width: min(300px, 78vw);
  padding: 1px 0;
}
.hg-voice-play {
  grid-row: 1 / span 2;
  grid-column: 1;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  max-width: 44px;
  max-height: 44px;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 0;
  border-radius: 50% !important;
  background: #fff;
  color: var(--blue-l, #5B8DEF);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  align-self: center;
  justify-self: center;
  box-sizing: border-box;
  flex: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  transition: transform 120ms var(--hg-ease-ui, ease), filter 120ms var(--hg-ease-ui, ease);
}
.hg-voice-play:active { transform: scale(0.94); }
.hg-voice-play svg {
  width: 18px; height: 18px;
  fill: currentColor;
  stroke: none;
  flex: none;
}
.hg-voice-play svg polygon,
.hg-voice-play svg rect,
.hg-voice-play svg path {
  fill: currentColor;
  stroke: none;
}
.hg-voice-wave {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  height: 28px;
  min-width: 0;
  width: 100%;
  cursor: pointer;
}
.hg-voice-wave i {
  width: 2px;
  min-height: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--t1, #fff) 42%, transparent);
  display: block;
  flex: 0 0 2px;
  transition: background 90ms linear;
}
.hg-bubble.me.voice {
  background: color-mix(in srgb, var(--blue-l, #5B8DEF) 78%, transparent) !important;
  padding: 8px 12px;
}
.hg-bubble.me .hg-voice-wave i {
  background: color-mix(in srgb, var(--t1, #fff) 48%, transparent);
}
.hg-bubble.me .hg-voice-play {
  background: #fff;
  color: var(--blue-l, #5B8DEF);
}
.hg-voice.is-playing .hg-voice-wave i,
.hg-voice-wave i.is-played {
  background: color-mix(in srgb, var(--t1, #fff) 92%, transparent);
}
.hg-voice-dur {
  grid-column: 2;
  grid-row: 2;
  font: 400 11px/1 var(--hg-font);
  color: color-mix(in srgb, var(--t1, #fff) 58%, transparent);
  justify-self: start;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.hg-voice-time {
  grid-column: 3;
  grid-row: 2;
  font: 400 11px/1 var(--hg-font);
  color: color-mix(in srgb, var(--t1, #fff) 46%, transparent);
  justify-self: end;
  font-variant-numeric: tabular-nums;
}
/* «Aa» transcript toggle (TG-like), to the right of the waveform. */
.hg-voice-aa {
  grid-column: 3;
  grid-row: 1;
  flex: none;
  align-self: center;
  width: 32px; height: 32px; border-radius: 50%;
  border: 0; cursor: pointer;
  background: color-mix(in srgb, var(--t1, #fff) 13%, transparent);
  color: color-mix(in srgb, var(--t1, #fff) 88%, transparent);
  font: 700 13px/1 var(--hg-font);
  letter-spacing: -0.5px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 120ms ease, transform 120ms ease;
}
.hg-voice-aa:active { transform: scale(0.92); }
.hg-voice-aa:hover { background: color-mix(in srgb, var(--t1, #fff) 22%, transparent); }
.hg-voice-aa.is-active { background: color-mix(in srgb, var(--blue-l, #4A90D9) 40%, transparent); }
.hg-bubble.me .hg-voice-aa {
  background: color-mix(in srgb, #fff 24%, transparent);
  color: #fff;
}
.hg-bubble.me .hg-voice-aa.is-active { background: color-mix(in srgb, #fff 42%, transparent); }
.hg-bubble.voice .hg-meta {
  margin-top: 0;
}
.hg-circle-wrap {
  position: relative;
  width: 200px; height: 200px;
}
.hg-circle {
  width: 200px; height: 200px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.hg-circle-ring {
  position: absolute; inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--hg-accent-chat);
  pointer-events: none;
}

.hg-bubble.is-flash {
  outline: 2px solid var(--hg-accent-chat);
  outline-offset: 1px;
}
/* S58 — reply strip above composer row */
.hg-composer-reply,
.hg-composer-reply--above {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0 8px 4px;
  padding: 8px 10px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg3, #1C2130) 72%, transparent);
  width: auto;
  border-bottom: 0;
  min-height: 0;
  box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--t1, #fff) 8%, transparent);
}
.hg-composer-reply .hg-reply-bar {
  width: 3px; align-self: stretch; border-radius: 2px; flex: 0 0 3px;
}
.hg-composer-reply .hg-reply-body { flex: 1; min-width: 0; }
.hg-composer-reply .hg-reply-name {
  font: 600 13px/1.15 var(--hg-font);
}
.hg-composer-reply .hg-reply-text {
  font: 400 13px/1.2 var(--hg-font);
}
.hg-composer-reply .hg-icon-btn {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  opacity: 0.75;
}
.hg-composer-row .hg-input-wrap {
  flex-direction: column;
  align-items: stretch;
  min-height: var(--hg-tg-input-h, 40px);
}
.hg-composer-row .hg-input-wrap.has-reply {
  border-radius: 18px;
  padding: 0 2px 2px 0;
  gap: 0;
  min-height: 56px;
}
.hg-composer-row .hg-input-wrap.has-reply .hg-composer-reply {
  padding: 5px 6px 2px 10px;
}
.hg-composer-row .hg-input-wrap.has-reply .hg-input-main {
  padding-right: 2px;
}
.hg-composer-row .hg-input-main {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
}
.hg-composer-row .hg-input-main textarea {
  flex: 1;
  min-width: 0;
}
.hg-reply {
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin: 0 0 4px;
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--hg-reply-bg);
  cursor: pointer;
  transition: background 150ms ease;
}
.hg-reply:hover {
  background: rgba(255, 255, 255, 0.06);
}
html[data-theme="light"] .hg-reply:hover {
  background: rgba(0, 0, 0, 0.04);
}
.hg-reply-bar {
  width: 3px;
  border-radius: 2px;
  background: var(--hg-reply-accent, var(--hg-accent-chat));
  flex: 0 0 auto;
}
.hg-reply-body { min-width: 0; flex: 1; }
.hg-reply-name {
  font: 500 12px/1.2 var(--hg-font);
  color: var(--hg-reply-accent, var(--hg-accent-chat));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hg-reply-text {
  font: 400 13px/1.3 var(--hg-font);
  color: var(--hg-reply-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Reactions — no gold/yellow chrome borders */
.hg-reacts {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
  clear: none;
}
.hg-reacts button {
  border: 1px solid transparent;
  background: var(--bg3, rgba(255, 255, 255, 0.06));
  color: var(--hg-text);
  font: 500 12px/1 var(--hg-font);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 12px;
  transition: transform var(--hg-dur-react) var(--hg-ease-ui), border-color 150ms ease;
}
.hg-reacts button.is-mine {
  border-color: var(--hg-accent-chat);
  background: var(--bg3, rgba(255, 255, 255, 0.08));
}
.hg-reacts button.is-pop { animation: hg-react-pop var(--hg-dur-react) var(--hg-ease-ui); }
@keyframes hg-react-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* Quick reaction pill — above bottom nav (z=100) within .hg-chrome */
.hg-quick-react {
  --hg-glass-fill-pct: 80%;
  --hg-glass-blur: 32px;
  --hg-glass-rim-pct: 10%;
  --hg-glass-sat: 180%;
  position: absolute;
  z-index: 1100;
  display: flex;
  gap: 2px;
  padding: 6px 8px;
  border-radius: 24px;
  background: color-mix(in srgb, var(--bg3, #1C2130) var(--hg-glass-fill-pct), transparent);
  backdrop-filter: blur(var(--hg-glass-blur)) saturate(var(--hg-glass-sat));
  -webkit-backdrop-filter: blur(var(--hg-glass-blur)) saturate(var(--hg-glass-sat));
  border: 0;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t1, #fff) var(--hg-glass-rim-pct), transparent),
              0 8px 28px rgba(0, 0, 0, 0.35);
  animation: hg-menu-in var(--hg-dur-menu) var(--hg-ease-ui);
}
.hg-quick-react button {
  width: 32px; height: 32px;
  border: 0;
  background: transparent;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
  transition: transform 120ms var(--hg-ease-ui);
}
.hg-quick-react button:hover { transform: scale(1.15); }

.hg-media-photo {
  max-width: 240px; max-height: 240px;
  border-radius: 12px;
  display: block;
  cursor: zoom-in;
  object-fit: cover;
  border: 0;
  outline: none;
  box-shadow: none;
}
.hg-bubble.image,
.hg-bubble.me.image,
.hg-bubble.them.image {
  padding: 3px;
  background: transparent;
}
.hg-bubble.me.image { background: transparent; }
.hg-bubble.them.image { background: transparent; }
.hg-bubble.image .hg-meta {
  position: absolute;
  right: 10px; bottom: 8px;
  margin: 0;
  float: none;
  white-space: nowrap !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.65);
}

/* P8 — TG floating glass: ONE unified chrome stack (header+pin) */
.hg-thread {
  --hg-header-h: var(--hg-tg-header-h);
  background-color: var(--hg-thread-bg, var(--bg2, #151922));
  background-image: none;
}
.hg-float-chrome {
  position: absolute;
  top: var(--hg-tg-header-inset);
  left: var(--hg-tg-header-inset);
  right: var(--hg-tg-header-inset);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: var(--hg-tg-pin-gap);
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0;
  box-shadow: none;
  overflow: visible;
  transform: none;
  isolation: auto;
  padding: 0;
}
/* R92: TG multi-pill — frost on each pill (REF confirms separate capsules) */
.hg-float-chrome::before { display: none; content: none; }
.hg-float-chrome > * { position: relative; z-index: 1; }
.hg-thread-head {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  z-index: 1;
  height: auto;
  min-height: var(--hg-tg-header-h);
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0;
  box-shadow: none;
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  transform: none;
}
.hg-thread-head::before { display: none; content: none; }
.hg-thread-head > * { position: relative; z-index: 1; }
.hg-thread-head.is-scrolled { }
html[data-theme="light"] .hg-float-chrome {
  border: 0;
  box-shadow: none;
}
.hg-thread-head .hg-icon-btn#hgBack,
.hg-back-btn,
.hg-back-cluster {
  --hg-glass-fill-pct: 48%;
  --hg-glass-blur: 32px;
  --hg-glass-rim-pct: 10%;
  --hg-glass-sat: 160%;
  position: relative;
  width: auto;
  min-width: 0;
  max-width: none;
  height: var(--hg-tg-header-h);
  min-height: var(--hg-tg-header-h);
  padding: 0 10px 0 8px;
  /* R210: border 0 (composer rim-kill path) */
  border: 0;
  border-radius: var(--hg-tg-header-radius);
  background: color-mix(in srgb, var(--bg3, #1C2130) var(--hg-glass-fill-pct), transparent);
  backdrop-filter: blur(var(--hg-glass-blur)) saturate(var(--hg-glass-sat));
  -webkit-backdrop-filter: blur(var(--hg-glass-blur)) saturate(var(--hg-glass-sat));
  /* R223: back no lip (R222 back+pin → header +1.10) */
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t1, #fff) var(--hg-glass-rim-pct), transparent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  cursor: pointer; flex: 0 0 auto;
  overflow: visible;
  transition: background 150ms ease, color 150ms ease, transform 150ms ease;
}
.hg-thread-head .hg-icon-btn#hgBack:hover,
.hg-back-btn:hover {
  background: rgba(48, 48, 52, 0.95);
  color: #fff;
}
.hg-thread-head .hg-icon-btn#hgBack:active { transform: scale(0.94); }
.hg-back-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: var(--hg-tg-header-h);
  flex: 0 0 16px;
  margin-right: 0;
  overflow: hidden;
}
.hg-back-chevron svg {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  stroke-width: 2.5;
  color: #fff;
  stroke: #fff;
  flex-shrink: 0;
}
.hg-back-badge {
  position: relative;
  top: auto; left: auto;
  z-index: 2;
  width: auto;
  /* TG S04 §3: бейдж «38» — 28.5×18, кегль 15/600. */
  min-width: 28px;
  max-width: 44px;
  height: 18px;
  padding: 0 7px;
  border-radius: 9px;
  background: var(--hg-tg-back-badge-bg);
  color: var(--hg-tg-back-badge-fg);
  font: 700 12px/18px var(--hg-font);
  letter-spacing: -0.02em;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  /* R226: kill back-badge drop shadow */
  box-shadow: none;
  flex: 0 0 auto;
}
html[data-theme="light"] .hg-back-badge {
  /* TG light: white pill + black digits */
  background: #FFFFFF;
  color: #000000;
}
.hg-back-badge[hidden] { display: none !important; }
.hg-thread-title {
  --hg-glass-fill-pct: 48%;
  --hg-glass-blur: 32px;
  --hg-glass-rim-pct: 10%;
  --hg-glass-sat: 160%;
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  display: flex; flex-direction: column; gap: 0;
  align-items: center;
  text-align: center;
  background: color-mix(in srgb, var(--bg3, #1C2130) var(--hg-glass-fill-pct), transparent);
  border: 0;
  border-radius: var(--hg-tg-header-radius);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t1, #fff) var(--hg-glass-rim-pct), transparent);
  padding: 4px 14px;
  height: var(--hg-tg-header-h);
  min-height: var(--hg-tg-header-h);
  box-sizing: border-box;
  justify-content: center;
  backdrop-filter: blur(var(--hg-glass-blur)) saturate(var(--hg-glass-sat));
  -webkit-backdrop-filter: blur(var(--hg-glass-blur)) saturate(var(--hg-glass-sat));
  overflow: hidden;
}
.hg-thread-title strong {
  font: 600 16px/1.25 var(--hg-font);
  letter-spacing: -0.02em;
  /* R270: restore title α0.78 (R264 V: α-dim path = content-hiding) */
  color: rgba(255, 255, 255, 0.78);
  text-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
  width: 100%;
}
/* Название чата — 17/600/белый (TG S04/S05/S24/S57/S58). Раньше правило
   `.hg-thread-title span` (ниже) билo и заголовок, и подзаголовок: имя чата
   рендерилось 12px/400/62% серого = «подзаголовок», теряя иерархию (P0 дизайн-ревью). */
.hg-thread-title strong .hg-title-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 600 17px/1.2 var(--hg-font);
  color: var(--t1, #FFFFFF);
  letter-spacing: -0.01em;
}
html[data-theme="light"] .hg-thread-title strong .hg-title-text { color: var(--t1, #1A1510); }
.hg-thread-title strong .hg-mute-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 1px;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}
.hg-thread-title strong .hg-mute-ico svg {
  width: 15px !important;
  height: 15px !important;
  min-width: 15px;
  min-height: 15px;
  flex-shrink: 0;
  /* R93: TG mute matches title grey (R244 boost → +0.02) */
  color: rgba(142, 142, 147, 0.85);
  stroke-width: 1.6;
}
.hg-thread-title strong { color: rgba(255, 255, 255, 0.98); }
/* Подзаголовок (presence/typing) — только эти узлы, НЕ заголовок. */
.hg-thread-title span[data-hg-presence],
.hg-thread-title span.is-typing {
  font: 400 13px/1.25 var(--hg-font);
  color: rgba(142, 142, 147, 0.62);
}
html[data-theme="light"] .hg-thread-title span[data-hg-presence],
html[data-theme="light"] .hg-thread-title span.is-typing { color: #6E7681; }
html[data-theme="light"] .hg-thread-title strong { color: rgba(0, 0, 0, 0.82); }
.hg-thread-title span.is-typing {
  color: var(--hg-accent-chat);
  font-style: italic;
}
.hg-thread-head .hg-thread-av,
.hg-thread-av-btn {
  /* TG S05/S57: фото Ø38 в стеклянном кольце Ø44. */
  width: 44px; height: 44px; border: 0; border-radius: 50% !important;
  padding: 0; background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 44px; margin-left: 0; margin-right: 0;
  box-shadow: none;
  transition: background 150ms ease;
}
.hg-thread-av-btn:hover { background: rgba(255, 255, 255, 0.06); }
.hg-thread-head .hg-thread-av,
.hg-thread-av-btn .hg-thread-av {
  width: 38px; height: 38px; min-width: 38px; min-height: 38px;
  flex: 0 0 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font: 600 13px/1 var(--hg-font); color: #fff;
  /* R218: kill avatar ring (rim-kill path; measure vs R217) */
  box-shadow: none;
  background-color: #2C2C2E;
}
.hg-thread-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  visibility: visible;
  pointer-events: auto;
}
.hg-thread-actions[hidden] {
  display: none;
}

.hg-pin-banner {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  z-index: 1;
  margin: 0;
  height: var(--hg-tg-pin-h);
  /* R92: multi-pill pin + TG hierarchy (label dim, body stronger) */
  padding: 3px 12px 3px 10px;
  border-radius: var(--hg-tg-pin-radius);
  box-sizing: border-box;
  --hg-glass-fill-pct: 72%;
  --hg-glass-blur: 20px;
  --hg-glass-rim-pct: 8%;
  --hg-glass-sat: 160%;
  background: color-mix(in srgb, var(--bg3, #1C2130) var(--hg-glass-fill-pct), transparent);
  backdrop-filter: blur(var(--hg-glass-blur)) saturate(var(--hg-glass-sat));
  -webkit-backdrop-filter: blur(var(--hg-glass-blur)) saturate(var(--hg-glass-sat));
  /* R210 border0; F0 pin glass role */
  border: 0;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t1, #fff) var(--hg-glass-rim-pct), transparent);
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  flex: 0 0 auto;
  overflow: hidden;
  transform: none;
}
.hg-pin-banner::after { display: none; content: none; }
.hg-pin-banner > * { position: relative; z-index: 1; }
/* Spacer must live INSIDE .hg-msgs (scroll container) so bubbles can park under glass */
.hg-thread .hg-msgs-wrap {
  padding-top: 0;
}
.hg-thread .hg-msgs {
  padding-top: calc(var(--hg-tg-header-inset) + var(--hg-tg-header-h) + 2px);
}
.hg-thread:has(.hg-float-chrome.has-pin) .hg-msgs {
  padding-top: calc(var(--hg-tg-header-inset) + var(--hg-tg-header-h) + var(--hg-tg-pin-h) + 2px);
}
.hg-pin-banner::before {
  /* R234: soft TG pin rail (R219 kill was neutral; try 1px/0.10) */
  content: '';
  display: block;
  position: absolute;
  z-index: 2;
  left: 10px; top: 12px; bottom: 12px; width: 1px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.10);
}
html[data-theme="light"] .hg-pin-banner {
  background: var(--hg-tg-pin-bg);
  border-color: rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
html[data-theme="light"] .hg-back-cluster,
html[data-theme="light"] .hg-thread-title {
  background: var(--hg-tg-header-bg);
  border-color: rgba(0, 0, 0, 0.06);
}
html[data-theme="light"] .hg-pin-banner::before { background: rgba(0, 0, 0, 0.22); }
/* R234: pad for soft rail */
.hg-pin-banner .hg-pin-body { min-width: 0; flex: 1; padding-left: 10px; }
.hg-pin-banner .hg-pin-label {
  font: 400 9px/1.05 var(--hg-font);
  letter-spacing: -0.01em;
  /* R270: restore pin-label α0.55 (R264 V FAIL content-hide) */
  color: rgba(142, 142, 147, 0.55);
}
html[data-theme="light"] .hg-pin-banner .hg-pin-label {
  color: rgba(0, 0, 0, 0.42);
}
.hg-pin-banner .hg-pin-text {
  font: 400 13px/1.1 var(--hg-font);
  /* R270: restore pin-text α0.72 (TG brightPct~34; α0 = gaming) */
  color: rgba(235, 235, 245, 0.72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html[data-theme="light"] .hg-pin-banner .hg-pin-text {
  color: rgba(0, 0, 0, 0.78);
}
.hg-pin-banner .hg-pin-ico {
  /* R270: restore pin-ico α0.45 (R264 V: α0/0.20 content-hide) */
  color: rgba(142, 142, 147, 0.45);
  flex: 0 0 auto;
  display: flex;
  margin-left: auto;
  opacity: 0.45;
}
html[data-theme="light"] .hg-pin-banner .hg-pin-ico {
  color: rgba(0, 0, 0, 0.40);
}
.hg-pin-banner .hg-pin-ico svg { width: 12px; height: 12px; stroke-width: 1.1; }
.hg-media-video {
  position: relative;
  max-width: 240px;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  background: #000;
}
.hg-media-video video { max-width: 240px; max-height: 240px; display: block; border-radius: 12px; }
.hg-media-video .hg-play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; background: rgba(0, 0, 0, 0.28); pointer-events: none;
}
.hg-file-card {
  display: flex; align-items: center; gap: 10px;
  min-width: 180px; max-width: 260px;
  padding: 8px 10px;
  border-radius: var(--hg-radius-popup);
  background: var(--hg-elev);
  border: 1px solid var(--hg-border);
}
.hg-file-card .hg-file-ico {
  width: 36px; height: 36px; border-radius: 8px;
  background: var(--hg-panel);
  display: flex; align-items: center; justify-content: center;
  color: var(--hg-accent-chat);
}
.hg-file-card a { color: var(--hg-accent-chat); text-decoration: none; font: 500 var(--hg-font-meta) var(--hg-font); }
.hg-transcript {
  margin-top: 8px; padding: 8px 10px; border-radius: 10px;
  background: rgba(0, 0, 0, 0.2);
  font: 400 var(--hg-font-preview) var(--hg-font);
  color: var(--hg-muted);
}
html[data-theme="light"] .hg-transcript { background: rgba(0, 0, 0, 0.06); }

.hg-unread-sep {
  display: flex; align-items: center; gap: 10px;
  margin: 8px 0; color: var(--hg-accent-chat);
  font: 500 11px/1.2 var(--hg-font);
}
.hg-unread-sep::before, .hg-unread-sep::after {
  content: ''; flex: 1; height: 1px; background: var(--hg-accent-chat); opacity: 0.85;
}
.hg-date-sep {
  display: flex;
  justify-content: center;
  margin: 12px 0;
  pointer-events: none;
}
.hg-date-sep span {
  display: inline-block;
  background: var(--hg-date-pill-bg);
  color: var(--hg-date-pill-fg);
  font: 500 12px/1.2 var(--hg-font);
  border-radius: 12px;
  padding: 4px 10px;
}

/* FAB theme-aware */
.hg-scroll-fab {
  position: absolute;
  right: 16px; bottom: 12px;
  width: 40px; height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--hg-elev);
  color: #fff;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  z-index: 5;
  opacity: 0;
  transition: opacity var(--hg-dur-tab) var(--hg-ease-ui);
}
html[data-theme="light"] .hg-scroll-fab {
  background: var(--hg-surface);
  color: var(--hg-text);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.hg-scroll-fab.is-visible {
  display: inline-flex;
  opacity: 1;
}
.hg-scroll-fab svg { width: 20px; height: 20px; }

/* P4.6 Composer — floating frosted strip OVER msgs (same glass model as header) */
.hg-composer {
  --hg-composer-panel: var(--hg-tg-composer-bar-bg);
  --hg-composer-input-bg: var(--hg-tg-input-bg);
  --hg-composer-input-border: rgba(255, 255, 255, 0.06);
  --hg-composer-tool-bg: var(--hg-tg-tool-bg);
  --hg-composer-tool-border: rgba(255, 255, 255, 0.08);
  --hg-send-grad: linear-gradient(135deg, #5E9CD6 0%, #4A7FB5 100%);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 120;
  border-top: 0;
  /* R188: restore transparent composer (R187 on-composer +1.74 FAIL) */
  background: transparent;
  background-image: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  opacity: 1;
  padding: var(--hg-tg-composer-pad);
  padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 0 0 auto;
  min-height: calc(var(--hg-tg-input-h) + 16px);
  box-sizing: border-box;
  transform: none;
}
.hg-composer::before {
  content: none;
  display: none;
}
.hg-thread .hg-msgs-wrap {
  /* suggest bar removed — reserve composer row only */
  padding-bottom: calc(var(--hg-tg-input-h) + 20px + env(safe-area-inset-bottom, 0px));
}
.hg-composer > * { position: relative; z-index: 1; }
html[data-theme="light"] .hg-composer {
  --hg-tg-tool-bg: color-mix(in srgb, var(--bg2, #FDFAF5) 88%, transparent);
  --hg-tg-input-bg: color-mix(in srgb, var(--bg2, #FDFAF5) 92%, transparent);
  --hg-tg-composer-bar-bg: color-mix(in srgb, var(--bg1, #F4EFE6) 55%, transparent);
  --hg-composer-input-border: rgba(0, 0, 0, 0.06);
  --hg-composer-tool-border: rgba(0, 0, 0, 0.08);
  --hg-send-grad: linear-gradient(135deg, #6BA8E0 0%, #4A8BC8 100%);
  border-top-color: rgba(0, 0, 0, 0.06);
  background: var(--hg-tg-composer-bar-bg);
}
.hg-ai-chips {
  display: none !important;
}
.hg-ai-chips.is-hidden { display: none !important; }
.hg-ai-chips::-webkit-scrollbar { display: none; }
.hg-chip {
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.05);
  color: var(--hg-text);
  border-radius: 16px;
  padding: 6px 14px;
  font: 500 13px/1.2 var(--hg-font);
  cursor: pointer;
  white-space: nowrap;
  transition: background 150ms ease, border-color 150ms ease;
}
html[data-theme="light"] .hg-chip {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.05);
}
.hg-chip:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(82, 136, 193, 0.4);
}
html[data-theme="light"] .hg-chip:hover {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(51, 144, 236, 0.4);
}

.hg-attach-prev {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.hg-attach-prev-item {
  position: relative;
  width: 80px; height: 80px;
  border-radius: 8px;
  border: 1px solid var(--hg-border);
  overflow: hidden;
  background: var(--hg-elev);
}
.hg-attach-prev-item img { width: 100%; height: 100%; object-fit: cover; }
.hg-attach-prev-item .hg-attach-x {
  position: absolute; top: 2px; right: 2px;
  width: 22px; height: 22px; border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, 0.55); color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.hg-attach-prev-item .hg-attach-x svg { width: 12px; height: 12px; }

.hg-composer-row {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.hg-composer-row .hg-input-wrap {
  --hg-glass-fill-pct: 65%;
  --hg-glass-blur: 20px;
  --hg-glass-rim-pct: 11%;
  --hg-glass-radius: var(--hg-tg-input-radius, 20px);
  --hg-glass-sat: 180%;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border-radius: var(--hg-glass-radius);
  /* F0: composer glass role */
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--t1, #fff) 10%, transparent) 0%, transparent 50%),
    color-mix(in srgb, var(--bg3, #1C2130) var(--hg-glass-fill-pct), transparent) !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t1, #fff) var(--hg-glass-rim-pct), transparent) !important;
  backdrop-filter: blur(var(--hg-glass-blur)) saturate(var(--hg-glass-sat)) !important;
  -webkit-backdrop-filter: blur(var(--hg-glass-blur)) saturate(var(--hg-glass-sat)) !important;
  padding: 0 2px 0 0;
}
html[data-theme="light"] .hg-composer-row .hg-input-wrap {
  background: color-mix(in srgb, var(--bg3, #EDE8DC) var(--hg-glass-fill-pct), transparent) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t1, #1A1510) var(--hg-glass-rim-pct), transparent) !important;
}
/* R72: attach OUTSIDE as disk (left); smile inside capsule; mic disk right */
.hg-composer-row .hg-tool#hgAttach,
.hg-composer-row .hg-tool.hg-attach-out {
  --hg-glass-fill-pct: 65%;
  --hg-glass-blur: 20px;
  --hg-glass-rim-pct: 11%;
  --hg-glass-sat: 180%;
  border: 0;
  background: color-mix(in srgb, var(--bg3, #1C2130) var(--hg-glass-fill-pct), transparent) !important;
  backdrop-filter: blur(var(--hg-glass-blur)) saturate(var(--hg-glass-sat)) !important;
  -webkit-backdrop-filter: blur(var(--hg-glass-blur)) saturate(var(--hg-glass-sat)) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t1, #fff) var(--hg-glass-rim-pct), transparent);
  color: var(--hg-muted, rgba(200, 200, 205, 0.88));
  width: var(--hg-tg-tool-size);
  height: var(--hg-tg-tool-size);
  min-width: var(--hg-tg-tool-size);
  min-height: var(--hg-tg-tool-size);
  margin: 0 4px 0 0;
  align-self: center;
  order: 0;
  border-radius: 50% !important;
}
html[data-theme="light"] .hg-composer-row .hg-tool#hgAttach,
html[data-theme="light"] .hg-composer-row .hg-tool.hg-attach-out {
  background: color-mix(in srgb, var(--bg3, #EDE8DC) var(--hg-glass-fill-pct), transparent) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t1, #1A1510) var(--hg-glass-rim-pct), transparent);
  color: var(--t2, #6B5E4E);
}
.hg-composer-row .hg-input-wrap {
  order: 1;
}
.hg-composer-row .hg-input-wrap textarea {
  padding-left: 12px;
}
.hg-composer-row .hg-send {
  order: 2;
}
.hg-composer-row .hg-tool#hgAttach svg,
.hg-composer-row .hg-tool.hg-attach-out svg {
  width: 17px !important;
  height: 17px !important;
  opacity: 0.78;
  stroke-width: 1.2 !important;
}
.hg-composer-row .hg-tool {
  width: var(--hg-tg-tool-size);
  height: var(--hg-tg-tool-size);
  min-width: var(--hg-tg-tool-size);
  min-height: var(--hg-tg-tool-size);
  border: 0;
  border-radius: 50% !important;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  color: rgba(255, 255, 255, 0.88);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: color 150ms ease, background 150ms ease, transform 150ms ease, border-color 150ms ease;
}
.hg-composer-row .hg-tool:hover {
  color: var(--hg-text);
  background: rgba(255, 255, 255, 0.10);
  transform: scale(1.04);
}
html[data-theme="light"] .hg-composer-row .hg-tool:hover {
  background: rgba(0, 0, 0, 0.08);
}
.hg-composer-row .hg-tool:active { transform: scale(0.94); }
.hg-composer-row .hg-tool:focus { outline: none; }
.hg-composer-row .hg-tool:focus-visible {
  outline: 2px solid var(--hg-accent-chat);
  outline-offset: 2px;
}
.hg-composer-row .hg-tool svg {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px;
  min-height: 22px;
  flex-shrink: 0;
  stroke-width: 1.35 !important;
  opacity: 0.78;
}
.hg-composer-row .hg-tool#hgAttach svg {
  opacity: 0.72;
  stroke-width: 1.25 !important;
}

.hg-input-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  overflow: visible;
}
/* R122: kill CRM app.css textarea (--bg2/--bg3 #1C2130 navy + blue border/glow) */
.hg-composer textarea,
.hg-composer #hgInput,
.hg-chrome textarea#hgInput {
  flex: 1;
  width: 100%;
  height: var(--hg-tg-input-h);
  min-height: var(--hg-tg-input-h);
  max-height: 140px;
  resize: none;
  border-radius: var(--hg-tg-input-radius, 20px);
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 8px 52px 8px 10px;
  font: 400 17px/1.25 var(--hg-font);
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: var(--hg-text) !important;
  caret-color: var(--hg-accent-chat, var(--blue-l, #4A90D9));
  transition: none;
  box-sizing: border-box;
  overflow-y: auto;
}
.hg-composer textarea::placeholder,
.hg-composer #hgInput::placeholder {
  /* R173: restore (R172 brighter → composer +0.03) */
  color: rgba(142, 142, 147, 0.72) !important;
  font: 400 15px/1.25 var(--hg-font);
}
.hg-composer textarea:hover,
.hg-composer textarea:focus,
.hg-composer #hgInput:hover,
.hg-composer #hgInput:focus {
  border: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}
html[data-theme="light"] .hg-composer textarea:focus {
  background: rgba(255, 255, 255, 0.88);
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.08) !important;
}
/* Keyboard suggest «Я/Ну/Как» — removed (capture remnant, not product) */
.hg-suggest-bar,
.hg-chrome.is-composer-focus .hg-suggest-bar,
.hg-composer:focus-within .hg-suggest-bar {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

.hg-emoji-btn {
  position: absolute;
  /* R180: restore R178 smile geom (R179 20px → composer +0.04) */
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px; height: 22px;
  border: 0; border-radius: 50%;
  background: transparent;
  color: #8E8E93 !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 8;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto;
  transition: color 150ms ease, transform 150ms ease;
}
.hg-emoji-btn {
  color: rgba(142, 142, 147, 0.85);
}
.hg-emoji-btn svg {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  flex-shrink: 0;
  stroke-width: 1.35 !important;
  display: block !important;
  stroke: currentColor !important;
}
/* R178: smile IN capsule (V177: TG two-disk claim FALSE; outside was wrong) */
.hg-composer textarea,
.hg-composer #hgInput {
  padding-right: 36px !important;
}
.hg-emoji-btn:hover { color: var(--hg-text); transform: translateY(-50%) scale(1.08); }
.hg-emoji-btn:focus { outline: none; }
.hg-emoji-btn:focus-visible {
  outline: 2px solid var(--hg-accent-chat);
  outline-offset: 2px;
}
.hg-emoji-btn.is-open { color: var(--hg-accent-chat); }

.hg-send {
  width: var(--hg-tg-tool-size);
  height: var(--hg-tg-tool-size);
  min-width: var(--hg-tg-tool-size);
  min-height: var(--hg-tg-tool-size);
  border: 0;
  border-radius: 50% !important;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  color: rgba(255, 255, 255, 0.88);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: background 150ms ease, color 150ms ease, transform 150ms ease,
    box-shadow 150ms ease, border-color 150ms ease, opacity 150ms ease;
}
/* R202/R182 killed — F0 restores composer glass role on attach/mic */
.hg-composer-row .hg-tool.hg-attach-out {
  border: 0;
  background: color-mix(in srgb, var(--bg3, #1C2130) var(--hg-glass-fill-pct, 65%), transparent) !important;
  backdrop-filter: blur(var(--hg-glass-blur, 20px)) saturate(var(--hg-glass-sat, 180%)) !important;
  -webkit-backdrop-filter: blur(var(--hg-glass-blur, 20px)) saturate(var(--hg-glass-sat, 180%)) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t1, #fff) var(--hg-glass-rim-pct, 11%), transparent);
}
.hg-composer-row .hg-send.is-mic {
  border: 0;
  background: color-mix(in srgb, var(--bg3, #1C2130) var(--hg-glass-fill-pct, 65%), transparent) !important;
  backdrop-filter: blur(var(--hg-glass-blur, 20px)) saturate(var(--hg-glass-sat, 180%)) !important;
  -webkit-backdrop-filter: blur(var(--hg-glass-blur, 20px)) saturate(var(--hg-glass-sat, 180%)) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t1, #fff) var(--hg-glass-rim-pct, 11%), transparent);
  margin-left: 6px;
  color: var(--hg-muted, rgba(200, 200, 205, 0.88));
}
html[data-theme="light"] .hg-composer-row .hg-send.is-mic {
  background: color-mix(in srgb, var(--bg3, #EDE8DC) var(--hg-glass-fill-pct, 65%), transparent) !important;
  color: var(--t2, #6B5E4E);
}
.hg-composer-row .hg-tool.hg-attach-out { margin-left: 0; margin-right: 8px; }
.hg-send.is-mic:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--hg-accent-chat);
  transform: scale(1.04);
}
html[data-theme="light"] .hg-send.is-mic:hover {
  background: rgba(0, 0, 0, 0.08);
}
.hg-send.is-send {
  border-color: transparent;
  background: var(--hg-send-grad) !important;
  color: #fff;
  box-shadow: 0 2px 8px rgba(82, 136, 193, 0.35);
  animation: hg-send-enter 180ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hg-send.is-send:hover {
  transform: scale(1.04);
  box-shadow: 0 4px 12px rgba(82, 136, 193, 0.5);
}
.hg-send.is-send:active,
.hg-send.is-mic:active { transform: scale(0.96); }
.hg-send.is-recording {
  border-color: transparent;
  background: #FF453A;
  color: #fff;
  animation: hg-mic-pulse 1.2s ease-in-out infinite;
}
.hg-send:focus { outline: none; }
.hg-send:focus-visible {
  outline: 2px solid var(--hg-accent-chat);
  outline-offset: 2px;
}
.hg-send svg {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  flex-shrink: 0;
  stroke-width: 1.5 !important;
}
.hg-send.is-mic svg {
  width: 18px !important;
  height: 18px !important;
  opacity: 0.82;
  stroke-width: 1.25 !important;
}
.hg-send.is-send svg { stroke-width: 2.25; }
.hg-send:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
@keyframes hg-send-enter {
  from { transform: scale(0.7); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes hg-mic-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.hg-file-hidden {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  opacity: 0 !important; pointer-events: none !important;
  overflow: hidden !important; clip: rect(0, 0, 0, 0) !important;
}

/* Attach type popup */
.hg-attach-menu {
  --hg-glass-fill-pct: 80%;
  --hg-glass-blur: 32px;
  --hg-glass-rim-pct: 10%;
  --hg-glass-sat: 180%;
  position: absolute;
  left: 12px; bottom: 72px;
  z-index: 1150;
  min-width: 180px;
  padding: 6px;
  border-radius: var(--hg-glass-radius, 18px);
  background: color-mix(in srgb, var(--bg3, #1C2130) var(--hg-glass-fill-pct), transparent);
  backdrop-filter: blur(var(--hg-glass-blur)) saturate(var(--hg-glass-sat));
  -webkit-backdrop-filter: blur(var(--hg-glass-blur)) saturate(var(--hg-glass-sat));
  border: 0;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t1, #fff) var(--hg-glass-rim-pct), transparent),
              0 12px 40px rgba(0, 0, 0, 0.4);
  animation: hg-menu-in var(--hg-dur-menu) var(--hg-ease-ui);
}
.hg-attach-menu button {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  border: 0; background: transparent;
  color: var(--hg-text);
  padding: var(--hg-pad-menu-item);
  border-radius: 8px;
  font: 500 13px/1.3 var(--hg-font);
  cursor: pointer;
  text-align: left;
}
.hg-attach-menu button:hover { background: var(--hg-hover); }
.hg-attach-menu button svg { width: 18px; height: 18px; color: var(--hg-muted); }

/* Float menus */
.hg-float {
  --hg-glass-fill-pct: 80%;
  --hg-glass-blur: 32px;
  --hg-glass-rim-pct: 10%;
  --hg-glass-sat: 180%;
  position: absolute;
  z-index: 1050;
  max-width: 300px;
  max-height: 260px;
  overflow: auto;
  padding: 6px;
  border-radius: var(--hg-radius-popup);
  background: var(--hg-quick-bg);
  backdrop-filter: blur(var(--hg-glass-blur)) saturate(var(--hg-glass-sat));
  -webkit-backdrop-filter: blur(var(--hg-glass-blur)) saturate(var(--hg-glass-sat));
  border: 1px solid var(--hg-border);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  animation: hg-menu-in var(--hg-dur-menu) var(--hg-ease-ui);
}
@keyframes hg-menu-in {
  from { opacity: 0; transform: scale(0.88); }
  to { opacity: 1; transform: none; }
}
.hg-float,
.hg-attach-menu,
.hg-quick-react {
  transform-origin: var(--hg-menu-origin-x, 50%) var(--hg-menu-origin-y, 100%);
}
.hg-float-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}
.hg-float-grid button {
  width: 40px; height: 40px; border: 0; border-radius: 10px;
  background: transparent; font-size: 22px; cursor: pointer; line-height: 1;
}
.hg-float-grid button:hover { background: var(--hg-hover); }
.hg-float-actions { display: flex; flex-direction: column; gap: 2px; min-width: 180px; }
.hg-float-actions button {
  border: 0; background: transparent; color: var(--hg-text);
  text-align: left; padding: var(--hg-pad-menu-item); border-radius: 8px;
  font: 500 13px/1.3 var(--hg-font); cursor: pointer;
  display: flex; align-items: center; gap: 10px;
}
.hg-float-actions button svg { width: 18px; height: 18px; color: var(--hg-muted); }
.hg-float-actions button:hover { background: var(--hg-hover); }
.hg-float-actions button:disabled { opacity: .45; cursor: default; }
.hg-float-actions button:disabled:hover { background: transparent; }
.hg-float-actions button.danger { color: var(--hg-danger, var(--red, #FF453A)); }
.hg-float-actions button.danger svg { color: var(--hg-danger, var(--red, #FF453A)); }
.hg-float-head {
  padding: 8px 12px 6px; font: 700 13px/1.3 var(--hg-font); color: var(--hg-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px;
  border-bottom: 1px solid var(--hg-border, rgba(255,255,255,.08)); margin-bottom: 4px;
}

.hg-sheet {
  position: absolute;
  left: 8px; right: 8px; bottom: 8px;
  --hg-glass-fill-pct: 80%;
  --hg-glass-blur: 32px;
  --hg-glass-rim-pct: 10%;
  --hg-glass-sat: 180%;
  background: color-mix(in srgb, var(--bg3, #1C2130) var(--hg-glass-fill-pct), transparent);
  backdrop-filter: blur(var(--hg-glass-blur)) saturate(var(--hg-glass-sat));
  -webkit-backdrop-filter: blur(var(--hg-glass-blur)) saturate(var(--hg-glass-sat));
  border: 0;
  border-radius: var(--hg-glass-radius, 18px);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t1, #fff) var(--hg-glass-rim-pct), transparent),
    0 -8px 32px rgba(0, 0, 0, 0.4);
  padding: 12px;
  animation: hg-up var(--hg-dur-bubble) var(--hg-ease-ui);
  z-index: 1150;
  max-height: 55%;
  overflow: auto;
}
@keyframes hg-up {
  from { transform: translateY(16px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
/* Shared: confirm / prompt sheets + member info (А12/A4) */
.hg-confirm-sheet {
  left: 24px; right: 24px;
  max-width: 340px;
  margin: 0 auto;
  padding: 18px;
  max-height: 70%;
}
.hg-confirm-title {
  font: 600 16px/1.3 var(--hg-font);
  color: var(--hg-text);
  text-align: center;
  margin-bottom: 6px;
}
.hg-confirm-body {
  font: 400 13.5px/1.45 var(--hg-font);
  color: var(--hg-muted);
  text-align: center;
  margin-bottom: 14px;
  word-break: break-word;
}
.hg-confirm-input {
  width: 100%;
  box-sizing: border-box;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--hg-border, rgba(255,255,255,.14));
  background: var(--hg-elev, rgba(255,255,255,.06));
  color: var(--hg-text);
  padding: 0 14px;
  font: 400 15px var(--hg-font);
  outline: none;
  margin-bottom: 14px;
}
.hg-confirm-input:focus { border-color: var(--blue-l, #5B8DEF); }
.hg-confirm-actions { display: flex; gap: 8px; }
.hg-confirm-btn {
  flex: 1;
  height: 44px;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  font: 600 15px var(--hg-font);
  background: var(--hg-elev, rgba(255,255,255,.08));
  color: var(--hg-text);
  transition: filter 120ms ease, transform 120ms ease;
}
.hg-confirm-btn:active { transform: scale(0.98); }
.hg-confirm-btn.is-primary { background: var(--blue-l, #5B8DEF); color: #fff; }
.hg-confirm-btn.is-danger { background: var(--hg-danger, #FF453A); color: #fff; }
.hg-member-info { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 0 14px; }
.hg-member-info-av { width: 76px; height: 76px; font-size: 26px; }
.hg-member-info-name { font: 600 18px/1.3 var(--hg-font); color: var(--hg-text); margin-top: 8px; text-align: center; }
.hg-member-info-role { font: 400 13px/1.3 var(--hg-font); color: var(--hg-muted); }
.hg-member-info-rows { display: grid; gap: 2px; }
.hg-sort-sheet { left: 24px; right: 24px; max-width: 340px; margin: 0 auto; padding: 14px; }
.hg-sort-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 12px 14px; border: 0; border-radius: 10px; margin-top: 4px;
  background: transparent; color: var(--hg-text); cursor: pointer;
  font: 400 15px var(--hg-font); text-align: left;
  transition: background 120ms ease;
}
.hg-sort-row:hover { background: var(--hg-hover, rgba(255,255,255,.06)); }
.hg-sort-row.is-active { color: var(--blue-l, #5B8DEF); font-weight: 600; }
.hg-data-rows { display: grid; gap: 2px; }
.hg-sheet-stickers { max-height: 70%; }
.hg-sticker-label {
  font: 600 var(--hg-font-meta) var(--hg-font);
  color: var(--hg-muted);
  margin: 0 0 8px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.hg-sticker-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
}
.hg-sticker-grid button {
  border: 0; background: transparent; border-radius: 10px;
  padding: 8px; cursor: pointer; aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; line-height: 1;
}
.hg-sticker-grid button:hover { background: var(--hg-hover); }
.hg-sheet-close {
  display: block; width: 100%; margin-top: 10px; border: 0;
  background: var(--hg-elev); color: var(--hg-text);
  border-radius: var(--hg-radius); padding: 10px;
  font: 500 13px/1.2 var(--hg-font); cursor: pointer;
}

.hg-ting-strip {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: rgba(212, 168, 67, 0.1);
  border-bottom: 1px solid var(--hg-border);
  font: 500 13px/1.3 var(--hg-font);
}

/* Ting rail panel — tokens from --hg-* */
.hg-ting-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 14px 16px;
  overflow: auto;
  min-height: 0;
  flex: 1;
  font-family: var(--hg-font);
  color: var(--hg-text);
}
.hg-ting-panel.hg-ting-compact {
  position: relative;
  overflow: hidden;
  gap: 6px;
  padding-bottom: 62px; /* место под абсолютный iconbar */
}
.hg-ting-sec { display: flex; flex-direction: column; gap: 6px; }
.hg-ting-sec-h {
  font: 600 var(--hg-font-meta) var(--hg-font);
  color: var(--hg-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.hg-ting-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 2px 10px;
  text-align: left;
  border: 1px solid var(--hg-border);
  border-radius: max(var(--hg-radius), 10px);
  background: var(--hg-bg, transparent);
  color: var(--hg-text);
  padding: 10px 12px;
  cursor: pointer;
  font: 500 13px/1.25 var(--hg-font);
}
.hg-ting-row:hover { border-color: var(--ting-gold, #D4A843); }
.hg-ting-row-title { grid-column: 1; font-weight: 600; }
.hg-ting-row-meta { grid-column: 1; font: 400 11px/1.2 var(--hg-font); color: var(--hg-muted); }
.hg-ting-row-cta {
  grid-column: 2; grid-row: 1 / span 2; align-self: center;
  color: var(--ting-gold, #D4A843); font: 600 12px/1 var(--hg-font);
}
.hg-ting-empty {
  padding: 10px 4px;
  color: var(--hg-muted);
  font: 400 var(--hg-font-preview) var(--hg-font);
}
.hg-ting-cta { flex-direction: row; flex-wrap: wrap; gap: 8px; }
.hg-chip.hg-ting-gold {
  background: color-mix(in srgb, var(--ting-gold, #D4A843) 22%, transparent);
  color: var(--hg-text);
  border: 1px solid color-mix(in srgb, var(--ting-gold, #D4A843) 55%, transparent);
}
.hg-ting-danger { color: var(--hg-danger, #E24B4B) !important; }
.hg-ting-foot { margin-top: 4px; }
.hg-ting-banner {
  padding: 8px 10px;
  border-radius: var(--hg-radius);
  background: rgba(226, 75, 75, .12);
  color: var(--hg-text);
  font: 500 12px/1.3 var(--hg-font);
}
.hg-ting-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  min-height: 120px;
}
.hg-ting-compact .hg-ting-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  gap: 0;
}
.hg-ting-tile {
  position: relative;
  border-radius: max(var(--hg-radius), 10px);
  overflow: hidden;
  background: var(--hg-bg);
  aspect-ratio: 4/3;
}
.hg-ting-compact .hg-ting-tile.is-primary {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  aspect-ratio: auto;
  width: 100%;
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.hg-ting-compact .hg-ting-tile.is-inset {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 32%;
  min-width: 96px;
  max-width: 140px;
  aspect-ratio: 3/4;
  min-height: 0;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
  z-index: 2;
  border: 1px solid rgba(255,255,255,.14);
}
.hg-ting-tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hg-ting-tile-ph {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, #1a2030, #0d1118);
}
.hg-ting-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font: 700 16px/1 var(--hg-font);
  color: #fff;
  background: color-mix(in srgb, var(--ting-gold, #D4A843) 55%, #334);
}
.hg-ting-tile-lbl {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 18px 10px 8px;
  font: 600 12px/1.25 var(--hg-font);
  color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,.72));
  z-index: 3;
  pointer-events: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hg-ting-timer {
  font: 700 18px/1.2 var(--hg-font);
  text-align: center;
  color: var(--hg-text);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}
.hg-ting-controls { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.hg-ting-iconbar {
  display: flex; flex-wrap: nowrap; gap: 10px; justify-content: center;
  padding: 8px 4px 10px;
  flex: 0 0 auto;
  z-index: 5;
  background: linear-gradient(transparent, color-mix(in srgb, var(--hg-panel, #151922) 92%, transparent) 28%);
}
/* Compact live: кнопки всегда внизу панели, не клипаются видео-стейджем */
.hg-ting-compact .hg-ting-iconbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 8px 12px;
  margin: 0;
}
.hg-ting-iconbtn {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--hg-border, rgba(255,255,255,.12));
  background: color-mix(in srgb, var(--hg-bg, #151922) 80%, transparent);
  color: var(--hg-text, #fff);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  flex: 0 0 auto;
}
.hg-ting-iconbtn:hover { border-color: var(--ting-gold, #D4A843); }
.hg-ting-iconbtn.is-off { color: var(--hg-danger, #E24B4B); }
.hg-ting-iconbtn.is-danger {
  background: color-mix(in srgb, var(--hg-danger, #E24B4B) 22%, transparent);
  border-color: color-mix(in srgb, var(--hg-danger, #E24B4B) 55%, transparent);
  color: #ffb4b4;
}
.hg-ting-iconbtn.is-active {
  border-color: var(--ting-gold, #D4A843);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ting-gold, #D4A843) 35%, transparent);
}
.hg-ting-proto {
  margin-top: 8px; padding: 10px;
  border-radius: var(--hg-radius);
  border: 1px solid var(--hg-border);
  background: var(--hg-bg);
  font: 400 12px/1.4 var(--hg-font);
  max-height: 160px; overflow: auto;
  white-space: pre-wrap;
}
.hg-ting-pip {
  position: fixed;
  right: 72px;
  bottom: 24px;
  width: 220px;
  z-index: 1400;
  border-radius: 16px;
  overflow: hidden;
  background: var(--hg-bg, #151922);
  border: 1px solid var(--hg-border, rgba(255,255,255,.12));
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
}
.hg-ting-pip.is-parked {
  right: 76px;
  bottom: 88px;
  width: 148px;
  opacity: .96;
  z-index: 1350;
}
.hg-ting-pip-drag {
  height: 22px;
  cursor: grab;
  background: color-mix(in srgb, var(--ting-gold, #D4A843) 25%, transparent);
  font: 600 11px/22px var(--hg-font);
  color: var(--hg-text);
  padding: 0 10px;
  user-select: none;
}
.hg-ting-pip-video { min-height: 120px; background: #000; position: relative; }
.hg-ting-pip.is-parked .hg-ting-pip-video { min-height: 84px; }
.hg-ting-pip-video .hg-ting-tile { aspect-ratio: auto; height: 120px; border-radius: 0; }
.hg-ting-pip.is-parked .hg-ting-pip-video .hg-ting-tile { height: 84px; }
.hg-ting-pip-video .hg-ting-tile.is-inset { display: none; }
.hg-ting-pip-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px;
  font: 600 12px/1 var(--hg-font);
  color: var(--hg-text);
}
.hg-ting-pip-bar .hg-ting-iconbtn { width: 32px; height: 32px; }
.hg-ting-compact {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding-bottom: 4px;
}
/* Compact live: head + body fill panel; controls never clipped */
.hg-panel:has(.hg-ting-compact) {
  overflow: hidden;
}
.hg-panel:has(.hg-ting-compact) > .hg-panel-head {
  flex: 0 0 auto;
}
.hg-panel:has(.hg-ting-compact) > .hg-ting-compact {
  flex: 1 1 auto;
  min-height: 0;
}
/* Empty */
.hg-empty {
  padding: 32px 20px;
  color: var(--hg-muted);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  overflow: clip;
  background-color: var(--hg-thread-bg);
  background-image:
    radial-gradient(ellipse at 50% 40%, rgba(255, 255, 255, 0.02) 0%, transparent 70%),
    url('/assets/img/hg-chat-pattern.svg');
  background-size: 100% 100%, 240px 240px;
  background-repeat: no-repeat, repeat;
  background-attachment: fixed, local;
  background-position: center center, 0 0;
}
html[data-theme="light"] .hg-empty {
  background-image: url('/assets/img/hg-chat-pattern-light.svg');
  background-size: 240px 240px;
  background-repeat: repeat;
  background-attachment: local;
  background-position: 0 0;
}
.hg-empty svg { width: 48px; height: 48px; color: var(--hg-faint); }
.hg-empty h3 { margin: 0; font: 600 var(--hg-font-title) var(--hg-font); color: var(--hg-text); }
.hg-empty p { margin: 0; font: 400 var(--hg-font-preview) var(--hg-font); max-width: 260px; }
/* E7: классы пустых состояний использовались в JS без стилей. */
.hg-empty-t {
  font: 600 var(--hg-font-title) var(--hg-font);
  color: var(--hg-text);
}
.hg-empty-s {
  font: 400 var(--hg-font-preview) var(--hg-font);
  color: var(--hg-muted);
  max-width: 280px;
  line-height: 1.45;
}
.hg-empty-thread {
  height: 100%;
  justify-content: center;
  padding: 40px 24px;
  background-image: none;
}
.hg-empty-thread svg { width: 56px; height: 56px; opacity: 0.5; }
.hg-empty .hg-empty-cta {
  margin-top: 8px; border: 0; border-radius: var(--hg-radius-pill);
  padding: 10px 16px; background: var(--hg-accent-chat); color: #fff;
  font: 600 13px/1.2 var(--hg-font); cursor: pointer;
}

.hg-lightbox {
  --hg-glass-fill-pct: 70%;
  --hg-glass-blur: 28px;
  --hg-glass-sat: 180%;
  position: fixed; inset: 0; z-index: 1500;
  background: color-mix(in srgb, var(--bg1, #000) 68%, transparent);
  backdrop-filter: blur(var(--hg-glass-blur)) saturate(var(--hg-glass-sat));
  -webkit-backdrop-filter: blur(var(--hg-glass-blur)) saturate(var(--hg-glass-sat));
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.hg-lightbox img { max-width: min(92vw, 960px); max-height: 88vh; border-radius: 12px; object-fit: contain; }
.hg-lightbox-close {
  --hg-glass-fill-pct: 70%;
  --hg-glass-blur: 28px;
  --hg-glass-rim-pct: 10%;
  --hg-glass-sat: 180%;
  position: absolute; top: 16px; right: 16px;
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: color-mix(in srgb, var(--bg3, #1C2130) var(--hg-glass-fill-pct), transparent); color: #fff; cursor: pointer;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t1, #fff) var(--hg-glass-rim-pct), transparent);
  backdrop-filter: blur(var(--hg-glass-blur)) saturate(var(--hg-glass-sat));
  -webkit-backdrop-filter: blur(var(--hg-glass-blur)) saturate(var(--hg-glass-sat));
  display: inline-flex; align-items: center; justify-content: center;
}

.hg-toast {
  position: absolute; left: 50%; bottom: 72px; transform: translateX(-50%);
  z-index: 30; padding: 8px 14px; border-radius: var(--hg-radius-pill);
  background: var(--hg-quick-bg); border: 1px solid var(--hg-border);
  color: var(--hg-text); font: 500 var(--hg-font-meta) var(--hg-font);
}

.hg-rec-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 8;
  padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, transparent, rgba(20, 28, 44, 0.72) 28%, rgba(12, 18, 30, 0.88));
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}
.hg-rec-overlay-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.hg-rec-left {
  display: flex; align-items: center; gap: 10px; min-width: 0;
}
.hg-rec-right {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.hg-rec-right::before {
  content: '';
  position: absolute;
  right: -18px; bottom: -18px;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(90, 170, 255, 0.35) 0%, rgba(90, 170, 255, 0.08) 55%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.hg-rec-right > * { position: relative; z-index: 1; }
.hg-rec-once,
.hg-rec-pause {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px dashed rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.08);
  color: #fff; font: 700 13px/1 var(--hg-font);
  cursor: pointer;
}
.hg-rec-once.is-on { border-style: solid; }
.hg-rec-overlay .hg-rec-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--hg-danger, var(--red, #FF453A));
  animation: hg-blink 1s infinite;
  flex: 0 0 auto;
}
.hg-rec-overlay .hg-rec-timer {
  font: 600 17px/1 tabular-nums var(--hg-font);
  color: #fff;
}
.hg-rec-cancel {
  border: 0; background: transparent;
  color: #5AC8FA;
  font: 600 16px/1.2 var(--hg-font);
  cursor: pointer; padding: 4px 2px;
}
.hg-rec-send {
  width: 64px; height: 64px; border-radius: 50% !important;
  border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--hg-accent-chat, var(--blue-l, #4A90D9));
  color: #fff;
  box-shadow: 0 0 0 8px rgba(10, 132, 255, 0.22), 0 10px 24px rgba(0,0,0,0.35);
  overflow: hidden;
}
.hg-rec-send svg { width: 26px; height: 26px; }
.hg-composer-row.is-hidden-for-rec { display: none !important; }
@keyframes hg-blink { 50% { opacity: 0.35; } }

/* Fullscreen circle record (G2) */
.hg-circle-record {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: #0a0a0a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.hg-circle-stage {
  width: min(86vw, 400px);
  height: min(86vw, 400px);
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  box-shadow: 0 16px 48px rgba(0,0,0,0.55);
}
.hg-circle-record .hg-circle-preview {
  width: 100%; height: 100%;
  object-fit: cover;
  background: #222;
  display: none;
}
.hg-circle-record.has-stream .hg-circle-preview { display: block; }
.hg-circle-record.has-stream .hg-circle-fallback { display: none; }
.hg-circle-fallback {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,0.35), transparent 40%),
    linear-gradient(145deg, #6b7c93 0%, #2c3340 55%, #1a1f29 100%);
}
.hg-circle-record .hg-circle-chrome {
  position: absolute;
  left: 16px; right: 16px;
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
}
.hg-circle-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.hg-circle-flash {
  width: 36px; height: 36px; border-radius: 50%;
  border: 0; background: rgba(255,255,255,0.08);
  color: #fff; cursor: pointer;
}
.hg-circle-bar {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 18px 8px 14px;
  border-radius: 999px;
  background: rgba(28, 28, 30, 0.72);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border: 0.5px solid rgba(255,255,255,0.12);
}
.hg-circle-flip {
  width: 36px; height: 36px; border-radius: 50%;
  border: 0; background: rgba(255,255,255,0.08);
  color: #fff; cursor: pointer;
}
.hg-circle-record .hg-circle-mid {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  flex: 1;
}
.hg-circle-record .hg-circle-cancel {
  border: 0; background: transparent;
  color: #5AC8FA;
  font: 600 16px/1 var(--hg-font);
  cursor: pointer;
}
.hg-circle-record .hg-circle-send {
  width: 68px; height: 68px; border-radius: 50% !important;
  border: 0; cursor: pointer;
  margin-left: -10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--hg-accent-chat, var(--blue-l, #4A90D9));
  color: #fff;
  box-shadow: 0 0 0 10px rgba(10,132,255,0.2), 0 12px 28px rgba(0,0,0,0.4);
  flex: 0 0 auto;
  overflow: hidden;
}
.hg-circle-record .hg-circle-send svg { width: 28px; height: 28px; }
body.hg-circle-recording #huginnDock .hg-bottom-nav,
body.hg-circle-recording .hg-nav-search { display: none !important; }

/* P9.3 mobile bottom nav — floating glass pill + FAB.
   Glass on the element itself (not ::before+isolation) so backdrop-filter samples the list. */
.hg-bottom-nav {
  --hg-glass-fill-pct: 82%;
  --hg-glass-blur: 40px;
  --hg-glass-rim-pct: 12%;
  --hg-glass-sat: 220%;
  --hg-nav-pill-bg: var(--hg-tg-nav-bg);
  --hg-nav-pill-active: color-mix(in srgb, var(--blue-l, #4A90D9) 20%, transparent);
  --hg-nav-circle-active: var(--hg-tg-active-circle);
  --hg-nav-circle-hover: rgba(255, 255, 255, 0.06);
  --hg-nav-icon-active: var(--hg-tg-nav-icon-active);
  --hg-nav-muted: var(--hg-tg-nav-muted);
  display: none;
  position: fixed;
  left: var(--hg-tg-nav-inset);
  right: calc(var(--hg-tg-nav-inset) + var(--hg-tg-fab-size) + var(--hg-tg-fab-gap));
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  width: auto;
  max-width: none;
  z-index: 1300;
  height: var(--hg-tg-nav-h);
  padding: 0 6px;
  border-radius: var(--hg-tg-nav-radius);
  border: 0;
  /* layered fill: specular rim + translucent body (works even if blur is weak) */
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--t1, #fff) 14%, transparent) 0%, transparent 42%),
    color-mix(in srgb, var(--bg3, #1C2130) var(--hg-glass-fill-pct), transparent);
  backdrop-filter: blur(var(--hg-glass-blur)) saturate(var(--hg-glass-sat));
  -webkit-backdrop-filter: blur(var(--hg-glass-blur)) saturate(var(--hg-glass-sat));
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.26),
    0 2px 6px rgba(0, 0, 0, 0.14),
    inset 0 0 0 1px color-mix(in srgb, var(--t1, #fff) var(--hg-glass-rim-pct), transparent),
    inset 0 1px 0 color-mix(in srgb, var(--t1, #fff) 36%, transparent),
    inset 0 -1px 0 color-mix(in srgb, #000 28%, transparent);
  align-items: center;
  justify-content: space-around;
  gap: 0;
  pointer-events: auto;
  transform: none;
  opacity: 1;
  overflow: visible;
  transition: transform 200ms ease-out, opacity 200ms ease-out;
}
.hg-bottom-nav::before {
  content: none;
  display: none;
}
html[data-theme="light"] .hg-bottom-nav {
  --hg-nav-icon-active: var(--blue-l, #2B5F9E);
  --hg-nav-muted: var(--t2, #6B5E4E);
  --hg-nav-pill-active: color-mix(in srgb, var(--blue-l, #2B5F9E) 14%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--t1, #1A1510) 6%, transparent) 0%, transparent 40%),
    color-mix(in srgb, var(--bg2, #FDFAF5) 52%, transparent);
  border-color: transparent;
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.08),
    inset 0 0 0 1px color-mix(in srgb, var(--t1, #1A1510) 12%, transparent);
}
/* ── Навигация как в Telegram (референс заказчика) ────────────────
   Активный таб — ОДНА залитая капсула, охватывающая иконку И подпись
   (а не диск только под иконкой). Подпись всегда видна, у активного —
   акцентный цвет. */
.hg-bottom-nav button {
  position: relative;
  flex: 1;
  width: auto;
  height: 100%;
  min-height: 0;
  border: 0;
  border-radius: 22px;
  background: transparent;
  color: var(--hg-nav-muted);
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font: 500 11px/1 var(--hg-font);
  letter-spacing: 0;
  transition: color 180ms var(--hg-ease-std), background 180ms var(--hg-ease-std);
}
.hg-bottom-nav button:active { transform: scale(0.96); }
.hg-bottom-nav button:focus { outline: none; }
.hg-bottom-nav button:focus-visible:not(.is-active) {
  outline: 2px solid var(--hg-accent-chat);
  outline-offset: 2px;
  border-radius: 14px;
}
.hg-bottom-nav button.is-active:focus-visible {
  outline: 2px solid var(--hg-accent-chat);
  outline-offset: 2px;
  border-radius: 22px;
}
.hg-bottom-nav .hg-nav-ico {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  overflow: visible;
  background: transparent;
}
/* Диск под иконкой больше не используем — активную форму рисует сама кнопка. */
.hg-bottom-nav .hg-nav-ico::before { content: none; display: none; }
.hg-bottom-nav button.is-active {
  color: var(--hg-nav-icon-active);
  /* Залитая капсула активного таба (TG pill). */
  background: var(--hg-nav-pill-active, color-mix(in srgb, var(--blue-l, #4A90D9) 20%, transparent)) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue-l, #4A90D9) 26%, transparent) !important;
  margin: 6px 2px;
  height: calc(100% - 12px);
}
.hg-bottom-nav button.is-active .hg-nav-label {
  color: var(--hg-nav-icon-active) !important;
  font-weight: 600;
}
.hg-bottom-nav .hg-nav-badge {
  font: 700 11px/18px var(--hg-font);
  letter-spacing: -0.02em;
}
.hg-bottom-nav button:hover:not(.is-active) {
  color: var(--hg-text);
}
.hg-bottom-nav button.is-active .hg-nav-ico svg {
  color: var(--hg-nav-icon-active);
  stroke: currentColor;
  fill: none;
  stroke-width: 2 !important;
}
.hg-bottom-nav button:hover:not(.is-active) {
  color: var(--hg-text);
}
.hg-bottom-nav .hg-nav-ico svg {
  position: relative;
  z-index: 1;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px;
  min-height: 24px;
  flex-shrink: 0;
  stroke-width: 1.9 !important;
  fill: none;
  transition: color 180ms var(--hg-ease-std), stroke-width 180ms var(--hg-ease-std);
}
.hg-bottom-nav .hg-nav-label {
  position: relative;
  z-index: 1;
  font: 500 11px/1 var(--hg-font);
  letter-spacing: 0;
}
.hg-bottom-nav .hg-nav-badge {
  position: absolute;
  top: -5px;
  right: -10px;
  z-index: 2;
  box-sizing: border-box;
  width: auto;
  min-width: 20px;
  height: 18px !important;
  min-height: 18px;
  max-height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--hg-tg-badge);
  color: #fff;
  font-family: var(--hg-font);
  font-weight: 700;
  font-size: 10px;
  line-height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: none;
  transform-origin: center;
  animation: hg-nav-badge-in 180ms ease-out;
  box-shadow: 0 0 0 1.5px rgba(30, 30, 32, 0.85);
}
html[data-theme="light"] .hg-bottom-nav .hg-nav-badge {
  background: var(--hg-tg-badge);
  box-shadow: 0 0 0 1.5px rgba(249, 249, 249, 0.9);
}
.hg-bottom-nav .hg-nav-badge[hidden] {
  display: none !important;
}
/* Contacts active = same as Chats (no green special-case) */
.hg-bottom-nav .hg-nav-dot {
  position: absolute;
  top: -1px;
  right: -3px;
  z-index: 2;
  width: 14px !important;
  height: 14px !important;
  min-width: 14px;
  border-radius: 50%;
  background: var(--hg-tg-badge);
  color: #fff;
  font: 700 9px/14px var(--hg-font);
  text-align: center;
  box-shadow: none;
  pointer-events: none;
}
.hg-bottom-nav .hg-nav-dot[hidden] { display: none !important; }
.hg-bottom-nav .hg-nav-badge {
  min-width: 16px;
  height: 16px !important;
  min-height: 16px;
  max-height: 16px;
  max-width: 28px;
  padding: 0 4px;
  font-size: 10px;
  line-height: 16px;
  top: -2px;
  right: -4px;
  box-shadow: none;
  letter-spacing: -0.04em;
}
.hg-bottom-nav button.is-active .hg-nav-badge {
  background: var(--hg-tg-badge);
  color: #fff;
  border: 0;
}
.hg-nav-search {
  --hg-glass-fill-pct: 82%;
  --hg-glass-blur: 40px;
  --hg-glass-rim-pct: 12%;
  --hg-glass-sat: 220%;
  position: fixed;
  right: var(--hg-tg-nav-inset);
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  width: var(--hg-tg-fab-size);
  height: var(--hg-tg-fab-size);
  min-width: var(--hg-tg-fab-size);
  min-height: var(--hg-tg-fab-size);
  border: 0;
  border-radius: 50% !important;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--t1, #fff) 16%, transparent) 0%, transparent 45%),
    color-mix(in srgb, var(--bg3, #1C2130) var(--hg-glass-fill-pct), transparent);
  backdrop-filter: blur(var(--hg-glass-blur)) saturate(var(--hg-glass-sat));
  -webkit-backdrop-filter: blur(var(--hg-glass-blur)) saturate(var(--hg-glass-sat));
  color: var(--hg-text, #fff);
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--t1, #fff) var(--hg-glass-rim-pct), transparent),
    inset 0 1px 0 color-mix(in srgb, var(--t1, #fff) 36%, transparent),
    0 10px 28px rgba(0, 0, 0, 0.28),
    0 2px 6px rgba(0, 0, 0, 0.16);
  outline: none;
  filter: none;
  isolation: auto;
  overflow: visible;
  cursor: pointer;
  z-index: 1301;
  transform: none;
  overflow: hidden;
  isolation: isolate;
  transition: transform 200ms ease-out, opacity 200ms ease-out;
}
.hg-nav-search::before {
  content: none;
  display: none;
}
.hg-nav-search svg,
.hg-nav-search > * { position: relative; z-index: 1; }
html[data-theme="light"] .hg-nav-search {
  --hg-tg-fab-bg: color-mix(in srgb, var(--bg2, #FDFAF5) 90%, transparent);
  color: var(--t1, #1A1510);
  border-color: var(--brd-m, rgba(139, 120, 90, 0.14));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.hg-nav-search svg { width: 22px; height: 22px; stroke-width: 2; }
@keyframes hg-nav-badge-in {
  from { transform: scale(0.7); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* Presence strip visibility is controlled by .hg-presence-wrap[hidden] /
   renderPresenceStrip() (Telegram-like "N в сети" row under the header). */
.hg-presence-wrap { }

/* Contacts (screen 3) */
.hg-contacts {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  /* transparent so floating nav glass can blur list rows, not solid panel fill */
  background: transparent;
}
.hg-contacts-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--hg-head-h);
  padding: 0 12px;
  border-bottom: 1px solid var(--hg-border);
}
.hg-contacts-head h2 {
  margin: 0;
  text-align: center;
  font: 700 var(--hg-font-screen) var(--hg-font);
  color: var(--hg-text);
}
.hg-link-btn {
  border: 0;
  background: transparent;
  color: var(--hg-accent-chat);
  font: 500 15px/1.2 var(--hg-font);
  cursor: pointer;
  justify-self: start;
  padding: 6px 4px;
}
.hg-contacts-head .hg-icon-btn {
  justify-self: end;
  color: var(--hg-accent-chat);
}
.hg-contacts .hg-search { margin: 8px 12px; }
.hg-contacts-body {
  flex: 1;
  min-height: 0;
  display: flex;
  position: relative;
}
.hg-contacts-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 0 16px;
}
.hg-contact-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: var(--hg-tg-contact-row-h);
  padding: 0 16px;
  border: 0;
  border-left: 2px solid transparent;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
}
/* Force same active wash as chats (specificity after contact-row base) */
.hg-contacts-list .hg-contact-row.is-active,
.hg-contacts .hg-contact-row.is-active {
  background: var(--hg-active-row);
  border-left: 2px solid var(--hg-active-edge, var(--blue-l, #4A90D9));
}
.hg-contacts-list .hg-contact-row:hover,
.hg-contacts .hg-contact-row:hover {
  background: var(--hg-hover);
}
.hg-contacts-list .hg-contact-row.is-active:hover {
  background: var(--hg-active-row);
}
.hg-contact-av {
  width: var(--hg-av-contact);
  height: var(--hg-av-contact);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 14px/1 var(--hg-font);
  color: #fff;
  flex: 0 0 auto;
}
.hg-contact-meta { min-width: 0; flex: 1; }
.hg-contact-name {
  /* Дизайн-ревью: имя контакта — 17/600 (TG-канон S02/S12). */
  font: 600 17px/1.25 var(--hg-font);
  color: var(--hg-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hg-contact-status {
  font: 400 14px/1.3 var(--hg-font);
  color: var(--hg-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Contacts without an existing chat → «Пригласить» instead of open-chat. */
.hg-contact-invite {
  flex: 0 0 auto;
  font: 600 12px/1 var(--hg-font);
  color: var(--hg-accent-chat, var(--blue-l, #4A90D9));
  border: 1px solid color-mix(in srgb, var(--blue-l, #4A90D9) 45%, transparent);
  border-radius: 999px;
  padding: 6px 12px;
}
.hg-contact-row.is-invite:hover { background: var(--hg-hover); }
/* Journal звонков (единая вкладка «Звонки») рендерит phone_ui.js своими
   .ph-ios-* классами — отдельный дубль .hg-calls/.hg-call-* удалён. */
.hg-alpha-index {
  position: absolute;
  right: 2px;
  top: 8px;
  bottom: 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 16px;
  pointer-events: none;
  z-index: 2;
}
.hg-alpha-index span {
  font: 600 9px/1 var(--hg-font);
  color: var(--hg-accent-chat);
}

/* Settings / profile — Telegram iOS */
.hg-settings {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  background: var(--hg-panel, var(--bg2));
  padding: 8px 16px calc(92px + env(safe-area-inset-bottom, 0px));
  gap: 14px;
}
/* CRIT: flex-column scroller — children must not shrink below content.
   Without flex:0 0 auto (and with overflow:hidden on cards) min-height:auto
   collapses to 0 and cards squash into strips, text slipping under the
   rounded plates. Same class of bug already fixed in the doc registry
   (doc-hub.css .dh-drawer__body > * { flex: 0 0 auto }). */
.hg-settings > * {
  flex: 0 0 auto;
  min-height: 0;
}
html[data-theme="light"] .hg-settings { background: var(--hg-bg, var(--bg1, #F4EFE6)); }
.hg-settings.is-root .hg-settings-title {
  font: 600 17px/1.2 var(--hg-font);
  letter-spacing: 0;
}
.hg-settings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 2px 8px;
}
.hg-settings-title {
  font: 700 28px/1.15 var(--hg-font);
  color: var(--hg-text);
  letter-spacing: -0.3px;
}
.hg-settings-edit {
  border: 0;
  background: transparent;
  color: var(--hg-accent-chat, #0A84FF);
  font: 500 17px/1.2 var(--hg-font);
  cursor: pointer;
  padding: 6px 4px;
}
.hg-settings-value {
  color: var(--hg-muted, #8E8E93);
  font: 400 15px/1.2 var(--hg-font);
  margin-left: auto;
  padding-right: 4px;
}
.hg-settings-ico.is-grey,
.hg-settings-ico.is-gray { background: color-mix(in srgb, var(--t2, #8E8E93) 16%, transparent); color: color-mix(in srgb, var(--t2, #8E8E93) 80%, var(--t1, #fff)); }
.hg-settings-ico.is-yellow { background: color-mix(in srgb, var(--warn, var(--amber, #D4A843)) 18%, transparent); color: color-mix(in srgb, var(--warn, var(--amber, #D4A843)) 90%, var(--t1, #fff)); }
.hg-settings-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 0 4px;
}
.hg-settings-profile.is-clickable {
  cursor: pointer;
}
.hg-settings-av {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 40px/1 var(--hg-font);
  color: #fff;
  background-size: cover;
  background-position: center;
}
.hg-settings-name {
  font: 700 28px/1.15 var(--hg-font);
  color: var(--hg-text);
  text-align: center;
  letter-spacing: -0.3px;
}
.hg-settings-sub {
  font: 400 15px/1.3 var(--hg-font);
  color: #8E8E93;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}
.hg-settings-shield {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 18px;
  border-radius: 3px 3px 8px 8px;
  background: #3390EC;
  color: #fff;
  font: 700 10px/1 var(--hg-font);
}
.hg-settings-alert {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
}
/* Override opaque data-role=card for settings glass groups */
.hg-settings-alert.hg-glass[data-role="card"],
.hg-settings-card.hg-glass[data-role="card"] {
  --hg-glass-fill-pct: 70%;
  --hg-glass-blur: 28px;
  --hg-glass-rim-pct: 12%;
  --hg-glass-radius: 14px;
  --hg-glass-sat: 180%;
  background: color-mix(in srgb, var(--bg3, #1C2130) var(--hg-glass-fill-pct), transparent);
  -webkit-backdrop-filter: blur(var(--hg-glass-blur)) saturate(var(--hg-glass-sat));
          backdrop-filter: blur(var(--hg-glass-blur)) saturate(var(--hg-glass-sat));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t1, #fff) var(--hg-glass-rim-pct), transparent);
  border: 0;
  border-bottom: 0;
}
.hg-settings-alert-head {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px 4px;
}
.hg-settings-alert-bang {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--hg-danger, var(--red, #C8293B)); color: #fff;
  font: 700 13px/22px var(--hg-font); text-align: center; flex: 0 0 auto;
}
.hg-settings-alert-title {
  font: 600 15px/1.25 var(--hg-font); color: #fff;
}
.hg-settings-alert-body {
  padding: 0 14px 8px 46px;
  font: 400 13px/1.3 var(--hg-font); color: #8E8E93;
}
.hg-settings-alert-link {
  border: 0; background: transparent; color: var(--hg-accent-chat, var(--blue-l, #4A90D9));
  font: inherit; padding: 0; cursor: pointer;
}
.hg-settings-alert-action {
  width: 100%; min-height: 40px; height: auto; border: 0; border-top: 0.5px solid rgba(84, 84, 88, 0.45);
  background: transparent; color: var(--hg-accent-chat, var(--blue-l, #4A90D9));
  font: 400 16px/1.2 var(--hg-font); cursor: pointer;
  overflow-wrap: anywhere;
}
.hg-settings-actions {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin: 16px 0 4px;
}
.hg-settings-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  color: var(--hg-text);
  font: 500 11px/1.2 var(--hg-font);
  cursor: pointer;
  min-width: 56px;
}
.hg-settings-action-ico {
  --hg-glass-fill-pct: 82%;
  --hg-glass-blur: 40px;
  --hg-glass-rim-pct: 12%;
  --hg-glass-sat: 180%;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--bg3, #1C2130) var(--hg-glass-fill-pct), transparent);
  border: 0;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t1, #fff) var(--hg-glass-rim-pct), transparent);
  backdrop-filter: blur(var(--hg-glass-blur)) saturate(var(--hg-glass-sat));
  -webkit-backdrop-filter: blur(var(--hg-glass-blur)) saturate(var(--hg-glass-sat));
  color: var(--hg-accent-chat);
}
.hg-settings-action-ico svg { width: 22px; height: 22px; stroke: currentColor; }
.hg-fx-toggle {
  display: flex;
  gap: 6px;
  padding: 0 12px 12px;
}
.hg-fx-btn {
  flex: 1;
  border: 0.5px solid var(--hg-border);
  border-radius: 10px;
  background: transparent;
  color: var(--hg-muted);
  font: 500 12px/1.2 var(--hg-font);
  padding: 8px 6px;
  cursor: pointer;
}
.hg-fx-btn.is-active {
  /* Канон DS §9.9: gold только в rail. Активная кнопка — акцент чата. */
  background: color-mix(in srgb, var(--blue-l, #4A90D9) 16%, transparent);
  color: var(--hg-text);
  border-color: color-mix(in srgb, var(--blue-l, #4A90D9) 55%, transparent);
}
.hg-settings-row--static { cursor: default; }
.hg-settings-row--static:hover { background: transparent; }
.hg-settings-photo-btn {
  margin-top: 6px;
  width: 100%;
  border: 0;
  border-radius: 12px;
  background: var(--hg-elev, var(--bg3, #1C2130));
  color: var(--hg-accent-chat);
  font: 500 16px/1.2 var(--hg-font);
  padding: 12px 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
html[data-theme="light"] .hg-settings-photo-btn { background: var(--bg2, #FDFAF5); }
.hg-settings-photo-btn svg { width: 20px; height: 20px; stroke: currentColor; }
.hg-settings-card {
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
  margin: 0;
}
.hg-settings-card:not(.hg-glass) {
  background: #1c1c1e;
}
html[data-theme="light"] .hg-settings-card:not(.hg-glass) {
  background: var(--bg3, #EDE8DC);
  box-shadow: none;
}
html[data-theme="light"] .hg-settings-card.hg-glass[data-role="card"],
html[data-theme="light"] .hg-settings-alert.hg-glass[data-role="card"] {
  background: color-mix(in srgb, var(--bg3, #EDE8DC) 78%, transparent);
}
.hg-settings-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 52px;
  padding: 0 14px;
  border: 0;
  border-bottom: 0.5px solid var(--brd-m, rgba(255, 255, 255, 0.08));
  background: transparent;
  color: var(--hg-text);
  cursor: pointer;
  text-align: left;
  font: 400 17px/1.25 var(--hg-font);
}
.hg-settings-row:last-child { border-bottom: 0; }
.hg-settings-row:hover { background: rgba(255, 255, 255, 0.04); }
.hg-settings-ico {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  color: var(--hg-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  /* ТЗ §1.4: единый стиль иконок — мягкий tint-фон, а не плашка Material. */
  background: color-mix(in srgb, var(--t1, #fff) 8%, transparent);
}
.hg-settings-ico svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.75; }
/* Единая толщина линий и приглушённые тона (не «радуга» Material-плиток). */
.hg-settings-ico.is-red { background: color-mix(in srgb, var(--red, #C8293B) 16%, transparent); color: color-mix(in srgb, var(--red, #C8293B) 88%, var(--t1, #fff)); }
.hg-settings-ico.is-blue { background: color-mix(in srgb, var(--blue-l, #4A90D9) 16%, transparent); color: color-mix(in srgb, var(--blue-l, #4A90D9) 88%, var(--t1, #fff)); }
.hg-settings-ico.is-green { background: color-mix(in srgb, var(--ok, #2D8659) 16%, transparent); color: color-mix(in srgb, var(--ok, #2D8659) 88%, var(--t1, #fff)); }
.hg-settings-ico.is-orange { background: color-mix(in srgb, var(--warn, #D4A843) 18%, transparent); color: color-mix(in srgb, var(--warn, #D4A843) 90%, var(--t1, #fff)); }
.hg-settings-ico.is-purple { background: color-mix(in srgb, var(--purple, #8B5CF6) 16%, transparent); color: color-mix(in srgb, var(--purple, #8B5CF6) 84%, var(--t1, #fff)); }
.hg-settings-ico.is-cyan { background: color-mix(in srgb, var(--info, #3B82F6) 16%, transparent); color: color-mix(in srgb, var(--info, #3B82F6) 88%, var(--t1, #fff)); }
.hg-settings-ico.is-gray { background: color-mix(in srgb, var(--t2, #8E8E93) 16%, transparent); color: color-mix(in srgb, var(--t2, #8E8E93) 80%, var(--t1, #fff)); }
.hg-settings-label { flex: 1; min-width: 0; }
.hg-settings-chev {
  color: #636366;
  font-size: 18px;
  line-height: 1;
}
.hg-settings-logout {
  margin: 8px auto 16px;
  width: 100%;
  max-width: none;
  border: 0;
  background: var(--hg-elev, var(--bg3, #1C2130));
  color: var(--hg-danger);
  font: 400 17px/1.3 var(--hg-font);
  padding: 14px 16px;
  cursor: pointer;
  text-align: center;
  border-radius: 12px;
}
html[data-theme="light"] .hg-settings-logout { background: var(--bg2, #FDFAF5); }
.hg-settings-logout:hover { background: rgba(255, 69, 58, 0.08); }
.hg-contact-letter {
  padding: 8px 16px 4px;
  font: 600 13px/1.2 var(--hg-font);
  color: var(--hg-muted);
  position: sticky; top: 0;
  background: var(--hg-panel);
  z-index: 2;
}
.hg-status-dot {
  display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  margin-right: 6px; vertical-align: middle;
  background: var(--hg-online);
}
.hg-status-dot.is-away { background: #F59E0B; }
.hg-status-dot.is-busy { background: #EF4444; }
.hg-status-dot.is-off { background: var(--hg-muted); }
.hg-poll {
  min-width: 200px; max-width: 280px;
}
.hg-poll-title { font: 600 15px/1.3 var(--hg-font); margin-bottom: 8px; }
.hg-poll-opt {
  position: relative; margin: 6px 0; padding: 8px 10px;
  border-radius: 10px; background: rgba(255,255,255,0.04);
  font: 400 14px/1.3 var(--hg-font); cursor: pointer; overflow: hidden;
}
.hg-poll-opt .hg-poll-bar {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: rgba(82, 136, 193, 0.25);
  width: 0; transition: width 300ms ease;
  z-index: 0;
}
.hg-poll-opt span { position: relative; z-index: 1; }
.hg-msgs {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.hg-msgs::-webkit-scrollbar { width: 6px; }
.hg-msgs::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.15);
  border-radius: 3px;
}

/* Phase 7.5 micro-interactions (bottom-nav timings owned by P9 block above) */
.hg-rail-btn,
.hg-icon-btn,
.hg-tool,
.hg-send {
  transition: color var(--hg-dur-tab) var(--hg-ease-ui),
    background var(--hg-dur-tab) var(--hg-ease-ui),
    opacity var(--hg-dur-tab) var(--hg-ease-ui);
}
.hg-scroll-fab {
  transition: opacity 0.2s var(--hg-ease-ui), transform 0.2s var(--hg-ease-ui);
}

body.hg-dock-open { padding-right: calc(var(--hg-panel-w) + var(--hg-rail-w) + 24px); }
body.hg-dock-collapsed { padding-right: calc(var(--hg-rail-w) + 24px); }

/* ── Правые выезжающие панели: смещаем ЛЕВЕЕ дока «Хугинн», чтобы док не
   перекрывал их край (образец — реестр документов .dh-drawer). Панель выезжает
   из-за дока и встаёт вплотную к нему. На узких экранах (≤768px) док — иная
   раскладка, поэтому правила только в desktop-диапазоне. */
@media (min-width: 769px) {
  body.hg-dock-open :is(.cr-d.drawer, .bc-drawer, .pk3-drawer, .wh2-cart-dr) {
    right: calc(var(--hg-panel-w, 400px) + var(--hg-rail-w, 56px) + 24px);
  }
  body.hg-dock-collapsed :is(.cr-d.drawer, .bc-drawer, .pk3-drawer, .wh2-cart-dr) {
    right: calc(var(--hg-rail-w, 56px) + 24px);
  }

  /* FAB корзины склада — тот же закон: держим левее дока, иначе правый рейл
     наполовину накрывает кнопку (жалоба заказчика 24.10.2026). */
  body.hg-dock-open .wh2-fab {
    right: calc(var(--hg-panel-w, 400px) + var(--hg-rail-w, 56px) + 24px);
  }
  body.hg-dock-collapsed .wh2-fab {
    right: calc(var(--hg-rail-w, 56px) + 24px);
  }
}


/* P12: old Mimir FAB is gone — entry is rail only. Never paint or hit-test over Huginn. */
#mimirFab,
.mimir-fab,
#mimirFabMenu {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
}

@media (max-width: 768px) {
  body.hg-dock-open, body.hg-dock-collapsed { padding-right: 0; }
  .hg-panel { width: min(100vw, 400px); }
  .hg-rail { display: none; }
  .hg-bottom-nav { display: flex; }
  .hg-nav-search { display: inline-flex; }
  .hg-chrome.is-composer-focus .hg-bottom-nav,
  .hg-chrome.is-recording .hg-bottom-nav,
  .hg-chrome.is-composer-focus .hg-nav-search,
  .hg-chrome.is-recording .hg-nav-search,
  .hg-chrome.is-thread .hg-bottom-nav,
  .hg-chrome.is-thread .hg-nav-search,
  body.hg-composer-focus .hg-bottom-nav,
  body.hg-recording .hg-bottom-nav,
  body.hg-composer-focus .hg-nav-search,
  body.hg-recording .hg-nav-search,
  body.hg-thread-open .hg-bottom-nav,
  body.hg-thread-open .hg-nav-search {
    transform: translateY(120%);
    opacity: 0;
    pointer-events: none;
  }
  .hg-chrome:not(.is-composer-focus):not(.is-recording):not(.is-thread) .hg-list,
  .hg-chrome:not(.is-composer-focus):not(.is-recording):not(.is-thread) .hg-contacts-list,
  .hg-chrome:not(.is-composer-focus):not(.is-recording):not(.is-thread) .hg-settings {
    padding-bottom: calc(var(--hg-tg-nav-h) + 24px + env(safe-area-inset-bottom, 0px));
  }
  .hg-chrome:not(.is-composer-focus):not(.is-recording):not(.is-thread) .hg-contacts {
    padding-bottom: 0;
  }
  .hg-chrome.is-composer-focus .hg-composer,
  .hg-chrome.is-recording .hg-composer {
    padding-bottom: 12px;
  }
  .hg-chrome.is-thread .hg-msgs {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px) + 16px) !important;
  }
  .hg-chrome:not(.is-thread):not(.is-composer-focus):not(.is-recording) .hg-msgs {
    padding-bottom: calc(56px + 12px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .hg-composer {
    /* keep absolute-over-msgs from base rule — relative here killed underlap */
    position: absolute;
    z-index: 120;
  }
  .hg-chrome {
    position: fixed;
    inset: 0;
    border-radius: 0;
    /* iPhone: не прячем шапку/поиск под чёлкой и не режем по боковым вырезам */
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    box-shadow: none;
    /* overflow:hidden + solid chrome bg kill backdrop-filter on floating nav */
    overflow: visible;
    background: transparent;
    flex-direction: column;
    transform: none;
    opacity: 1;
  }
  .hg-chrome .hg-panel {
    /* visible so fixed nav backdrop-filter can sample list pixels (hidden clips backdrop root) */
    overflow: visible;
    background: var(--hg-panel, var(--bg2, #151922));
  }
  .hg-chrome.is-thread .hg-panel {
    background: var(--hg-thread-bg, var(--bg2, #151922));
  }
  .hg-contacts-list,
  .hg-list {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* TG contacts have no Cyrillic alpha rail */
  .hg-alpha-index { display: none !important; }
  .hg-chrome.is-offscreen {
    transform: none;
    opacity: 1;
  }
  /* Panel fills viewport so list paints UNDER floating glass nav (backdrop-filter needs content behind) */
  .hg-panel {
    width: 100%;
    border-left: 0;
    padding-bottom: 0;
  }
  /* Padding ONLY on scrollable lists — NOT on .hg-contacts wrapper
     (wrapper padding left a dead gap under floating nav → backdrop had nothing to blur). */
  /* Enough scroll room to clear last row above nav, but keep rows able to park under glass */
  .hg-list,
  .hg-contacts-list {
    padding-bottom: calc(var(--hg-tg-nav-h) + 12px + env(safe-area-inset-bottom, 0px));
  }
  .hg-contacts,
  .hg-contacts-body {
    padding-bottom: 0;
  }
  .hg-contacts,
  .hg-contacts-body,
  .hg-contacts-list {
    min-height: 0;
  }
  .hg-contacts-body,
  .hg-contacts-list {
    /* extend paint box under floating nav */
    margin-bottom: 0;
  }
  .hg-chrome.is-collapsed .hg-panel {
    width: 100%;
    min-width: 0;
    opacity: 1;
    pointer-events: auto;
    overflow: visible;
    border: 0;
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hg-chrome *,
  .hg-bottom-nav *,
  .hg-composer * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Power-saving F0: #huginnDock.hg-power-* (DS); html[data-hg-fx] bridge for ROUND-7 */
#huginnDock.hg-power-reduced,
html[data-hg-fx="reduced"] {
  --hg-glass-blur: 14px;
  --hg-glass-fill-pct: 80%;
  --hg-glass-sat: 120%;
  --hg-tg-nav-blur: 20px;
  --hg-tg-header-blur: 16px;
  --hg-tg-composer-blur: 20px;
  --hg-dur-bubble: 120ms;
  --hg-dur-menu: 100ms;
  --hg-dur-tab: 100ms;
}
#huginnDock.hg-power-off .hg-glass,
#huginnDock.hg-power-off .hg-composer-row .hg-input-wrap,
#huginnDock.hg-power-off .hg-composer-row .hg-tool#hgAttach,
#huginnDock.hg-power-off .hg-composer-row .hg-tool.hg-attach-out,
#huginnDock.hg-power-off .hg-bottom-nav::before,
#huginnDock.hg-power-off .hg-quick-react,
#huginnDock.hg-power-off .hg-float,
#huginnDock.hg-power-off .hg-attach-menu,
#huginnDock.hg-power-off .hg-sheet,
#huginnDock.hg-power-off .hg-lightbox,
#huginnDock.hg-power-off .hg-lightbox-close,
#huginnDock.hg-power-off .hg-thread-title,
#huginnDock.hg-power-off .hg-back-cluster,
#huginnDock.hg-power-off .hg-back-btn,
#huginnDock.hg-power-off .hg-thread-head .hg-icon-btn#hgBack,
#huginnDock.hg-power-off .hg-pin-banner,
#huginnDock.hg-power-off .hg-nav-search,
html[data-hg-fx="off"] .hg-thread-title,
html[data-hg-fx="off"] .hg-back-cluster,
html[data-hg-fx="off"] .hg-back-btn,
html[data-hg-fx="off"] .hg-thread-head .hg-icon-btn#hgBack,
html[data-hg-fx="off"] .hg-pin-banner,
html[data-hg-fx="off"] .hg-nav-search,
#huginnDock.hg-power-off .hg-settings-action-ico,
html[data-hg-fx="off"] .hg-glass,
html[data-hg-fx="off"] .hg-composer-row .hg-input-wrap,
html[data-hg-fx="off"] .hg-composer-row .hg-tool#hgAttach,
html[data-hg-fx="off"] .hg-composer-row .hg-tool.hg-attach-out,
html[data-hg-fx="off"] .hg-bottom-nav::before,
html[data-hg-fx="off"] .hg-quick-react,
html[data-hg-fx="off"] .hg-float,
html[data-hg-fx="off"] .hg-attach-menu,
html[data-hg-fx="off"] .hg-sheet,
html[data-hg-fx="off"] .hg-lightbox,
html[data-hg-fx="off"] .hg-lightbox-close,
html[data-hg-fx="off"] .hg-settings-action-ico {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: var(--bg3, #1C2130) !important;
}
#huginnDock.hg-power-off .hg-bubble,
#huginnDock.hg-power-off .hg-float,
#huginnDock.hg-power-off .hg-quick-react,
#huginnDock.hg-power-off .hg-attach-menu,
html[data-hg-fx="off"] .hg-bubble,
html[data-hg-fx="off"] .hg-float,
html[data-hg-fx="off"] .hg-quick-react,
html[data-hg-fx="off"] .hg-attach-menu {
  animation: none !important;
  transition: none !important;
}
#huginnDock.hg-power-off,
html[data-hg-fx="off"] {
  --hg-glass-fill-pct: 100%;
  --hg-glass-blur: 0px;
  --hg-glass-bg: var(--bg3, #1C2130);
  --hg-glass-shadow: none;
  --hg-tg-nav-bg: var(--bg3, #1C2130);
  --hg-tg-fab-bg: var(--bg3, #1C2130);
  /* Depth & Juice off: глубина → плоский читаемый UI (DS §11 anti-flat rule).
     Важно: значения должны быть ВАЛИДНЫМИ для `box-shadow` композиции
     (`var(--hg-elev-N), var(--hg-inset-hairline)`) — `none` ломает шорткат. */
  --hg-elev-1: 0 0 #0000;
  --hg-elev-2: 0 0 #0000;
  --hg-elev-3: 0 0 #0000;
  --hg-elev-4: 0 0 #0000;
  --hg-glow-accent: 0 0 #0000;
  --hg-glow-accent-soft: 0 0 #0000;
  --hg-grad-surface: none;
  --hg-grad-accent: var(--blue-l, #4A90D9);
  --hg-rim-specular: 0 0 #0000;
  --hg-inset-hairline: inset 0 0 0 1px var(--brd-m, rgba(255,255,255,.08));
}
#huginnDock.hg-power-reduced,
html[data-hg-fx="reduced"] {
  /* Depth & Juice reduced: глубина мягче, свечение слабее (DS §3.3) */
  --hg-elev-2: 0 2px 6px rgba(0, 0, 0, 0.2);
  --hg-elev-3: 0 6px 18px rgba(0, 0, 0, 0.26);
  --hg-elev-4: 0 10px 28px rgba(0, 0, 0, 0.3);
  --hg-glow-accent: 0 2px 8px color-mix(in srgb, var(--blue-l, #4A90D9) 28%, transparent);
  --hg-glow-accent-soft: 0 1px 6px color-mix(in srgb, var(--blue-l, #4A90D9) 20%, transparent);
}

/* ── Mimir AI thread chrome (§E visual wave) ─────────────────────── */
/* AI badge — inline in thread title and inside AI bubbles.
   ТЗ §1.3: нейтральный серый бейдж вместо акцентного («убрать красный AI»). */
.hg-mimir-badge {
  display: inline-flex; align-items: center;
  font: 600 10px/1 var(--hg-font, inherit);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--hg-muted, var(--t2, #8B96A8));
  background: color-mix(in srgb, var(--t1, #fff) 8%, transparent);
  border-radius: 999px; padding: 3px 7px; margin-left: 6px;
  vertical-align: middle;
}
/* Mimir AI reply bubbles — subtle left-border accent */
.hg-bubble.them.is-ai {
  border-left: 2px solid color-mix(in srgb, var(--t2, #8B96A8) 45%, transparent);
}
/* Thinking indicator pulsing */
.hg-bubble._thinking {
  opacity: 0.65;
  animation: hg-thinking-pulse 1.1s ease-in-out infinite;
}
@keyframes hg-thinking-pulse {
  0%, 100% { opacity: 0.65; }
  50%       { opacity: 0.35; }
}
/* Mimir composer: always hide mic send icon, hide voice/circle attach options */
.hg-composer.is-mimir #hgSend.is-mic  { display: none !important; }
.hg-composer.is-mimir [data-kind="circle"],
.hg-composer.is-mimir [data-kind="voice"] { display: none !important; }

.hg-ai-h2 { font: 600 15px/1.35 var(--hg-font); color: #fff; margin: 8px 0 4px; }
.hg-ai-h3 { font: 600 14px/1.35 var(--hg-font); color: #fff; margin: 6px 0 3px; }
.hg-ai-hr { border: 0; border-top: 1px solid rgba(255, 255, 255, 0.14); margin: 8px 0; }
.hg-ai-li { padding-left: 12px; position: relative; }
.hg-ai-li::before { content: '•'; position: absolute; left: 2px; opacity: 0.6; }
.hg-ai-li-n { font-weight: 600; margin-right: 3px; }
.hg-ai-inline {
  padding: 1px 5px; border-radius: 5px;
  background: rgba(255, 255, 255, 0.10);
  font: 500 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.hg-ai-code {
  margin: 6px 0; padding: 8px 10px; border-radius: 8px;
  background: rgba(0, 0, 0, 0.35); overflow-x: auto;
  font: 400 12px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre;
}
.hg-ai-table { border-collapse: collapse; margin: 6px 0; max-width: 100%; font-size: 12px; }
.hg-ai-table th, .hg-ai-table td {
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 4px 8px; text-align: left; vertical-align: top;
}
.hg-ai-table th { background: rgba(255, 255, 255, 0.06); font-weight: 600; }
.hg-bubble.is-ai .hg-ai-table,
.hg-bubble.is-ai .hg-ai-code { max-width: 100%; }

/* Заголовок sheet'а — канон DS §11.7: h=44, 17/600 по центру, close слева. */
.hg-sheet__header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 44px;
  min-height: 44px;
  flex: 0 0 auto;
  padding: 0 16px;
  font: 600 17px/1.2 var(--hg-font);
  color: var(--hg-text);
  text-align: center;
  border-bottom: 1px solid var(--hg-border);
}
.hg-sheet__header > strong { font: inherit; }
.hg-sheet__header .hg-sheet__close {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--hg-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Compose / chat profile / invite sheets — dock panel only (not fullscreen CRM) */
/* Слой шитов: отдельный контейнер в .hg-chrome, выровнен по #hgPanel и лежит
   ПОВЕРХ неё. Не внутри #hgPanel — иначе renderPanel() (SSE/presence) стирает
   открытый шит. Геометрия = панель (ширина и позиция справа на desktop). */
.hg-sheets-host {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: var(--hg-panel-w);
  max-width: 100%;
  z-index: 4000;
  pointer-events: none;
  overflow: hidden;
}
#huginnDock > .hg-sheets-host > .hg-compose-sheet,
#huginnDock > .hg-sheets-host > .hg-chat-profile,
#huginnDock > .hg-sheets-host > .hg-invite-sheet,
#huginnDock > .hg-sheets-host > .hg-call-sheet,
#huginnDock > .hg-sheets-host > .hg-story-sheet,
#huginnDock > .hg-sheets-host > .hg-ai-sheet,
#huginnDock > .hg-sheets-host > .hg-search-sheet,
#huginnDock > .hg-sheets-host > .hg-forward-sheet,
#huginnDock > .hg-sheets-host > .hg-checklist-sheet,
.hg-chrome > .hg-sheets-host > .hg-compose-sheet,
.hg-chrome > .hg-sheets-host > .hg-chat-profile,
.hg-chrome > .hg-sheets-host > .hg-invite-sheet,
.hg-chrome > .hg-sheets-host > .hg-call-sheet,
.hg-chrome > .hg-sheets-host > .hg-story-sheet {
  position: absolute;
  inset: 0;
  z-index: 4000;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--hg-bg, var(--bg2));
  overflow: hidden;
  opacity: 1;
  pointer-events: auto;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  /* Плавное появление шита (было animation:none → «телепорт», P0 аудита). */
  animation: hg-sheet-in 180ms var(--hg-ease-std, cubic-bezier(.4,0,.2,1));
}
@keyframes hg-sheet-in {
  from { opacity: 0; transform: translateY(10px) scale(0.995); }
  to { opacity: 1; transform: none; }
}

/* ── 1:1 call overlay (inside dock panel) ─────────────────────── */
/* Слой оверлея звонка, если .hg-sheets-host ещё не создан (звонок пришёл
   раньше первого renderPanel). Повторяет геометрию sheets-host, чтобы
   модалка не зависела от порядка инициализации дока. */
.hg-calls-host {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: var(--hg-panel-w);
  max-width: 100%;
  z-index: 4000;
  pointer-events: none;
  overflow: hidden;
}
.hg-calls-host > .hg-call-sheet {
  position: absolute;
  inset: 0;
  z-index: 4000;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  opacity: 1;
  pointer-events: auto;
  animation: hg-sheet-in 180ms var(--hg-ease-std, cubic-bezier(.4,0,.2,1));
}
.hg-call-sheet {
  background: var(--hg-bg, var(--bg2));
}
.hg-call-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, #1B2230 0%, #0B0E13 70%);
}
.hg-call-remote {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
  background: #000;
}
.hg-call-sheet.is-video .hg-call-remote,
.hg-call-stage--active .hg-call-remote { display: block; }
.hg-call-sheet.is-video .hg-call-meta,
.hg-call-stage--active .hg-call-meta { position: absolute; left: 0; right: 0; bottom: 12px; }
.hg-call-meta {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 16px;
  text-align: center;
}
.hg-call-av {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #3B82F6;
  color: #fff;
  font: 700 34px/1 var(--hg-font);
}
.hg-call-name {
  font: 600 20px/1.2 var(--hg-font);
  color: #fff;
  max-width: 90%;
  overflow-wrap: anywhere;
}
.hg-call-status {
  font: 400 14px/1.2 var(--hg-font);
  color: var(--hg-muted, #8e8e93);
  font-variant-numeric: tabular-nums;
}
/* Подсказка «включить звук»: показывается, когда браузер ещё не дал звук
   (autoplay policy — не было жеста). Тап по ней разблокирует AudioContext. */
.hg-call-snd-hint {
  margin-top: 10px;
  padding: 7px 12px;
  border-radius: 999px;
  font: 500 13px/1.2 var(--hg-font);
  color: #fff;
  background: color-mix(in srgb, var(--blue-l, #4A90D9) 86%, #000 6%);
  cursor: pointer;
  user-select: none;
  animation: hg-call-hint-pulse 1.6s ease-in-out infinite;
}
.hg-call-snd-hint:focus-visible {
  outline: 2px solid var(--blue-l, #4A90D9);
  outline-offset: 2px;
}
@keyframes hg-call-hint-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.03); opacity: .92; }
}
@media (prefers-reduced-motion: reduce) {
  .hg-call-snd-hint { animation: none; }
}
.hg-call-controls {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 18px 16px calc(22px + env(safe-area-inset-bottom, 0px));
}
.hg-call-btn {
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(120, 120, 128, 0.28);
  color: #fff;
  font-size: 22px;
}
.hg-call-btn:hover { background: rgba(120, 120, 128, 0.42); }
.hg-call-btn.is-accept { background: var(--ok, #2D8659); }
.hg-call-btn.is-danger { background: var(--hg-danger, var(--red, #FF453A)); }
.hg-call-btn svg { width: 24px; height: 24px; }
.hg-compose-modes {
  display: flex;
  gap: 6px;
  padding: 0 14px 8px;
}
.hg-compose-mode {
  flex: 1;
  height: 32px;
  border: 0;
  border-radius: 10px;
  background: rgba(120, 120, 128, 0.28);
  color: var(--hg-muted, #8e8e93);
  font: 600 13px/1 var(--hg-font);
  cursor: pointer;
}
.hg-compose-mode.is-active {
  background: color-mix(in srgb, var(--hg-accent-chat, #0A84FF) 28%, transparent);
  color: #fff;
}
.hg-compose-invite-cta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 12px 8px;
  padding: 10px 12px;
  border: 0;
  border-radius: 12px;
  background: rgba(10, 132, 255, 0.16);
  color: var(--hg-accent-chat, var(--blue-l, #4A90D9));
  font: 600 13px/1.2 var(--hg-font);
  cursor: pointer;
  text-align: left;
  width: calc(100% - 24px);
}
/* .hg-compose-group-name удалён вместе с режимом «Группа» (решение заказчика). */
.hg-invite-sheet .hg-invite-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
}
/* Поля шита: глобальные app.css/light-theme.css с `!important` (F2 от верификатора)
   бьют эти правила (радиус 8px, фон --bg2). Отбиваем `!important` с более
   высокой специфичностью, оставаясь в CRM-токенах. */
#huginnDock .hg-invite-sheet .hg-invite-fields input,
.hg-chrome .hg-invite-sheet .hg-invite-fields input {
  /* §11.7 .hg-field: h=40, radius 12, фон --bg3 (текст центрируется line-height). */
  height: 40px !important;
  min-height: 40px !important;
  border: 1px solid var(--hg-border, var(--brd-m)) !important;
  border-radius: 12px !important;
  padding: 0 16px !important;
  background: var(--bg3, #1C2130) !important;
  color: var(--hg-text, #fff) !important;
  font: 400 16px/1.2 var(--hg-font) !important;
  box-sizing: border-box;
  box-shadow: none !important;
  outline: none;
}
.hg-invite-sheet .hg-invite-fields input::placeholder { color: color-mix(in srgb, var(--t1, #fff) 55%, transparent); }
.hg-invite-sheet .hg-invite-fields input:focus {
  border-color: var(--blue-l, #4A90D9);
  box-shadow: var(--hg-focus-glow);
}
/* Сегмент-контрол оформляется общим правилом .hg-invite-modes ниже (пилюля). */
.hg-invite-sheet .hg-invite-result {
  margin: 4px 14px 16px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(120, 120, 128, 0.18);
  display: flex;
  flex-direction: column;
  gap: 8px;
  font: 400 13px/1.3 var(--hg-font);
  color: var(--hg-muted, #8e8e93);
}
.hg-invite-sheet .hg-invite-result[hidden] { display: none; }
/* Строка ссылки: поле + кнопка «Скопировать». Показывается ВСЕГДА, чтобы
   приглашение можно было переслать вручную, если автодоставка не удалась. */
.hg-invite-sheet .hg-invite-link-row {
  display: flex;
  gap: 6px;
  align-items: stretch;
}
.hg-invite-sheet .hg-invite-link-input {
  flex: 1 1 auto;
  min-width: 0;
  font: 400 11.5px/1.3 var(--hg-font);
  color: var(--hg-text, #fff);
  background: rgba(120, 120, 128, 0.22);
  border: 0;
  border-radius: 10px;
  padding: 6px 8px;
  cursor: text;
}
.hg-invite-sheet .hg-invite-link-input:focus {
  outline: 2px solid var(--hg-accent-chat, var(--blue-l, #4A90D9));
  outline-offset: 1px;
}
.hg-invite-sheet .hg-invite-download,
.hg-invite-sheet .hg-invite-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  border: 0;
  border-radius: 10px;
  background: rgba(10, 132, 255, 0.18);
  color: var(--hg-accent-chat, var(--blue-l, #4A90D9));
  font: 600 13px/1 var(--hg-font);
  cursor: pointer;
  text-decoration: none;
}
.hg-invite-sheet .hg-invite-submit {
  margin: 8px 14px 16px;
  min-height: 50px;
  border: 0;
  border-radius: 12px;
  /* ТЗ §1.5: CTA = градиент + цветная тень (единый рецепт с экраном «История»). */
  background: var(--hg-grad-accent);
  box-shadow: var(--hg-glow-accent);
  color: #fff;
  font: 600 16px/1.2 var(--hg-font);
  cursor: pointer;
  transition: filter var(--hg-dur-mid) var(--hg-ease-std),
    transform var(--hg-dur-fast) var(--hg-ease-std),
    box-shadow var(--hg-dur-mid) var(--hg-ease-std);
}
.hg-invite-sheet .hg-invite-submit:hover { filter: brightness(1.06); }
.hg-invite-sheet .hg-invite-submit:active { transform: scale(0.98); box-shadow: var(--hg-elev-1); }
.hg-invite-sheet .hg-invite-submit:disabled {
  opacity: 0.45;
  cursor: default;
}
.hg-settings-profile-detail {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 0 16px;
}
.hg-settings-profile-detail .hg-settings-kv {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(120, 120, 128, 0.18);
  flex: 0 0 auto;
  min-width: 0;
}
.hg-settings-profile-detail .hg-settings-k {
  font: 500 11px/1.2 var(--hg-font);
  color: var(--hg-muted, #8e8e93);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.hg-settings-profile-detail .hg-settings-v {
  font: 500 15px/1.3 var(--hg-font);
  color: #fff;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.hg-list-me-btn {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 600 11px/1 var(--hg-font);
  color: #fff;
  flex: 0 0 auto;
}
.hg-compose-search-wrap {
  position: relative;
  margin: 0 12px 8px;
}
.hg-compose-search-wrap .hg-search {
  margin: 0;
  padding-left: 36px;
}
.hg-compose-search-ico {
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  opacity: 0.55;
  pointer-events: none;
  display: inline-flex;
}
.hg-compose-search-ico svg { width: 16px; height: 16px; }
.hg-compose-body {
  flex: 1; min-height: 0;
  display: flex;
  position: relative;
}
.hg-compose-index {
  position: absolute;
  right: 4px; top: 8px; bottom: 8px;
  display: flex; flex-direction: column;
  justify-content: center; gap: 1px;
  font: 600 10px/1.1 var(--hg-font);
  color: var(--hg-accent-chat, var(--blue-l, #4A90D9));
  z-index: 2;
  pointer-events: none;
}
.hg-compose-head,
.hg-profile-head {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  padding: 12px 14px 8px;
}
.hg-profile-head--group {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 16px 16px 10px;
  position: relative;
}
.hg-profile-head--group .hg-profile-back {
  position: absolute; left: 10px; top: 12px; z-index: 5;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(120,120,128,0.36) !important;
  color: #fff !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  border: 0 !important;
  box-shadow: none !important;
}
.hg-profile-back-chevron {
  font: 400 28px/1 var(--hg-font);
  color: #fff;
  transform: translateY(-1px);
}
.hg-profile-head--group .hg-profile-av {
  width: 88px; height: 88px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font: 700 32px/1 var(--hg-font); color: #fff; margin-top: 8px;
}
.hg-profile-titles { width: 100%; text-align: center; }
.hg-profile-head--group .hg-profile-name {
  font: 600 18px/1.25 var(--hg-font); color: #fff; max-width: 90%;
  margin: 0 auto;
}
.hg-profile-head--group .hg-profile-sub {
  font: 400 14px/1.3 var(--hg-font); color: #8E8E93;
}
.hg-profile-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  justify-content: center;
  align-items: stretch;
  margin: 10px auto 4px;
  width: 100%;
  max-width: 360px;
  padding: 0 12px;
  box-sizing: border-box;
}
.hg-profile-act {
  border: 0; background: transparent; color: var(--hg-accent-chat, var(--blue-l, #4A90D9));
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font: 500 12px/1.1 var(--hg-font); cursor: pointer;
  flex: 1 1 0;
  min-width: 0;
}
.hg-profile-act-ico {
  width: 100%;
  height: 46px; border-radius: 11px;
  background: rgba(120,120,128,0.28);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--hg-accent-chat, var(--blue-l, #4A90D9));
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}
.hg-profile-act-ico svg { width: 22px; height: 22px; }
.hg-profile-more-gal {
  position: absolute; right: 10px; top: 12px; z-index: 5;
  width: 36px; height: 36px; border-radius: 50% !important;
  color: var(--hg-accent-chat, var(--blue-l, #4A90D9)) !important;
  background: rgba(120,120,128,0.28) !important;
  font: 700 20px/1 var(--hg-font);
  display: inline-flex; align-items: center; justify-content: center;
}
.hg-compose-head strong { flex: 1; text-align: center; color: #fff; }
.hg-compose-head .hg-icon-btn {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,0.1);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.hg-compose-head #hgComposeDone {
  color: var(--ok-t, var(--ok, #4ADE80));
  font-weight: 700;
}
.hg-compose-head #hgComposeDone:disabled {
  opacity: 0.28;
  cursor: default;
}
.hg-compose-head #hgComposeClose {
  color: #fff;
}
.hg-compose-list,
.hg-profile-body {
  flex: 1;
  overflow: auto;
  padding: 0 10px 24px;
  min-width: 0;
}
.hg-profile-body:has(.hg-shared-grid) {
  padding: 0 0 24px;
}
.hg-chat-profile.is-media-gallery .hg-profile-av,
.hg-chat-profile.is-media-gallery .hg-profile-actions {
  display: none !important;
}
/* Segment may stay for pubs/archive; JS toggles display for files/voice/links */
.hg-chat-profile.is-media-gallery .hg-profile-segment[style*="display: none"] {
  display: none !important;
}
/* Compose / AI sheets: hide floating dock (REF full-bleed modal) */
body.hg-sheet-open .hg-bottom-nav,
body.hg-sheet-open .hg-nav-search,
.hg-compose-sheet ~ .hg-bottom-nav,
body:has(.hg-compose-sheet) .hg-bottom-nav,
body:has(.hg-compose-sheet) .hg-nav-search,
body:has(.hg-ai-sheet) .hg-bottom-nav,
body:has(.hg-ai-sheet) .hg-nav-search {
  display: none !important;
}
.hg-chat-profile.is-media-gallery .hg-profile-head--group {
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 10px 48px 6px;
  gap: 0;
  min-height: 56px;
}
.hg-chat-profile.is-media-gallery .hg-profile-titles {
  flex: 1;
  min-width: 0;
  text-align: center;
  padding: 0 4px;
}
.hg-chat-profile.is-media-gallery .hg-profile-name {
  font: 600 17px/1.2 var(--hg-font);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hg-chat-profile.is-media-gallery .hg-profile-sub {
  width: 100%;
  text-align: center;
  font-size: 13px;
}
.hg-chat-profile.is-media-gallery .hg-profile-more-gal[hidden] {
  display: none !important;
}
.hg-chat-profile.is-media-gallery .hg-profile-more-gal:not([hidden]) {
  display: inline-flex !important;
}
.hg-compose-list { padding-right: 22px; }
.hg-contact-letter {
  background: transparent !important;
  color: #8E8E93 !important;
  font: 600 13px/1.2 var(--hg-font) !important;
  padding: 10px 4px 4px !important;
}
.hg-compose-row { width: 100%; text-align: left; }
.hg-compose-check {
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--hg-muted, #889);
  margin-right: 8px; flex: 0 0 auto;
}
.hg-compose-check.is-on {
  background: var(--hg-accent-chat, #3b82f6);
  border-color: transparent;
}
.hg-profile-av {
  width: 72px; height: 72px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 28px; font-weight: 700; color: #fff;
  margin: 4px auto 0;
}
.hg-profile-name {
  width: 100%; text-align: center; font-size: 20px; font-weight: 700;
}
.hg-profile-sub {
  width: 100%; text-align: center; color: var(--hg-muted, #8a93a6); font-size: 13px;
}
.hg-profile-more-row {
  width: 100%; display: flex; gap: 8px; justify-content: center; margin-top: 8px;
}
.hg-profile-more {
  border: 0; background: rgba(255,255,255,0.06); color: inherit;
  border-radius: 12px; padding: 8px 12px; font: inherit;
}
.hg-profile-tabs {
  display: flex; gap: 6px; padding: 10px 12px; overflow-x: auto;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.hg-profile-tab {
  border: 0; background: transparent; color: var(--hg-muted, #8a93a6);
  padding: 7px 14px; border-radius: 999px; font: inherit; white-space: nowrap;
  font-size: 14px; font-weight: 500;
}
.hg-profile-tab.is-active {
  color: #fff; background: rgba(120,120,128,0.36);
}
.hg-shared-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0 !important; /* beat app.css [class*="-grid"] gap:20px !important */
  column-gap: 0 !important;
  row-gap: 0 !important;
  background: var(--hg-bg, var(--bg2)); width: 100%;
  margin: 0; padding: 0;
}
.hg-chat-profile.is-media-gallery .hg-profile-segment {
  display: none !important; /* TG compact media: no pubs/archive strip */
}
.hg-chat-profile.is-media-gallery .hg-profile-back,
.hg-chat-profile.is-media-gallery .hg-profile-more-gal {
  background: rgba(120,120,128,0.32) !important;
}
.hg-chat-profile.is-media-gallery .hg-profile-tabs {
  padding: 6px 8px 8px;
  background: transparent;
}
.hg-chat-profile.is-media-gallery .hg-profile-tab.is-active {
  border-radius: 999px;
  background: rgba(120,120,128,0.42);
  box-shadow: none;
}
.hg-shared-cell {
  aspect-ratio: 1; border: 0; padding: 0; margin: 0;
  background: var(--bg3, #1C2130); overflow: hidden;
  border-radius: 0 !important;
  box-shadow: inset 0 0 0 0.5px #000;
}
.hg-profile-segment {
  display: flex;
  margin: 8px 16px 0;
  padding: 3px;
  gap: 2px;
  border-radius: 20px;
  overflow: hidden;
}
.hg-profile-seg {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--hg-muted, #8a93a6);
  padding: 8px 10px;
  border-radius: 18px;
  font: 600 14px/1.1 var(--hg-font);
  cursor: pointer;
}
.hg-profile-seg.is-active {
  color: var(--t1, #fff);
  background: color-mix(in srgb, var(--bg3, #1C2130) 88%, var(--t1, #fff));
}
.hg-member-menu .hg-member-preview {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 12px 8px;
  border-bottom: 0.5px solid var(--brd-m, rgba(255,255,255,0.08));
  margin-bottom: 4px;
}
.hg-member-menu .hg-muted { color: var(--hg-muted); font-size: 12px; }
.hg-attach-menu button.is-danger,
.hg-profile-menu button.is-danger,
.hg-member-menu button.is-danger {
  color: var(--hg-danger, #FF453A);
}
/* Profile overlays: glass readable on OLED (not solid slab) */
.hg-chat-profile .hg-attach-menu.hg-profile-menu,
.hg-chat-profile .hg-attach-menu.hg-sound-menu,
.hg-chat-profile .hg-attach-menu.hg-member-menu {
  left: 20px;
  right: 20px;
  bottom: auto;
  top: 42%;
  min-width: 0;
  --hg-glass-fill-pct: 52%;
  --hg-glass-blur: 40px;
  --hg-glass-rim-pct: 18%;
  background: color-mix(in srgb, rgba(44, 44, 46, 0.78) 70%, transparent);
  backdrop-filter: blur(40px) saturate(200%);
  -webkit-backdrop-filter: blur(40px) saturate(200%);
  box-shadow:
    inset 0 0.5px 0 rgba(255, 255, 255, 0.22),
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.14),
    0 16px 48px rgba(0, 0, 0, 0.55);
}
.hg-checklist {
  min-width: 200px;
  padding: 2px 0;
}
.hg-checklist-title {
  font: 600 15px/1.25 var(--hg-font);
  margin: 0 0 6px;
}
.hg-checklist-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 4px 0;
  font: 400 15px/1.3 var(--hg-font);
}
.hg-checklist-box {
  width: 18px; height: 18px; border-radius: 5px;
  border: 1.5px solid color-mix(in srgb, var(--t1, #fff) 35%, transparent);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; flex: 0 0 auto; margin-top: 1px;
}
.hg-checklist-row.is-done .hg-checklist-box {
  background: var(--blue-l, #4A90D9);
  border-color: transparent;
  color: #fff;
}
.hg-checklist-row.is-done .hg-checklist-text {
  text-decoration: line-through;
  opacity: 0.55;
}
[data-hg-presence].is-connecting {
  color: var(--hg-muted, #8E8E93);
  font-style: italic;
}
.hg-shared-cell img,
.hg-shared-cell video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: 0 !important;
}
.hg-add-members {
  display: flex; align-items: center; gap: 10px;
  width: calc(100% - 24px); margin: 8px 12px 4px;
  border: 0; border-radius: 14px; padding: 12px 14px;
  background: color-mix(in srgb, var(--bg3, #1C2130) 70%, transparent);
  color: var(--hg-accent-chat, #0A84FF);
  font: 500 16px/1.2 var(--hg-font); cursor: pointer; text-align: left;
}
.hg-add-members svg { width: 22px; height: 22px; stroke: currentColor; }
.hg-members-card {
  margin: 4px 12px 24px;
  background: rgba(28, 28, 30, 0.92);
  border-radius: 12px;
  overflow: hidden;
  border: 0;
  box-shadow: none;
}
.hg-members-card .hg-contact-row,
.hg-members-card .hg-member-row {
  padding: 8px 12px;
  border-bottom: 0.5px solid #38383A;
  align-items: center;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}
.hg-members-card .hg-contact-row:last-child { border-bottom: 0; }
.hg-members-card .hg-contact-meta { flex: 1; min-width: 0; text-align: left; }
.hg-members-card .hg-contact-name {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: 500 16px/1.25 var(--hg-font);
}
.hg-members-card .hg-contact-status { font-size: 13px; color: #8E8E93; }
.hg-members-card .hg-contact-status.is-online { color: var(--hg-accent-chat, var(--blue-l, #4A90D9)); }
.hg-role-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font: 600 11px/1.4 var(--hg-font);
  color: #fff;
  vertical-align: middle;
  flex: 0 0 auto;
}
.hg-role-badge.is-admin { background: var(--ok, #2D8659); }
.hg-role-badge.is-owner { background: var(--purple, #8B5CF6); }
.hg-profile-tab.is-active {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
}
.hg-settings-card--secondary { opacity: 0.96; }
.hg-shared-file,
.hg-shared-voice {
  display: flex; gap: 12px; align-items: center;
  padding: 10px 12px; color: inherit; text-decoration: none;
  border: 0; background: transparent; width: 100%; font: inherit; text-align: left;
  border-bottom: 0.5px solid rgba(84, 84, 88, 0.45);
}
.hg-shared-file-ico {
  width: 40px; height: 40px; border-radius: 10px;
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(120, 120, 128, 0.28);
  color: #fff;
  overflow: hidden;
}
.hg-shared-file-ico svg { width: 22px; height: 22px; }
.hg-file-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px;
  font: 700 11px/1 var(--hg-font);
  text-transform: lowercase;
  color: #fff;
  letter-spacing: 0.02em;
}
.hg-file-badge.is-pdf { background: var(--warn, var(--amber, #D4A843)); }
.hg-file-badge.is-doc { background: var(--info, #3B82F6); }
.hg-file-badge.is-xls { background: var(--ok, #2D8659); }
.hg-file-badge.is-zip { background: var(--purple, #8B5CF6); }
.hg-file-badge.is-img { background: var(--info-t, #60A5FA); }
.hg-file-badge.is-generic { background: rgba(120, 120, 128, 0.45); }
.hg-shared-voice-ico {
  border-radius: 50%;
  background: var(--hg-accent-chat, var(--blue-l, #4A90D9));
}
.hg-shared-file-meta {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px;
}
.hg-shared-file-name {
  font: 500 16px/1.25 var(--hg-font);
  color: var(--hg-text, #fff);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hg-shared-file-sub {
  font: 400 13px/1.2 var(--hg-font);
  color: #8E8E93;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* -- Mobile touch hardening (F3: no zoom, native-like scroll) -- */
@media (max-width: 768px) {
  .hg-chrome, .hg-panel, .hg-list, .hg-msgs, .hg-contacts { touch-action: pan-y; }
  .hg-chrome, .hg-panel, .hg-list, .hg-msgs { overscroll-behavior: contain; }
  .hg-thread-head, .hg-composer, .hg-bottom-nav, .hg-chat-row, .hg-contact-row {
    -webkit-touch-callout: none;
    user-select: none;
  }
  .hg-msgs { -webkit-overflow-scrolling: touch; }
}

/* -- Member tags (chat_member_tags) -- */
.hg-tags-pop {
  position: absolute; z-index: 40; right: 12px; top: 12px;
  min-width: 240px; max-width: 300px; padding: 12px;
}
.hg-tags-title { font: 600 14px/1.3 var(--hg-font); color: var(--hg-text); margin-bottom: 8px; }
.hg-tags-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.hg-tag-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--hg-accent, var(--blue-l, #4A90D9)) 16%, transparent);
  color: var(--hg-text); font: 500 12px/1 var(--hg-font);
}
.hg-tag-chip button {
  border: 0; background: transparent; color: inherit; cursor: pointer;
  font-size: 11px; line-height: 1; padding: 0;
}
.hg-tags-add { display: flex; gap: 6px; }
.hg-tags-add input {
  flex: 1; min-width: 0; height: 34px; border-radius: 10px;
  border: 1px solid var(--hg-border); background: var(--hg-elev);
  color: var(--hg-text); padding: 0 10px; font: 400 14px var(--hg-font);
}
.hg-sticker-packs { margin-top: 10px; }

/* -- Voice/circle playback progress (TG-like) -- */
.hg-circle-wrap:not(.is-playing) .hg-circle-progress { display: none; }
.hg-circle-progress {
  position: absolute; inset: -3px; width: calc(100% + 6px); height: calc(100% + 6px);
  pointer-events: none; transform: rotate(-90deg);
}
.hg-circle-progress circle { fill: none; stroke: var(--blue-l, #4A90D9); stroke-width: 3; stroke-linecap: round; }
.hg-circle-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 40px; text-shadow: 0 2px 8px rgba(0,0,0,.5); transition: opacity 160ms ease;
}
.hg-voice-wave { cursor: pointer; }

/* -- Invite sheet polish + hint -- */
.hg-invite-hint {
  font: 400 12px/1.4 var(--hg-font); color: var(--hg-muted);
  margin: 8px 2px 0; text-align: center;
}
.hg-invite-sheet[data-role="card"] { padding: 16px; }
/* CTA общая (Пригласить/История): градиент + тень + 50px (§1.5/§1.6). */
.hg-invite-submit {
  width: 100%; min-height: 50px; border: 0; border-radius: 12px;
  background: var(--hg-grad-accent, var(--blue-l, #4A90D9)); color: #fff;
  box-shadow: var(--hg-glow-accent);
  font: 600 16px/1.2 var(--hg-font); cursor: pointer; margin-top: 12px;
  transition: filter var(--hg-dur-mid) var(--hg-ease-std),
    transform var(--hg-dur-fast) var(--hg-ease-std),
    box-shadow var(--hg-dur-mid) var(--hg-ease-std);
}
.hg-invite-submit:hover { filter: brightness(1.06); box-shadow: var(--hg-glow-accent-soft); }
.hg-invite-submit:active { transform: scale(0.98); box-shadow: var(--hg-elev-1); }
.hg-invite-modes .hg-compose-mode.is-active {
  background: color-mix(in srgb, var(--blue-l, #4A90D9) 18%, transparent);
  color: var(--hg-text);
}

/* -- Source badge in unified calls journal (Huginn vs PBX) -- */
.hg-call-src {
  display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 999px;
  font: 600 10px/1.6 var(--hg-font); vertical-align: middle;
}
.hg-call-src--huginn { background: color-mix(in srgb, var(--blue-l, #4A90D9) 22%, transparent); color: var(--blue-l, #4A90D9); }
.hg-call-src--pbx { background: color-mix(in srgb, var(--t2, #8B96A8) 22%, transparent); color: var(--t2, #8B96A8); }

/* -- Invite sheet: TG-style fields (shared with /h/ login look) -- */
.hg-invite-sheet .h-field,
.hg-invite-fields input {
  width: 100%; height: 48px; border-radius: 12px;
  border: 1px solid var(--hg-border); background: var(--hg-elev); color: var(--hg-text);
  padding: 0 14px; font: 400 16px var(--hg-font); box-sizing: border-box; outline: none;
  margin: 0 0 10px;
}
.hg-invite-sheet .h-field:focus,
.hg-invite-fields input:focus { border-color: var(--blue-l, #4A90D9); }

/* Own story avatar with a small "+" badge (no story yet) */
.hg-story-plus {
  position: absolute; right: -2px; bottom: -2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--blue-l, #4A90D9); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font: 700 14px/1 var(--hg-font);
  border: 2px solid var(--hg-bg, var(--bg2));
  box-shadow: var(--hg-elev-1);
}
.hg-story-av { position: relative; }

/* ═══════════════════════════════════════════════════════════════════
   DS §11 — Depth & Juice application (CRM tokens, no TG hex)
   Flat → depth: elevation, gradients, specular rim, coloured CTA glow.
   NOTE: селекторы здесь намеренно специфичнее `.hg-glass[data-role=...]`,
   иначе role-правила выше перебивают глубину (находка V-TZ).
   ═══════════════════════════════════════════════════════════════════ */

/* F5 — bubbles: TG S04/S05/S57 §7 «без тени и обводки, только градиентная
   заливка». Раньше у пузыря было 3 слоя (elev+specular+rim) → эффект «таблицы».
   Глубину даёт градиент, а не тени. */
.hg-glass.hg-bubble, .hg-bubble { box-shadow: none; }
.hg-bubble.me {
  background-image: var(--hg-grad-surface);
  box-shadow: none;
}
.hg-bubble.them {
  background-image: var(--hg-grad-surface);
  box-shadow: none;
}

/* F1 — bottom nav + FAB: глубокая тень + specular (глубина, не плоско).
   Специфичность (0,2,0) — не ниже `.hg-glass[data-role="nav"|"fab"]`. */
.hg-glass.hg-bottom-nav.hg-bottom-nav { box-shadow: var(--hg-elev-3), var(--hg-inset-hairline); }
.hg-glass.hg-nav-search.hg-nav-search { box-shadow: var(--hg-elev-3), var(--hg-inset-hairline); }

/* F3 — floating header/pin capsules: лёгкая глубина */
.hg-thread-title { box-shadow: var(--hg-elev-1); }
.hg-back-btn,
.hg-back-cluster,
.hg-thread-head .hg-icon-btn#hgBack { box-shadow: var(--hg-elev-1); }

/* Секции/меню/шиты — surface gradient + elevation.
   Compose-шиты занимают весь док (absolute inset:0) — внешняя тень не видна,
   поэтому им даём не тень, а лёгкий specular-кант. */
.hg-sheet { box-shadow: var(--hg-elev-4); }
.hg-float, .hg-quick-react, .hg-attach-menu { box-shadow: var(--hg-elev-3); }

/* F7 — settings cards: карточки с объёмом и «воздухом» (специфичность ≥0,3,0) */
.hg-settings-card.hg-glass[data-role="card"],
.hg-settings-alert.hg-glass[data-role="card"] {
  box-shadow: var(--hg-elev-2), var(--hg-inset-hairline);
}
.hg-settings-card { border-radius: 16px; }
.hg-settings-alert { border-radius: 16px; background-image: var(--hg-grad-surface); }

/* Экраны «Пригласить» / «История» — входы с глубиной, focus-glow, CTA-gradient */
.hg-invite-fields input,
.hg-invite-sheet .h-field,
.hg-story-sheet input {
  transition: border-color var(--hg-dur-slow) var(--hg-ease-std),
    box-shadow var(--hg-dur-mid) var(--hg-ease-std), background var(--hg-dur-mid) var(--hg-ease-std);
}
.hg-invite-fields input:focus,
.hg-invite-sheet .h-field:focus,
.hg-story-sheet input:focus {
  border-color: var(--blue-l, #4A90D9);
  box-shadow: var(--hg-focus-glow);
}
/* (CTA-стиль задан выше единым правилом .hg-invite-submit — без дубля). */
.hg-invite-submit:disabled { opacity: 0.5; box-shadow: none; }

/* Сегмент-контрол (F4): пилюля-контейнер + бегунок-слайд, а не «таблетки». */
.hg-invite-modes {
  position: relative;
  display: flex;
  gap: 4px;
  margin: 0 14px 10px;
  padding: 4px;
  border-radius: 12px;
  background: var(--bg3, #1C2130);
  box-shadow: var(--hg-inset-hairline);
  /* Бегунок: подложка едет через translateX (ТЗ §1.5). --hg-segment-offset
     задаёт JS (0 / 100% / 200% при трёх сегментах), ширина = (100% - 8px)/N. */
  --hg-seg-n: 3;
  --hg-segment-offset: 0%;
}
.hg-invite-modes::before {
  content: '';
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 8px) / var(--hg-seg-n));
  border-radius: 8px;
  background: var(--bg2, #1C2130);
  box-shadow: var(--hg-elev-1);
  transform: translateX(var(--hg-segment-offset, 0%));
  transition: transform var(--hg-dur-base, 180ms) var(--hg-ease-emphasized, cubic-bezier(.2,.8,.2,1));
  pointer-events: none;
  z-index: 0;
}
html[data-theme="light"] .hg-invite-modes::before { background: var(--bg2, #FDFAF5); }
.hg-story-sheet .hg-invite-modes { margin: 0 16px 10px; }
.hg-invite-modes .hg-compose-mode {
  position: relative;
  z-index: 1;
  flex: 1;
  border: 0;
  border-radius: 8px;
  background: transparent !important;
  color: var(--hg-muted);
  font: 500 14px/1.2 var(--hg-font);
  padding: 8px 10px;
  cursor: pointer;
  transition: color var(--hg-dur-base, 180ms) var(--hg-ease-standard, ease);
}
.hg-invite-modes .hg-compose-mode.is-active {
  /* Фон рисует бегунок (::before) — у кнопки только цвет текста. */
  background: transparent !important;
  color: var(--hg-text);
  box-shadow: none;
}
html[data-theme="light"] .hg-invite-modes .hg-compose-mode.is-active {
  background: transparent !important;
  color: var(--t1, #1A1510);
}

/* Слайд-анимация «бегунка» сегмент-контрола (Пригласить/История) */
.hg-compose-mode,
.hg-invite-modes .hg-compose-mode {
  transition: background var(--hg-dur-mid) var(--hg-ease-std),
    color var(--hg-dur-mid) var(--hg-ease-std),
    transform var(--hg-dur-mid) var(--hg-ease-spring);
}
.hg-compose-mode.is-active { transform: translateZ(0) scale(1.02); }

/* Универсальный микро-интерактив кнопок (ТЗ §1.7) */
.hg-list-me-btn,
.hg-icon-btn,
.hg-edit-action,
.hg-settings-row {
  transition: background var(--hg-dur-fast) var(--hg-ease-std),
    color var(--hg-dur-fast) var(--hg-ease-std),
    transform var(--hg-dur-fast) var(--hg-ease-std),
    box-shadow var(--hg-dur-fast) var(--hg-ease-std);
}

/* F7 — мягкая плашка вместо «кричащего» красного баннера номера
   (background-image задан выше, у карточки-специфичного селектора). */
.hg-settings-alert-bang {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--hg-danger, #C8293B) 14%, transparent);
}

/* F4 — строки чатов: тонкая глубина на hover/active + разделители тоньше */
.hg-chat-row { transition: background var(--hg-dur-fast) var(--hg-ease-std); }
.hg-chat-row:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t1, #fff) 5%, transparent); }

/* F7 — крупнее аватар профиля с красивой обводкой */
.hg-settings-av { box-shadow: var(--hg-elev-2), 0 0 0 2px color-mix(in srgb, var(--blue-l, #4A90D9) 40%, transparent); }

/* F9 — respect reduced motion уже есть; spring-ритм для pop-элементов */
@media (prefers-reduced-motion: no-preference) {
  .hg-bubble { transition: box-shadow var(--hg-dur-mid) var(--hg-ease-std); }
}

/* ТЗ §1.6 — «История»: Drop Zone вместо дефолтной кнопки «Выбрать файл» */
.hg-dropzone {
  width: 100%;
  min-height: 152px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 16px;
  border: 2px dashed color-mix(in srgb, var(--t1, #fff) 24%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--t1, #fff) 5%, transparent);
  color: var(--hg-text);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--hg-dur-mid) var(--hg-ease-std),
    background var(--hg-dur-mid) var(--hg-ease-std),
    transform var(--hg-dur-fast) var(--hg-ease-std);
}
.hg-dropzone:hover,
.hg-dropzone.is-drag {
  border-style: solid;
  border-color: var(--blue-l, #4A90D9);
  background: color-mix(in srgb, var(--blue-l, #4A90D9) 10%, var(--bg3, #1C2130));
}
.hg-dropzone.is-drag { transform: scale(1.01); }
.hg-dropzone-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: color-mix(in srgb, var(--blue-l, #4A90D9) 16%, transparent);
  color: var(--blue-l, #4A90D9);
}
.hg-dropzone-ico svg { width: 22px; height: 22px; stroke-width: 2; }
.hg-dropzone-title { font: 400 16px/1.35 var(--hg-font); color: var(--hg-text); }
.hg-dropzone-sub { font: 400 13px/1.3 var(--hg-font); color: var(--hg-muted); }
.hg-dropzone-ico { color: var(--blue-l, #4A90D9); }
.hg-dropzone-preview {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--hg-border);
  background: var(--bg3, #1C2130);
}
.hg-dropzone-preview[hidden] { display: none; }
.hg-dropzone-preview img,
.hg-dropzone-preview video { width: 100%; max-height: 260px; object-fit: cover; display: block; }

/* ТЗ §1.7 — Ripple-эффект от точки касания (строки списков + пузыри + кнопки).
   Хосты не должны обрезать focus-ring/бейджи: overflow:hidden только там,
   где нет выступающих за границы элементов. */
.hg-chat-row,
.hg-contact-row,
.hg-settings-row,
.hg-bubble {
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.hg-icon-btn,
.hg-edit-action,
.hg-list-me-btn,
.hg-bottom-nav button,
.hg-send { -webkit-tap-highlight-color: transparent; }
.hg-ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: radial-gradient(circle at var(--hg-ripple-x, 50%) var(--hg-ripple-y, 50%),
    color-mix(in srgb, var(--t1, #fff) 24%, transparent) 0%,
    color-mix(in srgb, var(--t1, #fff) 12%, transparent) 70%,
    transparent 100%);
  pointer-events: none;
  animation: hg-ripple-out 520ms var(--hg-ease-std, ease-out) forwards;
  z-index: 0;
}
@keyframes hg-ripple-out {
  to { transform: scale(2.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hg-ripple { display: none !important; }
}