/* One operational status language for 3D Studio and Infinite Canvas.
 * HUD center is relative to the actual operation viewport (not the window).
 * The source material deliberately matches Studio's left viewport toolbox. */
html body#daailokStudio #viewport .interaction-hint:not([hidden]){
  display:block!important;
  box-sizing:border-box!important;
  left:var(--daailok-viewport-hud-center-x,50%)!important;
  right:auto!important;
  bottom:13px!important;
  top:auto!important;
  transform:translateX(-50%)!important;
  width:min(450px,calc(var(--daailok-viewport-hud-visible-width,100%) - 36px))!important;
  max-width:calc(100% - 26px)!important;
  min-width:0!important;
  height:34px!important;
  min-height:34px!important;
  padding:0 15px!important;
  border-radius:9999px!important;
  border:1px solid rgba(255,255,255,.15)!important;
  background:linear-gradient(160deg,rgba(31,39,45,.965),rgba(17,22,26,.965))!important;
  color:#e1e4e1!important;
  box-shadow:0 18px 38px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.12)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  overflow:hidden!important;
  pointer-events:none!important;
  z-index:210!important;
}
html body#daailokStudio #viewport .interaction-hint[hidden]{display:none!important}
/* A stored recording or generation may deliberately hide the ordinary hint.
   Only a new status event is allowed to reveal the same existing capsule. */
html[data-studio-layout=normal] body#daailokStudio .studio[data-light-shots=open] #viewport .interaction-hint.daailok-status-active:not([hidden]){
  display:block!important;
}
html[data-studio-theme=light] body#daailokStudio #viewport .interaction-hint{
  border-color:rgba(255,255,255,.38)!important;
  background:linear-gradient(160deg,rgba(142,159,169,.45),rgba(50,66,78,.71))!important;
  color:#f2f4f3!important;
  box-shadow:0 9px 22px rgba(29,43,51,.18),inset 0 1px 0 rgba(255,255,255,.38)!important;
}
/* Keep existing scrolling hint in the same pill; transient operations replace
   its text rather than creating a second bottom notification. */
html body#daailokStudio #viewport .interaction-hint.daailok-status-active .interaction-hint-roller,
html body#daailokStudio #viewport .interaction-hint.daailok-status-active .interaction-hint-measure,
html body#daailokStudio #viewport .interaction-hint.daailok-status-active > .interaction-hint-line{
  opacity:0!important;
  visibility:hidden!important;
}
html body#daailokStudio #viewport .interaction-hint .daailok-status-message{
  position:absolute;
  z-index:4;
  inset:0 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  line-height:1.4;
  color:inherit;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
html body#daailokStudio #viewport .interaction-hint[data-notice-error=true] .daailok-status-message{color:#f1b1a8}
html body#daailokStudio #toast{display:none!important}

/* Dark 3D status capsule: use the *computed* material of the left toolbox.
 * editor-refinement.css uses a higher-specificity html/body selector than the
 * older .viewport-toolbox background. Merely copying that obsolete gradient
 * made the status dock look solid blue-gray beside the charcoal glass tools.
 * Apply one common material rule to BOTH surfaces; keep separate geometry.
 * Light theme's dedicated refractive overlay is deliberately untouched. */
html:not([data-studio-theme=light]) body#daailokStudio #viewport{
  --daailok-viewport-chrome-surface:rgba(17,19,21,.88);
  --daailok-viewport-chrome-edge:rgba(224,232,240,.14);
  --daailok-viewport-chrome-shadow:var(--ds-studio-editor-shadow,
    0 8px 24px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.035));
}
html:not([data-studio-theme=light]) body#daailokStudio #viewport :is(.viewport-toolbox,.interaction-hint:not([hidden])){
  background:var(--daailok-viewport-chrome-surface)!important;
  border-color:var(--daailok-viewport-chrome-edge)!important;
  box-shadow:var(--daailok-viewport-chrome-shadow)!important;
  backdrop-filter:blur(20px)!important;
  -webkit-backdrop-filter:blur(20px)!important;
}

/* Light 3D status capsule must use the actual final left-toolbox material.
 * studio-light-workspace.css makes the left rail smoky gray (#58585866);
 * the old guide had an unrelated blue-gray gradient, pseudo-gloss and
 * a scene-refraction canvas (the toolbox does not). One material for both.
 * Keep the status-only capsule geometry, position and readable message. */
html[data-studio-theme=light] body#daailokStudio #viewport{
  --daailok-viewport-light-chrome-surface:#58585866;
  --daailok-viewport-light-chrome-edge:#ededed4d;
  --daailok-viewport-light-chrome-shadow:inset 0 1px 0 #fff3;
}
html[data-studio-theme=light] body#daailokStudio #viewport .viewport-toolbox,
html[data-studio-theme=light] body#daailokStudio #viewport .interaction-hint:not([hidden]),
html[data-studio-theme=light] body#daailokStudio #viewport .interaction-hint[data-light-glass-ready]:not([hidden]){
  background:var(--daailok-viewport-light-chrome-surface)!important;
  border-color:var(--daailok-viewport-light-chrome-edge)!important;
  box-shadow:var(--daailok-viewport-light-chrome-shadow)!important;
  backdrop-filter:blur(20px)!important;
  -webkit-backdrop-filter:blur(20px)!important;
}
/* The toolbox does not render the extra silver capsule highlights. */
html[data-studio-theme=light] body#daailokStudio #viewport .interaction-hint::before,
html[data-studio-theme=light] body#daailokStudio #viewport .interaction-hint::after{
  content:none!important;
  background:none!important;
}
html[data-studio-theme=light] body#daailokStudio #viewport .interaction-hint>canvas.light-panel-optics{
  display:none!important;
}

/* Canvas: the shared dock layout calculates this bottom offset from the zoom
   controls' actual rectangle in both themes and inspector configurations. */
html body:has(#editorView:not([hidden])) .topbar #boardHead.canvas-status-dock:not([hidden]){
  position:fixed!important;
  left:var(--canvas-dock-status-center,50%)!important;
  right:auto!important;
  top:auto!important;
  bottom:var(--canvas-dock-status-bottom,22px)!important;
  transform:translateX(-50%)!important;
  box-sizing:border-box!important;
  height:35px!important;
  min-height:35px!important;
  border-radius:9999px!important;
}
html body[data-theme=dark]:has(#editorView:not([hidden])) .topbar #boardHead.canvas-status-dock:not([hidden]){
  border-color:rgba(255,255,255,.15)!important;
  background:linear-gradient(160deg,rgba(29,37,43,.92),rgba(17,23,27,.90))!important;
  box-shadow:0 18px 38px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.12)!important;
}
html body[data-theme=light]:has(#editorView:not([hidden])) .topbar #boardHead.canvas-status-dock:not([hidden]){
  border-color:rgba(255,255,255,.38)!important;
  background:linear-gradient(160deg,rgba(142,159,169,.45),rgba(50,66,78,.71))!important;
  box-shadow:0 9px 22px rgba(29,43,51,.18),inset 0 1px 0 rgba(255,255,255,.38)!important;
}
html body:has(#editorView:not([hidden])) #boardHead.daailok-status-active .canvas-status-scroll{
  opacity:0!important;
}
html body:has(#editorView:not([hidden])) #boardHead .daailok-status-message{
  position:absolute;
  z-index:4;
  inset:0 115px 0 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:11px;
  color:var(--text);
  pointer-events:none;
}
html body[data-theme=light]:has(#editorView:not([hidden])) #boardHead .daailok-status-message{color:#27343b}
html body:has(#editorView:not([hidden])) #boardHead[data-notice-error=true] .daailok-status-message{color:#e9978b}
@media(max-width:780px){
  html body:has(#editorView:not([hidden])) .topbar #boardHead.canvas-status-dock:not([hidden]){
    bottom:var(--canvas-dock-status-bottom,22px)!important;
    width:min(300px,calc(100vw - 42px))!important;
  }
}


/* 2026-10-29 · one coin: retain the round rim + small square core. */
.daailok-points-coin,.free-coin-icon{width:14px;height:14px;flex:none;color:#edc46e!important;stroke:#edc46e}
body[data-theme=light] .daailok-points-coin,body[data-theme=light] .free-coin-icon{color:#c69632!important;stroke:#c69632}
.creation-quality-btn .creation-price{display:none!important}
.creation-quality-options .creation-quality-btn{justify-content:center!important}
.creation-actions :is(#creationInsertBtn,#creationReplaceBtn){display:inline-flex!important;align-items:center;justify-content:center;gap:11px;white-space:nowrap}
.daailok-world-price,.daailok-points-price{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;font-size:12px;font-weight:600;line-height:1;color:#edc46e!important}
.daailok-world-price[hidden]{display:none!important}
.daailok-world-amount{font-variant-numeric:tabular-nums}
body[data-theme=light] .daailok-world-price,body[data-theme=light] .daailok-points-price{color:#bd8d2c!important}
/* The left palette and bottom capsule now share the same surface, rim and optical blur. */
html body[data-theme=dark]:has(#editorView:not([hidden])) #editorView > .palette.glass,
html body[data-theme=dark]:has(#editorView:not([hidden])) .topbar #boardHead.canvas-status-dock:not([hidden]){
 background:rgba(17,19,21,.88)!important;border:1px solid rgba(224,232,240,.14)!important;
 box-shadow:0 8px 24px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.035)!important;
 backdrop-filter:blur(20px) saturate(140%)!important;-webkit-backdrop-filter:blur(20px) saturate(140%)!important;
}
html body[data-theme=light]:has(#editorView:not([hidden])) #editorView > .palette.glass,
html body[data-theme=light]:has(#editorView:not([hidden])) .topbar #boardHead.canvas-status-dock:not([hidden]){
 background:#58585866!important;border:1px solid #ededed4d!important;
 box-shadow:inset 0 1px 0 #fff3!important;
 backdrop-filter:blur(20px) saturate(140%)!important;-webkit-backdrop-filter:blur(20px) saturate(140%)!important;
}
html body:has(#editorView:not([hidden])) .topbar #boardHead.canvas-status-dock:not([hidden]){border-radius:var(--ds-radius-pill)!important;max-height:35px!important;overflow:hidden!important}
/* No lingering gold textarea outline when editing text; selected nodes stay neutral. */
html body #nodesLayer .canvas-node.text-node .node-text,
html body #nodesLayer .canvas-node.text-node .node-text:focus,
html body #nodesLayer .canvas-node.text-node .node-text:focus-visible{
 outline:none!important;border:1px solid transparent!important;box-shadow:none!important;background:transparent!important;
}
html body #nodesLayer .canvas-node.text-node.selected{
 border-color:var(--edge)!important;box-shadow:0 12px 40px rgba(0,0,0,.19)!important
}
/* The spinner is an indeterminate phase indicator, never an invented percentage. */
.canvas-generation-indicator{width:100%;height:100%;min-height:100px;display:flex;flex-direction:column;gap:15px;align-items:center;justify-content:center;text-align:center;color:var(--muted);font-size:11px;padding:14px;line-height:1.55}
.canvas-generation-spinner{width:40px;height:40px;flex:none;border-radius:50%;border:2px solid rgba(237,196,110,.14);border-top-color:#edc46e;border-right-color:rgba(237,196,110,.65);animation:daailok-canvas-spin .9s linear infinite}
.canvas-generation-indicator.failed .canvas-generation-spinner{animation:none;border-color:#e68f86;position:relative}
.canvas-generation-indicator.failed .canvas-generation-spinner:after{content:"!";position:absolute;inset:0;display:grid;place-items:center;color:#e68f86;font-size:22px}
.canvas-generation-indicator.pending .canvas-generation-spinner{animation-duration:2.4s}
@keyframes daailok-canvas-spin{to{transform:rotate(360deg)}}
#canvasGeneratorSubmit{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:10px!important;white-space:nowrap!important}
#canvasGeneratorSubmit .daailok-points-price{font-size:11px}
@media(prefers-reduced-motion:reduce){.canvas-generation-spinner{animation-duration:2.5s}}


/* Confirmed-failure retry: keep the control inside the original media card,
   or in a text card linked to that failed output. No added dialogue or toast. */
#nodesLayer .canvas-node .canvas-generation-retry{
 appearance:none!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;
 position:relative;z-index:5;min-height:28px;padding:6px 13px!important;
 border:1px solid rgba(237,196,110,.44)!important;border-radius:var(--ds-radius-pill)!important;
 background:rgba(225,184,88,.09)!important;color:#edc46e!important;
 font-size:12px!important;line-height:1.1!important;white-space:nowrap;cursor:pointer;
 box-shadow:none!important;transition:background-color .18s ease,border-color .18s ease;
}
#nodesLayer .canvas-node .canvas-generation-retry:hover{
 background:rgba(225,184,88,.19)!important;border-color:rgba(237,196,110,.8)!important;
}
#nodesLayer .canvas-node .canvas-generation-retry:focus-visible{
 outline:2px solid #edc46e!important;outline-offset:3px;
}
#nodesLayer .canvas-node .canvas-retry-text{
 position:absolute;right:12px;bottom:11px;max-width:calc(100% - 24px);
}
#nodesLayer .canvas-node.text-node:has(.canvas-retry-text) .node-text{padding-bottom:45px!important}
html body[data-theme=light] #nodesLayer .canvas-node .canvas-generation-retry{color:#a97924!important;border-color:rgba(169,121,36,.5)!important}