/* AI 工作台 desktop performance layer — keeps the visual language while reducing expensive paints during interaction. */
:root{
  --sd-desktop-inline:clamp(14px,2.1vw,42px);
  --sd-desktop-block:clamp(12px,1.45vw,28px);
}

/* Long lists render only when they approach the viewport. This is intentionally limited to repeatable cards/items. */
@media (min-width:761px){
  :where(.project-card,.story-card,.market-card,.guide-card,.admin-card,.sr-job,.api-history-item,.ledger-row,.credit-ledger>*,.cards-list>*,.admin-users>*){
    content-visibility:auto;
    contain-intrinsic-size:auto 220px;
  }

  /* Stable layout containment on self-contained visual cards cuts invalidation without clipping menus/tooltips. */
  :where(.mode-card,.price-card,.credit-summary-card,.api-quota-widget,.promo-strip,.project-card,.story-card,.market-card,.sr-job){
    contain:layout paint;
  }

  /* Avoid scroll chaining into the page when a panel is intentionally scrollable. */
  :where(.dashboard-main,.home-main,.story-workbench-main,.copilot-stream,.credit-ledger,.table-wrap,.market-drawer-card,.site-dialog,.modal-card){
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }

  /* Heavy glass is visually preserved while idle. During wheel/trackpad scrolling or resize we swap it for opaque surfaces. */
  html.sd-is-scrolling :where(.dashboard-topbar,.premium-topbar,.workspace-site-topbar,.home-header,.topbar,.market-drawer,.market-drawer-head,.story-copilot,.copilot-reopen,.hero-media-glass,.hero-sound-btn,.auth-card-v630,.auth-status-row span,.dashboard-command,.mode-card,.film-showcase,.dashboard-utility,.dashboard-lower-grid,.film-edge,.ambient-vignette,.ghost,.theme-toggle),
  html.sd-is-resizing :where(.dashboard-topbar,.premium-topbar,.workspace-site-topbar,.home-header,.topbar,.market-drawer,.market-drawer-head,.story-copilot,.copilot-reopen,.hero-media-glass,.hero-sound-btn,.auth-card-v630,.auth-status-row span,.dashboard-command,.mode-card,.film-showcase,.dashboard-utility,.dashboard-lower-grid,.film-edge,.ambient-vignette,.ghost,.theme-toggle){
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }

  html.sd-is-scrolling :where(.mode-card,.project-card,.story-card,.market-card,.admin-card,.price-card,.credit-summary-card,.promo-strip),
  html.sd-is-resizing :where(.mode-card,.project-card,.story-card,.market-card,.admin-card,.price-card,.credit-summary-card,.promo-strip){
    box-shadow:none!important;
  }

  /* Decorative infinite motion is not useful while the viewport itself is moving. */
  html.sd-is-scrolling :where(.ambient-live-wallpaper i,.signal-ring,.hero-orbit,.hero-live-dot,.film-track),
  html.sd-is-resizing :where(.ambient-live-wallpaper i,.signal-ring,.hero-orbit,.hero-live-dot,.film-track){
    animation-play-state:paused!important;
  }
  html.sd-is-scrolling .primary::after,html.sd-is-scrolling .tool-btn.primary::after,html.sd-is-scrolling .generate-btn::after,html.sd-is-scrolling .imagegen-btn::after,html.sd-is-scrolling .project-create-btn::after,html.sd-is-scrolling .hero-primary::after,html.sd-is-scrolling #chatSend::after,html.sd-is-scrolling #imageGenerate::after,
  html.sd-is-resizing .primary::after,html.sd-is-resizing .tool-btn.primary::after,html.sd-is-resizing .generate-btn::after,html.sd-is-resizing .imagegen-btn::after,html.sd-is-resizing .project-create-btn::after,html.sd-is-resizing .hero-primary::after,html.sd-is-resizing #chatSend::after,html.sd-is-resizing #imageGenerate::after{
    animation-play-state:paused!important;
  }

  html.sd-is-resizing :where(.mode-card,.project-card,.story-card,.market-card,.topbar-nav-link,.dimension-wallet,.workspace-menu-item){
    transition:none!important;
  }

  /* Off-screen video stays available but browser can deprioritize its paint. */
  video{content-visibility:auto}

  /* Desktop browser zoom / split view: keep app shells inside the visible viewport. */
  :where(.app-shell,.workspace-shell,.dashboard-main,.home-main,.story-workbench-main,.admin-main,.guide-main,.profile-main,.recharge-main,.market-main,.skills-main,.story-projects-main,.api-main){
    min-width:0;
    max-width:100%;
  }

  :where(.app-topbar,.home-header,.topbar,.premium-topbar,.workspace-site-topbar){
    padding-left:max(10px,min(var(--sd-desktop-inline),3vw));
    padding-right:max(10px,min(var(--sd-desktop-inline),3vw));
  }
}

/* Mid-size desktop/laptop windows: reduce decorative cost before controls start wrapping. */
@media (min-width:761px) and (max-width:1440px){
  .dashboard-backdrop .ambient-live-wallpaper{opacity:.44!important}
  .dashboard-backdrop .ambient-live-wallpaper i{filter:blur(34px)!important}
  :where(.mode-card,.project-card,.story-card,.market-card){box-shadow:0 10px 28px rgba(0,0,0,.12)!important}
  :where(.dashboard-main,.home-main,.admin-main,.guide-main,.profile-main,.recharge-main,.market-main,.skills-main,.story-projects-main){
    padding-left:clamp(14px,2vw,28px)!important;
    padding-right:clamp(14px,2vw,28px)!important;
  }
}

/* Browser split view / 110%-150% zoom. Keep top navigation usable instead of squeezing every control. */
@media (min-width:761px) and (max-width:1180px){
  :where(.dashboard-nav-rail,.workspace-primary-nav){
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
    overscroll-behavior-inline:contain;
  }
  :where(.dashboard-nav-rail,.workspace-primary-nav)::-webkit-scrollbar{display:none}
  :where(.dashboard-nav-rail,.workspace-primary-nav) .topbar-nav-link{flex:0 0 auto}
  :where(.header-actions,.dashboard-account-zone,.workspace-account-zone){flex:0 0 auto}
  .dimension-wallet .wallet-balance small{display:none}
}

@media (min-width:761px) and (max-width:980px){
  :where(.dashboard-nav-rail,.workspace-primary-nav) .nav-copy{display:none}
  :where(.dashboard-nav-rail,.workspace-primary-nav) .topbar-nav-link{min-width:42px;justify-content:center}
  .dimension-wallet .wallet-recharge{display:none}
  :where(.dashboard-command,.section-head,.film-head){align-items:flex-start}
}

/* Low-height desktop windows: preserve working area and avoid oversized visual effects. */
@media (min-width:761px) and (max-height:720px){
  :where(.app-topbar,.home-header,.dashboard-topbar,.topbar){min-height:52px}
  .dashboard-backdrop .ambient-live-wallpaper{opacity:.32!important}
  .cinematic-hero-v630{min-height:auto!important}
  :where(.site-dialog,.modal-card,.market-drawer-card){max-height:calc(100dvh - 20px)!important}
}

/* Conservative mode for lower-memory / lower-core desktops detected by desktop-performance.js. */
@media (min-width:761px){
  html.sd-perf-lite :where(.ambient-live-wallpaper,.hero-orbit,.signal-ring,.hero-live-dot){display:none!important}
  html.sd-perf-lite :where(.dashboard-topbar,.premium-topbar,.workspace-site-topbar,.home-header,.topbar,.hero-media-glass,.hero-sound-btn,.auth-card-v630,.story-copilot,.copilot-reopen){
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }
  html.sd-perf-lite :where(.mode-card,.project-card,.story-card,.market-card,.price-card,.credit-summary-card){box-shadow:0 8px 24px rgba(0,0,0,.12)!important}
  html.sd-perf-lite .primary::after,html.sd-perf-lite .tool-btn.primary::after,html.sd-perf-lite .generate-btn::after,html.sd-perf-lite .imagegen-btn::after,html.sd-perf-lite .project-create-btn::after,html.sd-perf-lite .hero-primary::after,html.sd-perf-lite #chatSend::after,html.sd-perf-lite #imageGenerate::after{display:none!important}
  html.sd-perf-lite .hero-showcase .showcase-image{animation:none!important}
  html.sd-perf-lite .ambient-video{filter:brightness(.58)!important;transform:none!important}
}

html.sd-page-hidden *,html.sd-page-hidden *::before,html.sd-page-hidden *::after{animation-play-state:paused!important}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important}
}

@media (min-width:761px){html.sd-is-scrolling .global-redeem-dialog::backdrop,html.sd-is-resizing .global-redeem-dialog::backdrop{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}}

@media (min-width:761px){
  /* Canvas drag/pan performance: many node shadows are expensive when dozens of nodes move together. */
  html.sd-canvas-interacting .node{box-shadow:none!important}
  html.sd-canvas-interacting .node.thumb{transition:none!important}
  html.sd-canvas-interacting :where(.port,.edge-action,.zoom-hud,.minimap){transition:none!important}
}