/*
 * SLAVA — RESTRAINT (Direction A v0.1)
 *
 * Anchored on Slava Kornilov's Nothing OS Concept (#221) + MIX №1 (#224).
 *
 * Principle: less, not more. The graph and nodes are the heroes; the chrome
 * disappears into the background. Where Editorial leaned on saturated color
 * and heavy display type EVERYWHERE, Restraint dials all of that down to
 * "barely there" and lets the working surface breathe.
 *
 * Signature moves:
 *   • Translucent dark-glass panels (backdrop-filter blur) — chrome reads
 *     as a quiet overlay on the canvas, not as opaque slabs
 *   • Single accent color — used ONLY for focus rings, primary CTA,
 *     selected state. Everything else is monochrome.
 *   • Clean grotesk for body text + headers; NOT extreme weight
 *   • Bold-then-light same-paragraph two-tone in headlines (Slava's
 *     characteristic Nothing-OS hierarchy)
 *   • Gently rounded corners (Nothing's soft glass shape — 12px panels,
 *     8px nodes), distinct from Editorial's sharp editorial poster
 *   • Dot-matrix-style display reserved ONLY for the wordmark + a few
 *     tabular numeric readouts. Never on body text or headers.
 *   • Category colors stay quiet — small 3px left-edge stripe on nodes,
 *     not a full flood
 *   • Round handles (returns the Nothing soft-glass language)
 *
 * Scope: every selector starts with `body.app-slava-restraint`. Shared
 * tokens (App.css, layouts.css, panels.css base) are NOT touched.
 */

/* ─────────────────────────────────────────────────────────────────────
 * Palette tokens (scoped — do not leak)
 * ───────────────────────────────────────────────────────────────────── */
body.app-slava-restraint {
  /* Canvas — true black (Flora-influenced v0.2). The dot-grid texture
   * is barely visible against this; the visual heroes are the nodes
   * (with their preview content) and their connections. */
  --sr-canvas: #000000;
  --sr-canvas-elevated: #060607;
  --sr-canvas-phosphor: #C9CAC8;
  --sr-canvas-dot-color: rgba(201, 202, 200, 0.15);
  --sr-canvas-dot-color-soft: rgba(201, 202, 200, 0.075);
  --sr-canvas-dot-step: 16px;
  --sr-canvas-dot-size: 1.2px;

  /* Glass surfaces — transparent enough that the canvas shows through
   * with the backdrop-filter blur. */
  --sr-glass: rgba(22, 22, 24, 0.66);
  --sr-glass-raised: rgba(28, 28, 31, 0.78);
  --sr-glass-strong: rgba(36, 36, 40, 0.86);

  /* Hairline edges — very low alpha white for definition. */
  --sr-edge: rgba(255, 255, 255, 0.06);
  --sr-edge-strong: rgba(255, 255, 255, 0.12);

  /* Inks (text on dark surfaces) — bold + light pair drives the two-tone
   * same-paragraph hierarchy from Nothing OS. */
  --sr-ink: rgba(255, 255, 255, 0.92);          /* primary type */
  --sr-ink-bold: #FFFFFF;                       /* the BOLD half of two-tone */
  --sr-ink-light: rgba(255, 255, 255, 0.55);    /* the LIGHT half of two-tone */
  --sr-ink-meta: rgba(255, 255, 255, 0.40);     /* metadata, secondary */
  --sr-ink-faint: rgba(255, 255, 255, 0.20);    /* footers, tertiary */

  /* Single accent — Nothing-orange placeholder. Used only for focus,
   * primary CTA, selected state. Never as a ground. */
  --sr-accent: #FF5A1F;
  --sr-accent-hover: #ff6b34;
  --sr-accent-soft: rgba(255, 90, 31, 0.10);
  --sr-accent-border-soft: rgba(255, 90, 31, 0.22);
  --sr-accent-border-muted: rgba(255, 90, 31, 0.28);
  --sr-accent-border: rgba(255, 90, 31, 0.34);
  --sr-accent-border-medium: rgba(255, 90, 31, 0.36);
  --sr-accent-border-strong: rgba(255, 90, 31, 0.45);
  --sr-accent-hover-soft: rgba(255, 90, 31, 0.16);
  --sr-on-accent: #0A0A0B;

  --sr-warning: #F5C518;
  --sr-warning-soft: rgba(245, 197, 24, 0.12);
  --sr-error: var(--sr-accent);
  --sr-error-soft: var(--sr-accent-soft);
  --sr-error-border: var(--sr-accent-border);
  --sr-danger: var(--sr-error);
  --sr-danger-soft: var(--sr-error-soft);
  --sr-danger-border: var(--sr-error-border);
  --sr-success: rgba(110, 231, 183, 0.90);
  --sr-success-soft: rgba(110, 231, 183, 0.12);
  --sr-pending: var(--sr-ink-light);
  --sr-pending-soft: rgba(255, 255, 255, 0.06);
  --sr-disabled-opacity: 0.48;
  --sr-disabled-opacity-strong: 0.36;
  --sr-disabled-opacity-muted: 0.50;

  /* Brand-surface palette — Crab (M1, NN-45) gradient, radial.
   * BRAND SURFACES ONLY — README hero, OG card, swag, in-app splash.
   * Product UI keeps --sr-accent (#FF5A1F). Per the brand guide:
   * "the brand can sing, the product has to work." */
  --nn-crab-peak: rgb(180, 240, 250);  /* t=0.00 · interior */
  --nn-crab-teal: rgb(120, 220, 200);  /* t=0.32 · mid */
  --nn-crab-warm: rgb(240, 150, 90);   /* t=0.62 · filaments */
  --nn-crab-void: rgb(120,  50, 30);   /* t=1.00 · outer falloff */
  --nn-crab-gradient: radial-gradient(
    closest-side,
    var(--nn-crab-peak) 0%,
    var(--nn-crab-teal) 32%,
    var(--nn-crab-warm) 62%,
    var(--nn-crab-void) 100%
  );

  /* Type system — clean grotesk only, no display heavy. The dot-matrix
   * face is reserved for the wordmark and tabular numerics. */
  --sr-ui: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --sr-mono: 'JetBrains Mono', 'IBM Plex Mono', 'SF Mono', Menlo, monospace;
  --sr-type-micro: 9px;
  --sr-type-meta: 10px;
  --sr-type-label: 11px;
  --sr-type-body: 12px;
  --sr-type-control: 13px;
  --sr-type-action: 14px;
  --sr-type-title: 15px;
  --sr-icon-size-sm: 12px;
  --sr-icon-size: 16px;
  --sr-icon-size-lg: 18px;
  --sr-icon-stroke: 1.75;
  --sr-type-icon: var(--sr-icon-size);
  --sr-type-icon-lg: var(--sr-icon-size-lg);
  --sr-line-tight: 1;
  --sr-line-compact: 1.2;
  --sr-line-meta: 1.4;
  --sr-line-body: 1.45;
  --sr-line-bubble: 1.48;
  --sr-line-relaxed: 1.5;

  /* Slava layout contract — shared across panels, chat, settings, toolbar,
   * inspector, and node chrome. Component rules consume these instead of
   * inventing one-off sizes. */
  --toolbar-pad: 64px;
  --sr-space-1: 4px;
  --sr-space-2: 8px;
  --sr-space-3: 12px;
  --sr-space-4: 16px;
  --sr-space-5: 20px;
  --sr-space-6: 24px;

  /* Soft-glass corner radii — Nothing's signature gentle rounding. */
  --sr-radius-panel: 12px;
  --sr-radius-node: 8px;
  --sr-radius-control: 8px;
  --sr-radius-control-lg: 10px;
  --sr-radius-pill: 999px;

  --sr-control-h-xs: 24px;
  --sr-control-h-sm: 28px;
  --sr-control-h-md: 34px;
  --sr-control-h-lg: 42px;
  --sr-control-pad-x: 10px;
  --sr-control-pad-y: 7px;

  --sr-surface-control: rgba(0, 0, 0, 0.30);
  --sr-surface-control-hover: rgba(255, 255, 255, 0.05);
  --sr-surface-control-active: rgba(255, 255, 255, 0.10);
  --sr-surface-control-focus: rgba(0, 0, 0, 0.45);

  --sr-blur-panel: blur(24px) saturate(140%);
  --sr-blur-pill: blur(20px) saturate(140%);
  --sr-shadow-panel:
    0 1px 0 0 rgba(255, 255, 255, 0.05) inset,
    0 12px 36px rgba(0, 0, 0, 0.55);
  --sr-shadow-panel-sm:
    0 1px 0 0 rgba(255, 255, 255, 0.06) inset,
    0 8px 24px rgba(0, 0, 0, 0.55);
  --sr-shadow-popover: 0 12px 28px rgba(0, 0, 0, 0.36);
  --sr-blur-node: blur(20px) saturate(140%);
  --sr-shadow-node:
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 8px 24px rgba(0, 0, 0, 0.65);
  --sr-shadow-node-media:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 10px 30px rgba(0, 0, 0, 0.62);
  --sr-shadow-node-media-selected:
    0 0 0 1.5px var(--node-category-color, var(--sr-accent)),
    0 0 22px color-mix(in srgb, var(--node-category-color, var(--sr-accent)) 36%, transparent),
    0 10px 30px rgba(0, 0, 0, 0.62);

  --sr-node-pad-top: 38px;
  --sr-node-type-label-top: 14px;
  --sr-node-card-border-mix: 20%;
  --sr-node-category-fallback: rgba(255, 255, 255, 0.40);
  --sr-node-card-selected-border-width: 1.5px;
  --sr-node-ring-width: 1px;
  --sr-node-header-padding: var(--sr-space-2) var(--sr-space-3);
  --sr-node-header-gap: var(--sr-space-2);
  --sr-node-header-gradient: linear-gradient(to bottom, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 100%);
  --sr-node-port-padding: 6px 0 10px;
  --sr-node-port-row-padding: 3px 14px;
  --sr-node-preview-bg: rgba(0, 0, 0, 0.55);
  --sr-node-preview-overlap: -32px;
  --sr-node-media-radius: 14px;
  --sr-node-media-bg: rgba(255, 255, 255, 0.04);
  --sr-node-streaming-outline: 1px dashed rgba(255, 255, 255, 0.32);
  --sr-node-streaming-outline-offset: -1px;
  --sr-node-scrollbar-color: rgba(255, 255, 255, 0.18);

  --sr-node-pill-top: var(--sr-space-1);
  --sr-node-pill-button-size: 22px;
  --sr-node-pill-expanded-gap: var(--sr-space-2);
  --sr-node-pill-expanded-padding: 3px 4px 3px 12px;
  --sr-node-pill-label-max: 220px;
  --sr-node-pill-bg: rgba(20, 20, 22, 0.78);
  --sr-node-pill-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
  --sr-node-pill-motion: 180ms ease;
  --sr-node-pill-label-motion: 200ms ease;
  --sr-node-pill-label-opacity-motion: 160ms ease 40ms;

  --sr-node-enter-duration: 220ms;
  --sr-node-enter-blur: 3px;
  --sr-node-enter-ring-size: 10px;
  --sr-node-enter-glow-size: 34px;
  --sr-node-enter-ring-mix: 20%;
  --sr-node-enter-glow-mix: 32%;
  --sr-node-selected-duration: 1600ms;
  --sr-node-selected-glow-rest-size: 18px;
  --sr-node-selected-glow-rest-mix: 28%;
  --sr-node-selected-glow-peak-size: 30px;
  --sr-node-selected-glow-peak-mix: 65%;
  --sr-node-selected-glow-reduced-size: 24px;
  --sr-node-selected-glow-reduced-mix: 45%;

  --sr-node-text-min-width: 220px;
  --sr-node-text-max-width: 300px;
  --sr-node-text-card-min-height: 240px;
  --sr-node-text-header-min-height: 40px;
  --sr-node-text-header-padding: 11px 14px 8px;
  --sr-node-text-content-min-height: 170px;
  --sr-node-text-content-padding: 4px 14px 14px;
  --sr-node-text-inner-padding: 10px 0;

  --sr-node-image-pad-top: 70px;
  --sr-node-image-header-offset: -28px;
  --sr-node-image-header-min-height: 22px;
  --sr-node-image-header-padding: 0 2px;
  --sr-node-image-icon-size: 14px;
  --sr-node-image-icon-radius: 3px;
  --sr-node-image-icon-opacity: 0.82;
  --sr-node-image-icon-glyph: none;
  --sr-node-mesh-height: 172px;
  --sr-node-mesh-grid-color: rgba(201, 202, 200, 0.20);
  --sr-node-mesh-grid-soft: rgba(201, 202, 200, 0.10);
  --sr-node-mesh-line: rgba(255, 255, 255, 0.24);
  --sr-node-error-bg: rgba(0, 0, 0, 0.40);
  --sr-node-error-border-width: 2px;
  --sr-node-error-padding: 6px 10px;
  --sr-node-error-margin: 0 14px 8px;
  --sr-node-error-radius: 4px;
  --sr-node-progress-track: rgba(255, 255, 255, 0.08);
  --sr-node-progress-fill: var(--sr-accent);
  --sr-node-reroute-size: 20px;
  --sr-node-reroute-dot-size: 9px;

  --sr-handle-size: 20px;
  --sr-handle-dot-size: 9px;
  --sr-handle-rest-offset: 4px;
  --sr-handle-outset: -14px;
  --sr-handle-plus-length: 9px;
  --sr-handle-plus-thickness: 1.5px;
  --sr-handle-rest-dot: rgba(255, 255, 255, 0.85);
  --sr-handle-ring: rgba(255, 255, 255, 0.85);
  --sr-handle-glyph: rgba(255, 255, 255, 0.95);
  --sr-handle-glass: rgba(20, 20, 22, 0.92);
  --sr-handle-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  --sr-handle-active-shadow: 0 0 0 4px var(--sr-accent-soft), var(--sr-handle-shadow);
  --sr-handle-rest-scale: 0.45;
  --sr-handle-catch-scale: 0.7;

  --sr-edge-path-color: rgba(255, 255, 255, 0.55);
  --sr-edge-path-width: 1.5;
  --sr-edge-path-glow: drop-shadow(0 0 4px rgba(255, 255, 255, 0.18));
  --sr-edge-selected-width: 2;
  --sr-edge-selected-glow: drop-shadow(0 0 6px color-mix(in srgb, var(--sr-accent) 50%, transparent));
  --sr-edge-draw-duration: 280ms;
  --sr-edge-flow-duration: 900ms;
  --sr-edge-flow-dasharray: 6 4 2 4;
  --sr-edge-pulse-duration: 1400ms;
  --sr-edge-pulse-dasharray: 0.1 8;
  --sr-edge-pulse-width: 3;
  --sr-edge-pulse-opacity: 0.78;

  --sr-motion-fast: 120ms ease;
  --sr-motion-ui: 140ms ease;
  --sr-motion-handle: 220ms cubic-bezier(0.32, 0.72, 0, 1);
  --sr-motion-panel: 500ms cubic-bezier(0.32, 0.72, 0, 1);
  --sr-motion-emphasized: 140ms cubic-bezier(0.05, 0.7, 0.1, 1);
  --sr-focus-outline: 2px solid var(--sr-accent-soft);
  --sr-focus-offset: 2px;

  --sr-layer-panel: 10;
  --sr-layer-agent-log: 11;
  --sr-layer-settings: 30;
  --sr-layer-popover: 40;
  --sr-layer-modal: 60;
  --sr-layer-modal-control: 61;
  --sr-layer-node-preview: 1;
  --sr-layer-node-header: 2;
  --sr-layer-node-floating: 3;
  --sr-layer-node-image-ports: 5;
  --sr-layer-node-image-header: 6;
  --sr-layer-drag: 10000;
}

body.app-slava-restraint .toolbar__icon,
body.app-slava-restraint .panel__close-icon,
body.app-slava-restraint .node-inspector-popover__pin-icon,
body.app-slava-restraint .agent-log__icon,
body.app-slava-restraint .connection-popup__close-icon,
body.app-slava-restraint .model-node__download-icon,
body.app-slava-restraint .model-node__enhance-icon,
body.app-slava-restraint .model-node__loop-icon,
body.app-slava-restraint .mesh-modal__close-icon,
body.app-slava-restraint .mesh-modal__download-icon {
  width: var(--sr-icon-size);
  height: var(--sr-icon-size);
  flex: 0 0 auto;
  stroke-width: var(--sr-icon-stroke);
}

body.app-slava-restraint .chat__tool-icon,
body.app-slava-restraint .chat-panel__model-caret,
body.app-slava-restraint .chat-panel__chip-close-icon,
body.app-slava-restraint .connection-popup__category-chevron,
body.app-slava-restraint .panel__group-chevron,
body.app-slava-restraint .settings__section-toggle-chevron,
body.app-slava-restraint .agent-log__chevron {
  width: var(--sr-icon-size-sm);
  height: var(--sr-icon-size-sm);
  flex: 0 0 auto;
  stroke-width: var(--sr-icon-stroke);
}

body.app-slava-restraint .chat-panel__send-icon {
  width: var(--sr-icon-size-lg);
  height: var(--sr-icon-size-lg);
  flex: 0 0 auto;
  stroke-width: var(--sr-icon-stroke);
  transform: none;
}

/* ─────────────────────────────────────────────────────────────────────
 * App-level surfaces — body, canvas
 * ───────────────────────────────────────────────────────────────────── */
body.app-slava-restraint {
  background: var(--sr-canvas);
  color: var(--sr-ink);
  font-family: var(--sr-ui);
  /* Subtle radial vignette gives the canvas a center of gravity without
   * adding visual weight. */
  background-image: radial-gradient(
    ellipse at center,
    rgba(255, 255, 255, 0.018) 0%,
    transparent 60%
  );
}

@keyframes slava-skin-switch-mask {
  0% {
    opacity: 1;
    filter: none;
  }
  45% {
    opacity: 0.78;
    filter: blur(8px) brightness(0.7);
  }
  100% {
    opacity: 1;
    filter: none;
  }
}

/* Transient class is added only for transitions where Slava is the previous
 * or next skin. It is intentionally not nested under .app-slava-restraint so
 * the mask survives the frame where the Slava body class is being removed. */
body.app-skin-switching-slava #root {
  animation: slava-skin-switch-mask 220ms cubic-bezier(0.32, 0.72, 0, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  body.app-skin-switching-slava #root {
    animation: none;
  }
}

body.app-slava-restraint .react-flow,
body.app-slava-restraint .react-flow__pane {
  background: transparent;
}

body.app-slava-restraint .canvas-wrapper {
  position: relative;
  overflow: hidden;
  background: var(--sr-canvas);
}

body.app-slava-restraint .react-flow {
  position: relative;
  z-index: 1;
}

body.app-slava-restraint .react-flow__background {
  background: transparent;
}

body.app-slava-restraint .react-flow__background.slava-canvas-background {
  opacity: 1;
}

body.app-slava-restraint .react-flow__background-pattern.slava-canvas-background__dot,
body.app-slava-restraint .react-flow__background pattern circle {
  fill: var(--sr-canvas-dot-color);
}

/* ─────────────────────────────────────────────────────────────────────
 * Panels — translucent glass, soft rounded corners, very quiet
 *
 * Mount entrance: every panel slides up + scales in on mount via a
 * 500ms one-shot animation (Drawer preset — Vaul curve from the
 * motion-design skill). Direction-agnostic (panels are draggable so
 * we can't assume a fixed side); fade + slight scale + 8px lift gives
 * "emerging from the surface" without committing to left/right/top
 * choreography.
 *
 * Panels are conditionally rendered (`if (!visible) return null;` in
 * each panel component) — so animation runs on every fresh mount.
 * Hide is asymmetric (instant unmount); symmetric exit can be a
 * follow-up that requires an `exiting` state in the store.
 *
 * Panels live OUTSIDE React Flow, so animating `transform` is safe.
 * ───────────────────────────────────────────────────────────────────── */
@keyframes slava-panel-enter {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
@keyframes slava-panel-exit {
  from {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  to {
    opacity: 0;
    transform: scale(0.96) translateY(8px);
  }
}

/* Exit animation — applied via .panel--exiting class, set by the
 * useDelayedUnmount hook for the post-hide window. Uses the same Vaul
 * curve / 500ms duration as the entrance for symmetric feel. */
body.app-slava-restraint .panel.panel--exiting,
body.app-slava-restraint .chat-panel.chat-panel--exiting {
  animation: slava-panel-exit var(--sr-motion-panel) forwards;
  pointer-events: none;
}

body.app-slava-restraint .panel {
  z-index: var(--sr-layer-panel);
  background: var(--sr-glass);
  backdrop-filter: var(--sr-blur-panel);
  -webkit-backdrop-filter: var(--sr-blur-panel);
  border: 1px solid var(--sr-edge);
  border-radius: var(--sr-radius-panel);
  color: var(--sr-ink);
  box-shadow: var(--sr-shadow-panel);
  font-family: var(--sr-ui);
  /* Drawer preset — 500ms, Vaul's iOS-style ease-out heavy curve. */
  animation: slava-panel-enter var(--sr-motion-panel) backwards;
  /* `backwards` keeps the from-state applied during animation-delay (none here)
   * and ensures the start-frame is rendered before the animation begins —
   * avoids a one-frame flash of the to-state in some browsers. */
  transform-origin: center center;
}

body.app-slava-restraint .panel--settings {
  z-index: var(--sr-layer-settings);
}

body.app-slava-restraint .panel--library {
  z-index: calc(var(--sr-layer-panel) + 1);
}

@media (prefers-reduced-motion: reduce) {
  body.app-slava-restraint .panel {
    animation: none;
  }
}

body.app-slava-restraint .panel__header {
  padding: 14px var(--sr-space-4) 10px;
  border-bottom: 1px solid var(--sr-edge);
  background: transparent;
}

/* Panel title — quiet header. Clean grotesk, medium weight, normal case.
 * NOT a poster headline. The title is a label, not a moment. */
body.app-slava-restraint .panel__title {
  font-family: var(--sr-ui);
  font-weight: 600;
  font-size: var(--sr-type-title);
  line-height: var(--sr-line-tight);
  letter-spacing: -0.01em;
  color: var(--sr-ink);
  text-transform: none;
}

body.app-slava-restraint :is(.panel__header-action, .model-node__header-action) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--sr-control-h-xs);
  height: var(--sr-control-h-xs);
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--sr-radius-pill);
  background: transparent;
  color: var(--sr-ink-meta);
  cursor: pointer;
  opacity: 0.62;
  transition:
    opacity var(--sr-motion-fast),
    background-color var(--sr-motion-fast),
    border-color var(--sr-motion-fast),
    color var(--sr-motion-fast);
}

body.app-slava-restraint :is(.panel__header-action, .model-node__header-action):hover {
  border-color: var(--sr-edge-strong);
  background: var(--sr-surface-control-hover);
  color: var(--sr-ink-bold);
  opacity: 1;
}

body.app-slava-restraint :is(.panel__header-action, .model-node__header-action):focus-visible {
  outline: var(--sr-focus-outline);
  outline-offset: var(--sr-focus-offset);
  border-color: var(--sr-accent);
  opacity: 1;
}

body.app-slava-restraint .panel__body {
  padding: var(--sr-space-3) var(--sr-space-4) var(--sr-space-4);
  background: transparent;
}

body.app-slava-restraint .panel__body--library {
  min-height: 0;
}

body.app-slava-restraint .node-library__browser {
  padding-right: 2px;
  scrollbar-color: var(--sr-node-scrollbar-color) transparent;
}

body.app-slava-restraint .node-inspector-popover {
  z-index: calc(var(--sr-layer-panel) + 2);
  background: var(--sr-glass);
  backdrop-filter: var(--sr-blur-panel);
  -webkit-backdrop-filter: var(--sr-blur-panel);
  border: 1px solid var(--sr-edge);
  border-radius: var(--sr-radius-panel);
  color: var(--sr-ink);
  box-shadow: var(--sr-shadow-panel);
  font-family: var(--sr-ui);
  animation: slava-panel-enter var(--sr-motion-panel) backwards;
  transform-origin: left top;
}

body.app-slava-restraint .node-inspector-popover--pinned {
  border-color: var(--sr-accent-border-muted);
  transform-origin: left bottom;
}

body.app-slava-restraint .node-inspector-popover__header {
  padding: var(--sr-space-3);
  border-bottom: 1px solid var(--sr-edge);
}

body.app-slava-restraint .node-inspector-popover__body {
  padding: var(--sr-space-3);
  scrollbar-color: var(--sr-node-scrollbar-color) transparent;
}

body.app-slava-restraint .node-inspector-popover__pin--active {
  border-color: var(--sr-accent-border);
  background: var(--sr-accent-soft);
  color: var(--sr-ink-bold);
  opacity: 1;
}

body.app-slava-restraint .inspector--embedded .inspector__body {
  animation: slava-inspector-swap 120ms cubic-bezier(0.05, 0.7, 0.1, 1) backwards;
}

body.app-slava-restraint :is(
  .panel__search,
  .inspector__field,
  .inspector__action-button,
  .inspector__file-button,
  .inspector__favorite-button,
  .inspector__info-button,
  .settings__section-toggle,
  .settings__save-button,
  .panel-launcher,
  .toolbar__button
):focus-visible {
  outline: var(--sr-focus-outline);
  outline-offset: var(--sr-focus-offset);
  border-color: var(--sr-accent);
}

/* Popovers — keep connection creation/context menus off the old Default skin
 * panel palette while preserving their existing geometry from panels.css. */
body.app-slava-restraint .context-menu,
body.app-slava-restraint .connection-popup {
  z-index: var(--sr-layer-popover);
  border: 1px solid var(--sr-edge);
  border-radius: var(--sr-radius-control-lg);
  background: var(--sr-glass-raised);
  color: var(--sr-ink);
  box-shadow: var(--sr-shadow-popover);
  backdrop-filter: var(--sr-blur-panel);
  -webkit-backdrop-filter: var(--sr-blur-panel);
  font-family: var(--sr-ui);
  font-size: var(--sr-type-body);
}

body.app-slava-restraint .context-menu {
  padding: var(--sr-space-1);
}

body.app-slava-restraint .context-menu__item,
body.app-slava-restraint .connection-popup__item,
body.app-slava-restraint .connection-popup__category-label--button {
  border-radius: var(--sr-radius-control);
  color: var(--sr-ink-light);
  font-family: var(--sr-ui);
  font-size: var(--sr-type-body);
  transition:
    background-color var(--sr-motion-fast),
    color var(--sr-motion-fast);
}

body.app-slava-restraint .context-menu__item:hover,
body.app-slava-restraint .connection-popup__item:hover,
body.app-slava-restraint .connection-popup__category-label--button:hover {
  background: var(--sr-surface-control-hover);
  color: var(--sr-ink-bold);
}

body.app-slava-restraint .context-menu__item:disabled {
  opacity: var(--sr-disabled-opacity-strong);
}

body.app-slava-restraint .context-menu__item--danger:hover {
  background: var(--sr-danger-soft);
  color: var(--sr-danger);
}

body.app-slava-restraint .context-menu__shortcut,
body.app-slava-restraint .connection-popup__item-port,
body.app-slava-restraint .connection-popup__category-count,
body.app-slava-restraint .connection-popup__category-chevron {
  color: var(--sr-ink-meta);
  font-family: var(--sr-mono);
  font-size: var(--sr-type-meta);
}

body.app-slava-restraint .connection-popup__header {
  border-bottom: 1px solid var(--sr-edge);
}

body.app-slava-restraint .connection-popup__search {
  color: var(--sr-ink);
  font-family: var(--sr-ui);
  font-size: var(--sr-type-control);
}

body.app-slava-restraint .connection-popup__search::placeholder {
  color: var(--sr-ink-faint);
}

body.app-slava-restraint .connection-popup__empty,
body.app-slava-restraint .connection-popup__category-label {
  color: var(--sr-ink-meta);
  font-family: var(--sr-ui);
}

body.app-slava-restraint .connection-popup__category-label {
  font-size: var(--sr-type-meta);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body.app-slava-restraint .connection-popup__close {
  border: 1px solid transparent;
  border-radius: var(--sr-radius-control);
  color: var(--sr-ink-meta);
  transition:
    background-color var(--sr-motion-fast),
    border-color var(--sr-motion-fast),
    color var(--sr-motion-fast);
}

body.app-slava-restraint .connection-popup__close:hover {
  border-color: var(--sr-edge-strong);
  background: var(--sr-surface-control-hover);
  color: var(--sr-ink-bold);
}

body.app-slava-restraint .context-menu__item:focus-visible,
body.app-slava-restraint .connection-popup__item:focus-visible,
body.app-slava-restraint .connection-popup__category-label--button:focus-visible,
body.app-slava-restraint .connection-popup__close:focus-visible,
body.app-slava-restraint .connection-popup__search:focus-visible {
  outline: var(--sr-focus-outline);
  outline-offset: var(--sr-focus-offset);
}

/* ─────────────────────────────────────────────────────────────────────
 * Chat panel — same glass system as nodes/panels, scoped to Slava
 * ───────────────────────────────────────────────────────────────────── */
body.app-slava-restraint .chat-panel {
  --chat-accent: var(--sr-accent);
  --chat-accent-bg: var(--sr-accent-soft);
  --chat-accent-border: var(--sr-accent-border);

  z-index: var(--sr-layer-panel);
  background: var(--sr-glass);
  backdrop-filter: var(--sr-blur-panel);
  -webkit-backdrop-filter: var(--sr-blur-panel);
  border: 1px solid var(--sr-edge);
  border-radius: var(--sr-radius-panel);
  color: var(--sr-ink);
  box-shadow: var(--sr-shadow-panel);
  font-family: var(--sr-ui);
  font-size: var(--sr-type-body);
  animation: slava-panel-enter var(--sr-motion-panel) backwards;
  transform-origin: center center;
}

@media (prefers-reduced-motion: reduce) {
  body.app-slava-restraint .chat-panel {
    animation: none;
  }
}

body.app-slava-restraint .chat-panel__resize-handle--left::before,
body.app-slava-restraint .chat-panel__resize-handle--right::before,
body.app-slava-restraint .chat-panel__resize-handle--top::before,
body.app-slava-restraint .chat-panel__resize-handle--bottom::before {
  background: var(--sr-edge-strong);
}

body.app-slava-restraint .chat-panel__resize-handle--left:hover::before,
body.app-slava-restraint .chat-panel__resize-handle--left:active::before,
body.app-slava-restraint .chat-panel__resize-handle--right:hover::before,
body.app-slava-restraint .chat-panel__resize-handle--right:active::before {
  background: var(--sr-accent);
  height: 56px;
}

body.app-slava-restraint .chat-panel__resize-handle--top:hover::before,
body.app-slava-restraint .chat-panel__resize-handle--top:active::before,
body.app-slava-restraint .chat-panel__resize-handle--bottom:hover::before,
body.app-slava-restraint .chat-panel__resize-handle--bottom:active::before {
  background: var(--sr-accent);
  width: 56px;
}

body.app-slava-restraint .chat-panel__resize-handle--tl::before,
body.app-slava-restraint .chat-panel__resize-handle--tr::before,
body.app-slava-restraint .chat-panel__resize-handle--bl::before,
body.app-slava-restraint .chat-panel__resize-handle--br::before,
body.app-slava-restraint .chat-panel__resize-handle--corner::before {
  border-color: var(--sr-edge-strong);
}

body.app-slava-restraint .chat-panel__resize-handle--tl:hover::before,
body.app-slava-restraint .chat-panel__resize-handle--tl:active::before,
body.app-slava-restraint .chat-panel__resize-handle--tr:hover::before,
body.app-slava-restraint .chat-panel__resize-handle--tr:active::before,
body.app-slava-restraint .chat-panel__resize-handle--bl:hover::before,
body.app-slava-restraint .chat-panel__resize-handle--bl:active::before,
body.app-slava-restraint .chat-panel__resize-handle--br:hover::before,
body.app-slava-restraint .chat-panel__resize-handle--br:active::before,
body.app-slava-restraint .chat-panel__resize-handle--corner:hover::before,
body.app-slava-restraint .chat-panel__resize-handle--corner:active::before {
  border-color: var(--sr-accent);
}

body.app-slava-restraint .chat-panel__header {
  align-items: flex-start;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--sr-edge);
  background: transparent;
  cursor: grab;
}

body.app-slava-restraint .chat-panel__header:active {
  cursor: grabbing;
}

body.app-slava-restraint .chat-panel__header > div {
  min-width: 0;
}

body.app-slava-restraint .chat-panel__title {
  margin-bottom: 8px;
  color: var(--sr-ink);
  font-family: var(--sr-ui);
  font-size: var(--sr-type-title);
  font-weight: 600;
  line-height: var(--sr-line-tight);
  letter-spacing: 0;
  text-transform: none;
}

body.app-slava-restraint .chat-panel__agent-selector,
body.app-slava-restraint .chat-panel__autonomy-toggle,
body.app-slava-restraint .chat-panel__tone-toggle {
  display: inline-flex;
  gap: 3px;
  margin: 0 6px 8px 0;
  padding: 3px;
  border: 1px solid var(--sr-edge);
  border-radius: var(--sr-radius-control-lg);
  background: var(--sr-surface-control);
}

body.app-slava-restraint .chat-panel__agent-btn,
body.app-slava-restraint .chat-panel__agent-btn--active,
body.app-slava-restraint .chat-panel__autonomy-btn,
body.app-slava-restraint .chat-panel__autonomy-btn--active,
body.app-slava-restraint .chat-panel__tone-btn,
body.app-slava-restraint .chat-panel__tone-btn--active {
  min-height: var(--sr-control-h-sm);
  padding: 5px var(--sr-control-pad-x);
  border: 1px solid transparent;
  border-radius: var(--sr-radius-control);
  background: transparent;
  color: var(--sr-ink-light);
  cursor: pointer;
  font-family: var(--sr-ui);
  font-size: var(--sr-type-body);
  font-weight: 500;
  letter-spacing: 0;
  line-height: var(--sr-line-tight);
  transition:
    background-color var(--sr-motion-ui),
    border-color var(--sr-motion-ui),
    color var(--sr-motion-ui);
}

body.app-slava-restraint .chat-panel__agent-btn:hover,
body.app-slava-restraint .chat-panel__autonomy-btn:hover,
body.app-slava-restraint .chat-panel__tone-btn:hover {
  color: var(--sr-ink);
  background: var(--sr-surface-control-hover);
}

body.app-slava-restraint .chat-panel__agent-btn--active,
body.app-slava-restraint .chat-panel__autonomy-btn--active,
body.app-slava-restraint .chat-panel__tone-btn--active {
  border-color: var(--sr-edge-strong);
  background: var(--sr-surface-control-active);
  color: var(--sr-ink-bold);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset;
}

body.app-slava-restraint .chat-panel__agent-btn:focus-visible,
body.app-slava-restraint .chat-panel__agent-btn--active:focus-visible,
body.app-slava-restraint .chat-panel__autonomy-btn:focus-visible,
body.app-slava-restraint .chat-panel__autonomy-btn--active:focus-visible,
body.app-slava-restraint .chat-panel__tone-btn:focus-visible,
body.app-slava-restraint .chat-panel__tone-btn--active:focus-visible,
body.app-slava-restraint .chat-panel__model-trigger:focus-visible,
body.app-slava-restraint .chat-panel__model-search:focus-visible,
body.app-slava-restraint .chat-panel__model-row:focus-visible,
body.app-slava-restraint .chat-panel__textarea:focus-visible,
body.app-slava-restraint .chat-panel__send:focus-visible,
body.app-slava-restraint .chat-panel__approval-btn:focus-visible,
body.app-slava-restraint .chat__codeblock-apply:focus-visible,
body.app-slava-restraint .chat__tool-header:focus-visible {
  outline: var(--sr-focus-outline);
  outline-offset: var(--sr-focus-offset);
  border-color: var(--sr-accent);
}

body.app-slava-restraint .chat-panel__meta,
body.app-slava-restraint .chat-panel__session {
  color: var(--sr-ink-meta);
  font-family: var(--sr-mono);
  font-size: var(--sr-type-meta);
  letter-spacing: 0;
}

body.app-slava-restraint .chat-panel__model-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: 4px;
  padding: 2px 6px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--sr-ink-light);
  cursor: pointer;
  font-family: var(--sr-mono);
  font-size: var(--sr-type-meta);
  letter-spacing: 0;
}

body.app-slava-restraint .chat-panel__model-trigger:hover {
  border-color: var(--sr-edge);
  background: rgba(255, 255, 255, 0.04);
  color: var(--sr-ink);
}

body.app-slava-restraint .chat-panel__model-caret {
  color: var(--sr-ink-faint);
}

body.app-slava-restraint .chat-panel__model-picker {
  display: flex;
  flex-direction: column;
  max-height: 320px;
  margin-top: 8px;
  overflow: hidden;
  border: 1px solid var(--sr-edge);
  border-radius: var(--sr-radius-control-lg);
  background: rgba(0, 0, 0, 0.34);
  box-shadow: var(--sr-shadow-popover);
  font-family: var(--sr-ui);
}

body.app-slava-restraint .chat-panel__model-search {
  padding: 9px 10px;
  border: none;
  border-bottom: 1px solid var(--sr-edge);
  border-radius: 0;
  outline: none;
  background: transparent;
  color: var(--sr-ink);
  font-family: var(--sr-mono);
  font-size: var(--sr-type-label);
}

body.app-slava-restraint .chat-panel__model-search::placeholder {
  color: var(--sr-ink-faint);
}

body.app-slava-restraint .chat-panel__model-error {
  padding: 8px 10px;
  border-bottom: 1px solid var(--sr-edge);
  background: var(--sr-accent-soft);
  color: var(--sr-accent);
  font-family: var(--sr-mono);
  font-size: var(--sr-type-meta);
  line-height: var(--sr-line-meta);
}

body.app-slava-restraint .chat-panel__model-list {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

body.app-slava-restraint .chat-panel__model-row {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 10px;
  border: none;
  border-bottom: 1px solid var(--sr-edge);
  background: transparent;
  color: var(--sr-ink-light);
  cursor: pointer;
  font-family: var(--sr-ui);
  text-align: left;
}

body.app-slava-restraint .chat-panel__model-row:last-child {
  border-bottom: none;
}

body.app-slava-restraint .chat-panel__model-row:hover {
  background: var(--sr-surface-control-hover);
  color: var(--sr-ink);
}

body.app-slava-restraint .chat-panel__model-row--active {
  background: var(--sr-surface-control-active);
  box-shadow: 2px 0 0 var(--sr-accent) inset;
}

body.app-slava-restraint .chat-panel__model-row-name {
  color: var(--sr-ink);
  font-size: var(--sr-type-body);
  font-weight: 600;
  line-height: var(--sr-line-compact);
}

body.app-slava-restraint .chat-panel__model-row-id {
  color: var(--sr-ink-meta);
  font-family: var(--sr-mono);
  font-size: var(--sr-type-micro);
  letter-spacing: 0;
  text-transform: lowercase;
}

body.app-slava-restraint .chat-panel__model-empty {
  padding: 12px 10px;
  color: var(--sr-ink-meta);
  font-size: var(--sr-type-body);
  text-align: center;
}

body.app-slava-restraint .chat-panel__messages {
  gap: 10px;
  padding: 14px;
  background: transparent;
  cursor: grab;
}

body.app-slava-restraint .chat-panel__messages:active {
  cursor: grabbing;
}

body.app-slava-restraint .chat-panel__input {
  cursor: auto;
}

body.app-slava-restraint .chat-panel__messages::-webkit-scrollbar,
body.app-slava-restraint .chat-panel__model-list::-webkit-scrollbar,
body.app-slava-restraint .chat__codeblock-body::-webkit-scrollbar,
body.app-slava-restraint .chat__tool-input::-webkit-scrollbar,
body.app-slava-restraint .chat__tool-output::-webkit-scrollbar,
body.app-slava-restraint .chat-panel__thinking-body::-webkit-scrollbar {
  width: 8px;
}

body.app-slava-restraint .chat-panel__messages::-webkit-scrollbar-thumb,
body.app-slava-restraint .chat-panel__model-list::-webkit-scrollbar-thumb,
body.app-slava-restraint .chat__codeblock-body::-webkit-scrollbar-thumb,
body.app-slava-restraint .chat__tool-input::-webkit-scrollbar-thumb,
body.app-slava-restraint .chat__tool-output::-webkit-scrollbar-thumb,
body.app-slava-restraint .chat-panel__thinking-body::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: var(--sr-radius-pill);
  background: rgba(255, 255, 255, 0.18);
  background-clip: padding-box;
}

body.app-slava-restraint .chat__empty {
  align-self: flex-start;
  padding: var(--sr-space-2) var(--sr-space-1) 0;
  color: var(--sr-ink-faint);
  font-family: var(--sr-ui);
  font-size: var(--sr-type-body);
  line-height: var(--sr-line-body);
  text-align: left;
}

body.app-slava-restraint .chat__empty-hint {
  color: var(--sr-ink-meta);
}

body.app-slava-restraint .chat__empty code {
  border: 1px solid var(--sr-edge);
  border-radius: var(--sr-radius-control);
  background: var(--sr-surface-control-hover);
  color: var(--sr-ink);
  font-family: var(--sr-mono);
}

body.app-slava-restraint .chat__bubble {
  border-radius: var(--sr-radius-control-lg);
  line-height: var(--sr-line-bubble);
}

body.app-slava-restraint .chat__bubble--user {
  max-width: 85%;
  border: 1px solid var(--sr-edge-strong);
  background: rgba(255, 255, 255, 0.10);
  color: var(--sr-ink-bold);
}

body.app-slava-restraint .chat__bubble--assistant {
  max-width: 100%;
  padding-left: 10px;
  border: 1px solid var(--sr-edge);
  border-left: 1px solid var(--sr-edge-strong);
  background: rgba(0, 0, 0, 0.26);
  color: var(--sr-ink);
}

body.app-slava-restraint .chat__bubble-thumb {
  border: 1px solid var(--sr-edge);
  border-radius: 6px;
}

body.app-slava-restraint .chat__codeblock,
body.app-slava-restraint .chat__tool {
  border: 1px solid var(--sr-edge);
  border-radius: var(--sr-radius-control);
  background: rgba(0, 0, 0, 0.32);
}

body.app-slava-restraint .chat__codeblock-body,
body.app-slava-restraint .chat__tool-input,
body.app-slava-restraint .chat__tool-output {
  border-color: var(--sr-edge);
  background: rgba(0, 0, 0, 0.24);
  color: var(--sr-ink);
  font-family: var(--sr-mono);
}

body.app-slava-restraint .chat__codeblock-apply {
  border-top: 1px solid var(--sr-edge);
  background: rgba(255, 255, 255, 0.04);
  color: var(--sr-ink-light);
  font-family: var(--sr-ui);
  letter-spacing: 0;
}

body.app-slava-restraint .chat__codeblock-apply:hover {
  background: var(--sr-surface-control-active);
  color: var(--sr-ink-bold);
}

body.app-slava-restraint .chat__system,
body.app-slava-restraint .chat-panel__system-line,
body.app-slava-restraint .chat__cursor,
body.app-slava-restraint .chat__tool-icon,
body.app-slava-restraint .chat__tool-status {
  color: var(--sr-ink-meta);
}

body.app-slava-restraint .chat__system--error {
  color: var(--sr-danger);
}

body.app-slava-restraint .chat__system--success {
  color: var(--sr-success);
}

body.app-slava-restraint .chat__tool-header {
  color: var(--sr-ink-light);
}

body.app-slava-restraint .chat__tool-header:hover {
  background: var(--sr-surface-control-hover);
  color: var(--sr-ink);
}

body.app-slava-restraint .chat__tool-name {
  color: var(--sr-ink-bold);
  font-weight: 600;
}

body.app-slava-restraint .chat__tool-body {
  border-top: 1px solid var(--sr-edge);
}

body.app-slava-restraint .chat__tool--error,
body.app-slava-restraint .chat__tool--error .chat__tool-output {
  border-color: var(--sr-danger-border);
}

body.app-slava-restraint .chat__tool--error .chat__tool-output {
  color: var(--sr-danger);
}

body.app-slava-restraint .chat-panel__input {
  --chat-composer-gap: 8px;
  --chat-composer-control: var(--sr-control-h-lg);
  --chat-composer-action: 32px;
  --chat-composer-pad-x: var(--sr-space-3);
  --chat-composer-pad-y: 10px;
  gap: 0;
  padding: var(--chat-composer-pad-y) var(--chat-composer-pad-x) 12px;
  border-top: 1px solid var(--sr-edge);
  background: rgba(0, 0, 0, 0.16);
}

body.app-slava-restraint .chat-panel__input-row {
  border: 1px solid var(--sr-edge-strong);
  border-radius: var(--sr-radius-control-lg);
  background: rgba(0, 0, 0, 0.32);
  transition:
    border-color var(--sr-motion-fast),
    background-color var(--sr-motion-fast);
}

body.app-slava-restraint .chat-panel__input-row:focus-within {
  border-color: var(--sr-accent);
  background: rgba(0, 0, 0, 0.42);
}

body.app-slava-restraint .chat-panel__textarea {
  min-height: calc(var(--chat-composer-control) - 8px);
  padding: 7px 8px;
  border: none;
  border-radius: 0;
  outline: none;
  background: transparent;
  color: var(--sr-ink);
  font-family: var(--sr-ui);
  font-size: var(--sr-type-control);
  line-height: var(--sr-line-body);
}

body.app-slava-restraint .chat-panel__textarea::placeholder {
  color: var(--sr-ink-meta);
}

body.app-slava-restraint .chat-panel__textarea:focus {
  border-color: transparent;
  background: transparent;
}

body.app-slava-restraint .chat-panel__textarea:disabled {
  opacity: var(--sr-disabled-opacity);
}

body.app-slava-restraint .chat-panel__send {
  height: var(--chat-composer-action);
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--sr-radius-control);
  background: var(--sr-accent);
  color: var(--sr-on-accent);
  cursor: pointer;
  font-family: var(--sr-ui);
  font-size: var(--sr-type-control);
  font-weight: 700;
  letter-spacing: 0;
  transition:
    opacity var(--sr-motion-fast),
    transform var(--sr-motion-fast),
    background-color var(--sr-motion-fast),
    border-color var(--sr-motion-fast),
    color var(--sr-motion-fast);
}

body.app-slava-restraint .chat-panel__send--submit {
  width: var(--chat-composer-action);
  min-width: var(--chat-composer-action);
  padding: 0;
}

body.app-slava-restraint .chat-panel__send-icon {
  display: block;
  line-height: var(--sr-line-tight);
}

body.app-slava-restraint .chat-panel__send:hover:not(:disabled) {
  background: var(--sr-accent-hover);
  transform: translateY(-1px);
}

body.app-slava-restraint .chat-panel__send:disabled {
  opacity: var(--sr-disabled-opacity-strong);
  cursor: default;
}

body.app-slava-restraint .chat-panel__send--stop {
  border-color: var(--sr-accent-border-medium);
  background: var(--sr-danger-soft);
  color: var(--sr-danger);
}

body.app-slava-restraint .chat-panel__send--stop:hover {
  border-color: var(--sr-accent);
  background: var(--sr-accent-hover-soft);
  color: var(--sr-ink-bold);
}

body.app-slava-restraint .chat-panel__chips {
  gap: 8px;
  padding-bottom: 8px;
}

body.app-slava-restraint .chat-panel__chip {
  border: 1px solid var(--sr-edge);
  border-radius: var(--sr-radius-control);
  background: rgba(255, 255, 255, 0.06);
}

body.app-slava-restraint .chat-panel__chip--error {
  border-color: var(--sr-accent-border-strong);
}

body.app-slava-restraint .chat-panel__chip-label {
  background: rgba(0, 0, 0, 0.66);
  color: var(--sr-ink-bold);
  font-family: var(--sr-mono);
  font-size: var(--sr-type-micro);
}

body.app-slava-restraint .chat-panel__chip-error {
  color: var(--sr-danger);
}

body.app-slava-restraint .chat-panel__chip-close {
  border: 1px solid var(--sr-edge-strong);
  background: rgba(0, 0, 0, 0.78);
  color: var(--sr-ink-bold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.app-slava-restraint .chat-panel__notice {
  margin: 0 0 8px;
  padding: 7px 10px;
  border: 1px solid var(--sr-accent-border-muted);
  border-radius: var(--sr-radius-control);
  background: var(--sr-danger-soft);
  color: var(--sr-danger);
  font-size: var(--sr-type-label);
}

body.app-slava-restraint .chat-panel__approval {
  border: 1px solid var(--sr-accent-border);
  border-radius: var(--sr-radius-control-lg);
  background: var(--sr-danger-soft);
  color: var(--sr-ink);
}

body.app-slava-restraint .chat-panel__approval-btn {
  min-height: 32px;
  border: 1px solid transparent;
  border-radius: var(--sr-radius-control);
  font-family: var(--sr-ui);
}

body.app-slava-restraint .chat-panel__approval-btn--approve {
  background: var(--sr-accent);
  color: var(--sr-on-accent);
}

body.app-slava-restraint .chat-panel__approval-btn--reject {
  border-color: var(--sr-edge-strong);
  background: rgba(255, 255, 255, 0.06);
  color: var(--sr-ink);
}

body.app-slava-restraint .chat-panel__thinking {
  border: 1px solid var(--sr-accent-border);
  border-radius: var(--sr-radius-control-lg);
  background: var(--sr-danger-soft);
  box-shadow: none;
}

body.app-slava-restraint .chat-panel__thinking--completed {
  border-color: var(--sr-edge);
  background: rgba(255, 255, 255, 0.04);
  opacity: 0.82;
}

body.app-slava-restraint .chat-panel__thinking-header {
  color: var(--sr-ink);
}

body.app-slava-restraint .chat-panel__thinking-header:hover {
  background: rgba(255, 255, 255, 0.04);
}

body.app-slava-restraint .chat-panel__thinking-indicator,
body.app-slava-restraint .chat-panel__thinking-label {
  color: var(--sr-danger);
}

body.app-slava-restraint .chat-panel__thinking-caret,
body.app-slava-restraint .chat-panel__thinking-line {
  color: var(--sr-ink-light);
}

body.app-slava-restraint .chat-panel__thinking-body {
  border-top: 1px solid var(--sr-accent-border-soft);
  font-family: var(--sr-mono);
  font-size: var(--sr-type-meta);
  line-height: var(--sr-line-relaxed);
}

/* Inspector content swap — when the user clicks a different node, the
 * inspector body remounts (key={selectedNodeId} on the body div in
 * Inspector.tsx) and this animation fires. 120ms M3 emphasized-decel
 * gives a quick crossfade with a subtle 4px lift — enough to read as
 * "new content arriving" without slowing the user. The Inspector panel
 * itself doesn't unmount across node-selection changes, so the panel
 * mount animation (slava-panel-enter) only fires on first open. */
@keyframes slava-inspector-swap {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
body.app-slava-restraint .panel--inspector .panel__body {
  animation: slava-inspector-swap 120ms cubic-bezier(0.05, 0.7, 0.1, 1) backwards;
}
@media (prefers-reduced-motion: reduce) {
  body.app-slava-restraint .panel--inspector .panel__body,
  body.app-slava-restraint .inspector--embedded .inspector__body {
    animation: none;
  }
}

/* No footer signature, no eyebrow strips — Restraint means restraint. */

/* ─────────────────────────────────────────────────────────────────────
 * Library — search + category groups
 * ───────────────────────────────────────────────────────────────────── */
body.app-slava-restraint .panel__search {
  background: rgba(0, 0, 0, 0.30);
  border: 1px solid var(--sr-edge);
  color: var(--sr-ink);
  font-family: var(--sr-ui);
  font-size: var(--sr-type-control);
  border-radius: var(--sr-radius-pill);
  padding: 8px 14px;
}
body.app-slava-restraint .panel__search:focus {
  outline: none;
  border-color: var(--sr-accent);
  background: rgba(0, 0, 0, 0.45);
}
body.app-slava-restraint .panel__search::placeholder {
  color: var(--sr-ink-faint);
}

body.app-slava-restraint .panel__group-label {
  font-family: var(--sr-ui);
  font-weight: 500;
  font-size: var(--sr-type-body);
  letter-spacing: 0;
  text-transform: none;
  color: var(--sr-ink-light);
}
body.app-slava-restraint .panel__group-label--button {
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 6px 4px;
}
body.app-slava-restraint .panel__group-label--button:hover {
  color: var(--sr-ink-bold);
  background: rgba(255, 255, 255, 0.04);
}

body.app-slava-restraint .panel__group-chevron {
  color: var(--sr-ink-faint);
}

body.app-slava-restraint .panel__group-text {
  font-family: var(--sr-ui);
  font-weight: 500;
  letter-spacing: 0;
}

body.app-slava-restraint .panel__group-count {
  font-family: var(--sr-mono);
  font-weight: 400;
  font-size: var(--sr-type-meta);
  color: var(--sr-ink-meta);
  background: transparent;
  border: none;
  padding: 0 4px;
  text-transform: none;
}

body.app-slava-restraint .panel__group-dot {
  /* Quiet round dot — the only place category color shows in the chrome. */
  border-radius: 50%;
  width: 6px;
  height: 6px;
  opacity: 0.85;
}

body.app-slava-restraint .panel__item {
  font-family: var(--sr-ui);
  font-size: var(--sr-type-control);
  font-weight: 400;
  color: var(--sr-ink);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 6px 10px;
  margin: 1px 0;
  transition: background-color var(--sr-motion-fast), color var(--sr-motion-fast);
}
body.app-slava-restraint .panel__item:hover {
  background: var(--sr-surface-control-hover);
  color: var(--sr-ink-bold);
}

body.app-slava-restraint .panel__items {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 240ms cubic-bezier(0.32, 0.72, 0, 1),
    opacity 160ms ease;
}

body.app-slava-restraint .panel__items-inner {
  min-height: 0;
  overflow: hidden;
}

body.app-slava-restraint .panel__items--expanded {
  grid-template-rows: 1fr;
  opacity: 1;
}

body.app-slava-restraint .panel__items--collapsed {
  pointer-events: none;
}

body.app-slava-restraint .panel__items .panel__item {
  opacity: 0;
  transform: translateY(-3px);
  transition:
    opacity 160ms ease,
    transform 180ms cubic-bezier(0.05, 0.7, 0.1, 1),
    background-color 120ms ease,
    color 120ms ease;
}

body.app-slava-restraint .panel__items--expanded .panel__item {
  opacity: 1;
  transform: translateY(0);
}

body.app-slava-restraint .panel__items--expanded .panel__item:nth-child(2) {
  transition-delay: 30ms, 30ms, 0ms, 0ms;
}

body.app-slava-restraint .panel__items--expanded .panel__item:nth-child(3) {
  transition-delay: 60ms, 60ms, 0ms, 0ms;
}

body.app-slava-restraint .panel__items--expanded .panel__item:nth-child(4) {
  transition-delay: 90ms, 90ms, 0ms, 0ms;
}

body.app-slava-restraint .panel__items--expanded .panel__item:nth-child(5) {
  transition-delay: 120ms, 120ms, 0ms, 0ms;
}

body.app-slava-restraint .panel__items--expanded .panel__item:nth-child(n+6) {
  transition-delay: 150ms, 150ms, 0ms, 0ms;
}

@media (prefers-reduced-motion: reduce) {
  body.app-slava-restraint .panel__items,
  body.app-slava-restraint .panel__items .panel__item {
    transition: none;
  }

  body.app-slava-restraint .panel__items .panel__item {
    transform: none;
  }
}

/* Loading indicators — replace stock border-rotate spinners with a quiet
 * dot-matrix beam. The model-node version only animates color/box-shadow on
 * a child pseudo-element so it stays inside the React Flow safe-property rule. */
@keyframes slava-dot-matrix-beam {
  0%, 100% {
    background-color: rgba(255, 255, 255, 0.92);
    box-shadow:
      5px 0 rgba(255, 255, 255, 0.48),
      10px 0 rgba(255, 255, 255, 0.22),
      15px 0 rgba(255, 255, 255, 0.14),
      0 5px rgba(255, 255, 255, 0.92),
      5px 5px rgba(255, 255, 255, 0.48),
      10px 5px rgba(255, 255, 255, 0.22),
      15px 5px rgba(255, 255, 255, 0.14),
      0 10px rgba(255, 255, 255, 0.92),
      5px 10px rgba(255, 255, 255, 0.48),
      10px 10px rgba(255, 255, 255, 0.22),
      15px 10px rgba(255, 255, 255, 0.14),
      0 15px rgba(255, 255, 255, 0.92),
      5px 15px rgba(255, 255, 255, 0.48),
      10px 15px rgba(255, 255, 255, 0.22),
      15px 15px rgba(255, 255, 255, 0.14);
  }
  25% {
    background-color: rgba(255, 255, 255, 0.14);
    box-shadow:
      5px 0 rgba(255, 255, 255, 0.92),
      10px 0 rgba(255, 255, 255, 0.48),
      15px 0 rgba(255, 255, 255, 0.22),
      0 5px rgba(255, 255, 255, 0.14),
      5px 5px rgba(255, 255, 255, 0.92),
      10px 5px rgba(255, 255, 255, 0.48),
      15px 5px rgba(255, 255, 255, 0.22),
      0 10px rgba(255, 255, 255, 0.14),
      5px 10px rgba(255, 255, 255, 0.92),
      10px 10px rgba(255, 255, 255, 0.48),
      15px 10px rgba(255, 255, 255, 0.22),
      0 15px rgba(255, 255, 255, 0.14),
      5px 15px rgba(255, 255, 255, 0.92),
      10px 15px rgba(255, 255, 255, 0.48),
      15px 15px rgba(255, 255, 255, 0.22);
  }
  50% {
    background-color: rgba(255, 255, 255, 0.22);
    box-shadow:
      5px 0 rgba(255, 255, 255, 0.14),
      10px 0 rgba(255, 255, 255, 0.92),
      15px 0 rgba(255, 255, 255, 0.48),
      0 5px rgba(255, 255, 255, 0.22),
      5px 5px rgba(255, 255, 255, 0.14),
      10px 5px rgba(255, 255, 255, 0.92),
      15px 5px rgba(255, 255, 255, 0.48),
      0 10px rgba(255, 255, 255, 0.22),
      5px 10px rgba(255, 255, 255, 0.14),
      10px 10px rgba(255, 255, 255, 0.92),
      15px 10px rgba(255, 255, 255, 0.48),
      0 15px rgba(255, 255, 255, 0.22),
      5px 15px rgba(255, 255, 255, 0.14),
      10px 15px rgba(255, 255, 255, 0.92),
      15px 15px rgba(255, 255, 255, 0.48);
  }
  75% {
    background-color: rgba(255, 255, 255, 0.48);
    box-shadow:
      5px 0 rgba(255, 255, 255, 0.22),
      10px 0 rgba(255, 255, 255, 0.14),
      15px 0 rgba(255, 255, 255, 0.92),
      0 5px rgba(255, 255, 255, 0.48),
      5px 5px rgba(255, 255, 255, 0.22),
      10px 5px rgba(255, 255, 255, 0.14),
      15px 5px rgba(255, 255, 255, 0.92),
      0 10px rgba(255, 255, 255, 0.48),
      5px 10px rgba(255, 255, 255, 0.22),
      10px 10px rgba(255, 255, 255, 0.14),
      15px 10px rgba(255, 255, 255, 0.92),
      0 15px rgba(255, 255, 255, 0.48),
      5px 15px rgba(255, 255, 255, 0.22),
      10px 15px rgba(255, 255, 255, 0.14),
      15px 15px rgba(255, 255, 255, 0.92);
  }
}

body.app-slava-restraint .model-node__loading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sr-space-2);
  padding: var(--sr-space-2) var(--sr-space-3) var(--sr-space-3);
  border-top: 1px solid var(--sr-edge);
}

body.app-slava-restraint .model-node__loading-spinner {
  position: relative;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 0;
  background: transparent;
  animation: none;
}

body.app-slava-restraint .model-node__loading-spinner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.92);
  animation: slava-dot-matrix-beam 960ms steps(4, end) infinite;
}

body.app-slava-restraint .model-node__loading-text {
  flex: 1;
  color: var(--sr-ink-light);
  font-family: var(--sr-mono);
  font-size: var(--sr-type-meta);
}

body.app-slava-restraint .model-node__loading .model-node__progress {
  width: 100%;
}

body.app-slava-restraint .model-node__progress {
  height: 2px;
  padding: 0;
  border-top: 0;
  border-radius: var(--sr-radius-pill);
  background: var(--sr-node-progress-track);
  overflow: hidden;
}

body.app-slava-restraint .model-node__progress-bar {
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(
      90deg,
      var(--sr-node-progress-fill),
      color-mix(in srgb, var(--sr-node-progress-fill) 62%, var(--sr-ink-bold))
    );
  box-shadow: 0 0 10px color-mix(in srgb, var(--sr-node-progress-fill) 42%, transparent);
  transition: width var(--sr-motion-ui);
}

body.app-slava-restraint .chat-panel__chip-spinner {
  background: rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

body.app-slava-restraint .chat-panel__chip-spinner::after {
  content: none;
}

body.app-slava-restraint .chat-panel__chip-spinner::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.92);
  transform: translate(-9.5px, -9.5px);
  animation: slava-dot-matrix-beam 960ms steps(4, end) infinite;
}

body.app-slava-restraint .toolbar__button--executing {
  position: relative;
}

body.app-slava-restraint .toolbar__button--executing .toolbar__icon {
  opacity: 0;
}

body.app-slava-restraint .toolbar__button--executing::before {
  content: '';
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  margin-left: -9.5px;
  margin-top: -9.5px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.92);
  animation: slava-dot-matrix-beam 960ms steps(4, end) infinite;
}

body.app-slava-restraint .model-node__loading-spinner::before,
body.app-slava-restraint .chat-panel__chip-spinner::before,
body.app-slava-restraint .toolbar__button--executing::before {
  box-shadow:
    5px 0 rgba(255, 255, 255, 0.48),
    10px 0 rgba(255, 255, 255, 0.22),
    15px 0 rgba(255, 255, 255, 0.14),
    0 5px rgba(255, 255, 255, 0.92),
    5px 5px rgba(255, 255, 255, 0.48),
    10px 5px rgba(255, 255, 255, 0.22),
    15px 5px rgba(255, 255, 255, 0.14),
    0 10px rgba(255, 255, 255, 0.92),
    5px 10px rgba(255, 255, 255, 0.48),
    10px 10px rgba(255, 255, 255, 0.22),
    15px 10px rgba(255, 255, 255, 0.14),
    0 15px rgba(255, 255, 255, 0.92),
    5px 15px rgba(255, 255, 255, 0.48),
    10px 15px rgba(255, 255, 255, 0.22),
    15px 15px rgba(255, 255, 255, 0.14);
}

@media (prefers-reduced-motion: reduce) {
  body.app-slava-restraint .model-node__loading-spinner::before,
  body.app-slava-restraint .chat-panel__chip-spinner::before,
  body.app-slava-restraint .toolbar__button--executing::before {
    animation: none;
  }
}

@keyframes slava-library-drag-preview-in {
  from {
    opacity: 0;
    transform: translate3d(var(--drag-x), var(--drag-y), 0) scale(0.94);
    filter: blur(2px);
  }
  to {
    opacity: 1;
    transform: translate3d(var(--drag-x), var(--drag-y), 0) scale(1);
    filter: none;
  }
}

body.app-slava-restraint .slava-library-drag-preview {
  position: fixed;
  left: 0;
  top: 0;
  z-index: var(--sr-layer-drag);
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  max-width: 220px;
  padding: 8px 10px;
  color: var(--sr-ink-bold);
  background: rgba(24, 24, 27, 0.88);
  border: 1px solid var(--sr-edge-strong);
  border-radius: 8px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 10px 28px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  font-family: var(--sr-ui);
  font-size: var(--sr-type-body);
  font-weight: 500;
  line-height: var(--sr-line-tight);
  transform: translate3d(var(--drag-x), var(--drag-y), 0) scale(1);
  transition: transform 80ms cubic-bezier(0.32, 0.72, 0, 1);
  animation: slava-library-drag-preview-in 140ms cubic-bezier(0.05, 0.7, 0.1, 1) both;
}

body.app-slava-restraint .slava-library-drag-preview__dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--category-color, var(--sr-accent));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--category-color, var(--sr-accent)) 18%, transparent);
}

body.app-slava-restraint .slava-library-drag-preview__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  body.app-slava-restraint .slava-library-drag-preview {
    transition: none;
    animation: none;
  }
}

/* ─────────────────────────────────────────────────────────────────────
 * Settings — section labels are quiet metadata, not editorial chapters
 * ───────────────────────────────────────────────────────────────────── */
body.app-slava-restraint .settings__section-label {
  font-family: var(--sr-ui);
  font-weight: 500;
  font-size: var(--sr-type-label);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sr-ink-light);
  margin-top: 18px;
  margin-bottom: 4px;
}

body.app-slava-restraint .settings__section-label--stacked {
  margin-top: var(--sr-space-4);
}

body.app-slava-restraint .settings__loading {
  padding: var(--sr-space-4);
  color: var(--sr-ink-meta);
  font-family: var(--sr-ui);
  text-align: center;
}

body.app-slava-restraint .settings__section-toggle {
  border: 1px solid var(--sr-edge);
  border-radius: var(--sr-radius-control);
  background: rgba(255, 255, 255, 0.03);
  color: var(--sr-ink);
  font-family: var(--sr-ui);
  padding: 9px var(--sr-control-pad-x);
  transition: background-color var(--sr-motion-fast), border-color var(--sr-motion-fast);
}

body.app-slava-restraint .settings__section-toggle:hover {
  border-color: var(--sr-edge-strong);
  background: var(--sr-surface-control-hover);
}

body.app-slava-restraint .settings__section-toggle:focus-visible {
  outline: var(--sr-focus-outline);
  outline-offset: var(--sr-focus-offset);
}

body.app-slava-restraint .settings__section-toggle-title {
  color: var(--sr-ink-light);
  font-size: var(--sr-type-label);
  font-weight: 600;
  letter-spacing: 0.04em;
}

body.app-slava-restraint .settings__section-toggle-count,
body.app-slava-restraint .settings__section-toggle-chevron {
  color: var(--sr-ink-meta);
  font-family: var(--sr-mono);
  font-size: var(--sr-type-meta);
}

body.app-slava-restraint .settings__collapsible-body {
  max-height: min(300px, 34vh);
  margin-bottom: var(--sr-space-4);
  padding: var(--sr-space-2);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--sr-edge);
  border-radius: var(--sr-radius-control);
  background:
    linear-gradient(var(--sr-glass-raised), var(--sr-glass-raised)) padding-box,
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 34%) border-box;
}

body.app-slava-restraint .settings__collapsible-body .settings__key-row:last-child {
  margin-bottom: 0;
}

body.app-slava-restraint .settings__key-link {
  color: var(--sr-ink-light);
  font-family: var(--sr-ui);
  font-size: var(--sr-type-label);
  transition: color var(--sr-motion-fast);
}

body.app-slava-restraint .settings__key-link:hover {
  color: var(--sr-ink-bold);
  text-decoration: underline;
}

body.app-slava-restraint .settings__key-input {
  font-family: var(--sr-mono);
  font-size: var(--sr-type-label);
  letter-spacing: 0;
}

body.app-slava-restraint .settings__reveal-button {
  min-height: var(--sr-control-h-xs);
  border: 1px solid var(--sr-edge);
  border-radius: var(--sr-radius-control);
  background: var(--sr-surface-control);
  color: var(--sr-ink-light);
  font-family: var(--sr-ui);
  font-size: var(--sr-type-body);
  transition:
    background-color var(--sr-motion-fast),
    border-color var(--sr-motion-fast),
    color var(--sr-motion-fast);
}

body.app-slava-restraint .settings__reveal-button:hover {
  border-color: var(--sr-edge-strong);
  background: var(--sr-surface-control-hover);
  color: var(--sr-ink-bold);
}

body.app-slava-restraint .inspector__node-name {
  color: var(--sr-ink);
  font-family: var(--sr-ui);
  font-size: var(--sr-type-control);
  font-weight: 600;
}

body.app-slava-restraint .inspector__label {
  font-family: var(--sr-ui);
  font-weight: 500;
  font-size: var(--sr-type-label);
  letter-spacing: 0;
  text-transform: none;
  color: var(--sr-ink-light);
}

body.app-slava-restraint .panel--inspector-empty .panel__body {
  display: grid;
  min-height: 180px;
}

body.app-slava-restraint .inspector__empty {
  position: relative;
  display: grid;
  min-height: 148px;
  grid-template-rows: 1fr auto auto 1fr;
  align-items: center;
  padding: var(--sr-space-4) var(--sr-space-4) var(--sr-space-4) 48px;
  overflow: hidden;
  color: var(--sr-ink-faint);
  font-family: var(--sr-mono);
  font-size: var(--sr-type-meta);
  line-height: var(--sr-line-meta);
}

body.app-slava-restraint .inspector__empty::before {
  content: '';
  position: absolute;
  top: 28px;
  bottom: 24px;
  left: 21px;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--sr-edge-strong) 18%, var(--sr-edge-strong) 80%, transparent);
}

body.app-slava-restraint .inspector__empty::after {
  content: '';
  position: absolute;
  top: 40px;
  left: 17px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--sr-ink-faint);
  box-shadow:
    0 28px rgba(255, 255, 255, 0.14),
    0 56px rgba(255, 255, 255, 0.08);
}

body.app-slava-restraint .inspector__empty-grid {
  position: absolute;
  inset: 14px 0 10px 36px;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(201, 202, 200, 0.20) 0 1px, transparent 1.25px);
  background-size: 8px 8px;
  opacity: 0.16;
  -webkit-mask-image: linear-gradient(to right, #000, transparent 78%);
  mask-image: linear-gradient(to right, #000, transparent 78%);
}

body.app-slava-restraint .inspector__empty-title {
  position: relative;
  grid-row: 2;
  color: var(--sr-ink-light);
  font-family: var(--sr-ui);
  font-size: var(--sr-type-body);
  font-weight: 500;
}

body.app-slava-restraint .inspector__empty-status {
  position: relative;
  grid-row: 3;
  width: max-content;
  margin-top: var(--sr-space-1);
  color: var(--sr-ink-faint);
  text-transform: lowercase;
}

body.app-slava-restraint .inspector__field {
  min-height: var(--sr-control-h-md);
  background: var(--sr-surface-control);
  border: 1px solid var(--sr-edge);
  color: var(--sr-ink);
  font-family: var(--sr-mono);
  font-size: var(--sr-type-body);
  padding: var(--sr-control-pad-y) var(--sr-control-pad-x);
  border-radius: var(--sr-radius-control);
  transition: border-color var(--sr-motion-fast), background-color var(--sr-motion-fast);
}
body.app-slava-restraint .inspector__field:focus {
  outline: none;
  border-color: var(--sr-accent);
  background: var(--sr-surface-control-focus);
}
body.app-slava-restraint .inspector__field::placeholder {
  color: var(--sr-ink-faint);
}

body.app-slava-restraint select.inspector__field {
  appearance: none;
}

body.app-slava-restraint .inspector__control-stack {
  gap: var(--sr-space-1);
}

body.app-slava-restraint .inspector__notice {
  border: 1px solid var(--sr-accent-border);
  border-radius: var(--sr-radius-control);
  background: var(--sr-accent-soft);
  color: var(--sr-ink-light);
  font-family: var(--sr-ui);
  font-size: var(--sr-type-label);
  line-height: var(--sr-line-meta);
  padding: var(--sr-space-2) var(--sr-space-3);
}

body.app-slava-restraint .inspector__section--separated,
body.app-slava-restraint .inspector__actions {
  border-top-color: var(--sr-edge);
}

body.app-slava-restraint .inspector__model-error {
  color: var(--sr-accent);
  font-family: var(--sr-mono);
}

body.app-slava-restraint .inspector__model-selection,
body.app-slava-restraint .inspector__state-value {
  color: var(--sr-ink-meta);
  font-family: var(--sr-mono);
}

body.app-slava-restraint .inspector__model-selection {
  gap: var(--sr-space-2);
}

body.app-slava-restraint .inspector__model-selection-text {
  line-height: var(--sr-line-meta);
}

body.app-slava-restraint .inspector__favorite-button {
  color: var(--sr-ink-faint);
  font-family: var(--sr-ui);
  transition: color var(--sr-motion-fast), transform var(--sr-motion-fast);
}

body.app-slava-restraint .inspector__favorite-button:hover,
body.app-slava-restraint .inspector__favorite-button--active {
  color: var(--sr-accent);
}

body.app-slava-restraint .inspector__favorite-button:active {
  transform: scale(0.94);
}

body.app-slava-restraint .inspector__favorite-icon,
body.app-slava-restraint .inspector__info-icon,
body.app-slava-restraint .inspector__action-icon {
  width: var(--sr-icon-size-sm);
  height: var(--sr-icon-size-sm);
  stroke-width: var(--sr-icon-stroke);
}

body.app-slava-restraint .inspector__checkbox-row {
  color: var(--sr-ink-light);
  font-family: var(--sr-ui);
  font-size: var(--sr-type-body);
}

body.app-slava-restraint .inspector__checkbox-row input,
body.app-slava-restraint .settings__toggle-input {
  accent-color: var(--sr-accent);
}

body.app-slava-restraint .inspector__info-button {
  width: var(--sr-control-h-xs);
  height: var(--sr-control-h-xs);
  border: 1px solid var(--sr-edge);
  background: transparent;
  color: var(--sr-ink-light);
  font-family: var(--sr-ui);
  font-style: normal;
  transition:
    background-color var(--sr-motion-fast),
    border-color var(--sr-motion-fast),
    color var(--sr-motion-fast);
}

body.app-slava-restraint .inspector__info-button:hover {
  border-color: var(--sr-edge-strong);
  background: var(--sr-surface-control-hover);
  color: var(--sr-ink-bold);
}

body.app-slava-restraint .inspector__info-panel {
  border: 1px solid var(--sr-edge);
  border-radius: var(--sr-radius-control);
  background: rgba(0, 0, 0, 0.24);
  color: var(--sr-ink-light);
}

body.app-slava-restraint .inspector__info-heading {
  border-bottom-color: var(--sr-edge);
  color: var(--sr-ink-meta);
  font-family: var(--sr-mono);
  letter-spacing: 0.04em;
}

body.app-slava-restraint .inspector__info-row {
  color: var(--sr-ink-light);
}

body.app-slava-restraint .inspector__info-name {
  color: var(--sr-ink);
}

body.app-slava-restraint .inspector__info-type,
body.app-slava-restraint .inspector__info-meta {
  color: var(--sr-ink-meta);
}

body.app-slava-restraint .inspector__info-meta {
  border-top-color: var(--sr-edge);
}

body.app-slava-restraint .inspector__file-button,
body.app-slava-restraint .inspector__action-button {
  min-height: var(--sr-control-h-md);
  border: 1px solid var(--sr-edge);
  border-radius: var(--sr-radius-control);
  background: var(--sr-surface-control);
  color: var(--sr-ink-light);
  font-family: var(--sr-ui);
  font-size: var(--sr-type-body);
  transition:
    background-color var(--sr-motion-fast),
    border-color var(--sr-motion-fast),
    color var(--sr-motion-fast);
}

body.app-slava-restraint .inspector__action-button:disabled {
  opacity: var(--sr-disabled-opacity);
  cursor: not-allowed;
}

body.app-slava-restraint .inspector__file-button:hover,
body.app-slava-restraint .inspector__action-button:hover {
  border-color: var(--sr-edge-strong);
  background: var(--sr-surface-control-hover);
  color: var(--sr-ink-bold);
}

body.app-slava-restraint .inspector__action-button--danger:hover {
  border-color: var(--sr-danger-border);
  background: var(--sr-danger-soft);
  color: var(--sr-danger);
}

body.app-slava-restraint .inspector__file-preview {
  border: 1px solid var(--sr-edge);
  border-radius: var(--sr-radius-control);
}

/* Palette param control — restraint skin. */
body.app-slava-restraint .inspector__palette-empty {
  color: var(--sr-ink-faint);
  font-family: var(--sr-mono);
  font-size: var(--sr-type-label);
}

body.app-slava-restraint .inspector__palette-color {
  border: 1px solid var(--sr-edge);
  border-radius: var(--sr-radius-control);
}

body.app-slava-restraint .inspector__palette-hex {
  font-family: var(--sr-mono);
}

body.app-slava-restraint .inspector__palette-remove {
  color: var(--sr-ink-faint);
  transition: color var(--sr-motion-fast);
}

body.app-slava-restraint .inspector__palette-remove:hover {
  color: var(--sr-accent);
}

/* Settings save — primary CTA pill. Single place orange shows up in chrome. */
body.app-slava-restraint .settings__footer {
  padding: var(--sr-space-3) var(--sr-space-4) var(--sr-space-4);
  border-top: 1px solid var(--sr-edge);
  background: linear-gradient(180deg, rgba(20, 20, 22, 0.52), rgba(20, 20, 22, 0.82));
}

body.app-slava-restraint .settings__save-button {
  background: var(--sr-accent);
  color: var(--sr-on-accent);
  border: none;
  padding: 10px 18px;
  font-family: var(--sr-ui);
  font-weight: 600;
  font-size: var(--sr-type-control);
  letter-spacing: 0;
  text-transform: none;
  border-radius: var(--sr-radius-pill);
  cursor: pointer;
  margin-top: 0;
  transition: filter var(--sr-motion-fast);
}
body.app-slava-restraint .settings__save-button:hover {
  filter: brightness(1.08);
}
body.app-slava-restraint .settings__save-button:disabled {
  opacity: var(--sr-disabled-opacity-muted);
  cursor: default;
}

body.app-slava-restraint .settings__toggle-row {
  border: 1px solid var(--sr-edge);
  border-radius: var(--sr-radius-control);
  background: rgba(255, 255, 255, 0.03);
  transition: background-color var(--sr-motion-fast), border-color var(--sr-motion-fast);
}

body.app-slava-restraint .settings__toggle-row:hover {
  border-color: var(--sr-edge-strong);
  background: rgba(255, 255, 255, 0.05);
}

body.app-slava-restraint .settings__toggle-title {
  color: var(--sr-ink);
  font-family: var(--sr-ui);
  font-size: var(--sr-type-body);
  font-weight: 600;
}

body.app-slava-restraint .settings__toggle-description {
  color: var(--sr-ink-meta);
  font-family: var(--sr-ui);
  font-size: var(--sr-type-label);
}

/* ─────────────────────────────────────────────────────────────────────
 * Toolbar — translucent rounded pill (keeps default position)
 * ───────────────────────────────────────────────────────────────────── */
body.app-slava-restraint .toolbar {
  z-index: var(--sr-layer-panel);
  bottom: var(--sr-space-6);
  background: var(--sr-glass-raised);
  backdrop-filter: var(--sr-blur-panel);
  -webkit-backdrop-filter: var(--sr-blur-panel);
  border: 1px solid var(--sr-edge);
  border-radius: var(--sr-radius-pill);
  font-family: var(--sr-ui);
  box-shadow: var(--sr-shadow-panel-sm);
}

/* Wordmark — the ONE place dot-matrix-style display shows up. Sits
 * quietly above the toolbar. Tabular numerics in mono carry the same DNA. */
body.app-slava-restraint .toolbar::before {
  content: 'NEBULA(NODES)';
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--sr-mono);
  font-weight: 500;
  font-size: var(--sr-type-meta);
  letter-spacing: 0.30em;
  color: var(--sr-ink-faint);
  pointer-events: none;
  white-space: nowrap;
}

body.app-slava-restraint .toolbar__button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: transparent;
  color: var(--sr-ink-light);
  border: 1px solid transparent;
  font-family: var(--sr-ui);
  font-size: var(--sr-type-body);
  font-weight: 500;
  min-height: var(--sr-control-h-sm);
  padding: 6px var(--sr-control-pad-x);
  border-radius: var(--sr-radius-control);
  letter-spacing: 0;
  /* On RELEASE: scale back to 1 via back-ease that briefly overshoots —
   * gives a "pop" feel without explicitly keyframing past 1.0. The
   * cubic-bezier(0.34, 1.56, 0.64, 1) curve briefly exceeds 1 around
   * 65% progress before settling. Use this longer 220ms duration for
   * the release; the press itself uses the shorter 80ms below.
   *
   * Toolbar lives outside React Flow, so animating `transform` is safe
   * (no xyflow inline-transform conflict). */
  transition:
    color 120ms ease,
    background-color 120ms ease,
    border-color 120ms ease,
    box-shadow 120ms ease,
    transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

body.app-slava-restraint .toolbar__button::after {
  content: '';
  position: absolute;
  inset: 3px;
  z-index: 0;
  border-radius: calc(var(--sr-radius-control) - 2px);
  background-image: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.34) 0 1px,
    transparent 1.35px
  );
  background-position: center;
  background-size: 6px 6px;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.92);
  transition:
    opacity var(--sr-motion-fast),
    transform var(--sr-motion-fast);
}

body.app-slava-restraint .toolbar__icon,
body.app-slava-restraint .toolbar__label {
  position: relative;
  z-index: 1;
}

body.app-slava-restraint .toolbar__icon {
  transition:
    color 120ms ease,
    filter 120ms ease,
    opacity 120ms ease;
}

body.app-slava-restraint .toolbar__button:hover {
  color: var(--sr-ink-bold);
  background-color: var(--sr-surface-control-hover);
  border-color: transparent;
}

body.app-slava-restraint .toolbar__button:hover::after {
  opacity: 0.22;
  transform: scale(1);
}

body.app-slava-restraint .toolbar__button--active,
body.app-slava-restraint .toolbar__button--active:hover {
  color: var(--sr-ink-bold);
  background-color: var(--sr-surface-control-active);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 0 14px rgba(255, 255, 255, 0.06);
}

body.app-slava-restraint .toolbar__button--active::after,
body.app-slava-restraint .toolbar__button--active:hover::after {
  opacity: 0.46;
  transform: scale(1);
}

body.app-slava-restraint .toolbar__button--active .toolbar__icon {
  color: rgba(255, 255, 255, 0.96);
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.18));
}
body.app-slava-restraint .toolbar__button:active {
  transform: scale(0.96);
  /* On press DOWN: snap fast (80ms ease-out) so the press feels
   * immediate and tactile. The longer back-ease above only kicks in
   * on release when :active drops. */
  transition:
    color 120ms ease,
    background-color 120ms ease,
    border-color 120ms ease,
    box-shadow 120ms ease,
    transform 80ms ease-out;
}

body.app-slava-restraint .toolbar__divider {
  width: 1px;
  background: var(--sr-edge);
}

/* Launchers — the side entry points use the same glass-pill vocabulary as
 * the toolbar, but stay off the main command rail to keep the canvas clear. */
body.app-slava-restraint .panel-launcher {
  isolation: isolate;
  overflow: hidden;
  background: var(--sr-glass-raised);
  backdrop-filter: var(--sr-blur-pill);
  -webkit-backdrop-filter: var(--sr-blur-pill);
  border: 1px solid var(--sr-edge);
  border-radius: var(--sr-radius-pill);
  color: var(--sr-ink-light);
  box-shadow: var(--sr-shadow-panel-sm);
  transition:
    color 120ms ease,
    background-color 120ms ease,
    border-color 120ms ease,
    box-shadow 120ms ease,
    transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

body.app-slava-restraint .panel-launcher::after {
  content: '';
  position: absolute;
  inset: 4px;
  z-index: 0;
  border-radius: var(--sr-radius-pill);
  background-image: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.34) 0 1px,
    transparent 1.35px
  );
  background-position: center;
  background-size: 6px 6px;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.92);
  transition:
    opacity var(--sr-motion-fast),
    transform var(--sr-motion-fast);
}

body.app-slava-restraint .panel-launcher__icon {
  position: relative;
  z-index: 1;
  transition:
    color 120ms ease,
    filter 120ms ease;
}

body.app-slava-restraint .panel-launcher:hover {
  color: var(--sr-ink-bold);
  background-color: var(--sr-surface-control-hover);
  border-color: var(--sr-edge-strong);
}

body.app-slava-restraint .panel-launcher:hover::after {
  opacity: 0.22;
  transform: scale(1);
}

body.app-slava-restraint .panel-launcher--active,
body.app-slava-restraint .panel-launcher--active:hover {
  color: var(--sr-ink-bold);
  background-color: var(--sr-surface-control-active);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 0 14px rgba(255, 255, 255, 0.06);
}

body.app-slava-restraint .panel-launcher--active::after,
body.app-slava-restraint .panel-launcher--active:hover::after {
  opacity: 0.46;
  transform: scale(1);
}

body.app-slava-restraint .panel-launcher--active .panel-launcher__icon {
  color: rgba(255, 255, 255, 0.96);
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.18));
}

body.app-slava-restraint .panel-launcher:active {
  transform: scale(0.96);
  transition:
    color 120ms ease,
    background-color 120ms ease,
    border-color 120ms ease,
    box-shadow 120ms ease,
    transform 80ms ease-out;
}

@media (max-width: 520px) {
  body.app-slava-restraint .toolbar {
    max-width: calc(100vw - var(--sr-space-4, 16px));
    gap: 2px;
    padding: 5px 6px;
  }

  body.app-slava-restraint .toolbar__button {
    width: 26px;
    min-width: 26px;
    min-height: 28px;
    padding: 5px 4px !important;
  }

  body.app-slava-restraint .toolbar__divider {
    margin: 0 1px !important;
  }

  body.app-slava-restraint .toolbar::before {
    font-size: 9px;
    letter-spacing: 0.22em;
  }
}

/* ─────────────────────────────────────────────────────────────────────
 * Agent log — compact telemetry surface. The feed model is intentionally
 * small today (time/source/message), so Slava expresses status through a
 * subtle signal strip, source dots, and restrained mono metadata.
 * ───────────────────────────────────────────────────────────────────── */
body.app-slava-restraint .agent-log {
  z-index: var(--sr-layer-agent-log);
  background: var(--sr-glass);
  backdrop-filter: var(--sr-blur-panel);
  -webkit-backdrop-filter: var(--sr-blur-panel);
  border: 1px solid var(--sr-edge);
  border-radius: var(--sr-radius-panel);
  color: var(--sr-ink);
  font-family: var(--sr-ui);
  box-shadow: var(--sr-shadow-panel-sm);
}

body.app-slava-restraint .agent-log__drag-row,
body.app-slava-restraint .agent-log__header {
  background: transparent;
  border-bottom: 1px solid transparent;
  padding: 10px 12px 10px 14px;
}

body.app-slava-restraint .agent-log--open .agent-log__header {
  border-bottom-color: var(--sr-edge);
}

body.app-slava-restraint .agent-log__title {
  font-family: var(--sr-ui);
  font-weight: 500;
  font-size: var(--sr-type-control);
  letter-spacing: 0;
  text-transform: none;
  color: var(--sr-ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

body.app-slava-restraint .agent-log__icon {
  color: var(--sr-ink-light);
  transform: none;
}

body.app-slava-restraint .agent-log__telemetry {
  display: inline-flex;
  min-width: 0;
  margin-left: auto;
  margin-right: var(--sr-space-2);
  align-items: center;
  gap: var(--sr-space-2);
  color: var(--sr-ink-faint);
  font-family: var(--sr-mono);
  font-size: var(--sr-type-meta);
  line-height: var(--sr-line-tight);
  text-transform: lowercase;
}

body.app-slava-restraint .agent-log__signal {
  display: grid;
  grid-template-columns: repeat(4, 3px);
  gap: 3px;
  align-items: center;
  height: 10px;
}

body.app-slava-restraint .agent-log__signal-cell {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--sr-ink-faint);
  opacity: 0.6;
}

body.app-slava-restraint .agent-log--executing .agent-log__signal-cell {
  background: var(--sr-ink-bold);
  animation: slava-agent-log-signal 960ms steps(4, end) infinite;
}

body.app-slava-restraint .agent-log--executing .agent-log__signal-cell:nth-child(2) {
  animation-delay: 120ms;
}

body.app-slava-restraint .agent-log--executing .agent-log__signal-cell:nth-child(3) {
  animation-delay: 240ms;
}

body.app-slava-restraint .agent-log--executing .agent-log__signal-cell:nth-child(4) {
  animation-delay: 360ms;
}

body.app-slava-restraint .agent-log__count {
  color: var(--sr-ink-meta);
}

body.app-slava-restraint .agent-log__status {
  max-width: 72px;
  overflow: hidden;
  color: var(--sr-ink-faint);
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.app-slava-restraint .agent-log__chevron {
  color: var(--sr-ink-light);
  transition: color 120ms ease;
}

body.app-slava-restraint .agent-log__body {
  background: transparent;
  padding: 6px 14px 12px;
}

body.app-slava-restraint .agent-log__empty {
  position: relative;
  display: grid;
  min-height: 96px;
  grid-template-columns: 1fr auto;
  grid-template-rows: 1fr auto auto 1fr;
  column-gap: var(--sr-space-2);
  align-items: center;
  color: var(--sr-ink-faint);
  font-family: var(--sr-mono);
  font-size: var(--sr-type-meta);
  font-style: normal;
  line-height: var(--sr-line-meta);
  padding: 4px 0 0 34px;
  text-align: left;
}

body.app-slava-restraint .agent-log__empty::before {
  content: '';
  position: absolute;
  top: 18px;
  bottom: 8px;
  left: 9px;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--sr-edge-strong) 18%, var(--sr-edge-strong) 78%, transparent);
}

body.app-slava-restraint .agent-log__empty::after {
  content: '';
  position: absolute;
  top: 28px;
  left: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sr-ink-faint);
  box-shadow:
    0 20px var(--sr-ink-faint),
    0 40px rgba(255, 255, 255, 0.10);
}

body.app-slava-restraint .agent-log__empty-grid {
  display: block;
  position: absolute;
  inset: 10px 0 0 28px;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(201, 202, 200, 0.20) 0 1px, transparent 1.25px);
  background-size: 8px 8px;
  opacity: 0.18;
  -webkit-mask-image: linear-gradient(to right, #000, transparent 76%);
  mask-image: linear-gradient(to right, #000, transparent 76%);
}

body.app-slava-restraint .agent-log__empty-title {
  position: relative;
  grid-column: 1;
  grid-row: 2;
  color: var(--sr-ink-light);
  font-family: var(--sr-ui);
  font-size: var(--sr-type-body);
  font-weight: 500;
}

body.app-slava-restraint .agent-log__empty-status {
  position: relative;
  display: inline-flex;
  grid-column: 1;
  grid-row: 3;
  width: max-content;
  margin-top: 4px;
  color: var(--sr-ink-faint);
  text-transform: lowercase;
}

body.app-slava-restraint .agent-log__entry {
  --agent-log-source-color: var(--sr-ink-meta);
  display: grid;
  grid-template-columns: 8px 64px 70px 1fr;
  gap: 8px;
  align-items: baseline;
  padding: 7px 0;
  border-bottom: 1px solid var(--sr-edge);
  font-family: var(--sr-mono);
  font-size: var(--sr-type-label);
  line-height: var(--sr-line-relaxed);
}

body.app-slava-restraint .agent-log__entry:last-child {
  border-bottom-color: transparent;
}

body.app-slava-restraint .agent-log__entry--graph {
  --agent-log-source-color: var(--sr-success);
}

body.app-slava-restraint .agent-log__entry--hermes {
  --agent-log-source-color: var(--sr-accent);
}

body.app-slava-restraint .agent-log__entry--system {
  --agent-log-source-color: var(--sr-ink-light);
}

body.app-slava-restraint .agent-log__entry-marker {
  display: inline-block;
  align-self: center;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--agent-log-source-color);
  box-shadow: 0 0 10px color-mix(in srgb, var(--agent-log-source-color) 44%, transparent);
}

body.app-slava-restraint .agent-log__time {
  color: var(--sr-ink-faint);
  font-variant-numeric: tabular-nums;
}

body.app-slava-restraint .agent-log__source {
  color: var(--agent-log-source-color);
  text-transform: lowercase;
  letter-spacing: 0;
  font-size: var(--sr-type-meta);
}

body.app-slava-restraint .agent-log__msg {
  color: var(--sr-ink);
  white-space: pre-wrap;
  word-break: break-word;
}

@keyframes slava-agent-log-signal {
  0%, 100% {
    opacity: 0.24;
    box-shadow: none;
  }
  50% {
    opacity: 0.92;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.30);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.app-slava-restraint .agent-log--executing .agent-log__signal-cell {
    animation: none;
  }
}

body.app-slava-restraint .mesh-preview {
  position: relative;
  min-height: var(--sr-node-mesh-height);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--sr-radius-node);
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--node-category-color, var(--sr-accent)) 18%, transparent) 0, transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 42%),
    var(--sr-canvas-elevated);
  isolation: isolate;
  cursor: pointer;
}

body.app-slava-restraint .mesh-preview:focus-visible {
  outline: var(--sr-focus-outline);
  outline-offset: var(--sr-focus-offset);
}

body.app-slava-restraint .mesh-preview::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, var(--sr-node-mesh-grid-color) 0 1px, transparent 1.25px);
  background-position: center;
  background-size: 8px 8px;
  opacity: 0.36;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0 52%, transparent 78%);
  mask-image: radial-gradient(ellipse at center, #000 0 52%, transparent 78%);
}

body.app-slava-restraint .mesh-preview::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0 49%, rgba(255, 255, 255, 0.10) 49% 50%, transparent 50%),
    linear-gradient(0deg, transparent 0 49%, rgba(255, 255, 255, 0.08) 49% 50%, transparent 50%);
  background-size: 44px 44px;
  opacity: 0.12;
}

body.app-slava-restraint .mesh-preview__viewer {
  position: relative;
  z-index: 1;
  width: 100%;
  height: var(--sr-node-mesh-height);
  background: transparent;
  opacity: 0.74;
  transition: opacity var(--sr-motion-ui);
}

body.app-slava-restraint .mesh-preview--loading .mesh-preview__viewer,
body.app-slava-restraint .mesh-preview--error .mesh-preview__viewer {
  opacity: 0.08;
}

body.app-slava-restraint .mesh-preview__placeholder {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--sr-motion-ui);
}

body.app-slava-restraint .mesh-preview--loading .mesh-preview__placeholder,
body.app-slava-restraint .mesh-preview--error .mesh-preview__placeholder {
  opacity: 1;
}

body.app-slava-restraint .mesh-preview__mesh {
  position: relative;
  width: 92px;
  height: 62px;
  border-radius: 3px;
  background:
    linear-gradient(var(--sr-node-mesh-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--sr-node-mesh-line) 1px, transparent 1px);
  background-size: 12px 12px;
  box-shadow:
    0 0 0 1px var(--sr-node-mesh-grid-soft) inset,
    0 0 30px color-mix(in srgb, var(--node-category-color, var(--sr-accent)) 22%, transparent);
  opacity: 0.74;
  transform: perspective(160px) rotateX(58deg) rotateZ(-12deg);
}

body.app-slava-restraint .mesh-preview__mesh::before {
  content: '';
  position: absolute;
  inset: -14px 14px 18px;
  border: 1px solid var(--sr-node-mesh-grid-color);
  border-bottom: 0;
  border-radius: 3px 3px 0 0;
  transform: translateY(-10px) skewX(-12deg);
}

body.app-slava-restraint .mesh-preview__mesh::after {
  content: '';
  position: absolute;
  left: 42px;
  bottom: 15px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--node-category-color, var(--sr-accent));
  box-shadow: 0 0 18px color-mix(in srgb, var(--node-category-color, var(--sr-accent)) 58%, transparent);
}

body.app-slava-restraint .mesh-preview__hud {
  position: absolute;
  left: var(--sr-space-3);
  right: var(--sr-space-3);
  bottom: var(--sr-space-2);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sr-space-2);
  color: var(--sr-ink-meta);
  font-family: var(--sr-mono);
  font-size: var(--sr-type-meta);
  letter-spacing: 0;
  line-height: var(--sr-line-compact);
  text-transform: uppercase;
}

body.app-slava-restraint .mesh-modal__viewer {
  background: var(--sr-canvas-elevated);
}

body.app-slava-restraint .mesh-modal__fallback {
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--node-category-color, var(--sr-accent)) 18%, transparent) 0, transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 42%),
    var(--sr-canvas-elevated);
}

body.app-slava-restraint .mesh-modal__fallback .mesh-preview__mesh {
  width: min(34vw, 260px);
  height: min(22vw, 174px);
  background-size: 22px 22px;
}

body.app-slava-restraint .mesh-modal-overlay {
  background: rgba(0, 0, 0, 0.86);
  z-index: var(--sr-layer-modal);
}

body.app-slava-restraint .mesh-modal {
  border: 1px solid var(--sr-edge);
  border-radius: var(--sr-radius-panel);
  background: var(--sr-glass-strong);
  box-shadow: var(--sr-shadow-panel);
}

body.app-slava-restraint .mesh-modal__close {
  z-index: var(--sr-layer-modal-control);
  border: 1px solid var(--sr-edge-strong);
  border-radius: var(--sr-radius-pill);
  background: rgba(0, 0, 0, 0.58);
  color: var(--sr-ink-bold);
  transition:
    background var(--sr-motion-fast),
    border-color var(--sr-motion-fast),
    color var(--sr-motion-fast);
}

body.app-slava-restraint .mesh-modal__close:hover {
  border-color: var(--sr-edge-strong);
  background: var(--sr-surface-control-hover);
  color: var(--sr-ink-bold);
}

body.app-slava-restraint .mesh-modal__info {
  background: rgba(0, 0, 0, 0.66);
}

body.app-slava-restraint .mesh-modal__format {
  color: var(--sr-ink-meta);
  font-family: var(--sr-mono);
  font-size: var(--sr-type-control);
}

body.app-slava-restraint .mesh-modal__download {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--sr-radius-pill);
  background: var(--sr-accent);
  color: var(--sr-on-accent);
  font-family: var(--sr-ui);
}

/* ─────────────────────────────────────────────────────────────────────
 * Nodes — Flora-influenced (v0.2)
 *
 * The preview is the card. Title sits as a transparent overlay strip
 * at the top of the card with a subtle dark gradient for legibility on
 * light images; below the strip the .model-node__preview content (image,
 * video, 3D render) bleeds edge-to-edge to the rounded corners.
 *
 * Category color encoding is preserved but quieter — 20% alpha border
 * tint at rest (was 40% in v0.1), full saturation only on selection.
 *
 * --node-category-color is set as an inline CSS variable on .model-node
 * by ModelNode.tsx / DynamicNode.tsx (one-liner React change made earlier).
 * ───────────────────────────────────────────────────────────────────── */
body.app-slava-restraint .react-flow__node {
  font-family: var(--sr-ui);
}

/* Outer node wrapper — transparent. The visible card is .model-node__card.
 * The type-label and settings-bar float ABOVE the card; positioning them
 * outside the card requires the wrapper itself to NOT clip overflow. */
body.app-slava-restraint .model-node {
  position: relative;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  color: var(--sr-ink);
  font-family: var(--sr-ui);
  overflow: visible;
  /* Top padding leaves room for the floating settings-bar + type-label
   * to sit above the card without being clipped or overlapping it. */
  padding-top: var(--sr-node-pad-top);
}

/* Type label — small, quiet, sits in the upper-left ABOVE the card.
 * Identifies the category in plain text ("text-gen", "image-gen", etc.). */
body.app-slava-restraint .model-node__type-label {
  display: block;
  position: absolute;
  top: var(--sr-node-type-label-top);
  left: var(--sr-space-1);
  font-family: var(--sr-ui);
  font-weight: 400;
  font-size: var(--sr-type-meta);
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--sr-ink-light);
  pointer-events: none;
}

/* Settings bar — floating dark-glass pill above the card, ONLY when selected.
 * COMPACT BY DEFAULT: just a tiny `…` button (~22px circle). Expands to a
 * full pill with the model name on hover. Stays out of the way until you
 * actually want it; doesn't push the right edge of the canvas around when
 * a node is positioned near the viewport edge. */
body.app-slava-restraint .model-node__settings-bar {
  display: inline-flex;
  position: absolute;
  top: var(--sr-node-pill-top);
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
  gap: 0;  /* expands to --sr-node-pill-expanded-gap on hover */
  padding: 0;
  background: var(--sr-node-pill-bg);
  backdrop-filter: var(--sr-blur-node);
  -webkit-backdrop-filter: var(--sr-blur-node);
  border: 1px solid var(--sr-edge);
  border-radius: var(--sr-radius-pill);
  box-shadow: var(--sr-node-pill-shadow);
  white-space: nowrap;
  z-index: var(--sr-layer-node-floating);
  transition: padding var(--sr-node-pill-motion), gap var(--sr-node-pill-motion);
  cursor: default;
}

/* Model name — hidden in compact state, fades in on hover. */
body.app-slava-restraint .model-node__settings-model {
  font-family: var(--sr-ui);
  font-weight: 500;
  font-size: var(--sr-type-label);
  color: var(--sr-ink-bold);
  letter-spacing: -0.005em;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  margin-left: 0;
  transition:
    max-width var(--sr-node-pill-label-motion),
    opacity var(--sr-node-pill-label-opacity-motion),
    margin-left var(--sr-node-pill-label-motion);
  pointer-events: none;
}

/* Edit button — visible in BOTH states; in compact it IS the bar. */
body.app-slava-restraint .model-node__settings-edit {
  background: transparent;
  border: none;
  border-radius: 50%;
  width: var(--sr-node-pill-button-size);
  height: var(--sr-node-pill-button-size);
  padding: 0;
  color: var(--sr-ink-light);
  font-size: var(--sr-type-action);
  line-height: var(--sr-line-tight);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color var(--sr-motion-fast), background-color var(--sr-motion-fast);
}
body.app-slava-restraint .model-node__settings-edit:hover {
  color: var(--sr-ink-bold);
  background: var(--sr-surface-control-active);
}

/* Expanded state — triggered ONLY by hovering the bar itself or focusing
 * its button. Hovering anywhere on the node body does NOT expand it —
 * the card is large and would keep the bar permanently expanded. */
body.app-slava-restraint .model-node__settings-bar:hover,
body.app-slava-restraint .model-node__settings-bar:focus-within {
  padding: var(--sr-node-pill-expanded-padding);
  gap: var(--sr-node-pill-expanded-gap);
}
body.app-slava-restraint .model-node__settings-bar:hover .model-node__settings-model,
body.app-slava-restraint .model-node__settings-bar:focus-within .model-node__settings-model {
  max-width: var(--sr-node-pill-label-max);
  opacity: 1;
  margin-left: 0;
}

/* THE CARD — visible content surface. overflow:visible so handles can
 * escape outside the card edge. The image preview clips itself to
 * matching rounded corners (set on .model-node__preview below). */
body.app-slava-restraint .model-node__card {
  display: block;
  position: relative;
  background: var(--sr-glass-strong);
  backdrop-filter: var(--sr-blur-node);
  -webkit-backdrop-filter: var(--sr-blur-node);
  border: 1px solid color-mix(in srgb, var(--node-category-color, var(--sr-node-category-fallback)) var(--sr-node-card-border-mix), transparent);
  border-radius: var(--sr-radius-node);
  /* Soft inner highlight (1px white at 6% inset) — Flora's quiet halo. */
  box-shadow: var(--sr-shadow-node);
  overflow: visible;  /* let handles escape; preview clips itself */
  transition: border-color var(--sr-motion-ui), box-shadow var(--sr-motion-ui);
}

@keyframes slava-node-enter-opacity {
  from {
    opacity: 0;
    filter: blur(var(--sr-node-enter-blur));
  }
  to {
    opacity: 1;
    filter: none;
  }
}

@keyframes slava-node-enter-bloom {
  from {
    opacity: 1;
    box-shadow:
      0 0 0 var(--sr-node-enter-ring-size) color-mix(in srgb, var(--node-category-color, var(--sr-accent)) var(--sr-node-enter-ring-mix), transparent),
      0 0 var(--sr-node-enter-glow-size) color-mix(in srgb, var(--node-category-color, var(--sr-accent)) var(--sr-node-enter-glow-mix), transparent);
  }
  to {
    opacity: 0;
    box-shadow:
      0 0 0 0 transparent,
      0 0 0 transparent;
  }
}

body.app-slava-restraint .model-node--entering {
  animation: slava-node-enter-opacity var(--sr-node-enter-duration) cubic-bezier(0.05, 0.7, 0.1, 1) both;
}

body.app-slava-restraint .model-node__card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
}

body.app-slava-restraint .model-node--entering .model-node__card::after {
  animation: slava-node-enter-bloom var(--sr-node-enter-duration) cubic-bezier(0.05, 0.7, 0.1, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  body.app-slava-restraint .model-node--entering,
  body.app-slava-restraint .model-node--entering .model-node__card::after {
    animation: none;
  }
}

/* Selected state — applies to the card child.
 *
 * Box-shadow breathes 1.6s on a sine-ish ease — the halo expands from
 * 18px / 28% to 30px / 65% and back, giving a subtle "this node is
 * alive" pulse. Only animates `box-shadow` (safest property inside a
 * .react-flow__node — never animate transform here). The ring at 0 0 0
 * 1px and the inner highlight + drop-shadow stay static so the card's
 * fundamental geometry doesn't move.
 *
 * Reduced-motion: pinned to the static mid-point (24px / 45%) so users
 * with motion sensitivity still see a clear selected affordance.
 */
@keyframes slava-select-breathe {
  0%, 100% {
    box-shadow:
      0 0 0 var(--sr-node-ring-width) var(--node-category-color, var(--sr-accent)),
      0 0 var(--sr-node-selected-glow-rest-size) color-mix(in srgb, var(--node-category-color, var(--sr-accent)) var(--sr-node-selected-glow-rest-mix), transparent),
      var(--sr-shadow-node);
  }
  50% {
    box-shadow:
      0 0 0 var(--sr-node-ring-width) var(--node-category-color, var(--sr-accent)),
      0 0 var(--sr-node-selected-glow-peak-size) color-mix(in srgb, var(--node-category-color, var(--sr-accent)) var(--sr-node-selected-glow-peak-mix), transparent),
      var(--sr-shadow-node);
  }
}

body.app-slava-restraint .model-node--selected .model-node__card {
  border-color: var(--node-category-color, var(--sr-accent));
  border-width: var(--sr-node-card-selected-border-width);
  animation: slava-select-breathe var(--sr-node-selected-duration) ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  body.app-slava-restraint .model-node--selected .model-node__card {
    animation: none;
    box-shadow:
      0 0 0 var(--sr-node-ring-width) var(--node-category-color, var(--sr-accent)),
      0 0 var(--sr-node-selected-glow-reduced-size) color-mix(in srgb, var(--node-category-color, var(--sr-accent)) var(--sr-node-selected-glow-reduced-mix), transparent),
      var(--sr-shadow-node);
  }
}

/* Header — transparent overlay strip at the top of the card, sitting
 * OVER any preview content underneath. A subtle dark gradient ensures
 * label legibility even on light images. Floats on top of preview via
 * z-index, not pushed-above-the-card via absolute positioning (keeps
 * the React Flow handle anchoring intact). */
body.app-slava-restraint .model-node__header {
  position: relative;
  z-index: var(--sr-layer-node-header);
  padding: var(--sr-node-header-padding);
  border-bottom: none;
  border-radius: var(--sr-radius-node) var(--sr-radius-node) 0 0;
  background: transparent;
  align-items: center;
  gap: var(--sr-node-header-gap);
  overflow: hidden;
  /* Tiny dark gradient overlay for label legibility on light previews. */
  background-image: var(--sr-node-header-gradient);
}

/* The 6px round dot is hidden — the border tint + model name carry the
 * category. No extra decorative element. */
body.app-slava-restraint .model-node__category-dot {
  display: none;
}

/* Title — small, quiet. Sits in the upper-left of the overlay strip.
 * Flora's title scale: 11-12px, weight 500, white. Small enough to not
 * compete with the preview underneath. */
body.app-slava-restraint .model-node__label {
  color: var(--sr-ink-bold);
  font-family: var(--sr-ui);
  font-weight: 500;
  font-size: var(--sr-type-body);
  line-height: var(--sr-line-compact);
  letter-spacing: -0.005em;
}

body.app-slava-restraint .model-node__badge--warning {
  color: var(--sr-warning);
}

/* Id-chip — sits in the upper-right, mono, faint. Reads as model
 * identifier (Flora-style "Flux Dev" / "Nano Banana" upper-right tag).
 * Smaller and quieter than the title. */
body.app-slava-restraint .model-node__id-chip {
  background: transparent;
  color: var(--sr-ink-light);
  border: none;
  border-radius: 0;
  font-family: var(--sr-mono);
  font-size: var(--sr-type-meta);
  font-weight: 400;
  letter-spacing: 0;
  padding: 0;
  text-transform: none;
}

body.app-slava-restraint .dynamic-node__model-badge {
  margin: 0 var(--sr-space-3) var(--sr-space-2);
  padding: 0;
  overflow: hidden;
  color: var(--sr-ink-meta);
  background: transparent;
  border-radius: 0;
  font-family: var(--sr-mono);
  font-size: var(--sr-type-meta);
  line-height: var(--sr-line-compact);
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.app-slava-restraint .model-node__ports {
  padding: var(--sr-node-port-padding);
}

body.app-slava-restraint .model-node__port-row {
  padding: var(--sr-node-port-row-padding);
}

body.app-slava-restraint .model-node__port-label {
  color: var(--sr-ink-light);
  font-family: var(--sr-ui);
  font-weight: 400;
  font-size: var(--sr-type-label);
  letter-spacing: 0;
  text-transform: none;
}

body.app-slava-restraint .reroute-node {
  position: relative;
  width: var(--sr-node-reroute-size);
  height: var(--sr-node-reroute-size);
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: crosshair;
}

body.app-slava-restraint .reroute-node::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--sr-node-reroute-dot-size);
  height: var(--sr-node-reroute-dot-size);
  border-radius: 50%;
  background: var(--sr-handle-rest-dot);
  transform: translate(-50%, -50%);
  transition:
    width var(--sr-motion-handle),
    height var(--sr-motion-handle),
    background-color var(--sr-motion-handle),
    box-shadow var(--sr-motion-handle);
}

body.app-slava-restraint .reroute-node:hover::before {
  width: var(--sr-handle-size);
  height: var(--sr-handle-size);
  background: var(--sr-handle-glass);
  box-shadow: var(--sr-handle-shadow);
}

body.app-slava-restraint .reroute-node__handle {
  width: var(--sr-handle-size) !important;
  height: var(--sr-handle-size) !important;
  background: transparent !important;
  border: 0 !important;
}

/* Handles — Flora-style circular connector points floating outside the card.
 * The handle keeps a stable 20px hit target; ::before paints the quiet rest
 * dot and ::after paints the full glass circle + plus. Both pseudos share the
 * same 50%/50% origin so hover, magnet, and connecting states cannot drift. */
body.app-slava-restraint .model-node__handle,
body.app-slava-restraint .react-flow__handle {
  --sr-handle-rest-x: 0px;
  --sr-handle-rest-y: 0px;
  --sr-handle-magnet-x: 0px;
  --sr-handle-magnet-y: 0px;
  width: var(--sr-handle-size) !important;
  height: var(--sr-handle-size) !important;
  border-radius: 50% !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none;
  opacity: 1;
  transition: none;
}

/* Rest dot. */
body.app-slava-restraint .model-node__handle::before,
body.app-slava-restraint .react-flow__handle::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--sr-handle-dot-size);
  height: var(--sr-handle-dot-size);
  background: var(--sr-handle-rest-dot);
  border-radius: 50%;
  opacity: 1;
  transform:
    translate(-50%, -50%)
    translate(var(--sr-handle-rest-x), var(--sr-handle-rest-y))
    scale(1);
  transform-origin: center;
  transition:
    opacity var(--sr-motion-handle),
    transform var(--sr-motion-handle);
  pointer-events: none;
}

/* Hover/active full circle. The plus glyph is two centered linear gradients
 * on the same 20x20 pseudo-element as the glass circle. */
body.app-slava-restraint .model-node__handle::after,
body.app-slava-restraint .react-flow__handle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--sr-handle-size);
  height: var(--sr-handle-size);
  background:
    linear-gradient(var(--sr-handle-glyph), var(--sr-handle-glyph)) center / var(--sr-handle-plus-length) var(--sr-handle-plus-thickness) no-repeat,
    linear-gradient(var(--sr-handle-glyph), var(--sr-handle-glyph)) center / var(--sr-handle-plus-thickness) var(--sr-handle-plus-length) no-repeat,
    var(--sr-handle-glass);
  border: 1px solid var(--sr-handle-ring);
  border-radius: 50%;
  box-shadow: var(--sr-handle-shadow);
  opacity: 0;
  transform:
    translate(-50%, -50%)
    translate(var(--sr-handle-rest-x), var(--sr-handle-rest-y))
    scale(var(--sr-handle-rest-scale));
  transform-origin: center;
  transition:
    opacity var(--sr-motion-handle),
    transform var(--sr-motion-handle),
    border-color var(--sr-motion-handle),
    box-shadow var(--sr-motion-handle);
  pointer-events: none;
}

/* Push the handles WELL outside the card edge so they read as floating
 * connector points in the gap between nodes (Flora pattern), not as
 * decorations stuck to the card border. */
body.app-slava-restraint .react-flow__handle-left {
  margin-left: var(--sr-handle-outset);
  --sr-handle-rest-x: var(--sr-handle-rest-offset);
}
body.app-slava-restraint .react-flow__handle-right {
  margin-right: var(--sr-handle-outset);
  --sr-handle-rest-x: calc(var(--sr-handle-rest-offset) * -1);
}
body.app-slava-restraint .react-flow__handle-top {
  margin-top: var(--sr-handle-outset);
  --sr-handle-rest-y: var(--sr-handle-rest-offset);
}
body.app-slava-restraint .react-flow__handle-bottom {
  margin-bottom: var(--sr-handle-outset);
  --sr-handle-rest-y: calc(var(--sr-handle-rest-offset) * -1);
}

/* React Flow centers handles with transform: translate(...). Preserve that
 * anchoring in this skin so hover/connect states cannot replace the
 * positioning transform. */
body.app-slava-restraint .react-flow__handle-left,
body.app-slava-restraint .react-flow__handle-left:hover,
body.app-slava-restraint .react-flow__handle-left.connectingfrom,
body.app-slava-restraint .react-flow__handle-left.connecting,
body.app-slava-restraint .react-flow__handle-left.connectingto {
  transform: translate(-50%, -50%) !important;
}
body.app-slava-restraint .react-flow__handle-right,
body.app-slava-restraint .react-flow__handle-right:hover,
body.app-slava-restraint .react-flow__handle-right.connectingfrom,
body.app-slava-restraint .react-flow__handle-right.connecting,
body.app-slava-restraint .react-flow__handle-right.connectingto {
  transform: translate(50%, -50%) !important;
}
body.app-slava-restraint .react-flow__handle-top,
body.app-slava-restraint .react-flow__handle-top:hover,
body.app-slava-restraint .react-flow__handle-top.connectingfrom,
body.app-slava-restraint .react-flow__handle-top.connecting,
body.app-slava-restraint .react-flow__handle-top.connectingto {
  transform: translate(-50%, -50%) !important;
}
body.app-slava-restraint .react-flow__handle-bottom,
body.app-slava-restraint .react-flow__handle-bottom:hover,
body.app-slava-restraint .react-flow__handle-bottom.connectingfrom,
body.app-slava-restraint .react-flow__handle-bottom.connecting,
body.app-slava-restraint .react-flow__handle-bottom.connectingto {
  transform: translate(-50%, 50%) !important;
}

body.app-slava-restraint .react-flow__handle:hover::before,
body.app-slava-restraint .react-flow__handle.connectingfrom::before,
body.app-slava-restraint .react-flow__handle.connecting::before,
body.app-slava-restraint .react-flow__handle.connectingto::before {
  opacity: 0;
  transform:
    translate(-50%, -50%)
    translate(0, 0)
    translate(var(--sr-handle-magnet-x), var(--sr-handle-magnet-y))
    scale(var(--sr-handle-catch-scale));
}
body.app-slava-restraint .react-flow__handle:hover::after,
body.app-slava-restraint .react-flow__handle.connectingfrom::after,
body.app-slava-restraint .react-flow__handle.connecting::after,
body.app-slava-restraint .react-flow__handle.connectingto::after {
  opacity: 1;
  transform:
    translate(-50%, -50%)
    translate(0, 0)
    translate(var(--sr-handle-magnet-x), var(--sr-handle-magnet-y))
    scale(1);
}

/* Active-connection accent — orange ring during drag-from / hover-target. */
body.app-slava-restraint .react-flow__handle.connectingfrom::after,
body.app-slava-restraint .react-flow__handle.connecting::after,
body.app-slava-restraint .react-flow__handle.connectingto::after {
  box-shadow: var(--sr-handle-active-shadow);
  border-color: var(--sr-accent);
  transition:
    opacity var(--sr-motion-emphasized),
    transform var(--sr-motion-emphasized),
    border-color var(--sr-motion-emphasized),
    box-shadow var(--sr-motion-emphasized);
}

@media (prefers-reduced-motion: reduce) {
  body.app-slava-restraint .reroute-node::before,
  body.app-slava-restraint .model-node__handle::before,
  body.app-slava-restraint .model-node__handle::after,
  body.app-slava-restraint .react-flow__handle::before,
  body.app-slava-restraint .react-flow__handle::after {
    transition: none;
  }

  body.app-slava-restraint .model-node__handle,
  body.app-slava-restraint .react-flow__handle {
    --sr-handle-magnet-x: 0px !important;
    --sr-handle-magnet-y: 0px !important;
  }
}

/* ─── DEBUG: handle alignment overlay ────────────────────────────────
 * Toggle in DevTools console:
 *   document.body.classList.toggle('debug-handles')
 *
 * When enabled:
 *   - Red outline shows the handle's 20×20 layout box.
 *   - Green dot at the geometric center (parent's 50% / 50%).
 *   - Both ::before (rest dot) AND ::after (hover circle) painted at
 *     50% opacity simultaneously, so misalignment between them is
 *     immediately visible.
 * If the rest dot, the hover circle, AND the green center marker all
 * sit on top of each other, the alignment is correct. If any are
 * offset, the offset is the bug.
 * ──────────────────────────────────────────────────────────────────── */
body.app-slava-restraint.debug-handles .react-flow__handle {
  outline: 1px solid red !important;
  outline-offset: 0 !important;
}
body.app-slava-restraint.debug-handles .react-flow__handle::before {
  opacity: 0.5 !important;
}
body.app-slava-restraint.debug-handles .react-flow__handle::after {
  opacity: 0.5 !important;
}
body.app-slava-restraint.debug-handles .react-flow__handle .debug-center,
body.app-slava-restraint.debug-handles .react-flow__handle::marker { /* placeholder */ }
/* Use a separate ::backdrop-equivalent via background-image for the
 * center marker since both pseudos are taken. A radial gradient on the
 * parent paints a 2px green dot exactly at 50%/50%. */
body.app-slava-restraint.debug-handles .react-flow__handle {
  background-image: radial-gradient(circle at center, lime 0, lime 1px, transparent 1.5px) !important;
}

/* Edges — subtle white with a soft glow halo (Flora's connector lines).
 * SVG drop-shadow on the edge stroke creates the halo without a heavier
 * stroke weight; readable on pure black without being aggressive.
 *
 * Mount animation: each edge draws from source to target on first mount.
 * `pathLength="100"` (set on the BaseEdge in TypedEdge.tsx) normalizes
 * every path to 100 units regardless of actual length, so a single
 * `stroke-dasharray: 100` works universally. The keyframes interpolate
 * `stroke-dashoffset` from 100 (line invisible) to 0 (fully drawn),
 * then jump `stroke-dasharray` to `none` at the end so any subsequent
 * `.animated` (executing edges marching-ants) state isn't blocked.
 *
 * One-shot per edge instance — xyflow keeps DOM identity stable by
 * edge ID, so the animation does NOT replay on node-drag re-renders.
 *
 * Curve: M3 emphasized-decelerate `cubic-bezier(0.05, 0.7, 0.1, 1)` —
 * the right curve for an "incoming element" per Material 3 motion. */
@keyframes slava-edge-draw {
  0%   { stroke-dasharray: 100; stroke-dashoffset: 100; }
  99%  { stroke-dasharray: 100; stroke-dashoffset: 0; }
  100% { stroke-dasharray: none; stroke-dashoffset: 0; }
}

body.app-slava-restraint .react-flow__edge-path {
  stroke: var(--sr-edge-path-color);
  stroke-width: var(--sr-edge-path-width);
  filter: var(--sr-edge-path-glow);
  animation: slava-edge-draw var(--sr-edge-draw-duration) cubic-bezier(0.05, 0.7, 0.1, 1) forwards;
}

@keyframes slava-edge-dash-march {
  to { stroke-dashoffset: -16; }
}

@keyframes slava-edge-dot-pulse {
  to { stroke-dashoffset: -100; }
}

body.app-slava-restraint .react-flow__edge.animated .react-flow__edge-path {
  stroke-dasharray: var(--sr-edge-flow-dasharray);
  stroke-linecap: round;
  animation: slava-edge-dash-march var(--sr-edge-flow-duration) cubic-bezier(0.42, 0, 0.2, 1) infinite;
}

body.app-slava-restraint .react-flow__edge.animated .typed-edge__pulse {
  display: block;
  pointer-events: none;
  stroke-width: var(--sr-edge-pulse-width);
  stroke-linecap: round;
  stroke-dasharray: var(--sr-edge-pulse-dasharray);
  stroke-dashoffset: 0;
  opacity: var(--sr-edge-pulse-opacity);
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.26));
  animation: slava-edge-dot-pulse var(--sr-edge-pulse-duration) steps(12, end) infinite;
}

@media (prefers-reduced-motion: reduce) {
  body.app-slava-restraint .react-flow__edge-path,
  body.app-slava-restraint .react-flow__edge.animated .react-flow__edge-path,
  body.app-slava-restraint .react-flow__edge.animated .typed-edge__pulse {
    animation: none;
  }

  body.app-slava-restraint .react-flow__edge.animated .react-flow__edge-path {
    stroke-dasharray: none;
  }

  body.app-slava-restraint .react-flow__edge.animated .typed-edge__pulse {
    display: none;
  }
}
body.app-slava-restraint .react-flow__edge.selected .react-flow__edge-path {
  stroke: var(--sr-accent);
  stroke-width: var(--sr-edge-selected-width);
  filter: var(--sr-edge-selected-glow);
}

/* Preview area — fills card edge-to-edge (Flora's image-fills-card move).
 * Negative top margin pulls the preview up beneath the floating header
 * overlay so the image extends behind the title gradient. Border-radius
 * matches the card's interior corners; overflow:hidden clips the image
 * (the card itself is overflow:visible to let handles escape). */
body.app-slava-restraint .model-node__preview,
body.app-slava-restraint .model-node__preview-placeholder {
  background: var(--sr-node-preview-bg);
  border-radius: var(--sr-radius-node);
  margin: var(--sr-node-preview-overlap) 0 0 0;  /* pull up under the absolute-positioned header */
  overflow: hidden;
  position: relative;
  z-index: var(--sr-layer-node-preview);
}
/* Image / video preview fills the area completely. */
body.app-slava-restraint .model-node__preview img,
body.app-slava-restraint .model-node__preview video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
}

/* Text surfaces — the text itself is the object. Slava removes the chunky
 * secondary Enhance button and lets the editor/preview occupy the card. */
body.app-slava-restraint .model-node--text-surface {
  min-width: var(--sr-node-text-min-width);
  max-width: var(--sr-node-text-max-width);
}

body.app-slava-restraint .model-node--text-surface .model-node__card {
  display: flex;
  min-height: var(--sr-node-text-card-min-height);
  flex-direction: column;
  border-radius: var(--sr-radius-panel);
}

body.app-slava-restraint .model-node--text-surface .model-node__header {
  flex: 0 0 auto;
  min-height: var(--sr-node-text-header-min-height);
  padding: var(--sr-node-text-header-padding);
  border-radius: var(--sr-radius-panel) var(--sr-radius-panel) 0 0;
}

body.app-slava-restraint .model-node--text-surface .model-node__label {
  font-size: var(--sr-type-title);
  font-weight: 600;
}

body.app-slava-restraint .model-node--text-surface .model-node__inline-textarea {
  display: flex;
  flex: 1 1 auto;
  min-height: var(--sr-node-text-content-min-height);
  padding: var(--sr-node-text-content-padding);
  border-top: 0;
}

body.app-slava-restraint .model-node--text-surface .model-node__textarea {
  appearance: none;
  -webkit-appearance: none;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  max-height: none;
  padding: var(--sr-node-text-inner-padding);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--sr-ink);
  font-family: var(--sr-ui);
  font-size: var(--sr-type-control);
  line-height: var(--sr-line-bubble);
  resize: none;
  outline: none !important;
  box-shadow: none !important;
  scrollbar-color: var(--sr-node-scrollbar-color) transparent;
}

body.app-slava-restraint .model-node--text-surface .model-node__textarea:focus {
  outline: none !important;
  border-color: transparent;
  box-shadow: none !important;
  caret-color: var(--sr-ink-bold);
}

body.app-slava-restraint .model-node--text-surface .model-node__textarea:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

body.app-slava-restraint .model-node--text-surface .model-node__textarea::placeholder {
  color: var(--sr-ink-faint);
}

body.app-slava-restraint .model-node--text-surface .model-node__enhance {
  display: none;
}

body.app-slava-restraint .model-node--text-surface .model-node__preview {
  display: flex;
  flex: 1 1 auto;
  min-height: var(--sr-node-text-content-min-height);
  margin: 0;
  padding: var(--sr-node-text-content-padding);
  border-radius: 0;
  background: transparent;
  overflow: hidden;
}

body.app-slava-restraint .model-node--text-surface .model-node__preview-text {
  flex: 1 1 auto;
  max-height: none;
  padding: var(--sr-node-text-inner-padding);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--sr-ink);
  font-family: var(--sr-ui);
  font-size: var(--sr-type-control);
  line-height: var(--sr-line-bubble);
  white-space: break-spaces;
  overflow-wrap: anywhere;
  overflow-y: auto;
}

body.app-slava-restraint .model-node--text-input .model-node__ports {
  position: absolute;
  inset: 0;
  padding: 0;
  pointer-events: none;
}

body.app-slava-restraint .model-node--text-input .model-node__port-row {
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  padding: 0;
  transform: translateY(-50%);
  pointer-events: none;
}

body.app-slava-restraint .model-node--text-input .model-node__ports--input .model-node__port-row {
  left: 0;
}

body.app-slava-restraint .model-node--text-input .model-node__ports--output .model-node__port-row {
  right: 0;
}

body.app-slava-restraint .model-node--text-input .model-node__port-label {
  display: none;
}

body.app-slava-restraint .model-node--text-input .react-flow__handle {
  pointer-events: auto;
}

/* Image surface nodes — Flora reference: the image is the object, not a
 * preview nested inside a larger card. Chrome moves above the image and only
 * appears when the user approaches the node. */
body.app-slava-restraint .model-node--image-surface {
  padding-top: var(--sr-node-image-pad-top);
}

body.app-slava-restraint .model-node--image-surface .model-node__type-label {
  display: none;
}
/* settings-bar stays visible on image-surface nodes — it's the only UI
 * entry point for the Inspector popover, and hiding it leaves the node
 * uneditable. Lives in the 70px image-padding zone above the image. */

body.app-slava-restraint .model-node--image-surface .model-node__card {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  border-radius: var(--sr-node-media-radius);
  box-shadow: none;
  overflow: visible;
  animation: none;
}

body.app-slava-restraint .model-node--image-surface.model-node--selected .model-node__card {
  border: none;
  box-shadow: none;
  animation: none;
}

body.app-slava-restraint .model-node--image-surface .model-node__header {
  position: absolute;
  top: var(--sr-node-image-header-offset);
  left: 0;
  right: 0;
  z-index: var(--sr-layer-node-image-header);
  min-height: var(--sr-node-image-header-min-height);
  padding: var(--sr-node-image-header-padding);
  border: none;
  border-radius: 0;
  background: transparent;
  background-image: none;
  gap: var(--sr-node-header-gap);
  overflow: visible;
  pointer-events: auto;
}

body.app-slava-restraint .model-node--image-surface .model-node__header::before {
  content: '';
  width: var(--sr-node-image-icon-size);
  height: var(--sr-node-image-icon-size);
  flex: 0 0 var(--sr-node-image-icon-size);
  border: var(--sr-node-card-selected-border-width) solid var(--sr-ink-light);
  border-radius: var(--sr-node-image-icon-radius);
  background: var(--sr-node-image-icon-glyph);
  opacity: var(--sr-node-image-icon-opacity);
}

body.app-slava-restraint .model-node--image-input .model-node__header::before {
  display: none;
}

body.app-slava-restraint .model-node--image-surface .model-node__label {
  color: var(--sr-ink-light);
  font-size: var(--sr-type-control);
  font-weight: 500;
  letter-spacing: 0;
}

body.app-slava-restraint .model-node--image-surface .model-node__id-chip {
  color: var(--sr-ink-meta);
  opacity: 0;
  transition: opacity var(--sr-motion-ui), color var(--sr-motion-ui);
}

body.app-slava-restraint .model-node--image-surface .model-node__header-action {
  opacity: 0;
}

body.app-slava-restraint .model-node--image-surface:hover .model-node__id-chip,
body.app-slava-restraint .model-node--image-surface:focus-within .model-node__id-chip,
body.app-slava-restraint .model-node--image-surface.model-node--selected .model-node__id-chip,
body.app-slava-restraint .model-node--image-surface:hover .model-node__header-action,
body.app-slava-restraint .model-node--image-surface:focus-within .model-node__header-action,
body.app-slava-restraint .model-node--image-surface.model-node--selected .model-node__header-action {
  opacity: 1;
}

body.app-slava-restraint .model-node--image-surface .dynamic-node__model-badge {
  display: none;
}

body.app-slava-restraint .model-node--image-surface .model-node__preview {
  margin: 0;
  padding: 0;
  border: none;
  border-radius: var(--sr-node-media-radius);
  background: transparent;
  box-shadow: var(--sr-shadow-node-media);
  line-height: 0;
  overflow: visible;
  cursor: grab;
}

body.app-slava-restraint .model-node--image-surface:active .model-node__preview {
  cursor: grabbing;
}

body.app-slava-restraint .model-node--image-surface.model-node--selected .model-node__preview {
  box-shadow: var(--sr-shadow-node-media-selected);
}

body.app-slava-restraint .model-node--image-surface .model-node__preview-image,
body.app-slava-restraint .model-node--image-surface .model-node__preview-image--streaming,
body.app-slava-restraint .model-node--image-surface .model-node__preview img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--sr-node-media-radius);
  background: var(--sr-node-media-bg);
  box-shadow: none;
  -webkit-user-drag: none;
  user-select: none;
}

body.app-slava-restraint .model-node--image-surface .model-node__preview-image--streaming {
  outline: var(--sr-node-streaming-outline);
  outline-offset: var(--sr-node-streaming-outline-offset);
}

body.app-slava-restraint .model-node__preview > .model-node__download,
body.app-slava-restraint .model-node--image-surface .model-node__preview > .model-node__download {
  display: none;
}

body.app-slava-restraint .model-node__loop-toggle {
  position: absolute;
  top: var(--sr-space-2);
  right: var(--sr-space-2);
  z-index: var(--sr-layer-node-header);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--sr-control-h-xs);
  height: var(--sr-control-h-xs);
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--sr-radius-pill);
  background: rgba(0, 0, 0, 0.46);
  color: var(--sr-ink-meta);
  cursor: pointer;
  opacity: 0;
  transition:
    opacity var(--sr-motion-fast),
    background-color var(--sr-motion-fast),
    border-color var(--sr-motion-fast),
    color var(--sr-motion-fast);
}

body.app-slava-restraint .model-node__preview:hover .model-node__loop-toggle,
body.app-slava-restraint .model-node__loop-toggle:focus-visible,
body.app-slava-restraint .model-node__loop-toggle--on {
  opacity: 1;
}

body.app-slava-restraint .model-node__loop-toggle:hover {
  border-color: var(--sr-edge-strong);
  background: var(--sr-surface-control-hover);
  color: var(--sr-ink-bold);
}

body.app-slava-restraint .model-node__loop-toggle--on {
  border-color: color-mix(in srgb, var(--sr-success) 42%, transparent);
  color: var(--sr-success);
}

body.app-slava-restraint .model-node__loop-toggle:focus-visible {
  outline: var(--sr-focus-outline);
  outline-offset: var(--sr-focus-offset);
  border-color: var(--sr-accent);
}

body.app-slava-restraint .model-node--image-surface .model-node__ports {
  position: absolute;
  inset: 0;
  z-index: var(--sr-layer-node-image-ports);
  padding: 0;
  pointer-events: none;
}

body.app-slava-restraint .model-node--image-surface .model-node__port-row {
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  padding: 0;
  transform: translateY(-50%);
  pointer-events: none;
}

body.app-slava-restraint .model-node--image-surface .model-node__ports--input .model-node__port-row {
  left: 0;
}

body.app-slava-restraint .model-node--image-surface .model-node__ports--output .model-node__port-row {
  right: 0;
}

body.app-slava-restraint .model-node--image-surface .model-node__port-label {
  display: none;
}

body.app-slava-restraint .model-node--image-surface .react-flow__handle {
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  body.app-slava-restraint .model-node__header-action,
  body.app-slava-restraint .model-node--image-surface .model-node__id-chip {
    transition: none;
  }
}

body.app-slava-restraint .model-node__error {
  color: var(--sr-warning);
  background: var(--sr-node-error-bg);
  border: none;
  border-left: var(--sr-node-error-border-width) solid var(--sr-accent);
  font-family: var(--sr-mono);
  font-size: var(--sr-type-label);
  padding: var(--sr-node-error-padding);
  margin: var(--sr-node-error-margin);
  border-radius: var(--sr-node-error-radius);
}

/* Safety/moderation block: a muted left-rail (warning, not the accent used for
   real failures) so a declined request reads as informational, not broken. */
body.app-slava-restraint .model-node__error--blocked {
  border-left-color: var(--sr-warning);
  opacity: 0.92;
}
body.app-slava-restraint .model-node__error-details summary {
  color: var(--sr-mono);
}

/* ─────────────────────────────────────────────────────────────────────
 * View switcher + editor workspace
 * ───────────────────────────────────────────────────────────────────── */
body.app-slava-restraint .canvas-tabs-wrap {
  top: var(--sr-space-6);
  z-index: var(--sr-layer-panel);
  gap: 6px;
}

body.app-slava-restraint .canvas-tabs__wordmark {
  color: var(--sr-ink-faint);
  font-family: var(--sr-mono);
  font-size: var(--sr-type-meta);
  font-weight: 500;
  letter-spacing: 0.30em;
}

body.app-slava-restraint .canvas-tabs {
  padding: 4px;
  border: 1px solid var(--sr-edge);
  border-radius: var(--sr-radius-pill);
  background: var(--sr-glass-raised);
  box-shadow: var(--sr-shadow-panel-sm);
  backdrop-filter: var(--sr-blur-panel);
  -webkit-backdrop-filter: var(--sr-blur-panel);
}

body.app-slava-restraint .canvas-tabs__btn {
  position: relative;
  isolation: isolate;
  min-height: var(--sr-control-h-sm);
  overflow: hidden;
  padding: 6px 14px;
  border: 1px solid transparent;
  border-radius: var(--sr-radius-pill);
  color: var(--sr-ink-light);
  font-family: var(--sr-ui);
  font-size: var(--sr-type-body);
  font-weight: 500;
  line-height: var(--sr-line-tight);
  letter-spacing: 0;
  transition:
    color var(--sr-motion-fast),
    background-color var(--sr-motion-fast),
    border-color var(--sr-motion-fast),
    box-shadow var(--sr-motion-fast),
    transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

body.app-slava-restraint .canvas-tabs__btn::after {
  content: '';
  position: absolute;
  inset: 3px;
  z-index: 0;
  border-radius: var(--sr-radius-pill);
  background-image: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.34) 0 1px,
    transparent 1.35px
  );
  background-position: center;
  background-size: 6px 6px;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.92);
  transition:
    opacity var(--sr-motion-fast),
    transform var(--sr-motion-fast);
}

body.app-slava-restraint .canvas-tabs__btn > * {
  position: relative;
  z-index: 1;
}

body.app-slava-restraint .canvas-tabs__icon {
  width: var(--sr-icon-size);
  height: var(--sr-icon-size);
  stroke-width: var(--sr-icon-stroke);
}

body.app-slava-restraint .canvas-tabs__btn:hover:not(:disabled) {
  color: var(--sr-ink-bold);
  background: var(--sr-surface-control-hover);
}

body.app-slava-restraint .canvas-tabs__btn:hover:not(:disabled)::after {
  opacity: 0.22;
  transform: scale(1);
}

body.app-slava-restraint .canvas-tabs__btn--active,
body.app-slava-restraint .canvas-tabs__btn--active:hover {
  color: var(--sr-ink-bold);
  background: var(--sr-surface-control-active);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 0 14px rgba(255, 255, 255, 0.06);
}

body.app-slava-restraint .canvas-tabs__btn--active::after,
body.app-slava-restraint .canvas-tabs__btn--active:hover::after {
  opacity: 0.46;
  transform: scale(1);
}

body.app-slava-restraint .canvas-tabs__btn:disabled {
  opacity: var(--sr-disabled-opacity-strong);
}

body.app-slava-restraint .canvas-tabs__btn:focus-visible {
  outline: var(--sr-focus-outline);
  outline-offset: var(--sr-focus-offset);
  border-color: var(--sr-accent);
}

body.app-slava-restraint .canvas-tabs__btn:active:not(:disabled) {
  transform: scale(0.96);
}

body.app-slava-restraint .editor-view {
  background: var(--sr-canvas);
  background-image: radial-gradient(
    circle at 1px 1px,
    var(--sr-canvas-dot-color) var(--sr-canvas-dot-size),
    transparent 0
  );
  background-size: var(--sr-canvas-dot-step) var(--sr-canvas-dot-step);
  color: var(--sr-ink);
  font-family: var(--sr-ui);
}

body.app-slava-restraint .editor-view--empty {
  color: var(--sr-ink-light);
  font-size: var(--sr-type-action);
}

body.app-slava-restraint .editor-view--empty button,
body.app-slava-restraint .editor-preview--error button {
  min-height: var(--sr-control-h-md);
  padding: 0 12px;
  border: 1px solid var(--sr-edge);
  border-radius: var(--sr-radius-pill);
  background: var(--sr-surface-control);
  color: var(--sr-ink);
  font-family: var(--sr-ui);
  font-size: var(--sr-type-body);
  cursor: pointer;
  transition:
    color var(--sr-motion-fast),
    background-color var(--sr-motion-fast),
    border-color var(--sr-motion-fast),
    transform var(--sr-motion-emphasized);
}

body.app-slava-restraint .editor-view--empty button:hover,
body.app-slava-restraint .editor-preview--error button:hover {
  border-color: var(--sr-edge-strong);
  background: var(--sr-surface-control-hover);
  color: var(--sr-ink-bold);
}

body.app-slava-restraint .editor-view--empty button:focus-visible,
body.app-slava-restraint .editor-preview--error button:focus-visible {
  outline: var(--sr-focus-outline);
  outline-offset: var(--sr-focus-offset);
  border-color: var(--sr-accent);
}

body.app-slava-restraint .editor-view__button-icon,
body.app-slava-restraint .editor-preview__button-icon {
  width: var(--sr-icon-size);
  height: var(--sr-icon-size);
  stroke-width: var(--sr-icon-stroke);
}

body.app-slava-restraint .editor-view__too-small,
body.app-slava-restraint .editor-breadcrumb__vfr {
  border: 1px solid var(--sr-accent-border);
  border-radius: var(--sr-radius-control);
  background: var(--sr-accent-soft);
  color: var(--sr-ink);
  font-family: var(--sr-ui);
  font-size: var(--sr-type-label);
  line-height: var(--sr-line-meta);
}

body.app-slava-restraint .editor-breadcrumb {
  color: var(--sr-ink-light);
  font-family: var(--sr-mono);
  font-size: var(--sr-type-meta);
  font-weight: 500;
  line-height: var(--sr-line-compact);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body.app-slava-restraint .editor-breadcrumb__label {
  color: var(--sr-ink-meta);
}

body.app-slava-restraint .editor-breadcrumb__source {
  color: var(--sr-ink);
}

body.app-slava-restraint .editor-breadcrumb__arrow {
  color: var(--sr-ink-faint);
  stroke-width: var(--sr-icon-stroke);
}

body.app-slava-restraint .editor-breadcrumb__edit {
  padding: 3px 8px;
  border: 1px solid var(--sr-accent-border);
  border-radius: var(--sr-radius-pill);
  background: var(--sr-accent-soft);
  color: var(--sr-accent);
}

body.app-slava-restraint .editor-breadcrumb__vfr-icon {
  color: var(--sr-accent);
  stroke-width: var(--sr-icon-stroke);
}

body.app-slava-restraint .editor-preview {
  border: 1px solid var(--sr-edge);
  border-radius: var(--sr-radius-panel);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0)),
    var(--sr-node-preview-bg);
  box-shadow: var(--sr-shadow-panel-sm);
}

body.app-slava-restraint .editor-preview__video {
  border-radius: calc(var(--sr-radius-panel) - 2px);
}

body.app-slava-restraint .editor-preview__hud {
  padding: 4px 10px;
  border: 1px solid var(--sr-edge);
  border-radius: var(--sr-radius-pill);
  background: var(--sr-node-pill-bg);
  color: var(--sr-ink);
  font-family: var(--sr-mono);
  font-size: var(--sr-type-meta);
  line-height: var(--sr-line-tight);
  box-shadow: var(--sr-node-pill-shadow);
  backdrop-filter: var(--sr-blur-pill);
  -webkit-backdrop-filter: var(--sr-blur-pill);
}

body.app-slava-restraint .editor-preview--error {
  color: var(--sr-ink-light);
  font-size: var(--sr-type-body);
}

body.app-slava-restraint .editor-transport,
body.app-slava-restraint .editor-tl {
  border: 1px solid var(--sr-edge);
  border-radius: var(--sr-radius-panel);
  background: var(--sr-glass-raised);
  box-shadow: var(--sr-shadow-panel-sm);
  backdrop-filter: var(--sr-blur-panel);
  -webkit-backdrop-filter: var(--sr-blur-panel);
}

body.app-slava-restraint .editor-transport {
  color: var(--sr-ink-light);
  font-family: var(--sr-ui);
  font-size: var(--sr-type-label);
}

body.app-slava-restraint .editor-transport__btn,
body.app-slava-restraint .editor-transport__tool,
body.app-slava-restraint .editor-transport__preset {
  min-height: var(--sr-control-h-sm);
  padding: 5px 9px;
  border: 1px solid transparent;
  border-radius: var(--sr-radius-control);
  color: var(--sr-ink-light);
  font-family: var(--sr-ui);
  font-size: var(--sr-type-label);
  font-weight: 500;
  line-height: var(--sr-line-tight);
  letter-spacing: 0;
  transition:
    color var(--sr-motion-fast),
    background-color var(--sr-motion-fast),
    border-color var(--sr-motion-fast),
    opacity var(--sr-motion-fast);
}

body.app-slava-restraint .editor-transport__btn--icon {
  width: var(--sr-control-h-sm);
  padding-inline: 0;
}

body.app-slava-restraint .editor-transport__icon {
  width: var(--sr-icon-size);
  height: var(--sr-icon-size);
  stroke-width: var(--sr-icon-stroke);
}

body.app-slava-restraint .editor-transport__btn:hover:not(:disabled),
body.app-slava-restraint .editor-transport__tool:hover,
body.app-slava-restraint .editor-transport__preset:hover {
  color: var(--sr-ink-bold);
  background: var(--sr-surface-control-hover);
}

body.app-slava-restraint .editor-transport__btn--primary,
body.app-slava-restraint .editor-transport__btn--render {
  border-color: var(--sr-edge);
  background: var(--sr-surface-control);
  color: var(--sr-ink);
}

body.app-slava-restraint .editor-transport__btn--render {
  margin-left: auto;
  border-color: var(--sr-accent-border);
  background: var(--sr-accent-soft);
}

body.app-slava-restraint .editor-transport__btn--render:hover:not(:disabled) {
  border-color: var(--sr-accent-border-strong);
  background: var(--sr-accent-hover-soft);
}

body.app-slava-restraint .editor-transport__btn:focus-visible,
body.app-slava-restraint .editor-transport__tool:focus-visible,
body.app-slava-restraint .editor-transport__preset:focus-visible,
body.app-slava-restraint .editor-transport__range:focus-visible {
  outline: var(--sr-focus-outline);
  outline-offset: var(--sr-focus-offset);
  border-color: var(--sr-accent);
}

body.app-slava-restraint .editor-transport__btn:disabled,
body.app-slava-restraint .editor-transport__range:disabled {
  opacity: var(--sr-disabled-opacity);
}

body.app-slava-restraint .editor-transport__divider {
  background: var(--sr-edge);
}

body.app-slava-restraint .editor-transport__label {
  color: var(--sr-ink-light);
  font-size: var(--sr-type-meta);
}

body.app-slava-restraint .editor-transport__value,
body.app-slava-restraint .editor-transport__summary {
  color: var(--sr-ink);
  font-family: var(--sr-mono);
  font-size: var(--sr-type-meta);
  line-height: var(--sr-line-tight);
}

body.app-slava-restraint .editor-transport__range {
  accent-color: var(--sr-accent);
}

body.app-slava-restraint .editor-tl {
  color: var(--sr-ink-light);
}

body.app-slava-restraint .editor-tl__ruler-thumb,
body.app-slava-restraint .editor-tl__track-body {
  border: 1px solid var(--sr-edge);
  border-radius: var(--sr-radius-control);
  background: rgba(0, 0, 0, 0.40);
}

body.app-slava-restraint .editor-tl__ruler-thumb-placeholder {
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.16) 0 1px, transparent 1.3px)
    0 0 / 6px 6px,
    var(--sr-canvas-elevated);
}

body.app-slava-restraint .editor-tl__ruler {
  border-bottom: 1px dashed var(--sr-edge);
  color: var(--sr-ink-meta);
  font-family: var(--sr-mono);
  font-size: 8px;
  line-height: var(--sr-line-tight);
}

body.app-slava-restraint .editor-tl__track-label {
  color: var(--sr-ink-light);
  font-family: var(--sr-mono);
  font-size: var(--sr-type-meta);
  line-height: var(--sr-line-tight);
}

body.app-slava-restraint .editor-tl__clip {
  border: 1px solid var(--sr-edge-strong);
  border-radius: 5px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.08));
  color: var(--sr-ink);
  font-family: var(--sr-ui);
  font-size: 8px;
  line-height: var(--sr-line-tight);
}

body.app-slava-restraint .editor-tl__clip--edited {
  border-color: var(--sr-accent-border);
  background:
    linear-gradient(135deg, rgba(255, 90, 31, 0.26), rgba(255, 90, 31, 0.14));
}

body.app-slava-restraint .editor-tl__clip--selected {
  outline: 1px solid var(--sr-accent);
  outline-offset: 1px;
  box-shadow: 0 0 12px rgba(255, 90, 31, 0.18);
}

body.app-slava-restraint .editor-tl__clip-handle {
  background: rgba(255, 255, 255, 0.10);
  transition: background-color var(--sr-motion-fast);
}

body.app-slava-restraint .editor-tl__clip:hover .editor-tl__clip-handle {
  background: rgba(255, 255, 255, 0.18);
}

body.app-slava-restraint .editor-tl__clip--edited .editor-tl__clip-handle {
  background: var(--sr-accent);
}

body.app-slava-restraint .editor-tl__clip-speed {
  color: var(--sr-accent);
  font-family: var(--sr-mono);
  font-size: 7px;
}

body.app-slava-restraint .editor-tl__clip-vol {
  color: var(--sr-ink-light);
  font-size: 7px;
}

body.app-slava-restraint .editor-tl__playhead {
  background: var(--sr-accent);
  box-shadow: 0 0 8px rgba(255, 90, 31, 0.58);
}

@media (max-width: 820px) {
  body.app-slava-restraint .canvas-tabs-wrap {
    top: var(--sr-space-3);
  }

  body.app-slava-restraint .editor-view {
    padding: 70px 12px 12px;
  }

  body.app-slava-restraint .editor-transport__summary {
    width: 100%;
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.app-slava-restraint .canvas-tabs__btn,
  body.app-slava-restraint .canvas-tabs__btn::after,
  body.app-slava-restraint .editor-view--empty button,
  body.app-slava-restraint .editor-preview--error button,
  body.app-slava-restraint .editor-transport__btn,
  body.app-slava-restraint .editor-transport__tool,
  body.app-slava-restraint .editor-transport__preset,
  body.app-slava-restraint .editor-tl__clip-handle {
    transition: none;
  }
}

/* ─────────────────────────────────────────────────────────────────────
 * Skin picker overrides — match the restraint palette
 * ───────────────────────────────────────────────────────────────────── */
body.app-slava-restraint .skin-picker__option {
  border: 1px solid var(--sr-edge);
  border-radius: 8px;
  background: transparent;
}
body.app-slava-restraint .skin-picker__option:hover {
  border-color: var(--sr-edge-strong);
  background: rgba(255, 255, 255, 0.03);
}
body.app-slava-restraint .skin-picker__option--active {
  border-color: var(--sr-accent);
  background: var(--sr-accent-soft);
}
body.app-slava-restraint .skin-picker__radio { border-color: var(--sr-ink-light); }
body.app-slava-restraint .skin-picker__option--active .skin-picker__radio { border-color: var(--sr-accent); }
body.app-slava-restraint .skin-picker__option--active .skin-picker__radio-dot { background: var(--sr-accent); }
body.app-slava-restraint .skin-picker__label {
  color: var(--sr-ink-bold);
  font-family: var(--sr-ui);
  font-weight: 600;
  font-size: var(--sr-type-control);
  letter-spacing: 0;
}
body.app-slava-restraint .skin-picker__description {
  color: var(--sr-ink-light);
  font-family: var(--sr-ui);
  font-size: var(--sr-type-label);
  letter-spacing: 0;
  line-height: var(--sr-line-meta);
}

/* ─────────────────────────────────────────────────────────────────────
 * Selection + scrollbars
 * ───────────────────────────────────────────────────────────────────── */
body.app-slava-restraint ::selection {
  background: var(--sr-accent);
  color: var(--sr-on-accent);
}

body.app-slava-restraint ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
body.app-slava-restraint ::-webkit-scrollbar-track {
  background: transparent;
}
body.app-slava-restraint ::-webkit-scrollbar-thumb {
  background: var(--sr-edge-strong);
  border-radius: 4px;
}
body.app-slava-restraint ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.20);
}

/* ─── EditNode ──────────────────────────────────────────────────────────── */
body.app-slava-restraint .edit-node {
  background: var(--sr-node-pill-bg);
  border: 1px solid var(--sr-accent-border);
  border-radius: 6px;
  width: 160px;
  font-family: var(--sr-ui);
  font-size: 11px;
  color: var(--sr-ink);
  box-shadow: 0 0 0 1px var(--sr-accent-soft);
}
body.app-slava-restraint .edit-node--selected { box-shadow: 0 0 0 2px var(--sr-accent); }
body.app-slava-restraint .edit-node__title {
  padding: 6px 10px;
  border-bottom: 1px solid var(--sr-edge);
  font-size: 10px;
}
body.app-slava-restraint .edit-node__preview {
  background: var(--sr-node-preview-bg);
  padding: 12px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sr-ink-light);
  font-size: 11px;
  position: relative;
  height: 60px;
}
body.app-slava-restraint .edit-node__speed-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  background: var(--sr-accent-soft);
  border: 1px solid var(--sr-accent-border);
  color: var(--sr-accent);
  font-family: var(--sr-mono, monospace);
  font-size: 8px;
  padding: 1px 5px;
  border-radius: 2px;
}
body.app-slava-restraint .edit-node__summary {
  background: rgba(0, 0, 0, 0.30);
  border-top: 1px solid var(--sr-edge);
  padding: 4px 10px;
  font-size: 9px;
  color: var(--sr-ink-light);
}
body.app-slava-restraint .edit-node__open {
  width: 100%;
  background: var(--sr-accent-soft);
  border: 1px solid var(--sr-accent-border);
  color: var(--sr-ink);
  padding: 6px;
  font-family: var(--sr-ui);
  font-size: 11px;
  cursor: pointer;
}
