/* ==========================================================================
   designer.css — Native 3D t-shirt designer (full-bleed stage + glass docks)
   Everything is scoped under .designer3d. Does NOT touch the site header,
   .btn, or .btn-primary globally (only adds spacing/sizing to those buttons
   when they carry a .designer3d-* class).
   ========================================================================== */

.designer3d {
  /* ---- Designer-local tokens ---- */
  --d-blue: #2563eb;
  --d-blue-dark: #1d4ed8;
  --d-blue-ring: rgba(37, 99, 235, 0.55);
  --d-danger: #dc2626;
  --d-success: #16a34a;

  --d-glass: rgba(255, 255, 255, 0.72);
  --d-glass-strong: rgba(255, 255, 255, 0.9);
  --d-border: rgba(255, 255, 255, 0.6);
  --d-border-line: rgba(15, 23, 42, 0.12);

  --d-text: #1f2937;
  --d-muted: #6b7280;
  --d-input-bg: #ffffff;
  --d-input-border: #cbd0d8;

  --d-pale: rgba(255, 255, 255, 0.55);
  --d-pale-hover: rgba(255, 255, 255, 0.85);
  --d-danger-tint: rgba(220, 38, 38, 0.1);

  --d-dock-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  --d-radius: 16px;

  /* Height of the sticky chrome (banner + two-row header) above the stage.
     The header is position:sticky with height:auto, so its real height varies;
     designer.njk measures it at runtime and sets --designer-chrome-h. The
     76px is only a pre-JS fallback. */
  --header-h: 76px;

  display: block;
  color: var(--d-text);
  font-size: 15px;
  line-height: 1.5;
}

/* Respect the native hidden attribute everywhere in scope. */
.designer3d [hidden] {
  display: none !important;
}

.designer3d *,
.designer3d *::before,
.designer3d *::after {
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Stage — full-bleed 3D canvas container, positioning context for all docks
   -------------------------------------------------------------------------- */
.designer3d-stage {
  position: relative;
  width: 100%;
  height: calc(100vh - var(--designer-chrome-h, 116px)); /* fallback (no svh) */
  height: calc(100svh - var(--designer-chrome-h, 116px));
  min-height: 520px;
  background:
    radial-gradient(120% 90% at 50% 0%, #eef1f4 0%, #e2e6eb 100%);
  overflow: hidden;
  touch-action: none;
}

.designer3d-canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
}

.designer3d-canvas:active,
.designer3d-canvas.is-grabbing {
  cursor: grabbing;
}

/* --------------------------------------------------------------------------
   Glass dock — base for every floating control cluster
   -------------------------------------------------------------------------- */
.designer3d-dock {
  position: absolute;
  z-index: 5;
  background: var(--d-glass);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid var(--d-border);
  border-radius: var(--d-radius);
  box-shadow: var(--d-dock-shadow);
}

/* ---- Editing pill (top-center, sits BELOW the garment bar) ---- */
.designer3d-editing {
  position: absolute;
  z-index: 6;
  /* Garment bar lives at the very top-center; drop the editing pill below it
     so the two never overlap (garment bar ≈ 56px tall + its 16px top offset). */
  top: calc(84px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 16px;
  text-align: center;
  pointer-events: none;
  background: var(--d-glass);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid var(--d-border);
  border-radius: 9999px;
  box-shadow: var(--d-dock-shadow);
  animation: designer3d-pop 0.18s ease;
}

@keyframes designer3d-pop {
  from { opacity: 0; transform: translateX(-50%) translateY(-6px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.designer3d-editing-eyebrow {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--d-muted);
}

.designer3d-editing-zone {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--d-text);
}

/* --------------------------------------------------------------------------
   Top-center — garment switcher bar (identity + prev/next chevrons)
   -------------------------------------------------------------------------- */
.designer3d-dock--garment {
  top: calc(16px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 8px;
  border-radius: 9999px;
  max-width: calc(100vw - 32px);
}

.designer3d-garmentbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

/* Small round ghost chevron buttons flanking the meta */
.designer3d-garment-chevron {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  padding: 0;
  color: var(--d-text);
  background: var(--d-pale);
  border: 1px solid var(--d-border-line);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease, opacity 0.15s ease;
}

.designer3d-garment-chevron:hover {
  background: var(--d-pale-hover);
}

.designer3d-garment-chevron:active {
  transform: scale(0.92);
}

.designer3d-garment-chevron:focus-visible {
  outline: 2px solid var(--d-blue);
  outline-offset: 2px;
}

.designer3d-garment-chevron .material-icons-sharp {
  font-size: 20px;
  line-height: 1;
}

.designer3d-garment-chevron:disabled,
.designer3d-garment-chevron[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

.designer3d-garment-chevron:disabled:hover,
.designer3d-garment-chevron[disabled]:hover {
  background: var(--d-pale);
}

/* Centered identity text */
.designer3d-garment-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 0;
  padding: 0 4px;
  text-align: center;
}

.designer3d-garment-name {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--d-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.designer3d-garment-material {
  font-size: 11px;
  line-height: 1.2;
  color: var(--d-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   Colour control — swatch button in the garment header + pop-out palette
   The button sits in the garment bar next to the name; the adjuster pops out
   beneath the bar (anchored to the garment dock).
   -------------------------------------------------------------------------- */
.designer3d-color-btn {
  flex: none;
  width: 26px;
  height: 26px;
  padding: 0;
  /* JS sets background = current shirt colour inline. */
  border: 2px solid #fff;
  border-radius: 50%;
  cursor: pointer;
  box-shadow:
    0 1px 3px rgba(15, 23, 42, 0.3),
    0 0 0 1px var(--d-border-line);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}

.designer3d-color-btn:hover {
  transform: scale(1.12);
}

.designer3d-color-btn:active {
  transform: scale(0.95);
}

.designer3d-color-btn:focus-visible {
  outline: none;
  box-shadow:
    0 1px 3px rgba(15, 23, 42, 0.3),
    0 0 0 2px #fff,
    0 0 0 4px var(--d-blue-ring);
}

/* Glass popover anchored beneath the garment bar (the dock is the positioning
   context). Centered under the bar. */
.designer3d-color-adjuster {
  position: absolute;
  z-index: 20;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(360px, calc(100vw - 24px));
  padding: 14px;
  background: var(--d-glass-strong);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid var(--d-border);
  border-radius: 14px;
  box-shadow: var(--d-dock-shadow);
}

/* Hidden by default; show when NOT hidden OR explicitly opened (both, because
   the JS toggles both [hidden] and .is-open together). */
.designer3d-color-adjuster[hidden] {
  display: none !important;
}

.designer3d-color-adjuster:not([hidden]),
.designer3d-color-adjuster.is-open {
  display: block;
}

.designer3d-color-adjuster h3 {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--d-muted);
}

/* --------------------------------------------------------------------------
   Top-right — views + display toggles
   -------------------------------------------------------------------------- */
.designer3d-dock--topright {
  top: calc(16px + env(safe-area-inset-top));
  right: calc(16px + env(safe-area-inset-right));
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
}

/* Segmented control (Front / Back) */
.designer3d-segment {
  display: inline-flex;
  align-items: stretch;
  background: var(--d-pale);
  border: 1px solid var(--d-border-line);
  border-radius: 9999px;
  padding: 2px;
}

.designer3d-seg-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--d-text);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 9999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.designer3d-seg-btn:hover {
  background: var(--d-pale-hover);
}

.designer3d-seg-btn:active {
  transform: scale(0.96);
}

.designer3d-seg-btn.is-active {
  background: var(--d-blue);
  color: #fff;
}

.designer3d-seg-btn:focus-visible {
  outline: 2px solid var(--d-blue);
  outline-offset: 2px;
}

/* Icon row of toggles */
.designer3d-iconrow {
  display: flex;
  flex-direction: row;
  gap: 4px;
}

/* --------------------------------------------------------------------------
   Icon-only buttons (toggles, save/load)
   -------------------------------------------------------------------------- */
.designer3d-iconbtn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  color: var(--d-text);
  background: var(--d-pale);
  border: 1px solid var(--d-border-line);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.designer3d-iconbtn:hover {
  background: var(--d-pale-hover);
}

.designer3d-iconbtn:active {
  transform: scale(0.94);
}

.designer3d-iconbtn .material-icons-sharp {
  font-size: 20px;
  line-height: 1;
}

.designer3d-iconbtn:focus-visible {
  outline: 2px solid var(--d-blue);
  outline-offset: 2px;
}

/* Pressed / active = filled blue */
.designer3d-iconbtn[aria-pressed="true"],
.designer3d-iconbtn.is-active {
  background: var(--d-blue);
  border-color: var(--d-blue);
  color: #fff;
}

.designer3d-iconbtn[aria-pressed="true"]:hover,
.designer3d-iconbtn.is-active:hover {
  background: var(--d-blue-dark);
  border-color: var(--d-blue-dark);
}

/* --------------------------------------------------------------------------
   Bottom-right — rotate joystick + zoom
   -------------------------------------------------------------------------- */
.designer3d-dock--joystick {
  bottom: calc(20px + env(safe-area-inset-bottom));
  right: calc(16px + env(safe-area-inset-right));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 10px;
}

/* Front/Back views now live inside the joystick dock — full-width segment on top */
.designer3d-segment--views {
  width: 100%;
  justify-content: stretch;
}

.designer3d-segment--views .designer3d-seg-btn {
  flex: 1;
  text-align: center;
}

/* Horizontal cluster: zoom-out | joystick | zoom-in */
.designer3d-joystick-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

/* Joystick base */
.designer3d-joystick {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  cursor: grab;
  touch-action: none;
  border: 1px solid var(--d-border-line);
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.9) 0%, rgba(226, 230, 235, 0.9) 70%, rgba(203, 208, 216, 0.9) 100%);
  box-shadow:
    inset 0 2px 6px rgba(15, 23, 42, 0.16),
    inset 0 -1px 2px rgba(255, 255, 255, 0.8);
}

.designer3d-joystick:active {
  cursor: grabbing;
}

.designer3d-joystick:focus-visible {
  outline: 2px solid var(--d-blue);
  outline-offset: 3px;
}

/* Subtle crosshair guide lines */
.designer3d-joystick::before,
.designer3d-joystick::after {
  content: "";
  position: absolute;
  background: rgba(15, 23, 42, 0.07);
  pointer-events: none;
}

.designer3d-joystick::before {
  left: 14px;
  right: 14px;
  top: 50%;
  height: 1px;
  transform: translateY(-50%);
}

.designer3d-joystick::after {
  top: 14px;
  bottom: 14px;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
}

/* Joystick nub (knob) — centered via negative margins; JS drives
   transform: translate(Xpx, Ypx) as a pure delta from center. */
.designer3d-joystick-nub {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  height: 40px;
  /* Centered via negative margins (half of width/height) so the JS-driven
     transform: translate(...) is a pure delta from center, not fighting a
     -50%,-50% centering transform. */
  margin-left: -20px;
  margin-top: -20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  color: var(--d-muted);
  border: 1px solid var(--d-border-line);
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.28);
  cursor: grab;
  transition: transform 0.18s ease-out;
  will-change: transform;
  pointer-events: none;
}

.designer3d-joystick-nub:active {
  cursor: grabbing;
}

.designer3d-joystick-nub .material-icons-sharp {
  font-size: 20px;
  line-height: 1;
}

/* JS toggles .is-dragging on the base — kill the spring transition while dragging */
.designer3d-joystick.is-dragging .designer3d-joystick-nub {
  transition: none;
}

/* Zoom buttons */
.designer3d-zoombtn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--d-text);
  background: var(--d-pale);
  border: 1px solid var(--d-border-line);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

.designer3d-zoombtn:hover {
  background: var(--d-pale-hover);
}

.designer3d-zoombtn:active {
  transform: scale(0.92);
}

.designer3d-zoombtn .material-icons-sharp {
  font-size: 22px;
  line-height: 1;
}

.designer3d-zoombtn:focus-visible {
  outline: 2px solid var(--d-blue);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Bottom-center — primary tool dock (full pill)
   -------------------------------------------------------------------------- */
.designer3d-dock--tools {
  bottom: calc(20px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 9999px;
  max-width: calc(100vw - 32px);
}

.designer3d-tool {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Thin vertical separator */
.designer3d-divider {
  flex: none;
  width: 1px;
  height: 24px;
  background: var(--d-border-line);
  margin: 0 2px;
}

/* --------------------------------------------------------------------------
   Colour swatches grid — shared by the on-garment colour adjuster
   -------------------------------------------------------------------------- */
.designer3d-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 332px;
}

.designer3d-swatches button {
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--d-input-border);
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.12s ease;
}

.designer3d-swatches button:hover {
  transform: scale(1.15);
}

.designer3d-swatches button[aria-pressed="true"],
.designer3d-swatches button.is-active {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--d-blue);
}

.designer3d-swatches button:focus-visible {
  outline: 2px solid var(--d-blue);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Pill buttons (Upload / Change / Remove)
   -------------------------------------------------------------------------- */
.designer3d-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: var(--d-text);
  background: var(--d-pale);
  border: 1px solid var(--d-border-line);
  border-radius: 9999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.designer3d-btn:hover {
  background: var(--d-pale-hover);
}

.designer3d-btn:active {
  transform: scale(0.97);
}

.designer3d-btn:focus-visible {
  outline: 2px solid var(--d-blue);
  outline-offset: 2px;
}

.designer3d-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.designer3d-btn .material-icons-sharp {
  font-size: 18px;
  line-height: 1;
}

.designer3d-btn--danger {
  color: var(--d-danger);
  background: var(--d-danger-tint);
  border-color: rgba(220, 38, 38, 0.3);
}

.designer3d-btn--danger:hover {
  color: #fff;
  background: var(--d-danger);
  border-color: var(--d-danger);
}

/* --------------------------------------------------------------------------
   Scale slider
   -------------------------------------------------------------------------- */
.designer3d-scale {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.designer3d-scale label {
  font-size: 11px;
  color: var(--d-muted);
  white-space: nowrap;
}

.designer3d-scale input[type="range"] {
  width: 96px;
  accent-color: var(--d-blue);
  cursor: pointer;
}

.designer3d-scale input[type="range"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.designer3d-scale input[type="range"]:focus-visible {
  outline: 2px solid var(--d-blue);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Conversion CTA — uses site .btn .btn-primary; just shape it in the dock
   -------------------------------------------------------------------------- */
.designer3d-quote-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 9999px;
  white-space: nowrap;
}

.designer3d-quote-cta .material-icons-sharp {
  font-size: 18px;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   Quote modal
   -------------------------------------------------------------------------- */
.designer3d-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.designer3d-modal[hidden] {
  display: none !important;
}

#quote-modal:not([hidden]),
.designer3d-modal.is-open,
.designer3d-modal.is-visible {
  display: flex;
}

.designer3d-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.designer3d-modal-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  max-height: 90svh;
  overflow-y: auto;
  padding: 28px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  animation: designer3d-modal-in 0.2s ease;
}

@keyframes designer3d-modal-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.designer3d-modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  line-height: 1;
  color: var(--d-muted);
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.designer3d-modal-close:hover {
  background: rgba(15, 23, 42, 0.06);
  color: var(--d-text);
}

.designer3d-modal-close:focus-visible {
  outline: 2px solid var(--d-blue);
  outline-offset: 2px;
}

.designer3d-modal-panel h2 {
  margin: 0 36px 4px 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--d-text);
}

.designer3d-modal-sub {
  margin: 0 0 20px;
  font-size: 14px;
  color: var(--d-muted);
}

/* ---- Quote form ---- */
.designer3d-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.designer3d-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.designer3d-field--full {
  grid-column: 1 / -1;
}

.designer3d-field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--d-text);
}

.designer3d-field input,
.designer3d-field select,
.designer3d-field textarea {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
  color: var(--d-text);
  background: var(--d-input-bg);
  border: 1px solid var(--d-input-border);
  border-radius: 8px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.designer3d-field textarea {
  min-height: 90px;
  resize: vertical;
}

.designer3d-field input:focus,
.designer3d-field select:focus,
.designer3d-field textarea:focus {
  outline: none;
  border-color: var(--d-blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
}

/* Size cells — tidy wrap grid */
.designer3d-sizes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
}

.designer3d-sizes label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--d-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.designer3d-sizes input {
  width: 100%;
  max-width: 64px;
  padding: 8px 10px;
  font: inherit;
  font-size: 14px;
  text-align: center;
  color: var(--d-text);
  background: var(--d-input-bg);
  border: 1px solid var(--d-input-border);
  border-radius: 8px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.designer3d-sizes input:focus {
  outline: none;
  border-color: var(--d-blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
}

/* Status line */
.designer3d-status {
  grid-column: 1 / -1;
  font-size: 13px;
  color: var(--d-muted);
  min-height: 1em;
}

.designer3d-status.is-error { color: var(--d-danger); }
.designer3d-status.is-success { color: var(--d-success); }
.designer3d-status.is-loading { color: var(--d-muted); }

/* Submit — uses site .btn .btn-primary; we add width + spacing */
.designer3d-submit {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: 4px;
}

/* ---- Success state ---- */
.designer3d-success {
  text-align: center;
  padding: 24px 8px 8px;
}

.designer3d-success[hidden] {
  display: none !important;
}

#quote-success.is-visible,
.designer3d-success.is-open {
  display: block;
}

.designer3d-success .material-icons-sharp {
  font-size: 64px;
  line-height: 1;
  color: var(--d-success);
}

.designer3d-success h2,
.designer3d-success h3 {
  margin: 12px 0 6px;
  font-size: 22px;
  font-weight: 700;
  color: var(--d-text);
}

.designer3d-success p {
  margin: 0;
  font-size: 14px;
  color: var(--d-muted);
}

/* --------------------------------------------------------------------------
   Responsive — <= 768px
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* Garment bar must clear the top-right toggles dock — keep it narrow and
     centred; truncate long names rather than collide. */
  .designer3d-dock--garment {
    max-width: min(62vw, 340px);
  }

  .designer3d-garment-name {
    font-size: 13px;
  }

  /* Bottom-center pill: stay on one line, scroll if it can't fit */
  .designer3d-dock--tools {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: calc(100vw - 24px);
  }

  .designer3d-dock--tools::-webkit-scrollbar {
    display: none;
  }

  .designer3d-tool,
  .designer3d-divider,
  .designer3d-quote-cta {
    flex: none;
  }

  .designer3d-form {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Responsive — <= 600px
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  /* The top-center garment bar shares the row with the top-right toggles dock.
     Keep the bar compact: hide the secondary material line and shrink the name
     so it can't grow into the toggles. */
  .designer3d-dock--garment {
    max-width: min(56vw, 240px);
    padding: 5px 6px;
  }
  .designer3d-garment-material {
    display: none;
  }
  .designer3d-garment-name {
    font-size: 12px;
  }
  .designer3d-garment-chevron {
    width: 28px;
    height: 28px;
  }
  .designer3d-garment-chevron .material-icons-sharp {
    font-size: 18px;
  }

  /* The centered garment bar fills the top row on phones, so the toggles can't
     also live top-right without overlapping. Move them to the free bottom-left
     corner (joystick is bottom-right, tools bottom-center). Keep them above the
     tools dock by sitting a little higher. */
  .designer3d-dock--topright {
    top: auto;
    right: auto;
    bottom: calc(86px + env(safe-area-inset-bottom));
    left: calc(12px + env(safe-area-inset-left));
    gap: 6px;
    padding: 6px;
  }
  .designer3d-iconbtn {
    width: 32px;
    height: 32px;
  }

  /* With the toggles moved down, the editing pill can sit higher again —
     just clear of the garment bar. */
  .designer3d-editing {
    top: calc(76px + env(safe-area-inset-top));
  }

  /* Don't force the stage taller than the available space on short viewports
     (the 520px desktop min-height would push the page into scroll on phones). */
  .designer3d-stage {
    min-height: 0;
  }

  /* Smaller joystick */
  .designer3d-joystick {
    width: 72px;
    height: 72px;
  }

  .designer3d-joystick-nub {
    width: 34px;
    height: 34px;
    /* Re-center for the smaller nub (half of 34px). */
    margin-left: -17px;
    margin-top: -17px;
  }

  /* CTA collapses to icon-only */
  .designer3d-quote-label {
    display: none;
  }

  .designer3d-quote-cta {
    padding: 9px 11px;
  }

  /* Modal goes near-fullscreen */
  .designer3d-modal {
    padding: 0;
  }

  .designer3d-modal-panel {
    max-width: none;
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    max-height: 100svh;
    border-radius: 0;
    padding: 24px 18px 32px;
  }
}

/* --------------------------------------------------------------------------
   Reduced motion — kill non-essential transitions/animations
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .designer3d *,
  .designer3d *::before,
  .designer3d *::after {
    transition: none !important;
    animation: none !important;
  }

  /* Nub spring-back must not animate */
  .designer3d-joystick-nub {
    transition: none !important;
  }
}

/* --------------------------------------------------------------------------
   Dark mode — darker stage + dark glass docks
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  .designer3d {
    --d-glass: rgba(28, 30, 34, 0.7);
    --d-glass-strong: rgba(28, 30, 34, 0.92);
    --d-border: rgba(255, 255, 255, 0.1);
    --d-border-line: rgba(255, 255, 255, 0.14);

    --d-text: #e6e8ec;
    --d-muted: #9aa1ab;

    --d-pale: rgba(255, 255, 255, 0.08);
    --d-pale-hover: rgba(255, 255, 255, 0.16);
    --d-danger-tint: rgba(220, 38, 38, 0.18);

    --d-input-bg: #1c1e22;
    --d-input-border: #3a3e45;

    --d-dock-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
  }

  .designer3d-stage {
    background:
      radial-gradient(120% 90% at 50% 0%, #1a1d22 0%, #0e1013 100%);
  }

  .designer3d-joystick {
    background:
      radial-gradient(circle at 50% 50%, rgba(58, 62, 70, 0.95) 0%, rgba(28, 30, 34, 0.95) 70%, rgba(14, 16, 19, 0.95) 100%);
    box-shadow:
      inset 0 2px 6px rgba(0, 0, 0, 0.5),
      inset 0 -1px 2px rgba(255, 255, 255, 0.08);
  }

  .designer3d-joystick::before,
  .designer3d-joystick::after {
    background: rgba(255, 255, 255, 0.08);
  }

  .designer3d-joystick-nub {
    background: #2b2e34;
    color: #c4c9d1;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
  }

  /* Colour swatch button ring stays light so it reads in the dark header too. */
  .designer3d-color-btn {
    box-shadow:
      0 1px 3px rgba(0, 0, 0, 0.5),
      0 0 0 1px rgba(255, 255, 255, 0.25);
  }

  .designer3d-swatches button {
    border-color: rgba(255, 255, 255, 0.2);
  }

  .designer3d-swatches button[aria-pressed="true"],
  .designer3d-swatches button.is-active {
    box-shadow: 0 0 0 2px #1c1e22, 0 0 0 4px var(--d-blue);
  }

  .designer3d-modal-panel {
    background: #1c1e22;
  }

  .designer3d-modal-close:hover {
    background: rgba(255, 255, 255, 0.1);
  }
}

/* ── Creative-suite tool panels (Add Text, Image transforms) ──
   Pop out UPWARD from the bottom-center tool dock. Mirrors the colour
   adjuster: JS toggles both [hidden] and .is-open together. */
.designer3d-dock--tools .designer3d-tool {
  position: relative;
}
.designer3d-tool-adjuster {
  position: absolute;
  z-index: 20;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(320px, calc(100vw - 24px));
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  background: var(--d-glass-strong);
  -webkit-backdrop-filter: blur(20px) saturate(1.25);
  backdrop-filter: blur(20px) saturate(1.25);
  border: 1px solid var(--d-border);
  border-radius: var(--d-radius);
  box-shadow: var(--d-dock-shadow);
}
   polish block below — NOT display, so open/close can transition. [hidden] is
   kept in markup for the no-JS/a11y fallback; JS clears it on open. */
.designer3d-tool-adjuster h3 {
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--d-muted);
}
.designer3d-field {
  display: flex;
  flex-direction: column;
}
.designer3d-text-field {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--d-input-border);
  border-radius: 10px;
  background: var(--d-input-bg);
  color: var(--d-text);
  font: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.designer3d-text-field:focus-visible {
  outline: none;
  border-color: var(--d-blue);
  box-shadow: 0 0 0 3px var(--d-blue-ring);
}
.designer3d-text-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}
.designer3d-text-row label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 52px;
  font-weight: 500;
  color: var(--d-muted);
  white-space: nowrap;
}
/* Toggle rows and free-form button rows shouldn't force the label min-width. */
.designer3d-text-row--toggles label,
.designer3d-text-row .designer3d-check {
  min-width: 0;
}
.designer3d-text-row input[type="range"] {
  flex: 1;
}
.designer3d-text-select {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid var(--d-input-border);
  border-radius: 10px;
  background: var(--d-input-bg);
  color: var(--d-text);
  font: inherit;
}
/* Full-width primary/secondary buttons inside adjuster panels. */
.designer3d-btn--block {
  width: 100%;
  justify-content: center;
}
.designer3d-image-preview {
  max-width: 100%;
  max-height: 120px;
  align-self: center;
  border-radius: 10px;
  border: 1px solid var(--d-border-line);
  background: rgba(127, 127, 127, 0.08);
}
.designer3d-btn--ghost {
  background: transparent;
  border: 1px solid var(--d-border);
}

/* ── Searchable Google-Fonts picker (text tool) ───────────────────────── */
.designer3d-fontpicker {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.designer3d-fontpicker-search {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--d-input-border);
  border-radius: 8px;
  background: var(--d-input-bg);
  color: var(--d-text);
  font: inherit;
}
.designer3d-fontpicker-search:focus-visible {
  outline: none;
  border-color: var(--d-blue);
  box-shadow: 0 0 0 3px var(--d-blue-ring);
}
.designer3d-fontpicker-list {
  max-height: 196px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: 2px;
  scrollbar-width: thin;
}
.designer3d-fontpicker-row {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--d-text);
  font-size: 17px;
  line-height: 1.1;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.designer3d-fontpicker-row:hover {
  background: var(--d-pale);
}
.designer3d-fontpicker-row[aria-selected="true"] {
  border-color: var(--d-blue);
  background: rgba(37, 99, 235, 0.08);
}
.designer3d-fontpicker-row:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--d-blue-ring);
}
.designer3d-fontpicker-empty {
  padding: 14px 10px;
  text-align: center;
  color: var(--d-muted);
  font-size: 13px;
}

/* ── Polish: smoother tool-panel open/close + tidier controls ──────────── */
/* Animate via opacity/transform (display can't transition). [hidden] still
   hard-hides for a11y; .is-open drives the visible state + animation. */
.designer3d-tool-adjuster {
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}
.designer3d-tool-adjuster:not(.is-open) {
  opacity: 0;
  transform: translateX(-50%) translateY(6px);
  pointer-events: none;
  visibility: hidden;
}
.designer3d-tool-adjuster.is-open {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  visibility: visible;
}
.designer3d-text-row--toggles {
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
}
/* Checkboxes as compact toggle-pills. */
.designer3d-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--d-border-line);
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--d-text);
  background: var(--d-pale);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.designer3d-check:hover {
  background: var(--d-pale-hover);
}
.designer3d-check input {
  accent-color: var(--d-blue);
  margin: 0;
  width: 15px;
  height: 15px;
  cursor: pointer;
}
.designer3d-check:has(input:checked) {
  color: var(--d-blue);
  border-color: var(--d-blue);
  background: rgba(37, 99, 235, 0.1);
}
.designer3d-check:focus-within {
  outline: 2px solid var(--d-blue);
  outline-offset: 2px;
}

/* iOS-style range sliders: thin track, round thumb, blue fill feel. */
.designer3d-tool-adjuster input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 22px;
  background: transparent;
  accent-color: var(--d-blue);
  cursor: pointer;
}
.designer3d-tool-adjuster input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 9999px;
  background: var(--d-border-line);
}
.designer3d-tool-adjuster input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 9999px;
  background: var(--d-border-line);
}
.designer3d-tool-adjuster input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -6px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--d-border-line);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.1s ease;
}
.designer3d-tool-adjuster input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--d-border-line);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.designer3d-tool-adjuster input[type="range"]:active::-webkit-slider-thumb {
  transform: scale(1.12);
}
.designer3d-tool-adjuster input[type="range"]:focus-visible {
  outline: none;
}
.designer3d-tool-adjuster input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 0 0 3px var(--d-blue-ring);
}
.designer3d-tool-adjuster input[type="range"]:focus-visible::-moz-range-thumb {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 0 0 3px var(--d-blue-ring);
}

/* Color input as a neat round swatch. */
.designer3d-tool-adjuster input[type="color"] {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--d-border-line);
  border-radius: 50%;
  background: none;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.designer3d-tool-adjuster input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}
.designer3d-tool-adjuster input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: 50%;
}
.designer3d-tool-adjuster input[type="color"]::-moz-color-swatch {
  border: none;
  border-radius: 50%;
}

/* Progressive disclosure: a subtle "More options" row with custom caret. */
.designer3d-disclosure {
  border-top: 1px solid var(--d-border-line);
  padding-top: 12px;
}
.designer3d-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 2px 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--d-muted);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: color 0.15s ease;
}
.designer3d-disclosure > summary::-webkit-details-marker {
  display: none;
}
.designer3d-disclosure > summary:hover {
  color: var(--d-text);
}
.designer3d-disclosure > summary:focus-visible {
  outline: 2px solid var(--d-blue);
  outline-offset: 3px;
  border-radius: 6px;
}
.designer3d-disclosure-caret {
  font-size: 18px;
  line-height: 1;
  transition: transform 0.18s ease;
}
.designer3d-disclosure[open] > summary .designer3d-disclosure-caret {
  transform: rotate(180deg);
}
.designer3d-disclosure-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 12px;
}

/* ==========================================================================
   3D | 2D VIEW-MODE TOGGLE  (appended — owned by viewmode.js)
   A segmented control in the top-left chrome flips the editor between the
   orbiting 3D garment view and a flat, camera-locked straight-on view of the
   active zone (no separate renderer — scene.js setFlatView/exitFlatView drive
   the same camera). viewmode.js toggles .mode-2d/.mode-3d on .designer3d (and
   .is-2d/.is-3d on .designer3d-stage), which hides the 3D-only rotate joystick.
   ========================================================================== */

/* ---- Top-left dock that houses the mode segmented control ---- */
.designer3d-dock--mode {
  top: calc(16px + env(safe-area-inset-top));
  left: calc(16px + env(safe-area-inset-left));
  padding: 4px;
  border-radius: 9999px;
}

/* ---- Apple-style segmented control (same component family as Front/Back) ----
   Pill container on glass; the active segment gets a raised white "thumb". */
.designer3d-segment--mode {
  background: var(--d-glass);
  border-color: transparent;
  gap: 2px;
}

.designer3d-segment--mode .designer3d-seg-btn {
  min-width: 44px;
  text-align: center;
  color: var(--d-muted);
  background: transparent;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.designer3d-segment--mode .designer3d-seg-btn:hover {
  background: transparent;
  color: var(--d-text);
}

/* Active segment: white raised thumb (NOT the blue fill the base .is-active
   uses) — overrides the shared rule for this segment family only. */
.designer3d-segment--mode .designer3d-seg-btn.is-active {
  background: #fff;
  color: var(--d-text);
  box-shadow: var(--d-dock-shadow);
}

.designer3d-segment--mode .designer3d-seg-btn:focus-visible {
  outline: 2px solid var(--d-blue);
  outline-offset: 2px;
}


/* ---- Mode-driven chrome visibility ---- */
/* In 2D the 3D rotate joystick / zoom dock and the showcase button are
   meaningless, so hide them. (Front/Back camera views live inside the
   joystick dock, so they go with it.) */
.designer3d.mode-2d .designer3d-dock--joystick {
  display: none;
}

.designer3d.mode-2d #designer-showcase-btn {
  display: none;
}

.designer3d.mode-2d .designer3d-canvas {
  /* (3D canvas stays visible — in 2D it IS the view, camera-locked) */
}

/* ==========================================================================
   LAYERS PANEL  (appended — owned by layerspanel.js)
   A left-side dock listing the active zone's items (top-most first). Click to
   select (two-way with the canvas handles), drag to restack, eye to hide,
   trash to delete. Apple-style rows on the shared glass dock.
   ========================================================================== */
.designer3d-dock--layers {
  /* Sits under the 3D|2D mode toggle (top-left). Mode dock ≈ 44px tall + 16 top. */
  top: calc(72px + env(safe-area-inset-top));
  left: calc(16px + env(safe-area-inset-left));
  width: 232px;
  max-width: calc(100vw - 32px);
  padding: 10px;
}

.designer3d-layers {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.designer3d-layers-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--d-muted);
  padding: 2px 4px 0;
}
.designer3d-layers-head .material-icons-sharp {
  font-size: 16px;
}

.designer3d-layers-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: min(46vh, 360px);
  overflow-y: auto;
  /* Hairline scrollbar that doesn't fight the glass. */
  scrollbar-width: thin;
}

.designer3d-layers-empty {
  margin: 0;
  padding: 10px 6px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--d-muted);
}

/* ---- A single layer row ---- */
.designer3d-layer {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
  border-radius: 10px;
  background: var(--d-pale);
  border: 1px solid transparent;
  cursor: grab;
  transition: background 0.14s ease, border-color 0.14s ease, opacity 0.14s ease;
  user-select: none;
}
.designer3d-layer:hover {
  background: var(--d-pale-hover);
}
.designer3d-layer.is-selected {
  background: var(--d-glass-strong);
  border-color: var(--d-blue);
  box-shadow: 0 0 0 3px var(--d-blue-ring);
}
.designer3d-layer.is-hidden {
  opacity: 0.5;
}
.designer3d-layer.is-dragging {
  opacity: 0.4;
  cursor: grabbing;
}
/* Drop indicators while reordering. */
.designer3d-layer.is-drop-before {
  box-shadow: inset 0 2px 0 var(--d-blue);
}
.designer3d-layer.is-drop-after {
  box-shadow: inset 0 -2px 0 var(--d-blue);
}

.designer3d-layer-handle {
  font-size: 18px;
  color: var(--d-muted);
  flex: 0 0 auto;
  cursor: grab;
}
.designer3d-layer-icon {
  font-size: 18px;
  color: var(--d-text);
  flex: 0 0 auto;
}

.designer3d-layer-label {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: 13px;
  color: var(--d-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.designer3d-layer-act {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--d-muted);
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}
.designer3d-layer-act .material-icons-sharp {
  font-size: 18px;
}
.designer3d-layer-act:hover {
  background: rgba(15, 23, 42, 0.06);
  color: var(--d-text);
}
.designer3d-layer-act--danger:hover {
  background: var(--d-danger-tint);
  color: var(--d-danger);
}

/* On small screens the layers dock would crowd the stage — collapse it to a
   slim, scrollable strip and let it share the top-left with the mode toggle. */
@media (max-width: 640px) {
  .designer3d-dock--layers {
    width: 196px;
  }
  .designer3d-layers-list {
    max-height: 38vh;
  }
}

/* ── Layers panel a11y (keyboard focus, non-colour selected cue, inline
   delete-confirm) — paired with layerspanel.js keyboard operability ─────── */
.designer3d-layer:focus-visible {
  outline: 2px solid rgba(120, 180, 255, 0.9);
  outline-offset: 2px;
}

/* Non-colour selected cue: a checkmark shown only on the selected row, plus a
   bolder label — so selection doesn't rely on the blue tint alone. */
.designer3d-layer-check {
  flex: 0 0 auto;
  font-size: 18px;
  color: rgba(120, 180, 255, 0.95);
  visibility: hidden;
}
.designer3d-layer.is-selected .designer3d-layer-check {
  visibility: visible;
}
.designer3d-layer.is-selected .designer3d-layer-label {
  font-weight: 700;
}

/* Inline two-step delete confirm: the armed trash button turns solid danger
   to signal 'tap again to delete'. */
.designer3d-layer-act--danger.is-confirming,
.designer3d-layer-act--danger.is-confirming:hover {
  background: rgba(255, 80, 80, 0.9);
  color: #fff;
}

/* ── Draft-restore toast + scene-load error (P0 reversibility/feedback) ──── */
.designer3d-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100vw - 32px);
  padding: 12px 16px;
  background: var(--d-glass-strong);
  border: 1px solid var(--d-border-line);
  border-radius: 12px;
  box-shadow: var(--d-dock-shadow);
  color: var(--d-text);
  font-size: 14px;
  backdrop-filter: blur(12px);
}
.designer3d-toast-action {
  appearance: none;
  border: none;
  background: var(--d-blue);
  color: #fff;
  font: inherit;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
}
.designer3d-toast-action:hover { background: var(--d-blue-dark); }
.designer3d-toast-action:focus-visible { outline: 2px solid var(--d-blue); outline-offset: 2px; }
.designer3d-toast-close {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--d-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.designer3d-scene-error {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 24px;
  color: var(--d-text);
  background: var(--d-glass-strong);
  backdrop-filter: blur(6px);
}
.designer3d-scene-error p { margin: 0; max-width: 32ch; }
.designer3d-scene-error a { color: var(--d-blue); font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
  .designer3d-toast { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   AI command bar — natural language → 3D design
   Apple-style UX (calm, one focal action, depth via blur not chrome) +
   Notion-style design (quiet neutral surface, soft border, text-first).
   Floats just above the bottom tool dock, centred.
   ═══════════════════════════════════════════════════════════════════════ */
.designer3d-ai {
  bottom: calc(84px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  width: min(560px, calc(100vw - 32px));
  padding: 6px;
  border-radius: 18px;
  /* A touch stronger than the tool docks so the input reads as a surface. */
  background: var(--d-glass-strong);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.designer3d-ai-form {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 4px 4px 12px;
}

.designer3d-ai-spark {
  flex: none;
  font-size: 20px;
  color: var(--d-blue);
  opacity: 0.85;
  transition: transform 0.4s ease, opacity 0.25s ease;
}

.designer3d-ai-input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 15px;
  line-height: 1.4;
  color: var(--d-text);
  padding: 9px 2px;
  outline: none;
}
.designer3d-ai-input::placeholder {
  color: var(--d-muted);
  /* gentle cross-fade as the placeholder hints rotate */
  transition: color 0.3s ease;
}
.designer3d-ai-input:disabled {
  color: var(--d-muted);
}

.designer3d-ai-submit {
  flex: none;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--d-blue);
  color: #fff;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
}
.designer3d-ai-submit .material-icons-sharp { font-size: 20px; }
.designer3d-ai-submit:hover { background: var(--d-blue-dark); }
.designer3d-ai-submit:active { transform: scale(0.92); }
.designer3d-ai-submit:disabled {
  opacity: 0.55;
  cursor: default;
  transform: none;
}

/* Focus: lift + accent ring, Apple-style soft expansion (no hard outline). */
.designer3d-ai:focus-within {
  box-shadow:
    var(--d-dock-shadow),
    0 0 0 3px var(--d-blue-ring);
  transform: translateX(-50%) translateY(-1px);
}

/* Busy: the spark pulses; the whole bar dims slightly. */
.designer3d-ai.is-busy { opacity: 0.96; }
.designer3d-ai.is-busy .designer3d-ai-spark {
  animation: designer3d-ai-pulse 1.1s ease-in-out infinite;
  color: var(--d-blue);
  opacity: 1;
}
@keyframes designer3d-ai-pulse {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.6; }
  50%      { transform: scale(1.18) rotate(8deg); opacity: 1; }
}

/* Inline status line — plain language, never an alert. */
.designer3d-ai-status {
  padding: 2px 14px 8px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--d-muted);
  animation: designer3d-ai-fade 0.2s ease;
}
.designer3d-ai-status[data-kind="thinking"] { color: var(--d-blue); }
.designer3d-ai-status[data-kind="done"]     { color: var(--d-success); }
.designer3d-ai-status[data-kind="error"]    { color: var(--d-danger); }
@keyframes designer3d-ai-fade {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Turnstile stays out of layout until it needs to challenge. */
.designer3d-ai-turnstile { display: flex; justify-content: center; }
.designer3d-ai-turnstile:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
  .designer3d-ai,
  .designer3d-ai-spark,
  .designer3d-ai-submit,
  .designer3d-ai-status { transition: none; animation: none; }
  .designer3d-ai.is-busy .designer3d-ai-spark { animation: none; }
}

/* Mobile: full-width bar that sits above the (scrolling) tool pill. */
@media (max-width: 640px) {
  .designer3d-ai {
    width: calc(100vw - 24px);
    bottom: calc(78px + env(safe-area-inset-bottom));
  }
  .designer3d-ai-input { font-size: 16px; } /* avoid iOS zoom-on-focus */
}