/* ═══════════════════════════════════════════════════════════
   ЦИФРОВОЙ ДВОЙНИК — CSS
   Тёмная тема, трёхпанельный layout (без чата)
═══════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  /* Общий тайминг с graph-3d-loader: кроссфейд .app ↔ лоадер */
  --graph-loader-fade-duration: 0.85s;
  --graph-loader-fade-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

html, body { height: 100%; min-height: 100%; overflow: hidden; font-family: 'Segoe UI', system-ui, sans-serif; }
body {
  background:
    radial-gradient(1200px 680px at 10% -10%, rgba(225, 232, 244, 0.08), transparent 70%),
    radial-gradient(980px 520px at 90% 120%, rgba(255, 255, 255, 0.04), transparent 70%),
    var(--bg-base);
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.58;
  font-weight: 400;
}

/* ═══ ШАПКА ═════════════════════════════════════════════ */

.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--topbar-h);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--text-primary) 3%, transparent) 0%,
      transparent 52%
    ),
    var(--glass-chrome-topbar);
  border-bottom: 1px solid var(--glass-edge);
  backdrop-filter: blur(var(--glass-chrome-blur)) saturate(var(--glass-chrome-saturate));
  -webkit-backdrop-filter: blur(var(--glass-chrome-blur)) saturate(var(--glass-chrome-saturate));
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.35),
    var(--glass-inset);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 0 16px;
  z-index: 100;
}

.topbar__logo { display: flex; align-items: center; gap: 10px; }

.topbar__mobile-menu-btn,
.topbar__mobile-spacer {
  display: none;
}

.topbar__icon {
  font-size: 22px;
  color: var(--accent);
  filter: drop-shadow(0 0 4px rgba(215, 219, 224, 0.22));
}

.topbar__title {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--text-primary);
  animation: none;
}

/* Small "beta" badge near the CORTEX logo */
.beta-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 16px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  color: color-mix(in srgb, var(--text-primary) 74%, var(--accent));
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--glass-edge));
  box-shadow: 0 0 0 1px rgba(0,0,0,0.18) inset;
  user-select: none;
  white-space: nowrap;
}
.beta-badge--topbar {
  transform: translateY(1px);
}

@keyframes core-shimmer {
  0%   { background-position: 0%   center; }
  100% { background-position: 200% center; }
}

/* ─── Поиск в шапке ─── */
.topbar__search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  width: min(420px, 34vw);
  height: 30px;
  padding: 0 7px 0 9px;
  margin-left: auto;
  margin-right: 6px;
  border: 1px solid var(--glass-edge);
  border-radius: 12px;
  background: transparent;
}
.topbar__search:focus-within {
  border-color: var(--accent);
  background: var(--glass-veil);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
}
.topbar__search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-glow) inset;
}
.topbar__search-icon {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1;
}
.topbar__search-input {
  flex: 1;
  height: 25px;
  border: none;
  outline: none;
  background: transparent !important;
  color: #f5f2eb;
  font-size: 13px;
  font-family: inherit;
  line-height: 1.2;
  caret-color: var(--accent);
}
.topbar__search-input::placeholder {
  color: rgba(224, 220, 212, 0.68);
}
.topbar__search-clear {
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: none;
  transition: color var(--ui-fast), filter var(--ui-fast);
}
.topbar__search-clear:hover {
  color: var(--text-primary);
  border: none;
  background: transparent;
  filter: var(--ui-icon-glow);
}
.topbar__search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  max-height: min(58vh, 420px);
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--glass-edge);
  border-radius: 12px;
  background: var(--glass-surface);
  box-shadow: var(--glass-shadow), var(--glass-inset);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  display: none;
  flex-direction: column;
  gap: 6px;
  z-index: 120;
}
.topbar__search-results--open {
  display: flex;
}
.topbar__search-open-btn--mobile { display: none; }
.search-results__empty {
  color: var(--text-muted);
  padding: 12px;
  font-size: 12px;
}
.search-result-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-panel-alt);
  color: var(--text-primary);
  text-align: left;
  padding: 8px 10px;
  cursor: pointer;
}
.search-result-item:hover {
  border-color: var(--accent);
  background: var(--bg-hover);
}
.search-result-item--active {
  border-color: var(--accent);
  background: var(--bg-hover);
}
.search-result-item__type {
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.search-result-item__title {
  font-size: 13px;
  line-height: 1.35;
  color: var(--text-primary);
}

/* ═══ WORKSPACE ══════════════════════════════════════════ */

.app {
  height: 100vh;
  height: var(--app-height);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition:
    opacity var(--graph-loader-fade-duration) var(--graph-loader-fade-ease);
}

html.core-boot-hide-app .app {
  opacity: 0 !important;
  pointer-events: none !important;
}

.workspace {
  display: flex;
  flex: 1;
  min-height: 0;
  margin-top: 0;
  padding-top: var(--topbar-h);
  overflow: hidden;
  position: relative;
  justify-content: space-between;
}

/* ═══ ONBOARDING STAGE 1 (chat-only UI) ════════════════════ */

html.onboarding-stage1 .topbar,
html.onboarding-stage1 #icon-rail,
html.onboarding-stage1 #panel-right,
html.onboarding-stage1 #music-widget,
html.onboarding-stage1 #bottom-nav,
html.onboarding-stage1 #chat-widget-launcher,
html.onboarding-stage1 #chat-widget-nudge,
html.onboarding-stage1 #node-modal-layer,
html.onboarding-stage1 #node-modal-dock,
html.onboarding-stage1 #profile-shell,
html.onboarding-stage1 #panel-tree,
html.onboarding-stage1 #timeline-rail-popover,
html.onboarding-stage1 #diary-rail-popover,
html.onboarding-stage1 #patterns-rail-popover,
html.onboarding-stage1 #notif-center-root,
html.onboarding-stage1 #thought-center-root,
html.onboarding-stage1 #notif-detail-overlay,
html.onboarding-stage1 #thought-detail-overlay {
  display: none !important;
}

html.onboarding-stage1 .workspace {
  padding-top: 0 !important;
}

/* Make graph a fixed background (still running, but non-interactive) */
html.onboarding-stage1 #panel-graph {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  border: none !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

html.onboarding-stage1 #cy,
html.onboarding-stage1 #graph-3d {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  pointer-events: none !important;
}

/* Hide all graph controls/legend/switchers */
html.onboarding-stage1 .graph-toolbar,
html.onboarding-stage1 .graph-search,
html.onboarding-stage1 #graph-view-toggle-wrap,
html.onboarding-stage1 #graph-settings-control-wrap,
html.onboarding-stage1 #graph-welcome-banner,
html.onboarding-stage1 #graph-legend {
  display: none !important;
}

/* Blur layer above background graph */
html.onboarding-stage1 .workspace::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  background: rgba(0, 0, 0, 0.22);
  opacity: 1;
  transition:
    opacity 0.64s cubic-bezier(0.22, 1, 0.36, 1),
    backdrop-filter 0.64s cubic-bezier(0.22, 1, 0.36, 1),
    -webkit-backdrop-filter 0.64s cubic-bezier(0.22, 1, 0.36, 1);
}

html.onboarding-stage1.graph-reveal-blur-out .workspace::before {
  opacity: 0;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
}

html.graph-reveal-blur-out.onboarding-stage1 .onboarding-session-label,
html.graph-reveal-blur-out.onboarding-stage1 .onboarding-progress-nodes,
html.graph-reveal-blur-out.onboarding-stage1 .onboarding-corner-action {
  opacity: 0 !important;
  visibility: hidden !important;
  transition:
    opacity 0.55s ease,
    visibility 0.55s ease;
}

/* Переход «Перейти к графу»: штора скрывает резкий показ хрома; чат поверх FLIP */
html.graph-reveal--busy #chat-graph-ready-banner-go {
  pointer-events: none;
  opacity: 0.72;
  cursor: wait;
}

.graph-reveal-curtain {
  position: fixed;
  inset: 0;
  z-index: 96;
  pointer-events: none;
  background: color-mix(in srgb, var(--bg-base, #0a0a0c) 93%, black);
  opacity: 0;
  visibility: hidden;
  transition: none;
}

.graph-reveal-curtain.graph-reveal-curtain--visible {
  opacity: 0.96;
  visibility: visible;
}

.graph-reveal-curtain.graph-reveal-curtain--visible.graph-reveal-curtain--out {
  opacity: 0;
  visibility: visible;
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Чат и виджет чата поверх шторы (96); не трогаем position у fixed-виджета */
html.graph-reveal-active #panel-chat {
  z-index: 250 !important;
}

@media (prefers-reduced-motion: reduce) {
  html.onboarding-stage1 .workspace::before {
    transition: none;
  }

  html.onboarding-stage1.graph-reveal-blur-out .workspace::before {
    opacity: 0;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
  }

  .graph-reveal-curtain.graph-reveal-curtain--visible.graph-reveal-curtain--out {
    transition-duration: 0.08s;
  }
}

/* Chat: centered single panel */
html.onboarding-stage1 #panel-chat {
  position: fixed !important;
  left: 16% !important;
  right: 0 !important;
  top: 24px !important;
  bottom: 24px !important;
  margin: auto !important;
  height: calc(100vh - 48px) !important;
  width: min(50vw, 760px) !important;
  min-width: 360px !important;
  z-index: 100 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  border: 1px solid var(--glass-edge);
  box-shadow: 0 26px 58px rgba(0, 0, 0, 0.45);
  /* Мобильный layout: .panel--chat по умолчанию уезжает вправо (opacity 0) — в stage1 чат всегда на экране */
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
}

html.onboarding-stage1 #chat-history-burger {
  display: none !important;
}

html.onboarding-stage1 #panel-chat .chat-widget-controls,
html.onboarding-stage1 #chat-widget-close,
html.onboarding-stage1 #chat-widget-resize-handle {
  display: none !important;
}

html.onboarding-stage1 #panel-chat .panel__header {
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  justify-content: center !important;
  position: relative !important;
}

html.onboarding-stage1 #panel-chat .panel__title.chat-panel__title--brand {
  letter-spacing: .12em;
  font-weight: 700;
  font-size: 20px;
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
}
html.onboarding-stage1 #panel-chat .panel__title.chat-panel__title--brand::before {
  content: '◈';
  margin-right: 10px;
  color: var(--accent);
  filter: drop-shadow(0 0 4px rgba(215, 219, 224, 0.22));
}
html.onboarding-stage1 #panel-chat .panel__title.chat-panel__title--brand::after {
  content: 'beta';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 16px;
  padding: 0 7px;
  margin-left: 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  color: color-mix(in srgb, var(--text-primary) 74%, var(--accent));
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--glass-edge));
  box-shadow: 0 0 0 1px rgba(0,0,0,0.18) inset;
  transform: translateY(-1px);
}

@media (max-width: 900px) {
  html.onboarding-stage1 #panel-chat {
    left: calc(10px + var(--safe-left)) !important;
    right: calc(10px + var(--safe-right)) !important;
    top: calc(76px + var(--safe-top)) !important;
    bottom: calc(16px + var(--safe-bottom)) !important;
    height: calc(100vh - 76px - var(--safe-top) - 16px - var(--safe-bottom)) !important;
    width: auto !important;
    min-width: 0 !important;
    border-radius: 18px !important;
  }

  html.onboarding-stage1 .onboarding-progress-card {
    left: 12px !important;
    top: 12px !important;
    width: 220px !important;
    padding: 14px 16px !important;
  }

  html.onboarding-stage1 .onboarding-progress-card__label {
    font-size: 14px !important;
  }
}

/* ═══ ONBOARDING: Текст сессии слева сверху ═════════════ */
.onboarding-session-label {
  display: none;
}

html.onboarding-stage1 .onboarding-session-label {
  display: block;
  position: fixed;
  left: 15px;
  top: 3%;
  z-index: 36;
  font-family: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  font-size: 28px;
  font-weight: 100;
  color: rgb(250 248 244 / 67%);
  letter-spacing: 0.02em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  animation: onboarding-session-pulse 4s ease-in-out infinite;
}

@keyframes onboarding-session-pulse {
  0%, 100% {
    color: rgb(250 248 244 / 50%);
  }
  50% {
    color: rgb(250 248 244 / 100%);
  }
}

html.onboarding-stage1 .onboarding-session-label--sub {
  display: block;
  position: fixed;
  left: 140px;
  top: 5%;
  z-index: 2;
  font-family: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  font-size: 54px;
  font-weight: 100;
  color: rgb(250 248 244 / 50%);
  letter-spacing: 0.05em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

@media (max-width: 900px) {
  html.onboarding-stage1 .onboarding-session-label,
  html.onboarding-stage1 .onboarding-session-label--sub {
    display: none !important;
  }
}

/* ═══ ONBOARDING: прогресс узлов справа сверху (зеркало к «сессия / знакомство») ═════════════ */
.onboarding-progress-nodes {
  display: none;
}

html.onboarding-stage1 .onboarding-progress-nodes {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  position: fixed;
  right: 18px;
  top: 3%;
  z-index: 36;
  max-width: min(42vw, 280px);
  text-align: right;
  pointer-events: none;
}

.onboarding-progress-nodes__caption {
  font-family: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 100;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(250 248 244 / 52%);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.onboarding-progress-nodes__ratio {
  margin-top: 4px;
  font-family: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  font-size: clamp(28px, 4.2vw, 44px);
  font-weight: 100;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: rgb(250 248 244 / 78%);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
  line-height: 1.05;
}

.onboarding-progress-nodes__ratio--complete {
  color: color-mix(in srgb, var(--accent) 88%, rgb(250 248 244));
  text-shadow: 0 0 24px color-mix(in srgb, var(--accent) 35%, transparent);
}

.onboarding-progress-nodes__track {
  margin-top: 10px;
  width: 100%;
  max-width: 200px;
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, rgb(250 248 244) 12%, rgba(0, 0, 0, 0.35));
  overflow: hidden;
}

.onboarding-progress-nodes__fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--accent) 82%, transparent),
    color-mix(in srgb, var(--accent) 55%, rgb(250 248 244) 22%)
  );
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 42%, transparent);
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 900px) {
  html.onboarding-stage1 .onboarding-progress-nodes {
    display: none !important;
  }
}

/* ═══ ONBOARDING: выход + перезапуск (десктоп: слева внизу в ряд) ═══════════ */
.onboarding-corner-action {
  display: none;
}

html.onboarding-stage1 .onboarding-corner-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  bottom: 24px;
  z-index: 110;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--glass-edge);
  border-radius: 14px;
  background: var(--glass-surface);
  color: var(--text-secondary);
  cursor: pointer;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4), var(--glass-inset);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  transition: color 0.15s ease, border-color 0.15s ease, box-shadow 0.2s ease;
}

html.onboarding-stage1 .onboarding-corner-action:hover {
  color: var(--text-primary);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--glass-edge));
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.45), 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent) inset;
}

html.onboarding-stage1 .onboarding-corner-action:active {
  transform: scale(0.97);
}

/* Только десктоп: перезапуск слева, выход справа от неё */
@media (min-width: 901px) {
  html.onboarding-stage1 .onboarding-restart-btn {
    left: 24px;
    right: auto;
  }

  html.onboarding-stage1 .onboarding-logout-btn {
    left: 82px;
    right: auto;
  }
}

html.onboarding-stage1 .onboarding-logout-btn__icon {
  transform: scaleX(-1);
}

/* Мобильный: выход + перезапуск сверху слева (как на ПК — рядом) */
@media (max-width: 900px) {
  html.onboarding-stage1 .onboarding-restart-btn {
    display: inline-flex !important;
    left: calc(12px + var(--safe-left)) !important;
    right: auto !important;
    top: calc(12px + var(--safe-top)) !important;
    bottom: auto !important;
    transform: none !important;
    width: 46px;
    height: 46px;
    border-radius: 12px;
  }

  html.onboarding-stage1 .onboarding-logout-btn {
    left: calc(12px + var(--safe-left) + 58px) !important;
    right: auto !important;
    top: calc(12px + var(--safe-top)) !important;
    bottom: auto !important;
    transform: none !important;
    width: 46px;
    height: 46px;
    border-radius: 12px;
  }

  html.onboarding-stage1 .onboarding-logout-btn:active {
    transform: scale(0.97) !important;
  }
}

/* ═══ ИКОНКОВЫЙ ЛЕВЫЙ САЙДБАР ═══════════════════════════ */

.icon-rail {
  width: var(--icon-rail-w);
  flex-shrink: 0;
  border-right: 1px solid var(--glass-edge);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--text-primary) 3%, transparent) 0%,
      transparent 52%
    ),
    var(--glass-chrome-topbar);
  backdrop-filter: blur(var(--glass-chrome-blur)) saturate(var(--glass-chrome-saturate));
  -webkit-backdrop-filter: blur(var(--glass-chrome-blur)) saturate(var(--glass-chrome-saturate));
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.35),
    var(--glass-inset);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
}

.icon-rail__item {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: color 0.15s ease;
}

.icon-rail__item:hover {
  color: var(--text-primary);
}

.icon-rail__item:hover .icon-rail__glyph,
.icon-rail__item:hover .icon-rail__avatar {
  filter: var(--ui-icon-glow);
}

.icon-rail__item--active {
  background: transparent;
  color: var(--accent);
}

.icon-rail__item--active .icon-rail__glyph,
.icon-rail__item--active .icon-rail__avatar,
.icon-rail__item--active .icon-rail__avatar-image {
  filter: var(--ui-icon-glow-strong);
}

.icon-rail__glyph {
  font-size: 16px;
  line-height: 1;
  transition: filter 0.15s ease;
}

.icon-rail__tooltip {
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--glass-tooltip-bg);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
  padding: 6px 8px;
  opacity: 0;
  pointer-events: none;
  box-shadow: var(--glass-shadow), var(--glass-inset);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  z-index: 30;
}

.icon-rail__item:hover .icon-rail__tooltip,
.icon-rail__item:focus-visible .icon-rail__tooltip {
  opacity: 1;
}

/* Подпись «Профиль» — кликабельна (открывает окно профиля вместе с кнопкой) */
.icon-rail__item--user .icon-rail__tooltip--profile {
  pointer-events: auto;
  cursor: pointer;
}

.icon-rail__bottom {
  margin-top: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 8px;
  padding-bottom: 4px;
}

.icon-rail__item--user {
  overflow: hidden;
}

.icon-rail__avatar,
.icon-rail__avatar-image {
  width: 24px;
  height: 24px;
  border-radius: 999px;
}

.icon-rail__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: filter 0.15s ease;
}

.icon-rail__avatar-image {
  object-fit: cover;
  border: none;
  transition: filter 0.15s ease;
}

/* Профиль: та же оболочка, что у модалки настроек графа (.graph-settings-popover), позиция через JS */
.profile-shell-popover.graph-settings-popover {
  z-index: 56;
}

/* Rail: база знаний, таймлайн, паттерны — тот же shell, что настройки графа */
.rail-feature-popover.graph-settings-popover {
  z-index: 56;
}

.rail-feature-popover--tree .rail-tree-popover__body {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
}

.rail-timeline-popover__head {
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: center;
}

.rail-timeline-popover__head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  flex: 1;
  min-width: 0;
}

.rail-timeline-popover__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

.rail-feature-popover--timeline .timeline-modal__legend {
  flex-shrink: 0;
  margin: 0;
  padding: 6px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border-light) 66%, transparent);
}

.timeline-modal__body--rail {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 8px !important;
}

.rail-feature-popover--timeline .timeline-layout {
  min-height: 220px;
  height: 100%;
  max-height: min(480px, 50vh);
}

.rail-feature-popover--timeline .timeline-scale {
  min-height: 180px;
}

.rail-feature-popover--timeline .timeline-events-col {
  min-height: 180px;
}

/* Rail: ежедневник */
.rail-feature-popover--diary .rail-diary-popover__body {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
  padding: 10px 12px 12px;
  overflow: hidden;
}

.rail-diary-popover__layout {
  display: grid;
  grid-template-columns: minmax(200px, 34%) 1fr;
  gap: 12px;
  flex: 1;
  min-height: 260px;
  max-height: min(540px, 58vh);
  min-width: 0;
}

.rail-diary-popover__sidebar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  min-width: 0;
}

.rail-diary-new-btn {
  flex-shrink: 0;
  width: 100%;
  padding: 8px 10px;
  border-radius: 10px;
  border: none;
  background: color-mix(in srgb, var(--accent) 18%, var(--glass-veil));
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: filter 0.15s ease, background 0.15s ease;
}

.rail-diary-new-btn:hover {
  filter: var(--ui-icon-glow);
}

.rail-diary-feed {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin: 0;
  padding: 0 2px 0 0;
  list-style: none;
}

.rail-diary-feed .diary-feed-empty {
  padding: 12px 8px;
  font-size: 12px;
  color: var(--text-muted);
  list-style: none;
}

.rail-diary-popover__editor {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  min-width: 0;
}

.rail-diary-editor__meta {
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.rail-diary-editor__textarea {
  flex: 1;
  min-height: 140px;
  max-height: min(42vh, 360px);
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--glass-input-border);
  background: var(--glass-input-bg);
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
  line-height: 1.55;
  resize: vertical;
  outline: none;
}

.rail-diary-editor__textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-glow);
}

.rail-diary-editor__reanalyze {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}

.rail-diary-editor__reanalyze.rail-diary-editor__reanalyze--hidden {
  display: none;
}

.rail-diary-editor__reanalyze input {
  accent-color: var(--accent);
}

.rail-diary-editor__analysis {
  flex-shrink: 0;
  max-height: min(28vh, 220px);
  overflow-y: auto;
  padding: 10px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg-panel) 40%, transparent);
  border: 1px solid color-mix(in srgb, var(--border-light) 70%, transparent);
}

.rail-diary-editor__analysis-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.rail-diary-editor__analysis-text {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
}

.rail-diary-editor__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-shrink: 0;
  margin-top: auto;
}

.rail-diary-editor__status {
  font-size: 12px;
  color: var(--text-muted);
  min-height: 18px;
  flex: 1;
}

.rail-diary-editor__status--error {
  color: #e05b7a;
}

.rail-diary-editor__status--ok {
  color: #3ecf8e;
}

.rail-diary-editor__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rail-diary-editor__btn {
  padding: 8px 14px;
  border-radius: 10px;
  border: none;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  background: var(--glass-veil);
  color: var(--text-primary);
  transition: background 0.15s ease, opacity 0.15s ease;
}

.rail-diary-editor__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.rail-diary-editor__btn--primary {
  background: color-mix(in srgb, var(--accent) 22%, var(--ui-gray-strong));
  color: #0a0c10;
}

@media (max-width: 767px) {
  .rail-diary-popover__layout {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(120px, 28vh) 1fr;
    max-height: none;
  }

  .rail-diary-feed {
    max-height: 28vh;
  }
}

.profile-shell-popover .graph-settings-popover__body {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
}

.profile-shell__tabs {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 0 10px;
  margin-bottom: 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

.profile-shell__tab {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.profile-shell__tab:hover {
  color: var(--text-primary);
  background: var(--glass-veil-hover);
}

.profile-shell__tab--active {
  color: var(--text-primary);
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border-light));
  background: color-mix(in srgb, var(--accent) 12%, rgba(255, 255, 255, 0.04));
  box-shadow: 0 0 0 1px var(--accent-glow) inset;
}

.profile-shell__panel {
  display: none;
}

.profile-shell__panel--active {
  display: block;
}

.profile-shell__row {
  display: flex;
  gap: 14px;
  align-items: center;
}

.profile-shell__avatar-wrap {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--glass-edge);
  flex-shrink: 0;
}

.profile-shell__avatar-image,
.profile-shell__avatar-fallback {
  width: 100%;
  height: 100%;
}

.profile-shell__avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--text-primary);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.profile-shell__avatar-image {
  object-fit: cover;
}

.profile-shell__identity {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.profile-shell__name {
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 100%;
}

.profile-shell__hint {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}

.profile-shell__meta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}

.profile-shell__meta-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-size: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--glass-edge);
  background: var(--glass-veil);
}

.profile-shell__meta-label {
  color: var(--text-muted);
}

.profile-shell__meta-value {
  color: var(--text-primary);
  font-weight: 600;
  text-align: right;
}

.profile-shell__btn {
  border: 1px solid var(--glass-edge);
  border-radius: 10px;
  background: var(--glass-veil);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.profile-shell__btn--inline {
  height: 32px;
  padding: 0 14px;
}

.profile-shell__btn--block {
  display: block;
  width: 100%;
  margin-top: 14px;
  min-height: 40px;
  padding: 0 14px;
  text-align: center;
}

.profile-shell__btn:hover {
  color: var(--text-primary);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-glow) inset;
}

.profile-shell__btn--danger:hover {
  border-color: #d66a6a;
  color: #ffd9d9;
}

/* ═══ ПАНЕЛИ ═════════════════════════════════════════════ */

.panel {
  display: flex;
  flex-direction: column;
  background: var(--glass-surface);
  overflow: hidden;
  transition: width .2s ease;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow: var(--glass-shadow), var(--glass-inset);
}

.panel__header {
  flex-shrink: 0;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  border-bottom: 1px solid var(--glass-edge);
  background: var(--glass-header);
}

.panel__title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-secondary);
}

.panel__toggle {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 16px;
  padding: 4px 6px;
  border-radius: 4px;
  transition: color .15s, filter .15s ease;
}
.panel__toggle:hover {
  color: var(--text-primary);
  filter: var(--ui-icon-glow);
}

/* После .panel__header: модалки — тот же glass и геометрия, что у .topbar (шапка чата — отдельно, ниже) */
.cmodal__header,
.smodal__header,
.notif-panel__head,
.notif-detail-overlay__head,
.timeline-modal__header,
.mobile-menu__header,
.node-float-modal__head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--topbar-h);
  min-height: var(--topbar-h);
  padding: 0 16px;
  box-sizing: border-box;
  border-bottom: 1px solid var(--glass-edge);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--text-primary) 3%, transparent) 0%,
      transparent 52%
    ),
    var(--glass-chrome-topbar);
  backdrop-filter: blur(var(--glass-chrome-blur)) saturate(var(--glass-chrome-saturate));
  -webkit-backdrop-filter: blur(var(--glass-chrome-blur)) saturate(var(--glass-chrome-saturate));
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.35),
    var(--glass-inset);
}

.panel--chat > .panel__header.chat-panel__header {
  position: relative;
  z-index: 55;
  height: var(--chat-header-h);
  min-height: var(--chat-header-h);
  padding: 0 12px;
  border-bottom: 1px solid var(--glass-edge);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--text-primary) 3%, transparent) 0%,
      transparent 52%
    ),
    var(--glass-chrome-topbar);
  backdrop-filter: blur(var(--glass-chrome-blur)) saturate(var(--glass-chrome-saturate));
  -webkit-backdrop-filter: blur(var(--glass-chrome-blur)) saturate(var(--glass-chrome-saturate));
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.28),
    var(--glass-inset);
}

.notif-panel__head,
.smodal__header,
.mobile-menu__header,
.node-float-modal__head,
.notif-detail-overlay__head {
  justify-content: space-between;
}

.panel__body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--border-light) transparent;
}

/* ─── ЛЕВАЯ ПАНЕЛЬ ─── */

.panel--left {
  width: var(--left-w);
  min-width: 0;
  border-right: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--glass-chrome);
  backdrop-filter: blur(var(--glass-chrome-blur)) saturate(var(--glass-chrome-saturate));
  -webkit-backdrop-filter: blur(var(--glass-chrome-blur)) saturate(var(--glass-chrome-saturate));
  position: absolute;
  left: var(--icon-rail-w);
  top: 0;
  bottom: 0;
  z-index: 120;
  box-shadow: 10px 0 26px rgba(0, 0, 0, .35);
  transform: translateX(0);
  opacity: 1;
  transition: transform .2s ease, opacity .2s ease;
}

.panel--left.left-panel--hidden {
  transform: translateX(-100%);
  opacity: 0;
  pointer-events: none;
}

.panel--left.collapsed { width: 40px; }
.panel--left.collapsed .panel__body { display: none; }
.panel--left.collapsed .panel__title { display: none; }

/* ─── ЦЕНТРАЛЬНАЯ ПАНЕЛЬ ─── */

.panel--center {
  flex: 1;
  min-width: 0;
  position: relative;
  padding-top: 0;
  border-right: 1px solid var(--border);
}

/* Десктоп: граф на весь workspace (под шапкой), UI — поверх — для backdrop-filter на rail/дереве/чате */
@media (min-width: 1024px) {
  .panel.panel--center {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(-1 * var(--topbar-h));
    bottom: 0;
    z-index: 0;
    flex: none;
    width: auto;
    min-width: 0;
    border-right: none;
  }

  .icon-rail {
    position: relative;
    z-index: 100;
  }

  .panel--chat {
    position: relative;
    z-index: 100;
  }

  /* Базовая геометрия слоя модалок узлов (desktop). */
  .workspace > .node-modal-layer {
    position: fixed;
    top: var(--topbar-h);
    left: var(--icon-rail-w);
    right: var(--right-w);
    bottom: 0;
    width: auto;
    height: auto;
    z-index: 125;
  }

  .workspace > .node-modal-dock {
    position: fixed;
    left: calc(var(--icon-rail-w) + 12px);
    right: calc(var(--right-w) + 12px);
    bottom: 36px;
    z-index: 126;
  }

  /* Только в 3D: слой модалок тянется от rail до противоположного края .app. */
  body.graph-mode-3d .workspace > .node-modal-layer {
    right: 0;
  }

  body.graph-mode-3d .workspace > .node-modal-dock {
    right: 12px;
  }
}

@media (max-width: 1024px) {
  .panel.panel--center {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    z-index: auto;
    flex: 1;
    min-width: 0;
    border-right: 1px solid var(--border);
  }
}

/* ─── ПРАВАЯ ПАНЕЛЬ ─── */

.panel--chat {
  width: var(--right-w);
  min-width: 0;
  flex-shrink: 0;
  border-left: 1px solid var(--border);
  position: relative;
  /* фон и blur только у .chat-panel, не у всей колонки */
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.panel--left > .panel__header {
  background: var(--glass-chrome-header);
}

.chat-panel__header {
  justify-content: flex-start;
  gap: 8px;
}

.chat-panel__header .panel__title {
  flex: 1;
  min-width: 0;
}

.chat-widget-controls {
  display: none;
  align-items: center;
  gap: 6px;
}

.chat-widget-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 0.15s ease, filter 0.15s ease;
}

.chat-widget-btn:hover {
  color: var(--text-primary);
  filter: var(--ui-icon-glow);
}

.chat-widget-launcher {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 219;
  display: none;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--glass-edge);
  border-radius: 14px;
  background: rgb(255 255 255 / 0%);
  backdrop-filter: blur(22px) saturate(110%);
  -webkit-backdrop-filter: blur(22px) saturate(110%);
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.40);
  color: var(--text-primary);
  cursor: pointer;
  font-size: 13px;
  font-weight: 560;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.chat-widget-launcher:hover {
  transform: translateY(-1px);
  box-shadow: 0 26px 52px rgba(0, 0, 0, 0.45);
  background: rgba(255, 255, 255, 0.1);
}

.chat-widget-launcher__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 16px;
  line-height: 1;
}

.chat-widget-launcher__label {
  line-height: 1;
}

.chat-widget-launcher--analyzing {
  border-color: color-mix(in srgb, var(--accent) 54%, var(--glass-edge));
  box-shadow:
    0 20px 46px rgba(0, 0, 0, 0.40),
    0 0 0 1px color-mix(in srgb, var(--accent) 38%, transparent) inset;
}

.chat-widget-launcher--analyzing .chat-widget-launcher__icon .notif-item__spinner {
  width: 16px;
  height: 16px;
}

.chat-widget-launcher.chat-widget-launcher--morphing {
  animation: chatWidgetLauncherMorph 0.5s cubic-bezier(0.2, 0.9, 0.24, 1);
}

.chat-widget-nudge {
  position: fixed;
  right: 18px;
  bottom: 74px;
  z-index: 221;
  display: none;
  width: min(520px, calc(100vw - 36px));
  max-width: min(520px, calc(100vw - 36px));
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text-primary);
  cursor: pointer;
  transform-origin: right bottom;
  opacity: 0;
  transform: translateY(10px) scale(0.84);
  transition: opacity 0.22s ease, transform 0.24s ease, color 0.18s ease;
  text-align: left;
}

.chat-widget-nudge:hover {
  filter: brightness(1.03);
}

.chat-widget-nudge--visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.chat-widget-nudge__bubble {
  width: 100%;
  max-height: min(52vh, calc(100vh - var(--topbar-h) - 120px));
  overflow: auto;
  padding: 12px 12px 12px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--glass-edge) 92%, transparent);
  background: color-mix(in srgb, var(--glass-chat-body) 94%, transparent);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.42), var(--glass-inset);
}

.chat-widget-nudge__label {
  display: block;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--accent) 78%, var(--text-secondary));
  margin: 0 0 8px;
}

.chat-widget-nudge__text {
  display: block;
  font-size: 13px;
  line-height: 1.35;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
}

@keyframes chatWidgetLauncherMorph {
  0% { transform: translateY(0) scale(1); }
  45% { transform: translateY(1px) scale(1.09, 0.88); }
  100% { transform: translateY(0) scale(0.9, 1.06); }
}

.chat-widget-resize-handle {
  display: none;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 18px;
  height: 18px;
  cursor: nwse-resize;
  opacity: 0.65;
}

.chat-widget-resize-handle::before {
  content: '';
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--border-light);
  border-bottom: 2px solid var(--border-light);
}

body.chat-widget-enabled .panel--chat {
  position: fixed;
  right: 18px;
  bottom: 18px;
  top: auto;
  width: min(420px, calc(100vw - 36px));
  height: min(620px, calc(100vh - var(--topbar-h) - 34px));
  min-height: 300px;
  border: 1px solid var(--glass-edge);
  border-radius: 18px;
  overflow: hidden;
  z-index: 220;
  box-shadow: 0 26px 58px rgba(0, 0, 0, 0.5);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(22px) saturate(110%);
  -webkit-backdrop-filter: blur(22px) saturate(110%);
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  pointer-events: none;
  transition:
    opacity 0.18s ease,
    transform 0.2s ease,
    height 0.28s cubic-bezier(0.32, 0.72, 0, 1),
    min-height 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}

body.chat-widget-enabled .panel--chat > .panel__header {
  cursor: move;
  user-select: none;
}

body.chat-widget-enabled.chat-widget-open .panel--chat {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

body.chat-widget-enabled .chat-widget-controls {
  display: inline-flex;
}

body.chat-widget-enabled .chat-widget-resize-handle {
  display: block;
}

body.chat-widget-enabled .chat-widget-launcher {
  display: inline-flex;
}

body.chat-widget-enabled .chat-widget-nudge {
  display: inline-flex;
}

body.chat-widget-enabled.chat-widget-open .chat-widget-launcher {
  display: none;
}

body.chat-widget-enabled.chat-widget-open .chat-widget-nudge {
  display: none;
}

body.chat-widget-enabled .panel--chat .chat-panel {
  max-height: 5000px;
  opacity: 1;
  transition:
    max-height 0.28s cubic-bezier(0.32, 0.72, 0, 1),
    opacity 0.22s ease;
}

@media (prefers-reduced-motion: reduce) {
  body.chat-widget-enabled .panel--chat .chat-panel {
    transition: none;
  }
}

body.chat-widget-enabled .panel--chat.chat-widget--dragging {
  transition: none;
}

.chat-history-burger {
  flex-shrink: 0;
  width: 32px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 0.15s ease;
}

.chat-history-burger:hover {
  color: var(--text-primary);
}

.chat-history-burger:hover .chat-history-burger__icon {
  filter: var(--ui-icon-glow);
}

.chat-history-burger__icon {
  display: block;
  flex-shrink: 0;
  transition: filter 0.15s ease;
}

.chat-history-overlay {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: var(--chat-header-h);
  bottom: 0;
  z-index: 48;
  background: color-mix(in srgb, var(--bg-base) 52%, transparent);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
}

.panel--chat.chat-history-open .chat-history-overlay {
  display: block;
}

.chat-history-drawer {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--chat-header-h);
  bottom: 0;
  width: 100%;
  max-width: none;
  z-index: 50;
  display: flex;
  flex-direction: column;
  background: var(--glass-chat-body);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border-right: none;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
  transform: translateX(-101%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

/* Drawer в режиме виджета — та же геометрия, что под шапкой колонки */
body.chat-widget-enabled .chat-history-drawer {
  top: var(--chat-header-h);
  bottom: 0;
  height: auto;
}

.panel--chat.chat-history-open .chat-history-drawer {
  transform: translateX(0);
  pointer-events: auto;
}

.chat-history-drawer__head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: var(--chat-header-h);
  min-height: var(--chat-header-h);
  padding: 0 12px;
  box-sizing: border-box;
  border-bottom: 1px solid var(--glass-edge);
  background: var(--glass-header);
}

.chat-history-drawer__label {
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.chat-history-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Переключатель режима в панели истории */
.chat-mode-switch--drawer {
  height: 26px;
  padding: 0 6px 0 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-input-border);
  background: var(--glass-input-bg);
  box-shadow: var(--glass-inset);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
}

.chat-history-new {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid var(--border-light);
  background: var(--ui-gray-mid);
  color: var(--text-primary);
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

.chat-history-new:hover {
  background: var(--bg-hover);
  border-color: var(--border-light);
}

/* Внешний попап меню действий с чатом */
.chat-session-menu-popover {
  position: absolute;
  right: 8px;
  top: 0;
  min-width: 160px;
  display: none;
  padding: 6px;
  border: 1px solid color-mix(in srgb, var(--border-light) 84%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--glass-surface) 94%, transparent);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow: var(--glass-shadow);
  z-index: 60;
}

.chat-session-menu-popover--open {
  display: grid;
  gap: 4px;
}

.chat-session-menu-popover__item {
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
}

.chat-session-menu-popover__item:hover {
  border-color: var(--border-light);
  background: color-mix(in srgb, var(--bg-panel) 44%, transparent);
  color: var(--text-primary);
}

.chat-session-menu-popover__item--danger:hover {
  border-color: color-mix(in srgb, var(--accent) 48%, transparent);
  color: color-mix(in srgb, var(--accent) 88%, var(--text-primary));
}

.chat-session-menu-popover__icon {
  width: 16px;
  text-align: center;
  font-size: 13px;
}

.chat-history-list {
  list-style: none;
  margin: 0;
  padding: 8px 8px 12px;
  overflow-y: auto;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: var(--border-light) transparent;
}

.chat-history-separator {
  margin: 10px 4px 6px;
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.chat-history-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding: 10px 10px;
  margin-bottom: 4px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background 0.12s ease,
    border-color 0.12s ease,
    box-shadow 0.12s ease,
    backdrop-filter 0.12s ease;
}

.chat-history-item:hover {
  border-color: color-mix(in srgb, var(--border-light) 72%, transparent);
  background: color-mix(in srgb, var(--glass-hover) 58%, transparent);
  backdrop-filter: blur(12px) saturate(108%);
  -webkit-backdrop-filter: blur(12px) saturate(108%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--text-primary) 4%, transparent) inset;
}

.chat-history-item--active {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--glass-edge));
  background: color-mix(in srgb, var(--glass-surface) 46%, transparent);
  backdrop-filter: blur(14px) saturate(112%);
  -webkit-backdrop-filter: blur(14px) saturate(112%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent) inset,
    0 10px 28px rgba(0, 0, 0, 0.22);
}

.chat-history-item__head {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.chat-history-item__title {
  flex: 1;
  font-size: 12px;
  font-weight: 550;
  line-height: 1.35;
  color: var(--text-primary);
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.chat-history-item__meta {
  font-size: 10px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.chat-history-item__menu-btn {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s ease, filter 0.15s ease;
}

.chat-history-item__menu-btn:hover {
  color: var(--text-primary);
  filter: var(--ui-icon-glow);
}

.panel--right {
  position: fixed;
  top: calc(var(--topbar-h) + 16px);
  height: calc(100vh - var(--topbar-h) - 72px);
  left: calc(var(--icon-rail-w) + 16px);
  width: min(420px, calc(100vw - var(--icon-rail-w) - 32px));
  min-width: 320px;
  min-height: 280px;
  max-width: calc(100vw - var(--icon-rail-w) - 20px);
  max-height: calc(100vh - var(--topbar-h) - 58px);
  z-index: 210;
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-lg);
  background: var(--glass-surface);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow:
    var(--glass-shadow),
    var(--glass-inset);
  transform: translateX(0) scale(1);
  transform-origin: left center;
  opacity: 1;
  transition: transform .2s ease, opacity .2s ease;
}

.panel--right.details-panel--hidden {
  transform: translateX(-22px) scale(.985);
  opacity: 0;
  pointer-events: none;
}

.panel--right.collapsed { width: 40px; }
.panel--right.collapsed .details-body { display: none; }
.panel--right.collapsed .panel__title { display: none; }

.panel--right .panel__header {
  border-bottom: 1px solid color-mix(in srgb, var(--border-light) 62%, transparent);
  cursor: move;
  user-select: none;
}

.panel--right.panel--dragging,
.panel--right.panel--resizing {
  transition: none;
}

.details-resize-handle {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  cursor: nwse-resize;
  opacity: .55;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
}
.details-resize-handle:hover { opacity: .9; }

/* ═══ ФАЙЛОВОЕ ДЕРЕВО ═══════════════════════════════════ */

.tree { padding: 8px 0; }

.tree-category { user-select: none; }

.tree-category__header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-secondary);
  transition: background .15s;
}
.tree-category__header:hover { background: var(--glass-veil-hover); }

.tree-category__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--dot-color, var(--text-muted));
}

.tree-category__arrow {
  margin-left: auto;
  font-size: 10px;
  transition: transform .15s;
}
.tree-category--closed .tree-category__arrow { transform: rotate(-90deg); }

.tree-nodes { padding: 2px 0 4px 0; }
.tree-category--closed .tree-nodes { display: none; }

.tree-node {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 5px 12px 5px 28px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-secondary);
  transition: background .15s, color .15s;
  border-left: 2px solid transparent;
}
.tree-node:hover { background: var(--glass-veil-hover); color: var(--text-primary); }
.tree-node--active {
  color: var(--text-primary);
  background: var(--glass-veil-active);
  border-left-color: var(--accent);
}

.tree-node__icon { flex-shrink: 0; font-size: 11px; margin-top: 2px; opacity: .6; }
.tree-node__title { flex: 1; line-height: 1.4; }
.tree-node__badge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--glass-veil);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  margin-left: auto;
}

.tree-node__expand {
  flex-shrink: 0;
  font-size: 9px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px 5px;
  margin-left: 3px;
  border-radius: 3px;
  transition: transform .15s, color .15s, background .15s;
  line-height: 1;
}
.tree-node__expand:hover { color: var(--text-secondary); background: var(--glass-veil-hover); }
.tree-node__expand--open { transform: rotate(90deg); }

/* ── Под-узлы в дереве ──────────────────────────────── */
.tree-node-wrap { display: flex; flex-direction: column; }

.tree-subnodes {
  display: flex;
  flex-direction: column;
  padding-bottom: 2px;
}

.tree-subnode {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 4px 12px 4px 40px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-muted);
  border-left: 2px solid transparent;
  transition: background .15s, color .15s;
  position: relative;
}
.tree-subnode:hover { background: var(--glass-veil-hover); color: var(--text-secondary); }
.tree-subnode--active {
  color: var(--text-secondary);
  background: var(--glass-veil-active);
  border-left-color: var(--accent);
}
.tree-subnode__line {
  position: absolute;
  left: 30px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--border);
  opacity: .5;
}
.tree-subnode:last-child .tree-subnode__line { height: 55%; bottom: auto; }
.tree-subnode__icon { flex-shrink: 0; font-size: 10px; opacity: .45; margin-top: 2px; }
.tree-subnode__title { flex: 1; line-height: 1.4; }

/* Счётчик узлов в заголовке категории */
.tree-category__count {
  margin-left: auto;
  font-size: 10px;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 0;
  text-transform: none;
}
.tree-category__arrow { margin-left: 6px; }

/* История вопросов в дереве */
.tree-section { border-top: 1px solid var(--border); margin-top: 4px; }

.tree-section__header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-secondary);
  transition: background .15s;
}
.tree-section__header:hover { background: var(--glass-veil-hover); }
.tree-section__icon { font-size: 13px; }
.tree-section__arrow { margin-left: auto; font-size: 10px; }

.questions-list { padding: 2px 0; }

.question-item {
  padding: 6px 12px 6px 24px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-secondary);
  border-left: 2px solid transparent;
  transition: background .15s, color .15s;
}
.question-item:hover { background: var(--glass-veil-hover); color: var(--text-primary); }
.question-item--active {
  color: var(--text-primary);
  background: var(--glass-veil-active);
  border-left-color: var(--cat-question);
}

.question-item__time {
  font-size: 10px;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.question-item__text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

/* ═══ ГРАФ ═══════════════════════════════════════════════ */

.graph-canvas {
  position: absolute;
  inset: 0;
  background: var(--bg-base);
  overflow: hidden;
}

/* 2D граф: без отдельного фона — видна подложка панели / темы */
#cy.graph-canvas {
  position: absolute;
  inset: 0;
  isolation: isolate;
  background: transparent;
  touch-action: none;
}

#cy .graph-parallax {
  background: transparent;
  background-image: none;
  filter: none;
}

/* Cytoscape canvas/DOM поверх служебных слоёв */
#cy.graph-canvas > canvas,
#cy.graph-canvas > div {
  position: relative;
  z-index: 1;
}

.graph-parallax {
  position: absolute;
  inset: -30px;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}

.graph-toolbar {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 25;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: none;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

.graph-search {
  position: relative;
  width: 180px;
}

.graph-search--corner {
  position: absolute;
  top: 8px;
  left: 10px;
  z-index: 26;
  width: min(200px, calc(100% - 120px));
  pointer-events: auto;
}

/* Плавающие контролы графа: только позиция, без «чипа»/капсулы */
.graph-control-anchor {
  position: absolute;
  bottom: 11px;
  left: auto;
  right: auto;
  transform: none;
  width: max-content;
  max-width: none;
  min-height: 28px;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0;
  padding: 0;
  z-index: 24;
  box-sizing: border-box;
  background: none;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: visible;
  pointer-events: auto;
}

#graph-view-toggle-wrap {
  left: calc(var(--icon-rail-w) + 16px + 266px + 12px);
  right: auto;
}

#graph-view-toggle-wrap.graph-view-toggle--disabled {
  opacity: 0.42;
  pointer-events: none;
}

.graph-settings-popover {
  position: absolute;
  left: 12px;
  top: 10px;
  width: 440px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - var(--topbar-h) - 24px);
  display: flex;
  flex-direction: column;
  background: var(--glass-chat-body);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid color-mix(in srgb, var(--border-light) 70%, transparent);
  border-radius: 16px;
  padding: 8px;
  box-shadow:
    0 20px 48px rgba(0, 0, 0, 0.45),
    var(--glass-shadow);
  z-index: 55;
  transform-origin: left top;
  opacity: 0;
  transform: translateX(-8px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.22s cubic-bezier(0.32, 0.72, 0, 1);
}

.graph-settings-popover--open {
  opacity: 1;
  transform: translateX(0) scale(1);
  pointer-events: auto;
}

.graph-settings-popover__header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  margin-bottom: 2px;
}

.graph-settings-popover__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.graph-settings-popover__close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease, filter 0.15s ease;
}

.graph-settings-popover__close:hover {
  color: var(--text-primary);
  background: transparent;
  filter: var(--ui-icon-glow);
}

.graph-settings-popover__body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 14px 14px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-light) transparent;
}

.graph-settings-popover__body .smodal__subsection,
.graph-settings-popover__body .smodal__range-row,
.graph-settings-popover__body .smodal__toggle-row,
.graph-settings-popover__body .smodal__color-row {
  min-width: 0;
}

/* Пресеты палитры (настройки графа) */
.graph-palette-presets {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--border-light) 55%, transparent);
}

.graph-palette-presets__title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.graph-palette-presets__hint {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.45;
  margin: 0 0 10px;
}

.graph-palette-presets__save-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin-bottom: 10px;
}

.graph-palette-presets__name-input {
  flex: 1;
  min-width: 0;
}

.graph-palette-presets__save-btn {
  flex-shrink: 0;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--border-light);
  background: var(--bg-panel-alt);
  color: var(--text-secondary);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease, box-shadow 0.22s ease;
}

.graph-palette-presets__save-btn:hover {
  border-color: var(--accent);
  color: var(--text-primary);
  box-shadow: 0 0 0 1px var(--accent-glow);
}

.graph-palette-presets__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-light) transparent;
}

.graph-palette-presets__empty {
  font-size: 12px;
  color: var(--text-muted);
  padding: 8px 4px;
}

.graph-palette-presets__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border-light) 65%, transparent);
  background: color-mix(in srgb, var(--bg-panel) 40%, transparent);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.graph-palette-presets__row:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border-light));
}

.graph-palette-presets__name-wrap {
  flex: 1;
  min-width: 0;
}

.graph-palette-presets__name {
  display: block;
  font-size: 13px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.graph-palette-presets__name-input--row {
  width: 100%;
  font-size: 13px;
  padding: 5px 8px;
  border-radius: 8px;
}

.graph-palette-presets__actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
}

.graph-palette-presets__btn {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.15s ease, background 0.15s ease;
}

.graph-palette-presets__btn:hover {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--bg-hover) 80%, transparent);
}

.graph-palette-presets__btn--apply {
  font-size: 12px;
  color: var(--accent);
  font-weight: 600;
}

.graph-palette-presets__btn--apply:hover {
  color: var(--text-primary);
}

.graph-palette-presets__btn--danger:hover {
  color: #e8a0a0;
  background: rgba(180, 60, 60, 0.12);
}

.graph-palette-presets__row .when-edit {
  display: none;
}

.graph-palette-presets__row--edit .when-normal {
  display: none;
}

.graph-palette-presets__row--edit .when-edit {
  display: inline-flex;
  align-items: center;
}

.graph-settings-popover__body .smodal__subsection {
  padding: 10px 10px 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border-light) 62%, transparent);
  background: color-mix(in srgb, var(--bg-panel) 36%, transparent);
  margin-bottom: 10px;
}

.graph-settings-category {
  border: 1px solid color-mix(in srgb, var(--border-light) 68%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-panel) 52%, transparent);
  margin: 10px 0;
  overflow: hidden;
  transition: border-color 0.28s ease, background 0.28s ease, box-shadow 0.3s ease;
}

.graph-settings-category:hover {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border-light));
  background: color-mix(in srgb, var(--bg-panel) 64%, transparent);
}

.graph-settings-category__summary {
  list-style: none;
  cursor: pointer;
  padding: 11px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-primary);
  border-bottom: 1px solid transparent;
  position: relative;
  transition: color 0.25s ease, background 0.25s ease, border-color 0.28s ease;
}

.graph-settings-category__summary:hover {
  background: 
color-mix(in srgb, #1f1e1c6b 72%, transparent);
}

.graph-settings-category__summary::-webkit-details-marker {
  display: none;
}

.graph-settings-category__summary::after {
  content: '▾';
  position: absolute;
  right: 10px;
  top: 9px;
  font-size: 12px;
  color: var(--text-muted);
  transition: transform 0.34s cubic-bezier(0.22, 0.7, 0.2, 1), color 0.25s ease;
}

.graph-settings-category[open] .graph-settings-category__summary {
  border-bottom-color: color-mix(in srgb, var(--border-light) 66%, transparent);
  color: var(--text-primary);
}

.graph-settings-category[open] .graph-settings-category__summary::after {
  transform: rotate(180deg);
  color: var(--text-secondary);
}

.graph-settings-category__content {
  display: grid;
  gap: 8px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0 12px;
  transition:
    max-height 0.5s cubic-bezier(0.22, 0.7, 0.2, 1),
    opacity 0.42s ease,
    padding 0.38s ease;
}

.graph-settings-category[open] .graph-settings-category__content {
  max-height: 2000px;
  opacity: 1;
  padding: 10px 12px 12px;
}

.graph-settings-section[hidden] {
  display: none !important;
}

.graph-view-flag {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 3px 8px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  transition: color .15s, border-color .15s, background .15s, opacity .15s;
  user-select: none;
  min-height: 24px;
  overflow: hidden;
}

.graph-view-flag:hover {
  background: transparent;
  border-color: transparent;
}

.graph-view-flag:hover .graph-view-flag__track {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border-light));
  box-shadow:
    0 0 0 1px var(--accent-glow),
    inset 0 1px 2px rgba(255, 255, 255, 0.08);
}

.graph-view-flag:hover .graph-view-flag__label {
  color: var(--text-secondary);
}

.graph-view-flag:hover .graph-view-flag__input:not(:checked) ~ .graph-view-flag__label--left,
.graph-view-flag:hover .graph-view-flag__input:checked ~ .graph-view-flag__label--right {
  color: var(--text-primary);
  filter: var(--ui-icon-glow);
}

.graph-view-flag__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}

.graph-view-flag__label {
  font-size: 11px;
  line-height: 1;
  letter-spacing: .03em;
  color: var(--text-muted);
  transition: color .15s ease;
}

.graph-view-flag__track {
  width: 42px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-light) 88%, transparent);
  background: color-mix(in srgb, var(--glass-veil) 65%, #ffffff 8%);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.08);
  display: inline-flex;
  align-items: center;
  padding: 2px;
  pointer-events: none;
}

.graph-view-flag__thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--text-primary) 90%, #ffffff 10%);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transform: translateX(0);
  transition: transform .2s ease;
}

.graph-view-flag__input:checked ~ .graph-view-flag__track .graph-view-flag__thumb {
  transform: translateX(18px);
}

.graph-view-flag__input:not(:checked) ~ .graph-view-flag__label--left {
  color: var(--text-primary);
}

.graph-view-flag__input:checked ~ .graph-view-flag__label--right {
  color: var(--text-primary);
}

.graph-view-flag__input:focus-visible ~ .graph-view-flag__track {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-glow) inset;
}

.graph-search__input {
  width: 100%;
  height: 28px;
  padding: 0 28px 0 10px;
  border: 1px solid var(--glass-input-border);
  border-radius: var(--radius-md);
  background: var(--glass-input-bg);
  color: var(--text-primary);
  font-size: 12px;
  font-family: inherit;
  outline: none;
  backdrop-filter: blur(10px) saturate(108%);
  -webkit-backdrop-filter: blur(10px) saturate(108%);
}

.graph-search__input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-glow);
}

.graph-search__clear {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s ease, filter 0.15s ease;
}

.graph-search__clear:hover {
  color: var(--text-primary);
  filter: var(--ui-icon-glow);
}

.graph-toolbar .graph-btn {
  pointer-events: auto;
}

.graph-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .15s ease, filter .15s ease;
}
.graph-btn:hover {
  color: var(--text-primary);
  filter: var(--ui-icon-glow);
}
.graph-btn--active {
  color: var(--accent);
  border: none;
  background: transparent;
  box-shadow: none;
  filter: var(--ui-icon-glow-strong);
}

.graph-btn--3d {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  width: 34px;
  color: var(--text-secondary);
}
.graph-btn--3d-active {
  color: var(--accent);
  border: none;
  background: transparent;
  box-shadow: none;
  filter: var(--ui-icon-glow-strong);
}

.graph-canvas--3d {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #080a0e;
  touch-action: none;
}

/* Canvas Three.js: без лишнего baseline-gap; размер px задаёт движок через resize() */
.graph-canvas--3d > canvas {
  display: block;
  margin: 0;
  padding: 0;
}

/* 2D канвас скрыт, пока активен 3D (размеры сохраняются для Cytoscape) */
.graph-canvas--behind-3d {
  visibility: hidden;
  pointer-events: none;
}

/* ─── Плавные переходы UI графа (лоадер, плашка) ─── */
#panel-graph {
  --graph-ui-duration: 0.52s;
  --graph-ui-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* 2D: без стекла на колонке графа — иначе сквозь неё видны радиальные градиенты body */
body:not(.graph-mode-3d) #panel-graph {
  background: var(--bg-base);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Полноэкранный лоадер 3D (CORTEX) — тайминг fade на html, fill локально */
.graph-3d-loader {
  --graph-loader-fill-duration: 1.05s;
  --graph-loader-fill-ease: cubic-bezier(0.33, 1, 0.32, 1);
  position: fixed;
  inset: 0;
  z-index: 200000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 7, 10, 0.94);
  backdrop-filter: blur(10px) saturate(1.15);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--graph-loader-fade-duration) var(--graph-loader-fade-ease),
    visibility 0s linear var(--graph-loader-fade-duration),
    backdrop-filter var(--graph-loader-fade-duration) var(--graph-loader-fade-ease),
    -webkit-backdrop-filter var(--graph-loader-fade-duration) var(--graph-loader-fade-ease);
}

.graph-3d-loader:not([hidden]) {
  display: flex;
}

.graph-3d-loader.graph-3d-loader--open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity var(--graph-loader-fade-duration) var(--graph-loader-fade-ease),
    visibility 0s linear 0s,
    backdrop-filter var(--graph-loader-fade-duration) var(--graph-loader-fade-ease),
    -webkit-backdrop-filter var(--graph-loader-fade-duration) var(--graph-loader-fade-ease);
}

@media (prefers-reduced-motion: reduce) {
  html {
    --graph-loader-fade-duration: 0.2s;
  }
  .graph-3d-loader {
    --graph-loader-fill-duration: 0.12s;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

.graph-3d-loader__inner {
  text-align: center;
  width: min(720px, 92vw);
  max-width: 720px;
  padding: 0 20px;
  box-sizing: border-box;
  transform: translateY(6px);
  opacity: 0;
  transition:
    transform var(--graph-loader-fade-duration) var(--graph-loader-fade-ease),
    opacity var(--graph-loader-fade-duration) var(--graph-loader-fade-ease);
}

.graph-3d-loader.graph-3d-loader--open .graph-3d-loader__inner {
  transform: translateY(0);
  opacity: 1;
}

.graph-3d-loader__brand {
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 700;
  letter-spacing: 0.28em;
  color: rgba(230, 236, 245, 0.92);
  margin-bottom: 1.25rem;
  text-indent: 0.28em;
}

.graph-3d-loader__bar-block {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 0.85rem;
}

.graph-3d-loader__track {
  flex: 1;
  min-width: 0;
  height: 5px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.09);
  overflow: hidden;
}

.graph-3d-loader__fill {
  height: 100%;
  width: 0%;
  border-radius: 5px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 55%, #6a8faf), var(--accent));
  transform-origin: left center;
  transition: width var(--graph-loader-fill-duration) var(--graph-loader-fill-ease);
  will-change: width;
}

.graph-3d-loader__pct {
  flex-shrink: 0;
  min-width: 3.25em;
  text-align: right;
  font-size: 13px;
  font-weight: 200;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
  color: rgba(210, 218, 232, 0.72);
  transition: color var(--graph-loader-fade-duration) var(--graph-loader-fade-ease);
}

.graph-3d-loader__status {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  color: rgba(185, 195, 212, 0.88);
  min-height: 2.6em;
  letter-spacing: 0.03em;
}

/* Плашка приветствия: только имя, в левой половине графа, высота 350px */
.graph-welcome-banner {
  position: absolute;
  left: 25%;
  top: 50%;
  transform: translate(-50%, calc(-50% + 8px));
  z-index: 21;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(420px, calc(50% - 24px));
  min-width: 0;
  height: 350px;
  max-height: min(350px, calc(100% - 56px));
  padding: 20px 44px 20px 20px;
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-edge);
  background: var(--glass-surface);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow: var(--glass-shadow), var(--glass-inset);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--graph-ui-duration) var(--graph-ui-ease),
    transform var(--graph-ui-duration) var(--graph-ui-ease),
    visibility 0s linear var(--graph-ui-duration);
}

.graph-welcome-banner:not([hidden]) {
  display: flex;
}

.graph-welcome-banner.graph-welcome-banner--visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, -50%);
  transition:
    opacity var(--graph-ui-duration) var(--graph-ui-ease),
    transform var(--graph-ui-duration) var(--graph-ui-ease),
    visibility 0s linear 0s;
}

.graph-welcome-banner.graph-welcome-banner--out {
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, calc(-50% - 6px));
  pointer-events: none;
  transition:
    opacity var(--graph-ui-duration) var(--graph-ui-ease),
    transform var(--graph-ui-duration) var(--graph-ui-ease),
    visibility 0s linear var(--graph-ui-duration);
}

.graph-welcome-banner__text {
  margin: 0;
  max-width: 100%;
  font-size: clamp(1.35rem, 3.2vw, 2rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-align: center;
  color: rgba(226, 232, 242, 0.96);
  word-break: break-word;
}

.graph-welcome-banner__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: rgba(200, 210, 225, 0.55);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.45s var(--graph-ui-ease),
    color 0.2s ease,
    filter 0.2s ease;
}

.graph-welcome-banner__close:hover {
  color: rgba(230, 238, 250, 0.95);
  filter: drop-shadow(0 0 6px rgba(200, 215, 245, 0.45)) drop-shadow(0 0 14px rgba(160, 190, 255, 0.25));
}

.graph-welcome-banner__close.graph-welcome-banner__close--shown {
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 767px) {
  .graph-welcome-banner {
    left: 50%;
    width: min(340px, calc(100% - 32px));
    min-width: 0;
    height: min(350px, calc(100% - 48px));
    max-height: min(350px, calc(100% - 48px));
    padding: 16px 40px 16px 16px;
  }
}

/* 3D controls hint overlay */
.graph3d-hint {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--glass-surface);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-size: 11px;
  color: var(--text-secondary);
  font-family: 'Segoe UI', system-ui, sans-serif;
  white-space: nowrap;
  pointer-events: none;
  z-index: 20;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow: var(--glass-shadow), var(--glass-inset);
  opacity: 1;
  transition: opacity 1.2s ease;
  user-select: none;
  pointer-events: none;
}
.graph3d-hint--fade { opacity: 0; }
.graph3d-hint__sep { opacity: 0.35; }
.graph3d-hint__item { letter-spacing: 0.01em; }

.graph-legend {
  position: absolute;
  bottom: 11px;
  left: calc(var(--icon-rail-w) + 16px);
  right: auto;
  transform: none;
  width: max-content;
  max-width: none;
  height: 32px;
  min-height: 32px;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  padding: 4px 6px;
  gap: 6px;
  z-index: 24;
  box-sizing: border-box;
  border-radius: var(--radius-md);
  background: var(--glass-surface);
  border: 1px solid var(--glass-edge);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow: var(--glass-shadow), var(--glass-inset);
  overflow-x: auto;
  scrollbar-width: none;
  opacity: 0.45;
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: auto;
}
.graph-legend:hover {
  opacity: 1;
}
.graph-legend::-webkit-scrollbar { display: none; }

.music-widget {
  
  position: fixed;
  top: calc(var(--topbar-h, 56px) + 12px);
  right: 14px;
  /* Выше колонки чата (100) и плавающего чата (220); вне #panel-graph — не режется stacking-context графа */
  z-index: 280;
  width: 120px;
  min-height: 30px;
  max-height: 30px;
  border-radius: 20px;
  border: 1px solid var(--glass-edge);
  background: color-mix(in srgb, var(--glass-surface) 94%, transparent);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow: var(--glass-shadow), var(--glass-inset);
  overflow: hidden;
  will-change: width, max-height;
  transition:
    width .22s cubic-bezier(.22,.61,.36,1),
    max-height .26s cubic-bezier(.22,.61,.36,1),
    border-radius .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}

.music-widget:hover,
.music-widget:focus-within {
  width: min(330px, calc(100vw - 120px));
  max-height: min(460px, calc(100vh - var(--topbar-h) - 42px));
  border-radius: calc(var(--radius-md) + 4px);
  background: color-mix(in srgb, var(--glass-surface) 98%, transparent);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.34), var(--glass-inset);
}

.music-widget__compact {
  position: absolute;
  inset: 0;
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  z-index: 1;
}

.music-widget__compact-label {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  cursor: pointer;
  padding: 0 10px;
  height: 28px;
  line-height: 28px;
  border-radius: 999px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 700;
  transition:
    color .24s cubic-bezier(.22,.61,.36,1),
    opacity .24s cubic-bezier(.22,.61,.36,1),
    transform .24s cubic-bezier(.22,.61,.36,1),
    text-shadow .24s cubic-bezier(.22,.61,.36,1);
}

.music-widget__compact-label:hover {
  color: var(--text-primary);
  transform: translateY(-1px);
  text-shadow: 0 0 12px color-mix(in srgb, var(--accent) 58%, transparent);
}

.music-widget__compact-label:active {
  transform: translateY(0) scale(.985);
}

.music-widget__expanded {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 10px 10px;
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-5px);
  transform-origin: top right;
  transition: max-height .24s ease, opacity .18s ease, transform .24s ease, padding-top .24s ease;
  will-change: transform, opacity;
}

.music-widget:hover .music-widget__expanded,
.music-widget:focus-within .music-widget__expanded {
  max-height: 420px;
  opacity: 1;
  pointer-events: auto;
  transform: none;
  padding-top: 6px;
}

.music-widget:hover .music-widget__compact,
.music-widget:focus-within .music-widget__compact {
  opacity: 0;
  transform: scale(.98);
  pointer-events: none;
}

.music-widget__compact {
  transition: opacity .16s ease, transform .2s ease;
}

.music-widget__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.music-widget__top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.music-widget__cover {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  flex: 0 0 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  border: 1px solid color-mix(in srgb, var(--glass-edge) 90%, transparent);
  background:
    radial-gradient(circle at 30% 24%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 58%),
    color-mix(in srgb, var(--glass-veil) 92%, transparent);
  backdrop-filter: blur(12px) saturate(115%);
  -webkit-backdrop-filter: blur(12px) saturate(115%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
  text-align: center;
  line-height: 1.15;
  padding-left: 2px;
}

.music-widget__cover--image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: transparent;
  text-shadow: none;
}

.music-widget__track-main {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.music-widget__track-title {
  font-size: 12px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.music-widget__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.music-widget__controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.music-widget__icon-btn,
.music-widget__play-btn,
.music-widget__favorite-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  border-radius: 0;
  font: inherit;
  cursor: pointer;
  transition:
    color .24s cubic-bezier(.22,.61,.36,1),
    opacity .24s cubic-bezier(.22,.61,.36,1),
    transform .24s cubic-bezier(.22,.61,.36,1),
    text-shadow .24s cubic-bezier(.22,.61,.36,1);
}

.music-widget__icon-btn {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.music-widget__play-btn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.music-widget__favorite-btn {
  width: 22px;
  height: 22px;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.music-widget__play-icon {
  font-size: 12px;
  line-height: 1;
}

.music-widget__icon-btn:hover,
.music-widget__play-btn:hover,
.music-widget__favorite-btn:hover {
  color: var(--text-primary);
  transform: translateY(-1px);
  text-shadow: 0 0 12px color-mix(in srgb, var(--accent) 58%, transparent);
}

.music-widget__icon-btn:active,
.music-widget__play-btn:active,
.music-widget__favorite-btn:active {
  transform: translateY(0) scale(.985);
}

.music-widget__favorite-btn[aria-pressed="true"] {
  color: color-mix(in srgb, var(--accent) 72%, #ffd1ec);
  text-shadow: 0 0 10px color-mix(in srgb, var(--accent) 52%, transparent);
}

.music-widget__progress-wrap {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.music-widget__progress {
  --progress-value: 0%;
  width: 100%;
  margin: 0;
  height: 6px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--glass-edge) 84%, transparent);
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--accent) 42%, rgba(255,255,255,.45)) 0%,
      color-mix(in srgb, var(--accent) 72%, rgba(255,255,255,.8)) var(--progress-value),
      color-mix(in srgb, var(--glass-veil) 92%, transparent) var(--progress-value),
      color-mix(in srgb, var(--glass-veil) 92%, transparent) 100%
    );
  box-shadow:
    inset 0 1px 3px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(255,255,255,.06);
  appearance: none;
  cursor: pointer;
  overflow: hidden;
}

.music-widget__progress::-webkit-slider-runnable-track {
  height: 6px;
  background: transparent;
}

.music-widget__progress::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  margin-top: -3px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--glass-edge) 78%, transparent);
  background: color-mix(in srgb, #fff 72%, var(--glass-veil));
  box-shadow: 0 0 0 3px rgba(255,255,255,.06), 0 2px 8px rgba(0,0,0,.35);
}

.music-widget__progress::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--glass-veil) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--glass-edge) 84%, transparent);
}

.music-widget__progress::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 66%, rgba(255,255,255,.8));
}

.music-widget__progress::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--glass-edge) 78%, transparent);
  background: color-mix(in srgb, #fff 72%, var(--glass-veil));
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}

.music-widget__times {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-muted);
}

.music-widget__volume {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  width: 74px;
  flex: 0 0 74px;
}

.music-widget__volume-icon {
  font-size: 12px;
  color: var(--text-muted);
  width: 16px;
  text-align: center;
}

.music-widget__volume-slider {
  --volume-value: 72%;
  width: 48px;
  margin: 0;
  height: 5px;
  appearance: none;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--glass-edge) 80%, transparent);
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--accent) 36%, rgba(255,255,255,.45)) 0%,
      color-mix(in srgb, var(--accent) 56%, rgba(255,255,255,.74)) var(--volume-value),
      color-mix(in srgb, var(--glass-veil) 90%, transparent) var(--volume-value),
      color-mix(in srgb, var(--glass-veil) 90%, transparent) 100%
    );
  box-shadow: inset 0 1px 2px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.05);
  cursor: pointer;
}

.music-widget__volume-slider::-webkit-slider-runnable-track {
  height: 5px;
  background: transparent;
}

.music-widget__volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  margin-top: -3px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--glass-edge) 74%, transparent);
  background: color-mix(in srgb, #fff 66%, var(--glass-veil));
}

.music-widget__volume-slider::-moz-range-track {
  height: 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--glass-veil) 90%, transparent);
}

.music-widget__volume-slider::-moz-range-progress {
  height: 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 52%, rgba(255,255,255,.7));
}

.music-widget__volume-slider::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--glass-edge) 74%, transparent);
  background: color-mix(in srgb, #fff 66%, var(--glass-veil));
}

.music-widget__playlist-toggle {
  appearance: none;
  border: 1px solid var(--glass-edge);
  border-radius: 10px;
  background: var(--glass-veil);
  color: var(--text-secondary);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  padding: 6px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.music-widget__playlist-toggle:hover {
  background: var(--glass-veil-hover);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--glass-edge));
}

.music-widget__playlist-chevron {
  font-size: 11px;
  transition: transform .2s ease;
}

.music-widget__playlist-toggle[aria-expanded="true"] .music-widget__playlist-chevron {
  transform: rotate(180deg);
}

.music-widget__playlist {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--glass-edge);
  border-radius: 10px;
  background: color-mix(in srgb, var(--glass-veil) 88%, transparent);
  max-height: 160px;
  overflow-y: auto;
}

.music-widget__playlist-item {
  width: 100%;
  appearance: none;
  border: none;
  border-bottom: 1px solid color-mix(in srgb, var(--glass-edge) 72%, transparent);
  background: transparent;
  color: var(--text-secondary);
  text-align: left;
  padding: 8px 10px;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  transition: background .14s ease, color .14s ease;
}

.music-widget__playlist li:last-child .music-widget__playlist-item {
  border-bottom: none;
}

.music-widget__playlist-item:hover {
  background: var(--glass-veil-hover);
  color: var(--text-primary);
}

.music-widget__playlist-item--active {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}

@media (max-width: 1024px) {
  .music-widget {
    display: none;
  }
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 3px 8px;
  border-radius: 12px;
  border: 1px solid transparent;
  transition: color .15s, border-color .15s, background .15s, opacity .15s;
  user-select: none;
}
.legend-item:hover {
  color: var(--text-secondary);
  background: rgb(0 0 0 / 34%);
  border-color: var(--glass-edge);
}
.legend-item--active {
  color: var(--text-primary);
  background: var(--glass-veil-active);
  border-color: var(--glass-edge);
}

/* ═══ ПРАВАЯ ПАНЕЛЬ (ДЕТАЛИ) ═════════════════════════════ */

.details-body {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-light) transparent;
  margin-bottom: 12px;
}

.details-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
  gap: 12px;
}
.details-empty__icon { font-size: 32px; opacity: .3; }
.details-empty p { font-size: 13px; line-height: 1.6; max-width: 220px; }

.details-content { padding: 0; }

/* ═══ ПАНЕЛЬ АНАЛИЗА ВОПРОСА ═════════════════════════════ */

.analysis-wrap { padding: 14px; display: flex; flex-direction: column; gap: 16px; }

.analysis-question {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.5;
  padding: 10px 12px;
  background: var(--bg-panel-alt);
  border-left: 3px solid var(--accent);
  border-radius: 0 6px 6px 0;
}

.analysis-section { display: flex; flex-direction: column; gap: 8px; }

.analysis-section__title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
}

.analysis-nodes { display: flex; flex-wrap: wrap; gap: 6px; }

.analysis-node-tag {
  --tag-color: var(--accent);
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--tag-color) 35%, var(--glass-edge));
  background: color-mix(in srgb, var(--tag-color) 12%, var(--glass-veil));
  color: var(--tag-color);
  cursor: pointer;
  animation: tag-shimmer 4s ease-in-out infinite;
  transition: opacity .15s;
}

@keyframes tag-shimmer {
  0%, 100% { filter: brightness(1)    drop-shadow(0 0 0px transparent); }
  50%       { filter: brightness(1.35) drop-shadow(0 0 5px currentColor); }
}

.analysis-node-tag:hover { opacity: .75; }

.analysis-transcript {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
  padding: 10px 12px;
  background: var(--bg-panel-alt);
  border-radius: 6px;
  border: 1px solid var(--border);
  white-space: pre-wrap;
}

.analysis-answer {
  font-size: 13.5px;
  color: var(--text-primary);
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
}

.analysis-date {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: -8px;
}

/* ═══ КАРТОЧКА УЗЛА ══════════════════════════════════════ */

.node-card { padding: 14px; display: flex; flex-direction: column; gap: 12px; }

.node-card__category {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--cat-color, var(--text-muted));
}

.node-card__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
}

.node-card__content {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.65;
}

.node-card__tags { display: flex; flex-wrap: wrap; gap: 4px; }
.node-card__tag {
  font-size: 11px;
  padding: 2px 8px;
  background: #fbfbfb1a;
  border-radius: 20px;
  color: var(--text-muted);
}

.node-card__connections { display: flex; flex-direction: column; gap: 4px; }
.node-card__conn-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
}
.node-card__conn-list { display: flex; flex-wrap: wrap; gap: 4px; }
.node-card__conn-item {
  font-size: 12px;
  padding: 3px 8px;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all .15s;
}
.node-card__conn-item:hover { color: var(--accent); border-color: var(--accent); }

/* ═══ КНОПКА АРХИВА ДИАЛОГА ═════════════════════════════ */

.chat-archive-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 12px;
  background: var(--bg-panel-alt);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: all .15s;
  text-align: left;
}
.chat-archive-btn:hover {
  border-color: var(--accent);
  color: var(--text-primary);
  background: var(--bg-hover);
}
.chat-archive-btn__icon { font-size: 14px; color: var(--accent); }
.chat-archive-btn__count {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg-hover);
  padding: 2px 7px;
  border-radius: 20px;
}

/* ═══ МОДАЛЬНОЕ ОКНО: АРХИВ ДИАЛОГА ═════════════════════ */

.cmodal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity .2s ease;
}
.cmodal-overlay--visible { opacity: 1; }

.cmodal {
  
  border: 1px solid var(--border-light);
  border-radius: 12px;
  width: 100%;
  max-width: 680px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(12px);
  transition: transform .2s ease;
}
.cmodal-overlay--visible .cmodal { transform: translateY(0); }

.cmodal__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.cmodal__icon { color: var(--accent); font-size: 15px; }
.cmodal__meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-left: auto;
}
.cmodal__close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 4px 6px;
  border-radius: 4px;
  transition: color .15s ease, filter .15s ease;
  flex-shrink: 0;
}
.cmodal__close:hover {
  color: var(--text-primary);
  filter: var(--ui-icon-glow);
}

.cmodal__topic {
  flex-shrink: 0;
  padding: 10px 16px;
  font-size: 13px;
  font-style: italic;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel-alt);
}

.cmodal__messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-light) transparent;
}

.cmodal-msg { display: flex; flex-direction: column; gap: 4px; }

.cmodal-msg__role {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.cmodal-msg--user .cmodal-msg__role { color: var(--accent); text-align: right; }
.cmodal-msg--assistant .cmodal-msg__role { color: var(--text-muted); }

.cmodal-msg__text {
  font-size: 13.5px;
  line-height: 1.6;
  padding: 9px 13px;
  border-radius: 10px;
  word-break: break-word;
}
.cmodal-msg--user .cmodal-msg__text {
  background: var(--bg-active);
  border: 1px solid var(--border-light);
  align-self: flex-end;
  border-bottom-right-radius: 3px;
  max-width: 85%;
}
.cmodal-msg--assistant .cmodal-msg__text {
  background: var(--bg-panel-alt);
  border: 1px solid var(--border);
  align-self: flex-start;
  border-bottom-left-radius: 3px;
  max-width: 90%;
  color: var(--text-secondary);
}

.cmodal__footer {
  flex-shrink: 0;
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  
}

.cmodal__action {
  flex: 1;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--border-light);
  background: var(--bg-panel-alt);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}

.cmodal__action:hover {
  border-color: var(--accent);
  color: var(--text-primary);
  background: var(--bg-hover);
}

.cmodal__action--primary {
  color: var(--text-primary);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-glow) inset;
}

.cmodal__action:active {
  transform: translateY(1px);
}

/* ═══ УВЕДОМЛЕНИЕ ════════════════════════════════════════ */

.toast {
  position: fixed;
  top: 20px;
  left: 20px;
  right: auto;
  bottom: auto;
  max-width: min(420px, calc(100vw - 40px));
  transform: translateY(-8px);
  background: var(--bg-active);
  border: 1px solid var(--border-light);
  color: var(--text-primary);
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.35;
  opacity: 0;
  transition: opacity 2s ease, transform 0.2s ease;
  pointer-events: none;
  z-index: 200;
  white-space: normal;
  word-break: break-word;
}
.toast--visible {
  opacity: 1;
  transform: translateY(0);
}
.toast--visible:not(.toast--fading) {
  transition: opacity 0.25s ease, transform 0.2s ease;
}
.toast--fading {
  opacity: 0;
  transform: translateY(0);
}

/* ═══ БЛОК АНАЛИЗА В КАРТОЧКЕ УЗЛА ══════════════════════ */

.node-analysis {
  border-top: 1px solid var(--border);
  margin-top: 4px;
}

.node-analysis__header {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 0 10px 0;
  cursor: pointer;
  user-select: none;
  transition: opacity .15s;
}
.node-analysis__header:hover { opacity: .75; }

.node-analysis__icon {
  font-size: 13px;
  color: var(--accent);
  filter: drop-shadow(0 0 4px var(--accent-glow));
}

.node-analysis__title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-secondary);
}

.node-analysis__arrow {
  margin-left: auto;
  font-size: 10px;
  color: var(--text-muted);
  transform: rotate(-90deg);
  transition: transform .15s;
}

.node-analysis__body {
  display: none;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 4px;
}

.node-analysis__scopes {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}

.node-analysis__scope-btn {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  background: #18171600;
  border: 1px solid var(--border-light);
  border-radius: 7px;
  color: var(--text-secondary);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: all .15s;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.node-analysis__scope-btn:hover {
  border-color: var(--accent);
  color: var(--text-primary);
  background: #18171600;
  box-shadow: 0 0 0 2px var(--accent-glow);
}
.node-analysis__scope-btn:active { opacity: .8; }

/* Кнопка запуска анализа в мобильной версии */
.btn-start-analysis {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--glass-surface);
  border: 1px solid var(--accent);
  border-radius: 10px;
  color: var(--accent);
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all .2s ease;
  box-shadow: 0 0 0 1px var(--accent-glow);
}
.btn-start-analysis:hover {
  background: var(--accent);
  color: var(--bg-base);
  box-shadow: 0 0 12px var(--accent-glow), 0 0 0 2px var(--accent-glow);
}
.btn-start-analysis:active {
  transform: scale(0.98);
  opacity: .9;
}

.node-analysis__scope-icon { font-size: 12px; color: var(--accent); flex-shrink: 0; }

.node-analysis__scope-count {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 10px;
  color: var(--text-muted);
  background: var(--bg-hover);
  padding: 1px 6px;
  border-radius: 10px;
}

.node-analysis__result {
  background: var(--bg-panel-alt);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  overflow: hidden;
}

.node-analysis__loading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  font-size: 12px;
  color: var(--text-muted);
}

.node-analysis__spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid var(--border-light);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  flex-shrink: 0;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.node-analysis__label {
  padding: 8px 14px 0 14px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--accent);
  opacity: .8;
}

.node-analysis__text {
  padding: 8px 14px 10px 14px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
}

.node-analysis__meta {
  padding: 0 14px 8px 14px;
  font-size: 10px;
  color: var(--text-muted);
}

.node-analysis__error {
  padding: 10px 14px;
  font-size: 12px;
  color: #e05b7a;
}

@keyframes rail-diary-spin {
  to { transform: rotate(360deg); }
}

.rail-diary-editor__spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 6px;
  vertical-align: -2px;
  border: 2px solid var(--border-light);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: rail-diary-spin 0.7s linear infinite;
}

/* ═══ ЕЖЕДНЕВНИК: КАРТОЧКА В ПРАВОЙ ПАНЕЛИ ══════════════ */

.diary-card {
  padding: 18px 18px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.diary-card__icon {
  font-size: 22px;
  color: var(--accent);
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 40%, transparent));
  line-height: 1;
}

.diary-card__date {
  font-size: 11px;
  color: var(--accent);
  text-transform: capitalize;
  letter-spacing: .02em;
}

.diary-card__text {
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--bg-panel-alt);
  border-left: 3px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 0 6px 6px 0;
  padding: 12px 14px;
}

.diary-card__analysis {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}

.diary-card__no-analysis {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
}

/* ═══ SCROLLBARS ══════════════════════════════════════════ */

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ═══ AUTH OVERLAY ════════════════════════════════════════ */

.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(720px 520px at 20% 15%, rgba(255, 255, 255, 0.04), transparent 65%),
    radial-gradient(560px 420px at 85% 90%, rgba(255, 255, 255, 0.03), transparent 70%),
    var(--bg-base);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}

.auth-overlay--visible {
  opacity: 1;
  pointer-events: auto;
}
.auth-overlay--hidden  { display: none; }

.auth-modal {
  width: 380px;
  max-width: calc(100vw - 32px);
  background: var(--glass-surface);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-xl);
  padding: 40px 32px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  box-shadow: var(--glass-shadow), var(--glass-inset);
}

.auth-landing-link {
  margin-top: 20px;
  font-size: 12px;
  color: var(--text-muted);
  text-decoration: none;
  letter-spacing: .03em;
  transition: color .2s;
}
.auth-landing-link:hover {
  color: var(--text-secondary);
}

.auth-modal__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.auth-modal__icon {
  font-size: 28px;
  color: var(--accent);
  filter: drop-shadow(0 0 4px var(--accent-glow));
}

.auth-modal__title {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--text-primary);
  animation: none;
}

.auth-modal__subtitle {
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 28px;
}

.auth-tabs {
  display: flex;
  gap: 0;
  width: 100%;
  margin-bottom: 24px;
  background: var(--glass-veil);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-md);
  padding: 3px;
}

.auth-tab {
  flex: 1;
  padding: 8px 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: background .2s, color .2s;
}

.auth-tab--active {
  background: var(--glass-veil-active);
  color: var(--text-primary);
}

.auth-tab:hover:not(.auth-tab--active) { color: var(--text-secondary); }

.auth-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.auth-form--hidden { display: none; }

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.auth-label {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.auth-input {
  background: var(--glass-input-bg);
  border: 1px solid var(--glass-input-border);
  border-radius: var(--radius-md);
  padding: 11px 14px;
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  backdrop-filter: blur(10px) saturate(108%);
  -webkit-backdrop-filter: blur(10px) saturate(108%);
  transition: border-color .2s, box-shadow .2s, background .2s;
}

.auth-input:focus {
  border-color: var(--accent);
  background: var(--glass-veil-hover);
  box-shadow: 0 0 0 2px var(--accent-glow);
}

.auth-input::placeholder { color: var(--text-muted); }

.auth-error {
  font-size: 12px;
  color: var(--status-error);
  min-height: 16px;
  text-align: center;
}

.auth-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--glass-veil-active);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-md);
  padding: 12px 0;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background .2s, box-shadow .25s, transform .15s;
  margin-top: 4px;
  box-shadow: var(--glass-shadow), var(--glass-inset);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
}

.auth-submit:hover {
  background: color-mix(in srgb, var(--glass-veil-active) 85%, #fff 8%);
  box-shadow: 0 0 0 1px var(--accent-glow) inset, var(--glass-shadow);
  color: var(--text-primary);
  transform: translateY(-1px);
}
.auth-submit:active  { transform: translateY(0); }
.auth-submit:disabled { opacity: .4; cursor: not-allowed; transform: none; }

.auth-submit__icon { font-size: 16px; }

/* ─── Remember me checkbox ─── */

.auth-remember {
  margin: -2px 0 10px;
}

.auth-remember__label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.auth-remember__input {
  display: none;
}

.auth-remember__box {
  width: 16px;
  height: 16px;
  min-width: 16px;
  border: 1.5px solid var(--border);
  border-radius: 4px;
  background: var(--glass-input-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .15s, background .15s;
}

.auth-remember__box::after {
  content: '';
  width: 9px;
  height: 5px;
  border-left: 2px solid transparent;
  border-bottom: 2px solid transparent;
  transform: rotate(-45deg) translate(1px, -1px);
  transition: border-color .15s;
}

.auth-remember__input:checked + .auth-remember__box {
  background: var(--accent);
  border-color: var(--accent);
}

.auth-remember__input:checked + .auth-remember__box::after {
  border-left-color: #fff;
  border-bottom-color: #fff;
}

.auth-remember__text {
  font-size: 13px;
  color: var(--text-secondary);
}

/* ─── Topbar actions ─── */

.topbar__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ─── Уведомления (колокольчик) ─── */

.topbar__notif-wrap {
  position: relative;
  flex-shrink: 0;
}

.topbar__inbox-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.topbar__notif-btn {
  position: relative;
  background: transparent;
  border: none;
  border-radius: 12px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  font-family: inherit;
  color: var(--text-muted);
  transition: color 0.15s ease;
}

.topbar__notif-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
}

.topbar__notif-svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: filter 0.15s ease;
}

.topbar__notif-btn:hover {
  color: var(--text-primary);
}

.topbar__notif-btn:hover .topbar__notif-svg {
  filter: var(--ui-icon-glow);
}

.topbar__notif-btn[aria-expanded="true"] {
  color: var(--text-primary);
}

.topbar__notif-btn[aria-expanded="true"] .topbar__notif-svg {
  filter: var(--ui-icon-glow-strong);
}

/* Непрочитанные «Мысли»: жёлтое ламповое свечение иконки */
.topbar__notif-btn.topbar__notif-btn--thought-unread {
  border: none;
  box-shadow: none;
}

.topbar__notif-btn.topbar__notif-btn--thought-unread .topbar__notif-svg {
  color: #ffe9a0;
  animation: topbar-thought-lamp-glow 2.2s ease-in-out infinite;
}

@keyframes topbar-thought-lamp-glow {
  0%,
  100% {
    filter:
      drop-shadow(0 0 1px rgba(255, 236, 180, 0.95))
      drop-shadow(0 0 6px rgba(255, 210, 95, 0.9))
      drop-shadow(0 0 14px rgba(255, 175, 50, 0.55));
  }
  50% {
    filter:
      drop-shadow(0 0 2px rgba(255, 248, 220, 1))
      drop-shadow(0 0 10px rgba(255, 220, 120, 0.95))
      drop-shadow(0 0 20px rgba(255, 185, 60, 0.65));
  }
}

@media (prefers-reduced-motion: reduce) {
  .topbar__notif-btn.topbar__notif-btn--thought-unread .topbar__notif-svg {
    animation: none;
    filter:
      drop-shadow(0 0 1px rgba(255, 236, 180, 0.95))
      drop-shadow(0 0 6px rgba(255, 210, 95, 0.85))
      drop-shadow(0 0 14px rgba(255, 175, 50, 0.5));
  }
}

.topbar__notif-btn.topbar__notif-btn--thought-unread:hover {
  color: var(--text-primary);
}

.topbar__notif-btn.topbar__notif-btn--thought-unread[aria-expanded="true"] {
  box-shadow: none;
}

.topbar__notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--accent);
  color: #0a0c10;
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--bg-base) 92%, transparent);
}

.topbar__notif-badge--dot {
  min-width: 10px;
  width: 10px;
  height: 10px;
  padding: 0;
  line-height: 0;
  font-size: 0;
  top: 2px;
  right: 2px;
}

body.notif-center-body-lock {
  overflow: hidden;
}

@keyframes notif-center-backdrop-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes notif-center-panel-in {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.notif-center {
  position: fixed;
  inset: 0;
  z-index: 11000;
  display: none;
  align-items: flex-start;
  justify-content: flex-end;
  padding: calc(var(--topbar-h) + 10px) 16px 20px;
  /* Клики в зоне шапки (без бэкдропа) доходят до топбара */
  pointer-events: none;
}

.notif-center.notif-center--open {
  display: flex;
}

.notif-center__backdrop {
  position: absolute;
  top: var(--topbar-h);
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: rgba(4, 6, 11, 0.58);
  backdrop-filter: blur(6px) saturate(108%);
  -webkit-backdrop-filter: blur(6px) saturate(108%);
  cursor: pointer;
  font-size: 0;
  color: transparent;
  pointer-events: auto;
  transform: translateZ(0);
}

.notif-center.notif-center--open .notif-center__backdrop {
  animation: notif-center-backdrop-in 0.28s cubic-bezier(0.32, 0.72, 0, 1) both;
}

body.theme-light .notif-center__backdrop {
  background: rgba(16, 20, 30, 0.48);
}

.notif-panel {
  position: relative;
  z-index: 1;
  flex: 0 1 auto;
  min-height: 0;
  width: min(400px, calc(100vw - 32px));
  max-height: min(86vh, 720px);
  display: none;
  flex-direction: column;
  background: var(--glass-surface);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-md);
  box-shadow: var(--glass-shadow), var(--glass-inset);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  overflow: hidden;
  pointer-events: auto;
  transform: translateZ(0);
}

.notif-center.notif-center--open .notif-panel {
  display: flex;
  animation: notif-center-panel-in 0.34s cubic-bezier(0.32, 0.72, 0, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .notif-center.notif-center--open .notif-center__backdrop,
  .notif-center.notif-center--open .notif-panel {
    animation: none !important;
  }
}

@media (max-width: 1024px) {
  .notif-center {
    padding: calc(var(--mobile-topbar-h) + 10px) 16px 20px;
  }

  .notif-center__backdrop {
    top: var(--mobile-topbar-h);
  }
}

.notif-panel__head {
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.notif-panel__read-all {
  background: transparent;
  border: none;
  color: var(--accent);
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  padding: 4px 6px;
  border-radius: 8px;
}

.notif-panel__read-all:hover {
  background: var(--glass-veil-hover);
}

.notif-panel__list {
  overflow-y: auto;
  flex: 1;
  padding: 6px;
}

.notif-panel__empty {
  padding: 16px 12px;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}

.notif-item {
  position: relative;
  text-align: left;
  width: 100%;
  padding: 10px 10px 10px 12px;
  margin-bottom: 6px;
  border: 1px solid color-mix(in srgb, var(--glass-edge) 68%, transparent);
  border-radius: 10px;
  /* Как фон чата (.chat-panel), но ещё легче — больше «воздуха» сквозь панель */
  background: color-mix(in srgb, var(--glass-chat-body) 48%, transparent);
  box-shadow:
    0 4px 18px rgba(0, 0, 0, 0.12),
    var(--glass-inset);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  transition:
    background 0.15s,
    border-color 0.15s,
    box-shadow 0.15s,
    backdrop-filter 0.15s,
    -webkit-backdrop-filter 0.15s;
}

.notif-item__inner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
}

.notif-item__status {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}

.notif-item__spinner {
  width: 20px;
  height: 20px;
  animation: notif-spin 0.75s linear infinite;
}

.notif-item__spinner-track {
  stroke: color-mix(in srgb, var(--text-muted) 45%, var(--border-light));
  opacity: 0.55;
}

.notif-item__spinner-head {
  stroke: var(--accent);
  transform-origin: center;
}

@keyframes notif-spin {
  to {
    transform: rotate(360deg);
  }
}

.notif-item__check {
  width: 20px;
  height: 20px;
  color: #3ecf8e;
}

.notif-item__err {
  width: 18px;
  height: 18px;
  color: #e05b7a;
}

.notif-item__col {
  flex: 1;
  min-width: 0;
}

.notif-item__title-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 4px;
}

.notif-item:hover {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--glass-edge));
  background: color-mix(in srgb, var(--glass-chat-body) 78%, transparent);
  box-shadow:
    0 6px 22px rgba(0, 0, 0, 0.14),
    0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent),
    var(--glass-inset);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
}

/* Фоновая задача: лёгкий акцент, без «синего» */
.notif-item--with-job {
  border-color: color-mix(in srgb, var(--accent) 26%, var(--glass-edge));
  background: color-mix(
    in srgb,
    var(--accent) 5%,
    color-mix(in srgb, var(--glass-chat-body) 50%, transparent)
  );
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
}

.notif-item--with-job .notif-item__progress-fill {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--accent) 72%, #8892aa),
    var(--accent)
  );
}

.notif-item--unread {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--glass-edge));
  box-shadow:
    0 4px 18px rgba(0, 0, 0, 0.12),
    0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent),
    var(--glass-inset);
}

.notif-item--unread.notif-item--with-job {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--glass-edge));
  background: color-mix(
    in srgb,
    var(--accent) 8%,
    color-mix(in srgb, var(--glass-chat-body) 58%, transparent)
  );
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
}

/* Светлая тема: тот же приём, что у виджета-нуджа чата */
body.theme-light .notif-item {
  border-color: color-mix(in srgb, var(--glass-edge) 88%, transparent);
  background: color-mix(in srgb, var(--glass-chat-body) 56%, transparent);
  box-shadow:
    0 4px 16px rgba(16, 22, 40, 0.08),
    var(--glass-inset);
}

body.theme-light .notif-item:hover {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--glass-edge));
  background: color-mix(in srgb, var(--glass-chat-body) 82%, transparent);
  box-shadow:
    0 6px 20px rgba(16, 22, 40, 0.1),
    0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent),
    var(--glass-inset);
}

body.theme-light .notif-item--with-job {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--glass-edge));
  background: color-mix(
    in srgb,
    var(--accent) 6%,
    color-mix(in srgb, var(--glass-chat-body) 58%, transparent)
  );
}

body.theme-light .notif-item--unread {
  box-shadow:
    0 4px 16px rgba(16, 22, 40, 0.08),
    0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent),
    var(--glass-inset);
}

body.theme-light .notif-item--unread.notif-item--with-job {
  background: color-mix(
    in srgb,
    var(--accent) 9%,
    color-mix(in srgb, var(--glass-chat-body) 66%, transparent)
  );
}

.notif-item__dot {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 50%;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--accent) 88%, #fff),
    color-mix(in srgb, var(--accent) 55%, var(--text-muted))
  );
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}

.notif-item__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
  min-width: 0;
}

.notif-item__body {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
  max-height: 4.2em;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  white-space: pre-wrap;
  word-break: break-word;
}

.notif-item__stage {
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-secondary);
}

.notif-item__progress {
  margin-top: 4px;
}

.notif-item__progress-track {
  width: 100%;
  height: 6px;
  border-radius: 99px;
  overflow: hidden;
  background: var(--border-light);
}

.notif-item__progress-fill {
  height: 100%;
  border-radius: 99px;
  background: var(--accent);
  transition: width 0.2s ease;
}

.notif-item__metrics {
  margin-top: 4px;
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notif-item__time {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 6px;
}

/* Модалка: полное содержимое уведомления */
.notif-detail-overlay {
  position: fixed;
  inset: 0;
  z-index: 11150;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

.notif-detail-overlay.notif-detail-overlay--open {
  display: flex;
}

#thought-detail-overlay.notif-detail-overlay--open {
  z-index: 11155;
}

.notif-detail-overlay__backdrop {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: rgba(3, 5, 10, 0.45);
  backdrop-filter: blur(4px) saturate(106%);
  -webkit-backdrop-filter: blur(4px) saturate(106%);
  cursor: pointer;
  font-size: 0;
  color: transparent;
}

body.theme-light .notif-detail-overlay__backdrop {
  background: rgba(12, 16, 26, 0.4);
}

.notif-detail-overlay__dialog {
  position: relative;
  z-index: 1;
  width: min(520px, calc(100vw - 32px));
  max-height: min(82vh, 680px);
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--glass-surface);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow), var(--glass-inset);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  overflow: hidden;
}

.notif-detail-overlay__head {
  gap: 12px;
}

.notif-detail-overlay__title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.35;
  flex: 1;
  min-width: 0;
}

.notif-detail-overlay__close {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  font-family: inherit;
  transition: color 0.15s ease, filter 0.15s ease;
}

.notif-detail-overlay__close:hover {
  color: var(--text-primary);
  filter: var(--ui-icon-glow);
}

.notif-detail-overlay__meta {
  padding: 8px 16px 0;
  font-size: 12px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.notif-detail-overlay__body {
  padding: 12px 16px 16px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  word-break: break-word;
}

.notif-detail-overlay__body .notif-detail-plain {
  white-space: pre-wrap;
  margin-bottom: 4px;
}

.notif-detail-node-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 10px 0 8px;
  border-top: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
}

.notif-detail-node-row__title {
  flex: 1;
  min-width: min(200px, 100%);
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-primary);
}

.notif-detail-node-row__goto {
  flex-shrink: 0;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border-light));
  background: color-mix(in srgb, var(--accent) 10%, rgba(255, 255, 255, 0.04));
  color: var(--accent);
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s,
    color 0.15s,
    box-shadow 0.15s;
}

.notif-detail-node-row__goto:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, rgba(255, 255, 255, 0.06));
  color: var(--text-primary);
  box-shadow: 0 0 0 1px var(--accent-glow) inset;
}

.notif-detail-overlay__actions {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 16px 14px;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-panel-alt, var(--bg-hover)) 55%, transparent);
}

.notif-detail-overlay__actions[hidden] {
  display: none !important;
}

.notif-detail-overlay__refresh {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border-light));
  background: color-mix(in srgb, var(--accent) 14%, rgba(255, 255, 255, 0.04));
  color: var(--text-primary);
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s,
    box-shadow 0.15s,
    opacity 0.15s;
}

.notif-detail-overlay__refresh:hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 22%, rgba(255, 255, 255, 0.06));
  box-shadow: 0 0 0 1px var(--accent-glow) inset;
}

.notif-detail-overlay__refresh:disabled {
  opacity: 0.55;
  cursor: default;
}

.topbar__logout-btn {
  background: transparent;
  border: none;
  border-radius: 10px;
  padding: 4px 10px;
  color: var(--text-muted);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: color .15s ease, filter .15s ease;
}

.topbar__logout-btn:hover {
  color: var(--text-primary);
  filter: var(--ui-icon-glow);
}

/* ─── Settings gear button ─── */

.topbar__settings-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 10px;
  padding: 4px 8px;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1;
  font-family: inherit;
  cursor: pointer;
  transition:
    color .15s ease,
    filter .15s ease,
    transform .2s;
}

.topbar__settings-btn:hover {
  color: var(--text-primary);
  filter: var(--ui-icon-glow);
  transform: rotate(45deg);
}

/* ─── Mobile burger menu (hidden on desktop) ─── */
.mobile-menu-backdrop { display: none; }
.mobile-menu { display: none; }

/* ─── Более плавные, но быстрые анимации UI ─── */
.topbar,
.panel,
.panel__header,
.graph-legend,
.bottom-nav,
.drawer-backdrop,
.smodal,
.cmodal,
.pin-modal,
.mobile-menu {
  transition: background var(--ui-mid) ease, border-color var(--ui-mid) ease, box-shadow var(--ui-mid) ease, transform var(--ui-mid) ease, opacity var(--ui-mid) ease;
}

.topbar button,
.panel button,
.smodal button,
.cmodal button,
.pin-modal button,
.mobile-menu button,
input,
textarea,
select,
.tree-node,
.tree-subnode,
.question-item,
.legend-item,
.bottom-nav__item {
  transition: background var(--ui-fast) ease, color var(--ui-fast) ease, border-color var(--ui-fast) ease, box-shadow var(--ui-fast) ease, opacity var(--ui-fast) ease, transform var(--ui-fast) ease;
}

/* ─── Более мягкие скругления кнопок интерфейса ─── */
.topbar__search-open-btn,
.topbar__settings-btn,
.topbar__logout-btn,
.panel__toggle,
.graph-btn,
.chat-archive-btn,
.chat-archive-btn__count,
.cmodal__close,
.cmodal__action,
.smodal__close,
.smodal__tab,
.smodal__pin-save-btn,
.smodal__pin-clear-btn,
.pin-modal__btn,
.bottom-sheet-close,
.bottom-nav__item {
  border-radius: 12px;
}

/* ═══════════════════════════════════════════════════════════
   СВЕТЛАЯ ТЕМА
═══════════════════════════════════════════════════════════ */

body.theme-light {
  --bg-base:       #eef1f7;
 
  --bg-panel-alt:  #f4f6fb;
  --bg-hover:      #e8eaf4;
  --bg-active:     #dde1f0;
  --border:        #cdd2e4;
  --border-light:  #b8bdd4;
  --text-primary:  #1a1e2e;
  --text-secondary:#4a5068;
  --text-muted:    #7a83a0;
  --accent:        #3d72d9;
  --accent-glow:   #3d72d933;
  --glass-chrome-blur: 28px;
  --glass-chrome-saturate: 125%;
  --glass-chrome: color-mix(in srgb, var(--bg-panel) 34%, transparent);
  --glass-chrome-topbar: color-mix(in srgb, var(--text-primary) 9%, var(--glass-chrome));
  --glass-chrome-header: color-mix(in srgb, var(--bg-panel) 52%, transparent);
  --glass-chrome-raised: color-mix(in srgb, var(--bg-panel) 44%, transparent);
  --glass-veil: rgba(0, 0, 0, 0.04);
  --glass-veil-hover: rgba(0, 0, 0, 0.07);
  --glass-veil-active: rgba(0, 0, 0, 0.1);
  --glass-veil-strong: rgba(0, 0, 0, 0.06);
  --overlay-scrim: rgba(16, 22, 40, 0.38);
  --overlay-scrim-heavy: rgba(16, 22, 40, 0.52);
  --glass-input-bg: color-mix(in srgb, #fff 92%, rgba(0, 0, 0, 0.04));
  --ui-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.25L6 7.75L9.5 4.25' fill='none' stroke='%235a6074' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

body.theme-light .topbar {
  
  border-bottom-color: var(--border);
}

body.theme-light .panel {
  
  border-color: var(--border);
}

body.theme-light .graph-parallax {
  background-image: none;
  background-color: #eef1f7;
}

/* ═══════════════════════════════════════════════════════════
   МАТОВОЕ СТЕКЛО
═══════════════════════════════════════════════════════════ */

body.theme-glass {
  --bg-base:       #070809;
  
  --bg-panel-alt:  rgba(43, 46, 54, 0.30);
  --bg-hover:      rgba(255, 255, 255, 0.11);
  --bg-active:     rgba(255, 255, 255, 0.17);
  --border:        rgba(255, 255, 255, 0.12);
  --border-light:  rgba(255, 255, 255, 0.20);
  --text-primary:  #eceef1;
  --text-secondary:#d3d7dd;
  --text-muted:    #aeb4bd;
  --accent:        #d7dbe0;
  --accent-glow:   rgba(221, 225, 230, 0.24);
}

body.theme-glass .graph-canvas {
  /* Важно: не используем shorthand `background`, иначе он сбрасывает background-image. */
  background-color: var(--bg-base);
}

body.theme-glass .graph-canvas--3d {
  background: transparent;
}

body.theme-glass .graph-parallax {
  filter: blur(14px) saturate(90%) brightness(.78);
}

body.theme-glass .topbar {
  background: var(--glass-chrome-topbar);
  backdrop-filter: blur(var(--glass-chrome-blur)) saturate(var(--glass-chrome-saturate));
  -webkit-backdrop-filter: blur(var(--glass-chrome-blur)) saturate(var(--glass-chrome-saturate));
  border-color: var(--glass-edge);
}

body.theme-glass .icon-rail {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--text-primary) 3%, transparent) 0%,
      transparent 52%
    ),
    var(--glass-chrome-topbar);
  backdrop-filter: blur(var(--glass-chrome-blur)) saturate(var(--glass-chrome-saturate));
  -webkit-backdrop-filter: blur(var(--glass-chrome-blur)) saturate(var(--glass-chrome-saturate));
  border-color: var(--glass-edge);
}

body.theme-glass .panel--left {
  background: var(--glass-chrome);
  backdrop-filter: blur(var(--glass-chrome-blur)) saturate(var(--glass-chrome-saturate));
  -webkit-backdrop-filter: blur(var(--glass-chrome-blur)) saturate(var(--glass-chrome-saturate));
  border-color: var(--glass-edge);
}

body.theme-glass .panel--chat {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: var(--glass-edge);
}

body.theme-glass .panel--chat .chat-panel {
  background: var(--glass-chat-body);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
}

body.theme-glass .panel--left .panel__header {
  background: var(--glass-chrome-header);
}

body.theme-glass .panel:not(.panel--left):not(.panel--chat),
body.theme-glass .graph-legend,
body.theme-glass .smodal,
body.theme-glass .pin-modal,
body.theme-glass .bottom-nav {
  background: var(--glass-surface);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border-color: var(--glass-edge);
}

body.theme-glass .panel--right .panel__header {
  background: var(--glass-header);
}

body.theme-glass .chat-history-drawer {
  background: var(--glass-chat-body);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border-color: var(--glass-edge);
}

body.theme-glass .chat-history-drawer__head {
  background: var(--glass-header);
}

body.theme-glass .chat-history-item:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--border-light);
  backdrop-filter: blur(12px) saturate(106%);
  -webkit-backdrop-filter: blur(12px) saturate(106%);
}

body.theme-glass .chat-history-item--active {
  background: rgba(255, 255, 255, 0.09);
  border-color: color-mix(in srgb, var(--accent) 42%, var(--glass-edge));
  backdrop-filter: blur(14px) saturate(112%);
  -webkit-backdrop-filter: blur(14px) saturate(112%);
}

body.theme-glass .topbar__search-open-btn,
body.theme-glass .search-panel__input,
body.theme-glass .graph-search__input,
body.theme-glass .tree-node:hover,
body.theme-glass .tree-subnode:hover,
body.theme-glass .question-item:hover,
body.theme-glass .legend-item:hover,
body.theme-glass .smodal__theme-pill,
body.theme-glass .smodal__toggle-track,
body.theme-glass .smodal__color-input,
body.theme-glass .smodal__input,
body.theme-glass .pin-modal__input,
body.theme-glass .pin-modal__btn--cancel,
body.theme-glass .pin-modal__btn--ok,
body.theme-glass .node-card__personal-btn {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--border-light);
  backdrop-filter: blur(12px) saturate(106%);
  -webkit-backdrop-filter: blur(12px) saturate(106%);
}

/* Как у .smodal__input в theme-glass, без background: — иначе пропадёт шеврон */
body.theme-glass .smodal__select {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: var(--border-light);
  backdrop-filter: blur(12px) saturate(106%);
  -webkit-backdrop-filter: blur(12px) saturate(106%);
}

body.theme-glass .smodal__tab,
body.theme-glass .bottom-nav__item:active {
  background: #ffffff10;
}

body.theme-glass .smodal-overlay {
  
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}



body.theme-glass .search-panel {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--border-light);
}


body.theme-glass .cmodal-overlay {

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Архив диалога: читаемый непрозрачный контент */
body.theme-glass .cmodal {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--border-light);
}

body.theme-glass .cmodal__topic {
  background: var(--bg-panel-alt);
}

body.theme-glass .cmodal__messages {
  background: var(--bg-panel);
}

body.theme-glass .cmodal__footer {
  background: var(--bg-panel);
  border-top-color: var(--border);
}

body.theme-glass .cmodal__action {
  background: var(--bg-panel-alt);
  border-color: var(--border-light);
}

body.theme-glass .cmodal-msg--user .cmodal-msg__text {
  background: var(--bg-panel-alt);
  border-color: var(--border-light);
  color: var(--text-primary);
}

body.theme-glass .cmodal-msg--assistant .cmodal-msg__text {
  
  border-color: var(--border);
  color: var(--text-secondary);
}

body.theme-glass .drawer-backdrop {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

body.theme-glass .drawer-backdrop.drawer-backdrop--details {

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ═══════════════════════════════════════════════════════════
   МОДАЛ НАСТРОЕК
═══════════════════════════════════════════════════════════ */

.smodal-overlay {
  position: fixed;
  inset: 0;
  background: #00000077;
  backdrop-filter: blur(4px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .22s ease;
}

.smodal-overlay--visible { opacity: 1; }

.smodal {
  
  border: 1px solid var(--border-light);
  border-radius: 12px;
  width: 420px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 64px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px #00000066;
  transform: translateY(12px);
  transition: transform .22s ease;
}

.smodal-overlay--visible .smodal { transform: translateY(0); }

.broadcast-patch-overlay .smodal {
  width: min(620px, calc(100vw - 32px));
  padding: 25px;
}

.broadcast-patch {
  display: flex;
  flex-direction: column;
}

.broadcast-patch__header {
  padding: 22px 26px 16px;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(560px 220px at 20% 0%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 60%),
    radial-gradient(520px 240px at 92% 30%, rgba(255, 255, 255, 0.08), transparent 62%),
    var(--glass-header);
}

.broadcast-patch__kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text-muted) 82%, var(--accent));
  margin-bottom: 6px;
}

.broadcast-patch__title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.broadcast-patch__subtitle {
  font-size: 13px;
  color: var(--text-secondary);
}

.broadcast-patch__body {
  padding: 16px 26px 20px;
}

.broadcast-patch__lead {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.broadcast-patch__lead strong {
  color: var(--text-primary);
  font-weight: 700;
}

.broadcast-patch__bullets {
  margin: 10px 0 14px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.broadcast-patch__bullets li {
  display: flex;
  gap: 10px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

.broadcast-patch__bullet-dot {
  flex: 0 0 auto;
  width: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  color: color-mix(in srgb, var(--accent) 88%, white 8%);
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.08));
}

.broadcast-patch__bullet-dot::before {
  content: '◈';
  font-size: 14px;
  line-height: 1;
}

.broadcast-patch__bullet-text {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.broadcast-patch__footer-note {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-top: 10px;
}

.broadcast-patch__footer-note b {
  color: var(--text-primary);
  font-weight: 800;
}

.broadcast-patch__actions {
  padding: 0 26px 22px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.broadcast-patch__ok {
  min-width: 140px;
}

.broadcast-patch--splash {
  width: min(520px, calc(100vw - 32px));
}

.broadcast-patch__splash {
  width: 100%;
  min-height: min(52vh, 420px);
  display: grid;
  place-items: center;
  padding: 0;
}

.broadcast-patch__splash-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  border: none;
  box-shadow: none;
  background: transparent;
}

.smodal__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: .04em;
}

.smodal__close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: color .15s ease, filter .15s ease;
}
.smodal__close:hover {
  color: var(--text-primary);
  filter: var(--ui-icon-glow);
}

/* Tabs */
.smodal__tabs {
  display: flex;
  gap: 0;
  padding: 10px 16px 0;
  border-bottom: 1px solid var(--border);
}

.smodal__tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 6px 16px 10px;
  color: var(--text-muted);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: color .15s, border-color .15s;
  margin-bottom: -1px;
}
.smodal__tab:hover { color: var(--text-secondary); }
.smodal__tab--active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

/* Body */
.smodal__body {
  padding: 8px 0 16px;
  overflow-y: auto;
  flex: 1;
}

/* Section */
.smodal__section {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}
.smodal__section:last-child { border-bottom: none; }

.smodal__section-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 12px;
}

.smodal__subsection + .smodal__subsection {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}

.smodal__subsection-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}

/* Theme switcher */
.smodal__theme-switch {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.smodal__theme-option {
  position: relative;
}

.smodal__theme-option input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.smodal__theme-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border-light);
  background: var(--bg-panel-alt);
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  transition: all .16s;
  user-select: none;
}

.smodal__theme-option input:checked + .smodal__theme-pill {
  border-color: var(--accent);
  color: var(--text-primary);
  background: var(--ui-gray-mid);
  box-shadow: 0 0 0 2px var(--accent-glow);
}

.smodal__theme-option:hover .smodal__theme-pill {
  border-color: var(--accent);
}

/* Color rows */
.smodal__color-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 0;
}
.smodal__color-row + .smodal__color-row {
  border-top: 1px solid var(--border);
}
.smodal__color-label {
  font-size: 13px;
  color: var(--text-secondary);
}
.smodal__color-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.smodal__color-input {
  width: 36px;
  height: 28px;
  padding: 2px;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  background: var(--bg-panel-alt);
  cursor: pointer;
}
.smodal__color-hex {
  font-size: 12px;
  color: var(--text-muted);
  font-family: 'Consolas', monospace;
  min-width: 58px;
}

.smodal__color-wrap--enhanced {
  position: relative;
  align-items: center;
  gap: 10px;
}

.smodal__color-swatch {
  --swatch: #5fd1ff;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  background: conic-gradient(from 210deg, #f0ebe3, #c9c4bc, #f0ebe3);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--border-light) 88%, transparent),
    0 0 0 4px color-mix(in srgb, var(--bg-panel) 70%, transparent),
    0 6px 18px rgba(0, 0, 0, 0.35);
  transition:
    transform 0.22s cubic-bezier(0.32, 0.72, 0, 1),
    box-shadow 0.22s ease,
    filter 0.2s ease;
}

.smodal__color-swatch::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  pointer-events: none;
}

.smodal__color-swatch {
  position: relative;
}

.smodal__color-swatch:hover {
  transform: scale(1.06);
  filter: brightness(1.05);
  box-shadow:
    0 0 0 2px var(--accent),
    0 0 0 5px var(--accent-glow),
    0 8px 22px rgba(0, 0, 0, 0.4);
}

.smodal__color-swatch:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--accent),
    0 0 0 5px var(--accent-glow),
    0 8px 22px rgba(0, 0, 0, 0.4);
}

.smodal__color-swatch--open {
  transform: scale(1.05);
  box-shadow:
    0 0 0 2px var(--accent),
    0 0 0 5px var(--accent-glow),
    0 8px 22px rgba(0, 0, 0, 0.42);
}

.smodal__color-input--core-native {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  margin: 0;
  padding: 0;
  border: 0;
  clip: rect(0, 0, 0, 0);
}

/* Плавающая палитра (справа от свотча / модалки) */
.core-color-picker {
  position: fixed;
  z-index: 12000;
  opacity: 0;
  transform: scale(0.94) translateX(-6px);
  pointer-events: none;
  transition:
    opacity 0.26s cubic-bezier(0.32, 0.72, 0, 1),
    transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

.core-color-picker.core-color-picker--open {
  opacity: 1;
  transform: scale(1) translateX(0);
  pointer-events: auto;
}

.core-color-picker__shell {
  --picker-hue: 200;
  width: 232px;
  padding: 16px 16px 14px;
  border-radius: 999px;
  background: var(--glass-surface, var(--bg-panel));
  border: 1px solid var(--glass-edge, var(--border-light));
  box-shadow:
    var(--glass-shadow, 0 18px 44px rgba(0, 0, 0, 0.48)),
    0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent) inset;
  backdrop-filter: blur(var(--glass-blur, 14px)) saturate(var(--glass-sat, 112%));
  -webkit-backdrop-filter: blur(var(--glass-blur, 14px)) saturate(var(--glass-sat, 112%));
}

.core-color-picker__sv-wrap {
  position: relative;
  width: 168px;
  height: 168px;
  margin: 0 auto 12px;
  border-radius: 50%;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--border-light) 75%, transparent),
    0 10px 28px rgba(0, 0, 0, 0.38);
}

.core-color-picker__sv {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  cursor: crosshair;
  touch-action: none;
  background:
    linear-gradient(to top, #000, transparent),
    linear-gradient(to right, #fff, hsl(var(--picker-hue), 100%, 50%));
}

.core-color-picker__sv-cursor {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: left 0.05s ease-out, top 0.05s ease-out, box-shadow 0.2s ease;
}

.core-color-picker__slider {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 10px;
}

.core-color-picker__slider-cap {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0 8px;
}

.core-color-picker__slider--hue input[type='range'] {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  appearance: none;
  background: linear-gradient(
    90deg,
    #f00,
    #ff0,
    #0f0,
    #0ff,
    #00f,
    #f0f,
    #f00
  );
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--border-light) 55%, transparent) inset;
}

.core-color-picker__alpha-track {
  --alpha-top: #ffffff;
  position: relative;
  width: 100%;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--border-light) 55%, transparent) inset;
  background-color: #0a0a0c;
  background-image:
    linear-gradient(45deg, #1a1a1f 25%, transparent 25%),
    linear-gradient(-45deg, #1a1a1f 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #1a1a1f 75%),
    linear-gradient(-45deg, transparent 75%, #1a1a1f 75%);
  background-size: 8px 8px;
  background-position: 0 0, 0 4px, 4px -4px, -4px 0;
}

.core-color-picker__alpha-track::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--alpha-top));
  pointer-events: none;
}

.core-color-picker__alpha-track input[type='range'] {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 10px;
  border-radius: 999px;
  appearance: none;
  background: transparent;
}

.core-color-picker__slider input[type='range']::-webkit-slider-thumb {
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #f6f4ef;
  border: 2px solid color-mix(in srgb, var(--border-light) 80%, transparent);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.core-color-picker__slider input[type='range']::-webkit-slider-thumb:hover {
  transform: scale(1.08);
  box-shadow: 0 0 0 2px var(--accent-glow), 0 2px 8px rgba(0, 0, 0, 0.5);
}

.core-color-picker__slider input[type='range']::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #f6f4ef;
  border: 2px solid color-mix(in srgb, var(--border-light) 80%, transparent);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
  cursor: pointer;
}

.core-color-picker__hexrow {
  text-align: center;
  padding-top: 2px;
}

.core-color-picker__hex {
  font-size: 12px;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
}

/* Toggle switch */
.smodal__toggle {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
}
.smodal__toggle input { opacity: 0; width: 0; height: 0; position: absolute; }

.smodal__toggle-track {
  position: absolute;
  inset: 0;
  background: var(--bg-hover);
  border: 1px solid var(--border-light);
  border-radius: 11px;
  cursor: pointer;
  transition: background .2s, border-color .2s;
  display: flex;
  align-items: center;
}
.smodal__toggle input:checked + .smodal__toggle-track {
  background: var(--accent);
  border-color: var(--accent);
}

.smodal__toggle-thumb {
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  left: 2px;
  transition: left .2s;
  box-shadow: 0 1px 3px #0003;
}
.smodal__toggle input:checked + .smodal__toggle-track .smodal__toggle-thumb {
  left: 20px;
}

/* Toggle rows (for nebula, mask) */
.smodal__toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.smodal__toggle-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.smodal__toggle-name {
  font-size: 13px;
  color: var(--text-secondary);
}
.smodal__toggle-desc {
  font-size: 11px;
  color: var(--text-muted);
}

/* Range row (grain level) */
.smodal__range-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.smodal__range-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 160px;
}
#settings-grain-level {
  width: 120px;
}
.smodal__range-value {
  min-width: 36px;
  text-align: right;
  font-size: 12px;
  color: var(--text-muted);
  font-family: 'Consolas', monospace;
}

/* Fields */
.smodal__field { margin-bottom: 12px; }
.smodal__field:last-child { margin-bottom: 0; }

.smodal__label {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 5px;
}

.smodal__input {
  width: 100%;
  background: var(--bg-panel-alt);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  padding: 8px 10px;
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color .15s;
}
.smodal__input:focus { border-color: var(--accent); }
.smodal__input[type="date"] { color-scheme: dark; }
body.theme-light .smodal__input[type="date"] { color-scheme: light; }

/* Нативные <select>: единый глас + blur (закрытое состояние; список — по ОС/движку) */
.smodal__select,
.timeline-filter-select,
.chat-mode-switch__select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  box-sizing: border-box;
  font-family: inherit;
  outline: none;
  cursor: pointer;
  color: var(--text-primary);
  color-scheme: dark;
  border: 1px solid var(--glass-input-border);
  border-radius: var(--radius-sm);
  background-color: var(--glass-input-bg);
  background-image: var(--ui-select-chevron);
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px 10px;
  box-shadow: var(--glass-inset);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
}

body.theme-light .smodal__select,
body.theme-light .timeline-filter-select,
body.theme-light .chat-mode-switch__select {
  color-scheme: light;
}

.smodal__select:hover,
.timeline-filter-select:hover,
.chat-mode-switch__select:hover {
  border-color: color-mix(in srgb, var(--border-light) 55%, var(--glass-input-border));
  background-color: color-mix(in srgb, var(--glass-veil-hover) 40%, var(--glass-input-bg));
}

.smodal__select:focus-visible,
.timeline-filter-select:focus-visible,
.chat-mode-switch__select:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-glow), var(--glass-inset);
}

.smodal__select option,
.timeline-filter-select option,
.chat-mode-switch__select option {
  background-color: var(--bg-panel-alt);
  color: var(--text-primary);
}

.smodal__select {
  width: 100%;
  font-size: 13px;
  padding: 8px 32px 8px 10px;
}
.smodal__subhint {
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-muted);
}

/* Stub note */
.smodal__stub-note {
  margin-top: 10px;
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
}

/* ═══ PIN-КОД НАСТРОЕК ══════════════════════════════════ */

.smodal__pin-status {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 12px;
  padding: 6px 10px;
  background: var(--bg-hover);
  border-radius: 6px;
  border: 1px solid var(--border);
}
.smodal__pin-status--set {
  color: #4ade80;
  border-color: #4ade8033;
  background: #4ade8008;
}

.smodal__pin-error {
  min-height: 16px;
  font-size: 11px;
  color: #f87171;
  margin-bottom: 8px;
}

.smodal__pin-btns {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.smodal__pin-save-btn,
.smodal__pin-clear-btn {
  flex: 1;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all .15s;
}

.smodal__pin-save-btn {
  background: var(--accent);
  color: #000;
  font-weight: 600;
}
.smodal__pin-save-btn:hover { opacity: .85; }

.smodal__pin-clear-btn {
  background: transparent;
  color: #f87171;
  border-color: #f8717144;
}
.smodal__pin-clear-btn:hover {
  background: #f8717110;
  border-color: #f87171;
}

.smodal__danger-note {
  margin-bottom: 10px;
  font-size: 12px;
  line-height: 1.4;
  color: #fca5a5;
  background: #f8717110;
  border: 1px solid #f8717144;
  border-radius: 6px;
  padding: 8px 10px;
}

.smodal__danger-btn {
  width: 100%;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid #f8717144;
  background: transparent;
  color: #f87171;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: all .15s;
}

.smodal__danger-btn:hover:not(:disabled) {
  background: #f8717110;
  border-color: #f87171;
}

.smodal__danger-btn:disabled {
  opacity: .65;
  cursor: default;
}

/* ═══ КНОПКА «В ЛИЧНОЕ» НА КАРТОЧКЕ УЗЛА ════════════════ */

.node-card__personal-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid #f59e0b44;
  background: #f59e0b08;
  color: #f59e0b;
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  transition: all .15s;
  align-self: flex-start;
}
.node-card__personal-btn:hover {
  background: #f59e0b18;
  border-color: #f59e0b88;
}
.node-card__personal-btn--active {
  background: #f59e0b18;
  border-color: #f59e0b;
  color: #fbbf24;
}
.node-card__personal-btn--disabled,
.node-card__personal-btn:disabled {
  border-color: color-mix(in srgb, var(--accent) 32%, transparent);
  background: color-mix(in srgb, var(--glass-veil) 72%, transparent);
  color: var(--text-secondary);
  cursor: default;
  opacity: .82;
}
.node-card__personal-btn--disabled:hover,
.node-card__personal-btn:disabled:hover {
  background: color-mix(in srgb, var(--glass-veil) 72%, transparent);
  border-color: color-mix(in srgb, var(--accent) 32%, transparent);
}

/* ═══ ЛИЧНЫЕ УЗЛЫ В ДЕРЕВЕ ════════════════════════════════ */

.tree-node--personal .tree-node__icon,
.tree-node--personal .tree-node__title {
  color: #f59e0b;
}
.tree-node--personal {
  border-left: 2px solid #f59e0b55;
}

.tree-subnode--personal .tree-subnode__title {
  color: #f59e0b;
}
.tree-subnode--personal {
  border-left: 2px solid #f59e0b55;
}

.tree-node--masked .tree-node__title,
.tree-subnode--masked .tree-subnode__title {
  color: var(--text-muted);
  font-style: italic;
}

/* ═══ ПОДТВЕРЖДЕНИЕ (ин-апп) ═════════════════════════════ */

.app-confirm-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 3500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, var(--safe-top)) max(16px, var(--safe-right)) max(16px, var(--safe-bottom)) max(16px, var(--safe-left));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

.app-confirm-modal-overlay:not([hidden]) {
  opacity: 1;
  pointer-events: auto;
}

.app-confirm-modal-overlay[hidden] {
  display: none !important;
}

.app-confirm-modal__backdrop {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: rgba(0, 0, 0, 0.58);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
}

.app-confirm-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(420px, 100%);
  padding: 22px 22px 18px;
  border-radius: 16px;
  border: 1px solid var(--glass-edge);
  background: var(--glass-surface);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55), var(--glass-inset);
}

.app-confirm-modal__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.02em;
  margin-bottom: 10px;
}

.app-confirm-modal__message {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin-bottom: 18px;
  white-space: pre-wrap;
}

.app-confirm-modal__actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.app-confirm-modal__btn {
  min-width: 96px;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.app-confirm-modal__btn--cancel {
  background: transparent;
  color: var(--text-muted);
  border-color: var(--glass-edge);
}

.app-confirm-modal__btn--cancel:hover {
  color: var(--text-primary);
  border-color: var(--border);
}

.app-confirm-modal__btn--danger {
  background: color-mix(in srgb, #ef4444 85%, var(--accent));
  color: #0a0a0a;
  border-color: transparent;
}

.app-confirm-modal__btn--danger:hover {
  filter: brightness(1.06);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}

.app-confirm-modal__btn--primary {
  background: var(--accent);
  color: #0a0a0a;
}

.app-confirm-modal__btn--primary:hover {
  filter: brightness(1.06);
}

/* ═══ PIN МОДАЛ ══════════════════════════════════════════ */

.pin-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .2s;
}
.pin-modal-overlay--visible { opacity: 1; }

.pin-modal {
  
  border: 1px solid var(--border-light);
  border-radius: 16px;
  padding: 32px 28px 28px;
  width: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  box-shadow: 0 24px 64px #0008;
  transform: translateY(16px);
  transition: transform .2s;
}
.pin-modal-overlay--visible .pin-modal { transform: translateY(0); }

.pin-modal__icon {
  font-size: 32px;
  line-height: 1;
  margin-bottom: 2px;
}

.pin-modal__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

.pin-modal__desc {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.pin-modal__input {
  width: 100%;
  background: var(--bg-panel-alt);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 10px 14px;
  color: var(--text-primary);
  font-size: 20px;
  text-align: center;
  letter-spacing: 6px;
  font-family: inherit;
  outline: none;
  transition: border-color .15s;
  box-sizing: border-box;
}
.pin-modal__input:focus { border-color: var(--accent); }

.pin-modal__error {
  min-height: 16px;
  font-size: 11px;
  color: #f87171;
  text-align: center;
}

.pin-modal__btns {
  display: flex;
  gap: 8px;
  width: 100%;
  margin-top: 4px;
}

.pin-modal__btn {
  flex: 1;
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all .15s;
}
.pin-modal__btn--cancel {
  background: transparent;
  color: var(--text-muted);
  border-color: var(--border-light);
}
.pin-modal__btn--cancel:hover {
  color: var(--text-secondary);
  border-color: var(--border);
}
.pin-modal__btn--ok {
  background: var(--accent);
  color: #000;
}
.pin-modal__btn--ok:hover { opacity: .85; }

/* ═══════════════════════════════════════════════════════════
   АДАПТИВНЫЙ ДИЗАЙН (RESPONSIVE)
═══════════════════════════════════════════════════════════ */

/* ─── Нижняя навигация (планшет + мобильный) ─── */

.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--bottom-nav-h);
  background: var(--glass-surface);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border-top: 1px solid var(--glass-edge);
  box-shadow: 0 -8px 36px rgba(0, 0, 0, 0.38);
  z-index: 210;
  padding: 4px 8px;
  gap: 4px;
}

.bottom-nav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: inherit;
  cursor: pointer;
  padding: 6px 4px;
  border-radius: 10px;
  transition: color .15s, background .15s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.bottom-nav__item:hover .bottom-nav__icon {
  filter: var(--ui-icon-glow);
}

.bottom-nav__item:active { background: var(--glass-veil-hover); }
.bottom-nav__item--active { color: var(--accent); }

.bottom-nav__item--active .bottom-nav__icon {
  filter: var(--ui-icon-glow-strong);
}

.bottom-nav__icon {
  font-size: 19px;
  line-height: 1;
  transition: filter 0.15s ease;
}

.bottom-nav__label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .03em;
  line-height: 1.2;
}

/* ─── Drawer backdrop ─── */

.drawer-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 110;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: background .2s ease, backdrop-filter .2s ease;
}

.drawer-backdrop--visible { display: block; }

.drawer-backdrop--details {
  background: rgba(0,0,0,.64);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* ─── Bottom sheet close button ─── */

.bottom-sheet-close {
  display: none;
  margin: 8px 12px 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: color .15s ease, filter .15s ease;
}

.bottom-sheet-close:hover {
  color: var(--text-primary);
  filter: var(--ui-icon-glow);
}

.bottom-sheet-close:active {
  background: var(--bg-active);
}

/* ─── Graph overlay close button (hidden on desktop) ─── */

.graph-overlay-close { display: none !important; }

/* ═══ ПЛАНШЕТ + МОБИЛЬНЫЙ (< 1024px) — показываем навигацию ══════ */

@media (max-width: 1024px) {
  .icon-rail { display: none; }
  .bottom-nav { display: flex; }

  .workspace {
    padding-top: 0;
    padding-bottom: 0;
  }

  .toast {
    top: calc(var(--mobile-topbar-h) + 12px);
    left: 12px;
    right: auto;
    bottom: auto;
    max-width: min(420px, calc(100vw - 24px));
  }
}

/* ═══ КОМПАКТНЫЕ УСТРОЙСТВА (<= 1024px) ═══════════════════ */

@media (max-width: 1024px) {

  /* ── Шапка ── */
  .topbar {
    height: var(--mobile-topbar-h);
    padding:
      var(--safe-top)
      calc(10px + var(--safe-right))
      0
      calc(10px + var(--safe-left));
    display: grid;
    grid-template-columns: 34px 1fr 34px;
    align-items: center;
    justify-items: center;
    transition: transform .35s cubic-bezier(.32,.72,0,1), opacity .25s ease;
  }
  .topbar--hidden {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
  }
  .topbar__mobile-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    border-radius: 12px;
    cursor: pointer;
    font-size: 17px;
    line-height: 1;
    transition: color var(--ui-fast), filter var(--ui-fast);
  }
  .topbar__logo { justify-self: center; gap: 6px; }
  .topbar__icon  { display: none; }
  .topbar__title { font-size: 20px; letter-spacing: .18em; }
  .topbar__search { display: none !important; }
  .topbar__inbox-group { display: none !important; }
  .topbar__mobile-spacer { display: none; }
  .topbar__search-open-btn--mobile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    border-radius: 12px;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    transition: color var(--ui-fast), filter var(--ui-fast);
  }

  .topbar.topbar--mobile-search-open {
    grid-template-columns: 34px minmax(0, 1fr) 34px;
  }

  .topbar.topbar--mobile-search-open .topbar__logo {
    display: none;
  }

  .topbar.topbar--mobile-search-open .topbar__search {
    display: flex !important;
    position: absolute;
    left: calc(10px + var(--safe-left));
    right: calc(10px + var(--safe-right));
    top: calc(var(--safe-top) + 6px);
    width: auto;
    height: 38px;
    margin: 0;
    z-index: 3;
  }

  .topbar.topbar--mobile-search-open .topbar__mobile-menu-btn,
  .topbar.topbar--mobile-search-open .topbar__search-open-btn--mobile {
    opacity: 0;
    pointer-events: none;
  }

  .topbar__mobile-menu-btn:hover,
  .topbar__search-open-btn--mobile:hover {
    color: var(--text-primary);
    filter: var(--ui-icon-glow);
  }

  .workspace {
    padding-top: 0;
    padding-bottom: 0;
  }

  .bottom-nav {
    height: var(--mobile-bottom-nav-h);
    padding:
      4px
      calc(8px + var(--safe-right))
      calc(4px + var(--safe-bottom))
      calc(8px + var(--safe-left));
    gap: 2px;
  }

  .bottom-nav__item {
    min-width: 0;
    padding: 6px 2px;
  }

  .bottom-nav__label {
    font-size: 9px;
    letter-spacing: .02em;
  }

  .panel--chat {
    position: fixed;
    inset:
      var(--mobile-topbar-h)
      0
      var(--mobile-bottom-nav-h)
      0;
    width: 100% !important;
    min-width: 0;
    border-left: none;
    border-right: none;
    z-index: 165;
    opacity: 0;
    pointer-events: none;
    transform: translateX(100%);
    transition: transform .25s cubic-bezier(.32,.72,0,1), opacity .2s ease;
    background: var(--glass-surface);
  }

  .panel--chat.chat-mobile-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
    inset: 0 0 var(--mobile-bottom-nav-h) 0;
  }

  /* Хедер скрывается при открытии чата на мобилке */
  .topbar:has(~ .workspace .panel--chat.chat-mobile-open) {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-100%);
    transition: opacity .25s ease, transform .25s ease;
  }

  .panel--chat > .panel__header {
    position: relative;
    z-index: 3;
  }

  .chat-widget-controls {
    display: inline-flex;
  }

  .panel--chat .chat-panel {
    min-height: 0;
  }

  .chat-messages {
    padding: 10px 8px;
  }

  .chat-input-row {
    gap: 8px;
    padding: 8px;
  }

  .chat-input-box {
    max-height: 132px;
  }

  .chat-textarea {
    font-size: 14px;
  }

  .chat-toolbar {
    flex-wrap: wrap;
    row-gap: 4px;
    padding-bottom: 10px;
  }

  .chat-mode-switch {
    min-width: 0;
  }

  .chat-mode-switch__label {
    display: none;
  }

  .chat-widget-launcher { display: none !important; }
  .chat-widget-nudge { display: none !important; }

  /* ── Центральная панель (граф): всегда в DOM с реальными размерами ──
     НЕ display:none — иначе Cytoscape инициализируется в 0×0 и не рендерит.
     Смещаем за левый край экрана чтобы не перекрывать дерево и навигацию. ── */
  .panel--center {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    z-index: 150;
    transform: translateX(0);
    pointer-events: auto;
    border-right: none;
    transition: none;
  }

  .panel--center.graph-overlay-open {
    transform: translateX(0);
    pointer-events: auto;
  }

  /* В компактном режиме отдельный close для граф-слоя не нужен */
  .panel--center .graph-overlay-close {
    display: none !important;
  }

  /* Только кнопка «закрыть оверлей» — на мобилке скрыта; не резервируем угол под пустой тулбар */
  .graph-toolbar {
    display: none;
  }
  .graph-control-anchor {
    position: absolute;
    left: auto;
    min-height: 28px;
    padding: 0;
  }
  /* 2D / 3D — под шапкой, правый верх (fixed под header, выше графа) */
  #graph-view-toggle-wrap {
    position: fixed !important;
    top: calc(var(--mobile-topbar-h) + 8px) !important;
    right: 10px !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 200;
    transform: none !important;
  }
  /* Настройки графа — по-прежнему снизу справа */
  #graph-settings-control-wrap {
    position: fixed;
    top: auto;
    bottom: calc(var(--mobile-bottom-nav-h) + 11px);
    right: 8px;
    left: auto;
    z-index: 200;
  }
  .graph-search--corner {
    display: none !important;
  }
  .graph-search {
    width: 128px;
  }
  .graph-search__input {
    height: 26px;
    font-size: 11px;
  }
  .graph-search__clear {
    width: 18px;
    height: 18px;
    font-size: 10px;
  }

  .panel--center .graph-legend,
  .panel--center.graph-overlay-open .graph-legend {
    display: none !important;
  }

  .graph3d-hint {
    bottom: calc(var(--mobile-bottom-nav-h) + 40px);
  }

  /* ── Правая панель (детали): bottom sheet ── */
  .panel--right,
  .panel--right.collapsed {
    position: fixed !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: var(--mobile-bottom-nav-h);
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 60vh;
    max-height: calc(var(--app-height) - var(--mobile-topbar-h) - var(--mobile-overlay-gap));
    z-index: 170;
    border-radius: 16px 16px 0 0;
    border-left: none;
    background: var(--glass-surface);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    border-top: 1px solid var(--glass-edge);
    box-shadow: 0 -18px 54px rgba(0,0,0,.55), var(--glass-inset);
    transform: translateY(100%);
    transform-origin: center bottom !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform .35s cubic-bezier(.32,.72,0,1), opacity .3s ease, visibility .35s;
    display: flex !important;
    flex-direction: column;
    margin: 0 !important;
  }

  .panel--right.details-panel--hidden {
    transform: translateY(100%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }

  .panel--right .details-body,
  .panel--right.collapsed .details-body {
    display: flex !important;
    flex-direction: column;
  }

  .panel--right.sheet-open {
    transform: translateY(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 170;
    transition: transform .35s cubic-bezier(.32,.72,0,1), opacity .25s ease, visibility .25s;
  }

  .panel--right.sheet-full,
  .panel--right.collapsed.sheet-full {
    height: calc(var(--app-height) - var(--mobile-topbar-h));
    border-radius: 0;
    transition: transform .35s cubic-bezier(.32,.72,0,1), opacity .3s ease, height .3s ease, border-radius .2s ease;
  }

  .panel--right .panel__header,
  .panel--right.collapsed .panel__header {
    border-radius: 16px 16px 0 0;
    flex-shrink: 0;
    padding-right: 46px;
    cursor: default;
  }

  .panel--right.sheet-full .panel__header,
  .panel--right.collapsed.sheet-full .panel__header {
    border-radius: 0;
  }

  #right-toggle { display: none !important; }

  /* ── Bottom sheet close button visible ── */
  .bottom-sheet-close {
    display: block;
    position: absolute;
    top: 8px;
    right: 12px;
    margin: 0;
    z-index: 2;
  }

  .details-resize-handle { display: none; }

  /* ── Увеличиваем тач-цели в дереве ── */
  .tree-node    { padding-top: 8px; padding-bottom: 8px; }
  .tree-subnode { padding-top: 6px; padding-bottom: 6px; }
  .tree-category__header { padding-top: 9px; padding-bottom: 9px; }
  .question-item { padding-top: 8px; padding-bottom: 8px; }

  .node-modal-layer,
  .node-modal-dock {
    display: none !important;
  }

  .node-float-modal__resize-handle {
    display: none;
  }

  /* ── Settings modal full-screen on mobile ── */
  .smodal {
    width: 100vw;
    max-width: 100vw;
    max-height: calc(var(--app-height) - var(--safe-top));
    border-radius: 16px 16px 0 0;
    margin-top: auto;
  }

  .smodal-overlay {
    align-items: flex-end;
  }

  /* ── Chat archive modal on mobile ── */
  .cmodal {
    max-width: 100vw;
    max-height: calc(var(--app-height) - var(--safe-top));
    border-radius: 16px 16px 0 0;
    margin-top: auto;
  }

  .cmodal-overlay {
    align-items: flex-end;
    padding: 0;
  }

  /* ── Бургер-меню ── */
  .mobile-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 320;
    background: rgba(0,0,0,.66);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }
  .mobile-menu-backdrop--open {
    display: block;
    opacity: 1;
    pointer-events: auto;
  }
  .mobile-menu {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(84vw, 320px);
    background: var(--glass-surface);
    border-right: 1px solid var(--glass-edge);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    box-shadow: var(--glass-shadow), var(--glass-inset);
    transform: translateX(-100%);
    transition: transform .22s ease;
    display: flex;
    flex-direction: column;
    padding:
      calc(10px + var(--safe-top))
      calc(10px + var(--safe-right))
      calc(10px + var(--safe-bottom))
      calc(10px + var(--safe-left));
    gap: 8px;
  }
  .mobile-menu-backdrop--open .mobile-menu { transform: translateX(0); }
  .mobile-menu__header {
    align-self: stretch;
    margin:
      calc(-10px - var(--safe-top))
      calc(-10px - var(--safe-right))
      8px
      calc(-10px - var(--safe-left));
    gap: 8px;
  }
  .mobile-menu__title {
    font-size: 13px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-secondary);
    font-weight: 600;
  }
  .mobile-menu__close {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 14px;
    cursor: pointer;
    transition: color 0.15s ease, filter 0.15s ease;
  }

  .mobile-menu__close:hover {
    color: var(--text-primary);
    filter: var(--ui-icon-glow);
  }
  .mobile-menu__item {
    width: 100%;
    min-height: 38px;
    border-radius: var(--radius-md);
    border: 1px solid var(--glass-edge);
    background: var(--glass-veil);
    color: var(--text-primary);
    text-align: left;
    padding: 0 12px;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
  }
  .mobile-menu__item--danger {
    color: #f29595;
    border-color: #f2959540;
    background: #f2959512;
    margin-top: auto;
  }

  .timeline-overlay {
    inset: var(--mobile-topbar-h) 0 0 0;
    padding: 6px;
    align-items: stretch;
  }

  .timeline-modal {
    width: 100%;
    height: calc(var(--app-height) - var(--mobile-topbar-h) - 6px);
    max-height: calc(var(--app-height) - var(--mobile-topbar-h) - 6px);
    border-radius: 18px 18px 0 0;
    margin-top: auto;
  }

  .timeline-modal__header {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
  }

  .timeline-modal__filters {
    width: 100%;
  }

  .timeline-filter-select {
    width: 100%;
  }

  .timeline-layout {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .timeline-scale-col {
    order: 2;
  }

  .timeline-scale {
    min-height: 160px;
  }

  .timeline-scale__hint {
    text-align: center;
  }

  .timeline-events-col {
    min-height: 320px;
  }

  .timeline-event {
    gap: 10px;
  }

  .timeline-event__time {
    flex-basis: 74px;
    width: 74px;
    font-size: 10px;
  }

  .timeline-event__content {
    padding: 10px 11px;
  }

  .auth-modal,
  .pin-modal,
  .notif-panel,
  .notif-detail-overlay__dialog {
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
  }
}

/* ─── Light theme overrides for bottom-nav ─── */
body.theme-light .bottom-nav {
  
  border-top-color: var(--border);
}

body.theme-light .drawer-backdrop {
  background: rgba(0,0,0,.35);
}

@media (max-width: 1024px) {
  .drawer-backdrop {
    z-index: 160;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px) saturate(115%);
    -webkit-backdrop-filter: blur(8px) saturate(115%);
  }

  .drawer-backdrop--details {
    background: rgba(0, 0, 0, 0.58);
  }

  .bottom-nav {
    z-index: 210;
  }

  .topbar {
    z-index: 220;
    background: var(--glass-surface);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    border-bottom: 1px solid var(--glass-edge);
    box-shadow: var(--glass-shadow), var(--glass-inset);
  }

  .graph-settings-popover {
    position: fixed;
    left: calc(8px + var(--safe-left)) !important;
    right: calc(8px + var(--safe-right)) !important;
    top: calc(var(--mobile-topbar-h) + 8px) !important;
    bottom: calc(var(--mobile-bottom-nav-h) + 8px) !important;
    width: auto !important;
    height: auto !important;
    max-width: none;
    max-height: none;
    border-radius: 18px;
    background: var(--glass-surface);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    border: 1px solid var(--glass-edge);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.52), var(--glass-inset);
    z-index: 180;
  }

  .graph-settings-popover__body {
    min-height: 0;
    overscroll-behavior: contain;
  }

  .timeline-overlay {
    inset: var(--mobile-topbar-h) 0 var(--mobile-bottom-nav-h) 0;
    padding: 8px;
    z-index: 180;
  }

  .timeline-modal {
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 18px;
    background: var(--glass-surface);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  }
}

/* ==================== FUZZY TIMELINE ==================== */

.timeline-overlay {
  position: fixed;
  inset: var(--topbar-h) 0 0 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: 500;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  padding: 10px 14px 10px calc(var(--icon-rail-w) + 14px);
  opacity: 0;
  transition: opacity .2s;
}
.timeline-overlay--visible { opacity: 1; }

.timeline-modal {
  width: min(1240px, calc(100vw - var(--icon-rail-w) - 28px));
  height: calc(100vh - var(--topbar-h) - 20px);
  max-height: calc(100vh - var(--topbar-h) - 20px);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-md);
  background: var(--glass-surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: var(--glass-shadow), var(--glass-inset);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.timeline-modal__header {
  gap: 12px;
}
.timeline-modal__title {
  font-weight: 600;
  font-size: 15px;
  color: var(--text-primary);
  margin-right: auto;
}
.timeline-filter-select {
  font-size: 12px;
  padding: 5px 28px 5px 9px;
  background-position: right 8px center;
}
.timeline-modal__close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  transition: color 0.15s ease, filter 0.15s ease;
}
.timeline-modal__close:hover {
  color: var(--text-primary);
  filter: var(--ui-icon-glow);
}

.timeline-modal__legend {
  display: flex;
  gap: 16px;
  padding: 8px 18px;
  font-size: 11px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--glass-edge);
  flex-shrink: 0;
}
.timeline-legend-item { display: flex; align-items: center; gap: 4px; }

.timeline-modal__body {
  flex: 1;
  overflow: hidden;
  padding: 14px 16px 16px;
  position: relative;
}

.timeline-layout {
  height: 100%;
  min-height: 640px;
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 14px;
}

.timeline-scale-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.timeline-scale {
  position: relative;
  flex: 1;
  min-height: 420px;
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-sm);
  background: var(--glass-veil);
  overflow: hidden;
  cursor: ns-resize;
}

.timeline-scale__line {
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 50%;
  width: 2px;
  transform: translateX(-1px);
  background: color-mix(in srgb, var(--accent) 38%, var(--border-light));
}

.timeline-scale__ticks {
  position: absolute;
  inset: 0;
}

.timeline-scale__tick {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
}

.timeline-scale__tick::before {
  content: '';
  position: absolute;
  left: calc(50% - 10px);
  right: calc(50% - 10px);
  top: 0;
  border-top: 1px solid color-mix(in srgb, var(--text-muted) 30%, transparent);
}

.timeline-scale__tick-label {
  position: absolute;
  top: -9px;
  right: calc(50% + 16px);
  font-size: 10px;
  line-height: 1.2;
  color: var(--text-muted);
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .2);
}

.timeline-scale__tick-label--edge {
  color: var(--text-primary);
  font-weight: 600;
}

.timeline-scale__hint {
  font-size: 10px;
  line-height: 1.35;
  color: var(--text-muted);
}

.timeline-events-col {
  min-width: 0;
  min-height: 560px;
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-sm);
  background: var(--glass-veil);
  position: relative;
  overflow: hidden;
}

.timeline-events-canvas {
  position: absolute;
  inset: 10px 10px 10px 10px;
}

.timeline-loading {
  color: var(--text-muted);
  text-align: center;
  padding: 40px 0;
  font-size: 14px;
}
.timeline-empty {
  color: var(--text-muted);
  text-align: center;
  padding: 48px 0;
  font-size: 13px;
}

/* -- Timeline axis -- */
.timeline-axis {
  position: relative;
  padding-left: 100px;
}
.timeline-axis::before {
  content: '';
  position: absolute;
  left: 88px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border-light);
}

.timeline-event {
  position: absolute;
  left: 2px;
  right: 2px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  animation: timelineFadeIn .25s ease both;
}
@keyframes timelineFadeIn { from { opacity:0; transform: translateX(-8px); } to { opacity:1; transform: none; } }

.timeline-event__time {
  flex: 0 0 110px;
  width: 110px;
  text-align: left;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.3;
  padding-top: 4px;
}

.timeline-event__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--accent, #7c6af7);
  
  flex-shrink: 0;
  margin-top: 4px;
  position: relative;
  z-index: 1;
}
.timeline-event--fuzzy .timeline-event__dot {
  border-style: dashed;
  opacity: .7;
}

.timeline-event__content {
  flex: 1 1 auto;
  background: var(--glass-veil);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  backdrop-filter: blur(10px) saturate(108%);
  -webkit-backdrop-filter: blur(10px) saturate(108%);
}
.timeline-event--fuzzy .timeline-event__content {
  border-style: dashed;
  opacity: .85;
}
.timeline-event__content:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--glass-edge));
  background: var(--glass-veil-hover);
}

.timeline-event__title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 3px;
}
.timeline-event__meta {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.timeline-event__category {
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--accent-dim, rgba(124,106,247,.15));
  color: var(--accent, #7c6af7);
}
.timeline-event__confidence {
  color: var(--text-muted);
  font-style: italic;
}

.timeline-empty--inline {
  padding-top: 80px;
}

@media (max-width: 980px) {
  .timeline-overlay {
    inset: var(--topbar-h) 0 0 0;
    padding: 8px;
    justify-content: center;
  }

  .timeline-modal {
    width: calc(100vw - 16px);
    height: calc(var(--app-height) - var(--topbar-h) - 16px);
    max-height: calc(var(--app-height) - var(--topbar-h) - 16px);
  }
}

/* ═══ ЧАТ — ПАНЕЛЬ ══════════════════════════════════════ */

.chat-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  position: relative;
  overflow: hidden;
  min-height: 0;
  background: var(--glass-chat-body);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
}

/* ─── Список сообщений ─── */

.chat-messages-wrap {
  flex: 1;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
}

.chat-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-light) transparent;
}

.chat-scroll-down {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 6;
  width: 38px;
  height: 38px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  box-shadow: none;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s ease,
    color 0.15s ease,
    filter 0.15s ease;
}

.chat-scroll-down.chat-scroll-down--visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.chat-scroll-down:hover {
  color: var(--text-primary);
  filter: var(--ui-icon-glow);
}

.chat-scroll-down:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.chat-scroll-down__icon {
  display: block;
}

/* ─── Приветствие ─── */

.chat-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 24px 12px 16px;
  text-align: center;
  color: var(--text-muted);
}

.chat-welcome__icon {
  font-size: 28px;
  color: var(--accent);
  filter: drop-shadow(0 0 6px var(--accent-glow));
  margin-bottom: 4px;
}

.chat-welcome__title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.chat-welcome__desc {
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 200px;
}

/* Плашка: переход к графу после этапа знакомства (≥ узлов порога) */
.chat-graph-ready-banner {
  flex-shrink: 0;
  margin: 0 10px 10px;
  padding: 12px 14px;
  border-radius: var(--radius-md, 14px);
  background: color-mix(in srgb, var(--glass-chat-body) 82%, transparent);
  backdrop-filter: blur(calc(var(--glass-blur) + 2px)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) + 2px)) saturate(var(--glass-sat));
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--glass-edge) 52%);
  box-shadow: var(--glass-shadow, 0 8px 24px rgba(0, 0, 0, 0.18));
  animation: chat-msg-in 0.22s ease;
}

/* Плашка вместо поля ввода (нижняя панель чата) */
.chat-input-area--graph-banner {
  padding: 8px;
}

.chat-graph-ready-banner--in-input-area {
  margin: 0;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  border-radius: 12px;
}

.chat-graph-ready-banner__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 12px;
}

.chat-graph-ready-banner__text {
  flex: 1 1 200px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.chat-graph-ready-banner__title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  line-height: 1.35;
}

.chat-graph-ready-banner__desc {
  display: block;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-secondary);
}

.chat-graph-ready-banner__actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.chat-graph-ready-banner__go {
  appearance: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--bg-base, #0a0a0c);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--accent) 92%, white 8%),
    color-mix(in srgb, var(--accent) 72%, #1a1a22 28%)
  );
  box-shadow: 0 2px 12px color-mix(in srgb, var(--accent) 35%, transparent);
}

.chat-graph-ready-banner__go:hover {
  filter: brightness(1.06);
}

.chat-graph-ready-banner__go:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.chat-graph-ready-banner__dismiss {
  appearance: none;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 8px;
}

.chat-graph-ready-banner__dismiss:hover {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--text-muted) 12%, transparent);
}

#panel-graph.graph-ready-banner-pulse {
  animation: graph-ready-banner-pulse 0.75s ease 2;
}

@keyframes graph-ready-banner-pulse {
  0%,
  100% {
    box-shadow: inset 0 0 0 0 transparent;
  }
  50% {
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent),
      0 0 28px color-mix(in srgb, var(--accent-glow, var(--accent)) 38%, transparent);
  }
}

/* ─── Сообщения ─── */

.chat-msg {
  display: flex;
  flex-direction: column;
  gap: 3px;
  animation: chat-msg-in .18s ease;
}

@keyframes chat-msg-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.chat-msg--user { align-items: flex-end; }
.chat-msg--ai   { align-items: flex-start; }

.chat-msg__bubble--typing {
  white-space: pre-wrap;
}

.chat-msg--bg-job .chat-bg-job-card {
  max-width: 92%;
  padding: 12px 14px 14px;
  border-radius: calc(var(--radius-md, 14px) + 2px);
  border-bottom-left-radius: 4px;
  background: color-mix(in srgb, var(--glass-chat-body) 76%, transparent);
  backdrop-filter: blur(calc(var(--glass-blur) + 2px)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) + 2px)) saturate(var(--glass-sat));
  border: 1px solid color-mix(in srgb, var(--glass-edge) 48%, transparent);
  box-shadow: var(--glass-shadow, 0 10px 28px rgba(0, 0, 0, 0.22)), var(--glass-inset);
}

.chat-bg-job-card__title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.35;
  color: var(--text-primary);
  margin: 0 0 6px;
}

.chat-bg-job-card__text {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0 0 12px;
}

.chat-bg-job-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chat-bg-job-card__btn {
  appearance: none;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;
  padding: 8px 14px;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--glass-edge));
  background: color-mix(in srgb, var(--glass-chat-body) 55%, transparent);
  color: var(--text-primary);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow: var(--glass-inset);
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.12s ease;
}

.chat-bg-job-card__btn:hover {
  background: color-mix(in srgb, var(--accent) 12%, var(--glass-chat-body));
  border-color: color-mix(in srgb, var(--accent) 48%, var(--glass-edge));
}

.chat-bg-job-card__btn:active {
  transform: scale(0.98);
}

.chat-bg-job-card__btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 65%, transparent);
  outline-offset: 2px;
}

.chat-bg-job-card__btn--primary {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--glass-edge));
  background: color-mix(in srgb, var(--accent) 18%, var(--glass-chat-body));
}

.chat-bg-job-card__btn--primary:hover {
  background: color-mix(in srgb, var(--accent) 26%, var(--glass-chat-body));
  border-color: color-mix(in srgb, var(--accent) 62%, var(--glass-edge));
}

body.theme-light .chat-msg--bg-job .chat-bg-job-card {
  background: color-mix(in srgb, var(--glass-chat-body) 88%, #fff);
  border-color: color-mix(in srgb, var(--glass-edge) 55%, var(--border-light));
  box-shadow: var(--glass-shadow, 0 8px 22px rgba(0, 0, 0, 0.08)), var(--glass-inset);
}

body.theme-light .chat-bg-job-card__title {
  color: var(--text-primary);
}

body.theme-light .chat-bg-job-card__text {
  color: var(--text-secondary);
}

body.theme-light .chat-bg-job-card__btn {
  background: color-mix(in srgb, #fff 72%, var(--glass-chat-body));
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border-light));
}

body.theme-light .chat-bg-job-card__btn:hover {
  background: color-mix(in srgb, var(--accent) 10%, #fff);
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border-light));
}

body.theme-light .chat-bg-job-card__btn--primary {
  background: color-mix(in srgb, var(--accent) 14%, #fff);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border-light));
}

body.theme-light .chat-bg-job-card__btn--primary:hover {
  background: color-mix(in srgb, var(--accent) 22%, #fff);
  border-color: color-mix(in srgb, var(--accent) 52%, var(--border-light));
}

.chat-msg--graph-tutorial .chat-graph-tutorial-card {
  max-width: 94%;
  padding: 13px 15px 14px;
  border-radius: calc(var(--radius-md, 14px) + 2px);
  border-bottom-left-radius: 4px;
  background: color-mix(in srgb, var(--glass-chat-body) 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--glass-edge));
  box-shadow:
    var(--glass-shadow, 0 10px 28px rgba(0, 0, 0, 0.22)),
    0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent) inset;
  backdrop-filter: blur(calc(var(--glass-blur) + 2px)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) + 2px)) saturate(var(--glass-sat));
}

.chat-graph-tutorial-card__body {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.chat-graph-tutorial-card__body strong {
  color: var(--text-primary);
}

.chat-graph-tutorial-card__job-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--glass-edge));
  background: color-mix(in srgb, var(--glass-chat-body) 62%, transparent);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
}

.chat-graph-tutorial-card__job-status-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

.chat-graph-tutorial-card__job-status.is-running .chat-graph-tutorial-card__job-status-icon {
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-top-color: color-mix(in srgb, var(--accent) 78%, #fff);
  animation: graph-tutorial-job-spin 0.8s linear infinite;
}

.chat-graph-tutorial-card__job-status.is-done {
  border-color: color-mix(in srgb, #4ad383 52%, var(--glass-edge));
  color: var(--text-primary);
}

.chat-graph-tutorial-card__job-status.is-done .chat-graph-tutorial-card__job-status-icon {
  border-radius: 50%;
  background: color-mix(in srgb, #4ad383 26%, transparent);
  border: 1px solid color-mix(in srgb, #4ad383 62%, transparent);
  position: relative;
}

.chat-graph-tutorial-card__job-status.is-done .chat-graph-tutorial-card__job-status-icon::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 2px;
  width: 4px;
  height: 7px;
  border-right: 2px solid color-mix(in srgb, #4ad383 84%, #fff);
  border-bottom: 2px solid color-mix(in srgb, #4ad383 84%, #fff);
  transform: rotate(40deg);
}

.chat-graph-tutorial-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.chat-graph-tutorial-card__btn {
  appearance: none;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--glass-edge));
  background: color-mix(in srgb, var(--glass-chat-body) 58%, transparent);
  color: var(--text-primary);
  box-shadow: var(--glass-inset);
  transition:
    transform 0.12s ease,
    border-color 0.15s ease,
    background 0.15s ease,
    opacity 0.15s ease;
}

.chat-graph-tutorial-card__btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 12%, var(--glass-chat-body));
  border-color: color-mix(in srgb, var(--accent) 48%, var(--glass-edge));
}

.chat-graph-tutorial-card__btn:active:not(:disabled) {
  transform: scale(0.98);
}

.chat-graph-tutorial-card__btn:disabled {
  cursor: default;
  opacity: 0.62;
}

.chat-graph-tutorial-card__btn--primary {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--glass-edge));
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--accent) 28%, var(--glass-chat-body)),
    color-mix(in srgb, var(--accent) 12%, var(--glass-chat-body))
  );
}

.chat-graph-tutorial-card__btn--selected {
  border-color: color-mix(in srgb, var(--accent) 72%, var(--glass-edge));
  box-shadow:
    var(--glass-inset),
    0 0 16px color-mix(in srgb, var(--accent) 22%, transparent);
}

.chat-graph-tutorial-card__media {
  margin-top: 12px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--glass-edge) 58%, transparent);
  background: rgba(0, 0, 0, 0.24);
}

.chat-graph-tutorial-card__media img {
  display: block;
  width: 100%;
  height: auto;
}

body.theme-light .chat-msg--graph-tutorial .chat-graph-tutorial-card {
  background: color-mix(in srgb, var(--glass-chat-body) 88%, #fff);
  border-color: color-mix(in srgb, var(--accent) 22%, var(--border-light));
}

@keyframes graph-tutorial-modal-pulse {
  0%,
  100% {
    box-shadow: var(--glass-shadow), var(--glass-inset);
  }
  45% {
    box-shadow:
      0 0 0 2px color-mix(in srgb, var(--accent) 82%, transparent),
      0 0 34px color-mix(in srgb, var(--accent) 58%, transparent),
      var(--glass-shadow),
      var(--glass-inset);
  }
}

@keyframes graph-tutorial-job-spin {
  to {
    transform: rotate(360deg);
  }
}

.node-float-modal--tutorial-pulse {
  animation: graph-tutorial-modal-pulse 0.85s ease-in-out 3;
}

@keyframes graph-tutorial-links-pulse {
  0%,
  100% {
    box-shadow: inset 0 0 0 0 transparent;
  }
  45% {
    box-shadow:
      inset 0 0 0 2px color-mix(in srgb, var(--accent) 70%, transparent),
      0 0 42px color-mix(in srgb, var(--accent) 42%, transparent);
  }
}

#panel-graph.graph-tutorial-links-pulse {
  animation: graph-tutorial-links-pulse 0.8s ease-in-out 4;
}

@keyframes topbar-notif-tutorial-pulse {
  0%,
  100% {
    box-shadow: none;
    filter: none;
  }
  45% {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent);
    filter: drop-shadow(0 0 12px color-mix(in srgb, var(--accent) 62%, transparent));
  }
}

.topbar__notif-btn--tutorial-pulse {
  animation: topbar-notif-tutorial-pulse 0.8s ease-in-out 4;
}

.chat-msg__bubble {
  max-width: 90%;
  padding: 8px 12px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.55;
  word-break: break-word;
  white-space: pre-wrap;
}

.chat-msg--user .chat-msg__bubble {
  background: #ffffff2b;
  color: #fff;
  border-bottom-right-radius: 4px;
}

.chat-msg__bubble--explore-chip {
  max-width: 100%;
  white-space: normal;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--accent) 20%, #141820);
  border: 1px solid color-mix(in srgb, var(--accent) 42%, rgba(255, 255, 255, 0.08));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  border-bottom-right-radius: 6px;
}

.chat-explore-chip {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.chat-explore-chip__glyph {
  flex-shrink: 0;
  font-size: 15px;
  line-height: 1.45;
  opacity: 0.88;
  color: color-mix(in srgb, var(--accent) 80%, #e8ecf5);
}

.chat-explore-chip__text {
  font-size: 13px;
  line-height: 1.55;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #f2f4f8;
}

body.theme-light .chat-msg__bubble--explore-chip {
  background: color-mix(in srgb, var(--accent) 12%, #fff);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border-light));
  box-shadow: none;
}

body.theme-light .chat-explore-chip__text {
  color: var(--text-primary);
}

body.theme-light .chat-explore-chip__glyph {
  color: var(--accent);
}

.chat-msg--ai .chat-msg__bubble {
  /* background: var(--bg-panel-alt);
  border: 1px solid var(--border); */
  color: var(--text-primary);
  border-bottom-left-radius: 4px;
  /* pre-wrap: сохраняем пробелы и переносы в markdown-тексте (normal схлопывал пробелы в HTML). */
  white-space: pre-wrap;
  word-break: break-word;
}

.chat-msg__bubble p { margin: 0 0 6px; }
.chat-msg__bubble p:last-child { margin-bottom: 0; }
.chat-msg__bubble code {
  background: rgba(0,0,0,.3);
  border-radius: 3px;
  padding: 1px 4px;
  font-family: 'Courier New', monospace;
  font-size: 12px;
}
.chat-msg__bubble pre {
  background: rgba(0,0,0,.35);
  border-radius: 6px;
  padding: 8px 10px;
  overflow-x: auto;
  font-size: 12px;
  margin: 6px 0;
}
.chat-msg__bubble pre code { background: none; padding: 0; }

.chat-msg__time {
  font-size: 10px;
  color: var(--text-muted);
  padding: 0 4px;
}

.chat-msg__state {
  font-size: 10px;
  letter-spacing: .03em;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0 0 2px 4px;
  opacity: .9;
}

.chat-msg__state--thinking  { color: color-mix(in srgb, var(--accent) 78%, var(--text-secondary)); }
.chat-msg__state--searching { color: color-mix(in srgb, var(--accent) 74%, var(--text-secondary)); }
.chat-msg__state--routing   { color: color-mix(in srgb, var(--accent) 70%, var(--text-secondary)); }
.chat-msg__state--planning  { color: color-mix(in srgb, var(--accent) 66%, var(--text-secondary)); }
.chat-msg__state--analyzing { color: color-mix(in srgb, var(--accent) 82%, var(--text-secondary)); }
.chat-msg__state--writing   { color: color-mix(in srgb, var(--accent) 86%, var(--text-secondary)); }
.chat-msg__state--done      { color: var(--text-muted); opacity: .75; }

/* ─── Медиа-вложения в сообщении ─── */

.chat-msg__attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 90%;
  margin-bottom: 4px;
}

.chat-attach-thumb {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border-light);
  flex-shrink: 0;
  animation: chat-media-pop .28s ease both;
}

.chat-attach-thumb img,
.chat-attach-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.chat-attach-file {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--bg-panel-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 11px;
  color: var(--text-secondary);
  max-width: 200px;
  overflow: hidden;
}

.chat-attach-file__icon { font-size: 16px; flex-shrink: 0; }
.chat-attach-file__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Подпись узла в 3D (HTML внутри force-graph) */
.graph-3d-node-label {
  background: var(--glass-surface);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: 12px;
  color: var(--text-primary);
  max-width: 220px;
  line-height: 1.4;
  font-family: 'Segoe UI', system-ui, sans-serif;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow: var(--glass-shadow), var(--glass-inset);
}

.graph-node-tooltip {
  position: absolute;
  z-index: 40;
  max-width: 360px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  background: var(--glass-tooltip-bg);
  border: 1px solid var(--glass-edge);
  color: var(--text-primary);
  font-size: 11px;
  line-height: 1.35;
  white-space: normal;
  word-break: break-word;
  pointer-events: none;
  box-shadow: var(--glass-shadow), var(--glass-inset);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  transform: translate(-50%, -100%);
}

.node-modal-layer {
  isolation: isolate;
  pointer-events: none;
  /* Геометрия и z-index на десктопе: .workspace > .node-modal-layer в @media (min-width: 1024px) */
}

.node-connector-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.analysis-modal-connector {
  fill: none;
  stroke: color-mix(in srgb, var(--accent) 76%, #94f2ff 24%);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .9;
}

.analysis-linked-node-connector {
  stroke-dasharray: 7 5;
  opacity: .82;
}

.node-float-modal {
  position: absolute;
  width: min(440px, calc(100% - 32px));
  min-width: 440px;
  min-height: 540px;
  max-height: calc(100% - 24px);
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border-light) 82%, transparent);
  
  backdrop-filter: blur(22px) saturate(110%);
  -webkit-backdrop-filter: blur(22px) saturate(110%);
  box-shadow:
    0 16px 46px rgba(0, 0, 0, .44),
    inset 0 1px 0 rgba(255, 255, 255, .11);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.node-float-modal__head {
  cursor: move;
  user-select: none;
}
.node-float-modal__title {
  font-size: 12px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.node-float-modal__actions { display: flex; gap: 4px; }
.node-float-modal__btn {
  width: 26px;
  height: 24px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--ui-fast), filter var(--ui-fast);
}
.node-float-modal__btn:hover {
  color: var(--text-primary);
  filter: var(--ui-icon-glow);
}
.node-float-modal__body {
  overflow: auto;
  flex: 1;
  
}

.node-float-modal__resize-handle {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 14px;
  height: 14px;
  border: none;
  border-radius: 0;
  cursor: nwse-resize;
  opacity: .88;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23fff' stroke='%23fff' stroke-width='1.1' stroke-linejoin='round' stroke-linecap='round' d='M2 10 L10 10 L10 2 Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
}
.node-float-modal__resize-handle:hover {
  opacity: 1;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.35));
}

.node-float-modal--scene-max {
  border-radius: 12px;
  transform: none !important;
}
.node-float-modal--scene-max-split-left,
.node-float-modal--scene-max-split-right {
  box-sizing: border-box;
}
.node-float-modal--scene-max .node-float-modal__resize-handle {
  display: none;
}

body.chat-widget-scene-max.chat-widget-enabled .panel--chat > .panel__header {
  cursor: default;
}

/* Чат на весь scene-container — поверх оверлея графа, клики не уходят в плавающие контролы */
body.chat-widget-scene-max.chat-widget-enabled .panel--chat {
  z-index: 240;
  right: auto !important;
  bottom: auto !important;
  max-height: none !important;
  transform: none !important;
}
body.chat-widget-scene-max #panel-graph .graph-toolbar,
body.chat-widget-scene-max #panel-graph .graph-control-anchor,
.workspace:has(.node-float-modal--scene-max) #panel-graph .graph-toolbar,
.workspace:has(.node-float-modal--scene-max) #panel-graph .graph-control-anchor {
  pointer-events: none;
}

/* Архив диалога как плавающее окно (desktop, слой графа) */
.node-float-modal--chat-archive {
  width: min(680px, calc(100% - 28px));
  height: min(560px, calc(100% - 32px));
  min-width: 440px;
  min-height: 540px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease;
}
.node-float-modal--chat-archive.node-float-modal--visible {
  opacity: 1;
  transform: translateY(0);
}
.node-float-modal--chat-archive > .cmodal--in-float {
  flex: 1;
  min-width: 0;
  min-height: 0;
  width: 100%;
  max-width: none;
  max-height: none;
  border: none;
  border-radius: 0;
  transform: none;
  box-shadow: none;
}
.node-float-modal--chat-archive .cmodal__header {
  cursor: move;
  user-select: none;
}

.node-float-modal--analysis {
  width: min(440px, calc(100% - 36px));
  min-width: 440px;
  min-height: 540px;
}

.node-float-modal--analysis-unified {
  min-width: 480px;
  min-height: 560px;
}

.unified-analysis-scroll {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 4px;
}

.unified-analysis-intro {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted);
  margin: 0 0 2px;
}

.unified-analysis-section {
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 10px);
  padding: 10px 12px 12px;
}

.unified-analysis-section__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.unified-analysis-section__title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-primary);
}

.unified-analysis-section__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.unified-analysis-section__btn {
  flex-shrink: 0;
  border: 1px solid var(--border-light);
  background: color-mix(in srgb, var(--bg-hover) 70%, transparent);
  color: var(--text-secondary);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  font-family: inherit;
  transition:
    border-color var(--ui-fast),
    color var(--ui-fast),
    background var(--ui-fast);
}

.unified-analysis-section__btn:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border-light));
  color: var(--text-primary);
}

.unified-analysis-section__btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.unified-analysis-section__btn--primary {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--border-light));
  background: color-mix(in srgb, var(--accent) 12%, rgba(255, 255, 255, 0.04));
  color: var(--accent);
}

.unified-analysis-section__nodes-wrap {
  margin-bottom: 8px;
}

.unified-analysis-section__result {
  max-height: min(280px, 42vh);
}

.node-float-modal--analysis .analysis-child-modal__body {
  flex: 1;
  min-height: 0;
}

.analysis-child-modal__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  min-height: 0;
}

.analysis-child-modal__section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.analysis-child-modal__section--grow {
  flex: 1;
  min-height: 0;
}

.analysis-child-modal__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
}

.analysis-child-modal__label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.analysis-child-modal__label-row .analysis-child-modal__label {
  margin: 0;
}

.analysis-child-modal__refresh-btn {
  flex-shrink: 0;
  border: 1px solid var(--border-light);
  background: color-mix(in srgb, var(--bg-hover) 70%, transparent);
  color: var(--text-secondary);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition:
    border-color var(--ui-fast),
    color var(--ui-fast),
    background var(--ui-fast),
    opacity var(--ui-fast);
}
.analysis-child-modal__refresh-btn:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border-light));
  color: var(--text-primary);
  background: color-mix(in srgb, var(--bg-hover) 85%, var(--accent) 10%);
}
.analysis-child-modal__refresh-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.analysis-child-modal__refresh-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.analysis-child-modal__nodes-accordion {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.analysis-child-modal__nodes-accordion--collapsed .analysis-child-modal__node:nth-child(n + 6) {
  display: none;
}
/* Не как чипы: плоская «ссылка», без pill и без заливки-карточки */
.analysis-child-modal__nodes-toggle {
  align-self: flex-start;
  margin: 0;
  padding: 2px 0 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color var(--ui-fast), text-decoration-color var(--ui-fast);
}
.analysis-child-modal__nodes-toggle:hover {
  color: var(--text-primary);
  text-decoration-color: color-mix(in srgb, var(--accent) 85%, var(--text-primary));
}
.analysis-child-modal__nodes-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.analysis-child-modal__nodes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.analysis-child-modal__node {
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--border-light);
  background: color-mix(in srgb, var(--bg-hover) 78%, transparent);
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color var(--ui-fast), color var(--ui-fast), background var(--ui-fast);
}
.analysis-child-modal__node:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border-light));
  color: var(--text-primary);
  background: color-mix(in srgb, var(--bg-hover) 88%, var(--accent) 8%);
}
.analysis-child-modal__node:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.analysis-child-modal__result {
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 10px;
}

.analysis-child-modal__result--scroll {
  flex: 1;
  min-height: 140px;
  max-height: min(58vh, 480px);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

.analysis-child-modal__hint {
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted-fg, #8b93a7);
  margin-bottom: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(120, 140, 180, 0.12);
}

.analysis-child-modal__text {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-primary);
  white-space: pre-wrap;
}

/* ─── Markdown в модалке анализа (читабельная типографика) ─── */
.analysis-child-modal__md {
  font-size: 13px;
  line-height: 1.62;
  color: var(--text-primary);
  letter-spacing: 0.01em;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

.analysis-child-modal__md > *:first-child {
  margin-top: 0;
}

.analysis-child-modal__md .chat-md__h {
  line-height: 1.32;
  color: var(--text-primary);
  font-weight: 650;
  letter-spacing: -0.02em;
  margin: 14px 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid color-mix(in srgb, var(--border-light) 55%, transparent);
}

.analysis-child-modal__md .chat-md__h:first-child {
  margin-top: 0;
}

.analysis-child-modal__md .chat-md__h--2 {
  font-size: 15px;
  color: color-mix(in srgb, var(--text-primary) 96%, var(--accent));
}

.analysis-child-modal__md .chat-md__h--3 {
  font-size: 14px;
  border-bottom: none;
  padding-bottom: 0;
  opacity: 0.98;
}

.analysis-child-modal__md .chat-md__h--4 {
  font-size: 13px;
  border-bottom: none;
  padding-bottom: 0;
  margin-top: 12px;
  opacity: 0.95;
}

.analysis-child-modal__md .chat-md__p {
  margin: 0 0 10px;
  line-height: 1.65;
}

.analysis-child-modal__md .chat-md__p:last-child {
  margin-bottom: 0;
}

.analysis-child-modal__md .chat-md__hr {
  border: none;
  border-top: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border-light));
  margin: 16px 0;
  opacity: 0.9;
}

.analysis-child-modal__md ul.chat-md__ul,
.analysis-child-modal__md ol.chat-md__ol {
  margin: 8px 0 12px;
  padding-left: 1.35em;
}

.analysis-child-modal__md ul.chat-md__ul {
  list-style: none;
  padding-left: 0;
}

.analysis-child-modal__md ul.chat-md__ul li {
  position: relative;
  padding-left: 1.15em;
  margin: 6px 0;
}

.analysis-child-modal__md ul.chat-md__ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 75%, var(--text-muted));
  opacity: 0.9;
}

.analysis-child-modal__md ol.chat-md__ol {
  list-style: decimal;
  padding-left: 1.5em;
}

.analysis-child-modal__md ol.chat-md__ol li {
  margin: 6px 0;
  padding-left: 0.35em;
}

.analysis-child-modal__md li strong {
  color: color-mix(in srgb, var(--accent) 72%, var(--text-primary));
  font-weight: 600;
}

.analysis-child-modal__md strong {
  color: color-mix(in srgb, var(--accent) 78%, #fff);
  font-weight: 600;
}

.analysis-child-modal__md em {
  color: var(--text-secondary);
  font-style: italic;
}

.analysis-child-modal__md code {
  font-family: ui-monospace, 'Cascadia Code', 'Segoe UI Mono', monospace;
  font-size: 0.88em;
  padding: 0.12em 0.38em;
  border-radius: 5px;
  background: color-mix(in srgb, var(--bg-hover) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--border-light) 70%, transparent);
}

.analysis-child-modal__md .chat-md__pre {
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid color-mix(in srgb, var(--border-light) 55%, transparent);
  overflow-x: auto;
}

.analysis-child-modal__md .chat-md__pre code {
  display: block;
  padding: 0;
  border: none;
  background: none;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.analysis-child-modal__md .chat-md__bq,
.analysis-child-modal__md blockquote {
  border-left: 3px solid var(--accent);
  margin: 10px 0;
  padding: 6px 12px 6px 14px;
  border-radius: 0 8px 8px 0;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--text-secondary);
  font-style: italic;
}

body.theme-light .analysis-child-modal__md .chat-md__pre {
  background: color-mix(in srgb, var(--bg-panel-alt) 94%, #000);
}

.analysis-child-modal__loading {
  font-size: 12px;
  color: var(--text-secondary);
}

.analysis-child-modal__empty {
  font-size: 12px;
  color: var(--text-muted);
}

.analysis-child-modal__explore-btn {
  align-self: flex-start;
  border: 1px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--text-primary);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
}
.analysis-child-modal__explore-btn:hover { opacity: .9; }

.node-modal-dock {
  display: none;
  flex-wrap: wrap;
  gap: 6px;
  pointer-events: none;
  /* Позиция на десктопе: .workspace > .node-modal-dock в @media (min-width: 1024px) */
}
.node-modal-dock__item {
  pointer-events: auto;
  border: 1px solid color-mix(in srgb, var(--border-light) 64%, transparent);
  background: var(--glass-muted);
  color: var(--text-primary);
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 400;
  max-width: 280px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  animation: node-modal-dock-in 0.22s cubic-bezier(0.32, 0.72, 0, 1);
}

@keyframes node-modal-dock-in {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .node-modal-dock__item {
    animation: none;
  }
}

.node-modal-dock__item:hover { border-color: var(--accent); }

/* ─── Зона предпросмотра вложений (перед отправкой) ─── */

.chat-attachments {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 10px;
  border-top: 1px solid var(--border);
  /* background: var(--bg-panel-alt); */
  max-height: 100px;
  overflow-y: auto;
}

.chat-attach-preview {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border-light);
  flex-shrink: 0;
  animation: chat-media-pop .24s ease both;
}

.chat-attach-preview img,
.chat-attach-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.chat-attach-preview__remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 16px;
  height: 16px;
  background: rgba(0,0,0,.7);
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 9px;
  line-height: 16px;
  text-align: center;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-attach-file-preview {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 11px;
  color: var(--text-secondary);
  position: relative;
  max-width: 130px;
  height: 60px;
}

.chat-attach-file-preview__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.chat-attach-file-preview__remove {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 16px;
  height: 16px;
  background: var(--bg-active);
  border: 1px solid var(--border-light);
  border-radius: 50%;
  color: var(--text-muted);
  font-size: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ─── Область ввода ─── */

.chat-input-area {
  flex-shrink: 0;
  /* border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent); */
  background: color-mix(in srgb, var(--bg-panel) 18%, transparent);
  backdrop-filter: blur(14px) saturate(112%);
  -webkit-backdrop-filter: blur(14px) saturate(112%);
}

.chat-input-row {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 8px;
}

.chat-input-box {
  flex: 1;
  position: relative;
  background: color-mix(in srgb, var(--bg-panel) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--border-light) 82%, transparent);
  backdrop-filter: blur(10px) saturate(108%);
  -webkit-backdrop-filter: blur(10px) saturate(108%);
  border-radius: 12px;
  padding: 8px 38px 8px 12px;
  transition: border-color var(--ui-fast), box-shadow var(--ui-fast), background var(--ui-fast);
  min-height: 40px;
  max-height: 120px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 4px;
}

.chat-input-box .chat-textarea {
  flex: 0 1 auto;
  min-height: 1.5em;
}

.chat-voice-spectrum-wrap {
  flex-shrink: 0;
  width: 100%;
  height: 28px;
  border-radius: 6px;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent) 8%, transparent) 0%,
    color-mix(in srgb, var(--bg-panel) 55%, transparent) 100%
  );
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent) inset;
  pointer-events: none;
}

.chat-voice-spectrum-wrap[hidden] {
  display: none !important;
}

.chat-voice-spectrum-canvas {
  display: block;
  width: 100%;
  height: 28px;
  mix-blend-mode: screen;
  opacity: 0.95;
}

.chat-input-box:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-glow) inset, 0 0 14px color-mix(in srgb, var(--accent) 24%, transparent);
}

.chat-textarea {
  width: 100%;
  background: none;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
  line-height: 1.5;
  resize: none;
  scrollbar-width: thin;
  scrollbar-color: var(--border-light) transparent;
  max-height: 100px;
  overflow-y: auto;
  padding: 0;
  margin: 0;
}

.chat-textarea::placeholder {
  color: var(--text-muted);
}

@keyframes chat-stt-pulse {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

.chat-textarea.chat-textarea--stt-pending::placeholder {
  color: #fff;
  animation: chat-stt-pulse 1.25s ease-in-out infinite;
}

.chat-send-btn,
.chat-voice-btn {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--accent);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  transition: color var(--ui-fast), transform var(--ui-fast), filter var(--ui-fast);
}

.chat-send-btn:hover,
.chat-voice-btn:hover {
  color: var(--text-primary);
  transform: scale(1.07);
}

.chat-send-btn:hover svg,
.chat-voice-btn:hover svg {
  filter: var(--ui-icon-glow-strong);
}

.chat-send-btn:active,
.chat-voice-btn:active { transform: scale(.95); }

.chat-send-btn svg,
.chat-voice-btn svg {
  width: 16px;
  height: 16px;
  transition: filter var(--ui-fast);
}

.chat-send-btn:disabled,
.chat-voice-btn:disabled {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: default;
  transform: none;
  filter: none;
}

.chat-send-btn:disabled svg,
.chat-voice-btn:disabled svg {
  filter: none;
}

.chat-voice-btn--dictating {
  color: var(--accent) !important;
  border-color: var(--accent) !important;
  background: color-mix(in srgb, var(--bg-panel) 50%, transparent) !important;
  animation: chat-send-dictate-pulse 1s ease-in-out infinite;
}

@keyframes chat-send-dictate-pulse {
  0%,
  100% {
    box-shadow:
      0 0 0 1px var(--accent-glow) inset,
      0 0 10px color-mix(in srgb, var(--accent) 28%, transparent);
  }
  50% {
    box-shadow:
      0 0 0 1px var(--accent-glow) inset,
      0 0 18px color-mix(in srgb, var(--accent) 42%, transparent);
  }
}

.chat-input-actions {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
}

.chat-tool-btn--attach {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease;
}

.chat-tool-btn--attach:hover {
  color: var(--text-primary);
}

.chat-tool-btn--attach:hover svg {
  filter: var(--ui-icon-glow);
}

.chat-tool-btn--attach svg {
  width: 16px;
  height: 16px;
}

.chat-attach-popover {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  min-width: 160px;
  display: none;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--border-light) 70%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-panel) 82%, transparent);
  backdrop-filter: blur(24px) saturate(120%);
  -webkit-backdrop-filter: blur(24px) saturate(120%);
  box-shadow:
    0 2px 0 0 color-mix(in srgb, var(--border-light) 40%, transparent) inset,
    0 16px 40px rgba(0, 0, 0, 0.55),
    0 4px 12px rgba(0, 0, 0, 0.35);
  z-index: 22;
}

.chat-attach-popover--open {
  display: grid;
  gap: 4px;
}

.chat-attach-popover__item {
  border: 1px solid transparent;
  border-radius: 9px;
  background: color-mix(in srgb, var(--bg-panel) 40%, transparent);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.chat-attach-popover__item:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border-light));
  background: color-mix(in srgb, var(--bg-panel) 65%, transparent);
  color: var(--text-primary);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 15%, transparent);
}

.chat-attach-popover__icon {
  width: 16px;
  text-align: center;
}

/* ─── Тулбар инструментов ─── */

.chat-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 8px 8px;
  /* intentionally no background */
}

.chat-mode-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 4px;
  padding: 2px 4px 2px 8px;
  height: 28px;
  border: 1px solid var(--glass-input-border);
  border-radius: var(--radius-sm);
  background: var(--glass-input-bg);
  box-shadow: var(--glass-inset);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
}

.chat-mode-switch:hover {
  border-color: color-mix(in srgb, var(--border-light) 55%, var(--glass-input-border));
  background: color-mix(in srgb, var(--glass-veil-hover) 40%, var(--glass-input-bg));
}

.chat-mode-switch__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  font-weight: 700;
}

.chat-mode-switch .chat-mode-switch__select {
  flex: 1;
  min-width: 0;
  margin: 0;
  border: none;
  border-radius: var(--radius-xs);
  background-color: transparent;
  background-image: var(--ui-select-chevron);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 22px 4px 2px;
  background-position: right 4px center;
}

.chat-mode-switch .chat-mode-switch__select:hover {
  border-color: transparent;
  color: var(--text-primary);
  background-color: transparent;
}

.chat-mode-switch:has(.chat-mode-switch__select:focus-visible) {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-glow), var(--glass-inset);
}

.chat-mode-switch .chat-mode-switch__select:focus-visible {
  border-color: transparent;
  box-shadow: none;
}

.chat-mode-switch--drawer .chat-mode-switch__select {
  padding: 3px 22px 3px 2px;
  font-size: 10px;
  background-position: right 3px center;
}

.chat-toolbar__spacer { flex: 1; }

.chat-tool-btn {
  width: 30px;
  height: 30px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--ui-fast);
}

.chat-tool-btn:hover {
  color: var(--text-primary);
}

.chat-tool-btn:hover svg {
  filter: var(--ui-icon-glow);
}

.chat-tool-btn svg {
  width: 15px;
  height: 15px;
  transition: filter var(--ui-fast);
}

/* ─── Ход ответа: только текст, <details> свёрнут по умолчанию ─── */

.chat-msg--streaming .chat-msg__bubble--empty {
  display: none;
}

.chat-reasoning-wrap {
  margin: 0 0 4px 2px;
  max-width: min(100%, 440px);
}

details.chat-reasoning {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
}

.chat-reasoning {
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.chat-reasoning__summary {
  cursor: pointer;
  list-style: none;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
  padding: 0;
  transition: color 0.12s ease;
}

.chat-reasoning__summary::-webkit-details-marker {
  display: none;
}

.chat-reasoning__summary::before {
  content: '▸';
  display: inline-block;
  margin-right: 6px;
  font-size: 9px;
  opacity: 0.55;
  transition: transform 0.15s ease;
}

details.chat-reasoning[open] > .chat-reasoning__summary::before {
  transform: rotate(90deg);
}

.chat-reasoning__summary:hover {
  color: var(--text-secondary);
}

.chat-reasoning__live-line {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4em;
  font-variant-numeric: tabular-nums;
  min-height: 1.2em;
}

.chat-reasoning__status {
  min-width: 0;
}

.chat-reasoning__spinner {
  display: inline-block;
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  border: 2px solid color-mix(in srgb, var(--text-muted) 28%, transparent);
  border-top-color: color-mix(in srgb, var(--accent) 65%, var(--text-muted));
  border-radius: 50%;
  animation: chat-reasoning-spin 1.85s linear infinite;
  vertical-align: middle;
}

.chat-reasoning__spinner[hidden] {
  display: none !important;
}

@keyframes chat-reasoning-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .chat-reasoning__spinner {
    animation: none;
    border-color: color-mix(in srgb, var(--text-muted) 45%, transparent);
    border-top-color: color-mix(in srgb, var(--accent) 50%, var(--text-muted));
  }
}

.chat-reasoning__steps {
  list-style: none;
  margin: 6px 0 0;
  padding: 0 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.chat-reasoning__step {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 0;
}

.chat-reasoning__step--done {
  opacity: 0.92;
}

.chat-reasoning__step-label {
  color: var(--text-secondary);
  flex: 1;
  min-width: 0;
}

.chat-reasoning__step-dur {
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  flex-shrink: 0;
}

.chat-reasoning__step-dur--live {
  color: color-mix(in srgb, var(--text-muted) 80%, var(--accent) 20%);
}

.chat-reasoning__done-list {
  margin: 6px 0 0;
  padding: 0 0 0 16px;
  color: var(--text-secondary);
  font-size: 11px;
}

.chat-reasoning__done-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 3px 0;
}

.chat-reasoning__done-dur {
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* ─── Стриминг текста ─── */

@keyframes stream-chunk-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.stream-chunk {
  animation: stream-chunk-in 0.2s ease forwards;
  white-space: pre-wrap;
}

@keyframes stream-cursor-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

.stream-cursor {
  display: inline-block;
  color: color-mix(in srgb, var(--accent) 78%, var(--text-secondary));
  animation: stream-cursor-blink 0.85s step-end infinite;
  margin-left: 1px;
  font-weight: 300;
  user-select: none;
}

@keyframes chat-media-pop {
  from { opacity: 0; transform: scale(.94) translateY(4px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ─── Markdown в ответе ИИ ─── */

.chat-msg__bubble ul,
.chat-msg__bubble ol {
  padding-left: 18px;
  margin: 4px 0;
}

.chat-msg__bubble li { margin: 2px 0; }

.chat-msg__bubble h1,
.chat-msg__bubble h2,
.chat-msg__bubble h3 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 8px 0 4px;
}

.chat-msg__bubble .chat-md__h {
  line-height: 1.35;
  color: var(--text-primary);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 10px 0 6px;
}
.chat-msg__bubble .chat-md__h:first-child { margin-top: 0; }
.chat-msg__bubble .chat-md__h--2 { font-size: 15px; }
.chat-msg__bubble .chat-md__h--3 { font-size: 14px; opacity: 0.98; }
.chat-msg__bubble .chat-md__h--4 { font-size: 13px; opacity: 0.95; }

.chat-msg__bubble .chat-md__p {
  margin: 0 0 8px;
  line-height: 1.6;
}
.chat-msg__bubble .chat-md__p:last-child { margin-bottom: 0; }

.chat-msg__bubble .chat-md__hr {
  border: none;
  border-top: 1px solid var(--border-light);
  margin: 12px 0;
  opacity: 0.85;
}

.chat-msg__bubble .chat-md__pre {
  margin: 8px 0;
}

.chat-msg__bubble strong { color: color-mix(in srgb, var(--accent) 84%, #ffffff); font-weight: 600; }
.chat-msg__bubble em { color: var(--text-secondary); font-style: italic; }

.chat-msg__bubble blockquote,
.chat-msg__bubble .chat-md__bq {
  border-left: 3px solid var(--accent);
  margin: 6px 0;
  padding: 4px 10px;
  color: var(--text-secondary);
  font-style: italic;
}

/* ─── Premium blocks (callouts, checklists) ─── */

.chat-msg__bubble .chat-md__callout {
  border: 1px solid color-mix(in srgb, var(--border-light) 72%, transparent);
  background: rgba(255,255,255,0.03);
  border-radius: 12px;
  padding: 10px 12px;
  margin: 10px 0;
  box-shadow: 0 12px 28px rgba(0,0,0,0.22);
}
.chat-msg__bubble .chat-md__callout-title {
  font-weight: 650;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}
.chat-msg__bubble .chat-md__callout-body {
  line-height: 1.55;
  color: color-mix(in srgb, var(--text-primary) 86%, var(--text-secondary));
}
.chat-msg__bubble .chat-md__callout--warn  { border-color: color-mix(in srgb, var(--accent) 55%, var(--border-light)); }
.chat-msg__bubble .chat-md__callout--danger{ border-color: color-mix(in srgb, #ff5b7a 55%, var(--border-light)); }
.chat-msg__bubble .chat-md__callout--success{ border-color: color-mix(in srgb, #65ffb3 40%, var(--border-light)); }
.chat-msg__bubble .chat-md__callout--steps { border-color: color-mix(in srgb, #5fd1ff 45%, var(--border-light)); }

.chat-msg__bubble .chat-md__checklist {
  list-style: none;
  padding: 0;
  margin: 8px 0;
  display: grid;
  gap: 6px;
}
.chat-msg__bubble .chat-md__check-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.chat-msg__bubble .chat-md__check {
  width: 16px;
  height: 16px;
  border-radius: 6px;
  margin-top: 2px;
  border: 1px solid color-mix(in srgb, var(--border-light) 72%, transparent);
  background: rgba(255,255,255,0.03);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.18);
  flex: 0 0 auto;
  position: relative;
}
.chat-msg__bubble .chat-md__check--on {
  border-color: color-mix(in srgb, var(--accent) 64%, var(--border-light));
  background: color-mix(in srgb, var(--accent) 18%, rgba(255,255,255,0.03));
}
.chat-msg__bubble .chat-md__check--on::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 12px;
  line-height: 1;
  color: color-mix(in srgb, var(--accent) 86%, #ffffff);
  font-weight: 700;
}
.chat-msg__bubble .chat-md__check-text {
  line-height: 1.55;
}

/* ─── Уведомление об ошибке ─── */

.chat-msg__error {
  font-size: 11px;
  color: color-mix(in srgb, var(--accent) 72%, var(--text-primary));
  padding: 4px 8px;
}

/* ─── Мобильная навигация: вкладка чата ─── */


/* ─── Dev mode bar (temporary) ─── */

.dev-mode-bar {
  position: fixed;
  top: 8px;
  right: 8px;
  z-index: 99999;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 11px;
  color: #8892aa;
}

.dev-mode-label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}

.dev-mode-label input[type="checkbox"] {
  accent-color: #5b8dee;
}

.dev-mode-run {
  padding: 3px 10px;
  background: rgba(91, 141, 238, 0.2);
  border: 1px solid rgba(91, 141, 238, 0.3);
  border-radius: 6px;
  color: #a0bfff;
  font-size: 11px;
  cursor: pointer;
  transition: background 0.2s;
}

.dev-mode-run:hover {
  background: rgba(91, 141, 238, 0.35);
}

/* Style lock: prevent legacy theme color drift */
body.theme-light,
body.theme-glass {
  --bg-base: #080807;
  
  --bg-panel-alt: #181716;
  --bg-hover: #1f1e1c;
  --bg-active: #282624;
  --border: rgba(255, 255, 255, 0.10);
  --border-light: rgba(255, 255, 255, 0.16);
  --text-primary: rgba(250, 248, 244, 0.92);
  --text-secondary: rgba(224, 220, 212, 0.72);
  --text-muted: rgba(190, 185, 176, 0.50);
  --accent: #d4d1cc;
  --accent-glow: rgba(212, 209, 204, 0.26);
}

/* Visual-only refresh: no layout changes */
.topbar__search,
.topbar__search-input,
.profile-shell__tab,
.profile-shell__btn,
.chat-archive-btn,
.smodal__tab,
.smodal__theme-pill,
.smodal__input,
.smodal__color-input,
.smodal__toggle-track,
.graph-search__input,
.pin-modal__input,
.cmodal__action,
.node-card__personal-btn {
  border-color: var(--glass-edge);
  background: var(--glass-veil);
  color: var(--text-secondary);
}

.profile-shell__tab:hover,
.profile-shell__btn:hover,
.chat-archive-btn:hover,
.smodal__tab:hover,
.smodal__theme-pill:hover,
.cmodal__action:hover,
.node-card__personal-btn:hover {
  color: var(--text-primary);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-glow) inset, 0 0 20px rgba(215, 219, 224, 0.14);
}

.cmodal,
.smodal,
.auth-modal,
.pin-modal,
.timeline-modal,
.graph-legend {
  background: var(--glass-surface);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow), var(--glass-inset);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
}

.panel__title,
.smodal__section-title,
.smodal__subsection-title,
.timeline-modal__title,
.cmodal__title,
.auth-title {
  font-weight: 600;
  letter-spacing: .02em;
}

.smodal-overlay,
.cmodal-overlay,
.auth-overlay,
.pin-modal-overlay,
.timeline-overlay,
.drawer-backdrop {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Тёмная тема: чат-колонка остаётся «оболочкой» без blur на всей ширине */
body:not(.theme-light) .panel--chat {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body:not(.theme-light) .panel--chat .chat-panel {
  background: var(--glass-chat-body);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
}

.graph-3d-radial-menu {
  --menu-radius: 94px;
  --plate-size: 62px;
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  z-index: 1200;
  pointer-events: none;
}
.graph-3d-radial-menu--open {
  pointer-events: auto;
}
.graph-3d-radial-menu::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(184, 227, 255, 0.95) 0%, rgba(132, 193, 255, 0.45) 45%, rgba(132, 193, 255, 0) 78%);
  box-shadow: 0 0 22px rgba(151, 208, 255, 0.45);
}
.graph-3d-radial-menu__item {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--plate-size);
  height: var(--plate-size);
  border-radius: 999px;
  border: 1px solid rgba(212, 233, 255, 0.38);
  background: linear-gradient(140deg, rgba(218, 236, 255, 0.22), rgba(154, 197, 235, 0.1));
  color: #eef7ff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -14px 28px rgba(11, 24, 43, 0.24),
    0 14px 34px rgba(4, 9, 18, 0.35);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease, background .2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.graph-3d-radial-menu__item:hover {
  border-color: rgba(227, 243, 255, 0.82);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -18px 30px rgba(10, 23, 40, 0.2),
    0 18px 36px rgba(3, 8, 16, 0.46);
  background: linear-gradient(140deg, rgba(228, 242, 255, 0.3), rgba(170, 209, 244, 0.16));
}
.graph-3d-radial-menu__item::after {
  content: attr(aria-label);
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  transform: translateX(-50%);
  padding: 4px 8px;
  border-radius: 10px;
  font-size: 11px;
  line-height: 1.25;
  color: #eaf4ff;
  background: rgba(8, 14, 23, 0.88);
  border: 1px solid rgba(183, 216, 248, 0.36);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.graph-3d-radial-menu__item:hover::after,
.graph-3d-radial-menu__item:focus-visible::after {
  opacity: 1;
}
.graph-3d-radial-menu__item:focus-visible {
  outline: 2px solid rgba(163, 212, 255, 0.95);
  outline-offset: 2px;
}
.graph-3d-radial-menu__icon {
  font-size: 24px;
  line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(7, 18, 31, 0.45));
}
.graph-3d-radial-menu__item[data-act="send-analysis"] {
  transform: translate(-50%, calc(-50% - var(--menu-radius)));
}
.graph-3d-radial-menu__item[data-act="discuss"] {
  transform: translate(calc(-50% + var(--menu-radius)), -50%);
}
.graph-3d-radial-menu__item[data-act="delete"] {
  transform: translate(-50%, calc(-50% + var(--menu-radius)));
  border-color: rgba(255, 184, 184, 0.45);
  background: linear-gradient(140deg, rgba(255, 224, 224, 0.22), rgba(232, 142, 142, 0.11));
}
.graph-3d-radial-menu__item[data-act="delete"]:hover {
  border-color: rgba(255, 207, 207, 0.82);
  background: linear-gradient(140deg, rgba(255, 235, 235, 0.3), rgba(238, 160, 160, 0.16));
}
.graph-3d-radial-menu__item[data-act="relation-analysis"] {
  transform: translate(calc(-50% - var(--menu-radius)), -50%);
}

@media (max-width: 767px) {
  .graph-3d-radial-menu {
    --menu-radius: 76px;
    --plate-size: 56px;
  }
  .graph-3d-radial-menu__item {
    width: var(--plate-size);
    height: var(--plate-size);
  }
  .graph-3d-radial-menu__icon {
    font-size: 21px;
  }
}

.graph-3d-relation-drag-layer {
  position: fixed;
  inset: 0;
  z-index: 1250;
  pointer-events: none;
}
.graph-3d-relation-drag-layer__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.graph-3d-relation-drag-layer__line {
  stroke: rgba(202, 231, 255, 0.9);
  stroke-width: 1.7;
  stroke-dasharray: 5 6;
  filter: drop-shadow(0 0 6px rgba(154, 213, 255, 0.45));
}
.graph-3d-relation-drag-layer__ghost {
  position: fixed;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.05);
  border: 2px solid rgba(218, 240, 255, 0.86);
  backdrop-filter: blur(8px) saturate(130%);
  -webkit-backdrop-filter: blur(8px) saturate(130%);
  box-shadow: inset 0 0 0 3px rgba(123, 186, 242, 0.16), 0 0 16px rgba(126, 192, 255, 0.42);
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.graph-3d-relation-drag-layer__ghost--locked {
  border-color: rgba(231, 247, 255, 0.96);
  box-shadow: inset 0 0 0 4px rgba(145, 205, 255, 0.24), 0 0 22px rgba(142, 207, 255, 0.55);
  transform: translate(-50%, -50%) scale(1.06);
}

.graph-3d-relation-confirm {
  position: fixed;
  inset: 0;
  z-index: 1300;
}
.graph-3d-relation-confirm__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 10, 18, 0.38);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.graph-3d-relation-confirm__card {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(420px, calc(100vw - 28px));
  border-radius: 16px;
  border: 1px solid rgba(198, 226, 253, 0.46);
  background: linear-gradient(140deg, rgba(222, 237, 255, 0.22), rgba(167, 202, 232, 0.1));
  backdrop-filter: blur(16px) saturate(132%);
  -webkit-backdrop-filter: blur(16px) saturate(132%);
  box-shadow: 0 20px 46px rgba(4, 10, 18, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.36);
  padding: 14px 14px 12px;
  color: #e9f4ff;
}
.graph-3d-relation-confirm__title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
}
.graph-3d-relation-confirm__text {
  font-size: 13px;
  line-height: 1.42;
  color: rgba(233, 244, 255, 0.95);
}
.graph-3d-relation-confirm__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}
.graph-3d-relation-confirm__btn {
  border: 1px solid rgba(182, 215, 246, 0.44);
  background: rgba(17, 29, 46, 0.66);
  color: #e9f4ff;
  border-radius: 10px;
  height: 30px;
  padding: 0 12px;
  cursor: pointer;
}
.graph-3d-relation-confirm__btn--ok {
  border-color: rgba(164, 220, 255, 0.74);
  background: rgba(57, 128, 191, 0.36);
}

@media (max-width: 1024px) {
  .timeline-overlay {
    inset: var(--mobile-topbar-h) 0 var(--mobile-bottom-nav-h) 0;
    padding: 8px;
    z-index: 180;
  }

  .timeline-modal {
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 18px;
    background: var(--glass-surface);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  }

  .graph-3d-radial-menu {
    --menu-radius: 82px;
    --plate-size: 58px;
  }
}