/* ============================================================
   爱查查 · 抽屉式弹层（P2-5）
   ------------------------------------------------------------
   替代层层全屏 modal 堆叠：右滑（side=right）+ 底部（side=bottom）
   两类抽屉，支持多层栈。严守 CSP：零内联 style / on*，显隐与定位
   全部走 class（动画）+ data-style（z-index，由 style-shim 经 CSSOM 应用）；
   遮罩 / 关闭钮点击走 data-call="App.closeTopDrawer()"（委托引擎）。
   视觉复用 design-tokens.css 令牌，改一处两端生效。
   ============================================================ */

/* 根容器：默认不拦截点击；仅 mask（顶层）/ panel 接收指针 */
.drawer-layer {
  position: fixed;
  inset: 0;
  z-index: 1000;                 /* 运行时按栈深经 data-style 覆盖 */
  pointer-events: none;
}
.drawer-mask {
  position: absolute;
  inset: 0;
  background: var(--overlay);
  opacity: 0;
  pointer-events: none;          /* 仅顶层抽屉的遮罩可点（.is-open 时开启） */
  transition: opacity var(--dur) ease;
}
.drawer-panel {
  position: absolute;
  background: var(--bg-elevated);
  box-shadow: var(--shadow-2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  pointer-events: auto;          /* 面板始终可交互 */
}

/* ---------- 右滑抽屉 ---------- */
.drawer-side-right .drawer-panel {
  top: 0;
  bottom: 0;
  right: 0;
  width: 420px;                  /* 桌面端 420px（拍板） */
  max-width: 86vw;               /* 移动端自适应 */
  border-top-left-radius: var(--radius-lg);
  border-bottom-left-radius: var(--radius-lg);
  transform: translateX(100%);
  transition: transform var(--dur) var(--ease-out);
}
.drawer-side-right.is-open   .drawer-panel { transform: translateX(0); }
.drawer-side-right.is-behind .drawer-panel { transform: translateX(-12%); }  /* 下层抽屉露左缝示深 */
.drawer-side-right.is-closing .drawer-panel { transform: translateX(100%); }

/* ---------- 底部抽屉 ---------- */
.drawer-side-bottom .drawer-panel {
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 90vh;
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
  transform: translateY(100%);
  transition: transform var(--dur) var(--ease-out);
}
.drawer-side-bottom.is-open   .drawer-panel { transform: translateY(0); }
.drawer-side-bottom.is-behind .drawer-panel { transform: translateY(8%); }
.drawer-side-bottom.is-closing .drawer-panel { transform: translateY(100%); }

/* ---------- 遮罩显隐（仅顶层可见，避免多层叠加过暗） ---------- */
.drawer-layer.is-open   .drawer-mask { opacity: 1; pointer-events: auto; }
.drawer-layer.is-behind .drawer-mask { opacity: 0; pointer-events: none; }
.drawer-layer.is-closing .drawer-mask { opacity: 0; pointer-events: none; }

/* ---------- 头部 ---------- */
.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--divider);
  flex: 0 0 auto;
}
.drawer-title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.drawer-close {
  flex: 0 0 auto;
  width: var(--tap-min);
  height: var(--tap-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast, 0.15s), color var(--dur-fast, 0.15s);
}
.drawer-close:hover { background: var(--surface-2); color: var(--text); }
.drawer-close:active { background: var(--surface-3); }

/* ---------- 内容区 ---------- */
.drawer-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-4);
}

/* ---------- 手势拖拽中：关闭过渡动画 ---------- */
.drawer-panel.drawer-dragging { transition: none; }

/* ---------- 无障碍：焦点环 ---------- */
.drawer-close:focus-visible { box-shadow: var(--focus-ring); }

@media (prefers-color-scheme: dark) {
  .drawer-panel { background: var(--bg-elevated); }  /* 令牌已切换深色档 */
}

/* ---------- 兼容旧 mk-* 自建浮层迁移为抽屉内容 ----------
 * .mk-review-modal-box / .mk-quote-modal 原设计为 position:fixed 屏幕居中卡片，
 * 直接丢进抽屉会悬浮在屏幕中央压住面板。中和其定位与宽度，改为抽屉内静态满宽卡片。 */
.drawer-body .mk-review-modal-box,
.drawer-body .mk-quote-modal {
  position: static;
  top: auto; left: auto; right: auto; bottom: auto;
  transform: none;
  width: 100%;
  max-width: 100%;
  margin: 0;
  box-shadow: none;
}