/* One preview contract shared by homepage AI outputs and account-center assets. */
.asset-preview-modal { z-index: 1500; padding: 16px; padding-top: calc(16px + env(safe-area-inset-top, 0px)); padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); padding-left: calc(16px + env(safe-area-inset-left, 0px)); padding-right: calc(16px + env(safe-area-inset-right, 0px)); background: rgba(2,4,3,.92); backdrop-filter: blur(12px); }
.asset-preview-dialog { display: flex; flex-direction: column; width: min(1120px,100%); height: min(900px,calc(100vh - 32px)); height: min(900px,calc(100svh - 32px));
  height: min(900px,calc(var(--wscm-visible-h, 100svh) - 32px)); overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 5px; background: #050806; box-shadow: 0 30px 120px rgba(0,0,0,.72); }
.asset-preview-header, .asset-preview-footer { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: #080c0a; }
.asset-preview-header { border-bottom: 1px solid rgba(255,255,255,.08); }
.asset-preview-footer { border-top: 1px solid rgba(255,255,255,.08); display: none; }
.asset-preview-heading { display: flex; min-width: 0; align-items: center; gap: 12px; }
.asset-preview-title { overflow: hidden; margin: 0; color: var(--asset-preview-text,var(--wscm-member-text,var(--text,#f4f7fb))); font-size: 14px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.asset-preview-counter { flex: 0 0 auto; color: var(--asset-preview-muted,var(--wscm-member-muted,var(--muted,#b9c3d4))); font-size: 12px; }
.asset-preview-header, .asset-preview-footer { flex: 0 0 auto; }
.asset-preview-media { position: relative; flex: 1 1 auto; display: grid; min-width: 0; min-height: 0; place-items: center; overflow: hidden; padding: 0; background: #020403; touch-action: none; }
.asset-preview-content { position: absolute; inset: 0; display: grid; width: auto; height: auto; min-width: 0; min-height: 0; place-items: center; overflow: hidden; }
.asset-preview-overlay-heading { position: absolute; top: calc(16px + env(safe-area-inset-top, 0px)); left: 18px; z-index: 5; display: flex; align-items: center; gap: 12px; max-width: calc(100% - 220px); }
.asset-preview-media img, .asset-preview-media video { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.asset-preview-media video { position: absolute; inset: 0; width: 100%; height: 100%; }
.asset-preview-media img.asset-preview-transform-target { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; user-select: none; will-change: transform; transition: transform .16s ease; }
.asset-preview-media.zoomed img.asset-preview-transform-target { cursor: grab; transition: none; }
.asset-preview-media.dragging img.asset-preview-transform-target { cursor: grabbing; }
.asset-preview-media audio { width: min(640px,100%); max-width: 100%; }
.asset-preview-toolbar { position: absolute; top: calc(8px + env(safe-area-inset-top, 0px)); right: 8px; z-index: 5; display: flex; align-items: center; gap: 4px; max-width: calc(100% - 16px); overflow-x: auto; border: 1px solid rgba(53,233,130,.2); border-radius: 4px; background: rgba(8,18,13,.94); padding: 4px; }
.asset-preview-toolbar-button, .asset-preview-download, .asset-preview-toolbar .asset-preview-close, .asset-preview-toolbar .asset-preview-zoom-button { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(255,255,255,.14); border-radius: 4px; background: rgba(8,18,13,.82); box-shadow: 0 1px 6px rgba(0,0,0,.45); text-shadow: 0 1px 3px rgba(0,0,0,.6); color: var(--asset-preview-text,var(--wscm-member-text,var(--text,#f4f7fb))); cursor: pointer; }
/* 用户要求：下载也用图标（无文字），与其余图标按钮同尺寸；保留强调色便于识别 */
.asset-preview-toolbar-button, .asset-preview-download { width: 34px; min-width: 34px; padding: 0; color: var(--asset-preview-accent,var(--wscm-member-cyan,var(--cyan,#35e982))); text-decoration: none; }
.asset-preview-toolbar-button:hover, .asset-preview-toolbar-button:focus-visible, .asset-preview-download:hover, .asset-preview-download:focus-visible, .asset-preview-toolbar .asset-preview-close:hover, .asset-preview-toolbar .asset-preview-close:focus-visible, .asset-preview-toolbar .asset-preview-zoom-button:hover, .asset-preview-toolbar .asset-preview-zoom-button:focus-visible { border-color: var(--asset-preview-accent,var(--wscm-member-cyan,var(--cyan,#35e982))); background: rgba(53,233,130,.1); color: var(--asset-preview-accent,var(--wscm-member-cyan,var(--cyan,#35e982))); }
.asset-preview-toolbar .asset-preview-zoom-controls { position: static; display: flex; align-items: center; gap: 4px; transform: none; border: 0; background: transparent; padding: 0; box-shadow: none; backdrop-filter: none; }
.asset-preview-zoom-controls[hidden] { display: none; }
.asset-preview-zoom-button { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(255,255,255,.14); border-radius: 4px; background: rgba(8,18,13,.82); box-shadow: 0 1px 6px rgba(0,0,0,.45); color: var(--asset-preview-text,var(--wscm-member-text,var(--text,#f4f7fb))); cursor: pointer; }
.asset-preview-zoom-level { min-width: 46px; color: var(--asset-preview-muted,var(--wscm-member-muted,var(--muted,#b9c3d4))); font-size: 12px; text-align: center; }
.asset-preview-zoom-button:disabled { cursor: default; opacity: .3; }
.asset-preview-side-nav, .asset-preview-nav { position: absolute; top: 50%; z-index: 4; display: grid; width: 40px; height: 56px; flex: 0 0 auto; place-items: center; transform: translateY(-50%); border: 1px solid rgba(255,255,255,.16); border-radius: 4px; background: rgba(8,18,13,.86); color: var(--asset-preview-text,var(--wscm-member-text,var(--text,#f4f7fb))); cursor: pointer; font-size: 24px; }
.asset-preview-side-nav:hover, .asset-preview-side-nav:focus-visible, .asset-preview-nav:hover, .asset-preview-nav:focus-visible { border-color: var(--asset-preview-accent,var(--wscm-member-cyan,var(--cyan,#35e982))); background: rgba(53,233,130,.12); color: var(--asset-preview-accent,var(--wscm-member-cyan,var(--cyan,#35e982))); }
.asset-preview-side-nav:disabled, .asset-preview-nav:disabled { cursor: default; opacity: .28; }
.asset-preview-side-nav-previous { left: 12px; }
.asset-preview-side-nav-next { right: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
@media (max-width: 639px) {
  /* 移动端浏览器地址栏会占掉顶部空间：预览弹窗按“浏览器 UI 全部展开”的小视口（svh）计算高度，
     并且上/下留白跟随设备安全区，避免顶部工具栏（下载/放大/缩小等）被地址栏或刘海遮住。
     选择器写成 .app-modal.asset-preview-modal（而非单个类），确保能压过 .app-modal / .admin-asset-preview-modal
     各自的 padding，否则弹窗总高会超出可见区、顶部一排按钮被地址栏挡住一半。 */
  .app-modal.asset-preview-modal {
    padding: 6px;
    padding-top: calc(6px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
  }
  .app-modal.asset-preview-modal .asset-preview-dialog {
    width: 100%;
    height: calc(100svh - 12px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  height: calc(var(--wscm-visible-h, 100svh) - 12px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  }
  .asset-preview-toolbar { top: calc(6px + env(safe-area-inset-top, 0px)); right: 6px; max-width: calc(100% - 12px); }
  .asset-preview-toolbar-button, .asset-preview-download { min-width: 58px; padding: 0 8px; }
  .asset-preview-side-nav, .asset-preview-nav { width: 34px; height: 48px; }
  .asset-preview-side-nav-previous { left: 6px; }
  .asset-preview-side-nav-next { right: 6px; }
}

/* 手机与平板（含 1024 横屏平板）：预览的标题与按钮排独立成行放在图片上方，避免压在图片上。
   与无限画布端保持同一形态；更宽屏幕仍保留"按钮排覆盖在图片右上角"。 */
@media (max-width: 1024px) {
  /* 标题在左、按钮排在右，同一行放在图片上方（按钮位置即图片右上角） */
  .asset-preview-media { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr); align-items: stretch; justify-items: stretch; }
  .asset-preview-overlay-heading { position: static; grid-column: 1; grid-row: 1; padding: 12px 0 0 14px; align-items: flex-start; max-width: none; }
  .asset-preview-toolbar { position: static; grid-column: 2; grid-row: 1; margin: 12px 12px 0 0; max-width: none; justify-content: flex-end; }
  .asset-preview-content { position: relative; grid-column: 1 / -1; grid-row: 2; min-height: 0; inset: auto; }
  /* 手机/平板：预览占满可视区（不受 900px 上限限制，图片更大） */
  .app-modal.asset-preview-modal .asset-preview-dialog { height: calc(var(--wscm-visible-h, 100svh) - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
}

/* 预览控件必须浮在图片之上：即使按钮不在工具条容器里（图片铺满媒体区会盖住它们），也能看见、能点 */
.asset-preview-toolbar-button, .asset-preview-download, .asset-preview-close, .asset-preview-zoom-button { position: relative; z-index: 8; }
.asset-preview-zoom-controls { position: relative; z-index: 8; }

/* 百分比文字同样给底，避免白底图上只剩白字看不见 */
.asset-preview-zoom-level { position: relative; z-index: 8; padding: 0 8px; border: 1px solid rgba(255,255,255,.14); border-radius: 4px; background: rgba(8,18,13,.82); color: #f4f7fb; line-height: 32px; }