/* ==========================================================================
   Алё — тема веб-клиента (подключается entrypoint.sh как /custom.css)

   Как устроен файл (после чистки 2026-09-29, ТЗ1):
   1. База для всех профилей: скроллбары, формы, голосовой полноэкранный режим,
      настройки, профили neon / oled / soft-light (выбираются в «Внешний вид»).
   2. «Алё — токены» — ЕДИНСТВЕННЫЙ источник цветов/радиусов профиля alyo.
      Пишется на html и body с !important: LoadTheme кладёт inline-переменные
      в оба элемента, и без этого внутри body побеждали серые Discord-значения.
   3. Слои alyo (исторические «Stage N»): оболочка, чат, голос, телефон.
      Перекрытые и никогда не срабатывающие правила удалены автоматически
      (см. /root/hg-e2e/csstool), итоговый вид сверен по computed styles.
   4. «Доводка по ТЗ1» в конце — финальные правила по компонентам.

   Важно: стили компонентов Panda лежат в @layer, поэтому любое правило здесь
   (даже без !important) сильнее их. Не пишите глобальные a{} / button{}.
   ========================================================================== */
:root {
  color-scheme: light dark;
  --hg-bottom-nav: 56px;
}

html,
body,
#root {
  min-height: 100%;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
  font-feature-settings: "ss01", "ss02";
}

a[href*="ko-fi.com"],
iframe[src*="stt.gg"] { display: none !important; }

/* Soft scrollbars like Catppuccin Discord */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--ctp-surface1);
  border-radius: 8px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--ctp-surface2); background-clip: padding-box; border: 3px solid transparent; }
::-webkit-scrollbar-track { background: transparent; }

/* Layered Discord rails */
aside {
  background: var(--ctp-mantle);
}

/* Selection follows the active theme tokens, not a fixed Mocha mauve. */
[aria-current="page"],
[data-selected="true"],
[class*="selected"],
a[href].active {
  background: var(--surfaces-selected) !important;
  color: var(--ctp-text) !important;
  border-radius: var(--borderRadius-md, 8px) !important;
}


/* Primary filled buttons — Catppuccin brand (blue on crust text) */
button[type="submit"],
.hg-up-primary,
.hg-fb-send,
button.hg-ctp-primary {
  background: var(--ctp-blue) !important;
  color: var(--ctp-crust) !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
}
button[type="submit"]:hover,
.hg-up-primary:hover,
.hg-fb-send:hover {
  filter: brightness(1.08);
}

/* Danger / success pastels */
[class*="error"],
.hg-fb-err { color: var(--ctp-red) !important; }
.hg-fb-ok { color: var(--ctp-green) !important; }

/* Presence dots */
[data-status="Online"] { --status: var(--ctp-green); }
[data-status="Idle"] { --status: var(--ctp-yellow); }
[data-status="Busy"],
[data-status="Focus"] { --status: var(--ctp-red); }

/* Composer / message box */
[class*="composer"] {
  background: var(--ctp-surface0) !important;
  border-radius: 12px !important;
  color: var(--ctp-text) !important;
}

/* Mentions & links */
.mention {
  background: color-mix(in srgb, var(--ctp-mauve) 22%, transparent) !important;
  color: var(--ctp-mauve) !important;
  border-radius: var(--borderRadius-xs, 4px);
}

/* Category labels — soft peach/overlay */

/* Auth form fields (Discord Catppuccin) */
form input[type="email"],
form input[type="password"],
form input[type="text"],
form input:not([type]),
form textarea,
form select {
  background: var(--ctp-mantle) !important;
  border: 1px solid var(--ctp-surface0) !important;
  border-radius: 8px !important;
  color: var(--ctp-text) !important;
  font-size: 15px !important;
}
form input:focus,
form textarea:focus,
form select:focus {
  outline: none !important;
  border-color: var(--ctp-mauve) !important;
  box-shadow: 0 0 0 1px var(--ctp-mauve);
}
form label,
form .label {
  color: var(--ctp-subtext0) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em;
}

/* Modals / floating panels */
[role="dialog"],
[class*="modal"],
#floating > * {
  --panel-bg: var(--ctp-mantle);
}

/* Soft message hover */
[class*="message"]:hover {
  background: rgba(205, 214, 244, 0.03);
}

/* Unread / pills */
[class*="badge"] {
  border-radius: 999px;
}

/* Material symbols tint */

/* Discover overlay */
#hg-discover {
  position: absolute; inset: 0; z-index: 30; color: var(--ctp-text);
  overflow: auto;
}
#hg-discover .hg-disc-h { font: 800 28px/1.2 system-ui, sans-serif; margin-bottom: 8px; color: var(--ctp-text); }
#hg-discover .hg-disc-s { color: var(--ctp-subtext0); margin-bottom: 20px; font-size: 14px; }

/* Settings cards */
#hg-download-apps a,
#hg-fb-open-btn,
#hg-update-page .hg-up-card {
  background: var(--ctp-mantle) !important;
  border: 1px solid var(--ctp-surface0) !important;
  border-radius: 12px !important;
  color: var(--ctp-text) !important;
}
#hg-download-apps a:hover,
#hg-fb-open-btn:hover {
  background: var(--ctp-surface0) !important;
  border-color: var(--ctp-mauve) !important;
}

/* Нижняя навигация (телефон), тосты, оверлеи */
#hg-up-toast,
#hg-up-overlay,
#hg-fb-modal .hg-fb-box {
  background: var(--ctp-mantle) !important;
  border: 1px solid var(--ctp-surface0) !important;
  color: var(--ctp-text) !important;
  border-radius: 12px !important;
}


#hg-bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 100010;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display: flex;
}
#hg-bottom-nav button {
  flex: 1; border: 0; background: transparent;
  display: flex; flex-direction: column; align-items: center; justify-content: center; font: 600 10px/1.2 system-ui, sans-serif; cursor: pointer; padding: 6px 4px 4px;
}
#hg-bottom-nav .hg-bn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  line-height: 0;
  color: inherit;
}
#hg-bottom-nav .hg-bn-icon svg {
  display: block;
  width: 24px;
  height: 24px;
}
body.hg-has-bottom-nav .app_root {
  padding-bottom: calc(var(--hg-bottom-nav) + env(safe-area-inset-bottom, 0px));
}

#hg-kbd-help {
  position: fixed; z-index: 100020; right: 16px; bottom: 16px; max-width: 280px;
  padding: 10px 12px; border-radius: 10px; background: var(--ctp-mantle);
  border: 1px solid rgba(205,214,244,.1); color: var(--ctp-text);
  font: 12px/1.4 system-ui, sans-serif; box-shadow: 0 8px 32px rgba(0,0,0,.4); display: none;
}
#hg-kbd-help kbd {
  display: inline-block; padding: 1px 5px; border-radius: 4px;
  background: var(--ctp-surface0); border: 1px solid var(--ctp-surface1); font-weight: 700;
}

/* Voice settings accent */
#hg-voice-native input[type="range"] { accent-color: var(--ctp-blue); }
#hg-voice-native button:focus-visible { outline: 2px solid var(--ctp-blue); outline-offset: 2px; }

/* Soften primary buttons toward Catppuccin blue */
button[data-variant="filled"],
button.md-filled {
  --md-sys-color-primary: var(--ctp-blue);
}

/* Channel / friends polish */

/* Message composer Discord-ish */
[class*="composer"] {
  border-radius: 8px;
}

/* Selection / links */
::selection { background: rgba(137, 180, 250, 0.35); }

/* Discord-style MDUI text fields on auth */
mdui-text-field {
  width: 100%;
}
mdui-text-field::part(container) {
  border-radius: 4px !important;
}
mdui-text-field {
  border-radius: 4px !important;
}


/* Stronger Discord login field chrome */
mdui-text-field {
  --mdui-shape-corner: 4px;
  margin: 0 0 16px !important;
}




/* ---- Catppuccin Discord: striped / layered depth ---- */
/* Distinct horizontal "stripes" of crust → mantle → base like Discord columns */
body #root,
body #app {
  background: var(--ctp-crust) !important;
}

/* Chat pane: flat Discord column, no diagonal stripe */
main,
[class*="messages"] {
  background-color: var(--ctp-base) !important;
  background-image: none !important;
}

/* Server rail left indicator pill (Discord white/mauve bar) */
.main_bar a[href*="/server/"],
.main_bar [class*="server"] {
  position: relative;
}
.main_bar a[aria-current="page"]::before,
.main_bar [data-selected="true"]::before,
.main_bar a.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 40px;
  border-radius: 0 4px 4px 0;
  background: #ffffff;
}

/* Channel list: unread / selected left stripe */
.channel_bar a,
.channel_bar button,
[class*="channel"] a {
  position: relative;
  border-radius: 8px !important;
}
.channel_bar a[aria-current="page"],
.channel_bar [data-selected="true"],
.channel_bar a.active {
  background: var(--surfaces-selected, #404249) !important;
  box-shadow: none !important;
  color: var(--ctp-text, #f2f3f5) !important;
}

/* Message hover is a flat wash, like Discord */

/* Header bar stripe separator */

/* User panel bottom stripe */
[class*="status"] {
  background: var(--ctp-mantle) !important;
  border-top: 1px solid var(--ctp-surface0);
}

/* Soft card panels with pastel outline */
[class*="panel"] {
  border-radius: 12px;
}


/* In-app voice fullscreen: fill the whole client window (not OS exclusive FS).
   Do not use position:fixed on tiles inside #floating — Float uses transform,
   which makes "fixed" resolve against the 42vh card instead of the viewport. */
body.hg-vc-app-fs-on,
body.hg-vc-tile-app-fs {
  overflow: hidden;
}

#floating.hg-vc-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  z-index: 100000 !important;
  transform: none !important;
  pointer-events: auto !important;
  background: var(--ctp-crust) !important;
}
#floating.hg-vc-fullscreen > .hg-vc-card {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  transform: none !important;
  pointer-events: auto !important;
  display: flex !important;
  flex-direction: column !important;
  z-index: 1 !important;
}
#floating.hg-vc-fullscreen .hg-vc-controls {
  position: relative !important;
  z-index: 50 !important;
  pointer-events: auto !important;
  flex-shrink: 0 !important;
}
#floating.hg-vc-fullscreen .vc_grid {
  position: relative !important;
  z-index: 1 !important;
  overflow: hidden !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
}
#floating.hg-vc-fullscreen .vc_tile {
  max-width: none !important;
}

#hg-vc-app-fs {
  position: fixed;
  inset: 0;
  z-index: 200000;
  display: grid;
  place-items: center;
  background: #000;
  pointer-events: auto;
}
#hg-vc-app-fs[hidden] {
  display: none !important;
}
#hg-vc-app-fs video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
.hg-vc-app-fs-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  background: rgba(17,17,27,.75) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23cdd6f4'%3E%3Cpath d='M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z'/%3E%3C/svg%3E") center/22px no-repeat;
}
.hg-vc-app-fs-close:hover {
  background-color: rgba(30,30,46,.95);
}


/* Voice sidebar: camera replaces avatar row */
.hg-sidebar-video {
  flex-direction: column !important;
  align-items: stretch !important;
  padding: 4px !important;
  gap: 4px !important;
  cursor: pointer;
}
.hg-sidebar-video video {
  width: 100%;
  max-height: 140px;
  object-fit: cover;
  border-radius: 6px;
  background: #000;
}
.hg-sidebar-video:fullscreen,
.hg-sidebar-video video:fullscreen {
  width: 100vw;
  height: 100vh;
  max-height: none;
  object-fit: contain;
  background: #000;
}

/* Marker only — actual expand is #hg-vc-app-fs on document.body */
.vc_tile.hg-vc-tile-fs {
  outline-color: var(--brand-presence-online, #a6e3a1);
}


/* Compact "join voice" banner (Discord-like) */
.hg-join-voice {
  min-height: 44px !important;
  max-height: 56px !important;
  padding: 0 12px !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
}
.hg-join-voice .title {
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}



/* Settings: Discord-like full width (no empty "scrap" rail) */
.settings_overlay .settings_sidebar {
  flex: 0 0 232px !important;
  max-width: 232px !important;
  justify-content: flex-start !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
}
.settings_overlay .settings_sidebar .content {
  min-width: 0 !important;
  max-width: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.settings_sidebar a.button {
  margin-inline-end: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
}
.settings_sidebar a[aria-selected="true"] {
  background: var(--surfaces-selected) !important;
}
.settings_overlay .settings_cont {
  flex: 1 1 auto !important;
  max-width: min(1080px, calc(100vw - 320px)) !important;
  width: 100% !important;
  padding-inline: 40px !important;
}
.settings_overlay .settings_action_rail {
  margin-inline-start: auto !important;
  flex-grow: 0 !important;
  width: 72px !important;
}
.settings_overlay .close {
  position: sticky !important;
  top: 24px !important;
  z-index: 50;
}


/* Fullscreen expand button on voice tiles */
.vc_tile { position: relative; }
.hg-fs-btn {
  position: absolute !important;
  right: 10px !important;
  top: 10px !important;
  bottom: auto !important;
  z-index: 5 !important;
  width: 36px !important;
  height: 36px !important;
  border: 0 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  background: rgba(17,17,27,.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23cdd6f4'%3E%3Cpath d='M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z'/%3E%3C/svg%3E") center/20px no-repeat !important;
  opacity: 0.85 !important;
}
.hg-fs-btn:hover { opacity: 1 !important; background-color: rgba(30,30,46,.9) !important; }
.vc_tile:not(:hover) .hg-fs-btn { opacity: 0.35; }

/* Settings sidebar icons: MD SVGs ship with fill="#000" — force theme color */
.settings_sidebar svg,
.settings_sidebar svg path,
.settings_sidebar svg g {
  fill: currentColor !important;
  color: inherit !important;
}
.settings_sidebar a.button {
  color: var(--text-interactive, var(--ctp-subtext1)) !important;
}
.settings_sidebar a[aria-selected="true"] {
  color: var(--text-header, var(--ctp-text)) !important;
}
.settings_sidebar a[aria-selected="true"] svg,
.settings_sidebar a[aria-selected="true"] svg path,
.settings_sidebar a[aria-selected="true"] svg g {
  fill: currentColor !important;
  color: inherit !important;
}
.settings_sidebar .material-symbols,
.settings_sidebar .material-symbols-outlined {
  color: inherit !important;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 20 !important;
}

/* Server/user settings content: straighten crooked layout */
.settings_overlay {
  display: flex !important;
  align-items: stretch !important;
}
.settings_overlay .settings_cont {
  min-width: 0 !important;
  box-sizing: border-box !important;
}
.settings_overlay .settings_cont > * {
  max-width: none;
  width: 100%;
}

/* Desktop titlebar dark match */


/* Voice panel sits IN the channel column (chat below, not showing through) */
#floating .hg-join-voice {
  opacity: 1 !important;
}

/* Theme-aware chrome: follow --ctp-* from LoadTheme (Mocha/Latte), do not force dark. */
html,
body,
#root {
  background: var(--ctp-base) !important;
  color: var(--ctp-text) !important;
}
.main_bar {
  background: var(--ctp-crust) !important;
}
.channel_bar {
  background: var(--ctp-mantle) !important;
}
.settings_overlay {
  background: var(--ctp-base) !important;
  color: var(--ctp-text) !important;
}
.settings_overlay .settings_sidebar {
  background: var(--ctp-mantle) !important;
  color: var(--ctp-text) !important;
}
.app_root > div:first-child {
  background: var(--ctp-crust) !important;
}
.hg-vc-slot,
#floating .hg-join-voice {
  background: var(--ctp-base) !important;
}

/* Light theme: flat Latte panels — drop dark-oriented stripe/gradient texture */
html[data-theme="light"] main,
html[data-theme="light"] [class*="content"],
html[data-theme="light"] [class*="messages"],
html[data-theme="light"] .settings_overlay {
  background-image: none !important;
  background-color: var(--ctp-base) !important;
  color: var(--ctp-text) !important;
}
html[data-theme="light"] .channel_bar,
html[data-theme="light"] .main_bar {
  color: var(--ctp-text) !important;
}
html[data-theme="light"] body #root,
html[data-theme="light"] body #app,
html[data-theme="light"] html,
html[data-theme="light"] body {
  background: var(--ctp-base) !important;
  color: var(--ctp-text) !important;
}
html[data-theme="light"] .main_bar {
  background: var(--ctp-crust) !important;
}
html[data-theme="light"] .channel_bar,
html[data-theme="light"] aside {
  background: var(--ctp-mantle) !important;
}


/* Phone screenshare: don't force 16:9 crop */
.vc_tile.hg-ss {
  aspect-ratio: auto !important;
  max-width: none !important;
}
.vc_tile.hg-ss video {
  object-fit: contain !important;
  background: #000;
}


/* Voice controls: full size in channel card; compact ONLY in floating PiP */
#floating .hg-vc-actions {
  z-index: 60 !important;
  position: relative !important;
}
#floating .hg-vc-actions button {
  pointer-events: auto !important;
  cursor: pointer !important;
}
/* In-channel card stays 48px — do NOT shrink all #floating buttons */
#floating .hg-vc-pip .hg-vc-actions {
  gap: 6px !important;
  padding: 6px 10px !important;
}
#floating .hg-vc-pip .hg-vc-actions button {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  padding: 0 !important;
}
#floating button.hg-vc-hangup,
.hg-vc-actions button.hg-vc-hangup {
  background: #f23f43 !important;
  color: #fff !important;
  border: 0 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  z-index: 70 !important;
}
#floating button.hg-vc-hangup-sm,
.hg-vc-actions button.hg-vc-hangup-sm {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  border-radius: 999px !important;
}
#floating button.hg-vc-hangup-xs,
.hg-vc-pip button.hg-vc-hangup {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 999px !important;
}


/* HG discord comfort wave3 */
.channel_bar [data-unread="true"],
.channel_bar a[data-unread] {
  font-weight: 600;
}
/* tighter voice participant rows under channels */
.channel_bar [class*="voice"] {
  font-size: 13px;
}
/* smoother message hover action feel */


/* HG mention pills discord */

/* === HG Discord comfort wave (visible) === */
/* Theme profile owns density and interaction surfaces. */

/* Chat column: subtle vertical rhythm */
#root {
  font-size: var(--message-size, 15px);
}

/* Mention strip — stronger Discord yellow bar */
[data-mentioned="true"] {
  background: var(--surfaces-mentioned) !important;
  box-shadow: inset 2px 0 0 0 var(--ctp-yellow) !important;
}

/* Floating message toolbar already themed in app; ensure it sits above */
.Toolbar {
  z-index: 5 !important;
}

/* === HG playing status === */
[data-hg-playing="true"],
.hg-playing-status {
  color: var(--ctp-green, #a6e3a1) !important;
}


/* === Distinct theme profiles (Neon / OLED / Soft Light / Gaming) === */
html[data-theme-profile="alyo"] [aria-current="page"],
html[data-theme-profile="alyo"] [data-selected="true"],
html[data-theme-profile="alyo"] .channel_bar a.active {
  border-radius: var(--borderRadius-sm, 4px) !important;
}

html[data-theme-profile="neon"] .main_bar {
  background:
    linear-gradient(180deg, #1a1530 0%, #080713 42%, #15112b 100%) !important;
  box-shadow: inset -1px 0 0 color-mix(in srgb, var(--ctp-teal) 42%, transparent);
}
html[data-theme-profile="neon"] .channel_bar {
  background: linear-gradient(180deg, #1a1530 0%, #100d20 100%) !important;
}
html[data-theme-profile="neon"] [aria-current="page"],
html[data-theme-profile="neon"] [data-selected="true"],
html[data-theme-profile="neon"] a[href].active {
  background: color-mix(in srgb, var(--ctp-teal) 18%, transparent) !important;
  box-shadow:
    inset 3px 0 0 0 var(--ctp-teal),
    0 0 18px color-mix(in srgb, var(--ctp-teal) 22%, transparent) !important;
}
html[data-theme-profile="neon"] button[type="submit"],
html[data-theme-profile="neon"] .hg-up-primary,
html[data-theme-profile="neon"] .hg-fb-send {
  box-shadow: 0 0 16px color-mix(in srgb, var(--ctp-teal) 40%, transparent);
}
html[data-theme-profile="neon"] .mention {
  background: color-mix(in srgb, var(--ctp-pink) 22%, transparent) !important;
  color: var(--ctp-pink) !important;
}
@keyframes hg-neon-sheen {
  0% { background-position: 0% 0%; }
  100% { background-position: 0% 100%; }
}
html[data-theme-profile="neon"]:not([data-reduced-motion="true"]) .main_bar {
  background: linear-gradient(180deg, #1a1530, #080713, #20143a, #080713) !important;
  background-size: 100% 280%;
  animation: hg-neon-sheen 14s ease-in-out infinite alternate;
}

html[data-theme-profile="oled"],
html[data-theme-profile="oled"] body,
html[data-theme-profile="oled"] #root {
  background: #000 !important;
}
html[data-theme-profile="oled"] .main_bar,
html[data-theme-profile="oled"] .channel_bar,
html[data-theme-profile="oled"] aside,
html[data-theme-profile="oled"] .hg-vc-slot,
html[data-theme-profile="oled"] .app_root > div:first-child {
  background: #000 !important;
  box-shadow: inset -1px 0 0 rgb(255 255 255 / 10%);
}
html[data-theme-profile="oled"] [aria-current="page"],
html[data-theme-profile="oled"] [data-selected="true"] {
  background: rgb(255 255 255 / 8%) !important;
  box-shadow: inset 2px 0 0 0 var(--ctp-blue) !important;
  border-radius: 2px !important;
}
html[data-theme-profile="oled"] [class*="composer"] {
  background: #0b0b0d !important;
  border-radius: 4px !important;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 10%);
}

html[data-theme-profile="soft-light"] .main_bar {
  background: #f3edf7 !important;
}
html[data-theme-profile="soft-light"] .channel_bar,
html[data-theme-profile="soft-light"] aside {
  background: #faf3fb !important;
}
html[data-theme-profile="soft-light"] [aria-current="page"],
html[data-theme-profile="soft-light"] [data-selected="true"],
html[data-theme-profile="soft-light"] a[href].active {
  background: color-mix(in srgb, var(--ctp-mauve) 14%, #fff) !important;
  box-shadow: var(--elevation-md) !important;
  border-radius: var(--borderRadius-lg, 16px) !important;
}
html[data-theme-profile="soft-light"] [class*="composer"] {
  border-radius: var(--borderRadius-xl, 22px) !important;
  box-shadow: var(--elevation-sm);
  background: #fff9ff !important;
}
html[data-theme-profile="soft-light"] button[type="submit"],
html[data-theme-profile="soft-light"] .hg-up-primary {
  border-radius: var(--borderRadius-xl, 22px) !important;
}

@keyframes hg-soft-breathe {
  0%, 100% { box-shadow: 0 8px 24px rgb(76 55 92 / 10%); }
  50% { box-shadow: 0 14px 36px rgb(76 55 92 / 16%); }
}
html[data-theme-profile="soft-light"]:not([data-reduced-motion="true"]) [aria-current="page"],
html[data-theme-profile="soft-light"]:not([data-reduced-motion="true"]) [data-selected="true"] {
  animation: hg-soft-breathe 6s ease-in-out infinite;
}


/* === Алё: ранний слой оболочки (исторический) === */

html[data-theme-profile="alyo"][data-theme="dark"] main {
  background: #12182c !important;
}

html[data-theme-profile="alyo"][data-theme="dark"] [aria-current="page"],
html[data-theme-profile="alyo"][data-theme="dark"] [data-selected="true"] {
  background: rgba(37, 99, 255, 0.16) !important;
  box-shadow: inset 2px 0 0 0 var(--accent-blue, #2563ff) !important;
  border-radius: 6px !important;
  color: #e8eaef !important;
}

html[data-theme-profile="alyo"][data-theme="dark"] [class*="composer"] {
  color: #e8eaef !important;
}

html[data-theme-profile="alyo"][data-theme="dark"] .mention {
  background: rgba(169, 189, 214, 0.14) !important;
  color: #d5deea !important;
}

html[data-theme-profile="alyo"][data-theme="dark"] [data-hg-profile] {
  background: #14171e !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45) !important;
}

html[data-theme-profile="alyo"][data-theme="light"],
html[data-theme-profile="alyo"][data-theme="light"] body {
  background: #f3f4f6 !important;
  color: #1c1f26;
}

html[data-theme-profile="alyo"][data-theme="light"] .main_bar {
  background: #e8eaee !important;
  box-shadow: inset -1px 0 0 rgba(28, 31, 38, 0.08) !important;
}

html[data-theme-profile="alyo"][data-theme="light"] .channel_bar,
html[data-theme-profile="alyo"][data-theme="light"] aside {
  background: #eef0f3 !important;
}

html[data-theme-profile="alyo"][data-theme="light"] [aria-current="page"],
html[data-theme-profile="alyo"][data-theme="light"] [data-selected="true"] {
  background: rgba(141, 107, 50, 0.12) !important;
  box-shadow: inset 2px 0 0 0 #8d6b32 !important;
}

html[data-theme-profile="alyo"][data-theme="light"] button[type="submit"],
html[data-theme-profile="alyo"][data-theme="light"] .hg-up-primary {
  background: #8d6b32 !important;
  color: #fffaf2 !important;
  box-shadow: none !important;
  animation: none !important;
}

html[data-theme-profile="alyo"][data-theme="light"] .mention {
  background: rgba(61, 95, 138, 0.12) !important;
  color: #2c4668 !important;
}

html[data-theme-profile="alyo"][data-theme="light"] .cm-content,
html[data-theme-profile="alyo"][data-theme="light"] .cm-line {
  color: #1c1f26 !important;
  caret-color: #8d6b32 !important;
}

/* === Алё: ранний слой хрома (исторический) === */
html[data-theme-profile="alyo"][data-theme="dark"] {
  scrollbar-color: #2d3b5c transparent;
}

html[data-theme-profile="alyo"][data-theme="dark"] button[data-variant="filled"],
html[data-theme-profile="alyo"][data-theme="dark"] button.md-filled,
html[data-theme-profile="alyo"][data-theme="dark"] button[type="submit"] {
  --md-sys-color-primary: var(--accent-blue, #2563ff) !important;
  --md-sys-color-on-primary: #1a1408 !important;
}

html[data-theme-profile="alyo"][data-theme="dark"] button[data-variant="text"],
html[data-theme-profile="alyo"][data-theme="dark"] button[data-variant="outlined"] {
  background: transparent !important;
  color: #a9bdd6 !important;
  --color: #a9bdd6 !important;
}
html[data-theme-profile="alyo"][data-theme="dark"] .settings_overlay .settings_sidebar {
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.05) !important;
}

html[data-theme-profile="alyo"][data-theme="dark"] table {
  border-collapse: collapse;
  width: 100%;
}
html[data-theme-profile="alyo"][data-theme="dark"] th {
  color: #8e95a3 !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  letter-spacing: 0.04em;
  text-align: start;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
html[data-theme-profile="alyo"][data-theme="dark"] td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  color: #e8eaef;
}
html[data-theme-profile="alyo"][data-theme="dark"] tr:hover td {
  background: rgba(255, 255, 255, 0.025);
}

html[data-theme-profile="alyo"][data-theme="dark"] form input:not([type="file"]):not([type="checkbox"]):not([type="radio"]),
html[data-theme-profile="alyo"][data-theme="dark"] form textarea,
html[data-theme-profile="alyo"][data-theme="dark"] form select {
  background: #1e232c !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #e8eaef !important;
  border-radius: 8px !important;
}
html[data-theme-profile="alyo"][data-theme="dark"] form input:focus,
html[data-theme-profile="alyo"][data-theme="dark"] form textarea:focus,
html[data-theme-profile="alyo"][data-theme="dark"] form select:focus {
  border-color: rgba(37, 99, 255, 0.85) !important;
  box-shadow: 0 0 0 1px rgba(37, 99, 255, 0.85) !important;
}

html[data-theme-profile="alyo"][data-theme="dark"] .hg-join-voice {
  background: transparent !important;
  box-shadow: none !important;
}

/* Fallback Discord chrome only when no named profile is set. */
html[data-theme="dark"]:not([data-theme-profile="alyo"]):not([data-theme-profile="neon"]):not([data-theme-profile="oled"]):not([data-theme-profile="soft-light"]) {
  --ctp-base: #313338 !important;
  --ctp-mantle: #2b2d31 !important;
  --ctp-crust: #1e1f22 !important;
  --ctp-surface0: #2b2d31 !important;
  --ctp-surface1: #3f4147 !important;
  --ctp-surface2: #4e5058 !important;
  --ctp-text: #f2f3f5 !important;
  --ctp-subtext1: #dbdee1 !important;
  --ctp-subtext0: #949ba4 !important;
  --ctp-blue: #5865f2 !important;
  --ctp-lavender: #949cf7 !important;
  --ctp-green: #23a559 !important;
  --ctp-yellow: #f0b232 !important;
  --ctp-red: #f23f43 !important;
  --ctp-pink: #eb459e !important;
  --surfaces-rail: #1e1f22 !important;
  --surfaces-user-panel: #232428 !important;
  --surfaces-composer: #383a40 !important;
  --surfaces-floating: #111214 !important;
  --surfaces-hover: #35373c !important;
  --surfaces-active: #404249 !important;
  --surfaces-selected: #404249 !important;
  --surfaces-message-hover: #2e3035 !important;
  --text-header: #f2f3f5 !important;
  --text-muted: #949ba4 !important;
  --text-link: #00a8fc !important;
  --text-interactive: #b5bac1 !important;
  --brand-discord: #5865f2 !important;
  --md-sys-color-surface: #313338 !important;
  --md-sys-color-surface-container: #2b2d31 !important;
  --md-sys-color-surface-container-low: #2b2d31 !important;
  --md-sys-color-surface-container-high: #232428 !important;
  --md-sys-color-surface-container-highest: #1e1f22 !important;
  --md-sys-color-primary: #5865f2 !important;
  --md-sys-color-on-primary: #ffffff !important;
  --md-sys-color-on-surface: #f2f3f5 !important;
  --md-sys-color-on-surface-variant: #b5bac1 !important;
}

[data-hg-profile="card"],
[data-hg-profile="sheet"] {
  background: #111214 !important;
  color: #f2f3f5 !important;
  border-radius: 8px;
}
[data-hg-profile] button[class],
[data-hg-profile] a[class] {
  border-radius: 4px;
}

/* Profile popout: name sits under the avatar, Discord-style, even before the next client build. */
[data-hg-profile="card"] > div:first-child > div:nth-child(2),
[data-hg-profile="sheet"] > div:nth-child(2) > div:nth-child(2) {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px !important;
}
[data-hg-profile] {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
}

/* Profile header: banner stays behind the avatar ring. */
[data-hg-profile] {
  isolation: isolate;
  background: #111214 !important;
  color: #f2f3f5 !important;
  border-radius: 8px !important;
  overflow: hidden;
}
[data-hg-profile] > div:first-child,
[data-hg-profile="sheet"] > div:nth-child(2) {
  isolation: isolate;
  overflow: visible !important;
}

/* Server settings: file-input fragments were separate grid cells, so the icon jumped to the right of its label. */
.settings_overlay .settings_cont form > div > div {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  align-items: stretch !important;
  box-sizing: border-box !important;
}
.settings_overlay .settings_cont form mdui-text-field,
.settings_overlay .settings_cont form mdui-select {
  align-self: stretch !important;
}
.settings_overlay .settings_cont form label,
.settings_overlay .settings_cont form .label {
  display: block !important;
  margin: 0 0 6px !important;
}
.settings_overlay .settings_cont form input:not([type="file"]),
.settings_overlay .settings_cont form textarea,
.settings_overlay .settings_cont form mdui-text-field,
.settings_overlay .settings_cont form mdui-select {
  width: 100% !important;
  max-width: none !important;
}

@media (max-width: 600px) {
  .app_body header,
.app_body [role="banner"] {
    overflow-x: auto !important;
    max-width: 100vw !important;
  }
}

/* Phone: the slide drawer widens the page to 200vw and parks the chat
   off-screen. The visible half is then a black void. */
@media (max-width: 840px) {
  html,
body {
    overflow-x: hidden;
    max-width: 100%;
  }
  .app_body {
    margin-left: 0 !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100vw !important;
  }
}

@media (max-width: 840px) {
  [style*="app-region: drag"],
[style*="app-region:drag"] {
    -webkit-app-region: no-drag !important;
  }
}


/* ========== Алё theme system (TZ tokens + shell/chat/voice/mobile) ========== */
/* ========== Алё — токены (единый источник; html + body, т.к. LoadTheme пишет inline в оба) ========== */
html[data-theme-profile="alyo"],
html[data-theme-profile="alyo"] body {
  --hg-brass: var(--accent-blue, #2563ff) !important;
  --hg-brass-soft: rgba(37, 99, 255, 0.12) !important;
  --hg-ink: #0c0e12 !important;
  --hg-rail: #101218 !important;
  --hg-panel: #14171e !important;
  --hg-chat: #181c24 !important;
  --hg-lift: #1e232c !important;
  --hg-text: #e8eaef !important;
  --hg-muted: #8e95a3 !important;
  --hg-link: #a9bdd6 !important;
  --bg-main: #080b18 !important;
  --bg-sidebar: #0d1224 !important;
  --bg-panel: #10162b !important;
  --bg-panel-hover: #151d36 !important;
  --bg-input: #0a1022 !important;
  --border: rgba(120, 130, 255, 0.18) !important;
  --border-active: rgba(120, 130, 255, 0.45) !important;
  --text-primary: #f5f7ff !important;
  --text-secondary: #9ca6c5 !important;
  --text-muted: #687292 !important;
  --accent-blue: #2563ff !important;
  --accent-cyan: #00d9ff !important;
  --accent-purple: #8b35ff !important;
  --accent-pink: #e927ff !important;
  --accent-yellow: #ffd429 !important;
  --success: #22e58a !important;
  --warning: #ffd429 !important;
  --danger: #ff416c !important;
  --radius-sm: 6px !important;
  --radius-md: 10px !important;
  --radius-lg: 14px !important;
  --radius-xl: 20px !important;
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
  --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.45) !important;
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.55) !important;
  --transition-fast: 150ms ease !important;
  --transition-normal: 200ms ease !important;
  --on-success: #04150c !important;
  --alyo-btn: rgba(120, 130, 255, 0.14) !important;
  --alyo-btn-hover: rgba(120, 130, 255, 0.26) !important;
  --alyo-pill: 999px !important;
  --alyo-muted-row: #5b6488 !important;
}
html[data-theme-profile="alyo"][data-theme="dark"],
html[data-theme-profile="alyo"][data-theme="dark"] body {
  --ctp-base: #10162b !important;
  --ctp-mantle: #0d1224 !important;
  --ctp-crust: #080b18 !important;
  --ctp-text: #f5f7ff !important;
  --ctp-subtext1: #9ca6c5 !important;
  --ctp-subtext0: #687292 !important;
  --ctp-overlay1: #687292 !important;
  --ctp-blue: #2563ff !important;
  --ctp-lavender: #8b35ff !important;
  --ctp-green: #22e58a !important;
  --ctp-teal: #00d9ff !important;
  --ctp-yellow: #ffd429 !important;
  --ctp-red: #ff416c !important;
  --ctp-peach: #ff8a5b !important;
  --ctp-mauve: #e927ff !important;
  --surfaces-rail: #080b18 !important;
  --surfaces-user-panel: #080b18 !important;
  --surfaces-floating: #0d1224 !important;
  --text-header: #f5f7ff !important;
  --text-muted: #687292 !important;
  --text-link: #00d9ff !important;
  --text-interactive: #9ca6c5 !important;
  --brand-discord: #2563ff !important;
  --md-sys-color-surface: #10162b !important;
  --md-sys-color-surface-container-low: #0d1224 !important;
  --md-sys-color-surface-container-highest: #080b18 !important;
  --md-sys-color-primary: #2563ff !important;
  --md-sys-color-on-primary: #f5f7ff !important;
  --md-sys-color-on-surface: #f5f7ff !important;
  --md-sys-color-on-surface-variant: #9ca6c5 !important;
  --md-sys-color-primary-container: #1a2a66 !important;
  --md-sys-color-on-primary-container: #dbe4ff !important;
  --alyo-navy: #080b18 !important;
  --alyo-panel: rgba(13, 18, 40, 0.82) !important;
  --alyo-panel-solid: #0d1228 !important;
  --alyo-panel-2: rgba(16, 22, 43, 0.88) !important;
  --alyo-glass: rgba(10, 14, 32, 0.72) !important;
  --alyo-magenta: #e927ff !important;
  --alyo-cyan: #00d9ff !important;
  --alyo-yellow: #ffd429 !important;
  --alyo-blue: #2563ff !important;
  --alyo-green: #22e58a !important;
  --alyo-purple: #8b35ff !important;
  --alyo-border: rgba(160, 140, 255, 0.22) !important;
  --alyo-glow-y: 0 0 18px rgba(255, 212, 41, 0.45) !important;
  --alyo-glow-m: 0 0 18px rgba(233, 39, 255, 0.4) !important;
  --alyo-glow-c: 0 0 18px rgba(0, 217, 255, 0.4) !important;
  --alyo-radius: 14px !important;
  --ctp-surface0: #161d31 !important;
  --ctp-surface1: #1f2942 !important;
  --ctp-surface2: #293556 !important;
  --surfaces-hover: rgba(37, 99, 255, 0.14) !important;
  --surfaces-active: rgba(233, 39, 255, 0.12) !important;
  --surfaces-selected: rgba(37, 99, 255, 0.22) !important;
  --surfaces-message-hover: rgba(139, 53, 255, 0.08) !important;
  --surfaces-composer: rgba(10, 16, 34, 0.88) !important;
  --md-sys-color-surface-container: #0d1228 !important; /* меню/пикеры: непрозрачно, иначе текст ложится на чат */
  --md-sys-color-surface-container-high: #121a33 !important;
}
html[data-theme-profile="alyo"][data-theme="light"],
html[data-theme-profile="alyo"][data-theme="light"] body {
  --ctp-base: #f3f4f6 !important;
  --ctp-mantle: #e8eaee !important;
  --ctp-crust: #e1e3e8 !important;
  --ctp-surface0: #ffffff !important;
  --ctp-text: #1c1f26 !important;
  --ctp-subtext0: #5c6570 !important;
  --ctp-blue: #3d5f8a !important;
  --ctp-lavender: #3d5f8a !important;
  --ctp-mauve: #3d5f8a !important;
  --md-sys-color-primary: #8d6b32 !important;
  --md-sys-color-on-primary: #fffaf2 !important;
  --md-sys-color-on-surface: #1c1f26 !important;
  --brand-discord: #3d5f8a !important;
  --text-link: #3d5f8a !important;
}
html[data-theme-profile="alyo"] {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html[data-theme-profile="alyo"][data-theme="dark"] {
  background: var(--bg-main) !important;
  color: var(--text-primary) !important;
}

html[data-theme-profile="alyo"][data-theme="dark"] body,
html[data-theme-profile="alyo"][data-theme="dark"] #root {
  background: var(--bg-main) !important;
}

/* Stage 3 — layout shell */
html[data-theme-profile="alyo"][data-theme="dark"] .main_bar {
  width: auto;
  min-width: 72px;
}
html[data-theme-profile="alyo"][data-theme="dark"] .main_bar img {
  border-radius: 16px !important;
  transition: border-radius var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast) !important;
}
html[data-theme-profile="alyo"][data-theme="dark"] .main_bar a:hover img {
  border-radius: 12px !important;
  box-shadow: 0 0 0 2px var(--accent-cyan), 0 0 16px rgba(0, 217, 255, 0.35) !important;
  transform: translateY(-1px);
}

html[data-theme-profile="alyo"][data-theme="dark"] .channel_bar,
html[data-theme-profile="alyo"][data-theme="dark"] aside {
  min-width: 240px;
  max-width: 280px;
}

/* Stage 4 — chat */

html[data-theme-profile="alyo"][data-theme="dark"] button[type="submit"],
html[data-theme-profile="alyo"][data-theme="dark"] .hg-up-primary,
html[data-theme-profile="alyo"][data-theme="dark"] .hg-fb-send,
html[data-theme-profile="alyo"][data-theme="dark"] button[data-variant="filled"],
html[data-theme-profile="alyo"][data-theme="dark"] button.md-filled {
  animation: none !important;
}

/* Stage 5 — voice */
html[data-theme-profile="alyo"][data-theme="dark"] .vc_tile {
  transition: box-shadow var(--transition-normal), border-color var(--transition-normal) !important;
}
html[data-theme-profile="alyo"][data-theme="dark"] .hg-vc-controls {
  backdrop-filter: blur(8px);
}

/* Stage 6 — profile / settings / modals */

/* Stage 7 — mobile */
@media (max-width: 840px) {
  html[data-theme-profile="alyo"] html,
html[data-theme-profile="alyo"] body {
    overflow-x: hidden;
    max-width: 100%;
  }
  html[data-theme-profile="alyo"] .app_root {
    width: 100% !important;
    max-width: 100vw !important;
  }
  html[data-theme-profile="alyo"] .app_body {
    margin-left: 0 !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100vw !important;
  }
  html[data-theme-profile="alyo"] .channel_bar {
    min-width: 0 !important;
    max-width: none !important;
  }
}
#hg-bottom-nav {
  color: var(--text-secondary, #9ca6c5) !important;
}
#hg-bottom-nav button {
  color: var(--text-secondary, #9ca6c5) !important;
  transition: color var(--transition-fast, 150ms ease) !important;
}

/* Stage 8 — auth */
.hg-auth button[type="submit"] {
  color: #fff !important;
}
.hg-auth input {
  background: var(--bg-input, #0a1022) !important;
  color: var(--text-primary, #f5f7ff) !important;
  border: 1px solid var(--border, rgba(120, 130, 255, 0.18)) !important;
}
.hg-auth textarea {
  background: var(--bg-input, #0a1022) !important;
  color: var(--text-primary, #f5f7ff) !important;
  border: 1px solid var(--border, rgba(120, 130, 255, 0.18)) !important;
  border-radius: var(--radius-md, 10px) !important;
}

/* Stage 9 — empty / polish */
html[data-theme-profile="alyo"][data-theme="dark"] .hg-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px 24px;
  color: var(--text-secondary);
  text-align: center;
}
html[data-theme-profile="alyo"][data-theme="dark"] .hg-empty img {
  width: 112px;
  height: 112px;
}
html[data-theme-profile="alyo"][data-theme="dark"] .cm-content,
html[data-theme-profile="alyo"][data-theme="dark"] .cm-line {
  color: var(--text-primary) !important;
  caret-color: var(--accent-cyan) !important;
}
html[data-theme-profile="alyo"][data-theme="dark"] .cm-editor.cm-focused {
  outline: 2px solid rgba(0, 217, 255, 0.65);
  outline-offset: 1px;
}


/* ========== Алё street system — all surfaces (chat / menus / settings) ========== */

html[data-theme-profile="alyo"][data-theme="dark"] body,
html[data-theme-profile="alyo"][data-theme="dark"] #root {
  color: #f5f7ff !important;
}

/* Floating graffiti frame */
#hg-theme-frame {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
#hg-theme-frame .hg-splat {
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
}
#hg-theme-frame .hg-splat-bl {
  background-image: url(/theme/graffiti-01.svg);
}
#hg-theme-frame .hg-splat-tr {
  background-image: url(/theme/graffiti-02.svg);
}
#hg-theme-frame .hg-splat-br {
  background-image: url(/theme/doodle-smile.svg);
}
#hg-theme-frame .hg-splat-tl {
  background-image: url(/theme/doodle-crown.svg);
}
#hg-theme-frame .hg-slogan {
  position: absolute;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
  user-select: none;
}
#hg-theme-frame .hg-slogan-bl { color: #ffd429; font-size: clamp(14px, 2.2vw, 28px); }
#hg-theme-frame .hg-slogan-br { color: #e927ff; font-size: clamp(12px, 1.8vw, 22px); }
#hg-theme-frame .hg-slogan-tr { color: #00d9ff; font-size: clamp(12px, 1.6vw, 20px); }
#hg-theme-frame .hg-slogan-mid { color: #fff; font-size: clamp(11px, 1.4vw, 18px); text-shadow: 2px 2px 0 #111, 0 0 14px rgba(233,39,255,.45); }

html[data-theme-profile="alyo"][data-theme="dark"] .app_root,
html[data-theme-profile="alyo"][data-theme="dark"] #root > div {
  position: relative;
  z-index: 1;
}

/* ---- Panels: glass navy so graffiti bleeds ---- */
html[data-theme-profile="alyo"][data-theme="dark"] aside {
  background: var(--alyo-panel) !important;
  backdrop-filter: blur(10px);
  box-shadow: inset -1px 0 0 var(--alyo-border) !important;
  border-radius: 0 16px 16px 0;
}

/* Rail active — yellow pip + glow */
html[data-theme-profile="alyo"][data-theme="dark"] .main_bar a img {
  border-radius: 16px !important;
  transition: border-radius 150ms ease, box-shadow 150ms ease !important;
}
html[data-theme-profile="alyo"][data-theme="dark"] .main_bar a[aria-current="page"] img,
html[data-theme-profile="alyo"][data-theme="dark"] .main_bar [data-selected="true"] img,
html[data-theme-profile="alyo"][data-theme="dark"] .main_bar a.active img {
  border-radius: 50% !important;
  box-shadow: 0 0 0 2px var(--alyo-yellow) !important;
}
html[data-theme-profile="alyo"][data-theme="dark"] .main_bar a[aria-current="page"]::before,
html[data-theme-profile="alyo"][data-theme="dark"] .main_bar [data-selected="true"]::before,
html[data-theme-profile="alyo"][data-theme="dark"] .main_bar a.active::before {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  box-shadow: none !important;
}

/* Active channel row */
html[data-theme-profile="alyo"][data-theme="dark"] .channel_bar a[aria-current="page"] {
  color: #fff !important;
}
html[data-theme-profile="alyo"][data-theme="dark"] .channel_bar [data-selected="true"],
html[data-theme-profile="alyo"][data-theme="dark"] .channel_bar a.active,
html[data-theme-profile="alyo"][data-theme="dark"] aside a[aria-selected="true"] {
  background: rgba(37, 99, 255, 0.22) !important;
  box-shadow: inset 0 0 0 1px rgba(120, 160, 255, 0.18), 0 0 16px rgba(37, 99, 255, 0.18) !important;
  color: #fff !important;
  border-radius: 12px !important;
}

/* Chat area + watermark */
html[data-theme-profile="alyo"][data-theme="dark"] [class*="messages"] {
  backdrop-filter: blur(6px);
}

/* Messages / reactions */

/* Composer pill + send */
html[data-theme-profile="alyo"][data-theme="dark"] [class*="composer"] {
  margin: 10px 16px 16px !important;
}
html[data-theme-profile="alyo"][data-theme="dark"] [class*="composer"] button[aria-label*="Send"],
html[data-theme-profile="alyo"][data-theme="dark"] [class*="composer"] button[aria-label*="Отправ"] {
  background: var(--alyo-blue) !important;
  border-radius: 999px !important;
  box-shadow: 0 0 20px rgba(37, 99, 255, 0.5) !important;
}

html[data-theme-profile="alyo"][data-theme="dark"] [data-mentioned="true"] {
  background: rgba(233, 39, 255, 0.1) !important;
  box-shadow: inset 3px 0 0 0 var(--alyo-magenta) !important;
}

/* User panel + friends */
html[data-theme-profile="alyo"][data-theme="dark"] .hg-add-friend {
  background: var(--alyo-green) !important;
  color: #0b0d19 !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  box-shadow: 0 0 16px rgba(34, 229, 138, 0.4) !important;
}

/* Offline desaturate */
html[data-theme-profile="alyo"][data-theme="dark"] [data-offline="true"] {
  filter: grayscale(0.85) brightness(0.75);
  opacity: 0.72;
}

/* ---- Settings: same street glass ---- */
html[data-theme-profile="alyo"][data-theme="dark"] .settings_overlay {
  backdrop-filter: blur(14px);
}
html[data-theme-profile="alyo"][data-theme="dark"] .settings_sidebar {
  background: var(--alyo-panel) !important;
  border-right: 1px solid var(--alyo-border) !important;
  backdrop-filter: blur(12px);
}
html[data-theme-profile="alyo"][data-theme="dark"] .settings_cont {
  background: var(--alyo-panel-2) !important;
  border-radius: 18px !important;
  border: 1px solid var(--alyo-border) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.45) !important;
  padding: 8px 8px 24px !important;
}

/* Inputs / buttons everywhere */
html[data-theme-profile="alyo"][data-theme="dark"] input,
html[data-theme-profile="alyo"][data-theme="dark"] textarea,
html[data-theme-profile="alyo"][data-theme="dark"] select {
  background: rgba(10, 16, 34, 0.95) !important;
  color: #f5f7ff !important;
  border: 1px solid var(--alyo-border) !important;
  border-radius: 12px !important;
}
/* mdui-text-field рисует рамку сам (в shadow DOM): вторая рамка на хосте давала двойной контур */
html[data-theme-profile="alyo"][data-theme="dark"] mdui-text-field {
  color: #f5f7ff !important;
  --mdui-color-surface-container-highest: 10, 16, 34;
}
html[data-theme-profile="alyo"][data-theme="dark"] mdui-text-field::part(container) {
  background: var(--bg-input) !important;
  border: 1px solid var(--alyo-border) !important;
  border-radius: 12px !important;
}
html[data-theme-profile="alyo"][data-theme="dark"] input:focus-visible,
html[data-theme-profile="alyo"][data-theme="dark"] textarea:focus-visible,
html[data-theme-profile="alyo"][data-theme="dark"] button:focus-visible {
  outline: 2px solid var(--alyo-cyan) !important;
  outline-offset: 2px;
  box-shadow: var(--alyo-glow-c);
}

html[data-theme-profile="alyo"][data-theme="dark"] button[type="submit"],
html[data-theme-profile="alyo"][data-theme="dark"] button[data-variant="filled"],
html[data-theme-profile="alyo"][data-theme="dark"] button.md-filled,
html[data-theme-profile="alyo"][data-theme="dark"] .hg-up-primary,
html[data-theme-profile="alyo"][data-theme="dark"] .hg-fb-send {
  background: linear-gradient(135deg, var(--alyo-blue), var(--alyo-purple)) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
  box-shadow: 0 0 20px rgba(37, 99, 255, 0.4) !important;
}


/* Menus / modals / dialogs */
html[data-theme-profile="alyo"][data-theme="dark"] [role="dialog"],
html[data-theme-profile="alyo"][data-theme="dark"] [role="menu"],
html[data-theme-profile="alyo"][data-theme="dark"] [class*="ContextMenu"],
html[data-theme-profile="alyo"][data-theme="dark"] [class*="Menu"] {
  background: rgba(12, 16, 36, 0.94) !important;
  border: 1px solid var(--alyo-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.55), 0 0 0 1px rgba(255, 212, 41, 0.06) !important;
  backdrop-filter: blur(14px);
  color: #f5f7ff !important;
}
html[data-theme-profile="alyo"][data-theme="dark"] [role="menuitem"]:hover,
html[data-theme-profile="alyo"][data-theme="dark"] [class*="ContextMenu"] button:hover,
html[data-theme-profile="alyo"][data-theme="dark"] [class*="Menu"] [role="menuitem"]:focus {
  background: rgba(37, 99, 255, 0.18) !important;
  color: #fff !important;
}

/* Category buttons / list rows in settings */

/* Scrollbars */
html[data-theme-profile="alyo"][data-theme="dark"] *::-webkit-scrollbar { width: 8px; height: 8px; }
html[data-theme-profile="alyo"][data-theme="dark"] *::-webkit-scrollbar-track { background: transparent; }
html[data-theme-profile="alyo"][data-theme="dark"] *::-webkit-scrollbar-thumb {
  background: rgba(120, 130, 255, 0.35);
  border-radius: 999px;
}
html[data-theme-profile="alyo"][data-theme="dark"] *::-webkit-scrollbar-thumb:hover {
  background: rgba(233, 39, 255, 0.55);
}

/* Voice inherits street */

/* Auth stays street */
.hg-auth button[type="submit"] {
  background: linear-gradient(135deg, #2563ff, #8b35ff) !important;
  box-shadow: 0 0 22px rgba(37, 99, 255, 0.45) !important;
  border-radius: 12px !important;
}
.hg-auth a { color: #00d9ff !important; }

#hg-bottom-nav {
  background: rgba(8, 11, 24, 0.94) !important;
  border-top: 1px solid var(--alyo-border, rgba(120,130,255,.18)) !important;
  backdrop-filter: blur(12px);
}

@media (max-width: 840px) {
  #hg-theme-frame .hg-splat { opacity: 0.35; }
  html[data-theme-profile="alyo"][data-theme="dark"] aside {
    border-radius: 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme-profile="alyo"] * {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
  }
}


/* ========== Voice street chrome (separated rounded call UI) ========== */
@keyframes hgVcPillIn {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes hgVcTagPulse {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(233,39,255,.35)); }
  50% { filter: drop-shadow(0 0 14px rgba(233,39,255,.7)); }
}
@keyframes hgVcSmileSpin {
  from { transform: rotate(-8deg) scale(1); }
  50% { transform: rotate(8deg) scale(1.08); }
  to { transform: rotate(-8deg) scale(1); }
}

html[data-theme-profile="alyo"][data-theme="dark"] .hg-vc-slot + * .hg-vc-card {
  border-radius: 22px !important;
  overflow: hidden !important;
  background:
    url(/theme/frame-splat.svg),
    radial-gradient(480px 280px at 10% 90%, rgba(233,39,255,.16), transparent 60%),
    radial-gradient(400px 240px at 95% 10%, rgba(0,217,255,.12), transparent 62%),
    rgba(10, 14, 30, 0.88) !important;
  background-size: cover, auto, auto, auto !important;
  background-repeat: no-repeat !important;
  border: 1px solid rgba(160, 140, 255, 0.24) !important;
  box-shadow:
    0 22px 56px rgba(0,0,0,.55),
    0 0 0 1px rgba(255, 212, 41, 0.08),
    0 0 40px rgba(233, 39, 255, 0.1) !important;
  backdrop-filter: blur(16px);
}

html[data-theme-profile="alyo"][data-theme="dark"] .hg-vc-view {
  position: relative;
  isolation: isolate;
}

/* Separated header strip inside call — “верхняя часть окна отдельно” */
html[data-theme-profile="alyo"][data-theme="dark"] .hg-vc-chrome {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  min-height: 44px;
  padding: 8px 14px;
  margin: -4px -4px 4px;
  border-radius: 16px;
  background: rgba(8, 11, 24, 0.72);
  border: 1px solid rgba(160, 140, 255, 0.18);
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
  backdrop-filter: blur(10px);
  overflow: hidden;
}
html[data-theme-profile="alyo"][data-theme="dark"] .hg-vc-chrome::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    url(/theme/graffiti-01.svg) left -20% center / 42% no-repeat,
    linear-gradient(90deg, rgba(233,39,255,.12), transparent 45%);
  opacity: 0.55;
  pointer-events: none;
}
html[data-theme-profile="alyo"][data-theme="dark"] .hg-vc-chrome-logo {
  position: relative;
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -0.04em;
  color: #fff;
  -webkit-text-stroke: 3px #111;
  paint-order: stroke fill;
  text-shadow: 0 3px 0 #22e58a, 0 0 14px rgba(34,229,138,.45);
  line-height: 1;
}
html[data-theme-profile="alyo"][data-theme="dark"] .hg-vc-chrome-logo::before {
  content: "";
  display: inline-block;
  width: 14px; height: 12px;
  margin-right: 4px;
  vertical-align: 6px;
  background: url(/theme/doodle-crown.svg) center / contain no-repeat;
}
html[data-theme-profile="alyo"][data-theme="dark"] .hg-vc-chrome-tag {
  position: relative;
  font-family: Impact, "Arial Black", system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(11px, 1.5vw, 16px);
  letter-spacing: 0.04em;
  color: #fff;
  text-transform: uppercase;
  transform: rotate(-3deg);
  text-shadow: 2px 2px 0 #111, 0 0 12px rgba(233,39,255,.55);
  animation: hgVcTagPulse 2.8s ease-in-out infinite;
  margin-left: auto;
}
html[data-theme-profile="alyo"][data-theme="dark"] .hg-vc-chrome-smile {
  position: relative;
  width: 28px; height: 28px;
  flex-shrink: 0;
  background: url(/theme/doodle-smile.svg) center / contain no-repeat;
  animation: hgVcSmileSpin 3.2s ease-in-out infinite;
}

/* Floating bottom pill */
html[data-theme-profile="alyo"][data-theme="dark"] .hg-vc-actions {
  backdrop-filter: blur(16px) !important;
}
html[data-theme-profile="alyo"][data-theme="dark"] .hg-vc-actions button.hg-vc-hangup {
  background: #ff416c !important;
  box-shadow: 0 0 22px rgba(255, 65, 108, 0.55) !important;
}

/* Tile speaking yellow already; reinforce street look */
html[data-theme-profile="alyo"][data-theme="dark"] .vc_tile[data-speaking="true"],
html[data-theme-profile="alyo"][data-theme="dark"] [data-speaking="true"] {
  border-color: #ffd429 !important;
  box-shadow: 0 0 0 3px rgba(255, 212, 41, 0.55), 0 0 28px rgba(255, 212, 41, 0.35) !important;
}

/* Fullscreen call also street */
html[data-theme-profile="alyo"][data-theme="dark"] #floating.hg-vc-fullscreen > .hg-vc-card {
  border-radius: 0 !important;
  border: 0 !important;
}
html[data-theme-profile="alyo"][data-theme="dark"] #floating.hg-vc-fullscreen .hg-vc-chrome {
  margin: 8px 12px 0;
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme-profile="alyo"][data-theme="dark"] .hg-vc-chrome-tag,
html[data-theme-profile="alyo"][data-theme="dark"] .hg-vc-chrome-smile,
html[data-theme-profile="alyo"][data-theme="dark"] .hg-vc-actions {
    animation: none !important;
  }
}


html[data-theme-profile="alyo"][data-theme="dark"] .hg-vc-slot {
  background: transparent !important;
  box-shadow: none !important;
}
html[data-theme-profile="alyo"][data-theme="dark"] .hg-vc-card,
html[data-theme-profile="alyo"][data-theme="dark"] #floating .hg-vc-card {
  background:
    url(/theme/frame-splat.svg),
    radial-gradient(520px 300px at 8% 92%, rgba(233, 39, 255, 0.22), transparent 58%),
    radial-gradient(420px 260px at 95% 8%, rgba(0, 217, 255, 0.16), transparent 60%),
    rgba(10, 14, 32, 0.94) !important;
  background-size: cover, auto, auto, auto !important;
  background-repeat: no-repeat !important;
  border: 1px solid rgba(160, 140, 255, 0.32) !important;
  border-radius: 22px !important;
  box-shadow:
    0 22px 56px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 212, 41, 0.12),
    0 0 40px rgba(233, 39, 255, 0.16) !important;
  overflow: hidden !important;
  backdrop-filter: blur(16px);
}

html[data-theme-profile="alyo"][data-theme="dark"] .hg-vc-view {
  background:
    radial-gradient(480px 260px at 12% 90%, rgba(233, 39, 255, 0.18), transparent 60%),
    radial-gradient(400px 220px at 90% 10%, rgba(0, 217, 255, 0.14), transparent 62%),
    rgba(8, 11, 24, 0.28) !important;
}

html[data-theme-profile="alyo"][data-theme="dark"] .hg-vc-actions,
html[data-theme-profile="alyo"][data-theme="dark"] .hg-vc-controls {
  background: rgba(8, 11, 24, 0.94) !important;
  border: 1px solid rgba(160, 140, 255, 0.28) !important;
  border-radius: 999px !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.5), 0 0 24px rgba(233,39,255,.12) !important;
}

html[data-theme-profile="alyo"][data-theme="dark"] .vc_tile {
  background: rgba(16, 22, 43, 0.92) !important;
  border: 1px solid rgba(160, 140, 255, 0.22) !important;
  border-radius: 18px !important;
}

/* Shell: floating rounded columns like mockup 3–4 */
html[data-theme-profile="alyo"][data-theme="dark"] .app_root {
  box-sizing: border-box;
}
html[data-theme-profile="alyo"][data-theme="dark"] .main_bar {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}
html[data-theme-profile="alyo"][data-theme="dark"] .channel_bar {
  margin: 0 !important;
  border-radius: 20px !important;
  border: 1px solid rgba(160, 140, 255, 0.2) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.36) !important;
  overflow: hidden;
}
html[data-theme-profile="alyo"][data-theme="dark"] .app_body {
  backdrop-filter: blur(8px);
}
html[data-theme-profile="alyo"][data-theme="dark"] main {
  margin: 0 !important;
  border-radius: 20px !important;
  border: 1px solid rgba(160, 140, 255, 0.2) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.36) !important;
  overflow: hidden;
  backdrop-filter: blur(8px);
}

html[data-theme-profile="alyo"][data-theme="dark"] .app_body > header,
html[data-theme-profile="alyo"][data-theme="dark"] main > header {
  background: rgba(8, 11, 24, 0.82) !important;
  border-bottom: 1px solid rgba(160, 140, 255, 0.18) !important;
  border-radius: 18px 18px 0 0 !important;
  backdrop-filter: blur(12px);
  min-height: 52px;
}

html[data-theme-profile="alyo"][data-theme="dark"] [class*="composer"] {
  background: rgba(10, 16, 34, 0.92) !important;
  border: 1px solid rgba(160, 140, 255, 0.22) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.28) !important;
}

/* Settings — not Discord gray */
html[data-theme-profile="alyo"][data-theme="dark"] .settings_sidebar a[aria-selected="true"] {
  border-radius: 12px !important;
}

html[data-theme-profile="alyo"][data-theme="dark"] .channel_bar a[aria-current="page"] {
  background: rgba(37, 99, 255, 0.24) !important;
  box-shadow: 0 0 18px rgba(37, 99, 255, 0.22) !important;
  border-radius: 12px !important;
}

/* Graffiti frame louder */
#hg-theme-frame .hg-logo-mark {
  position: absolute;
  background: url(/theme/logo.svg) center / contain no-repeat;
}
#hg-theme-frame .hg-logo-tr { transform: rotate(8deg); }
#hg-theme-frame .hg-slogan-mid2 {
  position: absolute;
  color: #ffd429;
  font-family: Impact, "Arial Black", system-ui, sans-serif;
  font-weight: 900;
  text-shadow: 2px 2px 0 #111, 0 0 14px rgba(255,212,41,.4);
  pointer-events: none;
  text-transform: uppercase;
}

html[data-theme-profile="alyo"] a[href*="stoat"],
html[data-theme-profile="alyo"] a[href*="stoatchat"],
html[data-theme-profile="alyo"] a[href*="revolt.chat"] {
  display: none !important;
}

.hg-symbol-svg,
.hg-symbol-svg path {
  fill: currentColor !important;
}

/* Mobile settings: desktop calc(100vw - 320px) collapses content to ~40px */
@media (max-width: 840px) {
  .settings_overlay {
    flex-direction: column !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }
  .settings_overlay .settings_sidebar {
    flex: 0 0 auto !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(160, 140, 255, 0.18) !important;
  }
  .settings_overlay .settings_sidebar .content {
    display: flex !important;
    flex-direction: row !important;
    gap: 4px !important;
    padding: 8px !important;
    overflow-x: auto !important;
  }
  .settings_overlay .settings_cont {
    flex: 1 1 auto !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 16px !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
  }
  .settings_overlay .settings_action_rail {
    display: none !important;
  }
}

/* ========== Visual polish — icons, composer, panels (20260928u) ========== */

/* Sync SVG icons — never show ligature names */
.hg-symbol-wrap {
  font-size: 0 !important;
  line-height: 0 !important;
  letter-spacing: 0 !important;
  overflow: hidden;
  vertical-align: middle;
}
.hg-symbol-wrap .hg-symbol-svg {
  color: inherit;
}
.hg-symbol-wrap svg {
  width: 100% !important;
  height: 100% !important;
  display: block;
  flex-shrink: 0;
  fill: currentColor;
  color: inherit;
}

/* Profile bar + channel sidebar icon buttons */
.channel_bar button .hg-symbol-wrap {
  min-width: 22px !important;
  min-height: 22px !important;
}

/* Composer toolbar — icon-only buttons */
.hg-composer button svg.hg-symbol-svg {
  width: 22px !important;
  height: 22px !important;
}

/* Channel list row icons */

/* Voice join pill — street neon */
html[data-theme-profile="alyo"] .hg-join-voice {
  cursor: pointer !important;
  transition: transform 150ms ease, box-shadow 150ms ease !important;
}
html[data-theme-profile="alyo"] .hg-join-voice:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 32px rgba(233, 39, 255, 0.35) !important;
}
html[data-theme-profile="alyo"] .hg-join-voice .title {
  font-weight: 700 !important;
  text-shadow: 0 0 12px rgba(0, 217, 255, 0.35);
}
html[data-theme-profile="alyo"] .hg-join-voice .hg-symbol-svg {
  width: 22px !important;
  height: 22px !important;
  color: #00d9ff !important;
}

/* Separated rounded shell panels */
html[data-theme-profile="alyo"][data-theme="dark"] .app_body > div:has([class*="message"]) {
  border-radius: 16px !important;
}

/* Message composer card */

/* User panel compact */

/* Category headers */

/* Server name chevron */

/* Member list breathing room */

/* Graffiti frame behind UI, not over text */
.app_root,
.app_body,
.channel_bar,
.main_bar {
  position: relative;
  z-index: 1;
}

@media (max-width: 840px) {
  html[data-theme-profile="alyo"][data-theme="dark"] .main_bar {
    margin: 0 !important;
  }
  html[data-theme-profile="alyo"][data-theme="dark"] .channel_bar {
    margin: 0 !important;
    border-radius: 0 !important;
  }
}

/* ========== Stage 10 — chat polish + rail + discover (20260929a) ========== */

/* Tone down graffiti when chatting */
body.hg-in-channel #hg-theme-frame .hg-slogan,
body.hg-in-channel #hg-theme-frame .hg-slogan-mid2 {
  pointer-events: none;
}

/* Server rail */
/* Server rail — only the icon column, not the whole sidebar shell */
html[data-theme-profile="alyo"] .main_bar {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
}
html[data-theme-profile="alyo"] .main_bar > :first-child {
  width: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
  flex-shrink: 0 !important;
  padding: 8px 0 !important;
  box-sizing: border-box !important;
}
html[data-theme-profile="alyo"] .main_bar [class*="indicator"][class*="selected"],
html[data-theme-profile="alyo"] .main_bar a[class*="home"] {
  box-shadow: 0 0 0 2px rgba(0, 217, 255, 0.45), 0 0 18px rgba(37, 99, 255, 0.35) !important;
}

/* Channel sidebar width */
html[data-theme-profile="alyo"] .channel_bar {
  width: min(280px, 32vw) !important;
  min-width: 240px !important;
}

/* Sticky glass header */

/* Chat area — subtle depth, not flat gray */
html[data-theme-profile="alyo"][data-theme="dark"] [class*="messages"] {
  background:
    radial-gradient(900px 420px at 80% 0%, rgba(139, 53, 255, 0.08), transparent 55%),
    radial-gradient(700px 360px at 0% 100%, rgba(0, 217, 255, 0.06), transparent 60%),
    #0c1022 !important;
}

/* Message rows */

/* Reactions */

/* Composer — unify conflicting rules */

/* Discover overlay cards */
#hg-discover {
  background: rgba(8, 11, 24, 0.96) !important;
  padding: 24px 20px 80px !important;
}
#hg-discover .hg-disc-card {
  display: block;
  padding: 14px 16px;
  margin-bottom: 10px;
  border-radius: 14px;
  text-decoration: none;
  color: #f5f7ff;
  background: rgba(13, 18, 40, 0.9);
  border: 1px solid rgba(160, 140, 255, 0.22);
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
  transition: transform 150ms ease, border-color 150ms ease;
}
#hg-discover .hg-disc-card:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 217, 255, 0.45);
}
#hg-discover .hg-disc-card strong {
  display: block;
  font-size: 16px;
  margin-bottom: 4px;
}
#hg-discover .hg-disc-card span {
  font-size: 13px;
  color: #9ca6c5;
}

/* Scrollbars */
html[data-theme-profile="alyo"] * {
  scrollbar-width: thin;
  scrollbar-color: rgba(120, 130, 255, 0.35) transparent;
}
html[data-theme-profile="alyo"] *::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
html[data-theme-profile="alyo"] *::-webkit-scrollbar-thumb {
  background: rgba(120, 130, 255, 0.35);
  border-radius: 999px;
}

/* Auth inputs polish */
.hg-auth mdui-text-field,
.hg-auth mdui-button,
.hg-auth input {
  border-radius: 12px !important;
}
.hg-auth mdui-button[type="submit"],
.hg-auth button[type="submit"] {
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
}

/* Mobile: header back + drawer */
@media (max-width: 840px) {
  body.hg-has-bottom-nav .channel_bar {
    padding-bottom: 4px !important;
  }
}

/* ========== Stage 10b — sidebar/composer/modal/icon fixes (20260929c) ========== */
.hg-symbol-wrap .hg-symbol-ph { display: block; border-radius: 3px; opacity: 0.35; background: currentColor; }
html[data-theme-profile="alyo"] .hg-join-voice {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  box-sizing: border-box !important;
}
html[data-theme-profile="alyo"][data-theme="dark"] .hg-composer-box {
  flex: 1 !important;
  color: #f5f7ff !important;
}
html[data-theme-profile="alyo"][data-theme="dark"] .hg-composer-box .cm-editor,
html[data-theme-profile="alyo"][data-theme="dark"] .hg-composer-box .cm-content {
  background: transparent !important;
  color: #f5f7ff !important;
  font-size: 15px !important;
}
html[data-theme-profile="alyo"][data-theme="dark"] .hg-composer-box .cm-placeholder {
  color: #8e98b0 !important;
}

html[data-theme-profile="alyo"][data-theme="dark"] .dialog_scrim {
  background: rgba(4, 6, 16, 0.72) !important;
  backdrop-filter: blur(6px);
}
html[data-theme-profile="alyo"][data-theme="dark"] .dialog {
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 24px 64px rgba(0,0,0,.6), 0 0 0 1px rgba(160, 140, 255, 0.2) !important;
}
html[data-theme-profile="alyo"][data-theme="dark"] .dialog > div,
html[data-theme-profile="alyo"][data-theme="dark"] .hg-modal-panel {
  background:
    radial-gradient(480px 220px at 0% 0%, rgba(139, 53, 255, 0.18), transparent 55%),
    radial-gradient(420px 200px at 100% 100%, rgba(0, 217, 255, 0.12), transparent 60%),
    rgba(12, 16, 36, 0.96) !important;
  border: 1px solid rgba(160, 140, 255, 0.24) !important;
  border-radius: 20px !important;
  color: #f5f7ff !important;
}
html[data-theme-profile="alyo"][data-theme="dark"] .dialog h2 {
  color: #fff !important;
  font-weight: 800 !important;
}
html[data-theme-profile="alyo"][data-theme="dark"] .dialog button[data-variant="filled"],
html[data-theme-profile="alyo"][data-theme="dark"] .dialog .md-filled {
  background: linear-gradient(135deg, #2563ff, #8b35ff) !important;
  color: #fff !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
}


/* ========== Stage 10c — icons restore + unified shell (20260929g) ========== */

/* Icons: never collapse to 0 — overrides stale 1em rules */
.hg-symbol-wrap {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  color: inherit !important;
}
.hg-symbol-wrap .hg-symbol-svg {
  min-width: 22px !important;
  min-height: 22px !important;
  flex-shrink: 0 !important;
}
.hg-symbol-wrap svg.hg-symbol-svg {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  display: block !important;
  flex-shrink: 0 !important;
  fill: currentColor !important;
}
.channel_bar button .hg-symbol-wrap,
.channel_bar button .hg-symbol-svg,
.surfaces-user-panel button .hg-symbol-wrap,
.hg-composer button .hg-symbol-wrap,
.hg-composer button .hg-symbol-svg {
  width: 22px !important;
  height: 22px !important;
}
.hg-composer button[data-variant="filled"] .hg-symbol-wrap,
.hg-composer button[data-variant="filled"] .hg-symbol-svg {
  width: 24px !important;
  height: 24px !important;
}
.hg-symbol-wrap .hg-symbol-ph {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
}

/* Server settings gear + header SVGs */
.channel_bar.server button svg,
.channel_bar button svg:not(.hg-symbol-svg) {
  width: 22px !important;
  height: 22px !important;
  display: block !important;
  fill: currentColor !important;
  flex-shrink: 0 !important;
  opacity: 1 !important;
}
.channel_bar.server button[aria-label*="Settings"],
.channel_bar.server button[aria-label*="Настройки"] {
  flex-shrink: 0 !important;
  width: 36px !important;
  min-width: 36px !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Unified shell — less gap between columns */
html[data-theme-profile="alyo"][data-theme="dark"] .main_bar {
  margin: 0 !important;
  gap: 0 !important;
}
html[data-theme-profile="alyo"][data-theme="dark"] .main_bar .channel_bar {
  margin: 0 !important;
}

/* Composer — cleaner input row */
html[data-theme-profile="alyo"][data-theme="dark"] .hg-composer {
  margin: 0 12px 12px !important;
  padding: 0 !important;
  gap: 8px !important;
  align-items: stretch !important;
}
html[data-theme-profile="alyo"][data-theme="dark"] .hg-composer-box {
  min-height: 44px !important;
  padding: 8px 12px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(160, 140, 255, 0.22) !important;
  background: rgba(10, 16, 34, 0.96) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03) !important;
}
html[data-theme-profile="alyo"] .hg-composer button[data-variant="filled"] {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  flex-shrink: 0 !important;
}

/* User panel controls */
html[data-theme-profile="alyo"] .channel_bar button[aria-label*="Mute"],
html[data-theme-profile="alyo"] .channel_bar button[aria-label*="Settings"],
html[data-theme-profile="alyo"] .channel_bar button[aria-label*="Deafen"],
html[data-theme-profile="alyo"] .channel_bar button[aria-label*="Настройки"],
html[data-theme-profile="alyo"] .channel_bar button[aria-label*="микрофон"],
html[data-theme-profile="alyo"] .channel_bar button[aria-label*="звук"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  opacity: 1 !important;
  visibility: visible !important;
}


/* ========== Stage 11 — graffiti street art, kill the gray (20260929j) ========== */

@font-face {
  font-family: "HG Impact";
  src: local("Impact"), local("Haettenschweiler"), local("Arial Black");
}

/* Let graffiti breathe through panels */
html[data-theme-profile="alyo"][data-theme="dark"] .main_bar {
  backdrop-filter: blur(14px) saturate(1.2) !important;
}
html[data-theme-profile="alyo"][data-theme="dark"] .channel_bar {
  background: rgba(8, 11, 24, 0.62) !important;
  backdrop-filter: blur(14px) saturate(1.2) !important;
  border-color: rgba(160, 140, 255, 0.28) !important;
}

html[data-theme-profile="alyo"][data-theme="dark"] .app_body,
html[data-theme-profile="alyo"][data-theme="dark"] main {
  background-repeat: no-repeat !important;
  background-position: center 42%, center 35%, 92% 8%, center, center, center !important;
  background-size: min(680px, 88%), min(640px, 75%), 120px, auto, auto, auto !important;
}

/* Graffiti frame — louder, always visible */
#hg-theme-frame .hg-slogan { font-family: "HG Impact", Impact, sans-serif !important; }
#hg-theme-frame .hg-slogan-mid2 { font-size: clamp(13px, 1.8vw, 22px) !important; }
#hg-theme-frame .hg-splat-dvizh { transform: translate(-50%, -50%) rotate(-4deg);
  background: url(/theme/graffiti-dvizh.svg) center / contain no-repeat;
}
#hg-theme-frame .hg-splat-spray-bl {
  background: url(/theme/graffiti-spray.svg) center / contain no-repeat;
}
#hg-theme-frame .hg-splat-spray-tr {
  background: url(/theme/graffiti-spray.svg) center / contain no-repeat;
  transform: rotate(180deg);
}
#hg-theme-frame .hg-splat-stars {
  background: url(/theme/graffiti-stars.svg) center / contain no-repeat;
}

/* Keep graffiti in chat — don't fade to nothing */
body.hg-in-channel #hg-theme-frame .hg-slogan,
body.hg-in-channel #hg-theme-frame .hg-slogan-mid2 { opacity: 0.45 !important; }
body.hg-in-channel #hg-theme-frame .hg-splat-dvizh { opacity: 0.22 !important; }
body.hg-in-channel #hg-theme-frame .hg-logo-mark { opacity: 0.5 !important; }

/* Friends page — neon tabs, no gray pills */
html[data-theme-profile="alyo"] body.hg-on-friends main button {
  background: transparent !important;
  color: #9ca6c5 !important;
  border: 0 !important;
  font-weight: 700 !important;
}
html[data-theme-profile="alyo"] body.hg-on-friends main button[aria-selected="true"],
html[data-theme-profile="alyo"] body.hg-on-friends main button[data-selected="true"] {
  background: linear-gradient(135deg, rgba(37,99,255,.35), rgba(233,39,255,.28)) !important;
  color: #fff !important;
  border-radius: 12px !important;
  box-shadow: 0 0 20px rgba(37,99,255,.3), inset 0 1px 0 rgba(255,255,255,.1) !important;
}
html[data-theme-profile="alyo"] body.hg-on-friends .FriendsList button {
  background: linear-gradient(135deg, #2563ff, #8b35ff) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 16px rgba(37,99,255,.35) !important;
  padding: 8px 16px !important;
}

/* Member sidebar — colored sections */

/* Voice / join banner — street neon card */

/* Channel rows — glow on active */
html[data-theme-profile="alyo"] .channel_bar a[aria-current="page"],
html[data-theme-profile="alyo"] .channel_bar a.active {
  background: linear-gradient(90deg, rgba(37,99,255,.28), rgba(139,53,255,.12)) !important;
  box-shadow: inset 3px 0 0 #ffd429, 0 0 16px rgba(37,99,255,.2) !important;
  color: #fff !important;
}

/* Search bars — dark glass, cyan focus */
html[data-theme-profile="alyo"] input[type="search"],
html[data-theme-profile="alyo"] input[placeholder*="Найти"],
html[data-theme-profile="alyo"] input[placeholder*="Search"] {
  background: rgba(10, 16, 34, 0.85) !important;
  border: 1px solid rgba(160, 140, 255, 0.3) !important;
  border-radius: 14px !important;
  color: #f4f6ff !important;
}
html[data-theme-profile="alyo"] input:focus {
  border-color: #00d9ff !important;
  box-shadow: 0 0 0 2px rgba(0,217,255,.25), 0 0 20px rgba(0,217,255,.15) !important;
}

/* Kill flat gray buttons globally */
html[data-theme-profile="alyo"] button[data-variant="tonal"] {
  background: rgba(37, 99, 255, 0.18) !important;
  color: #c9d8ff !important;
  border: 1px solid rgba(37, 99, 255, 0.35) !important;
}
html[data-theme-profile="alyo"] button[data-variant="filled"] {
  background: linear-gradient(135deg, #2563ff, #8b35ff) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 4px 18px rgba(37,99,255,.35) !important;
}

/* Composer send — neon pill */
html[data-theme-profile="alyo"] .hg-composer button[data-variant="filled"] {
  background: linear-gradient(135deg, #2563ff, #e927ff) !important;
  box-shadow: 0 0 20px rgba(233,39,255,.4) !important;
}
html[data-theme-profile="alyo"] .hg-composer-box {
  border: 1px solid rgba(0, 217, 255, 0.25) !important;
  background: rgba(8, 12, 28, 0.92) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05) !important;
}

/* Section titles in lists */

/* User panel — neon top line */

@media (max-width: 840px) {
  #hg-theme-frame .hg-slogan { font-size: clamp(10px, 3vw, 16px) !important; opacity: 0.55 !important; }
  html[data-theme-profile="alyo"][data-theme="dark"] .app_body {
    background-size: min(95vw, 680px), min(90vw, 640px), 72px, auto, auto, auto !important;
  }
}


/* ========== Stage 12 — graffiti on the edges, rounded panels (20260929l) ========== */

/* Chat stays clean: no centered sticker */
html[data-theme-profile="alyo"][data-theme="dark"] main {
  background-image: none !important;
  background-color: rgba(10, 14, 28, 0.94) !important;
}

/* Pieces live in the four corners, not the middle */
#hg-theme-frame .hg-splat-bl { top: auto !important; right: auto !important;
}
#hg-theme-frame .hg-splat-tr { left: auto !important; bottom: auto !important;
}
#hg-theme-frame .hg-splat-br {
  right: 1% !important; bottom: 1% !important; left: auto !important; top: auto !important;
  width: 110px !important; height: 110px !important;
  opacity: 0.7 !important;
}
#hg-theme-frame .hg-splat-tl {
  left: 1.2% !important; top: 1.2% !important; right: auto !important; bottom: auto !important;
  width: 72px !important; height: 56px !important;
  opacity: 0.85 !important;
}
#hg-theme-frame .hg-splat-spray-bl {
  left: 0 !important; bottom: 18% !important; top: auto !important; right: auto !important;
}
#hg-theme-frame .hg-splat-spray-tr {
  right: 0 !important; top: 22% !important; left: auto !important; bottom: auto !important;
}
#hg-theme-frame .hg-splat-stars {
  left: 18% !important; top: 6px !important; right: auto !important;
  width: 64px !important; height: 64px !important;
  opacity: 0.8 !important;
}
#hg-theme-frame .hg-logo-tl { left: 8px !important; top: 8px !important; }
#hg-theme-frame .hg-logo-tr { right: 10px !important; top: 10px !important; }
#hg-theme-frame .hg-slogan-bl {
  left: 12px !important; bottom: 10px !important; top: auto !important; right: auto !important;
  transform: rotate(-8deg) !important;
}
#hg-theme-frame .hg-slogan-br {
  right: 14px !important; bottom: 18px !important; left: auto !important; top: auto !important;
  transform: rotate(7deg) !important;
}
#hg-theme-frame .hg-slogan-tr {
  right: 16px !important; top: 8px !important; left: auto !important; bottom: auto !important;
  transform: rotate(6deg) !important;
}
#hg-theme-frame .hg-slogan-mid {
  left: 8px !important; top: 46% !important; right: auto !important; bottom: auto !important;
  transform: rotate(-90deg) !important;
  transform-origin: left center !important;
  opacity: 0.55 !important;
}
#hg-theme-frame .hg-slogan-mid2 {
  right: 6px !important; top: 42% !important; left: auto !important; bottom: auto !important;
  transform: rotate(90deg) !important;
  transform-origin: right center !important;
  opacity: 0.55 !important;
}

/* Rounded cards on a graffiti mat — not one flat square */
html[data-theme-profile="alyo"] .app_root > div {
  gap: 10px !important;
}
html[data-theme-profile="alyo"][data-theme="dark"] .main_bar {
  background: rgba(8, 11, 24, 0.94) !important;
}
html[data-theme-profile="alyo"][data-theme="dark"] .main_bar .channel_bar {
  border-radius: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html[data-theme-profile="alyo"][data-theme="dark"] .app_body {
  margin: 0 !important;
}

@media (max-width: 840px) {
  html[data-theme-profile="alyo"][data-theme="dark"] .main_bar,
html[data-theme-profile="alyo"][data-theme="dark"] .app_body { border-radius: 0 !important; }
  #hg-theme-frame .hg-slogan-mid,
#hg-theme-frame .hg-slogan-mid2 { display: none !important; }
}


/* ========== Stage 13 — join-voice: no gray bar, centered neon pill ========== */
html[data-theme-profile="alyo"] .hg-vc-slot {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
html[data-theme-profile="alyo"] #floating .hg-vc-card:has(.hg-join-voice):not(:has(.hg-vc-view)) {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  width: 100% !important;
  height: auto !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  overflow: visible !important;
  border-radius: 0 !important;
}
html[data-theme-profile="alyo"] .hg-vc-card:has(.hg-join-voice):not(:has(.hg-vc-view)) {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  width: 100% !important;
  height: auto !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  overflow: visible !important;
  border-radius: 0 !important;
}
html[data-theme-profile="alyo"] .hg-join-voice {
  width: fit-content !important;
  max-width: min(460px, 92%) !important;
  min-height: 44px !important;
  height: auto !important;
  margin: 8px auto !important;
  padding: 10px 22px !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #2563ff, #8b35ff 55%, #e927ff) !important;
  border: 1px solid rgba(0, 217, 255, 0.55) !important;
  box-shadow: 0 8px 28px rgba(37, 99, 255, 0.35), 0 0 18px rgba(233, 39, 255, 0.25) !important;
}
html[data-theme-profile="alyo"] .hg-join-voice .title {
  text-align: center !important;
  color: #fff !important;
}


/* ========== Stage 14 — call avatar, screenshare fit, no control slab ========== */
/* Opaque stage so the chat watermark does not stand in for the avatar */
html[data-theme-profile="alyo"] .hg-vc-card:has(.hg-vc-view) {
  background-color: #0b1020 !important;
  background-image:
    radial-gradient(380px 220px at 0% 40%, rgba(233, 39, 255, 0.22), transparent 70%),
    radial-gradient(380px 220px at 100% 40%, rgba(0, 217, 255, 0.18), transparent 70%),
    #0b1020 !important;
}
html[data-theme-profile="alyo"] .hg-vc-view {
  background: #0b1020 !important;
  background-image: none !important;
}
html[data-theme-profile="alyo"] .vc_tile {
  background: #12182c !important;
  background-image: none !important;
}

/* Avatar SVG was width:auto !important and collapsed; keep it a real circle */
html[data-theme-profile="alyo"] .vc_tile svg:not(.hg-symbol-svg) {
  width: 96px !important;
  height: 96px !important;
  min-width: 96px !important;
  min-height: 96px !important;
  max-width: 96px !important;
  flex-shrink: 0 !important;
  display: block !important;
  overflow: visible !important;
}
html[data-theme-profile="alyo"] .vc_tile svg:not(.hg-symbol-svg) foreignObject,
html[data-theme-profile="alyo"] .vc_tile svg:not(.hg-symbol-svg) img {
  width: 100% !important;
  height: 100% !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* People already in the voice channel (sidebar) keep their avatar */
html[data-theme-profile="alyo"] .channel_bar svg[viewBox="0 0 32 32"]:not(.hg-symbol-svg) {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  flex-shrink: 0 !important;
  display: block !important;
}

/* Drop the full-width dark slab; only the button pill stays */
html[data-theme-profile="alyo"] .hg-vc-controls,
html[data-theme-profile="alyo"] #floating .hg-vc-controls {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  width: 100% !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 4px 8px 6px !important;
  margin-top: 0 !important;
  flex: 0 0 auto !important;
  position: relative !important;
  z-index: 5 !important;
}
html[data-theme-profile="alyo"] .hg-vc-actions {
  flex: 0 0 auto !important;
  width: auto !important;
  margin: 0 auto !important;
}

/* Video sits above the buttons, not under them */
html[data-theme-profile="alyo"] .hg-vc-view {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
html[data-theme-profile="alyo"] .hg-vc-view > div:not(.hg-vc-chrome):not(.hg-vc-controls) {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
html[data-theme-profile="alyo"] .vc_tile.hg-ss {
  max-height: 100% !important;
  height: auto !important;
  align-self: center !important;
}
html[data-theme-profile="alyo"] .vc_tile.hg-ss video {
  max-height: 100% !important;
  object-fit: contain !important;
}


/* ========== Stage 15 — phone: one screen + bottom tabs ========== */
@media (max-width: 840px) {
  html,
body {
    height: 100%;
    overflow: hidden;
  }
  .app_root {
    height: 100dvh !important;
    max-height: 100dvh !important;
    width: 100% !important;
    max-width: 100vw !important;
    padding: 0 0 calc(var(--hg-bottom-nav, 56px) + env(safe-area-inset-bottom, 0px)) 0 !important;
    gap: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  .app_root > div:has(.main_bar) {
    display: flex !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    height: 100% !important;
    overflow: hidden !important;
    position: relative !important;
  }
  .main_bar {
    position: relative !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100vw !important;
    height: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    flex: 1 1 auto !important;
  }
  .channel_bar,
.main_bar .channel_bar {
    border-radius: 0 !important;
    min-width: 0 !important;
    height: 100% !important;
  }

  /* Until a chat is opened, the list fills the screen (no third column). */
  body:not(.hg-pane-content) .app_body,
body:not(.hg-tab-servers) .main_bar > :first-child {
    display: none !important;
  }
  body:not(.hg-tab-servers) .channel_bar {
    width: 100% !important;
    max-width: none !important;
    flex: 1 1 auto !important;
  }

  body.hg-pane-content .main_bar {
    display: none !important;
  }
  body.hg-pane-content .app_body {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100vw !important;
    height: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    flex: 1 1 auto !important;
  }
  body.hg-tab-servers .main_bar > :first-child {
    display: flex !important;
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    flex-shrink: 0 !important;
  }
  body.hg-tab-servers .channel_bar {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  body.hg-phone .settings_overlay {
    position: fixed !important;
    inset: 0 0 calc(var(--hg-bottom-nav, 56px) + env(safe-area-inset-bottom, 0px)) 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    height: auto !important;
    z-index: 100000 !important;
    border-radius: 0 !important;
  }

  #hg-m-back {
    position: fixed;
    z-index: 100020;
    top: calc(8px + env(safe-area-inset-top, 0px));
    left: 8px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 12px;
    background: rgba(37, 99, 255, 0.85);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  }
  body.hg-pane-content .app_body header {
    padding-left: 52px !important;
  }
}

#hg-bottom-nav {
  height: calc(var(--hg-bottom-nav, 56px) + env(safe-area-inset-bottom, 0px)) !important;
}
#hg-bottom-nav button {
  font-size: 12px !important;
  font-weight: 700 !important;
  gap: 4px !important;
  min-height: 56px !important;
}
#hg-bottom-nav button.active {
  color: #00d9ff !important;
  text-shadow: 0 0 12px rgba(0, 217, 255, 0.45);
}
#hg-bottom-nav button.active .hg-bn-icon {
  color: #00d9ff;
}

.hg-rel {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  margin-right: 4px;
}
.hg-rel-kent {
  color: #04140c;
  background: linear-gradient(135deg, #22e58a, #00d9ff);
}
.hg-rel-pass {
  color: #f4f6ff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(160, 140, 255, 0.45);
}


/* ========== Stage 16 — note text, missing icons, avatar focus ========== */
textarea[placeholder*="замет"],
textarea[placeholder*="Нажмите"],
textarea[placeholder*="note"] {
  padding: 8px 10px !important;
  min-height: 58px !important;
  line-height: 1.45 !important;
  box-sizing: border-box !important;
  overflow: auto !important;
  color: #f4f6ff !important;
}
textarea::placeholder {
  color: #9aa6c4 !important;
  opacity: 1 !important;
}
.hg-symbol-wrap .hg-symbol-svg {
  width: 22px !important;
  height: 22px !important;
  display: block !important;
  fill: currentColor !important;
}

#hg-crop {
  position: fixed;
  inset: 0;
  z-index: 200000;
  background: rgba(4, 6, 16, 0.72);
  display: grid;
  place-items: center;
}
.hg-crop-box {
  width: min(360px, calc(100vw - 32px));
  background: #12182c;
  border: 1px solid rgba(160, 140, 255, 0.35);
  border-radius: 20px;
  padding: 18px;
  color: #f4f6ff;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.hg-crop-title { font-weight: 800; font-size: 18px; }
.hg-crop-hint { color: #9aa6c4; font-size: 13px; margin: 6px 0 14px; }
#hg-crop-stage {
  width: 220px;
  height: 220px;
  margin: 0 auto;
  border-radius: 50%;
  background-repeat: no-repeat;
  cursor: grab;
  box-shadow: 0 0 0 3px rgba(0, 217, 255, 0.5);
  touch-action: none;
}
.hg-crop-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.hg-crop-actions button {
  border: 0;
  border-radius: 12px;
  padding: 8px 14px;
  font-weight: 700;
  cursor: pointer;
}
.hg-crop-actions [data-act="cancel"] { background: transparent; color: #c9d0e6; }
.hg-crop-actions [data-act="ok"] {
  background: linear-gradient(135deg, #2563ff, #8b35ff);
  color: #fff;
}


/* ========== Stage 17 — graffiti back + profile form polish ========== */
@media (prefers-reduced-motion: reduce) {
  #hg-theme-frame { display: block !important; }
}

html[data-theme-profile="alyo"][data-theme="dark"] body,
html[data-theme-profile="alyo"][data-theme="dark"] #root {
  background-color: #050812 !important;
  background-image:
    url(/theme/graffiti-mat.svg),
    url(/theme/frame-splat.svg),
    radial-gradient(900px 520px at 8% 92%, rgba(233, 39, 255, 0.28), transparent 58%),
    radial-gradient(760px 460px at 94% 8%, rgba(0, 217, 255, 0.22), transparent 60%),
    radial-gradient(640px 380px at 50% 0%, rgba(255, 212, 41, 0.12), transparent 55%) !important;
  background-size: cover, cover, auto, auto, auto !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

#hg-theme-frame {
  z-index: 0 !important;
  opacity: 1 !important;
  display: block !important;
}
#hg-theme-frame .hg-splat { opacity: 0.95 !important; filter: saturate(1.35) contrast(1.05) !important; }
#hg-theme-frame .hg-splat-dvizh {
  display: block !important;
  left: auto !important;
  right: 18% !important;
  top: 18% !important;
  bottom: auto !important;
  width: min(34vw, 420px) !important;
  height: min(28vw, 320px) !important;
  opacity: 0.42 !important;
  background-image: url(/theme/graffiti-dvizh.svg) !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  pointer-events: none !important;
}
#hg-theme-frame .hg-splat-bl {
  left: -2% !important; bottom: -3% !important;
  width: min(38vw, 460px) !important;
  height: min(30vw, 340px) !important;
  opacity: 0.95 !important;
}
#hg-theme-frame .hg-splat-tr {
  right: -2% !important; top: -2% !important;
  width: min(32vw, 380px) !important;
  height: min(26vw, 300px) !important;
  opacity: 0.92 !important;
}
#hg-theme-frame .hg-splat-spray-bl,
#hg-theme-frame .hg-splat-spray-tr {
  opacity: 0.7 !important;
  width: min(22vw, 240px) !important;
  height: min(22vw, 240px) !important;
}
#hg-theme-frame .hg-slogan {
  opacity: 0.82 !important;
  font-size: clamp(16px, 2.4vw, 34px) !important;
  text-shadow: 3px 4px 0 #0a0c18, 0 0 22px rgba(255, 212, 41, 0.45) !important;
}
#hg-theme-frame .hg-logo-mark {
  opacity: 0.95 !important;
  width: min(130px, 14vw) !important;
  height: min(130px, 14vw) !important;
  filter: drop-shadow(0 0 22px rgba(255,212,41,.55)) !important;
}

/* Soft glass so graffiti peeks in the gaps and under drips */
html[data-theme-profile="alyo"][data-theme="dark"] .app_root {
  gap: 12px !important;
  padding: 14px !important;
  background: transparent !important;
}
html[data-theme-profile="alyo"][data-theme="dark"] .main_bar,
html[data-theme-profile="alyo"][data-theme="dark"] .app_body {
  position: relative !important;
  background-color: rgba(10, 14, 28, 0.88) !important;
  background-image: none !important;
  border: 1px solid rgba(160, 140, 255, 0.32) !important;
  border-radius: 22px !important;
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 212, 41, 0.06) !important;
}
html[data-theme-profile="alyo"][data-theme="dark"] .main_bar {
  overflow: hidden !important;
}
html[data-theme-profile="alyo"][data-theme="dark"] .app_body {
  overflow: hidden !important;
}
html[data-theme-profile="alyo"][data-theme="dark"] .app_body > *,
html[data-theme-profile="alyo"][data-theme="dark"] .main_bar > * {
  position: relative;
  z-index: 1;
}

/* Chat watermark like the mockup */
html[data-theme-profile="alyo"][data-theme="dark"] .app_body::before {
  content: "БОЛЬШЕ ОБЩЕНИЯ\A БОЛЬШЕ ДВИЖА!";
  white-space: pre;
  position: absolute;
  right: 4%;
  top: 18%;
  z-index: 0;
  font-family: Impact, "Arial Black", system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(22px, 3.2vw, 42px);
  line-height: 1.05;
  color: #fff;
  -webkit-text-stroke: 4px #1a0a2e;
  paint-order: stroke fill;
  text-shadow: 0 0 24px rgba(233, 39, 255, 0.55), 3px 4px 0 #111;
  transform: rotate(-8deg);
  opacity: 0.34;
  pointer-events: none;
}

/* Settings / profile block — street card, not flat Discord gray */
html[data-theme-profile="alyo"][data-theme="dark"] .settings_overlay {
  background:
    url(/theme/graffiti-mat.svg),
    radial-gradient(700px 420px at 8% 92%, rgba(233, 39, 255, 0.18), transparent 60%),
    radial-gradient(560px 360px at 92% 8%, rgba(0, 217, 255, 0.14), transparent 62%),
    #070b16 !important;
  background-size: cover, auto, auto, auto !important;
  background-repeat: no-repeat !important;
}
html[data-theme-profile="alyo"][data-theme="dark"] .settings_overlay .settings_sidebar {
  background: rgba(10, 14, 28, 0.92) !important;
  border-right: 1px solid rgba(160, 140, 255, 0.22) !important;
  border-radius: 0 !important;
  backdrop-filter: blur(10px);
}
html[data-theme-profile="alyo"][data-theme="dark"] .settings_overlay .settings_cont {
  background: transparent !important;
  padding: 24px 28px 40px !important;
  max-width: 720px !important;
}
html[data-theme-profile="alyo"][data-theme="dark"] .settings_overlay .settings_cont form {
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  width: min(560px, 100%) !important;
  max-width: 560px !important;
  margin: 0 !important;
  /* форма лежит прямо в панели настроек — без второй карточки (ТЗ2, баг 2) */
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}
html[data-theme-profile="alyo"][data-theme="dark"] .settings_overlay .settings_cont form > * {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
html[data-theme-profile="alyo"][data-theme="dark"] .settings_overlay .settings_cont form > div {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
}
html[data-theme-profile="alyo"][data-theme="dark"] .settings_overlay .settings_cont form label,
html[data-theme-profile="alyo"][data-theme="dark"] .settings_overlay .settings_cont form .label {
  color: #c9d0e6 !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.02em !important;
}
html[data-theme-profile="alyo"][data-theme="dark"] .settings_overlay .settings_cont form input:not([type="file"]) {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 44px !important;
  padding: 10px 12px !important;
  box-sizing: border-box !important;
  background: rgba(8, 12, 28, 0.95) !important;
  border: 1px solid rgba(160, 140, 255, 0.28) !important;
  border-radius: 12px !important;
  color: #f4f6ff !important;
}
html[data-theme-profile="alyo"][data-theme="dark"] .settings_overlay .settings_cont form textarea {
  width: 100% !important;
  max-width: 100% !important;
  padding: 10px 12px !important;
  box-sizing: border-box !important;
  background: rgba(8, 12, 28, 0.95) !important;
  border: 1px solid rgba(160, 140, 255, 0.28) !important;
  border-radius: 12px !important;
  color: #f4f6ff !important;
}
html[data-theme-profile="alyo"][data-theme="dark"] .settings_overlay .settings_cont form textarea {
  min-height: 120px !important;
}
html[data-theme-profile="alyo"][data-theme="dark"] .settings_overlay .settings_cont form div[style*="aspect-ratio"] {
  background: rgba(8, 12, 28, 0.9) !important;
  border: 1px dashed rgba(0, 217, 255, 0.35) !important;
}
html[data-theme-profile="alyo"][data-theme="dark"] .settings_sidebar a[aria-selected="true"] {
  background: linear-gradient(90deg, rgba(37,99,255,.35), rgba(233,39,255,.18)) !important;
  box-shadow: inset 3px 0 0 #ffd429, 0 0 18px rgba(37,99,255,.25) !important;
  color: #fff !important;
}

@media (max-width: 840px) {
  html[data-theme-profile="alyo"][data-theme="dark"] .app_root {
    padding: 0 !important;
    gap: 0 !important;
  }
  html[data-theme-profile="alyo"][data-theme="dark"] .app_body::before {
    display: none !important;
  }
  #hg-theme-frame .hg-splat-dvizh { opacity: 0.18 !important; }
}

#hg-theme-frame .hg-splat-drip-l,
#hg-theme-frame .hg-splat-drip-r {
  background-image: url(/theme/graffiti-drip.svg) !important;
  background-size: 100% 100% !important;
  height: 36px !important;
  width: min(42vw, 480px) !important;
  opacity: 0.9 !important;
  filter: none !important;
}
#hg-theme-frame .hg-splat-drip-l { left: 8% !important; top: 11% !important; right: auto !important; bottom: auto !important; }
#hg-theme-frame .hg-splat-drip-r { right: 10% !important; top: 14% !important; left: auto !important; bottom: auto !important; transform: scaleX(-1); }


/* ========== Stage 18 — square call tiles + nameplate status ========== */
html[data-theme-profile="alyo"] .vc_tile:not(.hg-ss) {
  aspect-ratio: 1 / 1 !important;
  /* плитка не больше области звонка — иначе уходила под шапку и кнопки (ТЗ2, баг 1) */
  min-width: 72px !important;
  min-height: 72px !important;
  width: min(var(--vc-tile-width, 280px), 100%) !important;
  max-width: min(420px, calc(var(--vc-h, 420px) * 1)) !important;
  max-height: var(--vc-h, 420px) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: #12182c !important;
}
html[data-theme-profile="alyo"] .vc_tile:not(.hg-ss) svg:not(.hg-symbol-svg) {
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  border-radius: 0 !important;
}
html[data-theme-profile="alyo"] .vc_tile:not(.hg-ss) svg:not(.hg-symbol-svg) foreignObject,
html[data-theme-profile="alyo"] .vc_tile:not(.hg-ss) svg:not(.hg-symbol-svg) div,
html[data-theme-profile="alyo"] .vc_tile:not(.hg-ss) svg:not(.hg-symbol-svg) img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  object-fit: cover !important;
}
html[data-theme-profile="alyo"] .hg-vc-nameplate {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  max-width: calc(100% - 4px) !important;
  padding: 5px 10px 5px 6px !important;
  border-radius: 10px !important;
  background: rgba(8, 11, 24, 0.82) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.35) !important;
  backdrop-filter: blur(8px);
  pointer-events: none !important;
  box-sizing: border-box !important;
}
html[data-theme-profile="alyo"] .hg-vc-nameplate > * {
  flex-shrink: 0;
}
html[data-theme-profile="alyo"] .hg-vc-nameplate > :last-child {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
html[data-theme-profile="alyo"] .hg-vc-st {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 7px !important;
  flex-shrink: 0 !important;
}
html[data-theme-profile="alyo"] .hg-vc-st-on {
  background: rgba(34, 229, 138, 0.22) !important;
  color: #22e58a !important;
}
html[data-theme-profile="alyo"] .hg-vc-st-off {
  background: rgba(255, 65, 108, 0.22) !important;
  color: #ff416c !important;
}
html[data-theme-profile="alyo"] .hg-vc-st .hg-symbol-wrap,
html[data-theme-profile="alyo"] .hg-vc-st .hg-symbol-svg {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  color: inherit !important;
}
html[data-theme-profile="alyo"] .vc_tile[data-speaking="true"] {
  outline: 3px solid #ffd429 !important;
  box-shadow: 0 0 0 2px rgba(255,212,41,.45), 0 0 28px rgba(255,212,41,.35) !important;
}


/* ========== Stage 19 — emoji/GIF picker overlay ========== */
/* #floating must be a full-screen portal layer, not a relative box in the flow */
html[data-theme-profile="alyo"][data-theme="dark"] #floating,
#floating {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 100050 !important;
  pointer-events: none !important;
  background: transparent !important;
  overflow: visible !important;
  transform: none !important;
}
#floating > * {
  pointer-events: auto !important;
}
/* Voice float stays non-interactive except its own controls */
#floating > div[style*="pointer-events: none"],
#floating > div[style*="pointer-events:none"] {
  pointer-events: none !important;
}
#floating .hg-vc-actions,
#floating .hg-vc-controls,
#floating .hg-vc-card,
#floating .hg-join-voice,
#floating button,
#floating a,
#floating input,
#floating textarea {
  pointer-events: auto !important;
}

/* Picker panel itself */
#floating > div > div[style*="position"],
#floating [class*="Composition"] {
  pointer-events: auto !important;
}
#floating > div {
  background: transparent !important;
}
/* Solid card for emoji/GIF (400x400 Base from CompositionMediaPicker) */
#floating > div > div[style*="top"],
#floating > div > div[style*="bottom"] {
  z-index: 100060 !important;
}
/* Окно настроек — полноэкранная подложка, не «плавающая карточка»: диалоги (z 998),
   открытые из настроек (смена почты/пароля, 2FA, коды), должны быть над ним. */
#floating > div > div:has(> .settings_overlay) {
  z-index: 100 !important;
}
#floating input[placeholder*="эмодзи"],
#floating input[placeholder*="emoji"],
#floating input[placeholder*="GIF"],
#floating input[placeholder*="gif"] {
  background: rgba(8, 12, 28, 0.95) !important;
  color: #f4f6ff !important;
  border: 1px solid rgba(160, 140, 255, 0.28) !important;
  border-radius: 12px !important;
  padding: 8px 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ==========================================================================
   Алё — доводка по ТЗ1 (2026-09-29). Итоговые правила по компонентам.
   Всё через токены из блока «Алё — токены». Порядок: оболочка → каналы →
   шапка → сообщения → композер → участники → меню/модалки → настройки →
   состояния (hover/focus) → адаптив.
   ========================================================================== */
html[data-theme-profile="alyo"][data-theme="dark"] {
  --alyo-focus: 0 0 0 2px var(--accent-cyan), 0 0 0 5px rgba(0, 217, 255, 0.18);
  --alyo-row-hover: rgba(120, 130, 255, 0.1);
}

/* --- Ссылки: циан только в тексте сообщений и формах, навигация — цвет строки --- */
html[data-theme-profile="alyo"][data-theme="dark"] :is(p, li, blockquote, td) a[href],
html[data-theme-profile="alyo"][data-theme="dark"] .hg-auth a {
  color: var(--accent-cyan);
}
html[data-theme-profile="alyo"][data-theme="dark"] :is(p, li, blockquote, td) a[href]:hover {
  text-decoration: underline;
}

/* --- Композер: одна пилюля + круглая синяя кнопка отправки (как в макете) --- */
html[data-theme-profile="alyo"][data-theme="dark"] .hg-composer {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
  margin: 0 16px 16px !important;
  gap: 10px !important;
  align-items: center !important;
}
html[data-theme-profile="alyo"] .hg-composer-box {
  min-height: 48px !important;
  padding: 4px 10px 4px 6px !important;
  border-radius: 24px !important;
  background: var(--bg-input) !important;
  border: 1px solid var(--alyo-border) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast) !important;
}
html[data-theme-profile="alyo"] .hg-composer-box:focus-within {
  border-color: rgba(0, 217, 255, 0.55) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 0 3px rgba(0, 217, 255, 0.12) !important;
}
html[data-theme-profile="alyo"] .hg-composer-box button {
  color: var(--text-secondary) !important;
}
html[data-theme-profile="alyo"] .hg-composer-box button:hover {
  color: var(--text-primary) !important;
  background: var(--alyo-row-hover) !important;
}
html[data-theme-profile="alyo"] .hg-composer > button {
  width: 48px !important;
  min-width: 48px !important;
  height: 48px !important;
  max-height: 48px !important; /* Panda-слой держит height:100%!important */
  min-height: 48px !important;
  padding: 0 !important;
  align-self: center !important;
  border-radius: 50% !important;
  background: var(--accent-blue) !important;
  color: #fff !important;
  box-shadow: 0 0 18px rgba(37, 99, 255, 0.45) !important;
  transition: transform var(--transition-fast), filter var(--transition-fast) !important;
}
html[data-theme-profile="alyo"] .hg-composer > button:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}
html[data-theme-profile="alyo"] .hg-composer > button .hg-symbol-wrap {
  color: #fff !important;
}

/* --- Единые состояния: фокус с клавиатуры --- */
html[data-theme-profile="alyo"][data-theme="dark"] :is(a, button, [role="button"], [role="menuitem"], [tabindex]):focus-visible {
  outline: none !important;
  box-shadow: var(--alyo-focus) !important;
  border-radius: var(--radius-md);
}

/* --- Адаптив (≤840px = режим телефона, как в brand-ui.js IS_PHONE) --- */
@media (max-width: 840px) {
  /* Под нижней навигацией всегда есть место — композер не прячется под ней */
  html[data-theme-profile] body.hg-has-bottom-nav .app_root {
    padding-bottom: calc(var(--hg-bottom-nav, 56px) + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* Колонка чата сжимается до экрана (иначе min-height:auto выталкивает композер вниз) */
  html[data-theme-profile] body.hg-phone .app_body > div,
  html[data-theme-profile] body.hg-phone .app_body main {
    min-height: 0 !important;
  }
  /* Список (Личка/Сервера) занимает всю ширину и на планшете */
  html[data-theme-profile] body.hg-phone:not(.hg-pane-content) .main_bar {
    width: 100% !important;
    flex: 1 1 auto !important;
  }
  html[data-theme-profile] body.hg-phone:not(.hg-tab-servers) .channel_bar,
  html[data-theme-profile] body.hg-phone.hg-tab-servers .channel_bar {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 1 1 auto !important;
  }
  /* Внутренний блок списка Panda растягивает только до 600px — на 601–840 тоже на всю ширину */
  html[data-theme-profile] body.hg-phone .channel_bar div:has(> a[href]) {
    width: 100% !important;
  }
  /* Композер на телефоне компактнее */
  html[data-theme-profile="alyo"][data-theme="dark"] .hg-composer {
    margin: 0 10px 10px !important;
    gap: 8px !important;
  }
  html[data-theme-profile="alyo"] .hg-composer > button {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    max-height: 44px !important;
    min-height: 44px !important;
  }
  /* Настройки: карточки и кнопки не вылезают за экран */
  html[data-theme-profile] .settings_overlay .settings_cont {
    overflow-x: hidden !important;
  }
  html[data-theme-profile] .settings_overlay .settings_cont * {
    max-width: 100%;
    box-sizing: border-box;
  }
  html[data-theme-profile] .settings_overlay .settings_cont :is(p, span, div) {
    overflow-wrap: anywhere;
  }
}

/* --- Граффити-подложка как в макете: арт по краям, оболочка «окном» внутри.
       Только на широких экранах — на ноутбуках поменьше рамка остаётся тонкой. --- */
@media (min-width: 1200px) and (min-height: 700px) {
  html[data-theme-profile="alyo"][data-theme="dark"] body {
    background: var(--bg-main) url(/theme/alyo-mat.webp) center / cover no-repeat fixed !important;
  }
}
/* Подложка нарисована под 3:2 — в обычных пропорциях тянем без обрезки логотипов */
@media (min-width: 1200px) and (min-height: 700px) and (min-aspect-ratio: 13/10) and (max-aspect-ratio: 19/10) {
  html[data-theme-profile="alyo"][data-theme="dark"] body {
    background-size: 100% 100% !important;
  }
}
@media (min-width: 1200px) and (min-height: 700px) {
  html[data-theme-profile="alyo"][data-theme="dark"] #root {
    background: transparent !important;
  }
  html[data-theme-profile="alyo"][data-theme="dark"] .app_root {
    /* ТЗ2: окно выше — сверху и снизу небольшой, но заметный зазор до края экрана */
    padding: clamp(16px, 2.8vh, 30px) clamp(40px, 4.6vw, 88px) clamp(14px, 2.2vh, 22px) clamp(40px, 4.2vw, 80px) !important;
  }
  /* SVG-пятна и лозунги дублируют подложку — на широких экранах их не показываем */
  #hg-theme-frame {
    display: none !important;
  }
}

/* --- Меню и всплывающие панели: рамка и тень в стиле карточек --- */
html[data-theme-profile="alyo"][data-theme="dark"] #floating > div > div:not(.hg-vc-card):not(.hg-join-voice) {
  border-radius: var(--radius-lg);
}

/* ==========================================================================
   ТЗ2 (2026-09-29) — телефон: плавность. На мобильных GPU размытие за
   панелями (backdrop-filter), фиксированный фон и полноэкранная SVG-рамка
   перерисовываются на каждом кадре скролла. Панели на телефоне и так
   непрозрачные, поэтому визуально ничего не теряется.
   ========================================================================== */
@media (max-width: 840px) {
  html[data-theme-profile] *,
  html[data-theme-profile] *::before,
  html[data-theme-profile] *::after {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  html[data-theme-profile="alyo"][data-theme="dark"] body,
  html[data-theme-profile="alyo"][data-theme="dark"] #root {
    background-attachment: scroll !important;
  }
  #hg-theme-frame {
    display: none !important;
  }
}

/* --- Настройки: панель растёт по содержимому, а не режется по высоте экрана
       (редактор профиля вылезал за нижнюю рамку) --- */
html[data-theme-profile] .settings_overlay .settings_cont {
  height: auto !important;
  min-height: 100% !important;
  flex-shrink: 0 !important;
  /* родитель — flex-строка: stretch держал панель ровно в высоту экрана */
  align-self: flex-start !important;
}
html[data-theme-profile] .settings_overlay .settings_cont > div {
  height: auto !important;
  max-height: none !important;
  flex-shrink: 0 !important;
}
/* поле баннера/аватара не шире формы, кнопка «убрать» остаётся внутри */
html[data-theme-profile] .settings_overlay .settings_cont form div[style*="aspect-ratio"] {
  max-width: 100% !important;
}

/* --- Телефон: удобство пальцами и прокрутка --- */
@media (max-width: 840px) {
  html[data-theme-profile] body {
    -webkit-tap-highlight-color: transparent;
  }
  /* лента и списки листаются сами по себе, без «протягивания» всей страницы */
  html[data-theme-profile] body.hg-phone :is(.app_body, .channel_bar) * {
    overscroll-behavior-y: contain;
  }
  /* строки каналов/ЛС и пункты меню — под палец (44px) */
  html[data-theme-profile] body.hg-phone .channel_bar a[href] {
    min-height: 44px !important;
  }
  html[data-theme-profile] body.hg-phone #floating a,
  html[data-theme-profile] body.hg-phone #floating [role="menuitem"] {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  /* иконки шапки канала — 44px зона нажатия */
  html[data-theme-profile] body.hg-phone .app_body header button,
  html[data-theme-profile] body.hg-phone .app_body header a[href] {
    min-width: 44px !important;
    min-height: 44px !important;
  }
  /* ввод 16px: iOS не зумит страницу при фокусе */
  html[data-theme-profile] body.hg-phone .hg-composer-box :is(.cm-content, .cm-line, textarea, input) {
    font-size: 16px !important;
  }
  /* сообщения: чуть плотнее по краям, текст переносится, а не вылезает */
  html[data-theme-profile] body.hg-phone .app_body .group p {
    overflow-wrap: anywhere;
  }
}

/* --- Телефон (≤600px): список участников — шторка поверх чата, а не третья колонка
       (иначе чат сжимался до ~150px и текст шёл по буквам). На планшете он
       открыт по умолчанию и остаётся колонкой. --- */
@media (max-width: 600px) {
  html[data-theme-profile] body.hg-phone .app_body main {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  html[data-theme-profile] body.hg-phone .app_body main + div {
    position: absolute !important;
    top: 49px;
    right: 0;
    bottom: 0;
    z-index: 30;
    width: min(300px, 82vw) !important;
    max-width: 82vw !important;
    background: var(--bg-sidebar, #0d1224) !important;
    border-left: 1px solid var(--alyo-border, rgba(160, 140, 255, 0.22));
    box-shadow: -18px 0 48px rgba(0, 0, 0, 0.55);
    overflow-y: auto;
  }
  html[data-theme-profile] body.hg-phone .app_body main + div a[href],
  html[data-theme-profile] body.hg-phone .app_body main + div [role="button"] {
    min-height: 44px;
  }
}

/* --- Телефон: ряд управления звонком помещается в карточку --- */
@media (max-width: 840px) {
  html[data-theme-profile="alyo"] .hg-vc-controls {
    gap: 6px !important;
    padding: 4px 6px 8px !important;
  }
  /* индикатор «Присоединён» дублирует панель «Голос подключён» — на телефоне скрыт */
  html[data-theme-profile="alyo"] .hg-vc-controls > div:not(.hg-vc-actions):has([data-icon="wifi_tethering"]) {
    display: none !important;
  }
  html[data-theme-profile="alyo"] .hg-vc-actions {
    gap: 6px !important;
    padding: 6px 8px !important;
  }
  html[data-theme-profile="alyo"] .hg-vc-actions button,
  html[data-theme-profile="alyo"] .hg-vc-actions button.hg-vc-hangup-sm {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
  }
  html[data-theme-profile="alyo"] .hg-vc-controls > div:not(.hg-vc-actions) {
    flex: 0 0 auto !important;
    gap: 2px !important;
  }
}

/* ==========================================================================
   Алё — bagi/1 (2026-09-29)
   ========================================================================== */

/* --- Граффити в ленте сообщений (как в макете): справа, над полем ввода.
   Фон самого <main>, поэтому не прокручивается с сообщениями и не ловит клики.
   Верхний слой — лёгкое затемнение, чтобы текст длинных сообщений читался. --- */
@media (min-width: 900px) {
  html[data-theme-profile="alyo"][data-theme="dark"] main:is(:has(.hg-composer), :has(.hg-rules-gate)) {
    background-image:
      linear-gradient(rgba(10, 14, 28, 0.18), rgba(10, 14, 28, 0.18)),
      url(/theme/alyo-chat-art.webp) !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: center, right 14px bottom 92px !important;
    background-size: auto, auto min(64%, 560px) !important;
  }
}

/* --- Настройки в том же виде, что и основной экран: две панели-«окна»
   (меню и содержимое) с рамкой и скруглением как у списка каналов и чата,
   на широких экранах — та же граффити-подложка вокруг. --- */
@media (min-width: 841px) {
  html[data-theme-profile="alyo"][data-theme="dark"] .settings_overlay {
    gap: 12px !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    background: var(--bg-main, #080b18) !important;
  }
  html[data-theme-profile="alyo"][data-theme="dark"] .settings_overlay > .settings_sidebar,
  html[data-theme-profile="alyo"][data-theme="dark"] .settings_overlay > div:has(> .settings_cont) {
    border-radius: 20px !important;
    border: 1px solid rgba(160, 140, 255, 0.2) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.36) !important;
    background: rgba(10, 14, 28, 0.94) !important;
    overflow: hidden auto !important;
  }
  html[data-theme-profile="alyo"][data-theme="dark"] .settings_overlay > .settings_sidebar {
    flex: 0 0 256px !important;
    max-width: 256px !important;
    padding: 0 8px !important;
  }
  html[data-theme-profile="alyo"][data-theme="dark"] .settings_overlay .settings_sidebar .content {
    padding-top: 16px !important;
  }
  /* внутренняя карточка не нужна — окном служит сама панель */
  html[data-theme-profile="alyo"][data-theme="dark"] .settings_overlay .settings_cont {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
  html[data-theme-profile="alyo"][data-theme="dark"] .settings_overlay .settings_action_rail {
    position: sticky !important;
    top: 0 !important;
  }
}
@media (min-width: 1200px) and (min-height: 700px) {
  html[data-theme-profile="alyo"][data-theme="dark"] .settings_overlay {
    background: var(--bg-main, #080b18) url(/theme/alyo-mat.webp) center / cover no-repeat !important;
    padding: clamp(16px, 2.8vh, 30px) clamp(40px, 4.6vw, 88px) clamp(14px, 2.2vh, 22px) clamp(40px, 4.2vw, 80px) !important;
  }
}
@media (min-width: 1200px) and (min-height: 700px) and (min-aspect-ratio: 13/10) and (max-aspect-ratio: 19/10) {
  html[data-theme-profile="alyo"][data-theme="dark"] .settings_overlay {
    background-size: 100% 100% !important;
  }
}

/* --- Телефон/планшет: верхняя панель раздела настроек («← меню», название, «×») --- */
html[data-theme-profile="alyo"][data-theme="dark"] .hg-settings-phonebar {
  background: rgba(14, 19, 38, 0.98) !important;
  border: 1px solid rgba(160, 140, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  padding: 2px 4px !important;
}

/* --- bagi/2: ПК — обёртка оболочки прозрачная. Panda красит её в surface-container-high
   без скругления: её углы торчали за скруглёнными панелями («чёрные уголки»), а в зазоре
   между списком каналов и чатом была видна тёмная полоса вместо граффити. --- */
@media (min-width: 841px) {
  html[data-theme-profile="alyo"][data-theme="dark"] .app_root > div:has(.main_bar) {
    background: transparent !important;
  }
}

/* ==========================================================================
   Алё — граффити «Кенты» на странице друзей (2026-09-30, v2)
   Отдельные цельные элементы, раскиданы по всей области <main>: фон не прокручивается
   со списком и не ловит клики; сверху лёгкое затемнение, чтобы строки читались.
   Порядок слоёв = порядок позиций/размеров ниже.
   ========================================================================== */
html[data-theme-profile="alyo"][data-theme="dark"] body.hg-on-friends main {
  background-image:
    linear-gradient(rgba(8, 11, 24, 0.2), rgba(8, 11, 24, 0.2)),
    url(/theme/friends-kenty.webp),
    url(/theme/friends-svoi.webp),
    url(/theme/friends-fist.webp),
    url(/theme/friends-crown.webp),
    url(/theme/friends-smile.webp),
    url(/theme/friends-bratva.webp),
    url(/theme/friends-ale.webp),
    url(/theme/friends-splat1.webp),
    url(/theme/friends-splat2.webp),
    url(/theme/friends-splat3.webp) !important;
  background-repeat: no-repeat !important;
  background-position:
    center,
    right 6% bottom 7%,
    right 5% top 31%,
    left 5% bottom 9%,
    left 12% top 44%,
    left 47% top 40%,
    left 36% bottom 3%,
    right 36% top 58%,
    left 25% top 64%,
    right 2% top 48%,
    left 2% top 30% !important;
  background-size:
    auto,
    min(42%, 460px) auto,
    min(30%, 320px) auto,
    min(18%, 190px) auto,
    min(14%, 150px) auto,
    min(9%, 96px) auto,
    min(24%, 250px) auto,
    min(17%, 180px) auto,
    min(13%, 140px) auto,
    min(12%, 130px) auto,
    min(12%, 130px) auto !important;
}
@media (max-width: 899px) {
  html[data-theme-profile="alyo"][data-theme="dark"] body.hg-on-friends main {
    background-image:
      linear-gradient(rgba(8, 11, 24, 0.2), rgba(8, 11, 24, 0.2)),
      url(/theme/friends-kenty.webp),
      url(/theme/friends-svoi.webp),
      url(/theme/friends-fist.webp),
      url(/theme/friends-crown.webp),
      url(/theme/friends-smile.webp),
      url(/theme/friends-splat1.webp) !important;
    background-position:
      center,
      center bottom 96px,
      right 6% top 56%,
      right 8% top 41%,
      left 6% top 42%,
      left 44% top 44%,
      left 12% top 64% !important;
    background-size:
      auto,
      min(80%, 380px) auto,
      min(56%, 240px) auto,
      min(30%, 130px) auto,
      min(22%, 96px) auto,
      min(16%, 70px) auto,
      min(22%, 100px) auto !important;
  }
}

/* ========== Phone shell, Telegram-like (2026-10-01) ==========
   Header: back · channel + server · search · ⋮. Members / pins / search open as
   full-screen sheets (.hg-sheet) with their own back arrow. Bottom nav:
   Чаты · Сервера · Уведомления · Профиль. */
@media (max-width: 840px) {
  #hg-m-back {
    background: transparent !important;
    box-shadow: none !important;
    color: var(--text-header, #f5f7ff) !important;
    font-size: 34px !important;
    font-weight: 300;
  }
  body.hg-sheet-open #hg-m-back {
    display: none !important;
  }
  body.hg-sheet-open.hg-pane-content .app_body header {
    padding-left: 8px !important;
  }
  html[data-theme-profile] body.hg-phone .app_body main + div.hg-sheet {
    position: static !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: none !important;
    border-left: 0 !important;
    box-shadow: none !important;
  }
  #hg-bottom-nav button {
    font-size: 11px !important;
    white-space: nowrap;
  }
  #hg-bottom-nav .hg-bn-icon {
    position: relative;
  }
  #hg-bottom-nav .hg-bn-badge {
    position: absolute;
    top: -4px;
    right: -10px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #f23f43;
    color: #fff;
    font: 800 10px/16px system-ui, sans-serif;
    text-align: center;
  }
  #hg-bottom-nav .hg-bn-badge[hidden] {
    display: none;
  }
}
@media (max-width: 840px) {
  /* the floating ‹ already goes back to the list; the stock drawer toggle doubled it */
  body.hg-phone .app_body header .hg-header-icon {
    display: none !important;
  }
}
@media (max-width: 840px) {
  /* The voice card is portaled to #floating and follows the (hidden) channel pane —
     on the list screen it poked out over the server rail. The call controls stay
     in the voice panel at the bottom of the list. */
  html[data-theme-profile] body.hg-phone.hg-pane-list #floating .hg-vc-card,
  html[data-theme-profile] body.hg-phone.hg-pane-list #floating .hg-vc-card:has(.hg-join-voice) {
    display: none !important;
  }
}
@media (max-width: 840px) {
  /* «Профиль»: the sections list is a full screen of its own (Settings.tsx shows
     either the list or one section), with Telegram-sized rows */
  body.hg-phone .settings_overlay .settings_sidebar {
    position: static !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0 12px !important;
  }
  body.hg-phone .settings_overlay .settings_sidebar a.button {
    min-height: 48px !important;
  }
}

/* Composer with a long text (bug report 2026-10-05): the box grew without limit
   over the messages, text spilled past the border and the buttons, centred,
   jumped with every new line. Cap it, scroll inside, keep buttons at the bottom. */
html[data-theme-profile] .hg-composer {
  max-height: none !important;
  align-items: flex-end !important;
}
html[data-theme-profile] .hg-composer-box {
  align-items: flex-end !important;
  max-height: min(40vh, 320px) !important;
  border-radius: 22px !important;
  overflow: hidden !important;
}
html[data-theme-profile] .hg-composer-box .cm-editor {
  align-self: stretch;
  max-height: calc(min(40vh, 320px) - 10px) !important;
}
html[data-theme-profile] .hg-composer-box .cm-scroller {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
}
html[data-theme-profile] .hg-composer-box .cm-content {
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
  word-break: break-word;
}
html[data-theme-profile] .hg-composer > :not(.hg-composer-box) {
  align-self: flex-end !important;
  margin-bottom: 2px;
}
/* «Адрес сервера»: the outer box draws the frame; the theme's input frame doubled it */
html[data-theme-profile] .hg-vanity-input,
html[data-theme-profile] .hg-vanity-input:focus {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  outline: none !important;
}

/* Алё: recording dot (voice notes / video circles) */
@keyframes hgRecPulse { 0%, 100% { opacity: .35 } 50% { opacity: 1 } }
/* Алё: read ticks inside your own (blue) bubble stay white */
.hg-bubble[data-side="mine"] [data-read] { color: #fff !important; }

/* Selected server: a circle around the icon, no side bar. */
html[data-theme-profile="alyo"] .main_bar [data-selected="true"]:before,
html[data-theme-profile="alyo"] .main_bar a[aria-current="page"]::before {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  box-shadow: none !important;
}
/* Selected server ring. History: a box-shadow inside the avatar's <foreignObject> got clipped
   (13.10), then a box-shadow on the <a> came out off-centre with a gaudy glow (rooting 14.10:
   «кривое и не красивое»). An outline on the 48px avatar <svg> itself is exactly round, centred
   and never clipped. */
/* rooting 14.10 (вечер): the yellow ring is still «кривое». Concept board (redesign TZ 15.10):
   Discord-style accent bar on the left edge of the rail, the icon itself stays as is. */
html[data-theme-profile="alyo"] .main_bar [data-selected="true"] {
  position: relative;
}
html[data-theme-profile="alyo"] .main_bar [data-selected="true"]::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 36px;
  border-radius: 0 4px 4px 0;
  background: #379df5;
  pointer-events: none;
}
html[data-theme-profile="alyo"] .main_bar [data-selected="true"] *,
html[data-theme-profile="alyo"] .main_bar a[aria-current="page"] * {
  outline: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}
/* …and nothing else: the generic [data-selected] row style (blue tint + left stripe, square
   corners) and the old clipped img shadow made the selected server look lopsided. */
html[data-theme-profile="alyo"] .main_bar [data-selected="true"],
html[data-theme-profile="alyo"] .main_bar [aria-current="page"] {
  background: transparent !important;
  box-shadow: none !important;
}
html[data-theme-profile="alyo"] .main_bar [data-selected="true"] img,
html[data-theme-profile="alyo"] .main_bar a[aria-current="page"] img {
  box-shadow: none !important;
}

/* rooting 13.10: in a small (not full-screen) window the member list ate too much width.
   Theme tokens are set inline on html/body, so override with !important. */
@media (max-width: 1400px) {
  html, body { --layout-width-member-sidebar: 200px !important; }
}
@media (max-width: 1150px) {
  html, body { --layout-width-member-sidebar: 172px !important; }
}

/* Narrow window: the channel name block shrank to ~70px and its text spilled over the topic
   («# лог-разработки» on top of «Что нового в Алё…»). Name keeps its width (up to 45%, then «…»),
   the topic link after the divider is what gets cut. */
body:not(.hg-phone) .hg-header-icon + div {
  flex-shrink: 0 !important;
  max-width: 45%;
  min-width: 0;
  overflow: hidden;
}
body:not(.hg-phone) .hg-header-icon + div * {
  white-space: nowrap;
  text-overflow: ellipsis;
}
body:not(.hg-phone) .hg-header-icon + div + div + a {
  flex-shrink: 1 !important;
  min-width: 0 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* rooting 14.10: in a low window the «алё · БОЛЬШЕ ОБЩЕНИЯ» strip ate ~50px of a call card that
   is now sized by window height — give that space to the tiles. */
@media (max-height: 820px) {
  html[data-theme-profile] .hg-vc-chrome { display: none !important; }
}

/* ===== Auth redesign 16.10 (AuthPage.tsx): calm palette of the apps, flat accent button ===== */
html[data-theme-profile] .hg-auth button[type="submit"],
html[data-theme-profile] .hg-auth button[type="submit"][data-variant],
html .hg-auth button[type="submit"],
html .hg-auth mdui-button[type="submit"] {
  background: #379df5 !important;
  box-shadow: none !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  color: #fff !important;
}
html[data-theme-profile] .hg-auth button[type="submit"]:hover { background: #2f8ae6 !important; }
html[data-theme-profile] .hg-auth button[type="button"],
html .hg-auth button[type="button"] {
  border-radius: 12px !important;
  background: #151d30 !important;
  border: 1px solid #26314a !important;
  color: #eef2fa !important;
  box-shadow: none !important;
}
html .hg-auth input,
html .hg-auth textarea {
  background: #0b1020 !important;
  border: 1px solid #26314a !important;
  border-radius: 12px !important;
  color: #eef2fa !important;
}
html .hg-auth input:focus { border-color: #379df5 !important; }
html .hg-auth a { color: #379df5 !important; }