/**
 * 移动端 UI 覆盖层（主站 + 桌台模板通用）
 * 设计目标：
 * - 字体更易读（避免微信/iOS 自动放大/缩放导致布局跳动）
 * - 输入区更“贴键盘”、触控更友好（>=44px 点击热区）
 * - 弹幕历史不被强行固定高度压扁（桌台页历史上存在 height:150px 之类的覆盖）
 * - 主题更一致：尽量使用 theme.js 注入的 CSS 变量（--theme-primary/bg/text）
 */

:root {
  --ui-radius: 14px;
  --ui-gap: 10px;
  --ui-pad: 12px;
  --ui-pad-lg: 16px;
  --ui-border: rgba(255, 255, 255, 0.14);
  --ui-surface: rgba(17, 17, 17, 0.86);
  --ui-surface-strong: rgba(30, 30, 30, 0.96);
  --ui-primary: var(--theme-primary, #ff6699);
  --ui-text: var(--theme-text, #e0e0e0);
  --ui-bg: var(--theme-bg, #0b0b0b);

  /* iOS/微信：基础字号用 clamp 稳定 */
  --ui-fs-12: clamp(12px, 3.2vw, 13px);
  --ui-fs-14: clamp(14px, 3.8vw, 15px);
  --ui-fs-16: clamp(16px, 4.2vw, 17px);
  --ui-fs-18: clamp(18px, 4.8vw, 20px);
}

@media (max-width: 768px) {
  /* 通用：减少橡皮筋滚动干扰 */
  html, body {
    overscroll-behavior: none;
    /* 微信内置浏览器：隐藏底部导航箭头 */
    overflow-x: hidden;
  }
  
  /* 微信内置浏览器：页面本体不滚动（避免 fixed + 键盘场景抖动），只让内部容器（如 #danmu-history / 会话列表）滚动 */
  html.wx, body.wx {
    overflow-x: hidden !important;
    overflow-y: hidden !important;
  }
  html.wx .container, body.wx .container {
    overflow-x: hidden !important;
    overflow-y: hidden !important;
  }

  /* ========= 主站 / 桌台：输入区 ========= */
  .input-section {
    /* 关键：移动端输入条必须 overlay（fixed），否则历史区会出现“重复留白” */
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 10001 !important;
    background: var(--ui-surface);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--ui-border);
    /* 关键：让输入区“刚好包住按钮+输入框”，不要在底部额外撑高
       使用 !important 覆盖桌台页模板内联的 padding */
    padding-top: 6px !important;
    /* 关键：bar 本体不再用 padding 撑安全区，避免“下面很高” */
    padding-bottom: 6px !important;
    /* 键盘未弹起：输入区紧贴屏幕底部（不再额外留 safe-area 缝） */
    bottom: 0 !important;
  }

  /* 键盘弹起时：不要再额外抬安全区（否则会与 JS 的 translateY 叠加，产生“透明缝”） */
  body.kb-open .input-section,
  body.kb-focus .input-section {
    bottom: 0 !important;
  }

  /* 微信内置浏览器：减少 transform 抖动 */
  html.wx .input-section {
    will-change: transform;
  }

  .input-group {
    gap: 8px;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    flex-wrap: nowrap;
  }

  /* ===== 输入区三元素布局：昵称再长也不挤到输入框“换行” ===== */
  .nickname-btn {
    /* 移动端更早截断，避免昵称过长把输入框挤得太窄 */
    max-width: 28vw !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    flex: 0 1 auto;
    min-width: 0;
  }

  #login-btn,
  .send-btn {
    flex: 0 0 auto;
    flex-shrink: 0;
  }

  .content-input {
    flex: 1 1 auto;
    /* 给输入框一个底线宽度，避免被两侧按钮挤到极窄导致占位/内容换行 */
    min-width: 140px;
  }

  /* iOS/微信：输入字号 <16px 会触发页面放大；这里强制输入类 >=16px */
  .content-input,
  .private-message-input,
  .pm-longtext-input,
  input,
  textarea {
    font-size: 16px !important;
  }

  .content-input {
    border-radius: 999px;
    padding: 10px 14px;
    max-height: 34vh;
  }

  /* ========= 主站：顶部标题卡片更紧凑 ========= */
  .page-title-wrap {
    top: calc(10px + env(safe-area-inset-top));
  }
  .page-title-card {
    border-radius: var(--ui-radius);
    padding: 8px 12px;
    max-width: min(92vw, 520px);
  }
  .page-title-text {
    font-size: var(--ui-fs-18);
    line-height: 1.1;
  }
  .page-desc-text {
    font-size: var(--ui-fs-14);
    line-height: 1.25;
  }

  /* ========= 桌台：公告条对齐安全区 + 弹幕历史不要固定高度 ========= */
  .zhuotai-announcement-wrap {
    top: calc(10px + env(safe-area-inset-top));
  }
  .zhuotai-announcement-card {
    border-radius: var(--ui-radius);
    max-width: min(92vw, 560px);
    padding: 8px 12px;
  }
  .zhuotai-announcement-title {
    font-size: var(--ui-fs-18);
    line-height: 1.1;
  }
  .zhuotai-announcement-desc {
    font-size: var(--ui-fs-14);
    line-height: 1.25;
  }

  /* 关键：覆盖模板内的“移动端固定高度”写法，避免把历史区域压成 120/150px */
  #danmu-history {
    height: auto !important;
    max-height: none !important;
  }
}

@media (max-width: 480px) {
  :root {
    --ui-gap: 8px;
    --ui-pad: 10px;
  }
}

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

/* =========================
 * 微信内置浏览器（MicroMessenger）专项优化
 * 依赖：/js/common/wechat-compat.js 会给 html/body 加 .wx
 * 目标：字号更易读、布局更稳、减少 backdrop-filter 在微信里偶发“黑块/抖动”
 * ========================= */
html.wx {
  /* 更接近微信阅读字号与间距 */
  --ui-fs-12: clamp(13px, 3.4vw, 14px);
  --ui-fs-14: clamp(15px, 3.9vw, 16px);
  --ui-fs-16: clamp(16px, 4.3vw, 17px);
  --ui-fs-18: clamp(18px, 4.9vw, 21px);

  /* 页面壳（danmu-page-common.css） */
  --dp-fs-title: clamp(19px, 5.0vw, 23px);
  --dp-fs-body: clamp(15px, 3.9vw, 17px);
  --dp-fs-small: clamp(13px, 3.4vw, 15px);

  /* 历史 item（danmu-history-common.css） */
  --dh-fs: clamp(14px, 3.8vw, 15px);
  --dh-fs-small: clamp(12px, 3.3vw, 13px);
}

@media (max-width: 768px) {
  html.wx, body.wx {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  /* 顶部标题卡片：微信里更偏实底，避免 blur 黑块 */
  html.wx .page-title-card,
  html.wx .zhuotai-announcement-card {
    background: rgba(0, 0, 0, 0.30) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* 输入区：减少 blur，提升稳定性与对比度 */
  html.wx .input-section {
    background: rgba(18, 18, 18, 0.96) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* 输入框：略提高对比与触控手感（字号仍强制 16px 防缩放） */
  html.wx .content-input {
    background: rgba(255, 255, 255, 0.10) !important;
    border-color: rgba(255,255,255,0.24) !important;
  }

  /* 弹幕历史：减少透明叠加导致的“灰蒙” */
  html.wx #danmu-history .history-item {
    /* 使用主题注入的变量（支持后台调整弹幕记录背景色/透明度） */
    background: var(--dh-bg, rgba(255, 255, 255, 0.07)) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
  }

  /* @ 提示：字号随微信变量走（兼容弹幕/私信） */
  html.wx .mention-item {
    font-size: var(--ui-fs-14);
    padding: 11px 15px;
  }
}