/* vibeWidgets — Option C: the neon identity, disciplined.
 *
 * Loaded LAST. The app's whole look routes through the custom properties in
 * core.css/index.css, so this file IS the design decision: one accent, glows
 * earned (primary action + focus only), gradients flattened, figures in mono.
 * The original sheets stay untouched — delete this file and the carnival is back.
 *
 * Register (from the vetted reference catalogue): near-black ground, hairlines,
 * a single electric hue, density without clutter.
 */

:root {
  /* ---- one accent. Electric blue IS the brand; everything else falls in. */
  --cyan-bright: #09f;
  --cyan-mid: #0080d5;
  --purple-neon: #09f;
  --purple-bright: #33adff;

  /* green survives ONLY as semantic success — dimmer, less radioactive */
  --green-ghost: #2bd58a;
  --green-strong: #1fa76c;

  /* ---- text lifted out of the mud */
  --text-primary: #e4e9ef;
  --text-secondary: #96a1ad;
  --text-muted: #626d79;

  /* ---- glows: ambient off, feedback quiet */
  --glow-blue: rgb(0 153 255 / 22%);
  --glow-blue-strong: rgb(0 153 255 / 35%);
  --glow-green: rgb(43 213 138 / 18%);
  --glow-green-strong: rgb(43 213 138 / 28%);
  --glow-cyan: rgb(0 153 255 / 12%);
  --glow-purple: rgb(0 153 255 / 15%);
  --glow-purple-strong: rgb(0 153 255 / 25%);

  /* ---- gradients become flat, considered surfaces */
  --gradient-space: var(--space-dark);
  --gradient-space-vertical: var(--space-dark);
  --gradient-panel: var(--space-dark);
  --gradient-elements-bar: var(--space-dark);
  --gradient-button-primary: #0080d5;
  --gradient-button-accent: #085a96;
  --gradient-scanline: transparent;
  --gradient-stage-transition: rgb(0 153 255 / 18%);

  /* cyan/purple opacity families collapse into the accent */
  --cyan-opacity-08: rgb(0 153 255 / 8%);
  --cyan-opacity-20: rgb(0 153 255 / 20%);
}

/* ---- the ambient washes go. The ground is a surface, not a lava lamp. */
html,
body,
.app-header,
.vw-landing {
  background-image: none;
}

/* the animated scanline was wallpaper; a still hairline keeps the identity */
.app-header::before {
  height: 1px;
  animation: none;
  background: rgb(0 153 255 / 35%);
  opacity: 1;
}

/* ---- buttons: flat fill, honest hover, glow only where the eye should go */
.btn.primary:hover:not(:disabled),
.btn-primary:hover:not(:disabled) {
  background: #1993e6;
  transform: none;
}

.btn.accent:hover:not(:disabled),
.btn-accent:hover:not(:disabled) {
  background: #0f6cb0;
  transform: none;
}

.btn.primary,
.btn-primary {
  box-shadow: 0 0 10px var(--glow-blue);
}

/* ---- focus is the ONE place light is spent freely */
:focus-visible {
  outline: 2px solid var(--blue-electric);
  outline-offset: 2px;
  box-shadow: none;
}

/* ---- figures read like instruments: prices, budgets, versions, references */
.storefront-price,
.mw-usage,
.mw-version-label,
.vw-purchase-amount,
.vw-purchase-key,
.vw-purchase-reference {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

/* ---- commerce surfaces: hairlines and an even 4/8 rhythm */
.storefront-card,
.mw-widget,
.vw-purchase-modal {
  border-width: 1px;
  box-shadow: none;
}

.storefront-card {
  padding: 16px;
}

.mw-widget {
  padding: 12px 16px;
}

/* chips stop competing: neutral until meaningful */
.storefront-chip,
.chip-base {
  border: 1px solid rgb(150 161 173 / 25%);
  background: transparent;
  color: var(--text-secondary);
}

/* ---- green is SUCCESS, not identity. These wore it as decoration. */
.widget-name-input,
#widgetNameValue {
  color: var(--text-primary);
  border-color: rgb(0 153 255 / 35%);
}

.elements-toolbar,
.elements-toolbar:hover {
  border-color: rgb(0 153 255 / 30%);
  box-shadow: none;
}

#btnSendAiPrompt,
.ai-send-btn {
  background: var(--gradient-button-primary);
  border-color: var(--blue-electric);
  color: #fff;
  box-shadow: 0 0 10px var(--glow-blue);
}

/* a price is a figure, not a status */
.storefront-price {
  color: var(--text-primary);
}

/* the elements dock: hairline, no halo, no green ribbon */
.elements-toolbar-items {
  border: 1px solid rgb(0 153 255 / 30%);
  box-shadow: 0 12px 32px rgb(0 0 0 / 45%);
}

.elements-toolbar::before {
  background: transparent;
}

.elements-item:hover {
  transform: none;
  border-color: rgb(0 153 255 / 45%);
  background: rgb(0 153 255 / 8%);
  box-shadow: none;
}

/* ---- live mode is the finished product, not the builder with the lights on.
 * Elements dock, context rail, and the mobile elements bar are build-time
 * chrome — gone. The unified toolbar (Builder/Live toggle lives there — the
 * only way back) and the AI chat bar stay; index.css hides agents-chat on
 * body.live-mode, so it's restored here, last, on purpose. */
body.live-mode .elements-toolbar,
body.live-mode .context-floating-panel,
body.live-mode .mobile-elements-bar,
body.live-mode #elementsFloatingPanel,
body.live-mode #contextFloatingPanel,
body.live-mode #mobileElementsBar {
  /* ids included: responsive.css re-shows these with an id + !important rule */
  display: none !important;
}

body.live-mode section.agents-chat {
  display: flex !important;
}