/**
 * VisuKit — shared chrome styles for heyprof VisuApps.
 * Pairs with visukit.js; both follow the embedding-space-3d goldstandard.
 *
 *   <link rel="stylesheet" href="../_shared/visukit.css" />
 *
 * The app itself only adds: panel corner positions (#panel-<key> { top/…)
 * and its scene-specific styles. Everything below is the platform look —
 * do not fork it per app.
 */

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { touch-action: none; overscroll-behavior: none; }
body {
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
/* Body-BG bewusst DUNKLER als die Panel-Grundfarbe (Panel: rgba(10,13,26,.8)),
   damit sich das Glas-Panel auf leerem Grund abhebt — sonst verschwindet es
   (body==panel). Werte = Goldstandard embedding-space-3d. */
body.theme-dark  { background: #070912; color: #e6e8f2; }
body.theme-light { background: #f6f7fb; color: #1e293b; }
canvas { display: block; touch-action: none; }

:root {
  /* Neue semantische Palette-Vars (bevorzugt; von visukit.js zur Laufzeit gesetzt) */
  --pal-bold: #2a1fe0; --pal-medium: #5d55e7; --pal-soft: #8882ed; --pal-subtle: #b2aff4;
  --pal-alt-a: #e5619c; --pal-alt-b: #e5ab61; --pal-alt-c: #9ce561; --pal-alt-d: #61e5ab;
  --pal-alt-e: #d461e5; --pal-alt-f: #61c5e5;
  --pal-accent: rgb(42, 31, 224);
  /* Backward-Compat-Aliase (bestehende Apps wie AdaBoost) */
  --c1: #2a1fe0; --c2: #5d55e7; --c3: #8882ed; --c4: #b2aff4;
  --k1: #e5619c; --k2: #e5ab61; --k3: #9ce561; --k4: #61e5ab;
  --app-accent: rgb(42, 31, 224);
}
/* ── Slider: flach, NUR Flächen — keine Konturen/Borders/Shadows ──────
   Zweifarbige Spur (gefüllt bis zum Daumen) über --p, das visukit.js aus
   dem Wert setzt (input-Event + initialer Sync; nach programmatischer
   Wertänderung VK.Sliders.sync(root) aufrufen). Gilt global für ALLE Apps. */
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  height: 16px; margin: 0; background: transparent; cursor: pointer;
  --p: 0; --track: rgba(15, 23, 42, 0.12);
}
body.theme-dark input[type="range"] { --track: rgba(255, 255, 255, 0.14); }
input[type="range"]::-webkit-slider-runnable-track {
  height: 5px; border: none; border-radius: 99px;
  background: linear-gradient(to right, var(--app-accent) calc(var(--p) * 1%), var(--track) calc(var(--p) * 1%));
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; border: none; box-shadow: none;
  width: 15px; height: 15px; margin-top: -5px; border-radius: 50%;
  background: var(--app-accent);
}
input[type="range"]::-moz-range-track { height: 5px; border: none; border-radius: 99px; background: var(--track); }
input[type="range"]::-moz-range-progress { height: 5px; border: none; border-radius: 99px; background: var(--app-accent); }
input[type="range"]::-moz-range-thumb { border: none; box-shadow: none; width: 15px; height: 15px; border-radius: 50%; background: var(--app-accent); }

/* Fixed VisuApp chrome (Dirk, 2026-09-21, revidiert am selben Tag): Peaflower
   trägt die Interaktion, die Panel-Flächen bleiben NEUTRAL (Light weiß, Dark
   dunkles Blaugrau) — Sand als Panel-Hintergrund war abgelehnt. Brand values
   match lib/themes.ts. Scene palette variables on :root remain independent;
   these scoped aliases keep existing control styles compatible. */
:root {
  --vk-ui-peaflower: #4380b9;
  --vk-ui-sand: #e8c986;
  --vk-ui-action: #356b9e;
}
body.theme-light {
  --vk-panel-bg: rgba(255, 255, 255, 0.88);
  --vk-panel-header: #ffffff;
  --vk-panel-surface: rgba(15, 23, 42, 0.05);
  --vk-panel-ink: #1e293b;
  --vk-ui-active-bg: #dce8f3;
  --vk-ui-active-ink: #2c5a87;
}
body.theme-dark {
  --vk-panel-bg: rgba(10, 13, 26, 0.80);
  --vk-panel-header: #0a0d1a;
  --vk-panel-surface: rgba(255, 255, 255, 0.06);
  --vk-panel-ink: #e6e8f2;
  --vk-ui-active-bg: #28425a;
  --vk-ui-active-ink: #91bce4;
}
.panel, #desktop-dock, #mobile-navbar {
  --app-accent: var(--vk-ui-action);
  --pal-accent: var(--vk-ui-action);
  --pal-soft: var(--vk-ui-active-ink);
  --c3: var(--vk-ui-active-ink);
  color: var(--vk-panel-ink);
}

/* ── Panels (corner-anchored glass) ──────────────────────────────── */
.panel {
  position: fixed; z-index: 20;
  padding: 13px 15px; border-radius: 15px;
  width: 264px; max-width: calc(100vw - 24px);
  max-height: calc(100vh - 96px);
  overflow-x: hidden; overflow-y: auto;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
body.theme-dark  .panel { background: var(--vk-panel-bg); color: var(--vk-panel-ink); }
body.theme-light .panel { background: var(--vk-panel-bg); color: var(--vk-panel-ink); }
.panel h3 {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; opacity: 0.5; margin: 0;
}
.panel.hidden { display: none; }

/* Panel header = drag grip + close X. No separate grip icon. */
.panel-hd {
  display: flex; align-items: center; gap: 8px; margin: 0 0 10px;
  cursor: move; touch-action: none; user-select: none; -webkit-user-select: none;
}
.panel-hd h3 { pointer-events: none; }
.panel-x {
  margin-left: auto; width: 18px; height: 18px; display: flex;
  align-items: center; justify-content: center; background: none; border: none;
  padding: 0; color: currentColor; cursor: pointer; opacity: 0.42; border-radius: 6px;
}
.panel-x:hover { opacity: 0.85; }
/* !important defends the X size against broad per-app svg selectors. */
.panel-x svg { width: 13px !important; height: 13px !important; }

/* In-panel widgets shared across apps */
.panel .row { display: flex; align-items: center; gap: 9px; }
.panel .lab {
  /* Block-Überschriften sind KLEINER und schwächer als der Panel-Titel
     (.panel h3 = 10.5px/opacity .5) — Goldstandard separating-plane-3d.
     Vorher (11px/.62) waren sie größer/stärker als der Titel = falsch. */
  font-size: 9.5px; font-weight: 700; opacity: 0.42;
  text-transform: uppercase; letter-spacing: 0.06em;
  /* Luft um die Überschriften — sonst kleben Label und Widget aneinander.
     Erste Überschrift direkt nach dem Header braucht wenig oben (Header
     hat schon 10px margin-bottom). */
  margin: 14px 0 7px;
}
.panel .lab:first-child,
.panel-hd + .lab { margin-top: 2px; }
/* Aufeinanderfolgende Bedien-Zeilen bekommen Luft (Slider, Button-Reihen).
   Greift nicht in horizontale Sub-Layouts, da nur direkte Panel-Kinder. */
.panel > .row + .row { margin-top: 9px; }
.panel .check { display: flex; align-items: center; gap: 9px; cursor: pointer; font-size: 11.5px; }
/* Checkbox im heyprof-Stil: ein flacher Schalter (Pill-Track + Knopf), keine
   native Optik, keine Borders/Shadows — an = Peaflower-Aktion (Dirk, 2026-09-21). */
.panel .check input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; margin: 0; flex: none;
  width: 30px; height: 17px; border-radius: 99px; cursor: pointer; position: relative;
  background: var(--vk-panel-surface); transition: background 0.18s;
}
body.theme-dark  .panel .check input[type="checkbox"] { background: rgba(255, 255, 255, 0.14); }
body.theme-light .panel .check input[type="checkbox"] { background: rgba(15, 23, 42, 0.14); }
.panel .check input[type="checkbox"]::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%;
  background: #fff; transition: transform 0.18s;
}
body.theme-dark  .panel .check input[type="checkbox"]:checked,
body.theme-light .panel .check input[type="checkbox"]:checked { background: var(--app-accent); }
.panel .check input[type="checkbox"]:checked::after { transform: translateX(13px); }
.panel .check input[type="checkbox"]:focus-visible { outline: none; }
.panel .hint { font-size: 11px; line-height: 1.5; opacity: 0.66; }
.panel .stat { display: flex; justify-content: space-between; font-size: 12.5px; padding: 2px 0; line-height: 1.45; }
.panel .stat span { opacity: 0.78; }
.panel .stat b { font-family: 'SF Mono', ui-monospace, monospace; font-weight: 700; }
.panel .act {
  width: 100%; margin-top: 4px; padding: 9px 12px; border-radius: 9px;
  border: none; cursor: pointer; font-size: 12px; font-weight: 650;
  background: var(--app-accent); color: #fff; opacity: 0.95;
  transition: filter 0.15s, opacity 0.15s;
}
.panel .act:hover { filter: brightness(1.1); opacity: 1; }
.panel .act:disabled { opacity: 0.4; cursor: default; filter: none; }
.panel .ghost {
  width: 100%; padding: 8px 12px; border-radius: 9px; border: none;
  cursor: pointer; font-size: 12px; font-weight: 650; color: currentColor;
  transition: background 0.15s;
}
body.theme-dark  .panel .ghost { background: rgba(255, 255, 255, 0.07); }
body.theme-light .panel .ghost { background: rgba(15, 23, 42, 0.05); }
body.theme-dark  .panel .ghost:hover { background: rgba(255, 255, 255, 0.12); }
body.theme-light .panel .ghost:hover { background: rgba(15, 23, 42, 0.09); }

/* Segmented pill toggle (instead of <select>) */
.panel .seg { display: flex; gap: 3px; padding: 3px; border-radius: 9px; }
body.theme-dark  .panel .seg { background: var(--vk-panel-surface); }
body.theme-light .panel .seg { background: var(--vk-panel-surface); }
.panel .seg button {
  flex: 1; padding: 6px 8px; border: none; border-radius: 7px; cursor: pointer;
  font-size: 11px; font-weight: 650; background: transparent; color: currentColor;
  opacity: 0.6; transition: all 0.15s; display: inline-flex; align-items: center;
  justify-content: center; gap: 5px; white-space: nowrap;
}
.panel .seg button:hover { opacity: 0.85; }
.panel .seg button.active { opacity: 1; }
body.theme-dark  .panel .seg button.active { background: var(--vk-ui-active-bg); color: var(--vk-ui-active-ink); }
body.theme-light .panel .seg button.active { background: var(--vk-ui-active-bg); color: var(--vk-ui-active-ink); }

/* ── Scrollbars — exactly heyprof-global ─────────────────────────── */
/* Standard-Properties NUR für Firefox: Chromium 121+ und Safari 18.2+ ignorieren
   sonst alle ::-webkit-scrollbar-Regeln (nativer Balken, läuft in die Ecken). */
@supports (-moz-appearance: none) {
  .panel { scrollbar-width: thin; }
  body.theme-light .panel { scrollbar-color: rgba(0,0,0,0.15) transparent; }
  body.theme-dark  .panel { scrollbar-color: rgba(255,255,255,0.15) transparent; }
}
.panel::-webkit-scrollbar { width: 8px; height: 8px; }
/* Track-Rand = Panel-Radius (15px): der Daumen läuft nicht in die runden Ecken. */
.panel::-webkit-scrollbar-track { background: transparent; margin: 15px 0; }
.panel::-webkit-scrollbar-thumb { border-radius: 4px; }
body.theme-light .panel::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.15); }
body.theme-light .panel::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, 0.30); }
body.theme-dark  .panel::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.15); }
body.theme-dark  .panel::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.30); }
.panel::-webkit-scrollbar-button { display: none; height: 0; width: 0; }
.panel *::-webkit-scrollbar-button { display: none; height: 0; width: 0; }

/* ── Desktop dock (bottom center, ≥769px) ────────────────────────── */
#desktop-dock {
  display: none; position: fixed; z-index: 23;
  bottom: 16px; left: 50%; transform: translateX(-50%);
  padding: 5px; gap: 4px; border-radius: 14px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
body.theme-dark  #desktop-dock { background: var(--vk-panel-bg); }
body.theme-light #desktop-dock { background: var(--vk-panel-bg); }
.dock-pill {
  font-size: 12px; font-weight: 650; padding: 8px 16px; border-radius: 9px;
  border: none; cursor: pointer; transition: all 0.15s;
  background: transparent; color: currentColor; opacity: 0.6;
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
}
.dock-pill svg { width: 14px; height: 14px; }
.dock-pill:hover { opacity: 0.85; }
.dock-pill.active { opacity: 1; color: var(--app-accent); }
body.theme-dark  .dock-pill.active { background: var(--vk-ui-active-bg); color: var(--vk-ui-active-ink); }
body.theme-light .dock-pill.active { background: var(--vk-ui-active-bg); color: var(--vk-ui-active-ink); }
.dock-pill.act, .nav-btn.act { opacity: 1; color: #fff; background: var(--app-accent); }
.dock-pill.act:hover, .nav-btn.act:hover { filter: brightness(1.12); opacity: 1; }
@media (min-width: 769px) { #desktop-dock { display: flex; } }

/* ── Mobile navbar (≤768px) ──────────────────────────────────────── */
#mobile-navbar {
  display: none; position: fixed; z-index: 30;
  bottom: 12px; left: 12px; right: 12px;
  padding: 6px; gap: 4px; border-radius: 14px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
body.theme-dark  #mobile-navbar { background: var(--vk-panel-bg); }
body.theme-light #mobile-navbar { background: var(--vk-panel-bg); }
.nav-btn {
  flex: 1; min-width: 0; font-size: 11px; font-weight: 700; line-height: 1;
  padding: 8px 4px; border-radius: 9px; border: none; cursor: pointer;
  transition: all 0.15s; background: transparent; color: currentColor;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; opacity: 0.6;
}
.nav-btn svg { width: 20px; height: 20px; flex: 0 0 auto; }
.nav-btn.active { opacity: 1; color: var(--app-accent); }
body.theme-dark  .nav-btn.active { background: var(--vk-ui-active-bg); color: var(--vk-ui-active-ink); }
body.theme-light .nav-btn.active { background: var(--vk-ui-active-bg); color: var(--vk-ui-active-ink); }

@media (max-width: 768px) {
  #mobile-navbar { display: flex; }
  .panel-hd { cursor: default; }
  /* Panels become centered bottom sheets, max one open (Panels.bindMobile). */
  .panel {
    position: fixed !important;
    top: auto !important; bottom: 76px !important;
    left: 50% !important; right: auto !important;
    transform: translateX(-50%) translateY(18px);
    width: min(440px, calc(100vw - 24px)) !important; max-height: 56vh;
    padding: 16px 18px;
    opacity: 0; pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
    display: block;
  }
  .panel.open {
    opacity: 1; pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
  .panel.hidden { display: block; }
}
@media (max-width: 560px) {
  #mobile-navbar .nav-btn span { display: none; }
  #mobile-navbar .nav-btn svg { width: 22px; height: 22px; }
  #mobile-navbar .nav-btn { padding: 10px 4px; }
}

/* ── Badge/Chip — Status-Pille in Panels (Textfarbe setzt die App,
      z. B. per style oder Klassen; Hintergrund ist theme-bewusst). ── */
.vk-badge { display: inline-block; margin-top: 9px; padding: 5px 11px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; }
body.theme-dark  .vk-badge { background: rgba(255,255,255,0.08); }
body.theme-light .vk-badge { background: rgba(15,23,42,0.06); }

/* ── Badge-Overlay-Variante: schwebende Status-Pille (z. B. „Rechne…"),
      fixed oben-mittig mit Blur; sichtbar via .on. ── */
.vk-badge--overlay { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 40;
  margin-top: 0; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  opacity: 0; pointer-events: none; transition: opacity 0.25s; }
.vk-badge--overlay.on { opacity: 1; }
body.theme-dark  .vk-badge--overlay { background: rgba(8,10,20,0.85); }
body.theme-light .vk-badge--overlay { background: rgba(255,255,255,0.92); }