/* ============================================================
   MiniZone Design System — Glass (Layer 3)
   液态玻璃：只用于控制层（Dock / 顶栏 / FAB / 搜索 / 弹层 / 横幅）。
   内容卡一律实色，禁止给内容块加毛玻璃。
   ============================================================ */

/* ===== MiniGlassSurface：三级玻璃工具 ===== */
.glass {
  background: var(--glass-bg);
  border: var(--glass-border);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.glass-float {
  background: var(--glass-float-bg);
  border: var(--glass-border);
  box-shadow: var(--glass-float-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.glass-surface {
  background: var(--glass-surface-bg);
  border: var(--glass-border);
  box-shadow: var(--glass-surface-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

/* ============================================================
   MiniGlassBottomBar — 悬浮胶囊 Dock（全宽）
   内容从导航下方滚过；选中 Tab 用品牌色点睛，克制。
   ============================================================ */
.dock {
  position: absolute; z-index: 21;
  left: var(--dock-inset); right: var(--dock-inset);
  bottom: var(--dock-bottom);
  height: var(--dock-h);
  border-radius: var(--r-dock);
  display: grid; grid-template-columns: repeat(4, 1fr);
  align-items: center; padding: 8px;
  overflow: hidden;
  /* 复用 tier-1 玻璃 */
  background: var(--glass-bg);
  border: var(--glass-border);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  /* 返回：带轻微回弹的减速曲线，落地有质感 */
  transition:
    transform 420ms cubic-bezier(.3, 1.06, .35, 1),
    opacity 320ms ease;
}
/* 子页面：Dock 下沉隐藏（加速离场 + 轻微缩放做出纵深） */
.dock.hidden {
  transform: translateY(calc(100% + 48px)) scale(.98);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 340ms cubic-bezier(.32, 0, .3, 1),
    opacity 260ms ease;
}
.dock::before {
  /* 顶部内高光：玻璃的"边缘感"，极弱 */
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, .28), transparent 32%);
  mix-blend-mode: overlay;
}
.dock button {
  position: relative; z-index: 2;
  min-width: 0; height: 58px;
  border: 0; border-radius: var(--r-xl);
  background: transparent;
  color: var(--faint);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: var(--fs-nav); font-weight: var(--fw-medium); letter-spacing: .01em;
  transition: transform var(--dur-fast) var(--ease-spring), color var(--dur-fast) ease;
  -webkit-user-select: none; user-select: none;
}
.dock button:active { transform: scale(.88); }
.dock button .dock-icon {
  display: grid; place-items: center;
  height: 24px; transition: transform var(--dur-fast) var(--ease-spring);
}
.dock button.active { color: var(--accent-deep); }
.dock button.active .dock-icon { transform: translateY(-1px); }
.dock-selection {
  position: absolute; top: 11px; bottom: 11px; left: 14px; z-index: 1;
  width: calc((100% - 16px) / 4 - 12px); pointer-events: none;
  border-radius: 20px;
  background: var(--glass-selected-bg);
  border: var(--glass-selected-border);
  box-shadow: 0 6px 16px rgba(35, 90, 200, .12), inset 0 1px 0 rgba(255, 255, 255, .9);
  transform: translateX(calc(var(--dock-index, 0) * (100% + 12px)));
  transition: transform var(--dur-normal) var(--ease-out);
}
.dock button.bump .dock-icon { animation: dockBump .34s var(--ease-spring); }
@keyframes dockBump {
  0% { transform: scale(1); }
  45% { transform: scale(1.16) translateY(-1px); }
  100% { transform: scale(1); }
}
.dock-badge {
  position: absolute; top: 5px; right: calc(50% - 21px);
  width: 8px; height: 8px; padding: 0;
  border-radius: 50%;
  background: var(--danger);
  display: block; line-height: 1;
  box-shadow: 0 2px 6px rgba(238, 82, 98, .4), 0 0 0 2px var(--bg-page);
}

/* ===== 发帖 FAB：悬浮在 Dock 上方右侧，仅发现页显示 ===== */
.composer {
  position: absolute; z-index: 22;
  right: calc(var(--dock-inset) + 6px);
  bottom: calc(var(--dock-bottom) + var(--dock-h) + 10px);
  width: 60px; height: 60px;
  border-radius: 50%;
  border: var(--glass-border);
  display: grid; place-items: center;
  color: var(--accent);
  background: var(--glass-float-bg);
  box-shadow: var(--glass-float-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  transition: transform 420ms cubic-bezier(.3, 1.06, .35, 1), opacity 320ms ease;
  -webkit-user-select: none; user-select: none;
}
.composer:active { transform: scale(.88) rotate(90deg); }
.composer.hidden {
  opacity: 0;
  transform: scale(.5) translateY(28px);
  pointer-events: none;
  transition: transform 300ms cubic-bezier(.32, 0, .3, 1), opacity 240ms ease;
}
.composer-core {
  width: 100%; height: 100%; border-radius: 50%;
  display: grid; place-items: center;
}
.composer-core::after {
  /* 内芯微光：加号的呼吸感 */
  content: "";
  position: absolute; width: 38px; height: 38px; border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, rgba(35, 104, 245, .1), transparent 70%);
  pointer-events: none;
}

/* ===== MiniTopBar：滚动后浮现的迷你玻璃条 ===== */
.mini-topbar {
  position: absolute; z-index: 20;
  left: var(--dock-inset); right: var(--dock-inset);
  top: calc(10px + var(--safe-top));
  height: 52px;
  border-radius: var(--r-2xl);
  display: flex; align-items: center; gap: 10px;
  padding: 0 8px 0 12px;
  background: var(--glass-bg);
  border: var(--glass-border);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  opacity: 0; transform: translateY(-12px) scale(.96);
  pointer-events: none;
  transition: opacity var(--dur-normal) var(--ease-out), transform var(--dur-normal) var(--ease-out);
}
.mini-topbar.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.mini-topbar .mt-logo {
  width: 40px; height: 32px; border-radius: 0; object-fit: contain; flex: 0 0 auto;
}
.mini-topbar .mt-name {
  flex: 1; min-width: 0;
  font-size: 15px; font-weight: var(--fw-bold); letter-spacing: var(--ls-tight);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mini-topbar .mt-name small { display: block; font-size: 10px; font-weight: var(--fw-semibold); color: var(--text-tertiary); letter-spacing: .02em; margin-top: 1px; }
.mini-topbar .mt-wordmark { display: block; width: 96px; height: 20px; object-fit: contain; }
.mini-topbar .mt-action {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--text-primary);
  transition: transform var(--dur-fast) var(--ease-spring), background var(--dur-fast);
}
.mini-topbar .mt-action:active { transform: scale(.88); background: rgba(24, 32, 48, .07); }

/* ===== 顶部通知横幅：系统通知式玻璃 ===== */
.banner-container {
  position: fixed;
  top: calc(var(--safe-top) + 12px); left: 16px; right: 16px;
  z-index: 100;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.banner {
  pointer-events: auto;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border-radius: var(--r-lg);
  background: var(--banner-bg);
  border: var(--glass-border);
  box-shadow: var(--glass-surface-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  transform: translateY(-130%) scale(.96);
  opacity: 0;
  transition: transform var(--dur-normal) var(--ease-spring), opacity var(--dur-normal) var(--ease);
}
.banner.show { transform: translateY(0) scale(1); opacity: 1; }
.banner-icon {
  width: 36px; height: 36px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--accent); color: #fff; flex: 0 0 auto;
  box-shadow: 0 4px 12px rgba(35, 104, 245, .3);
}
.banner-text { flex: 1; min-width: 0; }
.banner-title { font-size: 13.5px; font-weight: var(--fw-bold); line-height: 1.3; }
.banner-body { font-size: 12px; color: var(--text-secondary); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.banner-close {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--text-tertiary); flex: 0 0 auto;
  transition: background var(--dur-fast), transform var(--dur-fast) var(--ease-spring);
}
.banner-close:active { background: rgba(24, 32, 48, .07); transform: scale(.88); }

/* ===== Bottom Sheet：玻璃表面级 ===== */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(14, 18, 26, .42);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity var(--dur-normal);
  display: flex; align-items: flex-end; justify-content: center;
}
.sheet-backdrop.show { opacity: 1; }
.sheet {
  width: 100%; max-width: 480px;
  background: var(--glass-surface-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  border-bottom: 0;
  box-shadow: var(--glass-surface-shadow);
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  transform: translateY(100%);
  transition: transform var(--dur-slow) var(--ease-out);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.sheet-backdrop.show .sheet { transform: translateY(0); }
.sheet-handle {
  width: 36px; height: 5px; border-radius: 3px;
  background: rgba(24, 32, 48, .16);
  margin: 8px auto 2px; flex: 0 0 auto;
}
html[data-theme='dark'] .sheet-handle { background: rgba(200, 212, 235, .2); }
.sheet-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 18px 12px; flex: 0 0 auto;
}
.sheet-title { font-size: 17px; font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); }
.sheet-body {
  overflow-y: auto; overscroll-behavior: contain;
  padding: 0 18px calc(24px + var(--safe-bottom)); flex: 1;
}
.sheet-body::-webkit-scrollbar { display: none; }

/* ===== 图片查看器 ===== */
.viewer-backdrop {
  position: fixed; inset: 0; z-index: 95;
  background: rgba(0, 0, 0, .93);
  display: grid; place-items: center;
  opacity: 0; transition: opacity var(--dur-normal);
}
.viewer-backdrop.show { opacity: 1; }
.viewer-img {
  max-width: 94vw; max-height: 85vh;
  object-fit: contain; cursor: grab;
  transition: transform .12s ease;
  border-radius: 6px;
}
.viewer-close {
  position: absolute;
  top: calc(var(--safe-top) + 12px); right: 16px;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #fff;
  display: grid; place-items: center; z-index: 2;
}

/* ===== 全局 Dialog：iOS 26 居中 Liquid Glass 系统弹窗 ===== */
.dlg-backdrop {
  position: fixed; inset: 0; z-index: 96;
  background: rgba(8, 10, 16, .46);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 32px;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.dlg-backdrop.show { opacity: 1; }
.dialog {
  width: min(320px, 100%);
  border-radius: 28px;
  padding: 22px 20px 18px;
  background: var(--glass-surface-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  box-shadow: var(--glass-surface-shadow), inset 0 1px 0 rgba(255, 255, 255, .12);
  transform: scale(.92) translateY(8px);
  opacity: 0;
  transition: transform .26s var(--ease-spring), opacity .18s var(--ease-out);
}
.dlg-backdrop.show .dialog { transform: scale(1) translateY(0); opacity: 1; }
.dlg-title {
  font-size: 16.5px; font-weight: var(--fw-bold); color: var(--text-primary);
  text-align: center; letter-spacing: var(--ls-tight); line-height: 1.4;
}
.dlg-message {
  font-size: 13.5px; line-height: 1.65; color: var(--text-secondary);
  text-align: center; margin-top: 8px;
  white-space: pre-line;
}
.dlg-actions { display: flex; gap: 10px; margin-top: 20px; }
.dlg-btn {
  flex: 1; height: 42px; border: 0; cursor: pointer;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14.5px; font-weight: var(--fw-semibold);
  color: var(--text-primary); background: rgba(120, 132, 160, .22);
  transition: transform var(--dur-fast) var(--ease-spring), filter var(--dur-fast);
}
.dlg-btn:active { transform: scale(.96); filter: brightness(1.12); }
.dlg-confirm { color: var(--text-on-accent); background: var(--accent); }
.dlg-confirm.dlg-c-destructive { background: var(--danger); }
.dlg-confirm.dlg-c-warning { background: var(--warning); color: var(--ink); }
html[data-theme='dark'] .dlg-confirm.dlg-c-warning { color: var(--bg-page); }
.dlg-confirm.dlg-c-success { background: var(--success); }
@media (prefers-reduced-motion: reduce) {
  .dlg-backdrop, .dialog { transition-duration: .01s; }
}