/* Vivid 3 fonts and theme tokens are loaded via <link> tags in each HTML
   file before this stylesheet. The Vivid CDN provides:
     - SpeziaCompleteVariableUpright (sans / heading / display)
     - SpeziaMonoCompleteVariable    (mono / code)
   and the --vvd-color-* custom properties used in :root below. */

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

:root {
  /* ── Hardcoded dark defaults ── */
  /* These values are active for all non-Vonage brands (moengage, ericsson,
     jumper) and serve as the safe baseline before JavaScript initialises.
     Values match the Vivid v5 dark palette so the initial render is
     identical for the Vonage brand (no visible flash on first load).
     The html.vvd-root block below overrides these with Vivid token
     references when the Vonage brand is active. */

  /* ── Surfaces ── */
  --bg:            #000000;
  --surface:       #191828;
  --surface2:      #31304f;
  --surface3:      #494977;

  /* ── Borders ── */
  --border:        #31304f;
  --border-bright: #63628d;

  /* ── Text ── */
  --text:  #ffffff;
  --text2: #cccccc;
  --text3: #929292;

  /* ── Accent colours ── */
  --accent:      #b27bf2;
  --accent2:     #871eff;
  --accent-glow: rgba(178,123,242,0.18);
  --purple:      #b27bf2;
  --teal:        #0e65c2;
  --amber:       #facc4b;
  --orange:      #e07902;
  --red:         #f75959;
  --yellow:      #facc4b;
  --blue:        #2997f0;
  --green:       #30a849;

  /* ── Misc ── */
  --shadow-node:  0 2px 12px rgba(0,0,0,0.5);
  --shadow-modal: 0 24px 80px rgba(0,0,0,0.7);
  --label-bg:     rgba(178,123,242,0.12);
  --label-border: rgba(178,123,242,0.40);
  --connector:    #63628d;
  --canvas-dot:   rgba(255,255,255,0.06);

  /* ── Typography ── */
  /* System fonts are the baseline. Spezia variable fonts are activated
     by html.vvd-root below - Vonage brand only. */
  --mono: ui-monospace, monospace;
  --sans: system-ui, sans-serif;

  /* ── Backward-compat aliases (dashboard/arch use these names) ── */
  --s1:    var(--surface);
  --s2:    var(--surface2);
  --s3:    var(--surface3);
  --b1:    var(--border);
  --b2:    var(--border-bright);
  --txt:   var(--text);
  --txt2:  var(--text2);
  --txt3:  var(--text3);
  --coral: var(--red);
}

/* ── VIVID TOKENS (Vonage brand only) ── */
/* html.vvd-root has specificity 0-1-1 (type + class), which beats :root
   (0-1-0 pseudo-class), so these declarations win when vvd-root is present.
   _applyBrand() in toolbar.js adds vvd-root for the Vonage brand and
   removes it for all other brands. */
html.vvd-root {
  /* Spezia variable fonts replace the system-ui fallbacks above.
     The single upright variable covers weights 1-1000, replacing DM Mono,
     DM Sans, and Syne in one face. */
  --mono: SpeziaMonoCompleteVariable, monospace;
  --sans: SpeziaCompleteVariableUpright, sans-serif;

  /* Surfaces - neutral-tint scale provides purple-tinted grays that match
     the original dark-navy character of the UI better than pure neutrals. */
  --bg:            var(--vvd-color-canvas);
  --surface:       var(--vvd-color-neutral-tint-50);
  --surface2:      var(--vvd-color-neutral-tint-100);
  --surface3:      var(--vvd-color-neutral-tint-200);

  /* Borders */
  --border:        var(--vvd-color-neutral-tint-100);
  --border-bright: var(--vvd-color-neutral-tint-300);

  /* Text */
  --text:  var(--vvd-color-canvas-text);
  --text2: var(--vvd-color-neutral-700);
  --text3: var(--vvd-color-neutral-500);

  /* Accent - both --accent and --purple map to Vivid's CTA colour (Vonage
     purple). This shifts the primary interactive colour from legacy blue to
     the Vonage brand purple (#b27bf2 dark / #9941ff light). */
  --accent:      var(--vvd-color-cta-500);
  --accent2:     var(--vvd-color-cta-300);
  --accent-glow: color-mix(in srgb, var(--vvd-color-cta-500) 18%, transparent);
  --purple:      var(--vvd-color-cta-500);
  --teal:        var(--vvd-color-information-300);
  --amber:       var(--vvd-color-warning-700);
  --orange:      var(--vvd-color-warning-500);
  --red:         var(--vvd-color-alert-500);
  --yellow:      var(--vvd-color-warning-700);
  --blue:        var(--vvd-color-information-500);
  --green:       var(--vvd-color-success-500);

  /* Canvas-specific vars reset to Vivid-aware defaults for dark mode. */
  --label-bg:     color-mix(in srgb, var(--vvd-color-cta-500) 12%, transparent);
  --label-border: color-mix(in srgb, var(--vvd-color-cta-500) 40%, transparent);
  --connector:    var(--vvd-color-neutral-tint-300);
  --canvas-dot:   rgba(255,255,255,0.06);
}

/* ── LIGHT THEME (Vonage brand only) ── */
/* Scoped to html.vvd-root so it only applies when the Vonage brand is
   active. Explicit hex values are used throughout rather than relying
   solely on the Vivid cascade (removing vvd-theme-alternate). This
   ensures light mode works correctly even if a cached older toolbar.js
   does not toggle vvd-theme-alternate. Values confirmed from Vivid v5
   theme-light.css (unpkg.com/@vonage/vivid@latest). */
html.vvd-root body[data-theme="light"] {
  /* Surfaces */
  --bg:            #ffffff;
  --surface:       #f2f3f9;
  --surface2:      #e5e5ec;
  --surface3:      #cbcbd9;
  /* Borders */
  --border:        #e5e5ec;
  --border-bright: #b2b1c7;
  /* Text */
  --text:  #0d0d0d;
  --text2: #4d4d4d;
  --text3: #757575;
  /* Accent */
  --accent:      #9941ff;
  --accent2:     #cba1fa;
  --accent-glow: color-mix(in srgb, #9941ff 18%, transparent);
  --purple:      #9941ff;
  --teal:        #65baff;
  --amber:       #893000;
  --orange:      #be5702;
  --red:         #e61d1d;
  --yellow:      #893000;
  --blue:        #0276d5;
  --green:       #1c8731;
  /* Canvas-specific */
  --label-bg:     color-mix(in srgb, #9941ff 8%, transparent);
  --label-border: color-mix(in srgb, #9941ff 30%, transparent);
  --connector:    #b2b1c7;
  --canvas-dot:   rgba(0,0,0,0.08);
  --shadow-node:  0 2px 12px rgba(0,0,0,0.1);
  --shadow-modal: 0 24px 80px rgba(0,0,0,0.25);
  /* Backward-compat aliases */
  --coral: #e61d1d;
  --s1: #f2f3f9; --s2: #e5e5ec; --s3: #cbcbd9;
  --b1: #e5e5ec; --b2: #b2b1c7;
  --txt: #0d0d0d; --txt2: #4d4d4d; --txt3: #757575;
}

/* ── HIGH CONTRAST THEME ── */
body[data-theme="hc"] {
  --bg: #000000;
  --surface: #0a0a0a;
  --surface2: #111111;
  --surface3: #1a1a1a;
  --border: #444444;
  --border-bright: #ffffff;
  --accent: #ffff00;
  --accent2: #00ffff;
  --accent-glow: rgba(255,255,0,0.2);
  --green: #00ff88;
  --orange: #ff8800;
  --red: #ff2244;
  --yellow: #ffee00;
  --text: #ffffff;
  --text2: #dddddd;
  --text3: #aaaaaa;
  --label-bg: rgba(255,255,0,0.1);
  --label-border: rgba(255,255,0,0.6);
  --connector: #ffffff;
  --canvas-dot: rgba(255,255,255,0.12);
  --shadow-node: 0 0 0 1px #ffffff;
  --shadow-modal: 0 0 0 2px #ffffff;
  --coral: var(--red);
  --s1: var(--surface); --s2: var(--surface2); --s3: var(--surface3);
  --b1: var(--border);  --b2: var(--border-bright);
  --txt: var(--text);   --txt2: var(--text2); --txt3: var(--text3);
}
body[data-theme="hc"] .step-node,
body[data-theme="hc"] .block-node { border-width: 2px; }
body[data-theme="hc"] .btn { border-width: 2px; }
body[data-theme="hc"] .connector-path { stroke: #ffffff !important; stroke-width: 2px; }

/* ═══════════════════════════════════════════════════════════
     WHITE-LABEL BRAND THEMES
  ═══════════════════════════════════════════════════════════ */
body[data-brand="vonage"] {
  --brand-nav-bg:    #0a0c12;
  --brand-nav-border:#1e2540;
  --accent:   #4f7cff;
  --accent2:  #b03aff;
  --accent-glow: rgba(79,124,255,0.18);
  --green:    #3ecf8e;
  --red:      #ff4f6b;
  --orange:   #ff8c42;
}
body[data-brand="vonage"] .topnav {
  background: var(--brand-nav-bg);
  border-bottom-color: var(--brand-nav-border);
}

body[data-brand="moengage"] {
  --bg:        #f5f6fa;
  --surface:   #ffffff;
  --surface2:  #f0f1f6;
  --surface3:  #e4e6ef;
  --border:    #d4d7e5;
  --border-bright: #b0b6d0;
  --accent:    #e8401c;
  --accent2:   #c4280a;
  --accent-glow: rgba(232,64,28,0.10);
  --green:     #18a558;
  --orange:    #e07b00;
  --red:       #c42030;
  --yellow:    #c48200;
  --text:      #1a1c28;
  --text2:     #4a4e68;
  --text3:     #888ea8;
  --connector: #b0b6d0;
  --canvas-dot: rgba(0,0,0,0.07);
  --shadow-node: 0 2px 12px rgba(0,0,0,0.09);
  --shadow-modal: 0 24px 80px rgba(0,0,0,0.18);
  --label-bg: rgba(232,64,28,0.07);
  --label-border: rgba(232,64,28,0.3);
  --brand-nav-bg:    #e8401c;
  --brand-nav-border: #c4280a;
}
body[data-brand="moengage"] .topnav {
  background: var(--brand-nav-bg);
  border-bottom-color: var(--brand-nav-border);
}
body[data-brand="moengage"] .topnav .logo-wordmark,
body[data-brand="moengage"] .topnav .journey-version-display,
body[data-brand="moengage"] .topnav .journey-status-tag,
  body[data-brand="moengage"] .topnav-right .teach-btn,
body[data-brand="moengage"] .topnav-right .canvas-actions-btn,
body[data-brand="moengage"] .topnav-right .lang-btn,
body[data-brand="moengage"] .topnav-right .theme-btn { color: rgba(255,255,255,0.92); }
body[data-brand="moengage"] .topnav-right .canvas-actions-btn,
body[data-brand="moengage"] .topnav-right .lang-btn,
body[data-brand="moengage"] .topnav-right .theme-btn {
  border-color: rgba(255,255,255,0.25); background: rgba(255,255,255,0.10);
}
body[data-brand="moengage"] .topnav-right .canvas-actions-btn:hover,
body[data-brand="moengage"] .topnav-right .lang-btn:hover,
body[data-brand="moengage"] .topnav-right .theme-btn:hover {
  background: rgba(255,255,255,0.20); border-color: rgba(255,255,255,0.5);
}

body[data-brand="ericsson"] {
  --bg:        #08090d;
  --surface:   #10131a;
  --surface2:  #181c26;
  --surface3:  #20253300;
  --border:    #252b3a;
  --border-bright: #323c52;
  --accent:    #00d4aa;
  --accent2:   #0092d4;
  --accent-glow: rgba(0,212,170,0.15);
  --green:     #00d4aa;
  --orange:    #f5a623;
  --red:       #ff4555;
  --yellow:    #f5d020;
  --text:      #e2e6f0;
  --text2:     #7a8299;
  --text3:     #454d65;
  --connector: #323c52;
  --canvas-dot: rgba(0,212,170,0.07);
  --shadow-node: 0 2px 16px rgba(0,0,0,0.6);
  --shadow-modal: 0 24px 80px rgba(0,0,0,0.75);
  --label-bg: rgba(0,212,170,0.12);
  --label-border: rgba(0,212,170,0.35);
  --brand-nav-bg:    #060709;
  --brand-nav-border: #1a2030;
}
body[data-brand="ericsson"] .topnav {
  background: var(--brand-nav-bg);
  border-bottom-color: var(--brand-nav-border);
  border-bottom-width: 1px;
  box-shadow: 0 1px 0 rgba(0,212,170,0.15);
}

body[data-brand="jumper"] {
  --bg:        #050507;
  --surface:   #0d0d12;
  --surface2:  #141418;
  --surface3:  #1c1c22;
  --border:    #242430;
  --border-bright: #303040;
  --accent:    #c8f000;
  --accent2:   #00e5ff;
  --accent-glow: rgba(200,240,0,0.14);
  --green:     #c8f000;
  --orange:    #ff9500;
  --red:       #ff3a5c;
  --yellow:    #c8f000;
  --text:      #f0f0f8;
  --text2:     #8080a0;
  --text3:     #404058;
  --connector: #303040;
  --canvas-dot: rgba(200,240,0,0.06);
  --shadow-node: 0 2px 16px rgba(0,0,0,0.7);
  --shadow-modal: 0 24px 80px rgba(0,0,0,0.8);
  --label-bg: rgba(200,240,0,0.10);
  --label-border: rgba(200,240,0,0.3);
  --brand-nav-bg:    #030304;
  --brand-nav-border: #1c1c28;
}
body[data-brand="jumper"] .topnav {
  background: var(--brand-nav-bg);
  border-bottom-color: var(--brand-nav-border);
  box-shadow: 0 1px 0 rgba(200,240,0,0.12);
}
body[data-brand="jumper"] .logo-wordmark span { color: #c8f000; }

html, body { height: 100%; }
body { background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 14px; }

@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(62,207,142,.4); }
  50%      { box-shadow: 0 0 0 4px rgba(62,207,142,0); }
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface3); border-radius: 3px; }
* { scrollbar-width: thin; scrollbar-color: var(--surface3) transparent; }

.live-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.live-dot.ok  { background: var(--green); animation: pulse 2s infinite; }
.live-dot.off { background: var(--text3); }
.live-lbl, .live-label { font-family: var(--mono); font-size: 11px; color: var(--green); }

header {
  display: flex; align-items: center; gap: 14px;
  padding: 0 24px; height: 52px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.logo-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--purple); box-shadow: 0 0 8px var(--purple);
  flex-shrink: 0;
}
header h1 { font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: .04em; }
.back-link { font-family: var(--mono); font-size: 11px; color: var(--text3); text-decoration: none; margin-left: 20px; }
.back-link:hover { color: var(--text2); }

/* ═══════════════════════════════════════════════════════════════════════════
   SHARED TOOLBAR  (jb-toolbar.*)
   ═══════════════════════════════════════════════════════════════════════════ */

#jb-toolbar {
  display: flex;
  flex-direction: row;   /* explicit — prevents page-level nav{flex-direction:column} from leaking in */
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  height: 52px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  border-right: none;    /* prevent page nav{border-right} from leaking in */
  position: sticky;
  top: 0;
  z-index: 200;
  flex-shrink: 0;
}

.jb-logo {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  flex-shrink: 0;
}
.jb-wordmark {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.01em;
}
.jb-wordmark em {
  font-style: normal;
  color: var(--accent);
}

.jb-toolbar-sep {
  width: 1px;
  height: 18px;
  background: var(--border-bright);
  flex-shrink: 0;
  margin: 0 2px;
}
.jb-toolbar-title {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--text2);
  white-space: nowrap;
}
.jb-toolbar-spacer { flex: 1; }

/* Nav links */
.jb-nav-link {
  font-size: 12px;
  font-weight: 500;
  color: var(--text2);
  text-decoration: none;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: all .15s;
}
.jb-nav-link:hover { background: var(--surface2); color: var(--text); border-color: var(--border); }
.jb-nav-link.active { color: var(--accent); background: var(--accent-glow); border-color: rgba(79,124,255,.2); }

/* Back link */
.jb-toolbar-back-link {
  font-size: 12px;
  color: var(--text2);
  text-decoration: none;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface2);
  white-space: nowrap;
  transition: all .15s;
  flex-shrink: 0;
  margin-right: 6px; /* small gap between back link and page title */
}
.jb-toolbar-back-link:hover { background: var(--surface3); color: var(--text); }

/* Live slot (dashboard / arch insert their live-dot here) */
.jb-live-slot {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Teach button */
.jb-teach-btn {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  padding: 5px 11px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text2);
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.jb-teach-btn:hover { background: var(--surface3); color: var(--text); border-color: var(--border-bright); }
.jb-teach-btn.active { background: var(--accent-glow); color: var(--accent); border-color: rgba(79,124,255,.3); }

/* Language button */
.jb-lang-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text2);
  cursor: pointer;
  transition: all .15s;
  flex-shrink: 0;
}
.jb-lang-btn:hover { background: var(--surface3); color: var(--text); border-color: var(--border-bright); }
#jbLangFlag { font-size: 16px; line-height: 1; }

/* Settings button */
.jb-settings-btn {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  padding: 5px 11px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text2);
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.jb-settings-btn:hover { background: var(--surface3); color: var(--text); border-color: var(--border-bright); }

/* Shared dropdown container */
.jb-dropdown {
  position: fixed;
  z-index: 9999;
  background: var(--surface);
  border: 1px solid var(--border-bright);
  border-radius: 12px;
  padding: 6px;
  box-shadow: var(--shadow-modal);
  min-width: 160px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px) scale(.97);
  transition: opacity .15s, transform .15s;
}
.jb-dropdown.show { opacity: 1; pointer-events: all; transform: none; }
.jb-settings-dd { min-width: 280px; }

.jb-dd-section {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text3);
  padding: 4px 10px 6px;
  font-family: var(--mono);
}
.jb-dd-divider { height: 1px; background: var(--border); margin: 4px 6px; }
.jb-dd-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .12s;
  color: var(--text2);
  font-size: 13px;
  font-family: var(--sans);
  text-decoration: none;
}
.jb-dd-item:hover { background: var(--surface3); color: var(--text); }
.jb-dd-item.active { color: var(--accent); background: var(--accent-glow); }

/* Sparkline window selector row in settings dropdown */
.jb-sparkline-row { cursor: default; }
.jb-sparkline-row:hover { background: none; color: var(--text2); }
.jb-sparkline-opts { display: flex; gap: 4px; }
.jb-spark-btn {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text3);
  background: var(--surface3);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 8px;
  cursor: pointer;
  transition: all .15s;
}
.jb-spark-btn:hover { color: var(--text); border-color: var(--border-bright); }
.jb-spark-btn.active { color: var(--accent); border-color: var(--accent); background: var(--accent-glow); }

/* Colour swatches inside dropdown items */
.jb-swatch {
  display: flex;
  width: 36px;
  height: 20px;
  border-radius: 5px;
  border: 1px solid var(--border-bright);
  overflow: hidden;
  flex-shrink: 0;
}
.jb-swatch span { flex: 1; }

/* Brand name/sub in settings dropdown */
.jb-brand-name { font-size: 12px; font-weight: 600; color: var(--text); }
.jb-brand-sub  { font-size: 10px; color: var(--text3); }

/* Teaching mode — highlight teach-target elements with a glow */
body.teaching-mode .teach-target {
  outline: 2px dashed var(--accent) !important;
  outline-offset: 3px;
  cursor: help !important;
  position: relative;
}

/* ── PROPS PANEL (shared: journey-builder + step-manager preview) ── */
.props-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--text3);
  font-size: 13px;
  line-height: 1.6;
}
.prop-section { padding: 12px 16px; border-bottom: 1px solid var(--border); }
.prop-section-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 10px;
}
.prop-row { margin-bottom: 10px; }
.prop-label { font-size: 11px; color: var(--text2); margin-bottom: 4px; font-weight: 500; }
.prop-required { color: var(--red); font-weight: 700; }
.prop-input {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text);
  outline: none;
  transition: border-color .2s;
}
.prop-input:focus { border-color: var(--accent); }
.prop-input[rows] { line-height: 1.5; padding: 8px 10px; }
.prop-select {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text);
  outline: none;
  appearance: none;
}
.prop-toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.prop-toggle input[type=checkbox] { display: none; }
.prop-toggle-track {
  width: 36px; height: 20px; border-radius: 10px;
  background: var(--surface3); border: 1px solid var(--border-bright);
  position: relative; transition: background .2s, border-color .2s; flex-shrink: 0;
}
.prop-toggle input:checked + .prop-toggle-track { background: var(--accent); border-color: var(--accent); }
.prop-toggle-thumb {
  position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: 50%; background: var(--text3);
  transition: transform .2s, background .2s;
}
.prop-toggle input:checked + .prop-toggle-track .prop-toggle-thumb { transform: translateX(16px); background: #fff; }
.prop-toggle-label { font-size: 12px; color: var(--text2); }
.prop-color-row { display: flex; align-items: center; gap: 8px; }
.prop-color-swatch {
  width: 32px; height: 32px; min-width: 32px;
  border-radius: 6px; border: 1px solid var(--border-bright);
  cursor: pointer; padding: 0; background: none; overflow: hidden; flex-shrink: 0;
}
.prop-color-swatch::-webkit-color-swatch-wrapper { padding: 0; }
.prop-color-swatch::-webkit-color-swatch { border: none; border-radius: 5px; }
.prop-color-swatch::-moz-color-swatch { border: none; border-radius: 5px; }
.prop-color-text { flex: 1; min-width: 0; }

/* ── Props panel: hint tooltip on label ── */
/* The ℹ icon sits inline with the label; hovering it reveals the hint text
   as a positioned tooltip rendered entirely in CSS via ::after/::before.
   max-width is capped at 260px so it stays within the narrow panel. */
.prop-hint-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px; height: 13px;
  font-size: 9px;
  font-style: normal;
  color: var(--text3);
  background: var(--surface3);
  border: 1px solid var(--border-bright);
  border-radius: 50%;
  margin-left: 4px;
  cursor: default;
  position: relative;
  vertical-align: middle;
  line-height: 1;
  flex-shrink: 0;
}
.prop-hint-icon:hover { color: var(--accent); border-color: var(--accent); }
/* tooltip bubble */
.prop-hint-icon::after {
  content: attr(data-hint);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface3);
  color: var(--text2);
  border: 1px solid var(--border-bright);
  border-radius: 6px;
  padding: 6px 9px;
  font-size: 11px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.45;
  white-space: pre-wrap;
  max-width: 260px;
  width: max-content;
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
  z-index: 9999;
}
/* small caret pointing down toward the icon */
.prop-hint-icon::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 1px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--border-bright);
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
  z-index: 9999;
}
.prop-hint-icon:hover::after,
.prop-hint-icon:hover::before { opacity: 1; }
.prop-template-badge { font-family:var(--mono); font-size:9px; color:var(--text3); background:transparent; border:1px solid var(--border); padding:0 3px; border-radius:3px; margin-left:4px; letter-spacing:.01em; opacity:.7; vertical-align:middle; }
.prop-char-count { font-size:10px; color:var(--text3); text-align:right; margin-top:2px; }
.prop-char-count.over { color:var(--red); }
.prop-pattern-error { font-size:11px; color:var(--red); margin-top:3px; display:none; }
.prop-unit { font-size:12px; color:var(--text2); white-space:nowrap; flex-shrink:0; }
.prop-secret-wrap { position:relative; }
.prop-secret-toggle { position:absolute; right:8px; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--text3); cursor:pointer; font-size:13px; padding:2px 4px; line-height:1; }
.prop-secret-toggle:hover { color:var(--text2); }

/* key-value editor */
/* ── Props panel: key-value table editor ── */
.prop-kv-wrap { margin-top: 2px; }
.prop-kv-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  font-size: 12px;
}
.prop-kv-th {
  background: var(--surface3);
  color: var(--text3);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 4px 8px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.prop-kv-th-del { width: 28px; background: var(--surface3); border-bottom: 1px solid var(--border); }
.prop-kv-td {
  padding: 2px 3px;
  border-bottom: 1px solid var(--border);
}
.prop-kv-td:first-child { border-right: 1px solid var(--border); }
.prop-kv-row:last-child .prop-kv-td,
.prop-kv-row:last-child .prop-kv-td-del { border-bottom: none; }
.prop-kv-td-del {
  width: 28px;
  text-align: center;
  padding: 2px 2px;
  border-bottom: 1px solid var(--border);
}
.prop-kv-cell {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  padding: 4px 6px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--text);
}
.prop-kv-cell:focus { background: var(--surface2); border-radius: 3px; }
.prop-kv-cell::placeholder { color: var(--text3); }
.prop-kv-del {
  background: none;
  border: none;
  color: var(--text3);
  cursor: pointer;
  font-size: 12px;
  padding: 2px 4px;
  line-height: 1;
  border-radius: 3px;
  transition: background .12s, color .12s;
}
.prop-kv-del:hover { background: rgba(255,79,107,.12); color: var(--red); }
.prop-kv-add {
  font-size: 11px;
  color: var(--accent);
  background: none;
  border: 1px dashed var(--border-bright);
  border-top: none;
  border-radius: 0 0 6px 6px;
  padding: 5px 10px;
  cursor: pointer;
  width: 100%;
  transition: background .15s, border-color .15s;
}
.prop-kv-add:hover { background: var(--accent-glow); border-color: var(--accent); }

/* multiselect */
.prop-ms-wrap { position:relative; }
.prop-ms-trigger { display:flex; align-items:center; gap:6px; min-height:34px; padding:4px 8px; background:var(--surface2); border:1px solid var(--border); border-radius:6px; cursor:pointer; transition:border-color .2s; }
.prop-ms-trigger:focus, .prop-ms-trigger:focus-within { border-color:var(--accent); outline:none; }
.prop-ms-chips { display:flex; flex-wrap:wrap; gap:4px; flex:1; }
.prop-ms-chip { display:flex; align-items:center; gap:3px; font-size:11px; background:var(--accent-glow); color:var(--accent); border:1px solid rgba(79,124,255,.3); border-radius:4px; padding:1px 6px; }
.prop-ms-chip button { background:none; border:none; color:var(--accent); cursor:pointer; font-size:11px; padding:0; line-height:1; }
.prop-ms-empty { font-size:12px; color:var(--text3); }
.prop-ms-arrow { color:var(--text3); font-size:10px; flex-shrink:0; }
.prop-ms-dropdown { position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:200; background:var(--surface); border:1px solid var(--border-bright); border-radius:8px; padding:4px; box-shadow:0 8px 24px rgba(0,0,0,.4); max-height:180px; overflow-y:auto; }
.prop-ms-opt { display:flex; align-items:center; gap:8px; padding:5px 8px; border-radius:5px; cursor:pointer; font-size:12px; color:var(--text2); transition:background .12s; }
.prop-ms-opt:hover { background:var(--surface3); color:var(--text); }
.prop-ms-opt input[type=checkbox] { accent-color:var(--accent); flex-shrink:0; }

/* select options with description */
.prop-select-opt-desc { font-size:10px; color:var(--text3); }

/* code editor */
.prop-code-wrap { position:relative; }
.prop-code-lang { position:absolute; top:6px; right:8px; font-family:var(--mono); font-size:10px; color:var(--text3); background:var(--surface3); padding:1px 6px; border-radius:3px; pointer-events:none; text-transform:uppercase; letter-spacing:.05em; }
.prop-code { font-family:var(--mono) !important; font-size:12px !important; resize:vertical; min-height:80px; padding-top:24px !important; }