/* Embedded plate ? center canvas only; tools sit with native trash (bottom-right) */

#astraltie-plate-root {
  position: absolute;
  inset: 0;
  /* Same stack as plate-behind: tray may paint under the bead picker, never over it */
  z-index: 20;
  display: block;
  /* Match Fabric canvas backgroundColor */
  background: #ffffff;
  pointer-events: auto;
  /* Clip like Fabric .canvas-container after ?? ? do not cover header / promos */
  overflow: hidden;
  /* Allow two-finger pinch (bracelet upperCanvas uses touch listeners) */
  touch-action: none;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  color: #18181b;
}

#astraltie-plate-root.plate-hidden,
#astraltie-plate-root.plate-syncing {
  display: none !important;
}

/*
 * After ????: keep tray behind Fabric bracelet.
 * Plate beads canvas is hidden; tray bg stays; Fabric sits above with transparent bg.
 */
#astraltie-plate-root.plate-behind {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 20 !important;
  pointer-events: none;
  background: transparent !important;
}

#astraltie-plate-root.plate-behind .ap-tray-wrap {
  visibility: visible !important;
  opacity: 1 !important;
}

#astraltie-plate-root.plate-behind .ap-tray-canvas {
  visibility: hidden !important;
  pointer-events: none;
}

#astraltie-plate-root.plate-behind .ap-tray-bg {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: none;
}

/* Native host around Fabric is cb-bg-white ? clear it in bracelet-over-plate mode */
.ap-fabric-parent-clear {
  background: transparent !important;
  background-color: transparent !important;
}

.canvas-container.ap-fabric-over-plate {
  z-index: 45 !important;
  position: relative !important;
  background: transparent !important;
  background-color: transparent !important;
  /* Same clip as native Fabric ? tray must not paint over page chrome */
  overflow: hidden !important;
}

.canvas-container.ap-fabric-over-plate .lower-canvas,
.canvas-container.ap-fabric-over-plate .upper-canvas,
.canvas-container.ap-fabric-over-plate canvas {
  background: transparent !important;
  background-color: transparent !important;
  position: absolute !important;
  z-index: 1 !important;
  /* Keep source-over: multiply darkens beads and hides the light rope */
  mix-blend-mode: normal !important;
}

/* Tray must stay visible under Fabric (no multiply knockout needed if bg is clear) */
.canvas-container .ap-tray-wrap.ap-tray-in-fabric {
  position: absolute !important;
  transform: translate(-50%, -50%) !important;
  z-index: 0 !important;
  pointer-events: none !important;
  margin: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.canvas-container .ap-tray-wrap.ap-tray-in-fabric .ap-tray-bg {
  visibility: visible !important;
  opacity: 1 !important;
}

.canvas-container .ap-tray-wrap.ap-tray-in-fabric .ap-tray-canvas {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Native help + zoom (bottom-left) above plate overlay */
.ap-left-chrome {
  z-index: 50 !important;
  pointer-events: auto !important;
}

/*
 * Bead picker (mobile bottom sheet / desktop aside) above the plate tray ?
 * matches ???? stacking so a zoomed plate never covers selectable beads.
 */
.ap-materials-above-plate {
  z-index: 80 !important;
  pointer-events: auto !important;
}

/*
 * Mobile canvas chrome: Size/Total/wrist row (top) + Save & Preview dock (bottom).
 * Native uses z-20; plate/Fabric sit at 20/45 and were painting over them after 收拢成串.
 */
.cb-absolute.cb-top-1.cb-z-20,
.cb-absolute.cb-left-2\.5.cb-right-2\.5.cb-top-1 {
  z-index: 70 !important;
}
.cb-absolute.cb-left-1\/2.cb-bottom-1,
.cb-pointer-events-auto.cb-absolute.cb-left-1\/2.cb-bottom-1 {
  z-index: 70 !important;
}

/* JS-tagged overlays (fallback / extra roots) */
.ap-canvas-overlay-above-plate {
  z-index: 70 !important;
}
div.cb-absolute.ap-canvas-overlay-above-plate {
  position: absolute !important;
}

.ap-tray-wrap {
  /* Size set by JS to match Fabric rope diameter ? plateZoom.
   * Positioned to Fabric canvas-container center (alignTrayToFabricCenter). */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 207px;
  height: 207px;
  aspect-ratio: 1;
  flex-shrink: 0;
  overflow: visible;
  margin: 0;
}

.ap-tray-bg {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: #ffffff;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.ap-tray-canvas {
  position: absolute;
  /* left/top/size set by JS so overhang past the rim is not cropped */
  inset: -8%;
  width: 116%;
  height: 116%;
  z-index: 2;
  touch-action: none;
  overflow: visible;
}

/*
 * Fabric delete hit-test is fixed at native trash (bottom-right ~8/32px).
 * Desktop: tools sit LEFT of trash.
 * Mobile: tools sit ABOVE the native row (Save / Expand / Trash) ? see JS layoutPlateTools.
 */
#astraltie-plate-tools {
  position: absolute;
  right: 108px;
  bottom: 40px;
  z-index: 120;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  max-width: min(100%, 420px);
  pointer-events: none;
}

/*
 * Fabric ep() delete hit-test always uses OFFSET_BOTTOM_MOBILE=8 / OFFSET_RIGHT_MOBILE=8
 * (innerWidth < 1280), even when React moves the trash to bottom-[calc(0.5rem+70px)]
 * in expanded canvas mode. Pin the button to those offsets so visual ? hot zone.
 */
button.cb-absolute.cb-rounded-full.cb-bottom-2,
button.cb-absolute.cb-rounded-full.md\:cb-bottom-10,
button.ap-native-trash-raised {
  z-index: 130 !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform-origin: center center !important;
}

@media (max-width: 1279px) {
  button.cb-absolute.cb-rounded-full.cb-bottom-2,
  button.cb-absolute.cb-rounded-full.md\:cb-bottom-10,
  button.ap-native-trash-raised {
    /* Match en.OFFSET_*_MOBILE ? override expanded calc(0.5rem+70px) */
    bottom: 8px !important;
    right: 8px !important;
  }
  button[aria-label="Expand canvas area"],
  button[aria-label="Restore bead picker"] {
    bottom: 8px !important;
    right: 3.5rem !important;
    z-index: 110 !important;
  }
}

/* Expanded delete pill must sit above expand / Unstring */
button.ap-native-trash-raised.cb-bg-red-50,
button.ap-native-trash-raised.cb-bg-red-500,
button.ap-native-trash-raised.cb-animate-wiggle {
  z-index: 140 !important;
}

/* Hidden by JS while "Drag here to delete" is visible */
button.ap-expand-hidden-for-trash {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#astraltie-plate-tools > * {
  pointer-events: auto;
}

.ap-tool {
  width: 60px;
  height: 60px;
  border-radius: 9999px;
  border: 0;
  background: #fff;
  color: #0f172a;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s ease, background 0.15s ease;
}

.ap-tool:hover {
  background: #f8fafc;
}

.ap-tool:active {
  transform: scale(0.96);
}

.ap-tool img {
  width: 24px;
  height: 24px;
  pointer-events: none;
}

#astraltie-plate-tools .ap-tool.ap-tool--string {
  width: auto !important;
  min-width: 60px;
  max-width: none;
  height: auto !important;
  min-height: 60px;
  padding: 10px 18px !important;
  gap: 8px;
  flex: 0 0 auto;
  background: #0f172a;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  box-sizing: border-box;
  overflow: visible;
}

#astraltie-plate-tools .ap-tool.ap-tool--string span {
  flex: 0 0 auto;
  white-space: nowrap;
}

#astraltie-plate-tools .ap-tool.ap-tool--string:hover {
  background: #1e293b;
}

#astraltie-plate-tools .ap-tool.ap-tool--string img {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  filter: brightness(10);
}

#astraltie-plate-tools .ap-tool.ap-tool--string.is-unstring {
  background: #334155;
}

#astraltie-plate-tools.is-bracelet .ap-tool--plate-only {
  display: none;
}

#astraltie-plate-tools.is-plate .ap-tool--bracelet-only {
  display: none;
}

.ap-toast {
  position: fixed;
  left: 50%;
  bottom: 18%;
  transform: translateX(-50%);
  background: rgba(24, 24, 27, 0.92);
  color: #fff;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 13px;
  z-index: 2147483640;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
  max-width: 80vw;
  text-align: center;
}

/* Native banner is cb-z-[60]; plate tools/trash are 120?140 ? keep consent on top */
section[aria-label="Cookie preferences"][role="dialog"] {
  z-index: 200 !important;
}

.ap-toast.show {
  opacity: 1;
}

#astraltie-mode-toggle {
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #0f172a;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  margin-left: 8px;
  white-space: nowrap;
}

#astraltie-mode-toggle:hover {
  background: #f8fafc;
}

#astraltie-mode-toggle.is-plate {
  background: #0f172a;
  border-color: #0f172a;
  color: #fff;
}

@media (max-width: 900px) {
  /* Canvas section only ? clip like ???? (no cover header / bead sheet) */
  #astraltie-plate-root {
    max-height: none;
    overflow: hidden;
  }
  /*
   * Fallback before JS measures: clear of trash/expand/Save at bottom-2.
   * layoutPlateTools() raises further when canvas is expanded.
   */
  #astraltie-plate-tools {
    right: 8px;
    bottom: 64px;
    left: auto;
    gap: 8px;
    max-width: calc(100% - 16px);
  }
  /* Expand stays under trash; JS hides it while delete pill is expanded */
  button[aria-label="Expand canvas area"],
  button[aria-label="Restore bead picker"] {
    z-index: 110 !important;
  }
  .ap-tool {
    width: 44px;
    height: 44px;
  }
  #astraltie-plate-tools .ap-tool.ap-tool--string {
    width: auto !important;
    min-width: 44px;
    max-width: none;
    min-height: 44px;
    height: auto !important;
    padding: 8px 12px !important;
    gap: 5px;
    font-size: 12px;
  }
  #astraltie-plate-tools .ap-tool.ap-tool--string img {
    width: 18px;
    height: 18px;
  }
}