/* public/css/mobile.css */
@media screen and (max-width: 768px) {

    /* ========== 全局调整 ========== */
    body {
        margin-left: 0 !important;
        padding-bottom: 70px;
    }

    /* 隐藏 PC 端右侧面板和右下角浮动按钮 */
    .right-sidebar,
    .info-card,
    .sidebar-card,
    .fab:not(.mobile-nav .fab) {
        display: none !important;
    }

    /* ========== 顶部栏精简 ========== */
    .top-bar-container {
        padding: 0 6px;
    }

    .search-area {
        width: 34px;
        background: transparent;
        padding: 0;
        margin-left: auto;
        margin-right: 2px;
    }

    .search-area input {
        display: none;
    }

    .search-area button {
        font-size: 1.2rem;
    }

    .logo {
        font-size: 0.75rem;
        /* 进一步缩小 */
        line-height: 1.25;
        white-space: normal;
        word-break: break-word;
        max-width: 115px;
        /* 适当放宽以容纳两行 */
        text-align: left;
        margin-right: 2px;
    }

    .about-link span {
        display: none;
    }

    .about-link i {
        margin-right: 0;
        font-size: 1.2rem;
    }

    .notifications-icon {
        margin-left: 4px;
    }

    /* ========== 侧边栏悬浮弹出 ========== */
    #sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 260px;
        z-index: 200;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        box-shadow: 2px 0 12px rgba(0, 0, 0, 0.2);
        margin-top: 0;
    }

    #sidebar.open-mobile {
        transform: translateX(0);
    }

    /* 确保侧边栏内所有链接可点击 */
    #sidebar .sidebar-link {
        pointer-events: auto !important;
    }

    /* 遮罩层 */
    .sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 199;
        display: none;
    }

    .sidebar-overlay.show {
        display: block;
    }

    /* 侧边栏打开时背景不可滚动 */
    body.sidebar-open {
        overflow: hidden;
    }

    /* 侧边栏本身 z-index 要高于主内容 */
    #sidebar {
        z-index: 200 !important;
    }

    /* 主内容在侧边栏打开时禁止交互（可选，如果遮挡的话可以不设置） */
    body.sidebar-open .main {
        pointer-events: none;
    }

    /* ========== 主内容区 ========== */
    .container {
        padding: 0 8px;
    }

    .post-card,
    .detail-container,
    .notification-card,
    .circle-card,
    .settings-wrapper,
    .create-wrapper,
    .rules-container,
    .about-card,
    .admin-container,
    .notifications-wrapper,
    .profile-grid,
    .circle-detail-wrapper,
    .post-form-container,
    .edit-wrapper {
        margin-left: 0;
        margin-right: 0;
        border-radius: 12px;
    }

    .two-columns {
        flex-direction: column;
    }

    .posts-list {
        flex: 1;
    }

    /* ========== 底部导航 ========== */
    .mobile-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 60px;
        background: white;
        border-top: 1px solid #eef2f6;
        display: flex;
        justify-content: space-around;
        align-items: center;
        z-index: 150;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
    }

    .mobile-nav a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: #6c757d;
        font-size: 0.6rem;
        flex: 1;
        height: 100%;
        padding: 0;
        margin: 0;
        line-height: 1.2;
    }

    .mobile-nav a i {
        font-size: 1.4rem;
        margin-bottom: 2px;
        display: block;
    }

    .mobile-nav a.active,
    .mobile-nav a.active i,
    .mobile-nav a.active span {
        color: #1E88E5;
    }

    .mobile-nav .fab {
        position: relative;
        bottom: auto;
        right: auto;
        width: 48px;
        height: 48px;
        background-color: #1E88E5;
        color: white;
        border-radius: 50%;
        display: flex !important;
        align-items: center;
        justify-content: center;
        font-size: 28px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        margin-top: -22px;
        flex: 0 0 48px;
        padding: 0;
    }

    .mobile-nav .fab i {
        color: white;
        font-size: 28px;
        line-height: 1;
        margin: 0;
    }
}