/* ============================================================
   响应式适配（手机 / 平板 / 小屏笔记本）
   断点：≤1024 平板横屏 / ≤860 平板竖屏·大屏手机（抽屉+语音房底部sheet）
         ≤560 手机收紧 / ≤420 小屏单列
   本文件最后加载，覆盖 layout / pages / room 中的旧断点规则
   ============================================================ */

:root { --ctrl-h: 78px; }

/* ---------- 全局：触摸与滚动安全 ---------- */
button, a, .nav-item, .seat, .room-card, .gd-cell, .rc-tab, .gd-tab, .quick-phrase {
  touch-action: manipulation;
}
.view, .chat-stream, .gd-grid-wrap, .modal-body, .member-tab-list, .gift-board,
.svc-msgs, .auth-panel { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
img, video { max-width: 100%; }
.tb-menu { display: none; }

/* ============================================================
   平板横屏 ≤1024
   ============================================================ */
@media (max-width: 1024px) {
  .room-body { grid-template-columns: 1fr 300px; }
  .room-aside { display: none; }
  .seats { gap: 22px 16px; }
}

/* ============================================================
   平板竖屏 / 大屏手机 ≤860 —— 主适配区
   ============================================================ */
@media (max-width: 860px) {

  /* ---------- 框架：侧栏改抽屉（撤销 layout.css 的 68px 图标栏） ---------- */
  :root { --sidebar-w: 0px; }
  #app { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 210;
    width: 284px; max-width: 84vw;
    transform: translateX(-106%);
    transition: transform .28s var(--ease);
    box-shadow: var(--shadow-lg);
  }
  body.sb-open .sidebar { transform: none; }
  .sidebar-backdrop {
    display: none; position: fixed; inset: 0; z-index: 205;
    background: rgba(4, 8, 12, .58);
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  }
  body.sb-open .sidebar-backdrop { display: block; }
  /* 恢复被 layout.css ≤860 隐藏的侧栏文字 */
  .brand .brand-text { display: block; }
  .nav-caption { display: block; }
  .nav-item span.label { display: inline; }
  .nav-badge { display: inline-flex; }
  .side-user .su-meta { display: block; }
  .side-user .su-actions { display: flex; }
  .nav-item { justify-content: flex-start; padding: 0 18px; }
  .brand { justify-content: flex-start; padding-left: 20px; padding-right: 20px; }
  .side-user { justify-content: flex-start; }

  /* ---------- 顶栏 ---------- */
  .topbar { padding: 0 10px; gap: 8px; }
  .tb-menu { display: grid; }
  .tb-title h1 { font-size: 15px; letter-spacing: .04em; }
  .tb-sub { display: none; }
  .tb-search { flex: 1 1 auto; min-width: 70px; }
  .tb-search kbd { display: none; }
  .tb-search .search-pop {
    left: 0; right: 0; top: calc(100% + 8px); width: auto; min-width: 0;
    max-width: none; max-height: 60vh; overflow-y: auto;
  }
  .wallet-chip { padding: 0 9px; gap: 5px; }
  .tb-actions { gap: 4px; }
  .tb-actions .icon-btn { width: 36px; height: 36px; }

  /* ---------- 页面容器与通用卡片 ---------- */
  .page { padding: 14px 12px calc(30px + env(safe-area-inset-bottom, 0px)); }
  .page-head { gap: 10px; }
  .page-head h2 { font-size: 18px; }
  .page-head .ph-actions { flex-wrap: wrap; }
  .hall-hero { min-height: 0; padding: 18px 18px; margin-bottom: 14px; }
  .hall-hero h2 { font-size: 21px; letter-spacing: .08em; }
  .hall-hero p { font-size: 12px; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }

  /* iOS 输入框聚焦不缩放 */
  .input, .textarea, input, select, textarea { font-size: 16px; }

  /* ---------- 语音房 ---------- */
  .room-layer { z-index: 120; }
  .room-top { height: 52px; padding: 0 10px; gap: 8px; }
  .room-top .rt-name { font-size: 14px; gap: 6px; }
  .room-top .rt-sub { display: none; }
  .room-top .rt-actions { gap: 4px; }
  .room-top .rt-actions .btn { padding: 0 10px; height: 32px; font-size: 12px; }
  .room-body { grid-template-columns: 1fr; grid-template-rows: 1fr; }

  .room-stage {
    padding: 12px 10px calc(46vh + var(--ctrl-h) + 22px);
    overflow-y: auto; overflow-x: hidden;
  }
  .stage-meta { margin-bottom: 16px; }
  .stage-meta-inner { gap: 9px; padding: 5px 12px; font-size: 11.5px; flex-wrap: wrap; justify-content: center; }

  /* 麦位：保持 5 人 / 8 人一排，整体缩小 */
  .seats { gap: 18px 8px; max-width: 520px; }
  .seats.chat8 { gap: 20px 8px; }
  .seats.game5 { grid-template-columns: repeat(5, 1fr); }
  .seats.chat8 { grid-template-columns: repeat(4, 1fr); }
  .seat { width: 60px; height: 60px; border-width: 1.5px; }
  .seat .avatar { width: 50px; height: 50px; font-size: 19px; }
  .seat-name { font-size: 11px; max-width: 64px; margin-top: 5px; }
  .seat-col { gap: 5px; }

  /* 聊天：常驻底部 sheet（覆盖 room.css 中滑出屏外且无人切换的旧 .show 方案） */
  .room-chat {
    position: fixed; left: 0; right: 0;
    bottom: calc(var(--ctrl-h) + env(safe-area-inset-bottom, 0px));
    top: auto; width: auto; height: 46vh;
    transform: none;
    border-radius: 16px 16px 0 0;
    border: 1px solid var(--border); border-bottom: 0;
    box-shadow: 0 -14px 40px rgba(0, 0, 0, .5);
    z-index: 18;
  }
  .rc-tab { height: 40px; font-size: 12.5px; }
  .chat-quick { overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .chat-quick::-webkit-scrollbar { display: none; }
  .quick-phrase { flex: none; }
  .chat-line { font-size: 12.5px; }
  .member-tab-list, .gift-board { padding: 10px 12px; }

  /* 底部控制条：安全区 */
  .room-controls {
    height: auto; min-height: var(--ctrl-h);
    gap: 4px; padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
  }
  .ctrl-btn { width: 54px; }
  .ctrl-btn span.ctrl-label { display: none; }
  .ctrl-btn .ctrl-circle { width: 42px; height: 42px; }
  .ctrl-btn.leave .ctrl-circle { width: 48px; height: 48px; }

  /* 礼物抽屉：底部全宽 sheet */
  .gift-drawer {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    width: auto; height: min(86vh, 660px);
    transform: translateY(106%);
    border-radius: 18px 18px 0 0;
    border: 1px solid var(--border); border-bottom: 0;
    z-index: 60;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .gift-drawer.open { transform: none; }
  .gd-head { padding: 12px 14px 10px; }
  .gd-foot { flex-wrap: wrap; row-gap: 8px; }
  .gd-send-wrap { margin-left: auto; }

  /* 连击角标：避开底部 sheet */
  .gift-combo { right: 10px; bottom: calc(46vh + var(--ctrl-h) + 14px); transform: scale(.92); transform-origin: right bottom; }

  /* 大礼物全屏特效缩放（特效层在舞台区内，居中偏上避让聊天 sheet） */
  .gift-fx .fx-glyph { width: 96px; height: 96px; border-radius: 26px; }
  .gift-fx .fx-glyph .icon { width: 56px; height: 56px; }
  .gift-fx .fx-title { font-size: 20px; letter-spacing: 4px; }
  .gift-fx .fx-sub { font-size: 12.5px; }
  .gift-fx .fx-qty { font-size: 13.5px; }
  .gift-fx .fx-card { padding-bottom: 18%; }

  /* 用户卡浮层（点麦位弹出） */
  .user-pop { width: min(250px, calc(100vw - 24px)); max-height: 70vh; overflow-y: auto; }

  /* 最小化悬浮条：左起留客服 FAB 位 */
  .voice-dock {
    left: 10px; right: 78px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    justify-content: space-between; min-width: 0;
  }
  .voice-dock .vd-info { min-width: 0; }
  .voice-dock .vd-name, .voice-dock .vd-sub {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* 客服浮窗 */
  .svc-fab {
    left: auto; right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .svc-panel {
    left: 10px; right: 10px; top: auto;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    width: auto; height: min(620px, calc(100dvh - 120px));
  }

  /* ---------- 弹窗 / 通知 / 引导 ---------- */
  .modal-scrim { padding: 14px; }
  .modal { width: 100%; max-width: 480px; max-height: 92dvh; }
  .pop-panel { max-width: calc(100vw - 20px) !important; }
  .onboarding { padding: 12px; }
  .ob-card { width: 100%; max-width: 460px; max-height: 94dvh; }

  /* ---------- 登录注册 ---------- */
  .auth-gate { grid-template-columns: 1fr; }
  .auth-hero { display: none; }
  .auth-panel { padding: 22px 18px calc(22px + env(safe-area-inset-bottom, 0px)); }
}

/* ============================================================
   手机 ≤560
   ============================================================ */
@media (max-width: 560px) {
  .topbar { gap: 6px; }
  .tb-title { display: none; }
  .tb-search { flex: 1 1 0; }
  .page-head h2 { font-size: 17px; }

  /* 列表型卡片单列；图片型网格保留两列 */
  .room-grid, .companion-grid, .guild-grid { grid-template-columns: 1fr; }
  .wall-grid, .shop-grid { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-2 { grid-template-columns: 1fr; }

  /* 房间顶部只留房间名 + 操作 */
  .room-top .rt-actions .btn span { display: none; }
  .room-top .rt-actions .btn { width: 34px; padding: 0; display: grid; place-items: center; }
  .room-stage { padding-left: 8px; padding-right: 8px; }

  /* 麦位再收一档 */
  .seats { gap: 14px 6px; }
  .seat { width: 54px; height: 54px; }
  .seat .avatar { width: 45px; height: 45px; font-size: 17px; }
  .seat-name { max-width: 58px; }

  /* 聊天 sheet 略加高（短屏仍可看到输入条） */
  .room-chat { height: 48vh; }
  .room-stage { padding-bottom: calc(48vh + var(--ctrl-h) + 18px); }
  .gift-combo { bottom: calc(48vh + var(--ctrl-h) + 12px); }

  .gd-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .gd-icon { width: 38px; height: 38px; }
  .gd-icon .icon { width: 30px; height: 30px; }
  .gd-send { min-width: 84px; padding: 6px 14px; }
  .gd-target { width: 48px; }
}

/* ============================================================
   小屏手机 ≤380
   ============================================================ */
@media (max-width: 380px) {
  .wall-grid, .shop-grid { grid-template-columns: 1fr; }
  .ctrl-btn { width: 46px; }
  .ctrl-btn .ctrl-circle { width: 40px; height: 40px; }
  .room-controls { gap: 2px; padding-left: 4px; padding-right: 4px; }
  .gd-grid { grid-template-columns: repeat(4, 1fr); gap: 5px; }
}

/* ============================================================
   横屏矮屏（手机横过来时，sheet 压低，保证麦位可见）
   ============================================================ */
@media (max-width: 900px) and (max-height: 520px) {
  .room-chat { height: 40vh; }
  .room-stage { padding-bottom: calc(40vh + var(--ctrl-h) + 12px); }
  .gift-drawer { height: 92vh; }
  .gift-combo { bottom: calc(40vh + var(--ctrl-h) + 8px); }
  .seats { gap: 10px 6px; }
  .seat { width: 48px; height: 48px; }
  .seat .avatar { width: 40px; height: 40px; font-size: 16px; }
  .stage-meta { display: none; }
}