/* ============================================================
   IT-维他命 私人助理工作台 · 显示框架
   统一 16:9 舞台 · PC 端 / 手机端 双模式自由切换
   ============================================================ */

html.wbf-boot body { visibility: hidden !important; }

/* ---------------- 舞台背景 ---------------- */
.wbf-stage {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(1400px 720px at 16% -12%, #dbe7f6 0%, rgba(219, 231, 246, 0) 62%),
    radial-gradient(1100px 620px at 108% 112%, #e3ebf7 0%, rgba(227, 235, 247, 0) 58%),
    #edf1f6;
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
}

/* ---------------- PC 端：16:9 画布 ---------------- */
.wbf-screen {
  position: relative;
  overflow: auto;
  overflow-x: hidden;
  border-radius: 14px;
  background: #f4f6f9;
  box-shadow:
    0 28px 80px -26px rgba(18, 42, 74, .42),
    0 0 0 1px rgba(18, 42, 74, .08);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  /* 让内部 position:fixed 弹层以本画布为包含块，不溢出 16:9 边界 */
  transform: translateZ(0);
}
.wbf-screen.wbf-lock { overflow: hidden; }
.wbf-screen::-webkit-scrollbar { width: 10px; height: 10px; }
.wbf-screen::-webkit-scrollbar-track { background: transparent; }
.wbf-screen::-webkit-scrollbar-thumb {
  background: rgba(30, 78, 140, .22);
  border-radius: 8px;
  border: 3px solid transparent;
  background-clip: content-box;
}
.wbf-screen::-webkit-scrollbar-thumb:hover { background: rgba(30, 78, 140, .38); background-clip: content-box; }
.wbf-screen { scrollbar-width: thin; scrollbar-color: rgba(30, 78, 140, .28) transparent; }

/* 16:9 画布下内容铺满，不再留大边 */
html.wbf-pc .wbf-screen .wrap { max-width: none !important; }
/* 窄表单页（账号设置）限宽居中，避免表单被拉散 */
html.wbf-pc .wbf-screen .wrap.wbf-narrow {
  max-width: 760px !important;
  margin: 0 auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 登录页：卡片在画布内居中 */
.wbf-screen.wbf-center {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.wbf-screen.wbf-center > * { width: 100%; }

/* ---------------- 手机端：设备预览 ---------------- */
.wbf-phone {
  position: relative;
  flex: none;
  width: 390px;
  height: 844px;
  padding: 11px;
  border-radius: 46px;
  background: linear-gradient(160deg, #1b232e, #0b1119);
  box-shadow:
    0 34px 90px -28px rgba(12, 26, 44, .62),
    0 0 0 1px rgba(255, 255, 255, .07) inset,
    0 2px 6px rgba(0, 0, 0, .28);
  transform-origin: center center;
}
.wbf-phone::before {
  content: "";
  position: absolute;
  top: 11px;
  left: 50%;
  transform: translateX(-50%);
  width: 104px;
  height: 19px;
  border-radius: 0 0 12px 12px;
  background: #0b1119;
  z-index: 3;
  pointer-events: none;
}
.wbf-phone iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 36px;
  background: #fff;
}

/* 手机模式下隐藏画布本体，只留设备预览；PC 模式下隐藏设备预览 */
html.wbf-mobile .wbf-screen { display: none; }
html.wbf-pc .wbf-phone { display: none; }

/* ---------------- 模式切换工具条 ---------------- */
.wbf-bar {
  position: fixed;
  top: 12px;
  right: 14px;
  z-index: 2147483600;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .84);
  -webkit-backdrop-filter: blur(14px) saturate(1.7);
  backdrop-filter: blur(14px) saturate(1.7);
  border: 1px solid rgba(30, 78, 140, .13);
  box-shadow: 0 10px 28px -12px rgba(18, 42, 74, .34);
  font: 600 12.5px/1 "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  opacity: .78;
  transition: opacity .22s ease, transform .22s ease;
  user-select: none;
}
.wbf-bar:hover, .wbf-bar:focus-within { opacity: 1; }
.wbf-bar button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #35506f;
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background .16s ease, color .16s ease;
}
.wbf-bar button:hover { background: rgba(30, 78, 140, .08); }
.wbf-bar button.on {
  background: linear-gradient(160deg, #2f7ac4, #1e4e8c);
  color: #fff;
  box-shadow: 0 4px 12px -4px rgba(30, 78, 140, .55);
}
.wbf-bar .wbf-ico { font-size: 13px; line-height: 1; }
.wbf-bar .wbf-sep { width: 1px; height: 18px; background: rgba(30, 78, 140, .14); margin: 0 2px; }
.wbf-bar .wbf-full { padding: 7px 9px; }

/* ---------------- 真机：只保留「电脑版」小按钮 ---------------- */
.wbf-mini {
  position: fixed;
  right: 10px;
  bottom: 14px;
  z-index: 2147483600;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(30, 78, 140, .16);
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 18px -8px rgba(18, 42, 74, .3);
  color: #35506f;
  font: 600 12px/1 "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  cursor: pointer;
  opacity: .72;
}
.wbf-mini:hover { opacity: 1; }

/* ---------------- 打印：还原纯净版面 ---------------- */
@media print {
  .wbf-bar, .wbf-mini { display: none !important; }
  .wbf-stage { position: static !important; display: block !important; background: #fff !important; }
  .wbf-screen {
    position: static !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
  }
  html.wbf-mobile .wbf-screen { display: block !important; }
  .wbf-phone { display: none !important; }
}