/**
 * 主站(index) + 桌台(zhuotai) 通用页面壳样式（不包含登录/注册弹窗）
 * 目标：两端 UI/布局/字号/交互一致，减少模板分叉。
 *
 * 说明：
 * - 主题由 `client/js/common/theme.js` 注入 CSS 变量：--theme-primary/bg/text
 * - 这里尽量只依赖通用 class（page-title-wrap/page-title-card 等）
 */

:root {
  --dp-primary: var(--theme-primary, #ff6699);
  --dp-bg: var(--theme-bg, #0b0b0b);
  --dp-text: var(--theme-text, #e0e0e0);

  --dp-radius: 14px;
  --dp-border: rgba(255, 255, 255, 0.14);
  --dp-surface: rgba(17, 17, 17, 0.86);
  --dp-surface-strong: rgba(30, 30, 30, 0.96);

  --dp-fs-title: clamp(18px, 4.8vw, 22px);
  --dp-fs-body: clamp(14px, 3.6vw, 16px);
  --dp-fs-small: clamp(12px, 3.2vw, 14px);

  /* 输入区按钮统一尺寸（index + zhuotai） */
  --dp-btn-font: var(--dp-fs-body);
  --dp-btn-pad-y: 10px;
  --dp-btn-pad-x: 18px;
  --dp-btn-radius: 999px;
  /* 输入区高度微调：减少 2px（44 -> 42），主站/桌台同步 */
  --dp-tap-min: 42px;
}

html, body {
  width: 100%;
  height: 100%;
  color: var(--dp-text);
  background-color: var(--dp-bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  margin: 0;
  padding: 0;
  /* 对齐桌台：页面本体不滚动，滚动只发生在内部容器（历史/会话列表等）
     可显著减少微信内置浏览器底部左右箭头出现的概率 */
  overflow: hidden;
}

/* 页面根容器占满视口（对齐桌台 7272.html） */
.container {
  width: 100%;
  height: 100%;
  max-width: 100%;
  margin: 0 auto;
  position: relative;
}

/* 微信内置浏览器：隐藏底部导航箭头 */
@media (max-width: 768px) {
  html.wx, body.wx {
    overflow-x: hidden !important;
  }
}

/* ========== 弹幕页布局（主站 + 桌台通用） ========== */
.danmu-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh; /* 微信/iOS：避免地址栏/键盘导致的 vh 抖动 */
  background: transparent;
  position: relative;
  padding: 0;
  margin: 0;
}

.danmu-container-inner {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: transparent;
}

.danmu-history--pt60 {
  padding-top: 60px !important;
  background: transparent;
}

#danmu-history {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* 顶部留白由 .danmu-history--pt60 控制；底部由键盘逻辑/JS 动态补偿 */
  /* 只控制上下 padding：左右留白由 danmu-history-common.css 统一管理 */
  padding-top: 0;
  padding-bottom: 10px;
  background: transparent;
  max-height: 100%;
}

#danmu-history::-webkit-scrollbar { width: 6px; }
#danmu-history::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 3px; }
#danmu-history::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.3); border-radius: 3px; }
#danmu-history::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.5); }

/* 顶部标题/公告卡片（index 与 zhuotai 统一） */
.page-title-wrap {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top));
  left: 0;
  width: 100%;
  z-index: 100;
  text-align: center;
  pointer-events: none;
  /* 两侧留白（含安全区），避免卡片在小屏/刘海机上“贴边” */
  padding-left: calc(12px + env(safe-area-inset-left));
  padding-right: calc(12px + env(safe-area-inset-right));
  box-sizing: border-box;
}

.page-title-card {
  display: inline-block;
  border-radius: var(--dp-radius);
  padding: 8px 12px;
  max-width: min(92vw, 560px);
  pointer-events: auto;
  border: 1px solid var(--dp-border);
  background: rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  /* 额外左右 margin：在 wrap 的 padding 基础上再留一点视觉呼吸 */
  margin: 0 2px;
}

/* 确保 hidden 属性的元素完全不显示，避免 backdrop-filter、background、border 产生视觉残留 */
.page-title-card[hidden],
.page-title-wrap[hidden] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

.page-title-text {
  margin: 0;
  padding: 0;
  font-size: var(--dp-fs-title);
  line-height: 1.12;
  color: var(--dp-primary);
}

.page-desc-text {
  margin: 3px 0 0 0;
  padding: 0;
  font-size: var(--dp-fs-body);
  line-height: 1.22;
  color: var(--dp-text);
  opacity: 0.95;
}

/* 输入区：两端统一基础观感（具体按钮细节由 input-button-common.css 负责） */
.input-section {
  background: var(--dp-surface);
  border-top: 1px solid var(--dp-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* 历史区：避免桌台模板的固定高度压扁 */
#danmu-history {
  height: auto !important;
  max-height: none !important;
}

/* 弹幕历史 item 的视觉样式统一由 /css/danmu-history-common.css 管理；
 * 这里不再用 !important 覆盖，避免与主站/桌台统一样式冲突。
 */

/* 公共：减少低性能机的动画压力 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}