/* ==========================================
   响应式布局 — 平板 & 手机适配
   ========================================== */

/* ---- 平板: 768px - 1024px ---- */
@media (max-width: 1024px) {
    .sidebar {
        width: 200px;
    }

    .top-bar input[type="text"] {
        width: 120px;
    }

    .top-bar {
        gap: 6px;
        padding: 0 var(--space-sm);
        height: auto;
        min-height: 48px;
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .btn-primary,
    .btn-danger,
    .btn-outline {
        padding: 4px 10px;
        font-size: 0.8rem;
        white-space: nowrap;
    }

    .video-wrapper {
        max-height: 45%;
        min-height: 200px;
    }

    .content-body {
        padding: var(--space-sm);
        gap: var(--space-sm);
    }

    .my-name,
    .my-id {
        max-width: 60px;
    }

    /* 平板: 缩小侧边栏字体，确保底栏可见 */
    .user-bar {
        height: 44px;
        padding: 0 var(--space-xs);
    }
    .server-header {
        height: 40px;
        font-size: var(--font-size-md);
    }
    .diag-toggle-btn {
        font-size: 0.7rem;
        padding: 4px var(--space-sm);
    }
}

/* ---- 手机: < 768px ---- */
@media (max-width: 768px) {
    /* 侧边栏改为滑入抽屉 */
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 280px;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 100;
        box-shadow: 4px 0 20px rgba(0,0,0,0.5);
    }
    .sidebar.open {
        transform: translateX(0);
    }

    /* 遮罩层 */
    .sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 99;
    }
    .sidebar-overlay.active {
        display: block;
    }

    /* 汉堡菜单按钮可见 */
    .hamburger-btn {
        display: flex;
    }

    /* 顶栏: 横向滚动 */
    .top-bar {
        height: auto;
        min-height: 48px;
        padding: var(--space-sm);
        gap: 6px;
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .top-bar input[type="text"] {
        width: 120px;
        font-size: 0.8rem;
    }

    /* 按钮缩小 */
    .btn-primary,
    .btn-danger,
    .btn-outline {
        padding: 4px 8px;
        font-size: 0.75rem;
    }

    /* 视频区缩小 */
    .video-wrapper {
        max-height: 30vh;
        min-height: 180px;
    }

    /* 内容区缩小边距 */
    .content-body {
        padding: var(--space-sm);
        gap: var(--space-sm);
    }

    /* 聊天区输入框固定底部 */
    .chat-input-wrapper {
        position: sticky;
        bottom: 0;
        margin-top: var(--space-sm);
    }

    /* 消息块紧凑 */
    .msg-block {
        gap: var(--space-sm);
    }
    .msg-avatar {
        width: 32px;
        height: 32px;
        font-size: 0.7rem;
    }

    /* Toast 通知调整 */
    .toast-container {
        top: var(--space-sm);
        right: var(--space-sm);
        left: var(--space-sm);
    }
    .toast {
        max-width: 100%;
    }

    /* 弹窗上限 */
    #personal-vol-popup {
        max-width: 220px;
    }

    /* 触控增强：最小触控区域 */
    button,
    .voice-user,
    .voice-channel {
        min-height: 44px;
    }

    .icon-btn {
        width: 40px;
        height: 40px;
    }

    /* 滑块触控增强 */
    input[type="range"] {
        height: 8px;
    }
    input[type="range"]::-webkit-slider-thumb {
        width: 20px;
        height: 20px;
    }

    /* 隐藏部分非关键元素 */
    .top-bar .divider.hide-mobile {
        display: none;
    }

    .quality-select {
        font-size: 0.75rem;
        padding: 4px;
    }
}

/* ---- 极小屏: < 400px ---- */
@media (max-width: 400px) {
    .sidebar {
        width: 100%;
    }

    .top-bar input[type="text"] {
        width: 80px;
    }

    .top-bar .badge {
        font-size: 0.65rem;
        padding: 2px 6px;
    }

    .btn-primary,
    .btn-danger,
    .btn-outline {
        padding: 4px 6px;
        font-size: 0.7rem;
    }

    .video-wrapper {
        min-height: 150px;
    }
}