/**
 * 舞台第三层样式 (Layer 3) - 插件运行容器
 *
 * 透明容器：层本身透明、不拦截事件（pointer-events: none 由 frame.css 定义），
 * 层内插件窗口自身不透明、可交互——各管各的。
 */

/* 容器：全屏透明，仅承载插件窗口；顶部让位 Layer 4 全局导航栏 */
.layer-3 {
  position: absolute;
  inset: 0;
  display: flex;
  padding: var(--bp-space-5);
  padding-top: calc(var(--bp-space-5) + 60px);
  /* 导航 60px + 间距 */
  pointer-events: none;
  /* 容器透明：不拦截下层；子元素各自 auto */
}

/* ═══════ 插件窗口（宿主透明，插件自身不透明） ═══════ */

.plugin-stage {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--bp-color-surface-float);
  border: var(--bp-border-hairline) solid var(--bp-color-border);
  border-radius: var(--bp-radius-lg);
  box-shadow: var(--bp-shadow-lg);
  overflow: hidden;
  pointer-events: auto;
}

/* 标题栏：名称 + 广告位（flex:1 居中）+ 关闭。
   表面与 AI 面板标题栏同源（--bp-color-bg-warm-soft），不再各写半透暖白，
   杜绝"看着相近其实不是一个色"。 */
.plugin-stage__bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--bp-space-3);
  padding: var(--bp-space-2) var(--bp-space-4);
  border-bottom: var(--bp-border-hairline) solid var(--bp-color-primary-hairline);
  background: var(--bp-color-bg-warm-soft);
  user-select: none;
}

.plugin-stage__name {
  flex: none;
  font-size: var(--bp-font-sm);
  font-weight: var(--bp-font-semibold);
  color: var(--bp-color-text);
}

/* 广告位：宿主导入内容，占满标题栏中部 */
.plugin-stage__ad {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--bp-font-xs);
  color: var(--bp-color-text-muted);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 返回按钮：透明底 + 品牌主色拐弯箭头（逐级返回：运行→列表→内容页） */
.plugin-stage__back {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--bp-color-primary);
  cursor: pointer;
  padding: 0;
  border-radius: var(--bp-radius-sm);
  transition: color var(--bp-dur-fast) var(--bp-ease), background var(--bp-dur-fast) var(--bp-ease);
}

.plugin-stage__back:hover {
  color: var(--bp-color-primary-strong);
  background: var(--bp-color-primary-soft);
}

/* 关闭按钮：透明底 + 品牌主色 ✕（关闭整个面板回主页） */
.plugin-stage__close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--bp-color-primary);
  cursor: pointer;
  padding: 0;
  border-radius: var(--bp-radius-sm);
  transition: color var(--bp-dur-fast) var(--bp-ease), background var(--bp-dur-fast) var(--bp-ease);
}

.plugin-stage__close:hover {
  color: var(--bp-color-primary-strong);
  background: var(--bp-color-primary-soft);
}

/* 标题栏按钮图标（返回/关闭共用）：固定 20px 正方形，与关闭图标同尺寸同高，
   跨设备一致，不再受手机字体宽度影响 */
.plugin-stage__btn-icon {
  width: 20px;
  height: 20px;
  display: block;
  pointer-events: none;
}

.plugin-stage__content {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  padding: var(--bp-space-4);
}

/* 运行视图内容：矮于容器时居中，超高时顶部对齐。
   flex 居中在内容超高时会上下对称溢出，顶部被标题栏遮挡、
   且向上滚不到头（scrollTop=0 时内容顶部仍在视口上方）；
   margin:auto 在负自由空间时自动退化为 0，超高贴顶可完整滚动。 */
.plugin-stage__content:not(.plugin-stage__content--list)>* {
  margin: auto;
}

.plugin-stage__hint {
  color: var(--bp-color-text);
  font-size: var(--bp-font-lg);
  font-weight: var(--bp-font-bold);
  text-align: center;
  line-height: var(--bp-leading-normal);
}

.plugin-stage__hint--error {
  color: var(--bp-color-danger);
}

/* 标题栏图标（左侧）：列表视图=行业工具 SVG，运行视图=插件自身 icon（emoji/字符） */
.plugin-stage__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  width: 20px;
  font-size: var(--bp-font-md);
  line-height: 1;
  color: var(--bp-color-text);
}

.plugin-stage__icon img {
  height: 100%;
  width: auto;
  display: block;
}

/* ═══════ 列表视图：插件网格（清单自动投射） ═══════ */

.plugin-stage__content--list {
  align-items: stretch;
  justify-content: stretch;
  overflow: auto;
}

.plugin-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--bp-space-4);
}

.plugin-grid__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--bp-space-2);
  aspect-ratio: 1;
  /* 正方形格子，不被拉成长方形 */
  padding: var(--bp-space-3);
  background: var(--bp-color-surface-wash);
  border: var(--bp-border-hairline) solid var(--bp-color-border);
  border-radius: var(--bp-radius-md);
  cursor: pointer;
  transition: transform var(--bp-dur-fast) var(--bp-ease), box-shadow var(--bp-dur-fast) var(--bp-ease), background var(--bp-dur-fast) var(--bp-ease);
}

.plugin-grid__item:hover {
  transform: translateY(-2px);
  /* hover 提实：与标题栏同源的不透明暖白 */
  background: var(--bp-color-bg-warm-soft);
  box-shadow: var(--bp-shadow-sm);
}

/* 列表项图标：纯文字（44px）或 SVG（44px 等比） */
.plugin-grid__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  font-size: 44px;
  line-height: 1;
  color: var(--bp-color-primary);
}

.plugin-grid__icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* 标题与图标分开：图标占上方，标题独立在底部，间距拉开 */
.plugin-grid__label {
  margin-top: var(--bp-space-2);
  font-size: var(--bp-font-sm);
  font-weight: var(--bp-font-semibold);
  color: var(--bp-color-text);
  text-align: center;
  line-height: var(--bp-leading-snug);
}