/* =====================================================================
 * AI Dave — Particle Orb V3 · STYLES
 * Component styles (the .aidave-orb container + canvas) plus the
 * neutral surface presets and preview-harness chrome. Visuals of the
 * Orb itself are produced by the canvas renderer; CSS only frames it.
 * ===================================================================== */

/* ---- shared dark stage background (matches approved standalone) ---- */
.aidave-orb-stage{
  margin:0;min-height:100%;
  background:radial-gradient(130% 120% at 50% 32%,#0a0c11 0%,#05060a 60%,#020305 100%);
  color:#98a1b0;
  font:400 13px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;
}

/* ---- the component container: a framed, rounded canvas host ---- */
.aidave-orb{
  position:relative;
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 46px 120px -34px rgba(0,0,0,.92), inset 0 0 0 1px rgba(150,170,210,.05);
}
.aidave-orb canvas{ display:block; width:100%; height:100%; }
.aidave-orb-label{
  position:absolute;left:14px;bottom:11px;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#566;pointer-events:none;
}

/* ---- safe surface size presets (preview only; production sets its own box) ----
   The Orb is resolution-independent: it fills whatever box the host gives it.
   These presets just demonstrate the intended surfaces at representative sizes. */
.aidave-orb--avatar       { width:72px;  height:72px;  border-radius:50%; }   /* small */
.aidave-orb--onboarding   { width:300px; height:300px; border-radius:30px; }  /* medium-large */
.aidave-orb--command      { width:400px; height:400px; border-radius:24px; }  /* large */
.aidave-orb--cockpit      { width:400px; height:400px; border-radius:24px; }  /* same as Command Center */
.aidave-orb--hero         { width:min(74vmin,560px); height:min(74vmin,560px); border-radius:26px; } /* largest */
.aidave-orb--review       { width:320px; height:320px; border-radius:24px; }  /* brightness-review tiles */

/* =====================================================================
 * PREVIEW-ONLY brightness review (website hero presentation).
 * Presentation filter on the rendered canvas ONLY — does NOT touch the
 * Orb's palette, renderer, physics, voice sync, or approved config.
 * Fully reversible; applied just to the surfaces that opt in via class.
 *   baseline : approved look, no filter
 *   balanced : brighter whites, silver/blue depth preserved
 *   white    : maximal hero visibility, pushed toward white
 * ===================================================================== */
.orb-bright-baseline canvas{ filter:none; }
.orb-bright-balanced canvas{ filter:brightness(1.16) saturate(0.98) contrast(1.05); }
.orb-bright-white    canvas{ filter:brightness(1.32) saturate(0.84) contrast(1.04); }

/* ---- preview harness chrome ---- */
.aidave-prev-wrap{ box-sizing:border-box; padding:26px; }
.aidave-prev-grid{ display:flex; flex-wrap:wrap; gap:30px; align-items:flex-end; justify-content:center; }
.aidave-prev-cell{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.aidave-prev-cap{ font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:#5b6470; }
.aidave-ctl{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; max-width:720px; margin:26px auto 6px; }
.aidave-btn{ border:1px solid #1b1f28;background:#0c0e14;color:#aab2c0;border-radius:9px;padding:8px 13px;font-size:12px;cursor:pointer; }
.aidave-btn:hover{ border-color:#2c323d;color:#e2e7ef; }
.aidave-btn.on{ border-color:#3a4658;color:#eef2f8;background:#141927; }
.aidave-status{ text-align:center;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#39414e;margin-top:6px; }
.aidave-status .st{ color:#cdd4df; }