/* =====================================================================
   styles_mobile.css — shared mobile overrides for both pages
   ===================================================================== */

@media (max-width: 768px) {

  /* ===== Marketplace mobile ===== */
  html, body { overflow-x: hidden; }
  .mk-shell { padding: 0 16px 96px; max-width: 100vw; overflow-x: hidden; box-sizing: border-box; }
  .mk-topbar { margin: 0 -16px; padding: 0 16px; max-width: 100vw; box-sizing: border-box; }
  .mk-topbar-row {
    /* 5/17: minmax(0, 1fr) 防 input 子项 intrinsic min-width 撑爆 column → search 越屏真因 */
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    height: auto;
    padding: 12px 0 0;
    gap: 10px;
  }
  .mk-brand-mark { width: 40px; height: 40px; border-radius: 10px; }
  .mk-brand-zh { font-size: 18px; }
  .mk-brand-sub { font-size: 10.5px; letter-spacing: 0.04em; }
  .mk-cta-primary {
    height: 38px; padding: 0 14px; font-size: 13px;
  }
  /* 5/17 founder: 别 hide span 文字, 用户看到空按钮不懂 */
  .mk-cta-primary span { display: inline-block; font-size: 13px; white-space: nowrap; }
  .mk-cta-primary svg { width: 16px; height: 16px; }
  .mk-search {
    grid-column: 1 / -1;
    margin: 4px 0 0;
    height: 42px;
  }
  .mk-search input {
    font-size: 14px; padding-left: 44px; padding-right: 16px;
    text-overflow: ellipsis;  /* 5/17 防 placeholder 长溢出 */
  }
  /* 5/17 strong hide ⌘K mobile (specificity 之前不够) */
  .mk-search .mk-search-kbd, .mk-search-kbd { display: none !important; }

  .mk-filterbar {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px 0;
  }
  /* 5/17 founder 反馈: chips 移动端不要 horizontal scroll (右边被切看不到 🔥 高人气 etc),
     改 flex-wrap 让 10 个 chip 全可见, 占 2-3 行 */
  .mk-chips {
    flex-wrap: wrap;
    overflow-x: visible;
    gap: 6px;
  }
  .mk-chip {
    height: 30px;
    padding: 0 11px;
    font-size: 12px;
  }
  .mk-chip-count { font-size: 10.5px; }
  .mk-filter-right {
    display: flex;
    gap: 10px;
    align-items: center;
  }
  .mk-more-btn { height: 32px; padding: 0 11px; font-size: 12px; }
  .mk-sort { flex-shrink: 0; height: 32px; font-size: 12px; }

  .mk-resultmeta { padding: 18px 0 12px; }
  .mk-resultmeta h1 { font-size: 18px; }
  .mk-resultmeta .sub { font-size: 11px; }

  .mk-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .mk-card { border-radius: 12px; }
  .mk-card-overlay { padding: 50px 10px 10px; }
  .mk-card-name { font-size: 13px; }
  .mk-card-meta { font-size: 10.5px; gap: 5px; }
  .mk-card-meta .lang-tag { display: none; }
  .mk-badge { height: 20px; font-size: 9px; padding: 0 6px; }
  .mk-card-tray-l, .mk-card-tray-r { top: 8px; gap: 4px; }
  .mk-card-tray-l { left: 8px; }
  .mk-card-tray-r { right: 8px; }
  .mk-card-cta-hint { bottom: 58px; left: 8px; right: 8px; height: 26px; font-size: 11px; }

  .mk-footer {
    padding: 28px 4px 24px;
    margin-top: 36px;
  }
  .mk-footer-copyright { font-size: 12px; margin-bottom: 6px; }
  .mk-footer-org { font-size: 11.5px; line-height: 1.7; }
  .mk-footer-warn { font-size: 10.5px; margin-top: 12px; }
  .mk-modal { padding: 20px; max-height: 88vh; border-radius: 14px; }

  /* ===== Avatar page mobile ===== */
  .tv-shell { padding: 12px 14px 96px; }
  .hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding-bottom: 14px;
  }
  .hero-brand { width: 100%; gap: 12px; }
  .hero-divider { display: none; }
  .hero-mark { width: 46px; height: 46px; border-radius: 11px; }
  .hero-title-zh { font-size: 21px; }
  .hero-title-en { display: none; }
  .hero-sub {
    flex-wrap: wrap;
    white-space: normal;
    font-size: 11.5px;
    gap: 6px;
  }
  .hero-status {
    width: 100%;
    justify-content: flex-start;
    gap: 6px;
  }
  .chip { height: 30px; padding: 0 10px; font-size: 11.5px; }
  .chip-host .avatar { width: 22px; height: 22px; font-size: 11px; }
  .nav-tabs {
    overflow-x: auto;
    scrollbar-width: none;
    margin: 12px -14px 0;
    padding: 0 14px 4px;
  }
  .nav-tabs::-webkit-scrollbar { display: none; }
  .tab { height: 34px; padding: 0 10px; font-size: 13px; flex-shrink: 0; }

  .main-grid {
    grid-template-columns: 1fr !important;
    gap: 18px;
    margin-top: 18px;
  }
  .player { border-radius: 14px; }
  .video-wrap { border-radius: 14px 14px 0 0; }
  .sub-bar { padding: 50px 18px 16px; }
  .sub-line { font-size: 17px !important; }
  .controls { height: 50px; padding: 0 12px; gap: 8px; }
  .controls .ctl-time { font-size: 11px; }
  .opt-vol .vol-track { display: none; }

  .transcript { padding: 16px 18px; border-radius: 14px; }
  .tx-current { font-size: 17px; min-height: 60px; }
  .tx-sentence { font-size: 14px; padding: 8px 10px; }

  .upnext { padding: 12px; gap: 12px; border-radius: 14px; }
  .upnext .thumb { width: 64px; height: 64px; }
  .upnext-title { font-size: 14px; }
  .upnext-blurb { font-size: 12px; }

  .timeline { padding: 14px; border-radius: 14px; }
  .slot { height: 50px !important; padding: 0 10px; grid-template-columns: 52px 1fr; }
  .slot-chips { display: none; }

  /* ===== 互动 tab — mobile (5/18 P3 重做: 主视觉占大 + 黑空间最小 + kb 弹起保脸) ===== */
  .interact-room {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto;
    gap: 0;
  }
  /* 主视觉: 5/18 v9.5 修 — 不用 aspect-ratio (老 9/16 + max-height clamp 导致 stage 宽缩 → 右侧黑空白).
     用 width:100% 撑满列宽 + 高度 62dvh, 内部 video/img 用 object-fit cover 居中裁切. */
  .interact-stage {
    width: 100%;
    height: 62dvh;
    max-height: 62dvh;
    min-height: 320px;
    border-radius: 14px 14px 0 0;
    aspect-ratio: auto;
  }
  /* video 元素让 face 上半占主 (object-position 50% 18%) */
  .interact-stage .stage-video > video,
  .interact-stage .stage-video > img {
    object-position: 50% 18% !important;
  }
  .interact-composer {
    border-radius: 0 0 14px 14px;
    padding: 10px 12px;
  }
  .interact-chat-panel {
    max-height: 200px;
    border-radius: 14px;
    margin-top: 12px;
  }
  /* === keyboard up: 锁 face 上半部分可见, composer 紧贴键盘上方 === */
  body.kb-up .interact-stage {
    aspect-ratio: auto;
    height: 34dvh;
    min-height: 200px;
    max-height: 34dvh;
  }
  /* kb-up 时 face 强制顶部对齐 (用户看到眼睛+鼻子, 不被脖子占满) */
  body.kb-up .interact-stage .stage-video > video,
  body.kb-up .interact-stage .stage-video > img {
    object-position: 50% 8% !important;
  }
  body.kb-up .interact-chat-panel { display: none; }
  body.kb-up .stage-bottom { display: none; }  /* 隐 1080p · LiveKit pill 省空间 */
  body.kb-up .mobile-cta-bar { display: none !important; }  /* CTA 让位给键盘 */

  /* unmute 按钮在 stage 内居中 */
  .stage-unmute {
    position: absolute;
    bottom: 18px; left: 50%; transform: translateX(-50%);
    z-index: 5;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(180deg, #F9A05D 0%, #DD3C28 100%);
    color: #fff;
    border: 0;
    border-radius: 999px;
    font-weight: 600; font-size: 14px;
    box-shadow: 0 6px 20px rgba(220, 60, 40, 0.45);
    cursor: pointer;
  }
  .stage-unmute i { width: 18px; height: 18px; }

  /* mobile bottom sticky sales bar */
  .mobile-cta-bar {
    display: flex !important;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 40;
    background: rgba(0,0,0,0.92);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--mk-line, var(--tv-line));
    padding: 10px 14px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    gap: 10px;
  }
  .mobile-cta-bar > button, .mobile-cta-bar > a {
    flex: 1;
    height: 44px;
    border-radius: 10px;
    border: none;
    font-size: 14px; font-weight: 600;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    cursor: pointer;
    text-decoration: none;
  }
  .mobile-cta-bar .cta-ghost {
    background: var(--mk-bg-2, #1A1A1A);
    border: 1px solid var(--mk-line, #2A2A2A);
    color: #fff;
  }
  .mobile-cta-bar .cta-primary {
    background: linear-gradient(180deg, #F9A05D 0%, #DD3C28 100%);
    color: #fff;
  }
}

/* hide mobile bar on desktop */
.mobile-cta-bar { display: none; }

/* iPad / narrow tablet */
@media (max-width: 1023px) and (min-width: 769px) {
  .main-grid { grid-template-columns: 1fr !important; gap: 22px; }
  .mk-topbar-row { grid-template-columns: 240px 1fr auto; }
}