/* css/mobile.css
   目的：在小屏幕（<=420px）下修正布局，让页面在真实移动设备或 DevTools 仿真下更友好。
*/

/* 针对较窄设备的常用调整 */
@media (max-width: 420px) {
  /* 可调参数：整体缩放与下移 */
  :root {
    --mobile-scale: 0.94;   /* 画布整体缩放比例（1 = 原始大小） */
    --mobile-offset: 12px;  /* 将画布整体下移的像素值，可设负值上移 */
  }

  /* 让画布在小屏下水平居中，以便缩放后仍对齐 */
  body { display: flex; justify-content: center; }

  /* 画布自适应宽度并占满视口高度 */
  .canvas {
    width: 100% !important;
    max-width: 390px !important;
    margin: 0 auto !important;
    min-height: 100vh !important;
    box-sizing: border-box;
    transform-origin: top center;
    transform: translateY(var(--mobile-offset)) scale(var(--mobile-scale));
    -webkit-transform: translateY(var(--mobile-offset)) scale(var(--mobile-scale));
    will-change: transform;
  }

  /* 保证滚动区域下方留出 TabBar 空间 */
  .scroll-area {
    padding-bottom: 80px !important;
  }

  /* Tabs 可水平滚动且间距适中 */
  .tabs { padding: 12px 14px 0 !important; gap: 18px !important; font-size: 15px !important; }

  /* 顶部行内按钮适当缩小 */
  .top-search-row .icon-btn { padding: 6px !important; }
  .top-search-row .search-pill { min-width: 140px; }

  /* 快捷按钮：使其在一行内或可横向滚动 */
  .quick-actions { display:flex; gap:12px; padding: 14px; overflow-x:auto; }
  .qa { flex: 0 0 auto; text-align:center; }

  /* 图片、缩略图适应容器宽度 */
  .big-img, .thumb, .circle-img {
    background-size: cover !important;
    background-position: center !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* 话题卡片布局压缩 */
  .topic-card { display:flex; gap:12px; padding:12px 14px; }
  .topic-card .thumb { width:96px; height:64px; border-radius:8px; }
  .topic-info { flex:1; min-width:0; }
  .topic-title { font-size:16px; }
  .topic-desc { font-size:13px; color:#666; }

  /* 固定底部 TabBar：保持在视口底部并受限于 max-width */
  .tabbar {
    position: fixed !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 390px !important;
    box-sizing: border-box;
    padding: 8px 10px;
    background: rgba(255,255,255,0.98);
    border-top: 1px solid rgba(0,0,0,0.06);
    z-index: 9999;
  }

  /* 调整 tab 内文字与图标大小 */
  .tabbar .tab { padding:6px 8px; font-size:12px; }
  .tabbar .tab .tab-icon { width:20px; height:20px; }

  /* 适配状态栏和工具栏的垂直间距 */
  .status-bar { padding: 6px 12px; }
  .top-search-row { padding: 8px 12px; display:flex; gap:8px; align-items:center; }

  /* 防止某些元素因固定高度溢出 */
  .frame, .scroll-area { min-height: 0; }
}