/**
 * HaloTab AppBox —— 公共放大盒子样式
 * --------------------------------------------------------------
 * 与 script/halotab-appbox.js 配对。所有 widget 的放大面板都渲染在这里。
 *
 * 结构（由 JS 构建）：
 *   .ht-appbox                    全屏定位根
 *     .ht-appbox-mask             半透明遮罩（点击关闭）
 *     .ht-appbox-box              内容盒子（1200×700，居中，圆角阴影，无顶栏）
 *       .ht-appbox-close          浮在盒子右上角的关闭按钮（绝对定位）
 *       .ht-appbox-body[data-key] 内容容器，充满整个盒子；data-key 标识当前调用方组件
 *
 * 动画：
 *   - 初始：opacity 0 + scale(.85)
 *   - .show 后：opacity 1 + scale(1)，遮罩同时淡入
 *   - 关闭：移除 .show，反向动画；JS 在 240ms 后 display:none
 */

/* ----------------------------------------------------------
 * 根容器：固定全屏，未 .show 时不可见 + 不可点
 * ---------------------------------------------------------- */
.ht-appbox{
  position: fixed; inset: 0;
  z-index: 9500;
  display: none;
  pointer-events: none;
}
.ht-appbox.show{ pointer-events: auto; }

/* 锁定 body 滚动（避免背后滚动） */
html.ht-appbox-locked, html.ht-appbox-locked body{ overflow: hidden; }

/* ----------------------------------------------------------
 * 遮罩
 * ---------------------------------------------------------- */
.ht-appbox-mask{
  position: absolute; inset: 0;
  background: rgba(15, 17, 21, .5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .22s ease;
}
.ht-appbox.show .ht-appbox-mask{ opacity: 1; }

/* ----------------------------------------------------------
 * 内容盒子：1440×810 固定外观；窄屏 / 矮屏自动收敛
 * ---------------------------------------------------------- */
.ht-appbox-box{
  position: absolute; top: 50%; left: 50%;
  width:  min(1440px, calc(100vw - 32px));
  height: min(810px,  calc(100vh - 32px));
  background: #ffffff;
  color: #2b3138;
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35), 0 0 0 1px rgba(0, 0, 0, .04);
  display: flex;
  flex-direction: column;
  overflow: hidden;

  /* 关键：放大缩小动画 */
  transform: translate(-50%, -50%) scale(.86);
  opacity: 0;
  transform-origin: center center;
  transition:
    transform .22s cubic-bezier(.2, .8, .2, 1),
    opacity   .22s ease;
  will-change: transform, opacity;
}
.ht-appbox.show .ht-appbox-box{
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

html[data-theme="dark"] .ht-appbox-box,
html[data-theme="auto"] .ht-appbox-box{
  background: #1f2230;
  color: #e5e7eb;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06);
}

/* ----------------------------------------------------------
 * 关闭按钮：浮在盒子右上角
 * ---------------------------------------------------------- */
.ht-appbox-close{
  position: absolute;
  top: 12px; right: 12px;
  z-index: 2;                   /* 盖在内容上 */
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(0, 0, 0, .06);
  font-size: 22px; line-height: 1;
  width: 34px; height: 34px;
  border-radius: 999px;
  cursor: pointer;
  color: #2b3138;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background .15s ease, color .15s ease, transform .12s ease;
}
.ht-appbox-close:hover{
  background: #ffffff;
}
.ht-appbox-close:active{ transform: scale(.92); }
html[data-theme="dark"] .ht-appbox-close,
html[data-theme="auto"] .ht-appbox-close{
  background: rgba(40, 44, 56, .72);
  border-color: rgba(255, 255, 255, .1);
  color: #e5e7eb;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
}
html[data-theme="dark"] .ht-appbox-close:hover,
html[data-theme="auto"] .ht-appbox-close:hover{
  background: rgba(60, 66, 82, .92);
}

/* ----------------------------------------------------------
 * 内容区：充满整个盒子（无顶栏占位）
 * 默认不带 padding，由各 widget 通过 [data-key] 自行决定留白
 * ---------------------------------------------------------- */
.ht-appbox-body{
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  padding: 0;
}

/* 减少动画偏好（无障碍） */
@media (prefers-reduced-motion: reduce) {
  .ht-appbox-box,
  .ht-appbox-mask{
    transition-duration: .01ms !important;
  }
}