/* ═══════════════════════════════════════════════════════════════
   PLAYGROUND PRO — Global Styles
   ═══════════════════════════════════════════════════════════════ */
/* E1 — theming. The dark values stay the default (they are what every existing
   rule was designed against); the light theme is an override layer.
   Resolution order, so an explicit choice always beats the OS:
     :root            → dark, the baseline
     @media (light)   → follow the OS when the user has expressed no preference
     [data-theme]     → an explicit in-app choice, wins over both
   Only the tokens change. Rules elsewhere keep using var(--x), so a surface is
   themed exactly when it was already going through the token layer. */
:root {
  --bg:       #0d1117;
  --surf:     #161b22;
  --surf2:    #1c2128;
  --surf3:    #21262d;
  --border:   #21262d;
  --border2:  #30363d;
  --text:     #c9d1d9;
  --dim:      #8b949e;
  --bright:   #f0f6fc;
  --blue:     #388bfd;
  --blue2:    #1f6feb;
  --green:    #2ea44f;
  --green2:   #238636;
  --purple:   #8957e5;
  --red:      #f85149;
  --yellow:   #e3b341;
  --teal:     #39c5cf;
  --orange:   #ff7b72;
  --r:        5px;
  /* Surfaces that are deliberately dark in BOTH themes: the schematic sheet and
     the simulation plots. A schematic on a light sheet is a different design
     (different wire/pin/label colours to stay legible), and the board preview is
     backend-rendered on dark green regardless — so a "light" board would be a
     lie about the artifact. Editors like KiCad keep these dark for the same
     reason. Named here so the light block can leave them alone explicitly. */
  --canvas-bg:   #0a1020;
  --canvas-grid: #21304d;
  --plot-bg:     #0a0e14;
  --plot-axis:   #4a525a;
  /* Text that sits ON those always-dark surfaces. */
  --on-canvas:      #dbe4f0;
  --on-canvas-dim:  #8aa0bd;
}

/* Follow the OS only when no explicit choice has been stored. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg:      #ffffff;
    --surf:    #f6f8fa;
    --surf2:   #eef1f5;
    --surf3:   #e4e8ee;
    --border:  #d8dee4;
    --border2: #c3cbd4;
    --text:    #24292f;
    --dim:     #5b6470;
    --bright:  #0b0f14;
    --blue:    #0969da;
    --blue2:   #0a5cc4;
    --green:   #1a7f37;
    --green2:  #1a7f37;
    --purple:  #7f43d4;
    --red:     #cf222e;
    --yellow:  #9a6700;
    --teal:    #167f8c;
    --orange:  #bc4c00;
  }
}

/* An explicit in-app choice. Duplicated rather than shared with the media query
   because CSS cannot OR a media query with an attribute selector. */
:root[data-theme="light"] {
  --bg:      #ffffff;
  --surf:    #f6f8fa;
  --surf2:   #eef1f5;
  --surf3:   #e4e8ee;
  --border:  #d8dee4;
  --border2: #c3cbd4;
  --text:    #24292f;
  --dim:     #5b6470;
  --bright:  #0b0f14;
  --blue:    #0969da;
  --blue2:   #0a5cc4;
  --green:   #1a7f37;
  --green2:  #1a7f37;
  --purple:  #7f43d4;
  --red:     #cf222e;
  --yellow:  #9a6700;
  --teal:    #167f8c;
  --orange:  #bc4c00;
}

:root {

  --titlebar-h:  44px;
  --toolbar-h:   38px;
  --statusbar-h: 22px;
  --leftdock-w:  200px;
  --rightdock-w: 270px;
  --console-h:   160px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  user-select: none;
}

/* ── SCROLLBAR ───────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--dim); }

/* ══ TITLEBAR ════════════════════════════════════════════════════ */
.titlebar {
  height: var(--titlebar-h);
  background: var(--surf);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 10px;
  gap: 8px;
  flex-shrink: 0;
  z-index: 100;
}

.tb-left  { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.tb-center { flex: 1; overflow: hidden; display: flex; align-items: center; min-width: 0; }
.tb-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.tb-sep { width: 1px; height: 20px; background: var(--border2); }

.logo { display: flex; align-items: center; gap: 7px; }
.logo-icon {
  width: 28px; height: 28px;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 12px rgba(56,139,253,.3), 0 0 0 1px rgba(56,139,253,.15);
  flex-shrink: 0;
  overflow: visible;
}
/* An all-caps wordmark set at body weight reads as shouting; tracking it out
   and dropping to 12px makes it read as a mark instead. Same trick every
   hardware-brand wordmark uses, and it is why this is not simply bold text. */
.logo-name {
  font-size: 12px; font-weight: 700; color: var(--bright);
  letter-spacing: .14em; text-transform: uppercase;
}
/* "Beta" is a status, not part of the name, so it sits back: smaller, dimmer,
   and boxed so nobody mistakes it for the product's surname. */
.logo-ver {
  font-size: 9px; color: var(--dim); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid var(--border2); border-radius: 4px;
  padding: 1px 4px; line-height: 1.25;
  margin-left: 1px;
}

.menubar { display: flex; gap: 1px; }
.menu-item {
  padding: 4px 8px; border-radius: var(--r);
  color: var(--dim); cursor: pointer; font-size: 12px;
  transition: background .1s, color .1s;
}
.menu-item:hover { background: var(--surf2); color: var(--bright); }

/* Tab bar */
.tab-bar {
  display: flex; align-items: center; gap: 2px;
  overflow-x: auto; padding: 0 4px;
}
.tab-bar::-webkit-scrollbar { height: 0; }

.ws-tab {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 10px;
  border-radius: var(--r) var(--r) 0 0;
  background: var(--surf2); border: 1px solid var(--border);
  border-bottom: none; color: var(--dim);
  cursor: pointer; white-space: nowrap; font-size: 12px;
  transition: all .12s; min-width: 0;
}
.ws-tab:hover { background: var(--surf3); color: var(--text); }
.ws-tab.active { background: var(--bg); color: var(--bright); border-color: var(--border2); }
.ws-tab-icon { font-size: 10px; color: var(--blue); flex-shrink: 0; }
.ws-tab-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.ws-tab-close {
  width: 16px; height: 16px; border-radius: 3px;
  border: none; background: transparent; color: var(--dim);
  cursor: pointer; font-size: 13px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: all .1s; flex-shrink: 0;
}
.ws-tab-close:hover { background: var(--border2); color: var(--bright); }

.tab-add {
  width: 24px; height: 24px; border-radius: var(--r);
  border: 1px dashed var(--border2); background: transparent;
  color: var(--dim); cursor: pointer; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  transition: all .12s; flex-shrink: 0;
}
.tab-add:hover { border-color: var(--blue); color: var(--blue); }

.user-chip {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 8px; border-radius: 20px;
  background: var(--surf2); border: 1px solid var(--border2);
  cursor: pointer; transition: all .12s;
}
.user-chip:hover { border-color: var(--blue); }
.user-avatar {
  width: 20px; height: 20px; border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--purple));
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: #fff;
}
.user-name { font-size: 12px; color: var(--text); }

.tb-icon-btn {
  width: 28px; height: 28px; border-radius: var(--r);
  border: 1px solid transparent; background: transparent;
  color: var(--dim); cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: all .12s;
}
.tb-icon-btn:hover { background: var(--surf2); color: var(--bright); border-color: var(--border2); }
.logout-btn:hover { color: var(--red); border-color: var(--red); }

/* ══ TOOLBAR ═════════════════════════════════════════════════════ */
.toolbar {
  height: var(--toolbar-h);
  background: var(--surf);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 8px;
  gap: 2px;
  flex-shrink: 0;
  overflow-x: auto;
  /* Deliberately still a clipping box. `overflow-x: auto` forces overflow-y to
     a clipping value whatever we write here (Chrome resolves `clip` to
     `hidden` alongside `auto`, and `overflow-clip-margin` is ignored on
     `hidden`), and `.pcbnet` above it clips again. Rather than fight two
     nested clippers, the toolbar tooltip is drawn *inside* this strip — see
     `.tool-btn[data-tip]::after`. */
}
.toolbar::-webkit-scrollbar { height: 0; }

.tool-group { display: flex; align-items: center; gap: 2px; }
.tool-sep { width: 1px; height: 22px; background: var(--border2); margin: 0 4px; flex-shrink: 0; }
.tb-spacer { flex: 1; }

.tool-btn {
  height: 28px; min-width: 28px;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 0 6px;
  border-radius: var(--r); border: 1px solid transparent;
  background: transparent; color: var(--dim);
  cursor: pointer; font-size: 12px;
  transition: all .12s; white-space: nowrap;
}
.tool-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.tool-btn:hover { background: var(--surf2); color: var(--bright); border-color: var(--border2); }

/* The toolbar had no styled tooltip at all — only the native `title`, which
   the browser shows after a ~1s delay, in OS chrome, at the pointer rather
   than the control. On a row of icon-only buttons that reads as "hovering
   does nothing", which is exactly what it was reported as.
   These open *downward*: the toolbar is a horizontal strip, so a side tooltip
   would cover the neighbouring button it is not describing.

   It is drawn *inside* the toolbar's own height rather than hanging below it.
   The strip is a clipping box (`overflow-x: auto` forces a clipping
   overflow-y) and `.pcbnet` clips again above it, so anything below the bar is
   cropped; `position: fixed` does not escape either, because an ancestor
   establishes the containing block. Sitting the chip beside its button, within
   the strip, is the placement that simply works — and on a 38px bar it is also
   the least intrusive. */
.tool-btn { position: relative; }
.tool-btn[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%) scale(.92);
  background: var(--surf3);
  color: var(--bright);
  font-size: 11px;
  font-weight: 500;
  padding: 4px 9px;
  border-radius: 5px;
  border: 1px solid var(--border2);
  box-shadow: 0 4px 14px rgba(0,0,0,.45);
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s, transform .12s;
  z-index: 900;
  max-width: 220px;
  width: max-content;
  white-space: normal;
  text-align: center;
  line-height: 1.35;
}
.tool-btn[data-tip]:hover::after {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}
/* A hovered button lifts above its neighbours so its tooltip is not painted
   over by the next button along. */
.tool-btn[data-tip]:hover { z-index: 30; }
/* The toolbar sits above the canvas for the same stacking reason as the docks:
   without a positioned ancestor, z-index on the tooltip orders nothing. */
.toolbar { position: relative; z-index: 20; }
.tool-btn.active { background: rgba(56,139,253,.15); color: var(--blue); border-color: rgba(56,139,253,.4); }

.run-btn  { background: var(--green2); color: #fff; border-color: var(--green); padding: 0 10px; }
.run-btn:hover  { background: var(--green); box-shadow: 0 0 10px rgba(46,164,79,.4); color: #fff; }
.stop-btn { color: var(--red); }
.stop-btn:hover { background: rgba(248,81,73,.1); color: var(--red); border-color: var(--red); }
.step-btn { color: var(--yellow); }
.step-btn:hover { background: rgba(227,179,65,.1); border-color: var(--yellow); }
/* gap + centring so the ROOT-E mark sits with the label rather than on its
   baseline, where an icon reads as a bullet point. */
.ai-btn { color: var(--purple); border-color: rgba(137,87,229,.4); background: rgba(137,87,229,.08); padding: 0 10px;
          display: inline-flex; align-items: center; gap: 6px; }
.ai-btn:hover { background: rgba(137,87,229,.18); box-shadow: 0 0 10px rgba(137,87,229,.3); color: var(--purple); }

.zoom-val { font-size: 11px; font-weight: 600; color: var(--dim); min-width: 42px; text-align: right; }
.cursor-pos { font-size: 11px; color: var(--dim); min-width: 52px; font-family: monospace; }

/* ══ WORKSPACE ═══════════════════════════════════════════════════ */
.workspace {
  flex: 1;
  display: flex;
  overflow: hidden;
  position: relative;
}

/* ══ LEFT DOCK ═══════════════════════════════════════════════════ */
.left-dock {
  width: var(--leftdock-w);
  min-width: 140px;
  max-width: 360px;
  background: var(--surf);
  border-right: 1px solid var(--border);
  display: flex;
  overflow: hidden;
  flex-shrink: 0;
  /* Same stacking context as .right-dock. This dock's tooltips already painted
     on top, but only because it comes first in the markup — stating it here
     means reordering the panels cannot silently break them. */
  position: relative;
  z-index: 20;
}

.dock-tabs {
  width: 34px;
  background: var(--surf2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 0;
  gap: 2px;
  flex-shrink: 0;
  position: relative;
}

/* ── dock tab base ── */
.dock-tab {
  width: 28px; height: 28px;
  border-radius: 7px; border: 1px solid transparent;
  background: transparent; color: var(--dim);
  cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s, transform .1s, box-shadow .15s;
  position: relative;
  flex-shrink: 0;
}

/* tooltip */
.dock-tab::after {
  content: attr(data-tip);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) scale(.92);
  background: var(--surf3);
  color: var(--bright);
  font-size: 11px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 500;
  white-space: nowrap;
  padding: 4px 9px;
  border-radius: 5px;
  border: 1px solid var(--border2);
  box-shadow: 0 4px 14px rgba(0,0,0,.45);
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s, transform .15s;
  z-index: 900;
  /* A tooltip is a label, not a sentence. `nowrap` above means a long one grows
     until something clips it — which is how these came to be sliced in the
     first place — so cap the width and let a genuinely long tip wrap instead of
     running off the edge. */
  max-width: 220px;
  white-space: normal;
  width: max-content;
  text-align: left;
  line-height: 1.35;
}
.dock-tab:hover::after {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

/* The right-hand dock's tooltips have to open *leftward*.
   Opening right (the rule above) pushes them past the edge of `.workspace`,
   which is `overflow: hidden`, so they were sliced mid-word — the tab strip is
   the last thing before the window edge, and there is nothing to the right of
   it to open into. The left dock keeps the original direction for the same
   reason, mirrored. */
.right-dock .dock-tab::after {
  left: auto;
  right: calc(100% + 10px);
  transform: translateY(-50%) scale(.92);
}
.right-dock .dock-tab:hover::after {
  transform: translateY(-50%) scale(1);
}

/* Native `title` fires alongside the styled tooltip, so a hover showed the
   text twice — once in the designed chip and once in the OS bubble drawn on
   top of it, which is what made them unreadable. The chip takes `content:
   attr(title)`, so the attribute has to stay for the text and for screen
   readers; suppressing the native bubble is done by moving the attribute to
   data-tip at boot (see pcbnet.js `dedupeDockTips`). */

/* active indicator bar on left edge */
.dock-tab.active::before {
  content: '';
  position: absolute;
  left: -1px; top: 20%; bottom: 20%;
  width: 3px;
  background: var(--blue);
  border-radius: 0 3px 3px 0;
}

.dock-tab:hover {
  background: var(--surf3);
  color: var(--bright);
  transform: scale(1.08);
}
.dock-tab:active { transform: scale(.93); }
.dock-tab.active {
  background: rgba(56,139,253,.14);
  color: var(--blue);
  border-color: rgba(56,139,253,.25);
  box-shadow: 0 0 10px rgba(56,139,253,.12);
}

/* ── separator ── */
.dock-tab-sep {
  width: 18px; height: 1px;
  background: var(--border2);
  margin: 5px auto;
  flex-shrink: 0;
}

/* ── menu icon buttons ── */
.menu-dock-btn {
  color: #4a525a;
  opacity: 1;
  position: relative;
}
.menu-dock-btn:hover {
  color: var(--bright);
  background: var(--surf3);
  transform: scale(1.1);
}
.menu-dock-btn:active { transform: scale(.92); }

/* open state — shown when their dropdown is visible */
.menu-dock-btn.open {
  background: rgba(56,139,253,.12);
  color: var(--blue);
  border-color: rgba(56,139,253,.3);
  box-shadow: 0 0 10px rgba(56,139,253,.18);
}

/* per-icon accent colors on hover */
.menu-dock-btn[title="File"]:hover      { color: #c9d1d9; }
.menu-dock-btn[title="Edit"]:hover      { color: var(--yellow); }
.menu-dock-btn[title="View"]:hover      { color: var(--teal); }
.menu-dock-btn[title="Simulate"]:hover  { color: var(--green); }
.menu-dock-btn[title="Insert"]:hover    { color: var(--blue); }
.menu-dock-btn[title="Help"]:hover      { color: var(--purple); }

.dock-panel { display: none; flex-direction: column; flex: 1; overflow: hidden; }
.dock-panel.active { display: flex; }

.dock-inner-hdr {
  padding: 8px 10px; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--dim); border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

/* Search */
.dock-search {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.search-icon { color: var(--dim); font-size: 14px; flex-shrink: 0; }
.search-input {
  flex: 1; background: transparent; border: none;
  color: var(--bright); font-size: 12px; outline: none;
  font-family: inherit;
}
.search-input::placeholder { color: var(--dim); }

/* Palette */
.pal-scroll { flex: 1; overflow-y: auto; }

.pal-section { border-bottom: 1px solid var(--border); }
.pal-hdr {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 8px; cursor: pointer;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--dim); transition: background .1s;
}
.pal-hdr:hover { background: var(--surf2); color: var(--text); }
.pal-arrow { font-size: 9px; transition: transform .15s; }
.pal-hdr.closed .pal-arrow { transform: rotate(-90deg); }
.pal-body { padding: 5px; }
.pal-hdr.closed + .pal-body { display: none; }

.pal-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 3px; }

.pal-item {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 5px 3px; border-radius: var(--r);
  cursor: grab; transition: all .12s;
  border: 1px solid transparent;
}
.pal-item:hover { background: var(--surf2); border-color: var(--border2); }
.pal-item:active { cursor: grabbing; }

.pal-icon {
  width: 32px; height: 28px; border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
}
.pal-sim    { background: rgba(56,139,253,.15);  color: var(--blue);   }

.pal-item span { font-size: 9px; color: var(--dim); text-align: center; line-height: 1.2; }
.pal-item:hover span { color: var(--text); }

/* Project tree */
.project-tree { padding: 6px; flex: 1; overflow-y: auto; }
.ptree-folder { padding: 4px 6px; cursor: pointer; color: var(--text); font-size: 12px; }
.ptree-children { padding-left: 14px; display: flex; flex-direction: column; gap: 1px; margin-top: 2px; }
.ptree-file { padding: 4px 6px; border-radius: var(--r); cursor: pointer; color: var(--dim); font-size: 11px; }
.ptree-file:hover { background: var(--surf2); color: var(--text); }
.ptree-file.active { background: rgba(56,139,253,.14); color: var(--blue); }

/* Libraries */
.lib-list { padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.lib-item { padding: 6px 8px; border-radius: var(--r); cursor: pointer; color: var(--dim); font-size: 12px; }
.lib-item:hover { background: var(--surf2); color: var(--text); }

/* Components */
.comp-scroll { flex: 1; overflow-y: auto; }
.comp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; padding: 2px; }
.comp-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 6px 4px; border-radius: var(--r);
  cursor: grab; border: 1px solid transparent;
  transition: all .12s; background: var(--surf2);
}
.comp-item:hover { border-color: var(--border2); background: var(--surf3); }
.comp-item:active { cursor: grabbing; }
.comp-svg { width: 56px; height: 32px; }
.comp-item span { font-size: 9px; color: var(--dim); text-align: center; }
.comp-item:hover span { color: var(--text); }

/* Workspace tab icons */
.ws-icon-circuit { color: #388bfd; }
.ws-icon-sim     { color: #2ea44f; }
.ws-icon-layout  { color: #8957e5; }

/* Reopen menu */
#reopenMenu { min-width: 180px; }

/* ══ RESIZE HANDLES ══════════════════════════════════════════════ */
.resize-handle { background: transparent; transition: background .15s; z-index: 10; flex-shrink: 0; }
.rh-left, .rh-right { width: 4px; cursor: col-resize; }
.rh-bottom { height: 4px; cursor: row-resize; }
.resize-handle:hover { background: var(--blue2); }

/* ══ CENTER COLUMN ════════════════════════════════════════════════ */
.center-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 200px;
}

/* ── CANVAS WRAP ─────────────────────────────────────────────────── */
.canvas-wrap {
  flex: 1;
  position: relative;
  overflow: hidden;
  background-color: var(--bg);
  background-image: radial-gradient(circle, rgba(48,54,61,.8) 1px, transparent 1px);
  background-size: 20px 20px;
}

#mainCanvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  cursor: crosshair; display: block;
}

/* Minimap */
.minimap {
  position: absolute; bottom: 46px; right: 10px;
  width: 160px; height: 100px;
  background: rgba(22,27,34,.9);
  border: 1px solid var(--border2);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
#minimapCanvas { display: block; width: 100%; height: 100%; }
.minimap-vp {
  position: absolute; border: 1px solid var(--blue);
  background: rgba(56,139,253,.1); pointer-events: none;
}

/* Canvas overlay buttons */
.canvas-overlay {
  position: absolute; bottom: 10px; right: 10px;
  display: flex; gap: 3px;
  background: rgba(22,27,34,.88);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border2);
  border-radius: 6px; padding: 3px;
}
.co-btn {
  width: 26px; height: 26px; border-radius: 4px;
  border: none; background: transparent;
  color: var(--dim); cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: all .1s;
}
.co-btn:hover { background: var(--surf3); color: var(--bright); }

/* Drop hint */
.drop-hint {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--dim);
  pointer-events: none; opacity: 0;
  border: 2px dashed var(--border2); border-radius: 8px;
  margin: 8px; transition: opacity .15s;
}
.canvas-wrap.dragover .drop-hint { opacity: 1; }

/* ── CONSOLE ─────────────────────────────────────────────────────── */
.console-panel {
  height: var(--console-h);
  min-height: 24px;
  background: var(--surf);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.console-tabs {
  height: 30px; display: flex; align-items: center;
  background: var(--surf2); border-bottom: 1px solid var(--border);
  padding: 0 6px; gap: 2px; flex-shrink: 0;
}
.con-tab {
  padding: 3px 10px; border-radius: var(--r);
  border: none; background: transparent; color: var(--dim);
  cursor: pointer; font-size: 11px; font-weight: 500;
  transition: all .1s; border-bottom: 2px solid transparent;
}
.con-tab:hover { color: var(--text); }
.con-tab.active { color: var(--blue); border-bottom-color: var(--blue); }
.con-icon-btn {
  width: 24px; height: 24px; border-radius: 4px;
  border: none; background: transparent; color: var(--dim);
  cursor: pointer; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  transition: all .1s; margin-left: 2px;
}
.con-icon-btn:hover { background: var(--surf3); color: var(--bright); }

.console-body { flex: 1; overflow: hidden; position: relative; }
.con-panel { display: none; height: 100%; overflow-y: auto; padding: 6px 10px; flex-direction: column; gap: 2px; }
.con-panel.active { display: flex; }

.con-line { font-size: 11px; font-family: 'Courier New', monospace; line-height: 1.6; }
.con-line.info   { color: var(--blue); }
.con-line.ok     { color: var(--green); }
.con-line.err    { color: var(--red); }
.con-line.warn   { color: var(--yellow); }
.con-line.dim    { color: var(--dim); }
.con-line.output { color: var(--text); }

.repl-row { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.repl-prompt { color: var(--green); font-family: monospace; font-size: 12px; flex-shrink: 0; }
.repl-input {
  flex: 1; background: transparent; border: none;
  color: var(--bright); font-family: 'Courier New', monospace;
  font-size: 11px; outline: none;
}

/* ══ RIGHT DOCK ══════════════════════════════════════════════════ */
.right-dock {
  width: var(--rightdock-w);
  min-width: 180px;
  max-width: 420px;
  background: var(--surf);
  border-left: 1px solid var(--border);
  display: flex;
  flex-shrink: 0;
  /* Positioned so its tab tooltips can actually rise above the canvas.
     `z-index: 900` on the tooltip did nothing while this was `static`: z-index
     only orders *positioned* elements, so the dock never joined the stacking
     order and the chip lost to `.center-col` on DOM order alone — it rendered
     at full opacity, correctly placed, and was painted over. The left dock's
     tooltips worked only because it happens to come first in the markup, which
     is luck rather than design. */
  position: relative;
  z-index: 20;
}

.right-panel { display: none; flex-direction: column; flex: 1; overflow: hidden; }
.right-panel.active { display: flex; }

.rp-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 10px; border-bottom: 1px solid var(--border);
  font-size: 11px; font-weight: 700; color: var(--dim);
  text-transform: uppercase; letter-spacing: .06em; flex-shrink: 0;
}
.rp-icon-btn {
  width: 22px; height: 22px; border-radius: 4px;
  border: none; background: transparent; color: var(--dim);
  cursor: pointer; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  transition: all .1s;
}
.rp-icon-btn:hover { background: var(--surf2); color: var(--bright); }

/* Properties */
.props-empty {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px; color: var(--dim); font-size: 12px;
}
.props-empty-icon { font-size: 32px; opacity: .2; }

.props-body { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 10px; }
.prop-section { display: flex; flex-direction: column; gap: 6px; }
.prop-sec-title {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--dim);
  border-bottom: 1px solid var(--border); padding-bottom: 4px;
}
.prop-row { display: flex; align-items: center; gap: 6px; }
.prop-label { font-size: 11px; color: var(--dim); min-width: 50px; flex-shrink: 0; }
.prop-label.ml { margin-left: 6px; }
.prop-input {
  flex: 1; background: var(--surf2); border: 1px solid var(--border2);
  border-radius: 4px; padding: 4px 7px;
  color: var(--bright); font-size: 11px; outline: none; font-family: inherit;
}
.prop-input:focus { border-color: var(--blue); }
.prop-input.small { max-width: 56px; flex: none; }
.prop-color {
  width: 32px; height: 24px; border: 1px solid var(--border2);
  border-radius: 4px; cursor: pointer; padding: 1px;
  background: var(--surf2);
}

/* AI Chat */
.chat-messages {
  flex: 1; overflow-y: auto; padding: 10px;
  display: flex; flex-direction: column; gap: 8px;
}
.chat-msg { display: flex; flex-direction: column; gap: 3px; animation: fadein .2s ease; }
@keyframes fadein { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} }
.chat-who { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.chat-msg.ai   .chat-who { color: var(--purple); }
.chat-msg.user .chat-who { color: var(--blue); text-align: right; }
.chat-bubble {
  padding: 7px 10px; border-radius: 8px;
  font-size: 12px; line-height: 1.55;
}
.chat-msg.ai   .chat-bubble { background: var(--surf2); border: 1px solid var(--border); border-radius: 2px 8px 8px 8px; }
.chat-msg.user .chat-bubble { background: rgba(56,139,253,.12); border: 1px solid rgba(56,139,253,.25); border-radius: 8px 2px 8px 8px; align-self: flex-end; }

.typing { display: flex; gap: 4px; padding: 9px 12px; }
.td { width: 5px; height: 5px; border-radius: 50%; background: var(--dim); animation: tb 1.2s infinite; }
.td:nth-child(2){animation-delay:.2s} .td:nth-child(3){animation-delay:.4s}
@keyframes tb { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-5px)} }

.chat-foot {
  padding: 7px; border-top: 1px solid var(--border);
  display: flex; gap: 5px; flex-shrink: 0;
}
.chat-input {
  flex: 1; background: var(--surf2); border: 1px solid var(--border2);
  border-radius: 6px; padding: 6px 8px; color: var(--bright);
  font-size: 12px; outline: none; resize: none; font-family: inherit;
  transition: border-color .15s;
}
.chat-input:focus { border-color: var(--blue); }
.chat-send {
  width: 32px; align-self: flex-end;
  height: 32px; border-radius: 6px;
  background: var(--blue2); border: none; color: #fff;
  cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s; flex-shrink: 0;
}
.chat-send:hover { background: var(--blue); }

/* History */
.history-list { flex: 1; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.hist-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 7px; border-radius: var(--r); cursor: pointer;
  transition: background .1s;
}
.hist-item:hover { background: var(--surf2); }
.hist-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.hist-info { flex: 1; }
.hist-action { font-size: 11px; color: var(--text); }
.hist-time   { font-size: 10px; color: var(--dim); }

/* ══ STATUS BAR ══════════════════════════════════════════════════ */
.statusbar {
  height: var(--statusbar-h);
  background: var(--green2);
  border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 10px; font-size: 11px;
  color: rgba(255,255,255,.8); flex-shrink: 0;
}
/* C3 — related chips sit close together (8px) and the groups are told apart by
   a thin rule rather than by distance alone, so the bar scans as three clusters
   instead of one undifferentiated row. */
.sb-left, .sb-right { display: flex; align-items: center; gap: 8px; }
.sb-item { display: flex; align-items: center; gap: 4px; cursor: pointer; transition: color .1s; white-space: nowrap; }
.sb-item:hover { color: #fff; }
.sb-sep {
  width: 1px;
  height: 11px;
  flex: none;
  background: rgba(255, 255, 255, .28);
}
.sb-dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
.online { font-weight: 600; }

/* ══ CONTEXT MENU ════════════════════════════════════════════════ */
.ctx-menu {
  position: fixed; z-index: 500;
  background: var(--surf); border: 1px solid var(--border2);
  border-radius: 7px; padding: 4px; min-width: 162px;
  box-shadow: 0 8px 28px rgba(0,0,0,.55);
  display: none;
}
.ctx-menu.show { display: block; }
.ctx-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 4px;
  cursor: pointer; color: var(--text); font-size: 12px;
  transition: background .1s;
}
.ctx-item:hover { background: var(--surf2); color: var(--bright); }
.ctx-item.danger { color: var(--red); }
.ctx-item.danger:hover { background: rgba(248,81,73,.1); }
.ctx-sep { height: 1px; background: var(--border); margin: 3px 0; }

/* ══ SIMULATION VIEW ═════════════════════════════════════════════ */
.sim-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
}

.sim-view-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px;
  background: var(--surf);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  gap: 12px;
}
.sim-view-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; color: var(--bright);
}
.sim-view-icon { color: var(--green); }
.sim-status-badge {
  font-size: 10px; font-weight: 600; padding: 2px 8px;
  border-radius: 10px; border: 1px solid var(--border2);
  color: var(--dim); background: var(--surf2);
  text-transform: uppercase; letter-spacing: .05em;
}
.sim-status-badge.running { color: var(--green); border-color: var(--green); background: rgba(46,164,79,.1); }

.sim-view-controls { display: flex; align-items: center; gap: 6px; }
/* ── sim plot picker ── */
.sim-plot-picker { position: relative; z-index: 50; }

.sim-plot-picker-btn {
  display: flex; align-items: center; gap: 7px;
  background: var(--surf2); border: 1px solid var(--border2);
  border-radius: var(--r); color: var(--text); font-size: 11px;
  padding: 5px 10px; cursor: pointer; white-space: nowrap;
  transition: border-color .12s, background .12s;
  font-family: inherit;
}
.sim-plot-picker-btn:hover { border-color: var(--blue); background: var(--surf3); }
.sim-plot-picker-btn svg { color: var(--dim); flex-shrink: 0; transition: transform .15s; }
.sim-plot-picker.open .sim-plot-picker-btn svg { transform: rotate(180deg); }
.sim-plot-picker.open .sim-plot-picker-btn { border-color: var(--blue); }

.sim-plot-picker-menu {
  display: none;
  position: absolute; right: 0; top: calc(100% + 4px);
  background: var(--surf);
  border: 1px solid var(--border2);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,.55);
  z-index: 800;
  min-width: 270px;
  padding: 6px 0;
  max-height: 380px;
  overflow-y: auto;
}
.sim-plot-picker.open .sim-plot-picker-menu { display: block; }

.spm-group {
  padding: 6px 12px 3px;
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--dim);
}
.spm-sep { height: 1px; background: var(--border); margin: 4px 0; }

.spm-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  font-size: 11px; color: var(--text);
  cursor: pointer; transition: background .1s, color .1s;
  white-space: nowrap;
}
.spm-item:hover { background: var(--surf2); color: var(--bright); }
.spm-item.active {
  color: var(--blue);
  background: rgba(56,139,253,.08);
}
.spm-item.active::before {
  content: '✓';
  font-size: 10px;
  color: var(--blue);
  margin-left: -10px;
  margin-right: 2px;
}

.sim-plots-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  overflow: hidden;
}

.sim-plot-cell {
  background: #0a0e14;
  display: flex; flex-direction: column;
  overflow: hidden; position: relative;
  cursor: pointer;
  transition: box-shadow .15s;
}
.sim-plot-cell:hover { box-shadow: inset 0 0 0 1px rgba(56,139,253,.35); }

/* when a cell is expanded, override grid to single column */
.sim-plots-grid:has(.sim-plot-cell.expanded) {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}
.sim-plot-cell.expanded {
  cursor: default;
  box-shadow: inset 0 0 0 2px #388bfd;
}

/* cell header bar */
.sim-cell-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 6px 0 10px;
  flex-shrink: 0; z-index: 2; position: relative;
}
.sim-plot-label {
  font-size: 10px; color: var(--dim); font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
}
.sim-cell-tools {
  display: flex; align-items: center; gap: 1px;
  opacity: 0; transition: opacity .15s;
}
.sim-plot-cell:hover .sim-cell-tools,
.sim-plot-cell.expanded .sim-cell-tools { opacity: 1; }

.sct-btn, .sim-expand-btn {
  background: none; border: none; color: var(--dim);
  cursor: pointer; padding: 3px 5px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s;
  line-height: 1;
}
.sct-btn:hover { background: rgba(56,139,253,.15); color: #388bfd; }
.sim-expand-btn { font-size: 13px; }
.sim-expand-btn:hover { background: rgba(56,139,253,.15); color: #388bfd; }
.sim-plot-cell.expanded .sim-expand-btn { color: #388bfd; }

.sim-canvas { display: block; width: 100%; flex: 1; min-height: 0; cursor: crosshair; }
.sim-canvas:active { cursor: grabbing; }

.sim-stats-bar {
  display: flex; align-items: center; gap: 20px;
  padding: 5px 14px;
  background: var(--surf2); border-top: 1px solid var(--border);
  font-size: 11px; color: var(--dim); flex-shrink: 0;
}

/* ══ TOASTS ══════════════════════════════════════════════════════ */
.toasts {
  position: fixed; bottom: 30px; right: 12px;
  display: flex; flex-direction: column; gap: 5px;
  z-index: 999; pointer-events: none;
}
.toast {
  background: var(--surf); border: 1px solid var(--border2);
  border-radius: 7px; padding: 8px 12px;
  font-size: 12px; color: var(--bright);
  display: flex; align-items: center; gap: 7px;
  box-shadow: 0 4px 20px rgba(0,0,0,.5);
  min-width: 180px; pointer-events: auto;
  animation: tslide .16s ease; transition: opacity .22s;
}
@keyframes tslide { from{opacity:0;transform:translateX(14px)} to{opacity:1;transform:none} }
.toast.ok  { border-left: 3px solid var(--green); }
.toast.inf { border-left: 3px solid var(--blue); }
.toast.wrn { border-left: 3px solid var(--yellow); }
.toast.err { border-left: 3px solid var(--red); }