/* 2026-10-22 · Shotlab-inspired floating navigation for the CANVAS EDITOR only.
 * The boards landing page, 3D Studio, data model, editor scripts, and account
 * dialog remain unchanged. This layer is loaded last to overrule legacy
 * 64px silver navigation without touching shared glass/optics materials.
 */

/* The editor must fill the space formerly occupied by the 64px docked bar. */
html body:has(#editorView:not([hidden])) > main {
  height:100vh!important;
  height:100dvh!important;
}
html body:has(#editorView:not([hidden])) > .topbar,
html body[data-theme="light"]:has(#editorView:not([hidden])) > .topbar,
html body[data-theme="dark"]:has(#editorView:not([hidden])) > .topbar {
  position:fixed!important;
  inset:0 0 auto 0!important;
  height:0!important;
  min-height:0!important;
  padding:0!important;
  margin:0!important;
  display:block!important;
  overflow:visible!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  background-color:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  z-index:80!important;
  pointer-events:none!important;
}

/* Only the brand floats at the left, with no additional glass/card rim. */
html body:has(#editorView:not([hidden])) .topbar .brand-side {
  position:fixed!important;
  top:20px!important;
  left:22px!important;
  width:auto!important;
  max-width:calc(100vw - 230px)!important;
  height:42px!important;
  margin:0!important;
  padding:0!important;
  flex:none!important;
  display:flex!important;
  align-items:center!important;
  gap:0!important;
  pointer-events:none!important;
}
html body:has(#editorView:not([hidden])) .topbar .brand {
  display:inline-flex!important;
  align-items:center!important;
  gap:10px!important;
  width:max-content!important;
  max-width:100%!important;
  min-height:42px!important;
  pointer-events:auto!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  text-shadow:none!important;
  padding:0!important;
}
html body:has(#editorView:not([hidden])) .topbar .brand-mark {
  font-size:24px!important;
  font-weight:800!important;
  letter-spacing:.025em!important;
  white-space:nowrap!important;
}
html body:has(#editorView:not([hidden])) .topbar .brand-divider {
  height:23px!important;
}
html body:has(#editorView:not([hidden])) .topbar .brand-name strong {
  font-size:13px!important;
}
html body:has(#editorView:not([hidden])) .topbar .brand-name small {
  font-size:9px!important;
}
html body:has(#editorView:not([hidden])) .topbar :is(
  .product-switch,.product-label,.test-tag
) {
  display:none!important;
}

/* Keep title/edit and save/retry available, but remove them from the TOP
 * navigation. The compact status sits independently at the bottom centre.
 * Do not remove #boardHead: original persistence and safe-logout use it. */
html body:has(#editorView:not([hidden])) .topbar .board-head:not([hidden]) {
  position:fixed!important;
  left:50%!important;
  top:auto!important;
  bottom:17px!important;
  transform:translateX(-50%)!important;
  max-width:min(390px,calc(100vw - 220px))!important;
  padding:5px 12px!important;
  gap:8px!important;
  border-radius:999px!important;
  background:rgba(32,35,39,.58)!important;
  border:1px solid rgba(255,255,255,.14)!important;
  box-shadow:0 8px 24px rgba(0,0,0,.15)!important;
  backdrop-filter:blur(18px) saturate(130%)!important;
  -webkit-backdrop-filter:blur(18px) saturate(130%)!important;
  pointer-events:auto!important;
  z-index:81!important;
}
html body[data-theme="light"]:has(#editorView:not([hidden])) .topbar .board-head:not([hidden]) {
  background:rgba(223,228,224,.6)!important;
  border-color:rgba(255,255,255,.43)!important;
}
html body:has(#editorView:not([hidden])) .topbar .board-title {
  font-size:12px!important;
  min-width:0!important;
  max-width:175px!important;
  width:175px!important;
  text-align:left!important;
  text-overflow:ellipsis!important;
}
html body:has(#editorView:not([hidden])) .topbar .save-status {
  cursor:pointer!important;
}

/* Right: appearance symbol · 3D Studio symbol · circular avatar.
 * Three independent floating controls, never a full-width bar or container. */
html body:has(#editorView:not([hidden])) .topbar .top-actions {
  position:fixed!important;
  top:19px!important;
  right:22px!important;
  width:max-content!important;
  height:44px!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  gap:10px!important;
  padding:0!important;
  margin:0!important;
  background:none!important;
  border:0!important;
  box-shadow:none!important;
  pointer-events:auto!important;
}
html body:has(#editorView:not([hidden])) .topbar .canvas-nav-icon,
html body:has(#editorView:not([hidden])) .topbar .canvas-account-control #canvasAccountTrigger,
html body[data-theme="light"]:has(#editorView:not([hidden])) .topbar .canvas-account-control #canvasAccountTrigger {
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:none!important;
  width:44px!important;
  min-width:44px!important;
  height:44px!important;
  min-height:44px!important;
  max-height:44px!important;
  padding:0!important;
  margin:0!important;
  gap:0!important;
  border-radius:50%!important;
  color:#eff0eb!important;
  border:1px solid rgba(255,255,255,.17)!important;
  background:rgba(29,31,35,.57)!important;
  background-image:none!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13),
    0 7px 19px rgba(0,0,0,.16)!important;
  backdrop-filter:blur(19px) saturate(135%)!important;
  -webkit-backdrop-filter:blur(19px) saturate(135%)!important;
  overflow:hidden!important;
  text-decoration:none!important;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease!important;
}
html body[data-theme="light"]:has(#editorView:not([hidden])) .topbar .canvas-nav-icon,
html body[data-theme="light"]:has(#editorView:not([hidden])) .topbar .canvas-account-control #canvasAccountTrigger {
  color:#333b37!important;
  border-color:rgba(255,255,255,.55)!important;
  background:rgba(222,229,222,.64)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72),
    0 7px 19px rgba(28,37,30,.12)!important;
}
html body:has(#editorView:not([hidden])) .topbar .canvas-nav-icon:hover,
html body:has(#editorView:not([hidden])) .topbar .canvas-account-control #canvasAccountTrigger:hover,
html body:has(#editorView:not([hidden])) .topbar .canvas-account-control #canvasAccountTrigger[aria-expanded="true"] {
  transform:translateY(-1px)!important;
  color:var(--accent)!important;
  border-color:rgba(238,199,109,.62)!important;
  box-shadow:0 7px 18px rgba(0,0,0,.18),
    0 0 0 1px rgba(238,199,109,.17)!important;
}
html body:has(#editorView:not([hidden])) .topbar .canvas-nav-icon svg,
html body:has(#editorView:not([hidden])) .topbar .canvas-avatar-trigger svg {
  flex:none!important;
  display:block!important;
  pointer-events:none!important;
}
html body:has(#editorView:not([hidden])) .topbar .canvas-avatar-image:not([hidden]){
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  border-radius:50%!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
}
html body:has(#editorView:not([hidden])) .topbar .canvas-account-control {
  display:flex!important;
  align-items:center!important;
  flex-shrink:0!important;
  position:relative!important;
}
html body:has(#editorView:not([hidden])) .topbar .canvas-account-control #canvasAccountTrigger{
  position:relative!important;
}
html body:has(#editorView:not([hidden])) .topbar .canvas-account-menu{
  top:calc(100% + 12px)!important;
  right:0!important;
  pointer-events:auto!important;
}

/* Navigation leaves the centre/top row free for the original editing tools.
 * This prevents both the left palette and the upper canvas toolbar from
 * sitting directly beneath the new floating brand/controls. */
html body:has(#editorView:not([hidden])) .editor-view > .palette.glass{
  top:82px!important;
}
html body:has(#editorView:not([hidden])) .editor-view > .canvas-shell > .canvas-toptools.glass{
  top:78px!important;
  right:18px!important;
  left:auto!important;
  transform:none!important;
  max-width:calc(100% - 115px)!important;
}
/* Retain small-screen horizontal scroll for toolbar actions, never cover
 * the global nav or let the three top-right controls wrap. */
@media(max-width:780px){
  html body:has(#editorView:not([hidden])) .topbar .brand-side{
    left:12px!important;top:13px!important;max-width:calc(100vw - 182px)!important;
  }
  html body:has(#editorView:not([hidden])) .topbar .brand-mark{font-size:20px!important}
  html body:has(#editorView:not([hidden])) .topbar .brand-name,
  html body:has(#editorView:not([hidden])) .topbar .brand-divider{display:none!important}
  html body:has(#editorView:not([hidden])) .topbar .top-actions{
    top:12px!important;right:12px!important;gap:7px!important;
  }
  html body:has(#editorView:not([hidden])) .topbar .canvas-nav-icon,
  html body:has(#editorView:not([hidden])) .topbar .canvas-account-control #canvasAccountTrigger{
    width:40px!important;min-width:40px!important;
    height:40px!important;min-height:40px!important;
  }
  html body:has(#editorView:not([hidden])) .editor-view > .canvas-shell > .canvas-toptools.glass{
    left:10px!important;right:10px!important;top:76px!important;
    width:auto!important;max-width:calc(100% - 20px)!important;
    transform:none!important;overflow:auto!important;
  }
  html body:has(#editorView:not([hidden])) .editor-view > .palette.glass{top:148px!important}
  html body:has(#editorView:not([hidden])) .topbar .board-head:not([hidden]){
    bottom:77px!important;
    max-width:calc(100vw - 28px)!important;
  }
}
@media(prefers-reduced-motion:reduce){
  html body:has(#editorView:not([hidden])) .topbar .canvas-nav-icon,
  html body:has(#editorView:not([hidden])) .topbar .canvas-account-control #canvasAccountTrigger{
    transition:none!important;
  }
}

/* 2026-10-22 · Inspector floats ON the infinite canvas, below the avatar.
 * Source order + the #editorView / #inspector selectors deliberately override
 * earlier light-silver position:relative!important and fixed-width flex pane.
 * Do not create a new panel or change the account menu/selection handlers. */
html body:has(#editorView:not([hidden])) #editorView > #inspector.glass,
html body[data-theme="light"]:has(#editorView:not([hidden])) #editorView > #inspector.glass,
html body[data-theme="dark"]:has(#editorView:not([hidden])) #editorView > #inspector.glass{
  position:absolute!important;
  top:82px!important; /* floating avatar: top 19 + 44 high + 19 gap */
  right:22px!important;
  bottom:20px!important;
  left:auto!important;
  width:286px!important;
  min-width:0!important;
  max-width:calc(100% - 44px)!important;
  height:auto!important;
  max-height:calc(100% - 102px)!important;
  margin:0!important;
  padding:0!important;
  flex:none!important;
  align-self:auto!important;
  border-radius:19px!important;
  overflow:hidden!important;
  z-index:12!important;
  box-sizing:border-box!important;
}
/* Float over the viewport: its dimensions should never reserve a right column. */
html body:has(#editorView:not([hidden])) #editorView > #canvasShell.canvas-shell{
  flex:1 1 100%!important;
  min-width:0!important;
  width:100%!important;
}
/* Mirror panel anchor after pressing "收起属性", keeping "展开属性"
 * below the avatar instead of reverting to the viewport's top corner. */
html body:has(#editorView:not([hidden])) #editorView > #expandInspector{
  position:absolute!important;
  top:82px!important;
  right:22px!important;
  bottom:auto!important;
  left:auto!important;
  z-index:13!important;
  border-radius:12px!important;
}
/* The existing top action toolbar must remain clickable and outside the
 * floating inspector. It is NOT an extra header or a reserved canvas column. */
@media(min-width:781px){
  html body:has(#editorView:not([hidden])) #editorView:not(.inspector-closed) > #canvasShell > .canvas-toptools.glass{
    right:322px!important;
    max-width:calc(100% - 426px)!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scrollbar-width:none;
  }
  html body:has(#editorView:not([hidden])) #editorView:not(.inspector-closed) > #canvasShell > .canvas-toptools.glass::-webkit-scrollbar{
    display:none;
  }
}
@media(max-width:780px){
  /* Respect the original compact/mobile inspector hiding rule. */
  html body:has(#editorView:not([hidden])) #editorView > #expandInspector{
    top:73px!important;
    right:12px!important;
  }
}

/* 2026-10-22 · Studio Canvas follow-up: floating dock geometry.
 * CSS positions are fed by canvas-dock-layout-v1.js using the real canvas
 * viewport and inspector rectangles. They work for both dark/light modes
 * and avoid accumulating one-off offsets each time a pane is toggled.
 */

/* Left palette stays centred vertically even when the window is resized. */
html body:has(#editorView:not([hidden])) #editorView > .palette.glass,
html body[data-theme="light"]:has(#editorView:not([hidden])) #editorView > .palette.glass{
  position:absolute!important;
  top:50%!important;
  bottom:auto!important;
  transform:translateY(-50%)!important;
  max-height:calc(100% - 24px)!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  scrollbar-width:thin;
  scrollbar-color:var(--edge) transparent;
}
html body:has(#editorView:not([hidden])) #canvasHomeBtn .canvas-home-icon{
  flex:none;
  display:block;
}

/* Toolbar is centred in the EMPTY corridor from viewport left to inspector
 * LEFT border. When collapsed, the corridor expands to the entire viewport.
 * The toolbar's parent is #canvasShell, hence the local-coordinate variable. */
html body:has(#editorView:not([hidden])) #editorView:not(.inspector-closed) > #canvasShell > .canvas-toptools.glass,
html body[data-theme="light"]:has(#editorView:not([hidden])) #editorView:not(.inspector-closed) > #canvasShell > .canvas-toptools.glass,
html body:has(#editorView:not([hidden])) #editorView > #canvasShell > .canvas-toptools.glass,
html body[data-theme="light"]:has(#editorView:not([hidden])) #editorView > #canvasShell > .canvas-toptools.glass{
  position:absolute!important;
  left:var(--canvas-dock-top-center,50%)!important;
  right:auto!important;
  transform:translateX(-50%)!important;
  max-width:var(--canvas-dock-top-max,calc(100% - 28px))!important;
  width:max-content!important;
  min-width:0!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scrollbar-width:none;
}
html body:has(#editorView:not([hidden])) #editorView > #canvasShell > .canvas-toptools.glass::-webkit-scrollbar{
  display:none;
}

/* Zoom stays at the bottom-right of the accessible canvas portion, moving
 * left when the inspector overlays that corner. */
html body:has(#editorView:not([hidden])) #editorView > #canvasShell > .zoom-controls.glass,
html body[data-theme="light"]:has(#editorView:not([hidden])) #editorView > #canvasShell > .zoom-controls.glass{
  position:absolute!important;
  left:auto!important;
  right:var(--canvas-dock-bottom-right,22px)!important;
  bottom:20px!important;
  top:auto!important;
  transform:none!important;
}

/* The status / board title chip follows the SAME usable corridor centre.
 * It is intentionally still clickable for the existing save/retry flow. */
html body:has(#editorView:not([hidden])) .topbar .board-head:not([hidden]),
html body[data-theme="light"]:has(#editorView:not([hidden])) .topbar .board-head:not([hidden]){
  left:var(--canvas-dock-status-center,50%)!important;
  right:auto!important;
  transform:translateX(-50%)!important;
}

/* Same logo gold in both themes. No artificial dark-only desaturation. */
html body[data-theme="light"]:has(#editorView:not([hidden])) .topbar :is(.brand-mark,.brand-name strong),
html body[data-theme="dark"]:has(#editorView:not([hidden])) .topbar :is(.brand-mark,.brand-name strong){
  color:#f1cb7d!important;
}

/* Smaller floating actions. The TWO left symbols have NO borders or boxes;
 * the rightmost avatar keeps its circular glass container. */
html body:has(#editorView:not([hidden])) .topbar .top-actions{
  height:36px!important;
  gap:8px!important;
}
html body:has(#editorView:not([hidden])) .topbar .canvas-nav-icon,
html body:has(#editorView:not([hidden])) .topbar .canvas-account-control #canvasAccountTrigger,
html body[data-theme="light"]:has(#editorView:not([hidden])) .topbar .canvas-nav-icon,
html body[data-theme="light"]:has(#editorView:not([hidden])) .topbar .canvas-account-control #canvasAccountTrigger{
  width:36px!important;
  min-width:36px!important;
  height:36px!important;
  min-height:36px!important;
  max-height:36px!important;
}
html body:has(#editorView:not([hidden])) .topbar .canvas-nav-icon svg{
  width:17px!important;
  height:17px!important;
}
html body:has(#editorView:not([hidden])) .topbar .canvas-avatar-trigger svg{
  width:19px!important;
  height:19px!important;
}
html body:has(#editorView:not([hidden])) .topbar #themeToggle,
html body:has(#editorView:not([hidden])) .topbar #canvasStudioLink,
html body[data-theme="light"]:has(#editorView:not([hidden])) .topbar #themeToggle,
html body[data-theme="light"]:has(#editorView:not([hidden])) .topbar #canvasStudioLink{
  border:0!important;
  outline-offset:2px;
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
html body:has(#editorView:not([hidden])) .topbar #themeToggle:hover,
html body:has(#editorView:not([hidden])) .topbar #canvasStudioLink:hover{
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:var(--accent)!important;
}
@media(max-width:780px){
  html body:has(#editorView:not([hidden])) #editorView > .palette.glass{
    top:50%!important;
    transform:translateY(-50%)!important;
  }
  html body:has(#editorView:not([hidden])) #editorView > #canvasShell > .canvas-toptools.glass{
    left:var(--canvas-dock-top-center,50%)!important;
    right:auto!important;
    transform:translateX(-50%)!important;
    max-width:var(--canvas-dock-top-max,calc(100% - 20px))!important;
    width:max-content!important;
  }
  html body:has(#editorView:not([hidden])) .topbar .top-actions{
    height:36px!important;
  }
}

/* Hide the old refractive perimeter canvas on the two intentionally
 * borderless icons. Account avatar and all other official glass controls
 * keep their original material / hover behavior. */
html body:has(#editorView:not([hidden])) .topbar :is(#themeToggle,#canvasStudioLink)>.canvas-glass-render{
  display:none!important;
}

/* 2026-10-22 · CRITICAL homepage regression fix.
 * The logged-in avatar is a real image (possibly a large data URL).
 * Previously its width/height/object-fit were only specified inside
 * :has(#editorView:not([hidden])). On the boards landing page the unbounded
 * <img> used its native image dimensions and covered almost the whole page.
 *
 * Both screens share the SAME account trigger and menu. Contain the image
 * unconditionally; never let an account photo affect navbar flex sizing.
 */
html body .topbar .canvas-account-control{
  position:relative!important;
  display:inline-flex!important;
  flex:0 0 auto!important;
  align-items:center!important;
  min-width:0!important;
}
html body .topbar .canvas-account-control #canvasAccountTrigger,
html body[data-theme="light"] .topbar .canvas-account-control #canvasAccountTrigger,
html body[data-theme="dark"] .topbar .canvas-account-control #canvasAccountTrigger{
  box-sizing:border-box!important;
  position:relative!important;
  display:inline-flex!important;
  justify-content:center!important;
  align-items:center!important;
  width:36px!important;
  min-width:36px!important;
  max-width:36px!important;
  height:36px!important;
  min-height:36px!important;
  max-height:36px!important;
  padding:0!important;
  margin:0!important;
  flex:0 0 36px!important;
  border-radius:50%!important;
  overflow:hidden!important;
}
html body .topbar #canvasAccountAvatar,
html body[data-theme="light"] .topbar #canvasAccountAvatar,
html body[data-theme="dark"] .topbar #canvasAccountAvatar{
  display:block!important;
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  aspect-ratio:1 / 1!important;
  border-radius:50%!important;
  overflow:hidden!important;
  pointer-events:none!important;
}
/* Existing SVG/IMG [hidden] must defeat the high-specificity display:block
 * rules used for liquid-glass icons, in BOTH the list and editing screens. */
html body .topbar #canvasAccountAvatar[hidden],
html body .topbar .canvas-avatar-placeholder[hidden]{
  display:none!important;
}

/* Boards list remains a NORMAL full-width homepage, not a cropped floating
 * editor header. The overlay toolbar from the image must not own page width. */
html body:has(#boardsView:not([hidden])) > .topbar{
  box-sizing:border-box!important;
  position:relative!important;
  inset:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  height:64px!important;
  padding-inline:22px!important;
  overflow:visible!important;
}
html body:has(#boardsView:not([hidden])) > .topbar .brand-side{
  min-width:0!important;
  flex:1 1 auto!important;
}
html body:has(#boardsView:not([hidden])) > .topbar .top-actions{
  box-sizing:border-box!important;
  position:relative!important;
  inset:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  flex:0 0 auto!important;
  min-width:0!important;
  width:auto!important;
  max-width:136px!important;
  height:36px!important;
  gap:8px!important;
  margin-left:auto!important;
}
html body:has(#boardsView:not([hidden])) > .topbar .canvas-nav-icon{
  box-sizing:border-box!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 36px!important;
  width:36px!important;
  min-width:36px!important;
  max-width:36px!important;
  height:36px!important;
  min-height:36px!important;
  max-height:36px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:50%!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
html body:has(#boardsView:not([hidden])) > .topbar .canvas-nav-icon svg{
  display:block!important;
  width:17px!important;
  height:17px!important;
  flex:none!important;
}
html body:has(#boardsView:not([hidden])) > .topbar :is(.brand-mark,.brand-name strong){
  color:#f1cb7d!important;
}
/* Prevent legacy LIGHT-theme display:flex!important on .editor-view from
 * overriding [hidden] while the list is displayed. The inverse protects the
 * editor from a list overlay and retains the original scene geometry. */
html body #editorView[hidden],
html body[data-theme="light"] #editorView[hidden],
html body[data-theme="dark"] #editorView[hidden],
html body #boardsView[hidden]{
  display:none!important;
}
@media(max-width:780px){
  html body:has(#boardsView:not([hidden])) > .topbar{
    padding-inline:12px!important;
    gap:8px!important;
  }
  html body:has(#boardsView:not([hidden])) > .topbar .brand-side{
    gap:8px!important;
  }
  html body:has(#boardsView:not([hidden])) > .topbar .brand-name,
  html body:has(#boardsView:not([hidden])) > .topbar .test-tag{
    display:none!important;
  }
}