/* ==========================================================================
   ═══ 手机端整体精致化（Material 3 底部导航 · MD3 规范）═══
   仅覆盖视觉样式，不改结构/交互逻辑；仅在 ≤768px 生效。
   ========================================================================== */
@media (max-width: 768px) {

  /* ---------- 底部导航：MD3 底部导航栏（通栏 · surface-container · 胶囊指示器） ---------- */
  .mobile-tabbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 95;
    width: 100%;
    height: calc(64px + env(safe-area-inset-bottom));
    padding: 0 0 env(safe-area-inset-bottom);
    border-radius: 0;
    background: color-mix(in srgb, var(--md-sys-color-surface-container, #f3edf7) 92%, transparent);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: none;
    border-top: 1px solid var(--md-sys-color-outline-variant, #cac4d0);
    box-shadow: none;
  }
  /* MD3 胶囊指示器：64×32 · 圆角16 · secondary-container · 平滑滑动跟随激活项 */
  .nexus-tab-pill {
    position: absolute;
    top: 4px;
    left: 0;
    width: 64px;
    height: 32px;
    border-radius: 16px;
    background: var(--md-sys-color-secondary-container, #e8def8);
    box-shadow: none;
    transition: left 0.42s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 0;
    pointer-events: none;
  }
  .mobile-tab {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
    min-width: 0;
    padding: 8px 0 0;
    font-size: 12px;
    letter-spacing: 0.3px;
    color: var(--md-sys-color-on-surface-variant, #49454f);
    overflow: visible;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.3s ease;
    z-index: 1;
  }
  .mobile-tab i,
  .mobile-tab span {
    position: relative;
    z-index: 1;
  }
  .mobile-tab i {
    font-size: 24px;
    line-height: 1;
    transition: color 0.3s ease;
  }
  .mobile-tab span {
    transition: color 0.3s ease;
  }
  /* MD3 激活态：on-secondary-container（在胶囊上）+ 加粗标签 */
  .mobile-tab.is-active {
    color: var(--md-sys-color-on-secondary-container, #1d192b);
    font-weight: 600;
  }
  .mobile-tab.is-active i {
    color: var(--md-sys-color-on-secondary-container, #1d192b);
  }
  .mobile-tab.is-active span {
    color: var(--md-sys-color-on-secondary-container, #1d192b);
  }
  /* MD3 涟漪（ripple）：触点扩散柔和圆，on-surface 12% */
  .mobile-tab .nexus-press-glow {
    position: absolute;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--md-sys-color-on-surface, #1d1b20) 12%, transparent);
    transform: scale(0);
    animation: nexus-press-in 0.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    pointer-events: none;
    z-index: 0;
  }
  @keyframes nexus-press-in {
    to { transform: scale(3.2); }
  }
  .mobile-tab .nexus-press-glow.out {
    animation: nexus-press-out 0.3s ease-out forwards;
  }
  @keyframes nexus-press-out {
    from { transform: scale(3.2); opacity: 1; }
    to { transform: scale(3.8); opacity: 0; }
  }
  body {
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }

  /* ---------- 个人资料卡：个人主页化（无 banner 时居中） ---------- */
  .profile-card:not(.has-banner) {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 22px 16px 18px;
  }
  .profile-card:not(.has-banner) .profile-avatar {
    width: 88px;
    height: 88px;
    border: 3px solid var(--md-sys-color-surface-container-lowest, #fff);
    box-shadow: 0 4px 18px color-mix(in srgb, var(--md-sys-color-primary, #6750a4) 24%, transparent);
  }
  .profile-card:not(.has-banner) .profile-info {
    flex-basis: auto;
    justify-content: center;
  }
  .profile-card:not(.has-banner) .profile-top {
    flex-basis: auto;
    justify-content: center;
    gap: 8px;
  }
  .profile-card:not(.has-banner) .profile-bio {
    margin: 2px 0 0;
    text-align: center;
    max-width: 100%;
  }
  .profile-card:not(.has-banner) .profile-extras {
    align-items: center;
    text-align: center;
  }
  .profile-card:not(.has-banner) .profile-stats {
    justify-content: center;
    gap: 30px;
    margin-top: 8px;
  }
  .profile-card:not(.has-banner) .profile-stat {
    flex-direction: column;
    align-items: center;
    gap: 1px;
  }
  .profile-card:not(.has-banner) .profile-stat b {
    font-size: 18px;
    font-weight: 700;
  }
  .profile-card:not(.has-banner) .profile-actions {
    margin-left: 0;
    margin-bottom: 0;
  }

  /* banner 布局：头像半叠更精致（白描边 + 阴影提升质感） */
  .profile-card.has-banner .profile-avatar {
    top: -44px;
    left: 18px;
    width: 80px;
    height: 80px;
    border: 3px solid var(--md-sys-color-surface-container-lowest, #fff);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
  }
  .profile-card.has-banner .profile-info {
    margin-left: 100px;
    margin-top: -12px;
  }
  .profile-card.has-banner .profile-bio {
    margin-left: 100px;
    font-size: 13px;
  }
  .profile-card.has-banner .profile-name {
    font-size: 20px;
  }
  /* 统计：数字 + 标签竖排（App 主页式） */
  .profile-stat {
    flex-direction: column;
    align-items: center;
    gap: 1px;
  }
  .profile-stat b {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
  }
  .profile-stat em {
    font-size: 10.5px;
    letter-spacing: 0.2px;
  }
  .profile-stats {
    gap: 24px;
    align-items: center;
  }

  /* ---------- 说说卡片：精致排版（保持无背景 + 细分割线） ---------- */
  .moment-card,
  .post-fuse-card {
    padding: 16px 2px;
    border-bottom-color: color-mix(in srgb, var(--md-sys-color-outline-variant, #cac4d0) 32%, transparent);
  }
  .mc-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
  }
  .mc-meta {
    gap: 8px;
  }
  .mc-name {
    font-size: 15px;
    font-weight: 700;
  }
  .mc-time {
    font-size: 12px;
  }
  .mc-text {
    font-size: 15px;
    line-height: 1.7;
    margin: 8px 0 10px;
  }
  .mc-actions {
    margin-top: 6px;
  }
  .mc-act {
    padding: 6px 12px;
    font-size: 12.5px;
    gap: 6px;
    border-radius: 999px;
  }
  .mc-act i {
    font-size: 17px;
  }
  .mc-act.liked {
    color: var(--md-sys-color-error, #b3261e);
  }
  .mc-act.liked i {
    font-weight: 700;
  }
  /* 媒体卡片大圆角统一 */
  .mc-music,
  .mc-video,
  .mc-live,
  .mc-bili {
    border-radius: 16px;
  }

  /* ---------- 文章卡片：移动端更紧凑精致 ---------- */
  .post-card {
    gap: 14px;
    padding: 13px 0;
  }
  .post-thumb {
    flex: 0 0 32%;
    height: 96px;
    border-radius: 14px;
  }
  .post-body {
    height: 96px;
  }
  .post-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    margin: 1px 0 5px;
    -webkit-line-clamp: 2;
  }
  .post-excerpt {
    font-size: 13px;
    line-height: 1.55;
    -webkit-line-clamp: 2;
  }

  /* ---------- 悬浮按钮组：M3 圆角 FAB 质感 ---------- */
  .nexus-fab-stack .fab-btn,
  .fab-btn {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    font-size: 20px;
  }

  /* ---------- 首页菜单 chips 微调：统一高度、更紧 ---------- */
  .home-menu-item {
    min-height: 34px;
    padding: 0 16px;
    font-size: 13.5px;
  }
  .home-menu-inner {
    gap: 8px;
  }

  /* ---------- 列表卡片入场动效（stagger 已由 nexus-reveal 驱动） ---------- */
  .nexus-reveal {
    will-change: opacity, transform;
  }

  /* ==========================================================================
     ═══ 全站移动端适配增强（单页 / 文章排版 / 防溢出）═══
     ========================================================================== */

  /* 1. 全局防横向溢出：媒体与块级内容不超出视口 */
  .layout,
  main,
  .col-main,
  .col-main > * {
    max-width: 100vw;
    min-width: 0;
  }
  img,
  video,
  iframe,
  canvas,
  svg,
  table,
  pre,
  blockquote {
    max-width: 100% !important;
  }
  img,
  video {
    height: auto;
  }

  /* 2. 豆瓣 / 番剧单页：负 margin 撑出视口时兜底（中栏白框占满宽度） */
  .douban-card,
  .bgm-card {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .douban-card .page-header-hero,
  .bgm-card .page-header-hero {
    padding-left: 14px !important;
    padding-right: 14px !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* 3. 文章 / 单页正文：移动端舒适排版（字号、行距、段距、块级横滑、图片圆角） */
  .single-body.post-content {
    padding: 2px 4px 24px;
    font-size: 15.5px;
    line-height: 1.85;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  .single-body.post-content p {
    margin: 0 0 14px;
    font-size: 15.5px;
    line-height: 1.85;
  }
  .single-body.post-content h1 {
    font-size: 21px;
    line-height: 1.4;
    margin: 22px 0 12px;
  }
  .single-body.post-content h2 {
    font-size: 19px;
    line-height: 1.4;
    margin: 20px 0 11px;
  }
  .single-body.post-content h3 {
    font-size: 17px;
    line-height: 1.4;
    margin: 18px 0 10px;
  }
  .single-body.post-content h4,
  .single-body.post-content h5,
  .single-body.post-content h6 {
    font-size: 15.5px;
    line-height: 1.45;
    margin: 16px 0 9px;
  }
  .single-body.post-content ul,
  .single-body.post-content ol {
    padding-left: 20px;
    margin: 0 0 14px;
  }
  .single-body.post-content li {
    margin: 4px 0;
    line-height: 1.75;
  }
  .single-body.post-content blockquote {
    margin: 14px 0;
    padding: 10px 14px;
    border-radius: 12px;
  }
  .single-body.post-content pre {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 13px;
    line-height: 1.6;
  }
  .single-body.post-content code {
    font-size: 13px;
    white-space: pre-wrap;
    word-break: break-all;
  }
  .single-body.post-content pre code {
    white-space: pre;
  }
  .single-body.post-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .single-body.post-content img {
    border-radius: 12px;
    margin: 6px 0;
  }
  .single-body.post-content iframe,
  .single-body.post-content video {
    border-radius: 12px;
    display: block;
    margin: 8px 0;
  }

  /* 4. 单页头部标题：手机端字号降级、不溢出 */
  .single-header .single-title,
  .page-header-hero .single-title {
    font-size: 21px;
    line-height: 1.4;
  }
  .single-header,
  .page-header-hero {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* 5. 首页横向导航：更紧凑 + 横滑提示（隐藏滚动条保留手势） */
  .home-menu {
    margin: 0 0 10px;
    padding: 0 12px;
  }
  .home-menu-item {
    padding: 7px 13px;
    font-size: 13.5px;
    min-height: 32px;
  }
  .home-menu-inner {
    gap: 3px;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
  }

  /* 6. 说说图片横滑条：隐藏滚动条、手势横滑 */
  .moment-gallery,
  .mc-gallery,
  [class*="moment-img-row"],
  .moment-images {
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
  }
  .moment-gallery::-webkit-scrollbar,
  .mc-gallery::-webkit-scrollbar,
  [class*="moment-img-row"]::-webkit-scrollbar,
  .moment-images::-webkit-scrollbar {
    display: none;
  }

  /* 7. 评论区文字：手机端更紧凑可读 */
  .comment-item,
  .comment-body,
  .comment-text {
    font-size: 14px;
    line-height: 1.7;
  }
  .comment-form,
  .comment-input,
  .comment-textarea {
    font-size: 14px;
  }

  /* 8. 三栏兜底：手机端强制单列、中栏归位第一列（修复部分单页残留双列导致
        主内容偏移留白——768 断点漏了给 .col-main 归位，1280 的 grid-column:2
        残留会把 main 推到隐式第 2 列；内容窄时尤其明显，如相册空状态 → main 左偏） */
  .layout,
  .layout-no-left .layout,
  .layout-no-right .layout,
  .layout-no-left.layout-no-right .layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .layout .col-main,
  .layout-no-left .col-main,
  .layout-no-right .col-main,
  .layout-no-left.layout-no-right .col-main {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
}