/* Companion studio is intentionally isolated from ATS forms and workflow buttons. */
.companion3d-studio {
  --companion-ink: var(--ws-ink, #15213a);
  --companion-muted: var(--ws-muted, #5e6b82);
  --companion-line: var(--ws-line, #d9e0ed);
  --companion-accent: var(--ws-accent, #3454d8);
  --companion-surface: var(--ws-surface, #ffffff);
  --companion-soft: var(--ws-soft, #f3f5fa);
  --companion-selected: var(--ws-accent-soft, #edf0ff);
  display: grid;
  gap: 16px;
  width: 100%;
  min-width: 0;
  margin-bottom: 20px;
  color: var(--companion-ink);
  font-family: inherit;
}
.companion3d-studio *, .companion3d-studio *::before, .companion3d-studio *::after { box-sizing: border-box; }
.companion3d-studio [hidden], .companion3d-legacy[hidden] { display: none !important; }
.companion3d-heading { padding: 18px; border: 1px solid var(--companion-line); border-radius: 18px; background: var(--ws-hero, linear-gradient(130deg, #f5f7fd 0%, #edf0ff 100%)); }
.companion3d-eyebrow { font-size: 9px; font-weight: 750; line-height: 1.5; letter-spacing: .14em; color: var(--companion-accent); }
.companion3d-heading h6 { margin: 7px 0; font-size: 18px; line-height: 1.5; letter-spacing: -.04em; }
.companion3d-heading p, .companion3d-note { margin: 0; color: var(--companion-muted); font-size: 11px; line-height: 1.8; }
.companion3d-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.companion3d-studio button {
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  border: 1px solid var(--companion-line);
  border-radius: 12px;
  padding: 9px 8px;
  color: var(--companion-ink);
  background: var(--companion-surface);
  box-shadow: none;
  font: inherit;
  font-size: 12px;
  line-height: 1.5;
  cursor: pointer;
  touch-action: manipulation;
}
.companion3d-studio button:hover { border-color: var(--companion-accent); background: var(--companion-soft); }
.companion3d-studio button:focus-visible, .companion3d-studio select:focus-visible, .companion3d-studio input:focus-visible { outline: 3px solid var(--companion-accent); outline-offset: 3px; }
.companion3d-studio button[aria-pressed="true"] { border-color: var(--companion-accent); background: var(--companion-selected); box-shadow: inset 0 0 0 1px var(--companion-accent); color: var(--companion-accent); }
.companion3d-studio button:disabled, .companion3d-studio select:disabled { cursor: default; opacity: .6; }
.companion3d-mode button { text-align: left; padding: 11px 12px; font-weight: 700; }
.companion3d-mode button span { display: block; margin-top: 3px; color: var(--companion-muted); font-size: 10px; font-weight: 400; }
.companion3d-options { display: grid; gap: 18px; min-width: 0; }
.companion3d-selection { margin: 0; padding: 10px 14px; border-radius: 9px; color: var(--companion-accent); background: var(--companion-selected); font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.companion3d-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.companion3d-fieldset legend { display: flex; align-items: center; gap: 8px; width: 100%; padding: 0 0 10px; font-size: 13px; font-weight: 750; }
.companion3d-fieldset legend span { color: var(--companion-muted); font-size: 10px; font-weight: 400; letter-spacing: .04em; }
.companion3d-shapes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.companion3d-shapes button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 70px; padding: 7px 3px; font-size: 10px; }
.companion3d-shape-icon { display: grid; place-items: center; width: 30px; height: 28px; color: var(--companion-muted); font-size: 28px; line-height: 1; }
.companion3d-shapes button[aria-pressed="true"] .companion3d-shape-icon { color: var(--companion-accent); }
.companion3d-colors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.companion3d-colors button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-height: 68px; padding: 8px 2px; font-size: 9px; }
.companion3d-swatch { width: 24px; height: 24px; border-radius: 50%; background: var(--companion-swatch); border: 1px solid #0002; box-shadow: inset 0 2px 4px #fff5, 0 2px 4px #0c2a3812; }
.companion3d-colors button[aria-pressed="true"] .companion3d-swatch { outline: 2px solid var(--companion-accent); outline-offset: 3px; }
.companion3d-motion { display: grid; gap: 12px; padding: 15px; border: 1px solid var(--companion-line); border-radius: 15px; background: var(--companion-soft); }
.companion3d-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; cursor: pointer; }
.companion3d-switch strong { display: block; font-size: 12px; font-weight: 700; }
.companion3d-switch small { display: block; margin-top: 3px; color: var(--companion-muted); font-size: 10px; line-height: 1.7; }
.companion3d-switch input[type="checkbox"] { flex: 0 0 44px; width: 44px; height: 44px; margin: 0; accent-color: var(--companion-accent); cursor: pointer; }
.companion3d-intensity { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; }
.companion3d-intensity select { width: auto; min-width: 130px; min-height: 44px; border: 1px solid var(--companion-line); border-radius: 10px; padding: 8px; color: var(--companion-ink); background: var(--companion-surface); font: inherit; }
.companion3d-pause { width: 100%; }
.companion3d-status-row { display: grid; gap: 8px; }
.companion3d-status-row p, .companion3d-save-status { margin: 0; color: var(--companion-muted); font-size: 11px; line-height: 1.8; }
.companion3d-save-status:empty { display: none; }
.companion3d-save-status[data-state="error"] { padding: 10px 12px; border: 1px solid var(--ws-error, #ad3049); border-radius: 10px; color: var(--ws-error, #ad3049); background: var(--ws-error-soft, #ffedf1); }
.companion3d-studio .companion3d-reset { justify-self: start; color: var(--companion-muted); font-size: 11px; background: transparent; }
@media (max-width: 350px) {
  .companion3d-heading { padding: 14px; }
  .companion3d-heading h6 { font-size: 16px; }
  .companion3d-shapes, .companion3d-colors { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .companion3d-intensity { flex-wrap: wrap; }
  .companion3d-intensity select { flex: 1; }
}
@media (forced-colors: active) {
  .companion3d-studio button[aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: -3px; }
  .companion3d-swatch { forced-color-adjust: none; }
}

/* Static SVG only while the real stage is loading/unavailable. No interaction
   surface covers the workflow; the existing launcher still opens settings. */
.workspace-companion-static { position: absolute; display: grid; place-items: center; top: 0; left: 50%; width: 130px; height: 125px; transform: translateX(-50%); pointer-events: none; }
.workspace-companion-static[hidden], .workspace-companion-static [hidden] { display: none !important; }
.workspace-companion-static svg { width: 130px; height: 130px; filter: drop-shadow(0 5px 4px #19334020); }
.workspace-companion-static-symbol { position: absolute; top: 5px; left: 10px; right: 10px; font-size: 90px; line-height: 1.2; text-align: center; text-shadow: 0 1px 1px #14273455, 0 5px 8px #19334020; }
.workspace-companion-static-label { position: absolute; bottom: 7px; left: 0; right: 0; color: var(--ws-muted, #617580); font-size: 8px; line-height: 1.5; text-align: center; }
body.workspace-shell .workspace-companion[data-companion-static="true"] .workspace-companion-character { visibility: hidden; }
/* Shared workspace tokens provide the same palette in light and dark modes. */

/* Three workflow companions share static selectors and one selected live view. */
.companion3d-silhouette { position: relative; display: inline-grid; place-items: center; width: 36px; height: 36px; flex: 0 0 auto; pointer-events: none; }
.companion3d-silhouette svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 2px 2px #19334025); }
.companion3d-silhouette [hidden] { display: none !important; }
.companion3d-silhouette-symbol { display: block; font-size: 30px; line-height: 1; text-shadow: 0 1px 2px #14273488; }
.companion3d-targets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.companion3d-targets button { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 3px; font-size: 11px; font-weight: 650; }
.companion3d-targets .companion3d-silhouette { width: 44px; height: 44px; }
.companion3d-preview-card { position: relative; width: 100%; height: 220px; overflow: hidden; border: 1px solid var(--companion-line); border-radius: 20px; background: radial-gradient(ellipse at 50% 42%, #b8cbe58c, #d8c6ef40 62%, #b6dcd34d), var(--companion-soft); }
.companion3d-preview { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.companion3d-preview canvas { display: block; width: 100%; height: 100%; }
.companion3d-preview-fallback { position: absolute; top: 50%; left: 50%; width: 180px; height: 180px; transform: translate(-50%, -50%); }
.companion3d-preview-fallback .companion3d-silhouette-symbol { font-size: 140px; }
body.workspace-shell .workspace-companion[data-companion-ready="true"],
body.workspace-shell .workspace-companion[data-companion-static="true"] { background: radial-gradient(ellipse at 50% 38%, #b0c7e27a, #d6c6eb45 65%, #b5dcd333); }
.workspace-companion-static.companion3d-silhouette { position: absolute; display: grid; width: 130px; height: 125px; }
.workspace-companion-static .companion3d-silhouette-symbol { font-size: 90px; }
.workspace-steps .workspace-step .companion3d-silhouette { width: 18px; height: 18px; }
.workspace-steps .companion3d-silhouette-symbol { font-size: 18px; }