/**
 * 移动端专属样式表 (Mobile UI/UX Refinement)
 * 借鉴 dondone-app 的 App-like 移动端体验设计
 * 核心原则：
 * 1. 移动端字阶防护与手势控制（防双指误缩放、防 Safari 聚焦放大）
 * 2. 顶部轻量 TopBar + 底部原生 TabBar（单手黄金盲触）
 * 3. 通栏无死缝卡片（Full-bleed Layout）
 * 4. 44px 黄金触控目标与安全区避让
 */

/* ── 1. 视口基准与移动端全局防护 ────────────────────────────────── */
@media screen and (max-width: 640px) {
  :root {
    --dd-safe-top: env(safe-area-inset-top, 0px);
    --dd-safe-bottom: env(safe-area-inset-bottom, 0px);
    --dd-safe-left: env(safe-area-inset-left, 0px);
    --dd-safe-right: env(safe-area-inset-right, 0px);
    --mobile-topbar-height: 48px;
    --mobile-tabbar-height: 52px;
    --mobile-tap-target: 44px;
  }

  html {
    /* 移动端正文字号微调上浮至 17px，接近原生 App 阅读体感 */
    font-size: 106.25%;
  }

  body {
    /* 拦截双指缩放变形，保留单指平移 */
    touch-action: pan-x pan-y;
    overscroll-behavior-y: contain;
    -webkit-tap-highlight-color: transparent;
  }

  /* iOS Safari 在输入框字号 < 16px 时聚焦会破坏性放大整页，必须保底 16px */
  input, textarea, select {
    font-size: 16px !important;
  }
}

/* ── 2. 桌面端默认隐藏纯移动端组件 ─────────────────────────────── */
.mobile-topbar,
.mobile-tabbar {
  display: none;
}

/* ── 3. 移动端 (≤640px) App 外壳与组件 ─────────────────────────── */
@media screen and (max-width: 640px) {
  /* 隐藏桌面端沉重的黑色大横幅导航 */
  #banner {
    display: none !important;
  }

  /* 顶部轻量 TopBar：极简毛玻璃品牌条 */
  .mobile-topbar {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: calc(var(--mobile-topbar-height) + var(--dd-safe-top));
    padding-top: var(--dd-safe-top);
    padding-left: max(1rem, var(--dd-safe-left));
    padding-right: max(1rem, var(--dd-safe-right));
    background: rgba(245, 244, 239, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }

  .mobile-topbar__brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--color-text, #000305);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
  }

  .mobile-topbar__brand:active {
    opacity: 0.7;
  }

  .mobile-topbar__actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }

  .mobile-topbar__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--mobile-tap-target);
    height: var(--mobile-tap-target);
    color: var(--color-text-secondary, #666);
    text-decoration: none;
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
  }

  .mobile-topbar__btn:active {
    background: rgba(0, 0, 0, 0.06);
    color: var(--color-accent, #C74350);
  }

  .mobile-topbar__btn svg {
    width: 20px;
    height: 20px;
  }

  /* 底部原生 TabBar：毛玻璃底栏与安全区避让 */
  .mobile-tabbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    height: calc(var(--mobile-tabbar-height) + var(--dd-safe-bottom));
    padding-bottom: var(--dd-safe-bottom);
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.03);
  }

  .mobile-tabbar__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: var(--mobile-tabbar-height);
    text-decoration: none;
    color: #8c887f;
    transition: color 0.12s ease;
    user-select: none;
  }

  .mobile-tabbar__item:active {
    background-color: rgba(0, 0, 0, 0.03);
  }

  .mobile-tabbar__item.is-active {
    color: var(--color-accent, #C74350);
  }

  .mobile-tabbar__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-bottom: 2px;
  }

  .mobile-tabbar__icon svg {
    width: 20px;
    height: 20px;
    stroke-width: 2;
  }

  .mobile-tabbar__label {
    font-size: 0.65rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.02em;
  }

  /* ── 4. 通栏全宽卡片（Full-bleed Inset Flush） ───────────────────── */

  /* ── 5. 移动端文章详情页专属阅读排版 ───────────────────────────── */
  .entry-title {
    font-size: clamp(1.35rem, 5.8vw, 1.7rem) !important;
    line-height: 1.35 !important;
    letter-spacing: -0.015em !important;
    margin-top: 0.2rem !important;
    margin-bottom: 0.85rem !important;
    text-wrap: balance;
  }

  /* 文章元信息栏 */
  .post-info,
  article header time,
  article header address {
    font-size: 0.8rem !important;
    line-height: 1.5 !important;
    color: var(--color-text-muted, #8c887f) !important;
  }

  /* 正文排版与阅读呼吸感 */
  #content .entry-content {
    font-size: 1rem !important;
    line-height: 1.7 !important;
  }

  #content .entry-content p {
    margin: 1.1rem 0 !important;
    text-align: justify;
    text-wrap: pretty;
  }

  /* 代码块在移动端的平滑触摸横向滚动 */
  #content .entry-content pre,
  .shiki {
    font-size: 0.84rem !important;
    line-height: 1.5 !important;
    border-radius: 8px !important;
    padding: 0.9rem !important;
    margin: 1.2rem 0 !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* 引用块优雅微缩进 */
  #content .entry-content blockquote {
    margin: 1.2rem 0 !important;
    padding: 0.6rem 0.9rem !important;
    border-left: 3px solid var(--color-accent, #C74350) !important;
    background: rgba(0, 0, 0, 0.02) !important;
    font-size: 0.94rem !important;
    border-radius: 0 6px 6px 0;
  }

  /* ── 6. 首页与分类列表页优化 ──────────────────────────────────── */
  #post-list,
  .articles-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  #post-list > li,
  .articles-list > li {
    padding: 1.1rem 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  }

  #post-list > li:last-child,
  .articles-list > li:last-child {
    border-bottom: none !important;
  }

  /* 分页按钮：大拇指友好的大胶囊按钮 */
  .pagination {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0.75rem !important;
    margin-top: 2rem !important;
    padding-bottom: 1rem !important;
  }

  .pagination a,
  .pagination span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 38px !important;
    padding: 0 1rem !important;
    border-radius: 999px !important;
    font-size: 0.85rem !important;
  }

  .pagination a:active {
    background-color: rgba(199, 67, 80, 0.12) !important;
  }

  /* ── 7. About 页面移动端专项（Profile 置顶 + 底部滑出抽屉） ───── */
  .about-hero {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  .about-side {
    order: -1 !important;
    margin-bottom: 0.5rem !important;
    justify-content: center !important;
  }

  .about-avatar {
    width: 92px !important;
    height: 92px !important;
  }

  .about-more-grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  /* 移动端原生动作面板（Bottom Sheet） */
  .about-dialog {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: auto 0 0 0 !important;
    border-radius: 18px 18px 0 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    padding-bottom: calc(var(--dd-safe-bottom, 0px) + 1rem) !important;
  }

  .about-dialog-inner {
    margin: 0.75rem 1rem !important;
    padding: 0.5rem 0.5rem 1rem !important;
  }

  /* ── 8. Memos 动态流移动端专项 ────────────────────────────────── */
  .memos-section {
    padding: 1rem 0 !important;
  }

  .memo-card {
    border-radius: 0 !important;
    border-inline-width: 0 !important;
    padding: 1.25rem 1rem !important;
    margin-bottom: 0.75rem !important;
  }

  .memo-content-text {
    font-size: 0.98rem !important;
    line-height: 1.65 !important;
  }

  /* ── 9. Stats 统计页移动端 2x2 网格与图表 ──────────────────────── */
  #content.stats-page .stats-overview {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
    margin: 1.5rem 0 2rem !important;
  }

  #content.stats-page .stats-overview > div {
    padding: 0.85rem !important;
    border-top: 1px solid var(--color-border) !important;
  }

  #content.stats-page .stats-overview > div:nth-child(1),
  #content.stats-page .stats-overview > div:nth-child(2) {
    border-top: none !important;
  }

  #content.stats-page .stats-overview > div:nth-child(2n+1) {
    border-left: none !important;
  }

  #content.stats-page .stats-overview strong {
    font-size: 1.25rem !important;
  }

  #content.stats-page .stats-traffic-lists {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  /* 消除两边局促的 15px 灰缝和圆角，像原生新闻/社交应用一样通栏平铺 */
  #content,
  div.body {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border-radius: 0 !important;
    border-inline-width: 0 !important;
    box-shadow: none !important;
    padding-inline: max(1rem, var(--dd-safe-left)) max(1rem, var(--dd-safe-right)) !important;
    padding-top: 1.25rem !important;
    /* 给底部常驻 TabBar 预留充足空间，防止正文被底栏遮挡 */
    padding-bottom: calc(var(--mobile-tabbar-height) + var(--dd-safe-bottom) + 2rem) !important;
  }

  /* 保证页面底部页脚也给底栏让位 */
  #contentinfo,
  #extras {
    margin-bottom: calc(var(--mobile-tabbar-height) + var(--dd-safe-bottom) + 1rem) !important;
    border-radius: 0 !important;
  }
}