/* ============================================================
   mobile.css —— 全站手机端适配层
   生效条件：视口宽 ≤767px（竖屏手机）
             或 视口高 ≤480px 且 宽 ≤1024px（横屏手机）
   —— 桌面（宽 >767 且 非矮横屏）零影响。
   引入位置：各页自有 stylesheet 之后（同特异性下后者覆盖）。
   原则：只改布局与尺寸，不改结构语义、不改功能入口。
   ============================================================ */

@media (max-width: 767px), (max-height: 480px) and (max-width: 1024px) {

  /* ========== 0. 通用：触控友好 + 防 iOS 聚焦缩放 ========== */
  .btn { padding: 7px 12px; font-size: 13px; }
  .input, select.input, textarea.input, input.input { padding: 7px 8px; font-size: 16px; }

  /* ========== 1. 老式弹窗：居中卡片，不溢出屏幕 ========== */
  .oldwin {
    position: fixed !important;
    left: 50% !important; top: 50% !important;
    transform: translate(-50%, -50%);
    width: auto !important; max-width: calc(100% - 20px);
    max-height: 90vh; overflow: auto;
  }
  .oldwin .win-body { padding: 10px 12px; }
  .oldwin .win-body .form-table { width: 100%; }
  .oldwin .form-table td { padding: 6px 4px; }

  /* ========== 2. 认证页（登录 / 注册 / 找回密码） ========== */
  body.authpage { overflow-y: auto; }
  body.authpage .menubar td { padding: 9px 10px; font-size: 13px; }
  body.authpage .auth-box { width: auto !important; margin: 0 8px 14px; }
  body.authpage .win-body { padding: 12px 10px; }
  /* 表单行竖排：标签一行、控件一行 */
  body.authpage .form-table tr { display: block; }
  body.authpage .form-table td { display: block; width: auto !important; padding: 3px 2px; }
  body.authpage .form-table td.lbl { text-align: left; padding-top: 9px; }
  /* 注册页头像预览列（原 rowspan）竖排后单独成块，居中展示 */
  body.authpage .form-table td[rowspan] { text-align: center !important; padding: 6px 0 10px; }
  /* 地区三级下拉等分一行 */
  body.authpage #regProvince,
  body.authpage #regCity,
  body.authpage #regDistrict { width: 31%; margin-right: 3px; }
  /* 主要动作按钮撑宽，好点 */
  body.authpage .auth-box .form-table .btn { width: 100% !important; padding: 10px 0 !important; font-size: 15px !important; }
  body.authpage .auth-box .form-table td[align="center"] .btn { width: auto !important; min-width: 200px; }
  /* 头像下拉浮层铺满 */
  body.authpage .av-pop { width: 100%; left: 0 !important; }
  /* 注册成功强提示框 */
  body.authpage #okWin { width: auto !important; left: 8px !important; right: 8px !important; margin-left: 0 !important; }

  /* ========== 3. 后台（admin） ========== */
  body.adminpage { overflow-x: hidden; }
  body.adminpage table { max-width: 100%; }
  body.adminpage .oldwin { width: auto !important; }
  body.adminpage input.input, body.adminpage select.input { max-width: 100%; }
}

/* ============================================================
   R. 房间页（body.roompage）—— 三标签整屏切换
   顶栏(34) + 三标签(32) + 内容区 + 底部输入栏；
   桌面版菜单条/工具栏收进左上 ☰ 抽屉。
   ============================================================ */

/* 手机端专用外壳：桌面一律隐藏 */
.mbar, .mtabs, .mMask, .mDrawer { display: none; }

@media (max-width: 767px), (max-height: 480px) and (max-width: 1024px) {
  html.roompage, body.roompage { height: 100%; height: 100dvh; overflow: hidden; }

  /* ---- 顶栏 ---- */
  body.roompage .mbar {
    position: fixed; left: 0; right: 0; top: 0; height: 34px; z-index: 60;
    display: flex; align-items: center; gap: 8px; padding: 0 9px;
    background: #D4D0C8; border-bottom: 1px solid #808080;
    font-family: "SimSun","宋体",serif; font-size: 12px; color: #000;
  }
  body.roompage .mhamb {
    flex: 0 0 auto; width: 32px; height: 26px; padding: 0; background: transparent;
    border: 1px solid transparent; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 3px;
  }
  body.roompage .mhamb i { display: block; width: 16px; height: 2px; background: #000; }
  body.roompage .mroom {
    flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap;
    text-overflow: ellipsis; font-weight: bold; color: #000080;
  }
  body.roompage .monline { flex: 0 0 auto; color: #008000; }

  /* ---- 三标签 ---- */
  body.roompage .mtabs {
    position: fixed; left: 0; right: 0; top: 34px; height: 32px; z-index: 60;
    display: flex; background: #D4D0C8; border-bottom: 1px solid #808080;
    font-family: "SimSun","宋体",serif; font-size: 13px;
  }
  body.roompage .mtab {
    flex: 1 1 0; display: flex; align-items: center; justify-content: center;
    color: #555; border-top: 2px solid transparent; border-right: 1px solid #808080;
  }
  body.roompage .mtab:last-child { border-right: 0; }
  body.roompage .mtab.on { background: #FFF; color: #000; border-top-color: #000080; font-weight: bold; }
  body.roompage .mtab .mcnt { margin-left: 4px; color: #CC0000; }

  /* ---- 让位顶栏+三标签 ---- */
  body.roompage #layout {
    display: flex; flex-direction: column;
    height: calc(100% - 66px); margin: 66px auto 0; width: 100%;
  }
  body.roompage #layout > tbody { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
  body.roompage #layout > tbody > tr { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
  body.roompage #layout > tbody > tr > td { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; width: 100%; }

  /* ---- 桌面 chrome 收进抽屉 ---- */
  body.roompage .menubar, body.roompage .toolbar { display: none !important; }

  /* ---- 主体表块化 ---- */
  body.roompage #mainTable,
  body.roompage #mainTable > tbody { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
  body.roompage #mainTable > tbody > tr { display: flex; flex-direction: column; }
  body.roompage #mainTable > tbody > tr:first-child { flex: 1 1 auto; min-height: 0; position: relative; }
  body.roompage #mainTable > tbody > tr > td { display: block; width: 100%; }

  /* ---- 用户列表 / 聊天区 = 两个整屏视图 ---- */
  body.roompage #mainTable td.user-panel,
  body.roompage #mainTable td.chat-panel {
    position: absolute; left: 0; top: 0; right: 0; bottom: 0;
    display: flex; flex-direction: column; min-height: 0; border: 0;
  }
  /* 注意: 必须带 #mainTable 以压过上面「整屏视图」规则(id 权重更高), 否则切标签时另一侧不隐藏 */
  body.roompage[data-mtab="users"] #mainTable td.chat-panel { display: none; }
  body.roompage[data-mtab="chat"] #mainTable td.user-panel,
  body.roompage[data-mtab="priv"] #mainTable td.user-panel { display: none; }
  body.roompage[data-mtab="chat"] .private-head,
  body.roompage[data-mtab="chat"] #privateArea { display: none; }
  body.roompage[data-mtab="priv"] #adBanner,
  body.roompage[data-mtab="priv"] #micQueueBox,
  body.roompage[data-mtab="priv"] #chatArea { display: none; }

  /* ---- 滚动区高度交给 flex（覆盖桌面 layout() 写入的固定高） ---- */
  body.roompage #userList { flex: 1 1 auto; min-height: 0; height: auto !important; }
  body.roompage #chatArea { flex: 3 1 0; min-height: 0; height: auto !important; }
  body.roompage #privateArea { flex: 2 1 0; min-height: 0; height: auto !important; }

  /* ---- 广告位压扁 ---- */
  /* 广告位压扁；width:auto 交给 flex 拉伸，避免 width:100% + 左右 margin 溢出屏外 */
  body.roompage #adBanner { flex: 0 0 auto; height: 26px !important; width: auto !important; margin: 4px 5px 0; font-size: 10px; box-sizing: border-box; }

  /* ---- 用户列表：行更高好点选 ---- */
  body.roompage table.user-head td { padding: 7px 8px; }
  body.roompage table.user-row td { padding: 8px; }
  body.roompage table.user-row img.avatar { width: 28px; height: 28px; }
  body.roompage .user-nick { max-width: none; }

  /* ---- 输入区贴底 ---- */
  body.roompage td.input-panel { flex: 0 0 auto; padding-bottom: 6px; }
  body.roompage #msgInput { width: 100% !important; box-sizing: border-box; }
  body.roompage .statusbar { flex: 0 0 auto; }
  body.roompage .statusbar td { padding: 3px 8px; font-size: 11px; }

  /* ---- ☰ 抽屉 ---- */
  body.roompage .mMask {
    position: fixed; left: 0; top: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.35); z-index: 70; display: none;
  }
  body.roompage .mDrawer {
    position: fixed; left: 0; top: 0; bottom: 0; width: 62%; max-width: 240px; z-index: 71;
    overflow-y: auto; background: #D4D0C8; border-right: 1px solid #808080; display: none;
    font-family: "SimSun","宋体",serif; font-size: 13px; color: #000;
  }
  body.roompage.drawer-open .mMask { display: block; }
  body.roompage.drawer-open .mDrawer { display: block; }
  body.roompage .mDrawer .dgrp {
    padding: 6px 10px 4px; color: #666; font-size: 11px;
    background: #C6C6BE; border-bottom: 1px solid #808080;
  }
  body.roompage .mDrawer .di {
    display: flex; align-items: center; gap: 8px;
    min-height: 44px; padding: 0 12px; border-bottom: 1px solid rgba(0,0,0,.08);
  }
  body.roompage .mDrawer .di:active { background: #0A246A; color: #FFF; }
  body.roompage .mDrawer .dico {
    flex: 0 0 auto; width: 16px; height: 16px; background-color: #FFF; border: 1px solid #808080;
    background-repeat: no-repeat; background-position: center; background-size: 16px 16px;
  }
  body.roompage .mDrawer .di .bdg {
    margin-left: auto; padding: 0 5px; font-size: 11px; line-height: 15px;
    background: #C00000; color: #FFF;
  }

  /* ---- 输入区表格：取消桌面固定列宽（合计 558px 会把文档撑到屏外） ---- */
  body.roompage td.input-panel table { width: 100%; }
  /* 「发送到: / 动作: / 字体颜色:」三个标签文字收起，只留下拉并三等分 */
  body.roompage .input-opts td:nth-child(1),
  body.roompage .input-opts td:nth-child(3),
  body.roompage .input-opts td:nth-child(5) { display: none; }
  body.roompage .input-opts td:nth-child(2),
  body.roompage .input-opts td:nth-child(4),
  body.roompage .input-opts td:nth-child(6) { width: 33% !important; padding: 3px 2px; }
  body.roompage .input-opts td:nth-child(7) { display: none; }
  body.roompage .input-opts select.input { width: 100%; }
  /* 输入行：输入框吃满剩余，发送/道具按内容宽 */
  body.roompage .input-send td { width: auto !important; }
  body.roompage .input-send td.msg-cell { width: 100% !important; }
  body.roompage .input-send td.input-spacer { display: none !important; }
  body.roompage .input-send td:nth-child(2),
  body.roompage .input-send td:nth-child(3) { width: 1% !important; white-space: nowrap; padding-left: 4px; }
  /* 道具按钮同样往右挪, 与「发送」拉开间距(须写在 nth-child 之后以覆盖其 4px) */
  body.roompage .input-send td.cell-items { padding-left: 14px !important; padding-right: 6px !important; }
  /* 语音条同理取消固定列宽 */
  body.roompage .voice-bar td { width: auto !important; }
}

/* ============================================================
   H. 大厅（body.hall）—— 单列纵向；分类导航在上、房间列表在下
   ============================================================ */
@media (max-width: 767px), (max-height: 480px) and (max-width: 1024px) {
  html, body.hall { height: 100%; }
  body.hall { display: block; overflow: hidden; }
  body.hall #win {
    width: 100% !important; height: 100% !important; height: 100dvh !important;
    margin: 0 !important; border: 0; outline: 0;
  }
  body.hall #win .wbtns { display: none; }
  body.hall #win .titlebar { height: 30px; }
  /* 顶部登录区：换行铺开 */
  body.hall #win .loginbar { flex-wrap: wrap; padding: 6px; row-gap: 4px; }
  body.hall #win .loginbar .lb-lbl { margin: 0 4px 0 0; }
  body.hall #win .loginbar .lb-input { flex: 1 1 80px; width: auto; }
  body.hall #win .loginbar .btn { padding: 6px 14px; margin-left: 4px; }
  body.hall #win .loginbar .lb-msg { flex: 1 1 100%; margin: 2px 0 0; }
  /* 桌面专属 chrome 收起 */
  body.hall #win .menubar,
  body.hall #win .toolbar,
  body.hall #win .botbar { display: none !important; }
  /* 主体改纵向 */
  body.hall #win .wbody { flex-direction: column; }
  /* 分类导航：压缩成顶部一条横向可滑的标签，省纵向空间 */
  body.hall #win .lwin { flex: 0 0 auto; width: 100% !important; height: 90px; max-height: none; border-right: 0; border-bottom: 1px solid #000080; }
  body.hall #win .ltitle { height: 22px; line-height: 22px; }
  body.hall #win .nav {
    display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 4px;
    padding: 4px 6px; overflow-x: auto; overflow-y: hidden;
  }
  body.hall #win .navitem { flex: 0 0 auto; min-height: 30px; padding: 0 10px; border: 1px solid #1B5FBF; }
  body.hall #win .navitem span { white-space: nowrap; }
  body.hall #win .rwin { flex: 1 1 auto; min-height: 0; }
  body.hall #win .notice { height: 26px; line-height: 26px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  /* 房间网格单列 */
  body.hall #win .grid table.g2 > tbody > tr { display: block; }
  body.hall #win .grid table.g2 > tbody > tr > td { display: block; width: 100% !important; padding: 0 !important; }
  body.hall #win .bhead { height: 26px; line-height: 26px; }
  /* 房间行加高，好点 */
  body.hall #win .row { height: auto; line-height: 2.2; padding: 1px 0; }
}

/* ============================================================
   F. 好友面板（body.friends-page）—— 面板 / 聊天窗全屏铺开
   ============================================================ */
@media (max-width: 767px), (max-height: 480px) and (max-width: 1024px) {
  body.friends-page { overflow: hidden; }

  /* 面板全屏 */
  body.friends-page #friendPanel {
    position: fixed !important; left: 0 !important; top: 0 !important;
    width: 100% !important; min-width: 0 !important; max-width: none !important;
    height: 100% !important; height: 100dvh !important; max-height: none !important;
    transform: none;
  }
  body.friends-page #fpResize,
  body.friends-page #fpResizeB,
  body.friends-page #fpResizeBR { display: none; }
  body.friends-page #fpTabs div { padding: 10px 10px; }
  body.friends-page .grp { padding: 7px 6px; }
  body.friends-page .frow { padding: 10px 6px 10px 12px; }
  body.friends-page .av { width: 36px; height: 36px; flex: 0 0 36px; }
  body.friends-page #fpList { max-height: none; }
  body.friends-page #fpFoot { padding: 6px; }
  body.friends-page #fpFoot .btn { flex: 1 1 0; padding: 10px 0; }
  body.friends-page #fpSearchBar .input { font-size: 16px; }
  body.friends-page #paneS table td { padding: 4px 2px; }
  body.friends-page #paneS .input { width: 100% !important; font-size: 16px; }
  body.friends-page #paneS .btn { padding: 9px 14px; }
  body.friends-page #sResult { height: 40vh; }
  body.friends-page #mtReq, body.friends-page #mtSys { padding: 9px 10px; }
  body.friends-page .reqrow .btn { padding: 8px 14px; }

  /* 聊天窗全屏（.win-body 改用列向 flex，内部固定高度交给比例） */
  body.friends-page #chatWin {
    position: fixed !important; left: 0 !important; top: 0 !important;
    width: 100% !important; max-width: none !important;
    height: 100% !important; height: 100dvh !important; max-height: none !important;
    transform: none;
  }
  body.friends-page #chatWin .win-body {
    display: flex; flex-direction: column;
    height: calc(100% - 20px); box-sizing: border-box; padding: 8px;
  }
  body.friends-page #cwMsg { flex: 1 1 auto; min-height: 0; height: auto !important; }
  body.friends-page #cwInput { height: 66px; font-size: 16px; }
  body.friends-page #chatWin .btn { padding: 9px 14px; }
  body.friends-page #histMsg { height: 56vh; }

  /* 其他弹窗（添加好友 / 声音设置 / 资料卡 / 修改资料）由通用 .oldwin 居中卡片化接管 */
  body.friends-page #myEditWin .input,
  body.friends-page #addWin .input { font-size: 16px; }
  body.friends-page #myEditWin table td .input { width: 100% !important; }

  /* 自制模态框铺满屏宽 */
  body.friends-page #dlg { width: calc(100% - 20px) !important; left: 10px !important; }
}

/* ============================================================
   G. 全局悬浮层（全屏控制条 / PWA 安装条）—— 避免遮挡手机顶栏与输入区
   ============================================================ */
@media (max-width: 767px), (max-height: 480px) and (max-width: 1024px) {
  /* 全屏控制条：桌面上贴右上角，手机上移到右下角并去掉标题，避免压住顶栏 */
  #fsBar { top: auto !important; bottom: 24px !important; right: 3px !important; }
  #fsBar .fs-title { display: none; }
  /* PWA 安装提示：改为贴底整条，不悬在输入框上方 */
  #pwaInstall {
    left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
    transform: none !important; justify-content: center;
  }
}