/**
 * 星河 AI V2 — 二级页背景
 * 用于工具页 / 工作区等全屏二级视图
 */

.secondary-bg-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: #05070a;
  background-image:
    linear-gradient(
      180deg,
      rgba(5, 7, 10, 0.08) 0%,
      rgba(5, 7, 10, 0.22) 48%,
      rgba(5, 7, 10, 0.42) 100%
    ),
    var(--secondary-bg-image);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.secondary-bg-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 55% 45% at 12% 88%,
      rgba(123, 97, 255, 0.14) 0%,
      transparent 58%
    ),
    radial-gradient(
      ellipse 48% 40% at 88% 12%,
      rgba(59, 130, 246, 0.12) 0%,
      transparent 55%
    ),
    linear-gradient(
      90deg,
      rgba(5, 7, 10, 0.38) 0%,
      rgba(5, 7, 10, 0.06) 42%,
      rgba(5, 7, 10, 0.1) 100%
    );
}

/* 二级页模式：隐藏首页背景，显示二级页背景 */
body.xh-secondary-page-open #globalBgLayer {
  opacity: 0;
  visibility: hidden;
}

body.xh-secondary-page-open #secondaryBgLayer {
  opacity: 1;
  visibility: visible;
}

#secondaryBgLayer {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0.28s ease;
}

#secondary-page-root,
.tool-page-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: transparent;
}

#main-viewport {
  position: relative;
}

#main-viewport.is-secondary-view {
  background: transparent;
}

#main-viewport.is-secondary-view .home-root,
#main-viewport.is-secondary-view .home-main {
  display: none !important;
}

#main-viewport.is-image-view #secondary-page-root,
#main-viewport.is-video-view #secondary-page-root,
#main-viewport.is-video-deep-view #secondary-page-root,
#main-viewport.is-video-factory-view #secondary-page-root,
#main-viewport.is-image-decompose-view #secondary-page-root,
#main-viewport.is-advisor-view #secondary-page-root {
  display: none !important;
}

#main-viewport .xh-workspace-panel {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none !important;
  flex-direction: column;
  width: 100% !important;
  height: 100% !important;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

#main-viewport .xh-workspace-panel.is-open {
  display: flex !important;
}

#main-viewport .xh-workspace-panel[hidden] {
  display: none !important;
}

.image-workspace-frame,
.video-workspace-frame,
.video-deep-workspace-frame,
.video-factory-workspace-frame,
.image-decompose-workspace-frame {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
  border: 0;
  display: block;
  background: #080a10;
}

.home-root {
  width: 100%;
  height: 100%;
  min-height: 0;
}

#secondary-page-mount,
#secondary-page-root {
  width: 100%;
  height: 100%;
  min-height: 0;
}

#secondary-page-root[hidden] {
  display: none !important;
}

#image-workspace-mount,
.image-workspace-shell,
#video-workspace-mount,
.video-workspace-shell,
#video-deep-workspace-mount,
.video-deep-workspace-shell,
#video-factory-workspace-mount,
.video-factory-workspace-shell,
#image-decompose-workspace-mount,
.image-decompose-workspace-shell {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

#image-workspace-mount[hidden],
#video-workspace-mount[hidden],
#video-deep-workspace-mount[hidden],
#video-factory-workspace-mount[hidden],
#image-decompose-workspace-mount[hidden] {
  display: none !important;
}

.tool-page-shell {
  display: flex;
  flex-direction: column;
}

.secondary-topbar {
  justify-content: space-between;
  gap: 16px;
  padding: 0 20px 0 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.secondary-page-head {
  min-width: 0;
  flex: 1;
}

.secondary-page-kicker {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #64748b;
  margin-bottom: 6px;
}

.secondary-page-headline {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.secondary-page-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  background: rgba(139, 92, 246, 0.16);
  border: 1px solid rgba(139, 92, 246, 0.28);
}

.secondary-page-headline-copy {
  min-width: 0;
}

.secondary-page-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  margin: 0;
}

.secondary-page-desc {
  margin: 4px 0 0;
  font-size: 0.8125rem;
  color: var(--text-subtle);
  line-height: 1.4;
}

.secondary-topbar-tools {
  flex-shrink: 0;
}

.secondary-page-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 24px 32px 32px;
  box-sizing: border-box;
}

.secondary-page-panel {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 28px 32px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.secondary-page-panel__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
}

.secondary-page-panel__desc {
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.6;
  margin: 0 0 16px;
}

.secondary-page-panel__hint {
  font-size: 0.8125rem;
  color: #64748b;
}

.secondary-page-panel__hint code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #c4b5fd;
}