/* ============================================================
   夜之子 · 手机 / 触屏专用样式
   只在窄屏（<=960px）或触屏设备上生效
   桌面端的同名覆盖在 desktop.css
   ============================================================ */

/* ---------- 窄屏布局：播放器在上、聊天在下 ---------- */

@media (max-width: 960px) {
  .stage { flex-direction: column; }
  .player-wrap { padding: 0; flex: 0 0 auto; }
  .video-shell {
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
    aspect-ratio: 16 / 9;
    max-height: 62vh;
  }
  .side {
    width: auto;
    flex: 1 1 auto;
    border-left: none;
    border-top: 1px solid var(--line);
    height: auto;
    min-height: 0;
  }
  .topbar { gap: 16px; padding: 0 18px; }
  .room-meta .label { display: none; }
  /* iOS 输入框字号小于 16px 会触发页面缩放 */
  .chat-form input,
  .url-row input,
  .danmaku-bar input { font-size: 16px; }
  .danmaku { font-size: 15px; }
  /* 非全屏时控制条压低，别挡太多画面 */
  .controls { padding: 12px 10px 6px; }
  .control-row { margin-top: 2px; gap: 8px; }
  .controls .icon-btn { padding: 4px; }
  .controls .ctrl-text { padding: 3px 5px; }
  .danmaku-bar input { max-width: none; }
}

@media (max-width: 760px) {
  .app { height: 100vh; height: 100dvh; }
  .control-row { flex-wrap: wrap; }
  .danmaku-bar {
    order: 3;
    flex-basis: 100%;
    margin: 8px 0 0;
  }
  .room-name, .room-badge { display: none; }
  .auth-view { padding: 22px; }
  .lobby { padding: 28px 18px 60px; }
  .lobby-title { font-size: 22px; }
  .lobby-user { gap: 8px; }
  .leave-btn { margin-left: 0; }
}

@media (max-width: 560px) {
  .brand { font-size: 32px; }
  .topbar { height: 54px; gap: 10px; }
  .brand.small { font-size: 12px; }
  .status { font-size: 10px; }
  .status .divider, .status span:last-child { display: none; }
  /* 手机上也要显示时长，紧凑一点 */
  .time {
    display: inline-flex;
    font-size: 10.5px;
    letter-spacing: .02em;
  }
  .control-left { gap: 8px; }
  .control-left, .control-right { gap: 6px; }
  .danmaku-bar { gap: 6px; }
  .danmaku-bar .send-dm { padding: 6px 10px; letter-spacing: .08em; }
  .messages { padding: 14px 16px; gap: 12px; }
  .empty-copy { font-size: 11px; }
  .url-row { flex-direction: column; }
  .url-row .btn { width: 100%; }
  .source-actions .btn { width: 100%; }
}

/* ---------- 手机端控制条：不显示弹幕栏（手机端没有全屏功能） ---------- */

@media (max-width: 960px) {
  .danmaku-bar { display: none; }
}

/* ---------- 触屏专属 ---------- */

@media (max-width: 960px), (hover: none), (pointer: coarse) {
  /* 手机端控制条：不做淡入淡出，点了立刻出现 / 立刻消失 */
  .controls {
    padding: 12px 10px 6px;
    pointer-events: none;
    transition: none !important;
  }

  .controls.pinned { pointer-events: auto; }

  .control-row { margin-top: 2px; gap: 8px; }
  .controls .icon-btn { padding: 4px; }
  .controls .ctrl-text { padding: 3px 5px; }

  /* 片源面板（换源）：手机端做成整屏浮层，别挤在 220px 的小播放器里 */
  .video-empty {
    padding: 18px 16px;
    justify-content: center;
  }

  .video-empty.on-top,
  .video-empty.sheet {
    position: fixed;
    inset: 0;
    z-index: 400;
    padding: 26px 30px calc(26px + env(safe-area-inset-bottom));
    background: rgba(7, 7, 7, .97);
    backdrop-filter: blur(10px);
    justify-content: center;
    overflow: hidden;
    touch-action: none;
  }

  /* 这两行说明文字在手机上不要 */
  .video-empty .empty-copy,
  .video-empty .src-note { display: none; }

  /* 输入框 + 右侧加载按钮在同一行，高度一致但压低 */
  .video-empty .url-row {
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }

  .video-empty .fs-label {
    display: inline-block;
    flex: 0 0 auto;
    font-size: 11.5px;
    letter-spacing: .02em;
    color: var(--muted);
    white-space: nowrap;
  }

  .video-empty .src-select .fs-label {
    display: block;
  }

  .video-empty .url-row input {
    flex: 1 1 auto;
    min-width: 0;
    height: 34px;
    padding: 0 10px;
    font-size: 11.5px;
    border-radius: 4px;
  }

  .video-empty .url-row .btn {
    flex: 0 0 58px;
    width: 58px;
    height: 34px;
    padding: 0;
    font-size: 12px;
    letter-spacing: .02em;
  }

  /* 选项框常驻：没解析时就是空白框 */
  .video-empty .src-select,
  .video-empty .src-select.hidden {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 420px;
    margin-top: 10px;
  }

  /* 两个标签同宽，输入框和选项框左边对齐 */
  .video-empty .url-row .fs-label,
  .video-empty .src-select .fs-label {
    width: 66px;
    flex: 0 0 66px;
    margin: 0;
    text-align: left;
  }

  .video-empty .src-select-btn {
    height: 34px;
    padding: 0 10px;
    font-size: 11.5px;
  }

  .video-empty .src-select .src-play {
    flex: 0 0 58px;
    width: 58px;
    height: 34px;
    padding: 0;
    font-size: 12px;
  }

  .video-empty .empty-mark,
  .video-empty .empty-title,
  .video-empty .spectator-hint { display: none; }

  .video-empty .spectator-hint { font-size: 12px; }

  .video-empty .url-row {
    width: 100%;
    max-width: 420px;
  }

  .video-empty #sourceControls {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .video-empty #backBtn {
    margin-top: 18px;
    width: 100%;
    max-width: 420px;
    height: 40px;
    font-size: 12px;
  }

  /* 手机端用选择框，旧的候选列表不用 */
  .video-empty .candidates { display: none; }

  /* 音量按钮不要（音量用右半屏上下滑） */
  .vol-wrap { display: none; }

  /* 手机端：全屏按钮左边加一个弹幕开关 */
  #btnDanmakuMini { display: flex; }

  /* 播放器区域自己接管手势 */
  .video-shell { touch-action: none; }
  .progress { touch-action: none; }

  /* 弹幕输入只在全屏显示 */
  .danmaku-bar { display: none; }
  .video-shell:fullscreen .danmaku-bar,
  .video-shell.web-fs .danmaku-bar { display: flex; }
}

/* ---------- 免责协议勾选（手机） ---------- */
@media (max-width: 960px), (hover: none), (pointer: coarse) {
  .agree-row { font-size: 11px; margin: 2px 0 12px; }
  .agree-row input[type="checkbox"] { width: 16px; height: 16px; flex: 0 0 16px; }
}